JSFiddle - React, Tailwind, and code Playground

by Garth Edwards

HTML

<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<body ng-app="myApp">
    <div ng-controller="DistanceController">Distance Limits<br>
        <div class="distancewrapper">

                <div distance-graphic distance-value="distanceLimit.current" max="distanceLimit.max" on-distance-selected="distanceSelectedLimit(distance)"></div>

        </div>
    </div>
</body>

CSS

.distancewrapper {
	max-width: 320px;
	margin: 0 auto;
    background-color: #787878;
    position: relative;
}
.round {
	width:320px;
	height:320px;
	margin:10px auto;
    background-color: #989898;
    position: relative;
}
.round svg {
	width:100%;
	height:100%;
}
.round svg a {
	width:100%;
	height:100%;
}
.round circle:hover {
	fill:#be1e2d;
	opacity:0.9;
}
.round circle.active {
	fill:#be1e2d;
	opacity:0.9;
}
.round circle {
    fill:#595a5c;
	opacity:0.3;
}
.round circle:hover, .round circle[clicked="true"] {
    fill: #BE1E2D;
    opacity: 0.9;
}
text.svg-text {
	fill:#fff;
}
a:hover> text.svg-text  {
	fill:#000;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('DistanceController', ['$scope', function ($scope) {
    $scope.distanceLimit = {
        current: 5,            // this is the initial 'current' rating
    };

    $scope.distanceSelectedLimit = function (distance) {
        console.log('distanceLimit.current', distance);
    };

}]);

myApp.directive('distanceGraphic', function() {
	return {
		restrict : 'A',
		template :
        '<div class="round">' +
			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
				'<a xlink:href="" target="_top" ng-repeat="distancesvg in distancesvgs">' +
                    '<circle  class="{{distancesvg.selected}}" display="inline" ng-attr-cx="{{distancesvg.cx}}" ng-attr-cy="{{distancesvg.cy}}" ng-attr-r="{{distancesvg.r}}" ng-click="toggle($index)"></circle>' +
					'<text ng-attr-x="{{distancesvg.textx}}" ng-attr-y="{{distancesvg.texty}}" class="svg-text">{{distancesvg.distance}}</text>' +
				'</a>' +
			'</svg>' +
        '</div>',
		scope : {
			distanceValue : '=',
			max : '=',
			onDistanceSelected : '&'
		},
		link : function(scope, elem, attrs) {

            scope.distancesvgs = [
                {cx : 160, cy : 155, r : 155, distance : 1000, textx : 145, texty : 15, selected:""},
				{cx : 160, cy : 155, r : 135, distance : 500, textx : 149, texty : 35, selected:""},
				{cx : 160, cy : 155, r : 115, distance : 100, textx : 149, texty : 55, selected:""},
				{cx : 160, cy : 155, r : 95, distance : 50, textx : 154, texty : 75, selected:""},
				{cx : 160, cy : 155, r : 75, distance : 10, textx : 154, texty : 95, selected:""},
				{cx : 160, cy : 155, r : 55, distance : 5, textx : 158, texty : 115, selected:""},
				{cx : 160, cy : 155, r : 35, distance : 1, textx : 158, texty : 157, selected:""}
			];
            
			var updateSelected = function() {
				for (var i = 0; i < scope.distancesvgs.length; i++) {
                    if(i >= scope.distanceValue){
                  ...