1 /*Sandbox version 0.0.41a*/
\r
2 angular.module("att.charts", ["att.charts.tpls", "att.charts.utilities","att.charts.areachartD3","att.charts.barchartD3","att.charts.coschartD3","att.charts.coschartwithbarD3","att.charts.cosdeletionD3","att.charts.cosmultichartD3","att.charts.donutD3","att.charts.donutFusion","att.charts.horseshoeD3","att.charts.radialguageD3","att.charts.stackedBarchart","att.charts.stackedareachart"]);
\r
3 angular.module("att.charts.tpls", ["template/areachartD3/attAreaChartD3.html","template/barchartD3/attBarChartD3.html","template/coschartD3/attCosd3Chart.html","template/coschartwithbarD3/attCosBarD3Chart.html","template/cosmultichartD3/attCosmultid3Chart.html","template/donutD3/attDonutd3Chart.html","template/donutFusion/attDonutfusionChart.html","template/horseshoeD3/attHorseshoeD3Chart.html","template/stackedBarchart/stackedBarchart.html","template/stackedareachart/stackedAreaChart.html"]);
\r
4 angular.module('att.charts.utilities', [])
\r
5 .factory('$extendObj', [function () {
\r
6 var _extendDeep = function (dst) {
\r
7 angular.forEach(arguments, function (obj) {
\r
9 angular.forEach(obj, function (value, key) {
\r
10 if (dst[key] && dst[key].constructor && dst[key].constructor === Object) {
\r
11 _extendDeep(dst[key], value);
\r
21 extendDeep: _extendDeep
\r
26 angular.module('att.charts.areachartD3', ['att.charts.utilities'])
\r
27 .constant("areaChartConfig",
\r
30 "areaChartColor": ["#bff1ec", "#bbf0eb", "#00c7b2"],
\r
31 "lineChartColor": ["#444444", "#444444"],
\r
32 "overageColor": ["#b8509e"]
\r
34 "gridLineColor": "#808080",
\r
35 "lineCurveType": 'cardinal',
\r
37 "chartHeight": "200",
\r
40 "opacityOnHover": "0.5",
\r
41 "circleRadius": 3.5,
\r
42 "yearLabelPos": [5, -5],
\r
43 "tooltipTopMargin": 105,
\r
44 "tooltipLeftMargin": 28,
\r
45 "amountKDivision": 1000,
\r
47 "amountMDivision": 1000000,
\r
50 .directive('attAreaChart', ['areaChartConfig', '$extendObj', '$timeout', function (areaChartConfig, $extendObj, $timeout) {
\r
60 templateUrl: "template/areachartD3/attAreaChartD3.html",
\r
62 controller: ['$scope', '$attrs', function ($scope, $attrs) {
\r
63 if (angular.isDefined($scope.chartConfig)) {
\r
64 areaChartConfig = $extendObj.extendDeep(areaChartConfig, $scope.chartConfig);
\r
66 $scope.dataType = areaChartConfig.dataType;
\r
67 $scope.chartID = $attrs.id;
\r
69 link: function (scope, element, attrs, ctrl) {
\r
70 scope.tooltipFlag = false;
\r
71 scope.overageFlag = false;
\r
72 scope.underageFlag = false;
\r
73 var startColor, stopColor, lineColor, xAxisticks, dataObj, margin = {top: 30, right: 15, bottom: 30, left: 40},
\r
74 width = parseInt(attrs.chartWidth, 10),
\r
75 height = areaChartConfig.chartHeight,
\r
76 parseDate = d3.time.format("%d-%b-%Y").parse,
\r
77 tooltipFormat = d3.time.format("%B-%Y"),
\r
78 labelFormat = d3.time.format("%Y");
\r
79 var legendColors = [];
\r
80 legendColors = (scope.chartColor) ? scope.chartColor : areaChartConfig.chartcolor;
\r
81 startColor = legendColors.areaChartColor[0];
\r
82 stopColor = legendColors.areaChartColor[1];
\r
83 lineColor = legendColors.lineChartColor[0];
\r
84 scope.areaLegendColor = legendColors.areaChartColor[2];
\r
85 scope.lineLegendColor = legendColors.lineChartColor[1];
\r
86 scope.overageLegend = legendColors.overageColor[0];
\r
87 var oldIE = navigator.userAgent.toLowerCase().indexOf('msie 8.0') !== -1;
\r
88 scope.addLegendColor = function (id) {
\r
92 bgColor = {"background-color": scope.areaLegendColor, "border-radius": "100%"};
\r
95 bgColor = {"background-color": scope.lineLegendColor};
\r
98 bgColor = {"background-color": scope.overageLegend, "border-radius": "100%"};
\r
104 attrs.$observe('legendRequired', function (val) {
\r
105 if (val === 'true') {
\r
106 scope.showLegend = true;
\r
109 scope.showLegend = false;
\r
113 scope.$watch('refreshChart', function (value) {
\r
114 if (value === false) {
\r
117 if (angular.isDefined(scope.chartConfig)) {
\r
118 areaChartConfig = $extendObj.extendDeep(areaChartConfig, scope.chartConfig);
\r
120 d3.select("svg#" + attrs.id).remove();
\r
121 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
122 d3.selectAll("div#areaChartContainer" + " > div").remove();
\r
123 xAxisticks = scope.chartData.length;
\r
124 dataObj = scope.chartData;
\r
125 var yearLabel = '', monthArr = {}, isSingleMonth, singleMonthName;
\r
127 // On selecting same month in From and To dropdowns, User should be getting graph
\r
128 if (dataObj.length === 1) {
\r
129 isSingleMonth = true;
\r
130 var tmp1 = "01-" + dataObj[0].month;
\r
131 var tmp = parseDate(tmp1);
\r
132 singleMonthName = tmp.toString().split(" ")[1];
\r
133 tmp.setMonth(tmp.getMonth() + 1);
\r
134 var nextMonth = tmp.toString().split(" ")[1] + "-" + tmp.getFullYear();
\r
135 dataObj.push({month: nextMonth, usage: dataObj[0].usage, available: dataObj[0].available, usageDataType: dataObj[0].usageDataType, availableDataType: dataObj[0].availableDataType});
\r
138 dataObj.forEach(function (d) {
\r
139 var tmp = "01-" + d.month;
\r
140 d.numericMonth = parseDate(tmp);
\r
141 d.usage = +d.usage;
\r
142 d.available = +d.available;
\r
143 monthArr[labelFormat(d.numericMonth)] = labelFormat(d.numericMonth);
\r
146 for (var key in monthArr) {
\r
147 var label = monthArr[key];
\r
152 if (!isSingleMonth) {
\r
153 yearLabel = yearLabel + "-" + label;
\r
159 var xRange = d3.time.scale()
\r
160 .range([0, width]);
\r
163 var yRange = d3.scale.linear()
\r
164 .range([height, 0]);
\r
167 xRange.domain(d3.extent(dataObj, function (d) {
\r
168 return d.numericMonth;
\r
172 var yDomainData = [], yAxisData = [];
\r
173 for (var b = 0; b < dataObj.length; b++) {
\r
174 var usageVal = Math.round(parseInt(dataObj[b].usage, 10) / areaChartConfig.yAxisMaxTicks);
\r
175 var availableVal = Math.round(parseInt(dataObj[b].available, 10) / areaChartConfig.yAxisMaxTicks);
\r
177 if (usageVal > availableVal) {
\r
181 val = availableVal;
\r
183 var Calc = Math.ceil((val / Math.pow(10, ("" + val).length - 1))) * (areaChartConfig.yAxisMaxTicks) * Math.pow(10, ("" + val).length - 1);
\r
184 yDomainData.push({'yAxisVal': Calc});
\r
188 yRange.domain([0, d3.max(yDomainData, function (d) {
\r
189 return (d.yAxisVal);
\r
192 var yTick = d3.max(yDomainData, function (d) {
\r
196 yTick = yTick / areaChartConfig.yAxisMaxTicks;
\r
197 for (var x = 0; x <= areaChartConfig.yAxisMaxTicks; x++) {
\r
198 yAxisData.push(yTick * x);
\r
200 var formatData = function (d) {
\r
201 if (d >= areaChartConfig.amountMDivision) {
\r
202 return d / areaChartConfig.amountMDivision + areaChartConfig.amountMText;
\r
203 } else if (d >= areaChartConfig.amountKDivision) {
\r
204 return d / areaChartConfig.amountKDivision + areaChartConfig.amountKText;
\r
209 var xAxis = d3.svg.axis().scale(xRange).orient("bottom").tickFormat(d3.time.format('%b')).ticks(d3.time.months);
\r
210 var yAxis = d3.svg.axis().scale(yRange).orient("left").tickValues(yAxisData).ticks(areaChartConfig.yAxisMaxTicks).tickFormat(formatData);
\r
213 var line = d3.svg.line()
\r
215 return xRange(d.numericMonth);
\r
218 return yRange(d.available);
\r
219 }).interpolate(areaChartConfig.lineCurveType);
\r
222 var area = d3.svg.area()
\r
224 return xRange(d.numericMonth);
\r
228 return yRange(d.usage);
\r
229 }).interpolate(areaChartConfig.lineCurveType);
\r
232 var drawChart = d3.select("#areaChartContainer")
\r
234 .attr("id", attrs.id)
\r
236 .attr("width", width + margin.left + margin.right)
\r
237 .attr("height", parseInt(height, 10) + parseInt(margin.top, 10) + parseInt(margin.bottom, 10))
\r
239 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
\r
243 var svgDefs = drawChart.append("defs")
\r
244 .append("linearGradient")
\r
245 .attr("id", "areaGradient")
\r
246 .attr('x1', '0%').attr('y1', '0%')
\r
247 .attr('x2', '0%').attr('y2', '100%');
\r
250 svgDefs.append('stop')
\r
251 .attr('stop-color', startColor)
\r
252 .attr("offset", "0%")
\r
253 .attr("stop-opacity", "1");
\r
254 svgDefs.append('stop')
\r
255 .attr('stop-color', stopColor)
\r
256 .attr("offset", "100%")
\r
257 .attr("stop-opacity", "1");
\r
261 drawChart.append("g")
\r
262 .attr("class", "x axis")
\r
263 .attr("transform", "translate(0," + height + ")")
\r
264 .call(xAxis).selectAll("text")
\r
265 .attr("dy", "1.2em");
\r
268 if (isSingleMonth) {
\r
269 drawChart.selectAll('.x.axis').selectAll('.tick').selectAll('text')[1][0].textContent = singleMonthName;
\r
273 var areaPath = drawChart.append("path")
\r
275 .attr("class", "area")
\r
276 .attr("d", area).style("fill", "url(#areaGradient)").append("title").text(function () {
\r
277 return scope.legendLabel[0].series;
\r
280 var newDataObj = dataObj;
\r
281 if (isSingleMonth) {
\r
282 newDataObj = dataObj.slice(0, 1);
\r
285 //Draw Data Points for Area Chart
\r
286 var circle = drawChart.selectAll(".dot")
\r
288 .enter().append("circle")
\r
289 .attr("class", "dot")
\r
290 .attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)")
\r
291 .style("fill", function (d) {
\r
292 if (d.usage > d.available) {
\r
293 return scope.overageLegend;
\r
296 return scope.areaLegendColor;
\r
299 .attr("r", areaChartConfig.circleRadius)
\r
300 .attr("cx", function (d) {
\r
301 return xRange(d.numericMonth);
\r
303 .attr("cy", function (d) {
\r
304 return yRange(d.usage);
\r
305 }).on("mouseover", function (d) {
\r
306 var offsetX = Math.ceil(d3.select(this).attr("cx"));
\r
307 show_tooltip_grid_line(d3.select(this).attr("cx"), "circle", "cx");
\r
308 var offsetY = Math.round(d3.select(this).attr("cy"));
\r
309 d3.select('svg#' + attrs.id).style("fill-opacity", areaChartConfig.opacityOnHover);
\r
310 mouseOver(d, offsetX - 3, offsetY - 3);
\r
311 }).on("mouseout", function () {
\r
312 hide_tooltip_grid_line(d3.select(this).attr("cx"), "circle", "cx");
\r
313 d3.select('svg#' + attrs.id).style("fill-opacity", "1");
\r
314 scope.tooltipFlag = false;
\r
317 circle.append('desc').append('title').text(function (d) {
\r
318 return(addTitle(d));
\r
322 drawChart.append("path")
\r
323 .attr("class", "line")
\r
324 .style("stroke", lineColor)
\r
325 //.style("stroke-dasharray", (areaChartConfig.lineStroke, areaChartConfig.lineStroke))
\r
326 .attr("d", line(dataObj)).append("title").text(function () {
\r
327 return scope.legendLabel[1].series;
\r
330 //Draw data points for Line Chart
\r
332 var squaredot = drawChart.selectAll(".square-dot")
\r
333 .data(newDataObj).enter().append("rect")
\r
334 .attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)")
\r
335 .style("fill", scope.lineLegendColor)
\r
336 .attr("class", "square-dot")
\r
337 .attr("x", function (d) {
\r
338 var tmp = xRange(d.numericMonth);
\r
342 .attr("y", function (d) {
\r
343 var tmp = yRange(d.available);
\r
347 .attr("width", "5px")
\r
348 .attr("height", "5px")
\r
349 .on("mouseover", function (d) {
\r
350 var offsetX = Math.ceil(d3.select(this).attr("x"));
\r
351 show_tooltip_grid_line(d3.select(this).attr("x"), "rect", "x");
\r
352 var offsetY = Math.round(d3.select(this).attr("y"));
\r
353 d3.select('svg#' + attrs.id).style("fill-opacity", areaChartConfig.opacityOnHover);
\r
354 mouseOver(d, offsetX, offsetY);
\r
355 }).on("mouseout", function () {
\r
356 hide_tooltip_grid_line(d3.select(this).attr("x"), "rect", "x");
\r
357 d3.select('svg#' + attrs.id).style("fill-opacity", "1");
\r
358 scope.tooltipFlag = false;
\r
361 squaredot.append('desc').append('title').text(function (d) {
\r
362 return(addTitle(d));
\r
366 areaPath.style("fill", startColor);
\r
367 var squareDot = drawChart.selectAll(".square-dot")
\r
368 .data(newDataObj).enter().append("circle")
\r
369 .attr("class", "square-dot")
\r
370 .attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)")
\r
371 .style("fill", scope.areaLegendColor)
\r
372 .attr("r", areaChartConfig.circleRadius)
\r
373 .attr("cx", function (d) {
\r
374 return xRange(d.numericMonth);
\r
376 .attr("cy", function (d) {
\r
377 return yRange(d.available);
\r
378 }).on("mouseover", function (d) {
\r
379 var offsetX = Math.ceil(d3.select(this).attr("cx"));
\r
380 var offsetY = Math.round(d3.select(this).attr("cy"));
\r
381 show_tooltip_grid_line(d3.select(this).attr("cx"), "circle", "cx");
\r
382 d3.select('svg#' + attrs.id).style("fill-opacity", areaChartConfig.opacityOnHover);
\r
383 mouseOver(d, offsetX, offsetY);
\r
384 }).on("mouseout", function () {
\r
385 hide_tooltip_grid_line(d3.select(this).attr("cx"), "circle", "cx");
\r
386 d3.select('svg#' + attrs.id).style("fill-opacity", "1");
\r
387 scope.tooltipFlag = false;
\r
390 squareDot.append('desc').append('title').text(function (d) {
\r
391 return(addTitle(d));
\r
396 var yAxisNodes = drawChart.append("g")
\r
397 .attr("class", "y axis").attr("id", "yAxisId")
\r
400 yAxisNodes.selectAll("text")
\r
401 .attr("id", function (d, i) {
\r
402 return ("yAxisText" + i);
\r
405 //Append Year Label
\r
406 yAxisNodes.append("text")
\r
407 .attr("transform", "rotate(0)")
\r
408 .attr("y", areaChartConfig.yearLabelPos[1])
\r
409 .attr("x", areaChartConfig.yearLabelPos[0]).attr("class", "yearLabel")
\r
411 //Remove minimum value label form Y Axis
\r
412 drawChart.select("#yAxisText0").remove();
\r
414 // Draw the x Grid lines
\r
415 drawChart.append("g")
\r
416 .attr("class", "grid")
\r
417 .attr("id", "xGrid")
\r
418 .attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)")
\r
419 .call(make_x_axis()
\r
420 .tickSize(-height, 0)
\r
423 // function for the x grid lines
\r
424 function make_x_axis() {
\r
425 return d3.svg.axis()
\r
428 .tickFormat(d3.time.format('%b')).ticks(d3.time.months);
\r
431 //drawChart.select("#xGrid").selectAll("line").style("stroke", areaChartConfig.gridLineColor);
\r
432 drawChart.select("#xGrid").selectAll("line").style("stroke", "none");
\r
433 drawChart.select("#xGrid").selectAll("line")
\r
434 .attr("id", function (d, i) {
\r
435 return ("xAxisLine" + i);
\r
438 //Add title for NVDA screen reader
\r
439 function addTitle(d) {
\r
440 return (tooltipFormat(d.numericMonth) + "Used" + d.usage + d.usageDataType + "Available" + d.available + d.availableDataType);
\r
443 //Show Gridline on Mouse Hover
\r
444 function show_tooltip_grid_line(offsetX, shape, attr) {
\r
446 for (var i = 0; i < xAxisticks; i++) {
\r
447 var circle = drawChart.selectAll(shape);
\r
448 if (circle[0][i].getAttribute(attr) === offsetX) {
\r
449 drawChart.select("#xAxisLine" + i).style("stroke", areaChartConfig.gridLineColor);
\r
456 //Hide Gridline on Mouse Hover
\r
457 function hide_tooltip_grid_line(offsetX, shape, attr) {
\r
459 for (var i = 0; i < xAxisticks; i++) {
\r
460 var circle = drawChart.selectAll(shape);
\r
461 if (circle[0][i].getAttribute(attr) === offsetX) {
\r
462 drawChart.select("#xAxisLine" + i).style("stroke", "transparent");
\r
470 function mouseOver(d, offsetX, offsetY) {
\r
471 scope.underageFlag = false;
\r
472 scope.overageFlag = false;
\r
473 if (d.usage > d.available) {
\r
474 scope.overageFlag = true;
\r
476 if (d.usage < d.available) {
\r
477 scope.underageFlag = true;
\r
479 scope.dataPoint = {"xData": tooltipFormat(d.numericMonth).replace('-', ' '), "dataUsed": d.usage, "dataAvailable": d.available, "overage": d.overage, "usageDataType": d.usageDataType, "availableDataType": d.availableDataType, "underage": d.underage};
\r
481 $timeout(function () {
\r
482 offsetY = offsetY - areaChartConfig.tooltipTopMargin;
\r
483 var tooltipEl = element.children().eq(2);
\r
484 var tooltipWidth = tooltipEl[0].offsetWidth;
\r
485 if (isSingleMonth) {
\r
486 offsetX = offsetX - (tooltipWidth / 2) + areaChartConfig.tooltipLeftMargin + (width / 2);
\r
488 offsetX = offsetX - (tooltipWidth / 2) + areaChartConfig.tooltipLeftMargin;
\r
490 scope.tooltipStyle = {"left": offsetX + "px", "top": offsetY + "px"};
\r
491 scope.tooltipFlag = true;
\r
494 scope.refreshChart = false;
\r
499 .filter('filterInput', function () {
\r
500 return function (input) {
\r
501 return input.replace(/ +/g, "").toLowerCase();
\r
504 angular.module('att.charts.barchartD3', ['att.charts.utilities'])
\r
506 .constant("BarChartD3Config",
\r
508 "barChartColor": "#0081C2",
\r
509 "gridLineColor": "#808080",
\r
510 "yaxisGridLineColor": "#000000",
\r
518 "userName": "name",
\r
519 "phoneNumber": "phoneNumber",
\r
520 "charges": "charges"
\r
522 "yAxisMaxTicks": 4,
\r
523 "chartHeight": 160,
\r
524 "amountFormat" : "$0,000",
\r
525 "amountKDivision" : 1000,
\r
526 "amountKText" : "K",
\r
527 "amountMDivision" : 1000000,
\r
528 "amountMText" : "M",
\r
530 "tooltipTopMargin":69,
\r
531 "tooltipLeftMargin":59,
\r
532 "xAxisTextTopMargin":15,
\r
533 "xAxisTextLeftMargin":7,
\r
535 "barHoverOpacity":0.2
\r
538 .directive('attBarChart', ['BarChartD3Config','$extendObj', function(BarChartD3Config,$extendObj) {
\r
546 templateUrl: "template/barchartD3/attBarChartD3.html",
\r
548 link: function(scope, element, attrs, ctrl) {
\r
550 scope.$watch('refreshChart', function() {
\r
551 if (angular.isDefined(scope.chartConfig)) {
\r
552 BarChartD3Config = $extendObj.extendDeep(BarChartD3Config, scope.chartConfig);
\r
555 var width = parseInt(attrs.chartWidth, 10),
\r
556 chartColor = BarChartD3Config.barChartColor,
\r
557 height = BarChartD3Config.chartHeight,
\r
558 userName = BarChartD3Config.attributes.userName,
\r
559 charges = BarChartD3Config.attributes.charges,
\r
560 phoneNumber = BarChartD3Config.attributes.phoneNumber,
\r
561 formatCharges = d3.format(BarChartD3Config.amountFormat),
\r
562 isSingleDataObj = false, padding = 20;
\r
563 var barChartData, yDomainData = [],yAxisData = [];
\r
564 scope.tooltipFlag = false;
\r
565 var compare = function compare(a, b) {
\r
566 if (parseInt(a[charges], 10) > parseInt(b[charges], 10)) {
\r
569 if (parseInt(a[charges], 10) < parseInt(b[charges], 10)) {
\r
576 d3.select("svg#" + attrs.id).remove();
\r
577 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
578 d3.selectAll("div#barChartContainer" + " > div").remove();
\r
580 barChartData = scope.chartData.sort(compare);
\r
581 barChartData = barChartData.slice(0,BarChartD3Config.barChartSize);
\r
582 if (barChartData.length === 1) {
\r
583 isSingleDataObj = true;
\r
585 var x = d3.scale.ordinal().rangeBands([0, width]);
\r
587 var y = d3.scale.linear()
\r
588 .range([height, 0]);
\r
590 x.domain(barChartData.map(function(d, i) {
\r
594 for(var b=0; b < barChartData.length; b++){
\r
595 var val = Math.round(parseInt(barChartData[b].charges, 10)/BarChartD3Config.yAxisMaxTicks);
\r
596 var Calc = Math.ceil((val / Math.pow(10, ("" + val).length - 1))) * (BarChartD3Config.yAxisMaxTicks) * Math.pow(10, ("" + val).length - 1);
\r
597 yDomainData.push({'yAxisVal':Calc});
\r
601 y.domain([0, d3.max(yDomainData, function(d) {
\r
602 return (d.yAxisVal);
\r
605 var yTick = d3.max(yDomainData, function(d) {return d.yAxisVal;});
\r
607 yTick = yTick/BarChartD3Config.yAxisMaxTicks;
\r
608 for(var z = 0; z <= BarChartD3Config.yAxisMaxTicks; z++){
\r
609 yAxisData.push(yTick * z);
\r
611 var formatMoney = function(d) {
\r
612 if (d >= BarChartD3Config.amountMDivision) {
\r
613 return "$" + d / BarChartD3Config.amountMDivision + BarChartD3Config.amountMText;
\r
614 } else if (d >= BarChartD3Config.amountKDivision) {
\r
615 return "$" + d / BarChartD3Config.amountKDivision + BarChartD3Config.amountKText;
\r
621 var xAxis = d3.svg.axis()
\r
624 .tickSize(BarChartD3Config.xAxistickSize);
\r
626 var yAxis = d3.svg.axis().scale(y).orient("left").tickValues(yAxisData).ticks(BarChartD3Config.yAxisMaxTicks).tickFormat(formatMoney);
\r
628 var svg = d3.select("#barChartContainer")
\r
630 .attr("id", attrs.id)
\r
631 .attr("width", width + BarChartD3Config.margin.left + BarChartD3Config.margin.right)
\r
632 .attr("height", height + BarChartD3Config.margin.top + BarChartD3Config.margin.bottom)
\r
634 .attr("transform", "translate(" + BarChartD3Config.margin.left + "," + BarChartD3Config.margin.top + ")");
\r
637 .attr("class", "x axis")
\r
638 .attr("transform", "translate(" + -Math.ceil((x(2) - x(1)) / 2 - BarChartD3Config.xAxisTextTopMargin) + "," + (height + BarChartD3Config.xAxisTextLeftMargin) + ")")
\r
641 var formatPhNumber = function(phoneNum) {
\r
642 if (phoneNum.indexOf("-") === -1) {
\r
643 return phoneNum.substr(0, 3) + '-' + phoneNum.substr(3, 3) + '-' + phoneNum.substr(6);
\r
649 var rectBarGroup = svg.append("g")
\r
650 .attr("class", "group").attr("id", function (d, i) {
\r
651 return ("barGroup" + i);
\r
652 }).attr("transform", "translate(" + (isSingleDataObj === true? ((width / 2) + 11):10) + ",0)");
\r
654 var rectBars = rectBarGroup.selectAll(".bar")
\r
655 .data(barChartData)
\r
656 .enter().append("rect")
\r
657 .attr("style", "fill:" + chartColor)
\r
658 .attr("class", "bar")
\r
659 .attr("x", function(d, i) {
\r
660 return Math.round(x(i + 1));
\r
663 .attr("y", function(d) {
\r
664 return y(d[charges]);
\r
666 .attr("height", function(d) {
\r
667 return (height - y(d[charges]));
\r
669 .on("mouseover", function(d) {
\r
670 var offsetX = Math.round(d3.select(this).attr("x"));
\r
671 show_tooltip_grid_line(offsetX);
\r
672 var offsetY = Math.round(d3.select(this).attr("y"));
\r
673 svg.select(".grid").selectAll("line").style("stroke", "transparent");
\r
674 svg.selectAll(".bar").style("fill-opacity",BarChartD3Config.barHoverOpacity);
\r
675 d3.select(this).style("fill-opacity","1");
\r
676 mouseOver(d, offsetX, offsetY);
\r
678 .on("mouseout", function() {
\r
679 var offsetX = Math.round(d3.select(this).attr("x"));
\r
680 hide_tooltip_grid_line(offsetX);
\r
681 scope.tooltipFlag = false;
\r
682 svg.select(".grid").selectAll("line").style("stroke", BarChartD3Config.gridLineColor);
\r
683 svg.selectAll(".bar").style("fill-opacity","1");
\r
686 rectBars.append('desc').append('title').text(function(d){ return (d[userName] + "-- Wireless Number" + formatPhNumber(d[phoneNumber]) + "Charges-" + d[charges]);});
\r
688 var yAxisNodes = svg.append("g")
\r
689 .attr("class", "y axis")
\r
692 yAxisNodes.selectAll("text")
\r
693 .attr("id", function(d, i) {
\r
694 return ("yAxisText" + i);
\r
697 yAxisNodes.selectAll("line")
\r
698 .attr("id", function(d, i) {
\r
699 return ("yAxisLine" + i);
\r
702 //Remove minimum value label form Y Axis
\r
703 d3.select("#yAxisText0").remove();
\r
704 d3.select("#yAxisLine0").remove();
\r
705 yAxisNodes.select("path").remove();
\r
707 // Draw the y Grid lines
\r
709 .attr("class", "grid")
\r
710 .attr("transform", "translate(0,0)")
\r
711 .call(make_y_axis()
\r
712 .tickSize(-width + x(2) - x(1), 0, 0)
\r
714 svg.select(".grid").selectAll("line").style("stroke", BarChartD3Config.gridLineColor);
\r
715 // function for the y grid lines
\r
716 function make_y_axis() {
\r
717 return d3.svg.axis()
\r
720 .ticks(BarChartD3Config.yAxisMaxTicks).tickValues(yAxisData);
\r
722 // Draw the x Grid lines
\r
724 .attr("class", "grid").attr("id", "xGrid")
\r
725 .call(make_x_axis()
\r
726 .tickSize(-height , 0)
\r
727 .tickFormat("")).selectAll("line").attr("transform", "translate(" + -Math.ceil((x(2) - x(1)) / 2 - BarChartD3Config.xAxisTextTopMargin) + ",0)")
\r
728 .attr("id", function (d, i) {
\r
729 return ("xAxisLine" + i);
\r
733 // function for the x grid lines
\r
734 function make_x_axis() {
\r
735 return d3.svg.axis()
\r
738 .ticks(BarChartD3Config.yAxisMaxTicks)
\r
741 svg.select("#xGrid").selectAll("line")
\r
742 .attr("id", function(d, i) {
\r
743 return ("xAxisLine" + i);
\r
746 function show_tooltip_grid_line(offsetX){
\r
747 for (var i = 0; i < barChartData.length; i++) {
\r
748 if(Math.round(x(i+1))===offsetX){
\r
749 svg.select("#xAxisLine"+i).style("stroke", BarChartD3Config.yaxisGridLineColor);
\r
754 function hide_tooltip_grid_line(offsetX){
\r
755 for (var i = 0; i < barChartData.length; i++) {
\r
756 if(Math.round(x(i+1))===offsetX){
\r
757 svg.select("#xAxisLine"+i).style("stroke", "transparent");
\r
761 function mouseOver(d, offsetX, offsetY) {
\r
762 offsetY = offsetY - BarChartD3Config.tooltipTopMargin;
\r
763 if (isSingleDataObj) {
\r
764 offsetX = offsetX - BarChartD3Config.tooltipLeftMargin + (width / 2);
\r
766 offsetX = offsetX - BarChartD3Config.tooltipLeftMargin;
\r
768 scope.tooltipFlag = true;
\r
769 scope.tooltipStyle = {"left": offsetX + "px", "top": offsetY + "px"};
\r
770 scope.dataPoint = {"name": d[userName], "phoneNumber": formatPhNumber(d[phoneNumber]), "charges": formatCharges(d[charges])};
\r
773 scope.refreshChart = false;
\r
778 angular.module('att.charts.coschartD3', ['att.charts.utilities'])
\r
779 .constant("CosChartD3Config",
\r
782 "paletteColors": ["#097cb5", "#FEFFF7"] //default color options for rendering chart baseColor and NeedleColor,
\r
785 "defaultcenterlabel": "COS 1",
\r
786 "defaultcentercategory": "Real Time",
\r
788 "doughnutratio": 20,
\r
789 "legendreqd": "false",
\r
790 "animduration": "300",
\r
791 "legendposition": "top",
\r
792 "centerTextValueDy": "0",
\r
793 "centerTextValueDx": "0",
\r
794 "centerTextPercentDx": "20",
\r
795 "centerTextPercentDy": "-10",
\r
796 "centerTextLabelDy": "20",
\r
797 "centerTextLabelDx": "0",
\r
800 .directive('attCosd3Chart', ['CosChartD3Config', '$timeout','$extendObj', function (CosChartD3Config, $timeout,$extendObj) {
\r
807 templateUrl: 'template/coschartD3/attCosd3Chart.html',
\r
810 controller: ['$scope', '$attrs', function ($scope, $attrs) {
\r
811 if (angular.isDefined($scope.chartConfig)) {
\r
812 CosChartD3Config = $extendObj.extendDeep(CosChartD3Config, $scope.chartConfig);
\r
814 var legendColor = [];
\r
815 legendColor = CosChartD3Config.chartcolor.paletteColors;
\r
816 $scope.addLegendColor = function () {
\r
817 return {"color": legendColor[0]};
\r
819 $scope.chartID = $attrs.id;
\r
820 if (!angular.isDefined($attrs.legendRequired)) {
\r
821 $scope.legendRequired = CosChartD3Config.legendreqd;
\r
823 $scope.legendRequired = $attrs.legendRequired;
\r
825 if (!angular.isDefined($attrs.legendPosition)) {
\r
826 $scope.legendPosition = CosChartD3Config.legendposition;
\r
828 $scope.legendPosition = $attrs.legendPosition;
\r
831 link: function (scope, element, attrs) {
\r
832 // var radius = Math.min(attrs.chartWidth, attrs.chartHeight) / 2,
\r
833 var color = d3.scale.ordinal().range(CosChartD3Config.chartcolor.paletteColors),
\r
834 zoom = parseInt(CosChartD3Config.zoomLevel, 0),data,
\r
835 margin = {// optionally set margins
\r
841 width = attrs.chartWidth,
\r
842 height = attrs.chartHeight,
\r
844 width - (margin.left + margin.right),
\r
845 height - (margin.top + margin.bottom)) / 2;
\r
846 scope.LegendLabel = CosChartD3Config.defaultcenterlabel;
\r
847 scope.LegendCategory = CosChartD3Config.defaultcentercategory;
\r
848 scope.$watch('initVal', function (value) {
\r
849 if(!angular.isDefined(scope.initVal)){
\r
852 d3.select("svg#" + attrs.id).remove();
\r
853 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
854 var cosval = parseInt(scope.initVal.value, 10);
\r
855 scope.cosval = cosval + "%";
\r
858 {"name": "cos1", "value": 100},
\r
859 {"name": "rest", "value": 0}
\r
863 {"name": "cos1", "value": cosval},
\r
864 {"name": "rest", "value": 100 - (parseInt(cosval, 10))}
\r
867 var sliderpercent = parseInt(cosval, 10);
\r
868 if (angular.isDefined(sliderpercent)) {
\r
871 element[0].querySelector('.cosd3Container').setAttribute('id', attrs.id);
\r
873 var svg = d3.select(".cosd3Container#" + attrs.id)
\r
874 .attr("style", "height: " + attrs.chartHeight + "px;")
\r
876 .attr("id", attrs.id)
\r
877 .attr("width", "100%")
\r
878 .attr("height", "100%")
\r
879 .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
\r
880 .attr('preserveAspectRatio', 'xMinYMin')
\r
882 .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
\r
884 var arc = d3.svg.arc()
\r
885 .innerRadius(radius - CosChartD3Config.doughnutratio)
\r
886 .outerRadius(radius);
\r
887 // set hovered radius
\r
888 var arcOver = d3.svg.arc()
\r
889 .innerRadius(radius - CosChartD3Config.doughnutratio)
\r
890 .outerRadius(radius + CosChartD3Config.arcOverMargin);
\r
892 // add center text element
\r
893 var centerTextValue = svg.append("text")
\r
894 .attr("y", CosChartD3Config.centerTextValueDy)
\r
895 .attr("x", CosChartD3Config.centerTextValueDx)
\r
896 .attr("class", "coschartcenterValue");
\r
897 var centerTextPercent = svg.append("text")
\r
898 .attr("x", CosChartD3Config.centerTextPercentDx)
\r
899 .attr("y", CosChartD3Config.centerTextPercentDy)
\r
900 .attr("class", "coschartcenterPercent");
\r
901 var centerTextLabel = svg.append("text")
\r
902 .attr("y", CosChartD3Config.centerTextLabelDy)
\r
903 .attr("x", CosChartD3Config.centerTextLabelDx)
\r
904 .attr("class", "coschartcenterLabel");
\r
905 centerTextValue.text(cosval);
\r
906 centerTextPercent.text("%");
\r
907 centerTextLabel.text(CosChartD3Config.defaultcenterlabel + "(" + CosChartD3Config.defaultcentercategory + ")");
\r
909 var pie = d3.layout.pie()
\r
911 .startAngle(3.2 * Math.PI)
\r
912 .endAngle(5.2 * Math.PI)
\r
913 .value(function (d) {
\r
917 // set chart attributes and bind hover events
\r
918 var g = svg.selectAll(".arc")
\r
922 .attr("class", "arc")
\r
923 .attr("id", function (d, i) {
\r
924 return "cosarc-" + i;
\r
926 .style("cursor", "pointer");
\r
929 .style("fill", function (d) {
\r
930 return color(d.data.name);
\r
932 .attr("id", function (d, i) {
\r
933 return "cospath-" + i;
\r
935 .on("mouseover", function (d) {
\r
936 d3.select(this).transition()
\r
937 .duration(CosChartD3Config.animduration)
\r
938 .attr("d", arcOver);
\r
940 .on("mouseout", function (d) {
\r
941 d3.select(this).transition()
\r
942 .duration(CosChartD3Config.animduration)
\r
948 .attrTween("d", tweenPie);
\r
950 // animate function
\r
951 function tweenPie(b) {
\r
952 var i = d3.interpolate({
\r
953 startAngle: 2.1 * Math.PI,
\r
954 endAngle: 2.1 * Math.PI
\r
956 return function (t) {
\r
960 if(cosval>0 && cosval<100){
\r
961 d3.select(".cosd3Container path#cospath-1").style('stroke', 'black');
\r
970 angular.module('att.charts.coschartwithbarD3', ['att.charts.utilities'])
\r
971 .constant("CosChartWithBarD3Config",
\r
974 "paletteColors": ["#0574ac", "#44c8f5", "#4ca90c", "#da0081", "#ff9900", "#81017e"], //["#097cb5", "#FEFFF7"], //default color options for rendering chart baseColor and NeedleColor,
\r
975 "zeroColor": "#ffffff",
\r
976 "borderColor": "#666666"
\r
979 "doughnutratio": 20,
\r
983 "barCornerRadius": 9,
\r
984 //"barTextValueDy": "250",
\r
985 //"barTextValueDx": "0",
\r
986 //"barTextPercentDx": "20",
\r
987 //"barTextPercentDy": "-250",
\r
988 //"barTextLabelDy": "60",
\r
989 //"barTextLabelDx": "-80",
\r
990 //"defaultbarlabel": "CoS 2V/CoS 2/CoS 3/CoS 4/CoS 5",
\r
991 "animduration": "300",
\r
993 'defaultCenterLabel': 'COS 1',
\r
994 'defaultCenterCategory': 'Real Time',
\r
995 'textValueDy': '0',
\r
996 'textValueDx': '0',
\r
997 'textPercentDx': '20',
\r
998 'textPercentDy': '-10',
\r
999 'textLabelDx': '0',
\r
1000 'textLabelDy': '20',
\r
1001 'color': '#666666',
\r
1003 'font': 'omnes_att_light'
\r
1005 "centerTextValueDy": "0",
\r
1006 "centerTextValueDx": "0",
\r
1007 "centerTextPercentDx": "20",
\r
1008 "centerTextPercentDy": "-10",
\r
1009 "centerTextLabelDy": "20",
\r
1010 "centerTextLabelDx": "0",
\r
1011 "arcOverMargin": 5
\r
1013 .directive('attCosBarD3Chart', ['CosChartWithBarD3Config', '$timeout','$extendObj', function (CosChartWithBarD3Config, $timeout,$extendObj) {return {
\r
1019 remainingCos: '=',
\r
1022 templateUrl: 'template/coschartwithbarD3/attCosBarD3Chart.html',
\r
1025 controller: ['$scope', '$attrs', function ($scope, $attrs) {
\r
1026 if (angular.isDefined($scope.chartConfig)) {
\r
1027 CosChartWithBarD3Config = $extendObj.extendDeep(CosChartWithBarD3Config, $scope.chartConfig);
\r
1030 $scope.chartID = $attrs.id;
\r
1031 if (!angular.isDefined($attrs.barRequired)) {
\r
1032 $scope.barRequired = CosChartWithBarD3Config.barreqd;
\r
1034 $scope.barRequired = $attrs.barRequired;
\r
1038 link: function (scope, element, attrs) {
\r
1045 tl: top_left rounded?
\r
1046 tr: top_right rounded?
\r
1047 bl: bottom_left rounded?
\r
1048 br: bottom_right rounded?
\r
1050 function rounded_rect(x, y, w, h, r, tl, tr, bl, br) {
\r
1052 retval = "M" + (x + r) + "," + y;
\r
1053 retval += "h" + (w - 2*r);
\r
1054 if (tr) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + r; }
\r
1055 else { retval += "h" + r; retval += "v" + r; }
\r
1056 retval += "v" + (h - 2*r);
\r
1057 if (br) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + r; }
\r
1058 else { retval += "v" + r; retval += "h" + -r; }
\r
1059 retval += "h" + (2*r - w);
\r
1060 if (bl) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + -r; }
\r
1061 else { retval += "h" + -r; retval += "v" + -r; }
\r
1062 retval += "v" + (2*r - h);
\r
1063 if (tl) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + -r; }
\r
1064 else { retval += "v" + -r; retval += "h" + r; }
\r
1069 var radScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);
\r
1072 var zoom = parseInt(CosChartWithBarD3Config.zoomLevel, 0),data,
\r
1073 margin = {// optionally set margins
\r
1079 width = attrs.chartWidth,
\r
1080 height = attrs.chartHeight,
\r
1081 radius = Math.min(
\r
1082 width - (margin.left + margin.right),
\r
1083 height - (margin.top + margin.bottom)) / 2;
\r
1086 scope.$watchCollection('chartData', function (value) {
\r
1087 var j = 0; // index for for-loops
\r
1089 if(!angular.isDefined(scope.chartData) || scope.chartData.length < 1){
\r
1093 d3.select("svg#" + attrs.id).remove();
\r
1094 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
1097 d3.select("svg#" + scope.snickrbarId).remove();
\r
1098 d3.selectAll("svg#" + scope.snickrbarId + " > *").remove();
\r
1100 var cosval = scope.chartData[0];
\r
1101 var remainingCosVal = 0, restCosVal = 0;
\r
1103 for(j = 1; j < scope.chartData.length; j++)
\r
1105 remainingCosVal += parseInt(scope.chartData[j], 10); //parseInt allows strings to be passed in
\r
1107 restCosVal = 100 - cosval - remainingCosVal;
\r
1108 scope.totalCos = cosval + remainingCosVal;
\r
1109 scope.remainingCos = remainingCosVal;
\r
1111 var data = angular.copy(scope.chartData);
\r
1112 if (angular.isDefined(restCosVal)) {
\r
1113 data.push(restCosVal);
\r
1116 element[0].querySelector('.cosd3Container').setAttribute('id', attrs.id);
\r
1118 var svg = d3.select(".cosd3Container#" + attrs.id)
\r
1119 .attr("style", "height: " + attrs.chartHeight + "px;")
\r
1121 .attr("id", attrs.id)
\r
1122 .attr("width", "100%")
\r
1123 .attr("height", "100%")
\r
1124 .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
\r
1125 .attr('preserveAspectRatio', 'xMinYMin')
\r
1127 .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
\r
1129 scope.snickrbarId = attrs.id + 'snickrbar';
\r
1130 var snickrbar = d3.select(".snickrBar")
\r
1131 .attr('style', 'margin-left:' + Math.floor(CosChartWithBarD3Config.barWidth/3) + ';')
\r
1132 .style({'background-color': CosChartWithBarD3Config.chartcolor.zeroColor, 'width': CosChartWithBarD3Config.barWidth + 'px', 'border': '1px solid #777', 'border-radius': '10px'})
\r
1134 .attr("id", scope.snickrbarId)
\r
1135 .attr("width", CosChartWithBarD3Config.barWidth + "px")
\r
1136 .attr("height", CosChartWithBarD3Config.barHeight + "px")
\r
1140 var arc = d3.svg.arc()
\r
1141 .innerRadius(radius - CosChartWithBarD3Config.doughnutratio)
\r
1142 .outerRadius(radius);
\r
1144 // set hovered radius
\r
1145 var arcOver = d3.svg.arc()
\r
1146 .innerRadius(radius - CosChartWithBarD3Config.doughnutratio)
\r
1147 .outerRadius(radius + CosChartWithBarD3Config.arcOverMargin);
\r
1149 // add center text element
\r
1150 var centerTextValue = svg.append("text")
\r
1151 .attr("y", CosChartWithBarD3Config.centerText.textValueDy)
\r
1152 .attr("x", CosChartWithBarD3Config.centerText.textValueDx)
\r
1153 .attr("class", "coschartcenterValue");
\r
1154 var centerTextPercent = svg.append("text")
\r
1155 .attr("x", CosChartWithBarD3Config.centerText.textPercentDx)
\r
1156 .attr("y", CosChartWithBarD3Config.centerText.textPercentDy)
\r
1157 .attr("class", "coschartcenterPercent");
\r
1158 var centerTextLabel = svg.append("text")
\r
1159 .attr("y", CosChartWithBarD3Config.centerText.textLabelDy)
\r
1160 .attr("x", CosChartWithBarD3Config.centerText.textLabelDx)
\r
1161 .attr("class", "coschartcenterLabel");
\r
1162 centerTextValue.text(cosval);
\r
1163 centerTextPercent.text("%");
\r
1164 centerTextLabel.text(CosChartWithBarD3Config.centerText.defaultCenterLabel + "(" + CosChartWithBarD3Config.centerText.defaultCenterCategory + ")");
\r
1166 var scale = function(d) {
\r
1170 var r = (d * CosChartWithBarD3Config.barWidth) / 100;
\r
1171 if (isNaN(r)) { r = 0; }
\r
1172 else if (!isFinite(r)) { r = CosChartWithBarD3Config.barWidth; }
\r
1178 // Only executed when totalCos is 0
\r
1179 if (cosval <= 0) {
\r
1180 arc.startAngle(0).endAngle(2 * Math.PI); //just radians
\r
1181 svg.append("path")
\r
1183 .attr("fill", CosChartWithBarD3Config.chartcolor.zeroColor)
\r
1184 .style("stroke", CosChartWithBarD3Config.chartcolor.borderColor)
\r
1185 .style("stroke-width", 1);
\r
1188 // JVM: This code is temp for just snicker's bar release
\r
1189 var temp = 100-data[0];
\r
1191 newData.push({'value':data[0]});
\r
1192 newData.push({'value':temp});
\r
1194 /*for(j = 0; j < data.length; j++) {
\r
1195 var obj = angular.extend({}, data[j]);
\r
1196 obj.value = data[j];
\r
1197 newData.push(obj);
\r
1201 //======================================================
\r
1204 var pie = d3.layout.pie()
\r
1206 .value(function (d,index) {
\r
1208 if (d.value <= 0) { r = 0; }
\r
1212 // set chart attributes and bind hover events
\r
1213 var g = svg.selectAll(".arc")
\r
1214 .data(pie(newData))
\r
1217 .attr("class", "arc")
\r
1218 .attr("id", function (d, i) {
\r
1219 return "cosarc-" + i;
\r
1221 .style("cursor", "pointer");
\r
1224 .style("fill", function (d, i) {
\r
1225 if (i === CosChartWithBarD3Config.chartcolor.paletteColors.length || i === newData.length-1 || d.data.value === 0) {
\r
1226 return CosChartWithBarD3Config.chartcolor.zeroColor;
\r
1229 return CosChartWithBarD3Config.chartcolor.paletteColors[i];
\r
1231 .style("stroke", "white")
\r
1232 .style("stroke-width", function(d,index) { if (cosval >= 100) { return 0; } else { return 1; } })
\r
1233 .attr("id", function (d, i) {
\r
1234 return "cospath-" + i;
\r
1236 .on("mouseover", function (d, index) {
\r
1237 if (index < newData.length-1) {
\r
1238 d3.select(this).transition()
\r
1239 .duration(CosChartWithBarD3Config.animduration)
\r
1240 .attr("d", arcOver);
\r
1243 .on("mouseout", function (d, index) {
\r
1244 if (index < newData.length-1) {
\r
1245 d3.select(this).transition()
\r
1246 .duration(CosChartWithBarD3Config.animduration)
\r
1253 .attrTween("d", tweenPie);
\r
1256 if (!CosChartWithBarD3Config.barreqd) { return; }
\r
1257 var snickrData = [];
\r
1258 var d = scope.chartData.slice(1, scope.chartData.length);
\r
1259 for (j = 0; j < d.length; j++) {
\r
1263 obj.color = CosChartWithBarD3Config.chartcolor.paletteColors[j+1];
\r
1264 snickrData.push(obj);
\r
1268 var prevWidth = 0;
\r
1269 var nextX = function(d, i) {
\r
1271 prevWidth = scale(d);
\r
1274 var p = prevWidth;
\r
1275 prevWidth += scale(d);
\r
1280 var rect = snickrbar.selectAll("path")
\r
1284 .style("fill", function(d, i) {
\r
1285 if (i >= CosChartWithBarD3Config.chartcolor.paletteColors.length || d.data === 0) {
\r
1286 return CosChartWithBarD3Config.chartcolor.zeroColor;
\r
1291 .attr("d", function(d, index) {
\r
1292 if (index === 0) {
\r
1293 // Left rounded rectangle
\r
1294 return rounded_rect(nextX(d.data, index), 0, scale(d.data), CosChartWithBarD3Config.barHeight, CosChartWithBarD3Config.barCornerRadius, true, false, true, false);
\r
1295 } else if (index === snickrData.length-1 && remainingCosVal >= 100) {
\r
1296 // Right rounded rectangle
\r
1297 return rounded_rect(nextX(d.data, index), 0, scale(d.data), CosChartWithBarD3Config.barHeight, CosChartWithBarD3Config.barCornerRadius, false, true, false, true);
\r
1299 console.log('normal rect at ' + index);
\r
1300 return rounded_rect(nextX(d.data, index), 0, scale(d.data), CosChartWithBarD3Config.barHeight, 0, false, false, false, false);
\r
1304 if (remainingCosVal === 0) {
\r
1305 snickrbar.attr("fill", CosChartWithBarD3Config.chartcolor.zeroColor);
\r
1308 // add bar text element
\r
1309 /*var snickerText = d3.select('.snickrBar svg')
\r
1311 .style("fill", "black");
\r
1313 var barTextValue = snickerText.append("text")
\r
1314 .attr("y", CosChartWithBarD3Config.barTextValueDy)
\r
1315 .attr("x", CosChartWithBarD3Config.barTextValueDx)
\r
1316 .attr("class", "coschartbarcenterValue");
\r
1317 var barTextPercent = snickerText.append("text")
\r
1318 .attr("x", CosChartWithBarD3Config.barTextPercentDx)
\r
1319 .attr("y", CosChartWithBarD3Config.centerTextPercentDy)
\r
1320 .attr("class", "coschartbarcenterPercent");
\r
1321 var barTextLabel = snickerText.append("text")
\r
1322 .attr("y", CosChartWithBarD3Config.barTextLabelDy)
\r
1323 .attr("x", CosChartWithBarD3Config.barTextLabelDx)
\r
1324 .attr("class", "coschartbarcenterLabel");
\r
1325 barTextValue.text(cosval);
\r
1326 barTextPercent.text("%");
\r
1327 barTextLabel.text(CosChartWithBarD3Config.defaultbarlabel);*/
\r
1331 // animate function
\r
1332 function tweenPie(b) {
\r
1333 var i = d3.interpolate({
\r
1334 startAngle: 2.1 * Math.PI,
\r
1335 endAngle: 2.1 * Math.PI
\r
1337 return function (t) {
\r
1342 scope.$watch('mouseOver', function(val) {
\r
1343 if (!angular.isDefined(scope.mouseOver)) { return; }
\r
1344 var id = scope.mouseOver.split('-')[1];
\r
1345 if (scope.mouseOver.split('-')[0] === 'true') {
\r
1347 d3.select("#cospath-" + id).transition()
\r
1348 .duration(CosChartWithBarD3Config.animduration)
\r
1349 .attr("d", arcOver);
\r
1351 for (var i = 0; i < newData.length-1; i++) {
\r
1352 d3.select("#cospath-" + (i+1)).transition()
\r
1353 .duration(CosChartWithBarD3Config.animduration)
\r
1354 .attr("d", arcOver);
\r
1359 d3.select("#cospath-" + id).transition()
\r
1360 .duration(CosChartWithBarD3Config.animduration)
\r
1363 for (j = 0; j < newData.length-1; j++) {
\r
1364 d3.select("#cospath-" + (j+1)).transition()
\r
1365 .duration(CosChartWithBarD3Config.animduration)
\r
1377 angular.module('att.charts.cosdeletionD3', ['att.charts.utilities'])
\r
1378 .constant("CosdeletionD3Config",
\r
1381 "MaxBandwidthReached": "#d3d3d3",
\r
1382 "ZeroBandwidthSelected": "#FEFFF7",
\r
1383 "RemainingBandwidthColor": "#ffffff",
\r
1384 "RemainingBandwidthStrokeColor": "#d3d3d3",
\r
1385 "RemainingBandwidthStrokeWidth": 1.5,
\r
1386 "UsedBandwidthColor": "#0574AC",
\r
1387 "UsedBandwidthStrokeColor":"#efefef", //white
\r
1388 "UsedBandwidthStrokeWidth":"1"
\r
1390 "defaultcenterlabel": "Kbps",
\r
1391 "zoomLevel": "10",
\r
1392 "doughnutratio": 21,
\r
1393 "animduration": "300",
\r
1394 "guageStartAngle":4,
\r
1395 "guageEndAngle":8.56,
\r
1396 "legendreqd": "false",
\r
1397 "initduration": "1000",
\r
1398 "legendposition": "top",
\r
1399 "centerTextLabelDy": "20",
\r
1400 "centerTextValueDy": "0",
\r
1401 "centerTextValueDx": "-30",
\r
1402 "centerTextLabelDx": "-10",
\r
1403 "maxbandwidthTextDx": "25",
\r
1404 "maxbandwidthTextDy": "70",
\r
1405 "arcOverMargin": 5
\r
1407 .directive('attCosdeletiond3Chart', ['CosdeletionD3Config', '$timeout','$extendObj', function(CosdeletionD3Config, $timeout,$extendObj) {
\r
1417 controller: ['$scope', '$attrs', function($scope, $attrs) {
\r
1418 if (angular.isDefined($scope.chartConfig)) {
\r
1419 CosdeletionD3Config = $extendObj.extendDeep(CosdeletionD3Config, $scope.chartConfig);
\r
1423 link: function(scope, element, attrs) {
\r
1424 var zoom = parseInt(CosdeletionD3Config.zoomLevel, 0),
\r
1425 margin = {// optionally set margins
\r
1431 width = attrs.chartWidth,
\r
1432 height = attrs.chartHeight,
\r
1433 radius = Math.min(
\r
1434 width - (margin.left + margin.right),
\r
1435 height - (margin.top + margin.bottom)) / 2,arcPath;
\r
1437 var arc = d3.svg.arc()
\r
1438 .innerRadius(radius - CosdeletionD3Config.doughnutratio)
\r
1439 .outerRadius(radius);
\r
1440 var arcOver = d3.svg.arc()
\r
1441 .innerRadius(radius - CosdeletionD3Config.doughnutratio)
\r
1442 .outerRadius(radius + CosdeletionD3Config.arcOverMargin);
\r
1444 // Browser onresize event
\r
1445 window.onresize = function() {
\r
1448 scope.$watch('resetChart', function(newValue, oldValue) {
\r
1449 if(scope.resetChart === true){
\r
1450 scope.resetChart = false;
\r
1453 return scope.render(newValue, oldValue);
\r
1455 scope.render = function(newValue, oldValue) {
\r
1456 d3.select("svg#" + attrs.id).remove();
\r
1457 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
1458 if (!scope.chartData)
\r
1462 var data=angular.copy(scope.chartData);
\r
1463 data=data.reverse();
\r
1464 var totalBandwidth=0,totalUsed=0,remainingBandwidth=0,dynamicColorRange=[],noCheckBoxSelected=true,selectedBandwidth=0,selectedElem=[];
\r
1465 if (angular.isDefined(scope.maxValue)) {
\r
1466 totalBandwidth = parseInt(scope.maxValue, 0);
\r
1468 for (var j = 0; j < data.length; j++) {
\r
1469 totalUsed = (totalUsed + parseInt(data[j].value, 0));
\r
1470 if(angular.equals(data[j].status, true)){
\r
1471 noCheckBoxSelected=false;
\r
1472 selectedBandwidth=selectedBandwidth+data[j].value;
\r
1475 dynamicColorRange.push(CosdeletionD3Config.chartcolor.MaxBandwidthReached);
\r
1478 selectedElem.push({index: data[j].id, value: data[j].value});
\r
1479 dynamicColorRange.push(CosdeletionD3Config.chartcolor.UsedBandwidthColor);
\r
1482 if(scope.removeArcs){
\r
1483 while(data.length > 0) {
\r
1486 dynamicColorRange=[];
\r
1487 data.push({name: "totalUsed", value: totalUsed-selectedBandwidth,id:"totalUsed"});
\r
1488 dynamicColorRange.push(CosdeletionD3Config.chartcolor.UsedBandwidthColor);
\r
1489 scope.removeArcs=false;
\r
1491 if(totalUsed>0 && totalUsed<totalBandwidth){
\r
1492 remainingBandwidth=totalBandwidth-totalUsed;
\r
1493 if(!noCheckBoxSelected){
\r
1494 data.push({name: "selectedBandwidth", value: selectedBandwidth,id:"selectedBandwidth"});
\r
1495 dynamicColorRange.push(CosdeletionD3Config.chartcolor.MaxBandwidthReached);
\r
1497 data.push({name: "remaining", value: remainingBandwidth,id:"remaining"});
\r
1498 dynamicColorRange.push(CosdeletionD3Config.chartcolor.RemainingBandwidthColor);
\r
1500 element[0].setAttribute('id', attrs.id);
\r
1501 var svg = d3.select(element[0])
\r
1502 .attr("style", "height: " + attrs.chartHeight + "px;")
\r
1504 .attr("id", attrs.id)
\r
1505 .attr("radius", radius)
\r
1506 .attr("width", attrs.chartWidth)
\r
1507 .attr("height", attrs.chartHeight)
\r
1508 .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
\r
1509 .attr('preserveAspectRatio', 'xMinYMin')
\r
1511 .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
\r
1513 var centerTextValue = svg.append("text")
\r
1514 .attr("y", CosdeletionD3Config.centerTextValueDy)
\r
1515 .attr("x", CosdeletionD3Config.centerTextValueDx)
\r
1516 .attr("class", "cosdeletioncenterValue");
\r
1517 var centerTextLabel = svg.append("text")
\r
1518 .attr("y", CosdeletionD3Config.centerTextLabelDy)
\r
1519 .attr("x", CosdeletionD3Config.centerTextLabelDx)
\r
1520 .attr("class", "cosdeletioncenterLabel");
\r
1521 var maxbandwidthText = svg.append("text")
\r
1522 .attr("y", CosdeletionD3Config.maxbandwidthTextDy)
\r
1523 .attr("x", CosdeletionD3Config.maxbandwidthTextDx)
\r
1524 .attr("class", "cosdeletionmaxbandwidthText");
\r
1526 var color = d3.scale.ordinal().range(dynamicColorRange);
\r
1527 centerTextValue.text(totalUsed-selectedBandwidth);
\r
1528 centerTextLabel.text(CosdeletionD3Config.defaultcenterlabel);
\r
1529 maxbandwidthText.text(totalBandwidth + " " + CosdeletionD3Config.defaultcenterlabel);
\r
1531 var pie = d3.layout.pie()
\r
1533 .startAngle(CosdeletionD3Config.guageStartAngle)
\r
1534 .endAngle(CosdeletionD3Config.guageEndAngle)
\r
1535 .value(function(d) {
\r
1539 var g = svg.selectAll(".arc")
\r
1543 .attr("class", "arc")
\r
1544 .attr("id", function(d, i) {
\r
1545 return "cosdeletionarc-" + d.data.id;
\r
1547 .style("cursor", "pointer");
\r
1549 arcPath = g.append("path")
\r
1550 .style("fill", function(d) {
\r
1551 return color(d.data.name);
\r
1552 }).attr("id", function(d, i) {
\r
1553 return "cosdeletionpath-" + d.data.id;
\r
1558 .attrTween("d", tweenPie);
\r
1560 arcPath = arcPath[0];
\r
1561 for (var i = 0; i < arcPath.length; i++) {
\r
1562 var id = arcPath[i].id;
\r
1563 if (id !== 'cosdeletionpath-remaining' && id !== 'cosdeletionpath-selectedBandwidth') {
\r
1564 d3.select("path#" + id).transition().attr("d", arcOver);
\r
1568 if (remainingBandwidth > 0) {
\r
1569 if(angular.isDefined(newValue) && angular.isDefined(oldValue)){
\r
1570 for (var k = 0; k < selectedElem.length; k++) {
\r
1571 var index =selectedElem[k].index;
\r
1572 d3.select("path#cosdeletionpath-" + index).style('stroke', CosdeletionD3Config.chartcolor.UsedBandwidthStrokeColor).style("stroke-width", CosdeletionD3Config.chartcolor.UsedBandwidthStrokeWidth);
\r
1575 d3.select("#" + attrs.id + " path#cosdeletionpath-remaining").style('stroke', CosdeletionD3Config.chartcolor.RemainingBandwidthStrokeColor).style("stroke-width", CosdeletionD3Config.chartcolor.RemainingBandwidthStrokeWidth);
\r
1579 function tweenPie(b) {
\r
1580 var i = d3.interpolate({
\r
1581 startAngle: 2.1 * Math.PI,
\r
1582 endAngle: 2.1 * Math.PI
\r
1584 return function(t) {
\r
1591 angular.module('att.charts.cosmultichartD3', ['att.charts.utilities'])
\r
1592 .constant("CosMultiChartD3Config",
\r
1595 "paletteColors": ["#44c6f7", "#4ba90b", "#d70e80", "#ff9900", "#81017e", "#cccccc"], //default color options for rendering chart baseColor and NeedleColor,
\r
1596 "zeroTicketColor": ["#d3d3d3"]
\r
1598 "defaultcenterlabel": "CoS",
\r
1599 "defaultcentercategory": "2V/2/3/4/5",
\r
1600 "zoomLevel": "25",
\r
1601 "doughnutratio": 20,
\r
1602 "animduration": "300",
\r
1603 "legendreqd": "false",
\r
1604 "initduration": "1000",
\r
1605 "legendposition": "top",
\r
1606 "centerTextValueDy": "0",
\r
1607 "centerTextValueDx": "0",
\r
1608 "centerTextPercentDx": "22",
\r
1609 "centerTextPercentDy": "-8",
\r
1610 "centerTextLabelDy": "20",
\r
1611 "centerTextLabelDx": "0",
\r
1612 "arcOverMargin": 5
\r
1614 .directive('attCosmultid3Chart', ['CosMultiChartD3Config', '$timeout','$extendObj', function (CosMultiChartD3Config, $timeout,$extendObj) {
\r
1621 templateUrl: 'template/cosmultichartD3/attCosmultid3Chart.html',
\r
1624 controller: ['$scope', '$attrs', function ($scope, $attrs) {
\r
1626 if (angular.isDefined($scope.chartConfig)) {
\r
1627 CosMultiChartD3Config = $extendObj.extendDeep(CosMultiChartD3Config, $scope.chartConfig);
\r
1630 $scope.addLegendColor = function (id, item) {
\r
1631 return {"color": CosMultiChartD3Config.chartcolor.paletteColors[id]};
\r
1634 $scope.chartID = $attrs.id;
\r
1635 if (!angular.isDefined($attrs.legendRequired)) {
\r
1636 $scope.legendRequired = CosMultiChartD3Config.legendreqd;
\r
1638 $scope.legendRequired = $attrs.legendRequired;
\r
1640 if (!angular.isDefined($attrs.legendPosition)) {
\r
1641 $scope.legendPosition = CosMultiChartD3Config.legendposition;
\r
1643 $scope.legendPosition = $attrs.legendPosition;
\r
1646 link: function (scope, element, attrs) {
\r
1647 var zoom = parseInt(CosMultiChartD3Config.zoomLevel, 0),
\r
1649 margin = {// optionally set margins
\r
1655 width = attrs.chartWidth,
\r
1656 height = attrs.chartHeight,
\r
1657 radius = Math.min(
\r
1658 width - (margin.left + margin.right),
\r
1659 height - (margin.top + margin.bottom)) / 2;
\r
1661 function renderChart() {
\r
1662 var color = d3.scale.ordinal().range(CosMultiChartD3Config.chartcolor.paletteColors);
\r
1663 d3.select("svg#" + attrs.id).remove();
\r
1664 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
1665 var totalCosVal = 0, remainingCosVal;
\r
1666 for (var j = 0; j < scope.chartData.length; j++) {
\r
1667 var chartObj = scope.chartData[j];
\r
1668 totalCosVal = (totalCosVal + parseInt(chartObj.value, 10));
\r
1670 remainingCosVal = 100 - parseInt(totalCosVal, 10);
\r
1671 var data = angular.copy(scope.chartData);
\r
1672 if (angular.isDefined(remainingCosVal)) {
\r
1673 data.push({name: "rest", value: remainingCosVal});
\r
1675 element[0].querySelector('.cosmultid3Container').setAttribute('id', attrs.id);
\r
1677 var svg = d3.select(".cosmultid3Container#" + attrs.id)
\r
1678 .attr("style", "height: " + attrs.chartHeight + "px;")
\r
1680 .attr("id", attrs.id)
\r
1681 .attr("width", "100%")
\r
1682 .attr("height", "100%")
\r
1683 .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
\r
1684 .attr('preserveAspectRatio', 'xMinYMin')
\r
1686 .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
\r
1688 var arc = d3.svg.arc()
\r
1689 .innerRadius(radius - CosMultiChartD3Config.doughnutratio)
\r
1690 .outerRadius(radius);
\r
1691 // set hovered radius
\r
1692 var arcOver = d3.svg.arc()
\r
1693 .innerRadius(radius - CosMultiChartD3Config.doughnutratio)
\r
1694 .outerRadius(radius + CosMultiChartD3Config.arcOverMargin);
\r
1695 // add center text element
\r
1696 var centerTextValue = svg.append("text")
\r
1697 .attr("y", CosMultiChartD3Config.centerTextValueDy)
\r
1698 .attr("x", CosMultiChartD3Config.centerTextValueDx)
\r
1699 .attr("class", "cosmultichartcenterValue");
\r
1700 var centerTextPercent = svg.append("text")
\r
1701 .attr("x", CosMultiChartD3Config.centerTextPercentDx)
\r
1702 .attr("y", CosMultiChartD3Config.centerTextPercentDy)
\r
1703 .attr("class", "cosmultichartcenterPercent");
\r
1704 var centerTextLabel = svg.append("text")
\r
1705 .attr("y", CosMultiChartD3Config.centerTextLabelDy)
\r
1706 .attr("x", CosMultiChartD3Config.centerTextLabelDx)
\r
1707 .attr("class", "cosmultichartcenterLabel");
\r
1708 centerTextValue.text(totalCosVal);
\r
1709 centerTextPercent.text("%");
\r
1710 centerTextLabel.text(CosMultiChartD3Config.defaultcenterlabel +" " + CosMultiChartD3Config.defaultcentercategory);
\r
1712 if (totalCosVal <= 0) {
\r
1713 arc.startAngle(0).endAngle(2 * pi); //just radians
\r
1714 svg.append("path")
\r
1716 .attr("fill", CosMultiChartD3Config.chartcolor.zeroTicketColor);
\r
1718 var pie = d3.layout.pie()
\r
1720 .startAngle(3.2 * Math.PI)
\r
1721 .endAngle(5.2 * Math.PI)
\r
1722 .value(function (d) {
\r
1726 var g = svg.selectAll(".arc")
\r
1730 .attr("class", "arc")
\r
1731 .attr("id", function (d, i) {
\r
1732 return "cosmultiarc-" + i;
\r
1734 .style("cursor", "pointer");
\r
1737 .style("fill", function (d) {
\r
1738 return color(d.data.name);
\r
1740 .attr("id", function (d, i) {
\r
1741 return "cosmultipath-" + i;
\r
1743 .style("stroke", "white")
\r
1744 .style("stroke-width", 1)
\r
1745 .on("mouseover", function (d) {
\r
1746 d3.select(this).transition()
\r
1747 .duration(CosMultiChartD3Config.animduration)
\r
1748 .attr("d", arcOver);
\r
1750 .on("mouseout", function (d) {
\r
1751 d3.select(this).transition()
\r
1752 .duration(CosMultiChartD3Config.animduration)
\r
1758 .attrTween("d", tweenPie);
\r
1762 function tweenPie(b) {
\r
1763 var i = d3.interpolate({
\r
1764 startAngle: 2.1 * Math.PI,
\r
1765 endAngle: 2.1 * Math.PI
\r
1767 return function (t) {
\r
1773 scope.$watch('chartConfig', function(value) {
\r
1774 if (angular.isDefined(scope.chartConfig)) {
\r
1775 CosMultiChartD3Config = $extendObj.extendDeep(CosMultiChartD3Config, scope.chartConfig);
\r
1781 scope.$watch('chartData', function (value) {
\r
1787 angular.module('att.charts.donutD3', ['att.charts.utilities'])
\r
1788 .constant("DonutChartD3Config",
\r
1791 "paletteColors": ["#676767", "#96B1D0", "#0B2477", "#FF9900", "#81017D", "#B6BF00", "#DA0081", "#00C7B2"], //default color options for rendering chart
\r
1792 "zeroTicketColor": ["#d3d3d3"],
\r
1793 "centerTicketCountHoverColor":["#0574AC"]
\r
1795 "zoomlevel": "25",
\r
1796 "defaultcenterlabel": "Total",
\r
1797 "donutratio": "1.5",
\r
1798 "initduration": "1000",
\r
1799 "animduration": "300",
\r
1800 "legendreqd": "false",
\r
1801 "legendposition": "right",
\r
1802 "centerTextLabelDy": "20",
\r
1803 "clipMargin": "400",
\r
1804 "arcOverMargin":10
\r
1806 .directive('attDonutd3Chart', ['DonutChartD3Config', '$timeout','$extendObj', function (DonutChartD3Config, $timeout,$extendObj) {
\r
1813 refreshChart: '=',
\r
1814 onclickcallback: '&',
\r
1815 legendclickcallback: '&',
\r
1816 centerclickcallback: '&'
\r
1818 templateUrl: 'template/donutD3/attDonutd3Chart.html',
\r
1821 controller: ['$scope', '$attrs', function ($scope, $attrs) {
\r
1822 if (angular.isDefined($scope.chartConfig)) {
\r
1823 DonutChartD3Config = $extendObj.extendDeep(DonutChartD3Config,$scope.chartConfig);
\r
1825 var legendColors = [];
\r
1826 legendColors = ($scope.chartColor) ? $scope.chartColor : DonutChartD3Config.chartcolor.paletteColors;
\r
1827 $scope.addLegendColor = function (id, item) {
\r
1828 if (item.value > 0) {
\r
1829 return {"color": legendColors[id]};
\r
1831 return {"color": DonutChartD3Config.chartcolor.zeroTicketColor};
\r
1834 $scope.chartID = $attrs.id;
\r
1835 if (!angular.isDefined($attrs.legendRequired)) {
\r
1836 $scope.legendRequired = DonutChartD3Config.legendreqd;
\r
1838 $scope.legendRequired = $attrs.legendRequired;
\r
1840 if (!angular.isDefined($attrs.legendPosition)) {
\r
1841 $scope.legendPosition = DonutChartD3Config.legendposition;
\r
1843 $scope.legendPosition = $attrs.legendPosition;
\r
1845 $scope.addStyle = function (elem) {
\r
1846 if ($scope.legendRequired && angular.isDefined($scope.legendPosition)) {
\r
1847 if ($attrs.legendPosition === "right") {
\r
1848 return "floatLeft";
\r
1850 if (elem === 'chartLegend')
\r
1852 return "floatLeft";
\r
1856 return "floatRight";
\r
1860 return "floatLeft";
\r
1864 link: function (scope, element, attrs) {
\r
1865 scope.$watch('refreshChart', function () {
\r
1866 if (angular.isDefined(scope.refreshChart)) {
\r
1867 if (scope.refreshChart !== true)
\r
1871 for (var j = 0; j < scope.chartData.length; j++) {
\r
1872 var chartObj =scope.chartData[j];
\r
1873 var className = (chartObj.name).replace(/ /g, "").toUpperCase();
\r
1874 angular.element(document.querySelector("[chart-legend-id=" + className + "]")).removeClass("active");
\r
1881 if (angular.isDefined(scope.chartConfig)) {
\r
1882 DonutChartD3Config = $extendObj.extendDeep(DonutChartD3Config, scope.chartConfig);
\r
1884 d3.select("svg#" + attrs.id).remove();
\r
1885 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
1886 var selectedPath = "",
\r
1889 var zoom = parseInt(DonutChartD3Config.zoomlevel, 0),
\r
1890 coloroptions = (scope.chartColor) ? scope.chartColor : DonutChartD3Config.chartcolor.paletteColors,
\r
1891 defaultcenterlabel = DonutChartD3Config.defaultcenterlabel,
\r
1893 margin = {// optionally set margins
\r
1899 // set height and width plus margin so zoomed area is not clipped
\r
1900 /* width = parseInt(attrs.chartWidth, 0) - (margin.left + margin.right),
\r
1901 height = parseInt(attrs.chartHeight, 0) - (margin.top + margin.bottom),
\r
1902 radius = Math.min(
\r
1903 width - (margin.left + margin.right),
\r
1904 height - (margin.top + margin.bottom)) / 2,*/
\r
1905 width = attrs.chartWidth,
\r
1906 height = attrs.chartHeight,
\r
1907 radius = Math.min(
\r
1908 width - (margin.left + margin.right),
\r
1909 height - (margin.top + margin.bottom)) / 2,
\r
1910 color = d3.scale.ordinal().range(coloroptions);
\r
1911 if (angular.isDefined(scope.chartData)) {
\r
1912 for (var i in scope.chartData) {
\r
1913 if (angular.isDefined(scope.chartData[i].value)) {
\r
1914 totalcount = (totalcount + parseInt(scope.chartData[i].value, 10));
\r
1920 for (var z = 0; z < scope.chartData.length; z++) {
\r
1921 var chartElem =scope.chartData[z];
\r
1922 if(chartElem.value <= 0){
\r
1923 data.push({index: z, value: chartElem.value});
\r
1926 var chartStyle = d3.select(".chartContainer#" + attrs.id)
\r
1928 var chart = d3.select(".chartContainer#" + attrs.id)
\r
1929 .attr("style", "height: " + attrs.chartHeight + "px;width:" + attrs.chartWidth + "px;")
\r
1931 .attr("id", attrs.id)
\r
1932 .attr("width", '100%')
\r
1933 .attr("height", '100%')
\r
1934 .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
\r
1935 .attr('preserveAspectRatio', 'xMinYMin')
\r
1937 .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
\r
1939 var arc = d3.svg.arc()
\r
1940 .innerRadius(radius / DonutChartD3Config.donutratio)
\r
1941 .outerRadius(radius);
\r
1942 // add center text element
\r
1943 var centerTextValue = chart.append("text")
\r
1944 .attr("class", "donutcenterValue")
\r
1945 .attr("id", attrs.id + "count")
\r
1946 .on("click", function (d) {
\r
1947 var value = d3.select("g > text#" + attrs.id + "count").text();
\r
1948 var label = d3.select("g > text#" + attrs.id + "category").text();
\r
1949 if (angular.isDefined(scope.onclickcallback)) {
\r
1950 scope.centerclickcallback({count: value, category: label});
\r
1953 var centerTextLabel = chart.append("text")
\r
1954 .attr("y", DonutChartD3Config.centerTextLabelDy)
\r
1955 .attr("class", "donutcenterLabel")
\r
1956 .attr("id", attrs.id + "category");
\r
1958 centerTextValue.text(totalcount);
\r
1959 centerTextLabel.text(defaultcenterlabel);
\r
1960 if (totalcount <= 0) {
\r
1961 arc.startAngle(0).endAngle(2 * pi); //just radians
\r
1962 chart.append("path")
\r
1964 .attr("fill", DonutChartD3Config.chartcolor.zeroTicketColor);
\r
1966 // set hovered radius
\r
1967 var arcOver = d3.svg.arc()
\r
1968 .innerRadius(radius / DonutChartD3Config.donutratio)
\r
1969 .outerRadius(radius + DonutChartD3Config.arcOverMargin);
\r
1970 var pie = d3.layout.pie()
\r
1972 .startAngle(1.1 * Math.PI)
\r
1973 .endAngle(3.1 * Math.PI)
\r
1974 .value(function (d) {
\r
1977 var g = chart.selectAll(".arc")
\r
1978 .data(pie(scope.chartData))
\r
1981 .attr("class", "arc")
\r
1982 .style("cursor", "pointer");
\r
1983 // set fill color and animate tween
\r
1985 .style("fill", function (d) {
\r
1986 return color(d.data.name);
\r
1988 .attr("path-id",function (d, i) {
\r
1991 .style("stroke", "white")
\r
1992 .style("stroke-width", 1)
\r
1993 .on("mouseover", function (d) {
\r
1994 d3.select(this).transition()
\r
1995 .duration(DonutChartD3Config.animduration)
\r
1996 .attr("d", arcOver);
\r
1998 centerTextValue.text(d3.select(this).datum().data.value);
\r
1999 centerTextLabel.text(d3.select(this).datum().data.name);
\r
2000 var className = d3.select(this).datum().data.name.replace(/ /g, "").toUpperCase();
\r
2001 angular.element(document.querySelector("[chart-legend-id=" + className + "]")).addClass("active");
\r
2003 .on("mouseout", function (d) {
\r
2004 if (!this.getAttribute("clicked")) {
\r
2005 d3.select(this).transition()
\r
2006 .duration(DonutChartD3Config.animduration)
\r
2008 if (selectedPath.length === 0) {
\r
2009 centerTextValue.text(totalcount);
\r
2010 centerTextLabel.text(defaultcenterlabel);
\r
2012 centerTextValue.text(selectedPath.datum().data.value);
\r
2013 centerTextLabel.text(selectedPath.datum().data.name);
\r
2015 var className = d3.select(this).datum().data.name.replace(/ /g, "").toUpperCase();
\r
2016 angular.element(document.querySelector("[chart-legend-id=" + className + "]")).removeClass("active");
\r
2017 } else if (angular.isDefined(lastSelected) && lastSelected!=="") {
\r
2018 lastSelected.transition()
\r
2019 .duration(DonutChartD3Config.animduration)
\r
2021 if (angular.isDefined(lastSelected)) {
\r
2022 var prevclassName = lastSelected.datum().data.name.replace(/ /g, "").toUpperCase();
\r
2023 angular.element(document.querySelector("[chart-legend-id=" + prevclassName + "]")).removeClass("active");
\r
2027 .on("click", function (d, i) {
\r
2028 if (angular.isDefined(scope.onclickcallback)) {
\r
2029 scope.onclickcallback({name: d3.select(this).datum().data.name, value: d3.select(this).datum().data.value});
\r
2031 if (!this.getAttribute("clicked")) {
\r
2032 this.setAttribute("clicked", "clicked");
\r
2033 if (selectedPath !== "") {
\r
2034 lastSelected = selectedPath;
\r
2035 selectedPath[0][0].removeAttribute("clicked");
\r
2037 selectedPath = d3.select(this);
\r
2039 if (this.getAttribute("path-id") === selectedPath.attr("path-id")) {
\r
2040 selectedPath[0][0].removeAttribute("clicked");
\r
2041 selectedPath = "";
\r
2048 .duration(DonutChartD3Config.initduration)
\r
2049 .attrTween("d", tweenPie);
\r
2050 // animate function
\r
2051 scope.legendMouseOver = function (item, id, e) {
\r
2052 selectedId="b-"+id;
\r
2053 if (item.value > 0) {
\r
2054 scope.LegendClass = "";
\r
2055 this.LegendClass = "active";
\r
2056 centerTextValue.text(item.value);
\r
2057 centerTextLabel.text(item.name);
\r
2058 d3.selectAll(".chartContainer#"+attrs.id+" "+"path").each(function(d, i) {
\r
2059 if(this.getAttribute("path-id")==selectedId){
\r
2060 d3.select(this).transition()
\r
2061 .duration(DonutChartD3Config.animduration)
\r
2062 .attr("d", arcOver);
\r
2066 d3.select("#TicketGraphcount").style('fill',DonutChartD3Config.chartcolor.centerTicketCountHoverColor);
\r
2069 scope.legendMouseLeave = function (item, id, e) {
\r
2070 selectedId="b-"+id;
\r
2071 hoveredLegendItem=this;
\r
2072 if (item.value > 0) {
\r
2073 if (selectedPath.length === 0) {
\r
2074 centerTextValue.text(totalcount);
\r
2075 centerTextLabel.text(defaultcenterlabel);
\r
2077 centerTextValue.text(selectedPath.datum().data.value);
\r
2078 centerTextLabel.text(selectedPath.datum().data.name);
\r
2080 d3.selectAll(".chartContainer#"+attrs.id+" "+"path").each(function(d, i) {
\r
2081 if(this.getAttribute("path-id")==selectedId){
\r
2082 if(this.getAttribute("clicked")===null){
\r
2083 hoveredLegendItem.LegendClass = "";
\r
2084 d3.select(this).transition().duration(DonutChartD3Config.animduration).attr("d", arc);
\r
2088 d3.select("#TicketGraphcount").style('fill', "#000");
\r
2093 function tweenPie(b) {
\r
2094 var i = d3.interpolate({
\r
2095 startAngle: 1.1 * Math.PI,
\r
2096 endAngle: 1.1 * Math.PI
\r
2098 return function (t) {
\r
2102 $timeout(function () {
\r
2103 var h = element.find("ul")[0].clientHeight,
\r
2104 fHeight = (parseInt(height, 10) - h),
\r
2105 className = scope.addStyle('chartContainer');
\r
2106 fHeight = (fHeight < 0) ? 0 : fHeight;
\r
2107 angular.element(element[0].querySelector('.chartContainer')).addClass(className);
\r
2108 angular.element(element[0].querySelector(".chartLegend")).css({
\r
2109 "margin-top": (fHeight / 2) + "px"
\r
2112 for (var k = 0; k < data.length; k++) {
\r
2113 var index =data[k].index;
\r
2114 var zeroValIndex="b-"+index;
\r
2115 if(data[k].value <= 0){
\r
2116 removeStrokelines(zeroValIndex);
\r
2121 function removeStrokelines(zeroValIndex){
\r
2122 d3.selectAll(".chartContainer#"+attrs.id+" "+"path").each(function(d, i) {
\r
2123 if(this.getAttribute("path-id")==zeroValIndex){
\r
2124 d3.select(this).style('stroke', "").style("stroke-width", "");
\r
2128 scope.refreshChart = false;
\r
2134 .filter('filterData', function () {
\r
2135 return function (input) {
\r
2136 return input.replace(/ /g, "").toUpperCase();
\r
2139 angular.module('att.charts.donutFusion', [])
\r
2140 .constant("DonutChartFusionConfig",
\r
2143 "caption": "Tickets",
\r
2144 "startingAngle": 0,
\r
2146 "captionPadding": "0",
\r
2147 "paletteColors": "#FF0066,#00CCFF,#00CC66,#6699FF,#000099,#660066,#FF6600,#4D4D4D", //default color options for rendering chart
\r
2148 "enableSmartLabels": "0",
\r
2149 "enableMultiSlicing": "1",
\r
2150 "donutRadius": "65",
\r
2151 "pieRadius": "110",
\r
2152 "showLabels": "0",
\r
2153 "showValues": "0",
\r
2154 "showBorder": "0",
\r
2155 "showpercentintooltip": "0",
\r
2156 "bgcolor": "#FFFFFF",
\r
2157 "defaultCenterLabel": "Total",
\r
2159 "centerLabel": "$value $label",
\r
2160 "plotHoverEffect": 1,
\r
2161 "plotBorderHoverDashGap": "50",
\r
2162 "enableRotation": "0",
\r
2163 "baseFont": "Arial",
\r
2164 "baseFontColor": "#666666",
\r
2165 "use3DLighting": "0",
\r
2166 "numbersuffix": "",
\r
2167 "defaultAnimation": "0",
\r
2168 "showValuesOnHover": 0
\r
2171 .directive('attDonutfusionChart', ['DonutChartFusionConfig', '$timeout', function (DonutChartFusionConfig, $timeout) {
\r
2177 onclickcallback: '&'
\r
2179 templateUrl: 'template/donutFusion/attDonutfusionChart.html',
\r
2182 link: function (scope, element, attrs, controller, transclude) {
\r
2183 var totalItems = 0;
\r
2184 if (angular.isDefined(scope.chartData)) {
\r
2185 for (var i in scope.chartData) {
\r
2186 if(angular.isDefined(scope.chartData[i].value)){
\r
2187 totalItems = (totalItems + parseInt(scope.chartData[i].value, 10));
\r
2191 DonutChartFusionConfig.data = scope.chartData;
\r
2192 var donutChartDataSource = DonutChartFusionConfig;
\r
2193 var defaultCenterLabelText;
\r
2194 defaultCenterLabelText = totalItems + ' ' + DonutChartFusionConfig.chart.defaultCenterLabel;
\r
2195 donutChartDataSource.chart.defaultCenterLabel = defaultCenterLabelText;
\r
2197 var initChart = function () {
\r
2198 FusionCharts.ready(function () {
\r
2199 var donutChart = new FusionCharts({
\r
2200 type: 'doughnut2d',
\r
2201 renderAt: "donutFusionChart",
\r
2203 width: attrs.chartWidth,
\r
2204 height: attrs.chartHeight,
\r
2205 dataFormat: 'json',
\r
2206 dataSource: donutChartDataSource,
\r
2208 //dataPlotRollOver event is raised whenever you hover over a data plot (column, anchor of line or area, pie etc.)
\r
2209 "dataPlotRollOver": function (evtObj, argumentsObject) {
\r
2210 var selectedLabelArr = argumentsObject.toolText.split(",");
\r
2211 var className = selectedLabelArr[0].replace(/ /g, "").toUpperCase();
\r
2212 angular.element(document.querySelector("[chart-legend-id=" + className + "_fusion" + "]")).addClass("active");
\r
2214 "dataPlotRollOut": function (evtObj, argObj) {
\r
2215 var selectedLabelArr = argObj.toolText.split(",");
\r
2216 var className = selectedLabelArr[0].replace(/ /g, "").toUpperCase();
\r
2217 angular.element(document.querySelector("[chart-legend-id=" + className + "_fusion" + "]")).removeClass("active");
\r
2219 "dataPlotClick": function (evtObj, argObj) {
\r
2220 if(angular.isDefined(scope.onclickcallback)){
\r
2221 scope.onclickcallback({evtObj:evtObj, argObj:argObj});
\r
2226 donutChart.render();
\r
2227 DonutChartFusionConfig.chart.defaultCenterLabel = DonutChartFusionConfig.chart.defaultCenterLabel;
\r
2231 $timeout(function () {
\r
2232 var w = element.find("ul")[0].clientHeight,
\r
2233 fWidth = (parseInt(attrs.chartHeight, 10) - w);
\r
2234 element.find("ul").css("margin-top", (fWidth / 2) + "px");
\r
2238 controller: function ($scope, $element, $attrs) {
\r
2239 var legendColors = [];
\r
2240 legendColors = DonutChartFusionConfig.chart.paletteColors.split(",");
\r
2241 $scope.addLegendColor = function (id) {
\r
2242 return {"color": legendColors[id]};
\r
2244 $scope.legendRequired = $attrs.legendRequired;
\r
2246 $scope.addStyle = function (elem) {
\r
2247 if ($scope.legendRequired && angular.isDefined($attrs.legendPosition)) {
\r
2248 if ($attrs.legendPosition === "right") {
\r
2249 if (elem === 'chartLegend')
\r
2251 return {"float": "left"};
\r
2255 return {"float": "left"};
\r
2258 if (elem === 'chartLegend')
\r
2260 return {"float": "left"};
\r
2264 return {"float": "right"};
\r
2268 return {"float": "left"};
\r
2274 .filter('filterData', function () {
\r
2275 return function (input) {
\r
2276 return input.replace(/ /g, "").toUpperCase();
\r
2279 angular.module('att.charts.horseshoeD3', ['att.charts.utilities'])
\r
2280 .constant("HorseShoeChartD3Config",
\r
2283 "paletteColors": ["#1072b8", "#FEFFF7"], //default color options for rendering chart baseColor and NeedleColor,
\r
2284 "paletteBorderColors": ["#1072b8", "#000"]
\r
2286 "defaultcenterlabel": "COS 1",
\r
2287 "defaultcentercategory": "Real Time",
\r
2288 "animduration": 500,
\r
2289 "legendreqd": "false",
\r
2290 "legendposition": "top",
\r
2291 "centerTextLabelDy": "20"
\r
2293 .directive('attHorseshoed3Chart', ['HorseShoeChartD3Config', '$timeout','$extendObj', function (HorseShoeChartD3Config, $timeout,$extendObj) {
\r
2301 templateUrl: 'template/horseshoeD3/attHorseshoeD3Chart.html',
\r
2304 controller: ['$scope', '$attrs',function ($scope, $attrs) {
\r
2305 if (angular.isDefined($scope.chartConfig)) {
\r
2306 HorseShoeChartD3Config = $extendObj.extendDeep(HorseShoeChartD3Config, $scope.chartConfig);
\r
2308 var legendColor = [];
\r
2309 legendColor = HorseShoeChartD3Config.chartcolor.paletteColors;
\r
2310 $scope.addLegendColor = function () {
\r
2311 return {"color": legendColor[0]};
\r
2313 if (!angular.isDefined($attrs.legendRequired)) {
\r
2314 $scope.legendRequired = HorseShoeChartD3Config.legendreqd;
\r
2316 $scope.legendRequired = $attrs.legendRequired;
\r
2318 if (!angular.isDefined($attrs.legendPosition)) {
\r
2319 $scope.legendPosition = HorseShoeChartD3Config.legendposition;
\r
2321 $scope.legendPosition = $attrs.legendPosition;
\r
2324 link: function (scope, element, attrs) {
\r
2325 var radius = Math.min(attrs.chartWidth, attrs.chartHeight) / 2;
\r
2326 scope.LegendLabel = HorseShoeChartD3Config.defaultcenterlabel;
\r
2327 scope.LegendCategory = HorseShoeChartD3Config.defaultcentercategory;
\r
2328 var duration = HorseShoeChartD3Config.animduration,
\r
2329 guageVal = parseInt(scope.initVal.value, 10);
\r
2330 scope.guageVal = guageVal + "%";
\r
2332 lower: calcPercent(0),
\r
2333 upper: calcPercent(guageVal)
\r
2335 pie = d3.layout.pie().sort(null),
\r
2336 format = d3.format(".0%");
\r
2337 var arc = d3.svg.arc()
\r
2338 .innerRadius(radius - 20)
\r
2339 .outerRadius(radius)
\r
2340 .startAngle(function (d) {
\r
2341 return d.startAngle + 2.6 * Math.PI / 2;
\r
2343 .endAngle(function (d) {
\r
2344 return d.endAngle + 2.6 * Math.PI / 2;
\r
2347 element[0].querySelector('.horseshoed3Container').setAttribute('id', scope.horseShoeId);
\r
2349 var svg = d3.select(".horseshoed3Container#" + scope.horseShoeId)
\r
2350 .attr("style", "height: " + attrs.chartHeight + "px;")
\r
2352 .attr("id", scope.horseShoeId)
\r
2353 .attr("width", "100%")
\r
2354 .attr("height", "100%")
\r
2355 .attr('viewBox', '0 0 ' + Math.min(attrs.chartWidth, attrs.chartHeight) + ' ' + Math.min(attrs.chartWidth, attrs.chartHeight))
\r
2356 .attr('preserveAspectRatio', 'xMinYMin')
\r
2358 .attr("transform", "translate(" + Math.min(attrs.chartWidth, attrs.chartHeight) / 2 + "," + Math.min(attrs.chartWidth, attrs.chartHeight) / 2 + ")");
\r
2359 var path = svg.selectAll("path")
\r
2360 .data(pie(dataset.lower))
\r
2361 .enter().append("path")
\r
2362 .attr("class", function (d, i) {
\r
2363 return "color" + i;
\r
2365 .attr("fill", HorseShoeChartD3Config.chartcolor.paletteColors[1])
\r
2366 .attr("stroke", HorseShoeChartD3Config.chartcolor.paletteBorderColors[1])
\r
2368 .each(function (d) {
\r
2369 this._current = d;
\r
2370 }); // store the initial values
\r
2371 // add center text element
\r
2372 var centerTextValue = svg.append("text")
\r
2373 .attr("class", "horseshoecenterValue");
\r
2374 var centerTextLabel = svg.append("text")
\r
2375 .attr("y", HorseShoeChartD3Config.centerTextLabelDy)
\r
2376 .attr("class", "horseshoecenterLabel");
\r
2377 if (typeof (guageVal) === "string") {
\r
2378 centerTextValue.text(guageVal);
\r
2379 centerTextLabel.text(HorseShoeChartD3Config.defaultcenterlabel + "(" + HorseShoeChartD3Config.defaultcentercategory + ")");
\r
2383 var timeout = setTimeout(function () {
\r
2384 clearTimeout(timeout);
\r
2385 path = path.data(pie(dataset.upper)); // update the data
\r
2386 path.transition().duration(duration).attrTween("d", function (a, index) {
\r
2387 angular.element(this)
\r
2388 .attr("fill", HorseShoeChartD3Config.chartcolor.paletteColors[index])
\r
2389 .attr("stroke", HorseShoeChartD3Config.chartcolor.paletteBorderColors[index]);
\r
2391 var i = d3.interpolate(this._current, a);
\r
2392 var i2 = d3.interpolate(progress, guageVal);
\r
2393 this._current = i(0);
\r
2394 return function (t) {
\r
2395 centerTextValue.text(format(i2(t) / 100));
\r
2396 centerTextLabel.text(HorseShoeChartD3Config.defaultcenterlabel + "(" + HorseShoeChartD3Config.defaultcentercategory + ")");
\r
2399 }); // redraw the arcs
\r
2403 scope.$watch('initVal', function (value) {
\r
2404 scope.guageVal = value.value + "%";
\r
2405 path.data(pie(calcPercent(value.value)));
\r
2406 path.transition().duration(duration).attrTween("d", function (a, index) {
\r
2407 angular.element(this)
\r
2408 .attr("fill", HorseShoeChartD3Config.chartcolor.paletteColors[index])
\r
2409 .attr("stroke", HorseShoeChartD3Config.chartcolor.paletteBorderColors[index]);
\r
2411 var i = d3.interpolate(this._current, a);
\r
2412 var i2 = d3.interpolate(progress, value.value);
\r
2413 this._current = i(0);
\r
2414 return function (t) {
\r
2415 centerTextValue.text(format(i2(t) / 100));
\r
2416 centerTextLabel.text(HorseShoeChartD3Config.defaultcenterlabel + "(" + HorseShoeChartD3Config.defaultcentercategory + ")");
\r
2419 }); // redraw the arcs
\r
2422 function calcPercent(guageVal) {
\r
2423 return [guageVal, 100 - guageVal];
\r
2429 angular.module('att.charts.radialguageD3', ['att.charts.utilities'])
\r
2430 .constant("RadialGuageChartD3Config",
\r
2433 "MaxBandwidthReached": ["#efefef"],
\r
2434 "ZeroBandwidthSelected": ["#FEFFF7"],
\r
2435 "RemainingBandwidthColor": ["#FEFFF7"],
\r
2436 "RemainingBandwidthStrokeColor": ["#000000"],
\r
2437 "UsedBandwidthColor": ["#1072b8"],
\r
2438 "MouseOverArcFillColor": ["#0091d9"],
\r
2439 "RemainingBandwidthStrokeWidth":1,
\r
2440 "UsedBandwidthStrokeWidth":1,
\r
2441 "UsedBandwidthStrokeColor":["#efefef"]
\r
2443 "defaultcenterlabel": "Kbps",
\r
2444 "maxAllowedUnitsLabel": "Kbps",
\r
2445 "zoomLevel": "25",
\r
2446 "doughnutratio": 20,
\r
2447 "animduration": "300",
\r
2448 "guageStartAngle":4,
\r
2449 "guageEndAngle":8.56,
\r
2450 "legendreqd": "false",
\r
2451 "legendposition": "top",
\r
2452 "centerTextLabelDy": "20",
\r
2453 "centerTextValueDy": "0",
\r
2454 "centerTextValueDx": "0",
\r
2455 "centerTextLabelDx": "0",
\r
2456 "maxbandwidthTextDx": "65",
\r
2457 "maxbandwidthTextDy": "100",
\r
2458 "arcOverMargin": 5
\r
2460 .directive('attRadialguaged3Chart', ['RadialGuageChartD3Config', '$timeout','$extendObj', function(RadialGuageChartD3Config, $timeout,$extendObj) {
\r
2470 controller: ['$scope', '$attrs', function($scope, $attrs) {
\r
2471 if (angular.isDefined($scope.chartConfig)) {
\r
2472 RadialGuageChartD3Config = $extendObj.extendDeep(RadialGuageChartD3Config, $scope.chartConfig);
\r
2476 link: function(scope, element, attrs) {
\r
2477 var zoom = parseInt(RadialGuageChartD3Config.zoomLevel, 0),
\r
2478 margin = {// optionally set margins
\r
2484 width = attrs.chartWidth,
\r
2485 height = attrs.chartHeight,
\r
2486 radius = Math.min(
\r
2487 width - (margin.left + margin.right),
\r
2488 height - (margin.top + margin.bottom)) / 2;
\r
2490 var arc = d3.svg.arc()
\r
2491 .innerRadius(radius - RadialGuageChartD3Config.doughnutratio)
\r
2492 .outerRadius(radius);
\r
2493 // set hovered radius
\r
2494 var arcOver = d3.svg.arc()
\r
2495 .innerRadius(radius - RadialGuageChartD3Config.doughnutratio)
\r
2496 .outerRadius(radius + RadialGuageChartD3Config.arcOverMargin);
\r
2497 // Browser onresize event
\r
2498 window.onresize = function() {
\r
2502 scope.$watch('mouseOver', function(val) {
\r
2503 if (!angular.isDefined(scope.mouseOver)) { return; }
\r
2504 var id = parseInt(scope.mouseOver.split('-')[1], 10);
\r
2505 if (scope.mouseOver.split('-')[0] === 'true') {
\r
2506 d3.select('path#radialguagepath-' + (id)).transition()
\r
2507 .duration(parseInt(RadialGuageChartD3Config.animduration,10))
\r
2508 .attr('d', arcOver);
\r
2511 d3.select('path#radialguagepath-' + (id)).transition()
\r
2512 .duration(parseInt(RadialGuageChartD3Config.animduration,10))
\r
2517 scope.$watch('resetChart', function() {
\r
2518 if (angular.isDefined(scope.resetChart)) {
\r
2519 if (angular.isDefined(scope.chartData)) {
\r
2520 scope.render(scope.chartData, scope.chartData);
\r
2522 scope.resetChart = false;
\r
2525 scope.$watch('chartData', function(newValue, oldValue) {
\r
2526 return scope.render(newValue, oldValue);
\r
2528 scope.render = function(newValue, oldValue) {
\r
2529 d3.select("svg#" + attrs.id).remove();
\r
2530 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
2531 if (!scope.chartData)
\r
2535 var color, selectedSlider, totalBandwidth = 0, totalUsed = 0, remainingBandwidth = 0;
\r
2536 if (angular.isDefined(scope.maxValue)) {
\r
2537 totalBandwidth = parseInt(scope.maxValue, 0);
\r
2539 angular.forEach(newValue, function(val, key) {
\r
2540 totalUsed = (totalUsed + parseInt(val.value, 10));
\r
2541 if (newValue[key].value !== oldValue[key].value) {
\r
2542 selectedSlider = key;
\r
2545 var data = angular.copy(scope.chartData);
\r
2546 if (totalUsed < totalBandwidth) {
\r
2547 remainingBandwidth = totalBandwidth - parseInt(totalUsed, 0);
\r
2548 data.push({name: "remaining", value: remainingBandwidth});
\r
2550 element[0].setAttribute('id', attrs.id);
\r
2551 var svg = d3.select(element[0])
\r
2552 .attr("style", "height: " + attrs.chartHeight + "px;")
\r
2554 .attr("id", attrs.id)
\r
2555 .attr("width", "100%")
\r
2556 .attr("height", "100%")
\r
2557 .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
\r
2558 .attr('preserveAspectRatio', 'xMinYMin')
\r
2560 .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
\r
2562 var centerTextValue = svg.append("text")
\r
2563 .attr("y", RadialGuageChartD3Config.centerTextValueDy)
\r
2564 .attr("x", RadialGuageChartD3Config.centerTextValueDx)
\r
2565 .attr("class", "radialguagecenterValue");
\r
2566 var centerTextLabel = svg.append("text")
\r
2567 .attr("y", RadialGuageChartD3Config.centerTextLabelDy)
\r
2568 .attr("x", RadialGuageChartD3Config.centerTextLabelDx)
\r
2569 .attr("class", "radialguagecenterLabel");
\r
2570 var maxbandwidthText = svg.append("text")
\r
2571 .attr("y", RadialGuageChartD3Config.maxbandwidthTextDy)
\r
2572 .attr("x", RadialGuageChartD3Config.maxbandwidthTextDx)
\r
2573 .attr("class", "radialmaxbandwidthText");
\r
2574 if (totalUsed > totalBandwidth) {
\r
2575 totalUsed = totalBandwidth;
\r
2578 name: "totalUsed",
\r
2582 color = d3.scale.ordinal().range(RadialGuageChartD3Config.chartcolor.MaxBandwidthReached);
\r
2583 } else if (totalUsed <= 0) {
\r
2586 name: "totalUnUsed",
\r
2590 color = d3.scale.ordinal().range(RadialGuageChartD3Config.chartcolor.ZeroBandwidthSelected);
\r
2593 var Colorpalette = [];
\r
2594 if (newValue === oldValue) {
\r
2597 name: "totalUsed",
\r
2601 if (remainingBandwidth > 0) {
\r
2602 data.push({name: "remaining", value: remainingBandwidth});
\r
2605 for (var j = 0; j < data.length - 1; j++) {
\r
2606 Colorpalette[j] = RadialGuageChartD3Config.chartcolor.UsedBandwidthColor;
\r
2608 if (remainingBandwidth > 0) {
\r
2609 Colorpalette.push(RadialGuageChartD3Config.chartcolor.RemainingBandwidthColor);
\r
2611 color = d3.scale.ordinal().range(Colorpalette);
\r
2614 centerTextValue.text(totalUsed);
\r
2615 centerTextLabel.text(RadialGuageChartD3Config.defaultcenterlabel);
\r
2616 maxbandwidthText.text(totalBandwidth + " " + RadialGuageChartD3Config.maxAllowedUnitsLabel);
\r
2617 var pie = d3.layout.pie()
\r
2619 .startAngle(RadialGuageChartD3Config.guageStartAngle)
\r
2620 .endAngle(RadialGuageChartD3Config.guageEndAngle)
\r
2621 .value(function(d) {
\r
2625 var g = svg.selectAll(".arc")
\r
2629 .attr("class", "arc")
\r
2630 .attr("id", function(d, i) {
\r
2631 return "radialguagearc-" + i;
\r
2633 .style("cursor", "pointer");
\r
2635 if (newValue === oldValue) {
\r
2637 .style("fill", function(d) {
\r
2638 return color(d.data.name);
\r
2640 .attr("id", function(d, i) {
\r
2641 return "radialguagepath-" + i;
\r
2646 .attrTween("d", tweenPie);
\r
2649 .style("fill", function(d) {
\r
2650 return color(d.data.name);
\r
2652 .attr("id", function(d, i) {
\r
2653 return "radialguagepath-" + i;
\r
2655 .style("stroke", RadialGuageChartD3Config.chartcolor.RemainingBandwidthColor)
\r
2656 .style("stroke-width", RadialGuageChartD3Config.chartcolor.UsedBandwidthStrokeWidth)
\r
2660 .attrTween("d", tweenPie);
\r
2662 if (totalUsed === totalBandwidth || remainingBandwidth > 0) {
\r
2663 var count = data.length - 1;
\r
2664 d3.select("#" + attrs.id + " path#radialguagepath-" + count).style('stroke', RadialGuageChartD3Config.chartcolor.RemainingBandwidthStrokeColor).style("stroke-width", RadialGuageChartD3Config.chartcolor.RemainingBandwidthStrokeWidth);
\r
2666 if (angular.isDefined(selectedSlider) && remainingBandwidth > 0) {
\r
2668 d3.select("#" + attrs.id + " path#radialguagepath-" + selectedSlider).transition()
\r
2669 .duration(RadialGuageChartD3Config.animduration)
\r
2670 .attr("d", arcOver);
\r
2671 d3.select("#" + attrs.id + " path#radialguagepath-" + selectedSlider).style('fill', RadialGuageChartD3Config.chartcolor.MouseOverArcFillColor);
\r
2673 function tweenPie(b) {
\r
2674 var i = d3.interpolate({
\r
2675 startAngle: 2.1 * Math.PI,
\r
2676 endAngle: 2.1 * Math.PI
\r
2678 return function(t) {
\r
2689 angular.module('att.charts.stackedBarchart', ['att.charts.utilities'])
\r
2690 .constant("stackBarChartConfig",
\r
2692 "chartcolor": ["#B2B2B2", "#00CC00"],
\r
2693 "gridLineColor": "#CCCCCC",
\r
2694 "yAxisMaxTicks": 4,
\r
2695 "chartHeight": "200",
\r
2696 "chartOpacity": 0.3,
\r
2697 "amountKDivision": 1000,
\r
2698 "amountKText": "K",
\r
2699 "amountMDivision": 1000000,
\r
2700 "amountMText": "M",
\r
2701 "yearLabelPos": {"x": 10, "y": 15},
\r
2702 "tooltipTopMargin": 110,
\r
2703 "tooltipLeftMargin": 54,
\r
2711 .directive('stackedBarChart', ['stackBarChartConfig', '$extendObj', '$timeout', function (stackBarChartConfig, $extendObj, $timeout) {
\r
2716 legendRequired: "=",
\r
2717 refreshChart: "=",
\r
2720 templateUrl: "template/stackedBarchart/stackedBarchart.html",
\r
2722 controller: ['$scope', '$attrs', function ($scope, $attrs) {
\r
2723 if (angular.isDefined($scope.chartConfig)) {
\r
2724 stackBarChartConfig = $extendObj.extendDeep(stackBarChartConfig, $scope.chartConfig);
\r
2726 $scope.chartID = $attrs.id;
\r
2727 $scope.legendColors = stackBarChartConfig.chartcolor;
\r
2728 $scope.addLegendColor = function (id) {
\r
2729 var bgColor = null;
\r
2730 bgColor = {"background-color": $scope.legendColors[id]};
\r
2734 link: function (scope, element, attrs, ctrl) {
\r
2735 scope.tooltipFlag = false;
\r
2736 var dataObj, idx = 0, xAxisTicks, margin = stackBarChartConfig.margin,
\r
2737 width = parseInt(attrs.chartWidth, 10),
\r
2738 height = parseInt(stackBarChartConfig.chartHeight, 10),
\r
2740 parseDate = d3.time.format("%d-%b-%Y").parse,
\r
2741 tooltipFormat = d3.time.format("%B-%Y"),
\r
2742 labelFormat = d3.time.format("%Y");
\r
2743 attrs.$observe('legendRequired', function (val) {
\r
2744 if (val === 'true') {
\r
2745 scope.showLegend = true;
\r
2748 scope.showLegend = false;
\r
2751 scope.$watch('refreshChart', function (value) {
\r
2752 if (value === false) {
\r
2756 if (angular.isDefined(scope.chartConfig)) {
\r
2757 stackBarChartConfig = $extendObj.extendDeep(stackBarChartConfig, scope.chartConfig);
\r
2760 d3.select("svg#" + attrs.id).remove();
\r
2761 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
2762 d3.selectAll("div#stackBarChartContainer" + " > div").remove();
\r
2763 if (scope.chartData[0].values.length === 0) {
\r
2764 scope.refreshChart = false;
\r
2768 var xMonth = [], yDomainData = [], yAxisData = [], yValue = [], tempData = [], tooltipData = {}, yearArr = {}, isSingleMonth = false;
\r
2771 var xRange = d3.time.scale().range([padding, width - padding * 2]);
\r
2774 var yRange = d3.scale.linear().range([height - padding, padding]);
\r
2776 dataObj = scope.chartData;
\r
2778 dataObj.forEach(function (data) {
\r
2779 var obj = data.values;
\r
2780 xAxisTicks = obj.length;
\r
2781 if (obj.length == 1) {
\r
2782 isSingleMonth = true;
\r
2784 obj.forEach(function (d) {
\r
2785 var tmp = "01-" + d.month;
\r
2786 d.numericMonth = parseDate(tmp);
\r
2787 yValue.push({'value': +d.value});
\r
2788 d.value = +d.value;
\r
2789 xMonth.push({'numericMonth': d.numericMonth});
\r
2794 for (var z = 0; z < dataObj.length; z++) {
\r
2795 var tempSeries = dataObj[z].series;
\r
2796 for (var j = 0; j < dataObj[z].values.length; j++) {
\r
2797 var months = dataObj[z].values[j].month;
\r
2798 var tempVal = dataObj[z].values[j].value;
\r
2799 var percent = dataObj[z].values[j].percent;
\r
2800 tempData.push({"month": months, "series": tempSeries, "value": tempVal, "percent": percent});
\r
2804 for (var k = 0; k < tempData.length; k++) {
\r
2805 var seriesName = tempData[k].series;
\r
2806 var seriesVal = tempData[k].value;
\r
2807 var seriesPer = tempData[k].percent;
\r
2808 var tempObj = tooltipData[tempData[k].month];
\r
2811 tooltipData[tempData[k].month] = tempObj;
\r
2812 tooltipData[tempData[k].month]['seriesPer'] = seriesPer;
\r
2814 tempObj.push({seriesName: seriesName, seriesVal: seriesVal});
\r
2818 xRange.domain(d3.extent(xMonth, function (d) {
\r
2819 return d.numericMonth;
\r
2822 for (var b = 0; b < tempData.length; b++) {
\r
2823 var val = Math.round(parseInt(tempData[b].value, 10) / stackBarChartConfig.yAxisMaxTicks);
\r
2824 var Calc = Math.ceil((val / Math.pow(10, ("" + val).length - 1))) * (stackBarChartConfig.yAxisMaxTicks) * Math.pow(10, ("" + val).length - 1);
\r
2825 yDomainData.push({'yAxisVal': Calc});
\r
2829 yRange.domain([0, d3.max(yDomainData, function (d) {
\r
2830 return (d.yAxisVal);
\r
2833 var yTick = d3.max(yDomainData, function (d) {
\r
2834 return d.yAxisVal;
\r
2837 yTick = yTick / stackBarChartConfig.yAxisMaxTicks;
\r
2838 for (var x = 0; x <= stackBarChartConfig.yAxisMaxTicks; x++) {
\r
2839 yAxisData.push(yTick * x);
\r
2842 var formatMoney = function (d) {
\r
2843 if (d >= stackBarChartConfig.amountMDivision) {
\r
2844 return d / stackBarChartConfig.amountMDivision + stackBarChartConfig.amountMText;
\r
2845 } else if (d >= stackBarChartConfig.amountKDivision) {
\r
2846 return d / stackBarChartConfig.amountKDivision + stackBarChartConfig.amountKText;
\r
2851 var xAxis = d3.svg.axis().scale(xRange).orient("bottom").tickFormat(d3.time.format('%b')).ticks(d3.time.months);
\r
2852 var xAxisGrid = d3.svg.axis().scale(xRange).orient("top").ticks(d3.time.months).tickFormat('').tickSize(-height + 2 * padding, 0);
\r
2854 var yAxis = d3.svg.axis().scale(yRange).orient("left").tickValues(yAxisData).ticks(stackBarChartConfig.yAxisMaxTicks).tickFormat(formatMoney);
\r
2855 var yAxisGrid = d3.svg.axis().scale(yRange).orient("left").tickValues(yAxisData).ticks(stackBarChartConfig.yAxisMaxTicks).tickSize(-width, 0, 0);
\r
2858 //Calculate values for Stack
\r
2859 var stack = d3.layout.stack()
\r
2860 .values(function (d) {
\r
2864 return d.numericMonth;
\r
2871 var drawBarChart = d3.select("#stackBarChartContainer")
\r
2873 .attr("id", attrs.id)
\r
2875 .attr("width", width + margin.left + margin.right)
\r
2876 .attr("height", parseInt(height, 10) + parseInt(margin.top, 10) + parseInt(margin.bottom, 10))
\r
2878 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
\r
2881 drawBarChart.append("g")
\r
2882 .attr("class", "x axis")
\r
2883 .attr("transform", "translate(0," + (height - padding) + ")")
\r
2886 if (isSingleMonth) {
\r
2887 drawBarChart.select(".x").select(".tick").attr("transform", "translate(" + (isSingleMonth === true) * (width / 2 + 20) + ",0)");
\r
2890 //Draw Y Grid Lines
\r
2891 var yGrid = drawBarChart.append("g")
\r
2892 .attr("class", "grid").attr("id", "stackBarYGrid")
\r
2893 .attr("transform", "translate(0,0)")
\r
2895 yGrid.selectAll("line").style("stroke", stackBarChartConfig.gridLineColor);
\r
2896 yGrid.selectAll("text").remove();
\r
2898 //Plot Bars for multiple Stacks
\r
2899 var barGroup = drawBarChart.selectAll(".group")
\r
2900 .data(stack(dataObj))
\r
2901 .enter().append("g")
\r
2902 .attr("class", "group").attr("id", function (d, i) {
\r
2903 return ("stackBar" + i);
\r
2905 .attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)");
\r
2907 barGroup.append("title").text(function (d) {
\r
2911 var bars = barGroup.selectAll("rect")
\r
2912 .data(function (d) {
\r
2915 .enter().append("rect")
\r
2916 .attr("class", "bar")
\r
2917 .attr("x", function (d) {
\r
2918 return (xRange(d.numericMonth) - 10);
\r
2920 .attr("y", function (d) {
\r
2921 return yRange(d.value);
\r
2923 .attr("width", "20")
\r
2924 .attr("height", function (d) {
\r
2925 return ((height - yRange(d.value)) - padding);
\r
2926 }).on("mouseover", function (d) {
\r
2927 var offsetX = d3.select(this).attr("x");
\r
2928 var offsetY = d3.select(this).attr("y");
\r
2929 show_tooltip_grid_line(offsetX, "x");
\r
2930 drawBarChart.selectAll(".bar").style("fill-opacity", stackBarChartConfig.chartOpacity);
\r
2931 d3.select(this).style("fill-opacity", "1");
\r
2932 mouseOver(d, offsetX, offsetY);
\r
2933 }).on("mouseout", function () {
\r
2934 hide_tooltip_grid_line(d3.select(this).attr("x"), "x");
\r
2935 scope.tooltipFlag = false;
\r
2936 drawBarChart.selectAll(".bar").style("fill-opacity", "1");
\r
2940 bars.append('desc').append('title').text(function (d) {
\r
2941 var nvdaObj = tooltipData[d.month];
\r
2942 return (addTitle(nvdaObj, d));
\r
2945 //Fill color in Bars
\r
2946 for (var a = 0; a < dataObj.length; a++) {
\r
2947 var rectBars = drawBarChart.select('#stackBar' + a).selectAll('rect');
\r
2948 rectBars.attr('fill', scope.legendColors[a]).attr("fill-opacity", "1");
\r
2951 // Draw the x Grid lines
\r
2952 var xGrid = drawBarChart.append("g")
\r
2953 .attr("class", "grid").attr("id", "stackBarXGrid")
\r
2954 .attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)")
\r
2957 xGrid.selectAll("line").attr("transform", "translate(" + -Math.ceil((xRange(2) - xRange(1)) / 2) + "," + padding + ")")
\r
2958 .attr("id", function (d, i) {
\r
2959 return ("xGridLine" + i);
\r
2962 //Draw dual Y axis on change of Year
\r
2963 var yAxisObj = dataObj[0].values, yAxisIdx = 0;
\r
2964 for (var i = 0; i < yAxisObj.length; i++) {
\r
2967 tmpObj.push({"year": labelFormat(yAxisObj[i].numericMonth), "transform": xRange(yAxisObj[i].numericMonth)});
\r
2968 if (!yearArr[labelFormat(yAxisObj[i].numericMonth)]) {
\r
2969 yearArr[labelFormat(yAxisObj[i].numericMonth)] = tmpObj;
\r
2972 for (var key in yearArr) {
\r
2973 var obj = yearArr[key];
\r
2974 var yAxisNodes = drawBarChart.append("g")
\r
2975 .attr("class", "y axis").attr("id", yAxisId(yAxisIdx))
\r
2976 .attr("transform", "translate(" + (obj[0].transform - padding) + ",0)")
\r
2979 yAxisNodes.selectAll("text").attr('class', 'ticktext');
\r
2981 //Append Year Label
\r
2982 yAxisNodes.append("text")
\r
2983 .attr("transform", "rotate(0)")
\r
2984 .attr("y", stackBarChartConfig.yearLabelPos.y)
\r
2985 .attr("x", stackBarChartConfig.yearLabelPos.x)
\r
2986 .text(obj[0].year).attr("class", "yearLabel");
\r
2990 function yAxisId(yAxisIdx) {
\r
2991 return ("yAxis" + yAxisIdx);
\r
2994 //function to select first element
\r
2995 d3.selection.prototype.first = function () {
\r
2996 return d3.select(this[0][0]);
\r
2999 //Remove minimum value label form Y Axis
\r
3000 var tickLabels = d3.select("#yAxis0").selectAll('.ticktext');
\r
3001 //tickLabels.first().remove();
\r
3002 d3.select("#yAxis1").selectAll('.ticktext').remove();
\r
3004 //Add title for NVDA screen reader
\r
3005 function addTitle(nvdaObj, d) {
\r
3007 for (var y = 0; y < nvdaObj.length; y++) {
\r
3008 temp = temp + nvdaObj[y].seriesName + nvdaObj[y].seriesVal;
\r
3010 return (tooltipFormat(d.numericMonth) + "--" + temp + "Retainibility Percentage" + nvdaObj.seriesPer);
\r
3014 function mouseOver(d, offsetX, offsetY) {
\r
3015 for (var key in tooltipData) {
\r
3016 if (key == d.month) {
\r
3017 scope.stackDataPoint = tooltipData[key];
\r
3021 scope.monthPoint = {"xData": tooltipFormat(d.numericMonth).replace('-', ' ')};
\r
3023 $timeout(function () {
\r
3024 offsetY = offsetY - stackBarChartConfig.tooltipTopMargin;
\r
3025 var tooltipEl = element.children().eq(2);
\r
3026 var tooltipWidth = tooltipEl[0].offsetWidth;
\r
3027 if (isSingleMonth) {
\r
3028 offsetX = offsetX - (tooltipWidth / 2) + stackBarChartConfig.tooltipLeftMargin + (width / 2);
\r
3030 offsetX = offsetX - (tooltipWidth / 2) + stackBarChartConfig.tooltipLeftMargin;
\r
3032 scope.tooltipStyle = {"left": offsetX + "px", "top": offsetY + "px"};
\r
3033 scope.tooltipFlag = true;
\r
3037 //Show Grid Line on Over
\r
3038 function show_tooltip_grid_line(offsetX, attr) {
\r
3040 dataLength = scope.chartData[0].values.length;
\r
3041 for (var i = 0; i < dataLength; i++) {
\r
3042 var bar = drawBarChart.selectAll(".bar");
\r
3043 if (bar[0][i].getAttribute(attr) === offsetX) {
\r
3044 drawBarChart.select("#xGridLine" + i).style("stroke", stackBarChartConfig.gridLineColor);
\r
3050 function hide_tooltip_grid_line(offsetX, attr) {
\r
3052 dataLength = scope.chartData[0].values.length;
\r
3053 for (var i = 0; i < dataLength; i++) {
\r
3054 var bar = drawBarChart.selectAll(".bar");
\r
3055 if (bar[0][i].getAttribute(attr) === offsetX) {
\r
3056 drawBarChart.select("#xGridLine" + i).style("stroke", "transparent");
\r
3060 scope.refreshChart = false;
\r
3065 .filter('filterInput', function () {
\r
3066 return function (input) {
\r
3067 return input.replace(/ +/g, "").toLowerCase();
\r
3070 angular.module('att.charts.stackedareachart', ['att.charts.utilities'])
\r
3071 .constant("stackChartConfig",
\r
3073 "chartcolor": ["#9966FF", "#E68A2E", "#4DDB4D"],
\r
3074 "gridLineColor": "#808080",
\r
3075 "lineCurveType": 'linear',
\r
3076 "yAxisMaxTicks": 4,
\r
3077 "chartHeight": "200",
\r
3078 "shapes": ['circle', 'rect', 'triangle'],
\r
3079 "shapeSize": [3, 5, 6],
\r
3080 "chartOpacity": 0.6,
\r
3081 "yearLabelPos": {"x": 8, "y": -5},
\r
3082 "tooltipTopMargin": 100,
\r
3083 "tooltipLeftMargin": 42,
\r
3084 "yAxisUnitRange": 500000,
\r
3092 .directive('stackedAreaChart', ['stackChartConfig','$extendObj','$timeout', function (stackChartConfig,$extendObj,$timeout) {
\r
3097 legendRequired: "=",
\r
3098 refreshChart: "=",
\r
3101 templateUrl: "template/stackedareachart/stackedAreaChart.html",
\r
3103 controller: ['$scope', '$attrs', function ($scope, $attrs) {
\r
3104 var extendDeep = function extendDeep(dst) {
\r
3105 angular.forEach(arguments, function(obj) {
\r
3106 if (obj !== dst) {
\r
3107 angular.forEach(obj, function(value, key) {
\r
3108 if (dst[key] && dst[key].constructor && dst[key].constructor === Object) {
\r
3109 extendDeep(dst[key], value);
\r
3118 if (angular.isDefined($scope.chartConfig)) {
\r
3119 stackChartConfig = $extendObj.extendDeep(stackChartConfig, $scope.chartConfig);
\r
3121 $scope.chartID = $attrs.id;
\r
3122 $scope.legendColors = stackChartConfig.chartcolor;
\r
3123 $scope.legendTooltipColors = angular.copy(stackChartConfig.chartcolor).reverse();
\r
3124 $scope.addLegendColor = function (id) {
\r
3125 var bgColor = null;
\r
3128 bgColor = {"background-color": $scope.legendColors[id], "border-radius": "100%"};
\r
3131 bgColor = {"background-color": $scope.legendColors[id]};
\r
3134 bgColor = {"width": "0", "height": "0", "border-left": "8px solid transparent", "border-right": "8px solid transparent", "border-bottom-style": "solid", "border-bottom-width": "8px", "border-bottom-color": $scope.legendColors[id]};
\r
3139 $scope.addToolTipLegendColor = function (id) {
\r
3140 var bgColor = null;
\r
3143 bgColor = {"background-color": $scope.legendTooltipColors[id], "border-radius": "100%"};
\r
3146 bgColor = {"background-color": $scope.legendTooltipColors[id]};
\r
3149 bgColor = {"width": "0", "height": "0", "border-left": "6px solid transparent", "border-right": "6px solid transparent", "border-bottom-style": "solid", "border-bottom-width": "12px", "border-bottom-color": $scope.legendTooltipColors[id]};
\r
3155 link: function (scope, element, attrs, ctrl) {
\r
3156 scope.tooltipFlag = false;
\r
3157 var dataObj, idx = 0, xAxisTicks, margin = stackChartConfig.margin,
\r
3158 width = parseInt(attrs.chartWidth, 10),
\r
3159 height = stackChartConfig.chartHeight,
\r
3160 parseDate = d3.time.format("%d-%b-%Y").parse,
\r
3161 tooltipFormat = d3.time.format("%B-%Y"),
\r
3162 labelFormat = d3.time.format("%Y");
\r
3163 attrs.$observe('legendRequired', function (val) {
\r
3164 if (val === 'true') {
\r
3165 scope.showLegend = true;
\r
3168 scope.showLegend = false;
\r
3171 scope.$watch('refreshChart', function (value) {
\r
3172 if (value === false) {
\r
3175 if (angular.isDefined(scope.chartConfig)) {
\r
3176 stackChartConfig = $extendObj.extendDeep(stackChartConfig, scope.chartConfig);
\r
3178 d3.select("svg#" + attrs.id).remove();
\r
3179 d3.selectAll("svg#" + attrs.id + " > *").remove();
\r
3180 d3.selectAll("div#stackChartContainer" + " > div").remove();
\r
3181 if (scope.chartData[0].values.length === 0) {
\r
3182 scope.refreshChart = false;
\r
3186 var xMonth = [], yValue = [], tempData = [], tooltipData = {}, yearArr = {}, yearLabel = '', isSingleMonth = false, singleMonthName, currencyFormat = 'K';
\r
3189 var xRange = d3.time.scale()
\r
3190 .range([0, width]);
\r
3193 var yRange = d3.scale.linear()
\r
3194 .range([height, 0]);
\r
3196 dataObj = scope.chartData;
\r
3198 // On selecting same month in From and To dropdowns, User should be getting graph
\r
3199 if (dataObj[0].values.length === 1) {
\r
3200 isSingleMonth = true;
\r
3201 dataObj.forEach(function (data) {
\r
3202 var tmp1 = "01-" + data.values[0].month;
\r
3203 var tmp = parseDate(tmp1);
\r
3204 singleMonthName = tmp.toString().split(" ")[1];
\r
3205 tmp.setMonth(tmp.getMonth() + 1);
\r
3206 var nextMonth = tmp.toString().split(" ")[1] + "-" + tmp.getFullYear();
\r
3207 data.values.push({month: nextMonth, value: data.values[0].value});
\r
3211 dataObj.forEach(function (data) {
\r
3212 var obj = data.values;
\r
3213 xAxisTicks = obj.length;
\r
3214 obj.forEach(function (d) {
\r
3215 var tmp = "01-" + d.month;
\r
3216 d.numericMonth = parseDate(tmp);
\r
3217 yValue.push({'value': +d.value});
\r
3218 d.value = +d.value;
\r
3219 xMonth.push({'numericMonth': d.numericMonth});
\r
3220 if (d.value > stackChartConfig.yAxisUnitRange) {
\r
3221 currencyFormat = 'M';
\r
3227 for (var z = 0; z < dataObj.length; z++) {
\r
3228 var tempSeries = dataObj[z].series;
\r
3229 for (var j = 0; j < dataObj[z].values.length; j++) {
\r
3230 var months = dataObj[z].values[j].month;
\r
3231 var tempVal = dataObj[z].values[j].value;
\r
3232 tempData.push({"month": months, "series": tempSeries, "value": tempVal});
\r
3235 for (var k = 0; k < tempData.length; k++) {
\r
3236 var seriesName = tempData[k].series;
\r
3237 var seriesVal = tempData[k].value;
\r
3238 var tempObj = tooltipData[tempData[k].month];
\r
3241 tooltipData[tempData[k].month] = tempObj;
\r
3243 tempObj.push({seriesName: seriesName, seriesVal: seriesVal});
\r
3245 for (var d in tooltipData) {
\r
3246 var tooltipObj = tooltipData[d];
\r
3247 var temp = 0, monthTotalVal = 0;
\r
3248 for (var y = 0; y < tooltipObj.length; y++) {
\r
3249 temp = parseFloat(tooltipObj[y].seriesVal);
\r
3250 monthTotalVal = monthTotalVal + temp;
\r
3251 tooltipObj['total'] = monthTotalVal;
\r
3254 var yDomainData = [],yAxisData = [],yTicksData = [];
\r
3255 for (var month in tooltipData) {
\r
3256 yDomainData.push({"total": tooltipData[month].total});
\r
3259 //Format yAxis Labels
\r
3260 var formatCurrency = function (d) {
\r
3261 if (currencyFormat === 'M') {
\r
3262 return "$" + d / 1000000 + "M";
\r
3264 return "$" + d / 1000 + "K";
\r
3269 xRange.domain(d3.extent(xMonth, function (d) {
\r
3270 return d.numericMonth;
\r
3273 for (var b = 0; b < yDomainData.length; b++) {
\r
3274 var val = Math.round(parseInt(yDomainData[b].total, 10) / stackChartConfig.yAxisMaxTicks);
\r
3275 var Calc = Math.ceil((val / Math.pow(10, ("" + val).length - 1))) * (stackChartConfig.yAxisMaxTicks) * Math.pow(10, ("" + val).length - 1);
\r
3276 yAxisData.push({'yAxisVal': Calc});
\r
3280 yRange.domain([0, d3.max(yAxisData, function (d) {
\r
3281 return (d.yAxisVal);
\r
3284 var yTick = d3.max(yAxisData, function (d) {
\r
3285 return d.yAxisVal;
\r
3288 yTick = yTick / stackChartConfig.yAxisMaxTicks;
\r
3289 for (var c = 0; c <= stackChartConfig.yAxisMaxTicks; c++) {
\r
3290 yTicksData.push(yTick * c);
\r
3293 var xAxis = d3.svg.axis().scale(xRange).orient("bottom").tickFormat(d3.time.format('%b')).ticks(d3.time.months);
\r
3294 var yAxis = d3.svg.axis().scale(yRange).orient("left").tickValues(yTicksData).ticks(stackChartConfig.yAxisMaxTicks).tickFormat(formatCurrency);
\r
3295 var yAxisGrid = d3.svg.axis().scale(yRange).orient("left").tickValues(yTicksData).ticks(stackChartConfig.yAxisMaxTicks).tickSize(-width, 0, 0);
\r
3297 //Calculate values for Stack
\r
3298 var stack = d3.layout.stack()
\r
3299 .values(function (d) {
\r
3303 return d.numericMonth;
\r
3310 var area = d3.svg.area()
\r
3312 return xRange(d.numericMonth);
\r
3314 .y0(function (d) {
\r
3315 return yRange(d.y0);
\r
3317 .y1(function (d) {
\r
3318 return yRange(d.y0 + d.y);
\r
3319 }).interpolate(stackChartConfig.lineCurveType);
\r
3322 var drawChart = d3.select("#stackChartContainer")
\r
3324 .attr("id", attrs.id)
\r
3326 .attr("width", width + margin.left + margin.right)
\r
3327 .attr("height", parseInt(height, 10) + parseInt(margin.top, 10) + parseInt(margin.bottom, 10))
\r
3329 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
\r
3332 drawChart.append("g")
\r
3333 .attr("class", "x axis")
\r
3334 .attr("transform", "translate(0," + height + ")")
\r
3337 //Plot Area for multiple Stacks
\r
3338 drawChart.selectAll(".layer")
\r
3339 .data(stack(dataObj))
\r
3340 .enter().append("path")
\r
3341 .attr("class", "layer")
\r
3342 .attr("d", function (d) {
\r
3343 return area(d.values);
\r
3344 }).style("fill", function (d, i) {
\r
3345 return scope.legendColors[i];
\r
3346 }).style("opacity", stackChartConfig.chartOpacity).style("stroke", "#ddd").append("title")
\r
3347 .text(function (d) {
\r
3351 //Draw dual Y axis on change of Year
\r
3352 var yAxisObj = dataObj[0].values, yAxisIdx = 0;
\r
3353 for (var i = 0; i < yAxisObj.length; i++) {
\r
3355 tmpObj.push({"year": labelFormat(yAxisObj[i].numericMonth), "transform": xRange(yAxisObj[i].numericMonth)});
\r
3356 if (!yearArr[labelFormat(yAxisObj[i].numericMonth)]) {
\r
3357 yearArr[labelFormat(yAxisObj[i].numericMonth)] = tmpObj;
\r
3360 for (var key in yearArr) {
\r
3361 var obj = yearArr[key];
\r
3362 var yAxisNodes = drawChart.append("g")
\r
3363 .attr("class", "y axis").attr("id", yAxisId(yAxisIdx))
\r
3364 .attr("transform", "translate(" + obj[0].transform + ",0)")
\r
3367 yAxisNodes.selectAll("text").attr('class', 'ticktext');
\r
3368 //Append Year Label
\r
3369 yAxisNodes.append("text")
\r
3370 .attr("transform", "rotate(0)")
\r
3371 .attr("y", stackChartConfig.yearLabelPos.y)
\r
3372 .attr("x", stackChartConfig.yearLabelPos.x)
\r
3373 .text(obj[0].year).attr("class", "yearLabel");
\r
3377 //Remove next year Y axis in case of single Month selection
\r
3378 if (isSingleMonth) {
\r
3379 d3.select("#yAxisId1").remove();
\r
3382 function yAxisId(yAxisIdx) {
\r
3383 return ("yAxisId" + yAxisIdx);
\r
3386 //function to select first element
\r
3387 d3.selection.prototype.first = function () {
\r
3388 return d3.select(this[0][0]);
\r
3391 //Remove minimum value label form Y Axis
\r
3392 var tickLabels = d3.select("#yAxisId0").selectAll('.ticktext');
\r
3393 tickLabels.first().remove();
\r
3394 d3.select("#yAxisId1").selectAll('.ticktext').remove();
\r
3396 if (isSingleMonth) {
\r
3397 drawChart.selectAll('.x.axis').selectAll('.tick').selectAll('text')[1][0].textContent = singleMonthName;
\r
3400 //Append Data Points
\r
3401 for (var x = 0; x < dataObj.length; x++) {
\r
3402 drawChart.append('g').attr('id', "pathId" + x).attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)");
\r
3403 if (idx >= stackChartConfig.shapes.length) {
\r
3406 var shape = stackChartConfig.shapes[idx], shapeToAppend;
\r
3407 if (shape == 'rect' || shape == 'triangle') {
\r
3408 shapeToAppend = 'polygon';
\r
3411 shapeToAppend = 'circle';
\r
3415 if (isSingleMonth) {
\r
3416 newDataObj = dataObj[x].values.slice(0, 1);
\r
3418 newDataObj = dataObj[x].values;
\r
3421 var dataPoints = drawChart.select('#pathId' + x).selectAll(shapeToAppend)
\r
3424 .append(shapeToAppend)
\r
3425 .attr('class', shape);
\r
3426 drawShapes(shape, dataPoints);
\r
3430 //Fill color in dataPoints
\r
3431 for (var a = 0; a <= dataObj.length; a++) {
\r
3432 var Dots = drawChart.selectAll('.' + stackChartConfig.shapes[a]);
\r
3433 Dots.attr('fill', scope.legendColors[a]);
\r
3436 //function to draw multiple shapes for Data Points
\r
3437 function drawShapes(shape, dataPoints) {
\r
3440 var circle = dataPoints.attr("cx", function (d) {
\r
3441 return xRange(d.numericMonth);
\r
3442 }).attr("cy", function (d) {
\r
3443 return yRange(d.y + d.y0);
\r
3444 }).attr("r", stackChartConfig.shapeSize[0]).on("mouseover", function (d) {
\r
3445 show_tooltip_grid_line(d3.select(this).attr("cx"), "circle", "cx");
\r
3446 var offsetX = Math.ceil(d3.select(this).attr("cx"));
\r
3447 var offsetY = Math.round(d3.select(this).attr("cy"));
\r
3448 d3.selectAll('svg#' + attrs.id + " " + "path").style("fill-opacity", stackChartConfig.chartOpacity);
\r
3449 d3.selectAll('svg#' + attrs.id + " " + "polygon").style("fill-opacity", stackChartConfig.chartOpacity);
\r
3450 d3.selectAll('svg#' + attrs.id + " " + "circle").style("fill-opacity", stackChartConfig.chartOpacity);
\r
3451 mouseOver(d, offsetX, offsetY);
\r
3452 }).on("mouseout", function () {
\r
3453 hide_tooltip_grid_line(d3.select(this).attr("cx"), "circle", "cx");
\r
3454 d3.selectAll('svg#' + attrs.id + " " + "path").style("fill-opacity", 1);
\r
3455 d3.selectAll('svg#' + attrs.id + " " + "polygon").style("fill-opacity", 1);
\r
3456 d3.selectAll('svg#' + attrs.id + " " + "circle").style("fill-opacity", 1);
\r
3457 scope.tooltipFlag = false;
\r
3460 circle.append('desc').append('title').text(function (d) {
\r
3461 var nvdaObj = tooltipData[d.month];
\r
3462 return (addTitle(nvdaObj, d));
\r
3466 var rect = dataPoints.attr("points", function (d) {
\r
3467 var x = parseInt(xRange(d.numericMonth), 10);
\r
3468 x = x + (stackChartConfig.shapeSize[1] / 2);
\r
3469 var y = parseInt(yRange(d.y + d.y0), 10);
\r
3470 y = y - (stackChartConfig.shapeSize[1] / 2);
\r
3471 var x1 = parseInt((x - stackChartConfig.shapeSize[1]), 10);
\r
3474 var y2 = parseInt((y1 + stackChartConfig.shapeSize[1]), 10);
\r
3477 var tmp = x2 + "," + y2 + " " + x3 + "," + y3 + " " + x + "," + y + " " + x1 + "," + y1;
\r
3479 }).attr('x', function (d) {
\r
3480 return xRange(d.numericMonth);
\r
3481 }).attr('y', function (d) {
\r
3482 return yRange(d.y + d.y0);
\r
3483 }).on("mouseover", function (d) {
\r
3484 show_tooltip_grid_line(d3.select(this).attr("x"), "rect", "x");
\r
3485 var offsetX = Math.ceil(d3.select(this).attr("x"));
\r
3486 var offsetY = Math.round(d3.select(this).attr("y"));
\r
3487 d3.selectAll('svg#' + attrs.id + " " + "path").style("fill-opacity", stackChartConfig.chartOpacity);
\r
3488 d3.selectAll('svg#' + attrs.id + " " + "polygon").style("fill-opacity", stackChartConfig.chartOpacity);
\r
3489 d3.selectAll('svg#' + attrs.id + " " + "circle").style("fill-opacity", stackChartConfig.chartOpacity);
\r
3490 mouseOver(d, offsetX, offsetY);
\r
3491 }).on("mouseout", function () {
\r
3492 hide_tooltip_grid_line(d3.select(this).attr("x"), "rect", "x");
\r
3493 d3.selectAll('svg#' + attrs.id + " " + "path").style("fill-opacity", 1);
\r
3494 d3.selectAll('svg#' + attrs.id + " " + "polygon").style("fill-opacity", 1);
\r
3495 d3.selectAll('svg#' + attrs.id + " " + "circle").style("fill-opacity", 1);
\r
3496 scope.tooltipFlag = false;
\r
3499 rect.append('desc').append('title').text(function (d) {
\r
3500 var nvdaObj = tooltipData[d.month];
\r
3501 return (addTitle(nvdaObj, d));
\r
3505 var triangle = dataPoints.attr("points", function (d) {
\r
3506 var x = parseInt(xRange(d.numericMonth), 10);
\r
3507 var y = parseInt(yRange(d.y + d.y0), 10);
\r
3508 var x1 = parseInt((x - stackChartConfig.shapeSize[2]), 10);
\r
3509 var y1 = parseInt((y - stackChartConfig.shapeSize[2]), 10);
\r
3510 var x2 = parseInt((x + stackChartConfig.shapeSize[2]), 10);
\r
3512 var tmp = x1 + "," + y1 + " " + x + "," + y + " " + x2 + "," + y2;
\r
3514 }).attr("transform", function (d) {
\r
3515 var x = parseInt(xRange(d.numericMonth), 10);
\r
3516 var y = parseInt(yRange(d.y + d.y0), 10);
\r
3518 var tmp = "rotate(180," + x + "," + y + ")";
\r
3520 }).attr('x', function (d) {
\r
3521 return xRange(d.numericMonth);
\r
3522 }).attr('y', function (d) {
\r
3523 return yRange(d.y + d.y0);
\r
3524 }).on("mouseover", function (d) {
\r
3525 show_tooltip_grid_line(d3.select(this).attr("x"), "triangle", "x");
\r
3526 var offsetX = Math.ceil(d3.select(this).attr("x"));
\r
3527 var offsetY = Math.round(d3.select(this).attr("y"));
\r
3528 d3.selectAll('svg#' + attrs.id + " " + "path").style("fill-opacity", stackChartConfig.chartOpacity);
\r
3529 d3.selectAll('svg#' + attrs.id + " " + "polygon").style("fill-opacity", stackChartConfig.chartOpacity);
\r
3530 d3.selectAll('svg#' + attrs.id + " " + "circle").style("fill-opacity", stackChartConfig.chartOpacity);
\r
3531 mouseOver(d, offsetX, offsetY);
\r
3532 }).on("mouseout", function () {
\r
3533 hide_tooltip_grid_line(d3.select(this).attr("x"), "triangle", "x");
\r
3534 d3.selectAll('svg#' + attrs.id + " " + "path").style("fill-opacity", 1);
\r
3535 d3.selectAll('svg#' + attrs.id + " " + "polygon").style("fill-opacity", 1);
\r
3536 d3.selectAll('svg#' + attrs.id + " " + "circle").style("fill-opacity", 1);
\r
3537 scope.tooltipFlag = false;
\r
3540 triangle.append('desc').append('title').text(function (d) {
\r
3541 var nvdaObj = tooltipData[d.month];
\r
3542 return (addTitle(nvdaObj, d));
\r
3549 drawChart.append("g")
\r
3550 .attr("class", "grid")
\r
3551 .attr("id", "yStackGrid")
\r
3552 .attr("transform", "translate(0,0)")
\r
3554 .selectAll("text").remove();
\r
3556 // Draw the x Grid lines
\r
3557 drawChart.append("g")
\r
3558 .attr("class", "grid")
\r
3559 .attr("id", "xGrid")
\r
3560 .attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)")
\r
3561 .call(make_x_axis()
\r
3562 .tickSize(-height, 0)
\r
3565 // function for the x grid lines
\r
3566 function make_x_axis() {
\r
3567 return d3.svg.axis()
\r
3570 .tickFormat(d3.time.format('%b')).ticks(d3.time.months);
\r
3573 drawChart.select("#xGrid").selectAll("line").style("stroke", "none");
\r
3574 drawChart.select("#xGrid").selectAll("line")
\r
3575 .attr("id", function (d, i) {
\r
3576 return ("xAxisLine" + i);
\r
3578 //Add title for NVDA screen reader
\r
3579 function addTitle(nvdaObj, d) {
\r
3581 for (var y = 0; y < nvdaObj.length; y++) {
\r
3582 temp = temp + nvdaObj[y].seriesName + nvdaObj[y].seriesVal;
\r
3584 return (tooltipFormat(d.numericMonth) + "--" + temp + "Total Charges" + nvdaObj.total);
\r
3587 //Show Grid Lines on Mouse Hover
\r
3588 function show_tooltip_grid_line(offsetX, shape, attr) {
\r
3591 if (isSingleMonth) {
\r
3594 dataLength = scope.chartData[0].values.length;
\r
3597 for (var i = 0; i < dataLength; i++) {
\r
3598 var circle = drawChart.selectAll("." + shape);
\r
3599 if (circle[0][i].getAttribute(attr) === offsetX) {
\r
3600 drawChart.select("#xAxisLine" + i).style("stroke", stackChartConfig.gridLineColor);
\r
3608 function hide_tooltip_grid_line(offsetX, shape, attr) {
\r
3611 if (isSingleMonth) {
\r
3614 dataLength = scope.chartData[0].values.length;
\r
3617 for (var i = 0; i < dataLength; i++) {
\r
3618 var circle = drawChart.selectAll("." + shape);
\r
3619 if (circle[0][i].getAttribute(attr) === offsetX) {
\r
3620 drawChart.select("#xAxisLine" + i).style("stroke", "transparent");
\r
3628 function mouseOver(d, offsetX, offsetY) {
\r
3629 for (var key in tooltipData) {
\r
3630 if (key == d.month) {
\r
3631 var data = angular.copy(tooltipData);
\r
3632 scope.stackDataPoint = data[key].reverse();
\r
3636 var tmp = 0, monthTotalVal = 0;
\r
3637 for (var b = 0; b < scope.stackDataPoint.length; b++) {
\r
3638 tmp = parseFloat(scope.stackDataPoint[b].seriesVal);
\r
3639 monthTotalVal = monthTotalVal + tmp;
\r
3641 scope.total = monthTotalVal;
\r
3642 scope.stackDataPoint.total = monthTotalVal;
\r
3644 scope.monthPoint = {"xData": tooltipFormat(d.numericMonth).replace('-', ' ')};
\r
3646 $timeout(function(){
\r
3647 offsetY = offsetY - stackChartConfig.tooltipTopMargin;
\r
3648 var tooltipEl = element.children().eq(2);
\r
3649 var tooltipWidth = tooltipEl[0].offsetWidth;
\r
3650 if (isSingleMonth) {
\r
3651 offsetX = offsetX - (tooltipWidth/2) + stackChartConfig.tooltipLeftMargin + (width / 2);
\r
3653 offsetX = offsetX - (tooltipWidth/2) + stackChartConfig.tooltipLeftMargin;
\r
3655 scope.tooltipStyle = {"left": offsetX + "px", "top": offsetY + "px"};
\r
3656 scope.tooltipFlag = true;
\r
3663 //fix for removing upper text if it is below to year label
\r
3665 // var lastTickPostion = drawChart.selectAll('#yAxisId0').selectAll('.tick')[0].length - 1;
\r
3666 // var lastGridPos = drawChart.select("#yStackGrid").selectAll('.tick')[0].length - 1;
\r
3667 // var val = drawChart.selectAll('#yAxisId0').selectAll('.tick')[0][lastTickPostion].attributes.transform.value.split(',')[1].split(')')[0];
\r
3668 // if (val < 20) {
\r
3669 // drawChart.selectAll('#yAxisId0').selectAll('text')[0][lastTickPostion - 1].remove();
\r
3670 // drawChart.select("#yStackGrid").selectAll('.tick')[0][lastGridPos].remove();
\r
3674 scope.refreshChart = false;
\r
3679 .filter('filterInput', function () {
\r
3680 return function (input) {
\r
3681 return input.replace(/ +/g, "").toLowerCase();
\r
3684 angular.module("template/areachartD3/attAreaChartD3.html", []).run(["$templateCache", function($templateCache) {
\r
3685 $templateCache.put("template/areachartD3/attAreaChartD3.html",
\r
3686 "<div class=\"areaChartD3\">\n" +
\r
3687 " <ul class=\"legendsList\" ng-show=\"showLegend\">\n" +
\r
3688 " <li ng-repeat=\"label in legendLabel\" id=\"{{label.series|filterInput}}\">\n" +
\r
3689 " <i class=\"legend-icon\" ng-style=\"addLegendColor($index)\"></i>{{label.series}}\n" +
\r
3692 " <div id=\"areaChartContainer\">\n" +
\r
3694 " <div ng-class=\"{'tooltip--on': tooltipFlag,'tooltip': !tooltipFlag}\" ng-style=\"tooltipStyle\">\n" +
\r
3695 " <span class=\"title\">{{dataPoint.xData}}</span>\n" +
\r
3697 " <span class=\"alignLeft\"><i class=\"legend-icon\" ng-style=\"addLegendColor(1)\"></i>Available</span>\n" +
\r
3698 " <span class=\"alignRight\">{{dataPoint.dataAvailable}} <span>{{dataPoint.usageDataType}}</span></span>\n" +
\r
3700 " <div style=\"clear:both\"></div> \n" +
\r
3702 " <span class=\"alignLeft\"><i class=\"legend-icon\" ng-style=\"addLegendColor(0)\"></i>Used</span>\n" +
\r
3703 " <span class=\"alignRight\">{{dataPoint.dataUsed}} <span>{{dataPoint.availableDataType}}</span></span>\n" +
\r
3705 " <div style=\"clear:both\"></div>\n" +
\r
3706 " <p ng-show=\"overageFlag\">\n" +
\r
3707 " <span class=\"alignLeft\"><i class=\"legend-icon\" ng-style=\"addLegendColor(2)\"></i>Overage</span> \n" +
\r
3708 " <span class=\"alignRight\">{{dataPoint.overage}}</span>\n" +
\r
3710 " <div style=\"clear:both\"></div>\n" +
\r
3711 " <p ng-show=\"underageFlag\">\n" +
\r
3712 " <span class=\"alignLeft\">Buffer</span> \n" +
\r
3713 " <span class=\"alignRight\">{{dataPoint.underage}}</span>\n" +
\r
3715 " <div style=\"clear:both\"></div>\n" +
\r
3716 " <span class=\"tooltipArrow\"></span>\n" +
\r
3721 angular.module("template/barchartD3/attBarChartD3.html", []).run(["$templateCache", function($templateCache) {
\r
3722 $templateCache.put("template/barchartD3/attBarChartD3.html",
\r
3723 "<div class=\"barChartD3\">\n" +
\r
3724 " <div id=\"barChartContainer\">\n" +
\r
3725 " <span class=\"tooltip\" ng-class=\"{'tooltip--on': tooltipFlag}\" ng-show=\"tooltipFlag\" ng-style=\"tooltipStyle\">\n" +
\r
3726 " <span class=\"title\">{{dataPoint.name}}</span>\n" +
\r
3727 " <span><span class=\"alignText\">Wireless number</span><span style=\"float:right\">{{dataPoint.phoneNumber}}</span></span>\n" +
\r
3728 " <span><span class=\"alignText\">Charges</span><span style=\"float:right\">{{dataPoint.charges}}</span></span>\n" +
\r
3729 " <span class=\"tooltipArrow\"></span>\n" +
\r
3735 angular.module("template/coschartD3/attCosd3Chart.html", []).run(["$templateCache", function($templateCache) {
\r
3736 $templateCache.put("template/coschartD3/attCosd3Chart.html",
\r
3737 "<div class=\"attCosd3Chart\">\n" +
\r
3738 " <div class=\"chartLegend\" ng-if=\"legendPosition == 'top' && legendRequired\">\n" +
\r
3740 " <li ng-style=\"addLegendColor()\">\n" +
\r
3742 " <span class=\"LegendLabel\">{{LegendLabel}}</span> <span class=\"LegendCategory\">{{LegendCategory}}</span> <span class=\"legendItemValue\">({{cosval}})</span>\n" +
\r
3747 " <div id={{chartID}} class=\"cosd3Container\"></div>\n" +
\r
3748 " <div class=\"chartLegend\" ng-if=\"legendPosition == 'bottom' && legendRequired\">\n" +
\r
3750 " <li ng-style=\"addLegendColor()\">\n" +
\r
3752 " <span class=\"LegendLabel\">{{LegendLabel}}</span> <span class=\"LegendCategory\">{{LegendCategory}}</span> <span class=\"legendItemValue\">({{cosval}})</span>\n" +
\r
3760 angular.module("template/coschartwithbarD3/attCosBarD3Chart.html", []).run(["$templateCache", function($templateCache) {
\r
3761 $templateCache.put("template/coschartwithbarD3/attCosBarD3Chart.html",
\r
3762 "<div class=\"attCosWithBard3Chart\">\n" +
\r
3763 " <div id={{chartID}} class=\"cosd3Container\"></div>\n" +
\r
3764 " <div id={{snickrbarId}} class=\"snickrBar\" ng-if=\"barRequired\"></div>\n" +
\r
3768 angular.module("template/cosmultichartD3/attCosmultid3Chart.html", []).run(["$templateCache", function($templateCache) {
\r
3769 $templateCache.put("template/cosmultichartD3/attCosmultid3Chart.html",
\r
3770 "<div class=\"attCosmultid3Chart\">\n" +
\r
3771 " <div class=\"chartLegend\" ng-if=\"legendPosition == 'top' && legendRequired\">\n" +
\r
3773 " <li ng-repeat=\"item in chartData\" ng-style=\"addLegendColor($index,item)\" chart-legend-id=\"{{item.name}}\">\n" +
\r
3775 " <span class=\"LegendLabel\">{{item.name}}</span> <span class=\"LegendCategory\">{{item.category}}</span> <span class=\"legendItemValue\">({{item.value}}%)</span>\n" +
\r
3780 " <div id={{chartID}} class=\"cosmultid3Container\"></div>\n" +
\r
3781 " <div class=\"chartLegend\" ng-if=\"legendPosition == 'bottom' && legendRequired\">\n" +
\r
3783 " <li ng-repeat=\"item in chartData\" ng-style=\"addLegendColor($index,item)\" chart-legend-id=\"{{item.name}}\">\n" +
\r
3785 " <span class=\"LegendLabel\">{{item.name}}</span> <span class=\"LegendCategory\">{{item.category}}</span> <span class=\"legendItemValue\">({{item.value}}%)</span>\n" +
\r
3793 angular.module("template/donutD3/attDonutd3Chart.html", []).run(["$templateCache", function($templateCache) {
\r
3794 $templateCache.put("template/donutD3/attDonutd3Chart.html",
\r
3795 "<div class=\"attDonutd3Chart\">\n" +
\r
3796 " <div id={{chartID}} class=\"chartContainer\" ng-class=\"addStyle('chartContainer')\"></div>\n" +
\r
3797 " <div ng-show=\"legendRequired\" chartLegend class=\"chartLegend\" ng-class=\"addStyle('chartLegend')\">\n" +
\r
3799 " <li ng-repeat=\"item in chartData\" ng-style=\"addLegendColor($index,item)\" chart-legend-id=\"{{item.name|filterData}}\" ng-mouseover=\"legendMouseOver(item,$index,$event)\" ng-mouseleave=\"legendMouseLeave(item,$index,$event)\" ng-class=\"LegendClass\" ng-click=\"legendclickcallback({name:item.name , value:item.value})\">\n" +
\r
3800 " <div ng-class=\"{'emptyticket-category': item.value ===0}\" >\n" +
\r
3801 " <span class=\"legendItemName\">{{item.name}}</span> <span class=\"legendItemValue\">({{item.value}})</span>\n" +
\r
3806 " <div style=\"clear: both;\"></div>\n" +
\r
3810 angular.module("template/donutFusion/attDonutfusionChart.html", []).run(["$templateCache", function($templateCache) {
\r
3811 $templateCache.put("template/donutFusion/attDonutfusionChart.html",
\r
3812 "<div class=\"attDonutfusionChart\">\n" +
\r
3813 " <div id=\"donutFusionChart\" chartContainer class=\"chartContainer\" ng-style=\"addStyle('chartContainer')\"></div>\n" +
\r
3814 " <div ng-show=\"legendRequired\" chartLegend class=\"chartLegend\" ng-style=\"addStyle('chartLegend')\">\n" +
\r
3816 " <li ng-repeat=\"item in chartData\" ng-show=\"item.value > 0\" ng-style=\"addLegendColor($index)\">\n" +
\r
3817 " <div chart-legend-id=\"{{item.name|filterData}}_fusion\">\n" +
\r
3818 " <span class=\"legendItemName\">{{item.name}}</span> <span class=\"legendItemValue\">({{item.value}})</span>\n" +
\r
3823 " <div style=\"clear: both;\">\n" +
\r
3828 angular.module("template/horseshoeD3/attHorseshoeD3Chart.html", []).run(["$templateCache", function($templateCache) {
\r
3829 $templateCache.put("template/horseshoeD3/attHorseshoeD3Chart.html",
\r
3830 "<div class=\"attHorseshoed3Chart\">\n" +
\r
3831 " <div class=\"chartLegend\" ng-if=\"legendPosition == 'top' && legendRequired\">\n" +
\r
3833 " <li ng-style=\"addLegendColor()\">\n" +
\r
3835 " <span class=\"LegendLabel\">{{LegendLabel}}</span> <span class=\"LegendCategory\">{{LegendCategory}}</span> <span class=\"legendItemValue\">({{guageVal}})</span>\n" +
\r
3840 " <div class=\"horseshoed3Container\"></div>\n" +
\r
3841 " <div class=\"chartLegend\" ng-if=\"legendPosition == 'bottom' && legendRequired\">\n" +
\r
3843 " <li ng-style=\"addLegendColor()\">\n" +
\r
3845 " <span class=\"LegendLabel\">{{LegendLabel}}</span> <span class=\"LegendCategory\">{{LegendCategory}}</span> <span class=\"legendItemValue\">({{guageVal}})</span>\n" +
\r
3853 angular.module("template/stackedBarchart/stackedBarchart.html", []).run(["$templateCache", function($templateCache) {
\r
3854 $templateCache.put("template/stackedBarchart/stackedBarchart.html",
\r
3855 "<div class=\"stackedBarChart\">\n" +
\r
3856 " <ul class=\"legendsList\" ng-show=\"showLegend\">\n" +
\r
3857 " <li ng-repeat=\"label in chartData\" id=\"{{label.series|filterInput}}\">\n" +
\r
3858 " <i class=\"legend-icon\" ng-style=\"addLegendColor($index)\"></i>{{label.series}}\n" +
\r
3861 " <div id=\"stackBarChartContainer\"></div>\n" +
\r
3862 " <div ng-class=\"{'tooltip--on': tooltipFlag,'tooltip': !tooltipFlag}\" ng-style=\"tooltipStyle\">\n" +
\r
3863 " <span class=\"title\">{{monthPoint.xData}}</span>\n" +
\r
3864 " <div ng-repeat=\"label in stackDataPoint\">\n" +
\r
3866 " <span class=\"alignLeft\"><i class=\"legend-icon-stackedchart\" ng-style=\"addLegendColor($index)\"></i>{{label.seriesName}}</span>\n" +
\r
3867 " <span class=\"alignRight\">{{label.seriesVal| number:0}}</span>\n" +
\r
3870 " <div style=\"clear:both\"></div>\n" +
\r
3873 " <span class=\"alignLeft\"><i class=\"legend-icon-stackedchart\"></i>Retainability percentage</span>\n" +
\r
3874 " <span class=\"alignRight\">{{stackDataPoint.seriesPer}}</span>\n" +
\r
3877 " <div style=\"clear:both\"></div>\n" +
\r
3878 " <span class=\"tooltipArrow\"></span>\n" +
\r
3883 angular.module("template/stackedareachart/stackedAreaChart.html", []).run(["$templateCache", function($templateCache) {
\r
3884 $templateCache.put("template/stackedareachart/stackedAreaChart.html",
\r
3885 "<div class=\"stackedAreaChart\">\n" +
\r
3886 " <ul class=\"legendsList\" ng-show=\"showLegend\">\n" +
\r
3887 " <li ng-repeat=\"label in chartData\" id=\"{{label.series|filterInput}}\">\n" +
\r
3888 " <i class=\"legend-icon\" ng-style=\"addLegendColor($index)\"></i>{{label.series}}\n" +
\r
3891 " <div id=\"stackChartContainer\"></div>\n" +
\r
3892 " <div ng-class=\"{'tooltip--on': tooltipFlag,'tooltip': !tooltipFlag}\" ng-style=\"tooltipStyle\">\n" +
\r
3893 " <span class=\"title\">{{monthPoint.xData}}</span>\n" +
\r
3894 " <div ng-repeat=\"label in stackDataPoint\">\n" +
\r
3896 " <span class=\"alignLeft\"><i class=\"legend-icon-stackedchart\" ng-style=\"addToolTipLegendColor($index)\"></i>{{label.seriesName}}</span>\n" +
\r
3897 " <span class=\"alignRight\">{{label.seriesVal| currency}}</span>\n" +
\r
3899 " <div style=\"clear:both\"></div> \n" +
\r
3902 " <span class=\"alignLeft\">Total charges</span>\n" +
\r
3903 " <span class=\"alignRight\">{{stackDataPoint.total| currency}}</span>\n" +
\r
3905 " <div style=\"clear:both\"></div>\n" +
\r
3906 " <span class=\"tooltipArrow\"></span>\n" +
\r
Code Review / vid.git / blob