wefra/lib/d3-v6-oop/donut_chart.js

84 lines
2.9 KiB
JavaScript

'use strict';
var DonutChart = {
init: function(url, html_tag_attr, label_accessor, value_accessor, color_accessor, inner_radius=80){
this.url = url;
this.html_tag_attr = html_tag_attr;
this.label_accessor = label_accessor;
this.value_accessor = value_accessor;
this.color_accessor = color_accessor;
this.inner_radius = inner_radius;
this.render();
this.update();
},
prepare_data: function(){
var self = this;
return d3.json(urlRoot+this.url, config_requestArguments).then(function(dataset){
self.data = [];
var total_val = d3.sum(dataset, self.value_accessor);
dataset.forEach(function(d){
self.data.push({
label: self.label_accessor(d),
value: self.value_accessor(d) / total_val * 100,
value_raw: self.value_accessor(d),
color: self.color_accessor(d)
})
});
});
},
render: function(){
this.svg = d3.select(this.html_tag_attr).append("svg");
this.pie_group = this.svg
.append("g");
},
update: function(){
var self = this;
this.prepare_data().then(function(){
var width = $(self.svg.node()).width();
var height = $(self.svg.node()).height();
var mini_dim = d3.min([width, height]);
var margin = mini_dim * 0.05;
var outerRadius = (mini_dim / 2) - margin;
var innerRadius = outerRadius * self.inner_radius / 100;
var group_vertical_position = height / 2
var group_horizontal_position = width / 2
var pie = d3.pie()
.value(function(d){ return d.value; });
var arc = d3.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);
self.pie_group
.attr("transform", "translate(" + group_horizontal_position + "," + group_vertical_position + ")")
.selectAll("path")
.data(pie(self.data))
.enter()
.append("path");
self.pie_group
.selectAll("path")
.attr("d", function(d){ return arc(d); })
.attr("fill", function(d){ return self.color_accessor(d.data); });
});
},
}
// Exemple d'utilisation :
// get_donut_chart(
// "custom/script/ajax/my_kpi.php",
// "my_html_tag_attr",
// function(d){ return d.label; },
// function(d){ return d.value; },
// function(d){ return d.color; },
// 0.75
// );
var get_donut_chart = function(url, html_tag_attr, label_accessor, value_accessor, color_accessor, inner_radius=80){
var my_donut = {};
Object.assign(my_donut, DonutChart);
my_donut.init(url, html_tag_attr, label_accessor, value_accessor, color_accessor, inner_radius);
return my_donut;
};