Pie chart for locations

pie chart for click

by Lio Fleishman

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <pie-chart label="labelNum" percent="percentNum"></pie-chart>
</div>

CSS

.pie {
  position: relative;
  width: 100px;
  line-height: 100px;
  border-radius: 50%;
  background: #d4d4d4;
  background-image:linear-gradient(to right, transparent 50%, #ea8c17 0);
  color: transparent;
  text-align: center;
}
.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
  }
.pie::after {
    content: 'items';
    position: absolute;
    top: 11%;
    left: 11%;
    width: 78%;
    height: 78%;
    border-radius: 50%;
    background-color: #fff;
    transform-origin: center;
    color: #000;
    font-family: Helvetica Neue;
    font-size: 10px;
    }
    
@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #ea8c17; }
}

.pie_container {
  position:relative;
}
.pie_label {
    font-family: Helvetica Neue, sans-serif;
    font-size: 2em;
    font-weight: 300;
    color: #000;
    position: absolute;
    top: 17%;
    left: 30px;
    z-index: 999;
}

JavaScript

angular.module('myApp', ['myDirectiveModule'])
.controller('myCtrl',["$scope", function($scope){
$scope.labelNum = 10;
$scope.percentNum = 70;
}]);
angular.module('myDirectiveModule', [])
.directive('pieChart', function(){
	return {
  	restrict: 'E',
    transclude: true,
    scope: {
      label: '=',
      percent: '='
    },
    template:'<div class="pie_container">'+
    					'<span class="pie_label">{{ label }}</span>'+
    						'<div class="pie" style="animation-delay: -{{percent}}s">{{percent}}</div>'+
  					'</div>',
    link: function(scope, element, attrs) {
			element.on('click', function(){
      	console.log(scope.percent)
      })
    }
  }
})