doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
245 lines (217 loc) • 10.6 kB
JavaScript
define(['jquery',
'underscore',
'jqueryuiwidget',
'handlebars',
'd3'
],
function($, _, ui, Handlebars, d3) {
$.widget("doe.doedonut2", {
// Options to be used as defaults
options: {
type: '',
data: {},
service: null,
colors: null
},
_template: function() {
var arrHTML = [];
arrHTML.push('<div class="donutChart">');
arrHTML.push('</div>');
return arrHTML.join('');
},
_create: function() {
this._fetchAndRender();
},
_fetchAndRender: function() {
this._compileTemplate();
},
_compileTemplate: function() {
var compiled = Handlebars.compile(this._template());
this.element.html(compiled({}));
this._bindEvents();
},
_bindEvents: function() {
var minWidth = 180, //set the minimum width and height
minHeight = 180,
width = 2 * (this.element.width() < minWidth ? minWidth : this.element.width()),
height = 1.25 * (this.element.height() < minHeight ? minHeight : this.element.height()),
radius = (Math.max(width, height) / 4) * 0.9,
donutWidth = radius / 4,
// innerParam = 0;
innerParam = radius - donutWidth
var legendRectSize = radius / 12;
var legendSpacing = legendRectSize / 4;
var color = d3.scaleOrdinal()
.range(this.options.colorData);
//var color = d3.scaleOrdinal(d3.schemeCategory10);
// var dataset = this.options.data;
essaData = this.options;
//console.log(essaData);
var dataset = essaData["Data"];
//console.log(dataset);
var visualType = essaData["Visualization"];
//console.log(visualType);
var labelField = essaData["XFields"]
var countField = essaData["YFields"]
var title = essaData["ChartTitle"]
//console.log(title);
var subTitle = essaData["ChartSubTitle"]
//console.log(subTitle);
var showLegend = essaData["Legend"]
//console.log(showLegend);
var tooltipTemplate = essaData["TooltipTemplate"]
//console.log(tooltipTemplate);
var tooltipFields = essaData["TooltipFields"]
//console.log(tooltipFields);
var label = tooltipFields[0];
console.log(label);
var count = tooltipFields[1];
// this.element.find('h2.title').html(title);
// this.element.find('p.subTitle').html("--" + subTitle);
// if (this.options.type == 'donut') {
// if (visualType == 'donut') {
// innerParam = radius - donutWidth
// }
var arc = d3.arc()
.outerRadius(radius)
.innerRadius(innerParam);
var arcOver = d3.arc()
.outerRadius(radius * 1.1)
.innerRadius(innerParam * 1.1);
var pie = d3.pie()
.sort(null)
.value(function(d) {
return d[countField];
});
var svg = d3.select(this.element.find('.donutChart').get(0))
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 4 + "," + 3 * height / 5 + ")");
svg.append("text")
.attr('class', 'title')
.attr("x", width / 30)
.attr("y", -height / 2)
.style("text-anchor", "start")
.text(title);
svg.append("text")
.attr('class', 'subTitle')
.attr("x", width / 30)
.attr("y", -height / 2 + 7 * legendSpacing)
.style("text-anchor", "start")
.text(subTitle);
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(i);
// return color(d["data"][labelField]);
});
// Add tooltip
var tooltip = d3.select(this.element.find('.donutChart').get(0))
.append("div")
.attr("class", "tooltip");
// tooltip.append("div")
// .attr("class", 'label');
// Add legend if true
if (showLegend == true) {
var legend = svg.selectAll(this.element.find('.legend').get(0))
// .data(color.domain())
.data(pie(dataset))
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * (pie(dataset)).length / 2;
var horz = 14 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function(d, i) {
return color(i);
})
// .style('stroke', color)
.on('mouseover', function(d, i) {
d3.select(this)
.style("stroke", "black");
console.log("legend event!");
var unitPath = path["_groups"][0][i];
d3.select(unitPath)
.attr("d", arcOver);
})
.on('mouseout', function(d, i) {
d3.select(this)
.style("stroke", "none");
var unitPath = path["_groups"][0][i];
d3.select(unitPath)
.attr("d", arc);
tooltip.style('display', 'none');
});
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d["data"][labelField] + ' (' + d["data"][countField] + '%' + ')' });
}
// Add mouse events
path.on('mouseover', function(d) {
// var total = d3.sum(dataset.map(function(d) {
// return d[countField];
// }));
//var percent = Math.round(1000 * d.data.count / total) / 10;
//var percent = ((1000 * d["data"][countField] / total) / 10).toFixed(2);
// tooltip.html('The percentage of ' + d["data"][labelField] + ' are ' + d["data"][countField] + '%');
// tooltip.select('.label').html(label + ": " + d["data"][labelField]);
// tooltip.select('.percent').html(count + ": " + d["data"][countField] + '%');
// tooltip.html(label + ": " + d["data"][labelField] + "<br>" +
// count + ": " + d["data"][countField] + '%');
if (tooltipTemplate) {
var template = Handlebars.compile(tooltipTemplate);
// var context = {
// Race: d["data"][labelField],
// RacePctGrad: d["data"][countField]
// };
var compiledTmpl = template(d["data"]);
tooltip.html(compiledTmpl);
//tooltip.select('.percent').html('Percentage: ' + percent + '%');
tooltip.style('display', 'block');
} else { tooltip.style('display', 'none'); }
});
path.on('mouseout', function(d, i) {
d3.select(this)
.attr("d", arc);
// .attr("stroke", "none")
// var legendRow = legend["_groups"][0][i];
// d3.select(legendRow)
// .style("stroke", "none");
tooltip.style('display', 'none');
});
path.on('mousemove', function(d, i) {
d3.select(this)
// .attr("stroke", "#000")
.attr("d", arcOver);
// .attr("stroke-width", "2px")
// .attr("stroke-opacity", .5);
// var legendRow = legend["_groups"][0][i];
// d3.select(legendRow)
// .style("stroke", "black");
tooltip.style('top', (d3.event.layerY + 10) + 'px')
.style('left', (d3.event.layerX + 30) + 'px');
});
},
destroy: function() {
},
_setOption: function(key, value) {
this._super(key, value);
},
_setOptions: function(options) {
this._super(options);
}
});
});