bendtherules/chart-builder-demo
1
0
Fork 0
mirror of https://github.com/bendtherules/chart-builder-demo.git synced 2026-08-18 13:42:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved charts to directive

Browse Source
This commit is contained in:
bendtherules
2017-03-18 12:13:25 +05:30
parent 875e71b12d
commit d5342afc86
9 changed files with 463 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+10 -12
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Chart Builder</title> <title>Chart Builder</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="styles/style.css">
</head> </head>
<body ng-app="chart-builder"> <body ng-app="chart-builder">
<div class="header"> <div class="header">
@@ -52,20 +52,18 @@
</div> </div>
</div> </div>
<div class="chart-container"> <div class="chart-container">
<div class="chart-selector-container"> <dynamic-chart chart-data="data.values[data.chosenDimension][data.chosenMeasure]" chart-axis-label="[data.chosenDimension,data.chosenMeasure]"></dynamic-chart>
<select class="chart-selector" ng-options="chartName as chartName|sentencecase for chartName in chartTypes" ng-model="chartTypeChosen"></select>
</div>
<div class="chart"></div>
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript" src="lib/angular.min.js"></script> <script type="text/javascript" src="/lib/d3.v4.min.js"></script>
<script type="text/javascript" src="js/ng-drag.js"></script> <script type="text/javascript" src="/lib/d3-tip.js"></script>
<script type="text/javascript" src="lib/d3.v4.min.js"></script> <script type="text/javascript" src="/lib/angular.min.js"></script>
<script type="text/javascript" src="lib/d3-tip.js"></script> <script type="text/javascript" src="/js/ng-drag.js"></script>
<script type="text/javascript" src="js/draw-chart.js"></script>
<script type="text/javascript" src="js/filters.js"></script> <script type="text/javascript" src="/js/filters/filters.js"></script>
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="/js/directives/directives.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</body> </body>
</html> </html>
js/app.js
+2 -36
View File
@@ -1,4 +1,4 @@
var app = angular.module("chart-builder",["ngDrag","chart-builder.filters"]); var app = angular.module("chart-builder",["ngDrag","chart-builder.filters","chart-builder.directives"]);
app.value("allData",{ app.value("allData",{
"values":{ "values":{
@@ -41,19 +41,14 @@ app.value("allData",{
"measures": ["Sales","Orders","Revenue"] "measures": ["Sales","Orders","Revenue"]
}); });
app.value("chartTypes",["column","bar","pie"]);
app.controller("mainController", ["allData","$scope",function (allData,$scope) {
app.controller("mainController", ["allData","chartTypes","$scope",function (allData,chartTypes,$scope) {
$scope.data = {}; $scope.data = {};
$scope.data.chooserDimensions = allData.dimensions; $scope.data.chooserDimensions = allData.dimensions;
$scope.data.chosenDimension = undefined; $scope.data.chosenDimension = undefined;
$scope.data.chooserMeasures = allData.measures; $scope.data.chooserMeasures = allData.measures;
$scope.data.chosenMeasure = undefined; $scope.data.chosenMeasure = undefined;
$scope.chartTypes = chartTypes;
$scope.chartTypeChosen = chartTypes[0];
$scope.data.values = allData.values; $scope.data.values = allData.values;
$scope.allowDrop = function(ev,location) { $scope.allowDrop = function(ev,location) {
@@ -133,33 +128,4 @@ app.controller("mainController", ["allData","chartTypes","$scope",function (allD
} }
} }
$scope.$watchGroup(["data.values","data.chosenDimension","data.chosenMeasure","chartTypeChosen"],function(){
if ($scope.data.chosenMeasure && $scope.data.chosenDimension){
var tmpData = $scope.data.values[$scope.data.chosenDimension][$scope.data.chosenMeasure];
var chartData = [];
var keys = Object.keys(tmpData);
var axisLabel;
if ($scope.chartTypeChosen.toLowerCase() === "bar")
{
for (var i = keys.length - 1; i >= 0; i--) {
chartData.push({"y":keys[i],"x":tmpData[keys[i]]});
}
axisLabel = [$scope.data.chosenMeasure,$scope.data.chosenDimension];
}
else
{
for (var i = keys.length - 1; i >= 0; i--) {
chartData.push({"x":keys[i],"y":tmpData[keys[i]]});
}
axisLabel = [$scope.data.chosenDimension,$scope.data.chosenMeasure];
}
drawChart($scope.chartTypeChosen,chartData,axisLabel);
}
else
{
cleanChart();
}
});
}]); }]);
js/directives/directives.js
+357
View File
@@ -0,0 +1,357 @@
var app = angular.module("chart-builder.directives",["chart-builder.filters"]);
app.value("chartTypes",["column","bar","pie"]);
app.directive("dynamicChart", function () {
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))
.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 = d3.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));
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 = d3.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 = d3.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: "/js/directives/dynamic-chart/dynamic-chart.html",
scope: {
chartData: "=",
chartAxisLabel: "="
},
controller: controller
};
});
js/draw-chart.js → js/directives/dynamic-chart/draw-chart.js
+32 -1
View File
@@ -1,10 +1,14 @@
function drawChart(type,data,axisLabel) { function drawChart(type,data,axisLabel) {
var typeMapping = { var typeMapping = {
"column" : drawColumnChart, "column" : drawColumnChart,
"bar" : drawBarChart, "bar" : drawBarChart,
"pie" : drawPieChart "pie" : drawPieChart
}; };
var processedData = processData();
data = processData.data;
axisLabel = processData.axisLabel;
if (typeof(type) === "string"){ if (typeof(type) === "string"){
var drawFunc = typeMapping[type.toLowerCase()]; var drawFunc = typeMapping[type.toLowerCase()];
if (typeof(drawFunc) !== undefined){ if (typeof(drawFunc) !== undefined){
@@ -13,6 +17,33 @@ function drawChart(type,data,axisLabel) {
} }
} }
function processData(data,axisLabel) {
var tmpData = data;
var tmpAxisLabel = axisLabel;
var newData = [];
var keys = Object.keys(tmpData);
var newAxisLabel;
if ($scope.chartTypeChosen.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) function drawColumnChart(data,axisLabel)
{ {
var eleChart = d3.select(".chart").html(""), var eleChart = d3.select(".chart").html(""),
js/directives/dynamic-chart/dynamic-chart.css
+38
View File
@@ -0,0 +1,38 @@
.chart-selector-container
{
width: 100%;
height: 3em;
padding: 1em;
}
.chart-selector
{
float: right;
/*margin-right: 1em;*/
}
.chart
{
width: 100%;
height: calc(100% - 3em);
/*background-color: lightgray;*/
overflow: hidden;
}
/* d3 styles*/
.bar {
fill: steelblue;
}
.bar:hover,.arc:hover path{
-webkit-transition: fill 0.5s;
-o-transition: fill 0.5s;
transition: fill 0.5s;
fill: brown !important;
}
.axis-x path {
display: none;
}
js/directives/dynamic-chart/dynamic-chart.html
+14
View File
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/js/directives/dynamic-chart/dynamic-chart.css">
</head>
<body>
<div class="chart-selector-container">
<select class="chart-selector" ng-options="chartName as chartName|sentencecase for chartName in chartTypes" ng-model="chartTypeChosen"></select>
</div>
<div class="chart"></div>
</body>
</html>
js/filters.js
-10
View File
@@ -1,10 +0,0 @@
var app = angular.module("chart-builder.filters",[]);
app.filter("sentencecase", function () {
return function (strToUse) {
if (typeof(strToUse) === "string"){
strToUse = strToUse[0].toUpperCase() + strToUse.slice(1);
}
return strToUse;
};
});
js/filters/filters.js
+10
View File
@@ -0,0 +1,10 @@
var app = angular.module("chart-builder.filters",[]);
app.filter("sentencecase", function () {
return function (str) {
if (typeof(str) === "string"){
str = str[0].toUpperCase() + str.slice(1);
}
return str;
};
});
style.css → styles/style.css
-39
View File
@@ -95,15 +95,6 @@ body
height: 80%; height: 80%;
} }
.chart
{
width: 100%;
height: calc(100% - 3em);
/*background-color: lightgray;*/
overflow: hidden;
}
ul.unstyled-list ul.unstyled-list
{ {
list-style: none; list-style: none;
@@ -133,33 +124,3 @@ ul.unstyled-list
{ {
border-top: none; border-top: none;
} }
.chart-selector-container
{
width: 100%;
height: 3em;
padding: 1em;
}
.chart-selector
{
float: right;
/*margin-right: 1em;*/
}
/* d3 styles*/
.bar {
fill: steelblue;
}
.bar:hover,.arc:hover path{
-webkit-transition: fill 0.5s;
-o-transition: fill 0.5s;
transition: fill 0.5s;
fill: brown !important;
}
.axis--x path {
display: none;
}