71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
|
/**
|
||
|
|
* An element which displays a donut chart of data.
|
||
|
|
*/
|
||
|
|
angular.module('quay').directive('donutChart', function () {
|
||
|
|
var directiveDefinitionObject = {
|
||
|
|
priority: 0,
|
||
|
|
templateUrl: '/static/directives/donut-chart.html',
|
||
|
|
replace: false,
|
||
|
|
transclude: false,
|
||
|
|
restrict: 'C',
|
||
|
|
scope: {
|
||
|
|
'width': '@width',
|
||
|
|
'data': '=data',
|
||
|
|
},
|
||
|
|
controller: function($scope, $element) {
|
||
|
|
$scope.created = false;
|
||
|
|
|
||
|
|
// Based on: http://bl.ocks.org/erichoco/6694616
|
||
|
|
var chart = d3.select($element.find('.donut-chart-element')[0]);
|
||
|
|
|
||
|
|
var renderChart = function() {
|
||
|
|
if (!$scope.data || !$scope.data.length) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var $chart = $element.find('.donut-chart-element');
|
||
|
|
$chart.empty();
|
||
|
|
|
||
|
|
var width = $scope.width * 1;
|
||
|
|
var chart_m = width / 2 * 0.14;
|
||
|
|
var chart_r = width / 2 * 0.85;
|
||
|
|
|
||
|
|
var topG = chart.append('svg:svg')
|
||
|
|
.attr('width', (chart_r + chart_m) * 2)
|
||
|
|
.attr('height', (chart_r + chart_m) * 2)
|
||
|
|
.append('svg:g')
|
||
|
|
.attr('class', 'donut')
|
||
|
|
.attr('transform', 'translate(' + (chart_r + chart_m) + ',' +
|
||
|
|
(chart_r + chart_m) + ')');
|
||
|
|
|
||
|
|
|
||
|
|
var arc = d3.svg.arc()
|
||
|
|
.innerRadius(chart_r * 0.6)
|
||
|
|
.outerRadius(function(d, i) {
|
||
|
|
return i == $scope.data.length - 1 ? chart_r * 1.2 : chart_r * 1;
|
||
|
|
});
|
||
|
|
|
||
|
|
var pie = d3.layout.pie()
|
||
|
|
.sort(null)
|
||
|
|
.value(function(d) {
|
||
|
|
return d.value;
|
||
|
|
});
|
||
|
|
|
||
|
|
var reversed = $scope.data.slice(0).reverse();
|
||
|
|
var g = topG.selectAll(".arc")
|
||
|
|
.data(pie(reversed))
|
||
|
|
.enter().append("g")
|
||
|
|
.attr("class", "arc");
|
||
|
|
|
||
|
|
g.append("path")
|
||
|
|
.attr("d", arc)
|
||
|
|
.style('stroke', '#fff')
|
||
|
|
.style("fill", function(d) { return d.data.color; });
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
$scope.$watch('data', renderChart);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return directiveDefinitionObject;
|
||
|
|
});
|