mirror of
https://github.com/bendtherules/chart-builder-demo.git
synced 2026-08-18 13:42:05 +00:00
358 lines
12 KiB
JavaScript
358 lines
12 KiB
JavaScript
var app = angular.module("chart-builder.directives",["chart-builder.filters"]);
|
|
|
|
app.value("chartTypes",["column","bar","pie"]);
|
|
|
|
app.directive("dynamicChart", function (d3Tip) {
|
|
var controller = function (chartTypes,$scope) {
|
|
$scope.chartTypes = chartTypes;
|
|
$scope.chartTypeChosen = $scope.chartTypes[0];
|
|
|
|
$scope.$watch("[chartData,chartAxisLabel,chartTypeChosen]",function(){
|
|
// console.log([$scope.chartData,$scope.chartAxisLabel]);
|
|
if ($scope.chartTypeChosen && $scope.chartData){
|
|
drawChart($scope.chartTypeChosen,$scope.chartData,$scope.chartAxisLabel);
|
|
}
|
|
else
|
|
{
|
|
cleanChart();
|
|
}
|
|
},
|
|
true);
|
|
|
|
/* internal functions start here */
|
|
function drawChart(type,data,axisLabel) {
|
|
var typeMapping = {
|
|
"column" : drawColumnChart,
|
|
"bar" : drawBarChart,
|
|
"pie" : drawPieChart
|
|
};
|
|
|
|
if (typeof(type) === "string"){
|
|
var processedData = processData(type,data,axisLabel);
|
|
data = processedData.data;
|
|
axisLabel = processedData.axisLabel;
|
|
|
|
var drawFunc = typeMapping[type.toLowerCase()];
|
|
if (typeof(drawFunc) !== undefined){
|
|
drawFunc(data,axisLabel);
|
|
}
|
|
}
|
|
}
|
|
|
|
function processData(type,data,axisLabel) {
|
|
var tmpData = data;
|
|
var tmpAxisLabel = axisLabel;
|
|
var newData = [];
|
|
var keys = Object.keys(tmpData);
|
|
var newAxisLabel;
|
|
if (type.toLowerCase() === "bar")
|
|
{
|
|
for (var i = keys.length - 1; i >= 0; i--) {
|
|
newData.push({"y":keys[i],"x":tmpData[keys[i]]});
|
|
}
|
|
newAxisLabel = [tmpAxisLabel[1],tmpAxisLabel[0]];
|
|
}
|
|
else
|
|
{
|
|
for (var i = keys.length - 1; i >= 0; i--) {
|
|
newData.push({"x":keys[i],"y":tmpData[keys[i]]});
|
|
}
|
|
newAxisLabel = tmpAxisLabel;
|
|
}
|
|
|
|
return {
|
|
"data": newData,
|
|
"axisLabel": newAxisLabel
|
|
};
|
|
}
|
|
|
|
function drawColumnChart(data,axisLabel)
|
|
{
|
|
var eleChart = d3.select(".chart").html(""),
|
|
eleChartBbox = eleChart.node().getBoundingClientRect(),
|
|
margin = {top: 15, right: 30, bottom: 60, left: 70},
|
|
width = +eleChartBbox.width - margin.left - margin.right,
|
|
height = +eleChartBbox.height - margin.top - margin.bottom;
|
|
|
|
var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height);
|
|
|
|
var x = d3.scaleBand().rangeRound([0, width]).padding(0.25),
|
|
y = d3.scaleLinear().rangeRound([height, 0]);
|
|
|
|
var g = svg.append("g")
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
|
|
x.domain(data.map(function(d) { return d.x; }));
|
|
y.domain([0, d3.max(data, function(d) { return d.y; })]);
|
|
|
|
g.append("g")
|
|
.attr("class", "axis axis-x")
|
|
.style("font-size",".75em")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x));
|
|
|
|
g.append("g")
|
|
.attr("class", "axis axis-y")
|
|
.style("font-size",".75em")
|
|
.call(d3.axisLeft(y).ticks(10).tickFormat(d3.format(".0s")))
|
|
.append("text")
|
|
.attr("transform", "translate(15,0) rotate(-90)")
|
|
.attr("y", 6)
|
|
.attr("dy", "0.71em")
|
|
.attr("text-anchor", "end")
|
|
.text("y");
|
|
|
|
var xLabel = ((axisLabel.length == 2) && axisLabel[0] ) || "X-label";
|
|
var yLabel = ((axisLabel.length == 2) && axisLabel[1] ) || "Y-label";
|
|
|
|
var xLabelPos = d3.select(".axis-x").node().getBBox().height*2 + height;
|
|
var yLabelPos = -d3.select(".axis-y").node().getBBox().width*0.65;
|
|
|
|
g
|
|
.append('g').classed("label-x",true)
|
|
.attr('transform', 'translate(' + (width/2) + ', ' + xLabelPos + ')')
|
|
.append('text')
|
|
.attr('text-anchor', 'middle')
|
|
.text(xLabel);
|
|
|
|
g
|
|
.append('g').classed("label-y",true)
|
|
.attr('transform', 'translate(' + yLabelPos + ', ' + (height/2) + ') rotate(-90)')
|
|
.append('text')
|
|
.attr('text-anchor', 'middle')
|
|
.attr("shape-rendering","crispEdges")
|
|
.text(yLabel);
|
|
|
|
var tip_points = d3Tip.tip
|
|
.attr('class', 'd3-tip')
|
|
.html(function(d) { return d.y; });
|
|
|
|
var vis = svg.call(tip_points);
|
|
|
|
g.selectAll(".bar")
|
|
.data(data)
|
|
.enter().append("rect")
|
|
.attr("class", "bar")
|
|
.attr("x", function(d) { return x(d.x); })
|
|
.attr("y", function(d) { return y(d.y); })
|
|
.attr("width", x.bandwidth())
|
|
.attr("height", function(d) { return height - y(d.y); })
|
|
.on('mouseover', function () {
|
|
tip_points.show.apply(this,arguments);
|
|
|
|
})
|
|
.on('mouseout', function () {
|
|
tip_points.hide.apply(this,arguments);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function drawBarChart(data,axisLabel){
|
|
var eleChart = d3.select(".chart").html(""),
|
|
eleChartBbox = eleChart.node().getBoundingClientRect(),
|
|
margin = {top: 15, right: 80, bottom: 60, left: 80},
|
|
width = +eleChartBbox.width - margin.left - margin.right,
|
|
height = +eleChartBbox.height - margin.top - margin.bottom;
|
|
|
|
var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height);
|
|
|
|
var x = d3.scaleLinear().rangeRound([0, width]),
|
|
y = d3.scaleBand().rangeRound([height, 0]).padding(0.25);
|
|
|
|
var g = svg.append("g")
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
|
|
.attr("width",width).attr("height",height);
|
|
|
|
|
|
x.domain([0, d3.max(data, function(d) { return d.x; })]);
|
|
y.domain(data.map(function(d) { return d.y; }));
|
|
|
|
g.append("g")
|
|
.attr("class", "axis axis-x")
|
|
.style("font-size",".75em")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x).ticks(10).tickFormat(d3.format(".0s")));
|
|
|
|
g.append("g")
|
|
.attr("class", "axis axis-y")
|
|
.style("font-size",".75em")
|
|
.call(d3.axisLeft(y))
|
|
.append("text")
|
|
.attr("transform", "translate(15,0) rotate(-90)")
|
|
.attr("y", 6)
|
|
.attr("dy", "0.71em")
|
|
.attr("text-anchor", "end")
|
|
.text("y");
|
|
|
|
var xLabel = ((axisLabel.length == 2) && axisLabel[0] ) || "X-label";
|
|
var yLabel = ((axisLabel.length == 2) && axisLabel[1] ) || "Y-label";
|
|
|
|
var xLabelPos = d3.select(".axis-x").node().getBBox().height*2 + height;
|
|
var yLabelPos = -d3.select(".axis-y").node().getBBox().width*0.65;
|
|
|
|
g
|
|
.append('g').classed("label-x",true)
|
|
.attr('transform', 'translate(' + (width/2) + ', ' + xLabelPos + ')')
|
|
.append('text')
|
|
.attr('text-anchor', 'middle')
|
|
.text(xLabel);
|
|
|
|
g
|
|
.append('g').classed("label-y",true)
|
|
.attr('transform', 'translate(' + yLabelPos + ', ' + (height/2) + ') rotate(-90)')
|
|
.append('text')
|
|
.attr('text-anchor', 'middle')
|
|
.attr("shape-rendering","crispEdges")
|
|
.text(yLabel);
|
|
|
|
var tip_points = d3Tip.tip
|
|
.attr('class', 'd3-tip')
|
|
.html(function(d) { return d.x; })
|
|
.direction("e")
|
|
.offset([0,10]);
|
|
|
|
var vis = svg.call(tip_points);
|
|
|
|
g.selectAll(".bar")
|
|
.data(data)
|
|
.enter().append("rect")
|
|
.attr("class", "bar")
|
|
.attr("x", function(d) { return 0; })
|
|
.attr("y", function(d) { return y(d.y); })
|
|
.attr("width", function(d) { return x(d.x); })
|
|
.attr("height", y.bandwidth())
|
|
.on('mouseover', function () {
|
|
tip_points.show.apply(this,arguments);
|
|
|
|
})
|
|
.on('mouseout', function () {
|
|
tip_points.hide.apply(this,arguments);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function drawPieChart (data,axisLabel) {
|
|
var eleChart = d3.select(".chart").html(""),
|
|
eleChartBbox = eleChart.node().getBoundingClientRect(),
|
|
margin = {top: 10, right: 15, bottom: 50, left: 15},
|
|
width = +eleChartBbox.width - margin.left - margin.right,
|
|
height = +eleChartBbox.height - margin.top - margin.bottom,
|
|
radius = Math.min(width, height) / 2;
|
|
|
|
var color = d3.scaleOrdinal().domain(data.map(function(d){return d.x;}))
|
|
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
|
|
|
|
var arc = d3.arc()
|
|
.outerRadius(radius - 10)
|
|
.innerRadius(0);
|
|
|
|
var pie = d3.pie()
|
|
.sort(null)
|
|
.value(function(d) { return d.y; });
|
|
|
|
var svg = eleChart.append("svg")
|
|
.attr("width",eleChartBbox.width)
|
|
.attr("height",eleChartBbox.height);
|
|
|
|
var g = svg
|
|
.append("g")
|
|
.attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
|
|
var groupArc = g.selectAll(".arc")
|
|
.data(pie(data))
|
|
.enter().append("g")
|
|
.attr("class", "arc");
|
|
|
|
groupArc.append("path")
|
|
.attr("d", arc)
|
|
.style("fill", function(d) {return color(d.data.x); });
|
|
|
|
groupArc.append("text")
|
|
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
|
|
.attr("dy", ".35em")
|
|
.style("text-anchor", "middle")
|
|
.text(function(d) { return d.data.x; })
|
|
.style("fill", "white");
|
|
|
|
var xLabel = axisLabel[0];
|
|
var yLabel = axisLabel[1];
|
|
|
|
svg
|
|
.append('g').classed("title",true)
|
|
.attr('transform', 'translate(' + (width/2 + margin.left/2) + ', ' + (eleChartBbox.height - margin.bottom/2 ) + ')')
|
|
.append('text')
|
|
.attr('text-anchor', 'middle')
|
|
.text(""+yLabel+" vs. "+xLabel);
|
|
|
|
var tip_points = d3Tip.tip
|
|
.attr('class', 'd3-tip')
|
|
.html(function(d) {return d.data.y; })
|
|
.direction(function(d){
|
|
var availableDirection = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
|
|
|
|
var midAngle = ((d.startAngle + d.endAngle)/2)*180/Math.PI;
|
|
var indexDirection = Math.floor(midAngle/360 *8);
|
|
|
|
var direction = availableDirection[indexDirection];
|
|
// console.log(direction);
|
|
return direction;
|
|
})
|
|
.offset(function (d) {
|
|
var midAngle = ((d.startAngle + d.endAngle)/2);
|
|
|
|
midAngle = Math.floor(midAngle/(Math.PI*2/8))*(Math.PI*2/8);
|
|
midAngle = midAngle - Math.PI/2;
|
|
|
|
var extraRadius = 15;
|
|
var posCentre = [-extraRadius*Math.sin(midAngle),-extraRadius*Math.cos(midAngle)];
|
|
|
|
// console.log(midAngle*180/Math.PI);
|
|
// console.log(posCentre);
|
|
return posCentre;
|
|
});
|
|
|
|
var vis = svg.call(tip_points);
|
|
|
|
groupArc
|
|
.on('mouseover', function () {
|
|
// console.log([event,this])
|
|
if ("path" === event.target.nodeName)
|
|
{
|
|
tip_points.show.apply(this,arguments);
|
|
}
|
|
|
|
})
|
|
.on('mouseout', function () {
|
|
if ("path" === event.target.nodeName)
|
|
{
|
|
tip_points.hide.apply(this,arguments);
|
|
}
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function cleanChart() {
|
|
var eleChart = d3.select(".chart").html("");
|
|
}
|
|
|
|
|
|
};
|
|
return {
|
|
restrict: "EA",
|
|
templateUrl: "./app/directives/dynamic-chart/dynamic-chart.html",
|
|
scope: {
|
|
chartData: "=",
|
|
chartAxisLabel: "="
|
|
},
|
|
controller: controller
|
|
};
|
|
});
|