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