ecomp-sdk-app/src/main/webapp/app/fusion/external/ebz/angular_js/ui-charts-tpls.js

   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) {
   8                         if (obj !== dst) {
   9                             angular.forEach(obj, function (value, key) {
  10                                 if (dst[key] && dst[key].constructor && dst[key].constructor === Object) {
  11                                     _extendDeep(dst[key], value);
  12                                 } else {
  13                                     dst[key] = value;
  14                                 }
  15                             });
  16                         }
  17                     });
  18                     return dst;
  19                 };
  20                 return {
  21                     extendDeep: _extendDeep
  22
  23                 };
  24             }]);
  25
  26 angular.module('att.charts.areachartD3', ['att.charts.utilities'])
  27         .constant("areaChartConfig",
  28                 {
  29                     "chartcolor": {
  30                         "areaChartColor": ["#bff1ec", "#bbf0eb", "#00c7b2"],
  31                         "lineChartColor": ["#444444", "#444444"],
  32                         "overageColor": ["#b8509e"]
  33                     },
  34                     "gridLineColor": "#808080",
  35                     "lineCurveType": 'cardinal',
  36                     "yAxisMaxTicks": 4,
  37                     "chartHeight": "200",
  38                     "dataType": "GB",
  39                     "lineStroke": 3,
  40                     "opacityOnHover": "0.5",
  41                     "circleRadius": 3.5,
  42                     "yearLabelPos": [5, -5],
  43                     "tooltipTopMargin": 105,
  44                     "tooltipLeftMargin": 28,
  45                     "amountKDivision": 1000,
  46                     "amountKText": "K",
  47                     "amountMDivision": 1000000,
  48                     "amountMText": "M"
  49                 })
  50         .directive('attAreaChart', ['areaChartConfig', '$extendObj', '$timeout', function (areaChartConfig, $extendObj, $timeout) {
  51                 return {
  52                     restrict: 'A',
  53                     scope: {
  54                         chartData: '=',
  55                         chartColor: "=",
  56                         legendLabel: "=",
  57                         refreshChart: "=",
  58                         chartConfig: "="
  59                     },
  60                     templateUrl: "template/areachartD3/attAreaChartD3.html",
  61                     replace: true,
  62                     controller: ['$scope', '$attrs', function ($scope, $attrs) {
  63                             if (angular.isDefined($scope.chartConfig)) {
  64                                 areaChartConfig = $extendObj.extendDeep(areaChartConfig, $scope.chartConfig);
  65                             }
  66                             $scope.dataType = areaChartConfig.dataType;
  67                             $scope.chartID = $attrs.id;
  68                         }],
  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) {
  89                             var bgColor = null;
  90                             switch (id) {
  91                                 case 0:
  92                                     bgColor = {"background-color": scope.areaLegendColor, "border-radius": "100%"};
  93                                     break;
  94                                 case 1:
  95                                     bgColor = {"background-color": scope.lineLegendColor};
  96                                     break;
  97                                 case 2:
  98                                     bgColor = {"background-color": scope.overageLegend, "border-radius": "100%"};
  99                                     break;
 100                             }
 101                             return bgColor;
 102                         };
 103
 104                         attrs.$observe('legendRequired', function (val) {
 105                             if (val === 'true') {
 106                                 scope.showLegend = true;
 107                             }
 108                             else {
 109                                 scope.showLegend = false;
 110                             }
 111                         });
 112
 113                         scope.$watch('refreshChart', function (value) {
 114                             if (value === false) {
 115                                 return;
 116                             }
 117                             if (angular.isDefined(scope.chartConfig)) {
 118                                 areaChartConfig = $extendObj.extendDeep(areaChartConfig, scope.chartConfig);
 119                             }
 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;
 126
 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});
 136                             }
 137
 138                             dataObj.forEach(function (d) {
 139                                 var tmp = "01-" + d.month;
 140                                 d.numericMonth = parseDate(tmp);
 141                                 d.usage = +d.usage;
 142                                 d.available = +d.available;
 143                                 monthArr[labelFormat(d.numericMonth)] = labelFormat(d.numericMonth);
 144                             });
 145
 146                             for (var key in monthArr) {
 147                                 var label = monthArr[key];
 148                                 if (!yearLabel) {
 149                                     yearLabel = label;
 150                                 }
 151                                 else {
 152                                     if (!isSingleMonth) {
 153                                         yearLabel = yearLabel + "-" + label;
 154                                     }
 155                                 }
 156                             }
 157
 158                             //X-Axis Range
 159                             var xRange = d3.time.scale()
 160                                     .range([0, width]);
 161
 162                             //Y-Axis Range
 163                             var yRange = d3.scale.linear()
 164                                     .range([height, 0]);
 165
 166                             //X-Axis Domain
 167                             xRange.domain(d3.extent(dataObj, function (d) {
 168                                 return d.numericMonth;
 169                             }));
 170
 171                             //Y-Axis Domain
 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);
 176                                 var val;
 177                                 if (usageVal > availableVal) {
 178                                     val = usageVal;
 179                                 }
 180                                 else {
 181                                     val = availableVal;
 182                                 }
 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});
 185                             }
 186
 187                             //Y-Axis Domain
 188                             yRange.domain([0, d3.max(yDomainData, function (d) {
 189                                     return (d.yAxisVal);
 190                                 })]);
 191
 192                             var yTick = d3.max(yDomainData, function (d) {
 193                                 return d.yAxisVal;
 194                             });
 195
 196                             yTick = yTick / areaChartConfig.yAxisMaxTicks;
 197                             for (var x = 0; x <= areaChartConfig.yAxisMaxTicks; x++) {
 198                                 yAxisData.push(yTick * x);
 199                             }
 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;
 205                                 } else {
 206                                     return d;
 207                                 }
 208                             };
 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);
 211
 212                             //Draw Line
 213                             var line = d3.svg.line()
 214                                     .x(function (d) {
 215                                         return xRange(d.numericMonth);
 216                                     })
 217                                     .y(function (d) {
 218                                         return yRange(d.available);
 219                                     }).interpolate(areaChartConfig.lineCurveType);
 220
 221                             //Draw Area
 222                             var area = d3.svg.area()
 223                                     .x(function (d) {
 224                                         return xRange(d.numericMonth);
 225                                     })
 226                                     .y0(height)
 227                                     .y1(function (d) {
 228                                         return yRange(d.usage);
 229                                     }).interpolate(areaChartConfig.lineCurveType);
 230
 231                             //Plot Chart
 232                             var drawChart = d3.select("#areaChartContainer")
 233                                     .append("svg")
 234                                     .attr("id", attrs.id)
 235                                     .data(dataObj)
 236                                     .attr("width", width + margin.left + margin.right)
 237                                     .attr("height", parseInt(height, 10) + parseInt(margin.top, 10) + parseInt(margin.bottom, 10))
 238                                     .append("g")
 239                                     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 240
 241                             //Apply gradients
 242                             if (!oldIE) {
 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%');
 248
 249                                 //Fill gradient
 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");
 258                             }
 259
 260                             //Draw X Axis
 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");
 266
 267
 268                             if (isSingleMonth) {
 269                                 drawChart.selectAll('.x.axis').selectAll('.tick').selectAll('text')[1][0].textContent = singleMonthName;
 270                             }
 271
 272                             //Plot Area
 273                             var areaPath = drawChart.append("path")
 274                                     .datum(dataObj)
 275                                     .attr("class", "area")
 276                                     .attr("d", area).style("fill", "url(#areaGradient)").append("title").text(function () {
 277                                 return scope.legendLabel[0].series;
 278                             });
 279
 280                             var newDataObj = dataObj;
 281                             if (isSingleMonth) {
 282                                 newDataObj = dataObj.slice(0, 1);
 283                             }
 284
 285                             //Draw Data Points for Area Chart
 286                             var circle = drawChart.selectAll(".dot")
 287                                     .data(newDataObj)
 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;
 294                                         }
 295                                         else {
 296                                             return scope.areaLegendColor;
 297                                         }
 298                                     })
 299                                     .attr("r", areaChartConfig.circleRadius)
 300                                     .attr("cx", function (d) {
 301                                         return xRange(d.numericMonth);
 302                                     })
 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;
 315                                 scope.$apply();
 316                             });
 317                             circle.append('desc').append('title').text(function (d) {
 318                                 return(addTitle(d));
 319                             });
 320
 321                             //Draw Line Chart
 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;
 328                             });
 329
 330                             //Draw data points for Line Chart
 331                             if (!oldIE) {
 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);
 339                                             tmp = tmp - 2.5;
 340                                             return tmp;
 341                                         })
 342                                         .attr("y", function (d) {
 343                                             var tmp = yRange(d.available);
 344                                             tmp = tmp - 2.5;
 345                                             return tmp;
 346                                         })
 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;
 359                                     scope.$apply();
 360                                 });
 361                                 squaredot.append('desc').append('title').text(function (d) {
 362                                     return(addTitle(d));
 363                                 });
 364                             }
 365                             else {
 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);
 375                                         })
 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;
 388                                     scope.$apply();
 389                                 });
 390                                 squareDot.append('desc').append('title').text(function (d) {
 391                                     return(addTitle(d));
 392                                 });
 393                             }
 394
 395                             //Draw Y Axis
 396                             var yAxisNodes = drawChart.append("g")
 397                                     .attr("class", "y axis").attr("id", "yAxisId")
 398                                     .call(yAxis);
 399
 400                             yAxisNodes.selectAll("text")
 401                                     .attr("id", function (d, i) {
 402                                         return ("yAxisText" + i);
 403                                     });
 404
 405                             //Append Year Label
 406                             yAxisNodes.append("text")
 407                                     .attr("transform", "rotate(0)")
 408                                     .attr("y", areaChartConfig.yearLabelPos[1])
 409                                     .attr("x", areaChartConfig.yearLabelPos[0]).attr("class", "yearLabel")
 410                                     .text(yearLabel);
 411                             //Remove minimum value label form Y Axis
 412                             drawChart.select("#yAxisText0").remove();
 413
 414                             // Draw the x Grid lines
 415                             drawChart.append("g")
 416                                     .attr("class", "grid")
 417                                     .attr("id", "xGrid")
 418                                     .attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)")
 419                                     .call(make_x_axis()
 420                                             .tickSize(-height, 0)
 421                                             .tickFormat(""));
 422
 423                             // function for the x grid lines
 424                             function make_x_axis() {
 425                                 return d3.svg.axis()
 426                                         .scale(xRange)
 427                                         .orient("top")
 428                                         .tickFormat(d3.time.format('%b')).ticks(d3.time.months);
 429                             }
 430
 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);
 436                                     });
 437
 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);
 441                             }
 442
 443                             //Show Gridline on Mouse Hover
 444                             function show_tooltip_grid_line(offsetX, shape, attr) {
 445                                 try {
 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);
 450                                         }
 451                                     }
 452                                 } catch (e) {
 453                                 }
 454                             }
 455
 456                             //Hide Gridline on Mouse Hover
 457                             function hide_tooltip_grid_line(offsetX, shape, attr) {
 458                                 try {
 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");
 463                                         }
 464                                     }
 465                                 } catch (e) {
 466                                 }
 467                             }
 468
 469                             //Mouse Hover
 470                             function mouseOver(d, offsetX, offsetY) {
 471                                 scope.underageFlag = false;
 472                                 scope.overageFlag = false;
 473                                 if (d.usage > d.available) {
 474                                     scope.overageFlag = true;
 475                                 }
 476                                 if (d.usage < d.available) {
 477                                     scope.underageFlag = true;
 478                                 }
 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};
 480                                 scope.$apply();
 481                                 $timeout(function () {
 482                                     offsetY = offsetY - areaChartConfig.tooltipTopMargin;
 483                                     var tooltipEl = element.children().eq(2);
 484                                     var tooltipWidth = tooltipEl[0].offsetWidth;
 485                                     if (isSingleMonth) {
 486                                         offsetX = offsetX - (tooltipWidth / 2) + areaChartConfig.tooltipLeftMargin + (width / 2);
 487                                     } else {
 488                                         offsetX = offsetX - (tooltipWidth / 2) + areaChartConfig.tooltipLeftMargin;
 489                                     }
 490                                     scope.tooltipStyle = {"left": offsetX + "px", "top": offsetY + "px"};
 491                                     scope.tooltipFlag = true;
 492                                 },0);
 493                             }
 494                             scope.refreshChart = false;
 495                         });
 496                     }
 497                 };
 498             }])
 499         .filter('filterInput', function () {
 500             return function (input) {
 501                 return input.replace(/ +/g, "").toLowerCase();
 502             };
 503         });
 504 angular.module('att.charts.barchartD3', ['att.charts.utilities'])
 505
 506         .constant("BarChartD3Config",
 507                 {
 508                     "barChartColor": "#0081C2",
 509                     "gridLineColor": "#808080",
 510                                         "yaxisGridLineColor": "#000000",
 511                     "margin": {
 512                             top  : 40,
 513                             right: 20,
 514                             bottom: 30,
 515                             left: 40
 516                     },
 517                     "attributes": {
 518                         "userName": "name",
 519                         "phoneNumber": "phoneNumber",
 520                         "charges": "charges"
 521                     },
 522                     "yAxisMaxTicks": 4,
 523                     "chartHeight": 160,
 524                     "amountFormat" : "$0,000",
 525                     "amountKDivision" : 1000,
 526                     "amountKText" : "K",
 527                     "amountMDivision" : 1000000,
 528                     "amountMText" : "M",
 529                     "xAxistickSize":0,
 530                     "tooltipTopMargin":69,
 531                     "tooltipLeftMargin":59,
 532                     "xAxisTextTopMargin":15,
 533                     "xAxisTextLeftMargin":7,
 534                     "barChartSize":25,
 535                     "barHoverOpacity":0.2
 536                 })
 537
 538         .directive('attBarChart', ['BarChartD3Config','$extendObj', function(BarChartD3Config,$extendObj) {
 539                 return {
 540                     restrict: 'A',
 541                     scope: {
 542                         chartData: '=',
 543                         chartConfig: '=',
 544                         refreshChart: "="
 545                     },
 546                     templateUrl: "template/barchartD3/attBarChartD3.html",
 547                     replace: true,
 548                     link: function(scope, element, attrs, ctrl) {
 549
 550                         scope.$watch('refreshChart', function() {
 551                         if (angular.isDefined(scope.chartConfig)) {
 552                                 BarChartD3Config = $extendObj.extendDeep(BarChartD3Config, scope.chartConfig);
 553                         }
 554
 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)) {
 567                                 return -1;
 568                             }
 569                             if (parseInt(a[charges], 10) < parseInt(b[charges], 10)) {
 570                                 return 1;
 571                             }
 572                             return 0;
 573                         };
 574
 575
 576                             d3.select("svg#" + attrs.id).remove();
 577                             d3.selectAll("svg#" + attrs.id + " > *").remove();
 578                             d3.selectAll("div#barChartContainer" + " > div").remove();
 579
 580                             barChartData = scope.chartData.sort(compare);
 581                             barChartData = barChartData.slice(0,BarChartD3Config.barChartSize);
 582                             if (barChartData.length === 1) {
 583                                 isSingleDataObj = true;
 584                             }
 585                             var x = d3.scale.ordinal().rangeBands([0, width]);
 586
 587                             var y = d3.scale.linear()
 588                                     .range([height, 0]);
 589
 590                             x.domain(barChartData.map(function(d, i) {
 591                                 return i + 1;
 592                             }));
 593
 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});
 598                             }
 599
 600                             //Y-Axis Domain
 601                             y.domain([0, d3.max(yDomainData, function(d) {
 602                                 return (d.yAxisVal);
 603                             })]);
 604
 605                             var yTick = d3.max(yDomainData, function(d) {return d.yAxisVal;});
 606
 607                             yTick = yTick/BarChartD3Config.yAxisMaxTicks;
 608                             for(var z = 0; z <= BarChartD3Config.yAxisMaxTicks; z++){
 609                                 yAxisData.push(yTick * z);
 610                             }
 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;
 616                                 } else {
 617                                     return "$" + d;
 618                                 }
 619                             };
 620
 621                             var xAxis = d3.svg.axis()
 622                                     .scale(x)
 623                                     .orient("bottom")
 624                                     .tickSize(BarChartD3Config.xAxistickSize);
 625
 626                             var yAxis = d3.svg.axis().scale(y).orient("left").tickValues(yAxisData).ticks(BarChartD3Config.yAxisMaxTicks).tickFormat(formatMoney);
 627
 628                             var svg = d3.select("#barChartContainer")
 629                                     .append("svg")
 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)
 633                                     .append("g")
 634                                     .attr("transform", "translate(" + BarChartD3Config.margin.left + "," + BarChartD3Config.margin.top + ")");
 635
 636                             svg.append("g")
 637                                     .attr("class", "x axis")
 638                                     .attr("transform", "translate(" + -Math.ceil((x(2) - x(1)) / 2 - BarChartD3Config.xAxisTextTopMargin) + "," + (height + BarChartD3Config.xAxisTextLeftMargin) + ")")
 639                                     .call(xAxis);
 640
 641                             var formatPhNumber = function(phoneNum) {
 642                                 if (phoneNum.indexOf("-") === -1) {
 643                                     return phoneNum.substr(0, 3) + '-' + phoneNum.substr(3, 3) + '-' + phoneNum.substr(6);
 644                                 } else {
 645                                     return phoneNum;
 646                                 }
 647                             };
 648
 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)");
 653
 654                             var rectBars = rectBarGroup.selectAll(".bar")
 655                                     .data(barChartData)
 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));
 661                                     })
 662                                     .attr("width", 10)
 663                                     .attr("y", function(d) {
 664                                         return y(d[charges]);
 665                                     })
 666                                     .attr("height", function(d) {
 667                                          return (height - y(d[charges]));
 668                                     })
 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);
 677                                     })
 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");
 684                                         scope.$apply();
 685                                     });
 686                             rectBars.append('desc').append('title').text(function(d){ return (d[userName] + "-- Wireless Number" + formatPhNumber(d[phoneNumber]) + "Charges-" + d[charges]);});
 687
 688                             var yAxisNodes = svg.append("g")
 689                                     .attr("class", "y axis")
 690                                     .call(yAxis);
 691
 692                             yAxisNodes.selectAll("text")
 693                                     .attr("id", function(d, i) {
 694                                         return ("yAxisText" + i);
 695                                     });
 696
 697                             yAxisNodes.selectAll("line")
 698                                     .attr("id", function(d, i) {
 699                                         return ("yAxisLine" + i);
 700                                     });
 701
 702                             //Remove minimum value label form Y Axis
 703                             d3.select("#yAxisText0").remove();
 704                             d3.select("#yAxisLine0").remove();
 705                             yAxisNodes.select("path").remove();
 706
 707                             // Draw the y Grid lines
 708                             svg.append("g")
 709                                 .attr("class", "grid")
 710                                 .attr("transform", "translate(0,0)")
 711                                 .call(make_y_axis()
 712                                         .tickSize(-width + x(2) - x(1), 0, 0)
 713                                         .tickFormat(""));
 714                             svg.select(".grid").selectAll("line").style("stroke", BarChartD3Config.gridLineColor);
 715                             // function for the y grid lines
 716                             function make_y_axis() {
 717                                 return d3.svg.axis()
 718                                         .scale(y)
 719                                         .orient("left")
 720                                         .ticks(BarChartD3Config.yAxisMaxTicks).tickValues(yAxisData);
 721                             }
 722                             // Draw the x Grid lines
 723                             svg.append("g")
 724                                     .attr("class", "grid").attr("id", "xGrid")
 725                                     .call(make_x_axis()
 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);
 730                                     });
 731
 732
 733                             // function for the x grid lines
 734                             function make_x_axis() {
 735                                 return d3.svg.axis()
 736                                         .scale(x)
 737                                         .orient("top")
 738                                         .ticks(BarChartD3Config.yAxisMaxTicks)
 739                                         ;
 740                             }
 741                             svg.select("#xGrid").selectAll("line")
 742                                     .attr("id", function(d, i) {
 743                                         return ("xAxisLine" + i);
 744                                     });
 745
 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);
 750                                      }
 751                                 }
 752                             }
 753
 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");
 758                                      }
 759                                 }
 760                             }
 761                             function mouseOver(d, offsetX, offsetY) {
 762                                 offsetY = offsetY - BarChartD3Config.tooltipTopMargin;
 763                                 if (isSingleDataObj) {
 764                                     offsetX = offsetX - BarChartD3Config.tooltipLeftMargin + (width / 2);
 765                                 } else {
 766                                     offsetX = offsetX - BarChartD3Config.tooltipLeftMargin;
 767                                 }
 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])};
 771                                 scope.$apply();
 772                             }
 773                             scope.refreshChart = false;
 774                         });
 775                     }
 776                 };
 777             }]);
 778 angular.module('att.charts.coschartD3', ['att.charts.utilities'])
 779         .constant("CosChartD3Config",
 780                 {
 781                     "chartcolor": {
 782                         "paletteColors": ["#097cb5", "#FEFFF7"] //default color options for rendering chart baseColor and NeedleColor,
 783
 784                     },
 785                     "defaultcenterlabel": "COS 1",
 786                     "defaultcentercategory": "Real Time",
 787                     "zoomLevel": "25",
 788                     "doughnutratio": 20,
 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",
 798                     "arcOverMargin": 5
 799                 })
 800         .directive('attCosd3Chart', ['CosChartD3Config', '$timeout','$extendObj', function (CosChartD3Config, $timeout,$extendObj) {
 801                 return {
 802                     restrict: 'A',
 803                     scope: {
 804                         chartConfig: '=',
 805                         initVal: '='
 806                     },
 807                     templateUrl: 'template/coschartD3/attCosd3Chart.html',
 808                     transclude: true,
 809                     replace: true,
 810                     controller: ['$scope', '$attrs', function ($scope, $attrs) {
 811                             if (angular.isDefined($scope.chartConfig)) {
 812                                 CosChartD3Config = $extendObj.extendDeep(CosChartD3Config, $scope.chartConfig);
 813                             }
 814                             var legendColor = [];
 815                             legendColor = CosChartD3Config.chartcolor.paletteColors;
 816                             $scope.addLegendColor = function () {
 817                                 return {"color": legendColor[0]};
 818                             };
 819                             $scope.chartID = $attrs.id;
 820                             if (!angular.isDefined($attrs.legendRequired)) {
 821                                 $scope.legendRequired = CosChartD3Config.legendreqd;
 822                             } else {
 823                                 $scope.legendRequired = $attrs.legendRequired;
 824                             }
 825                             if (!angular.isDefined($attrs.legendPosition)) {
 826                                 $scope.legendPosition = CosChartD3Config.legendposition;
 827                             } else {
 828                                 $scope.legendPosition = $attrs.legendPosition;
 829                             }
 830                         }],
 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
 836                                     top: zoom,
 837                                     right: zoom,
 838                                     bottom: zoom,
 839                                     left: zoom
 840                                 },
 841                         width = attrs.chartWidth,
 842                                 height = attrs.chartHeight,
 843                                 radius = Math.min(
 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)){
 850                                 return;
 851                             }
 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 + "%";
 856                             if(cosval>100){
 857                                 data = [
 858                                         {"name": "cos1", "value": 100},
 859                                         {"name": "rest", "value": 0}
 860                                         ];
 861                                 }else{
 862                                         data = [
 863                                         {"name": "cos1", "value": cosval},
 864                                         {"name": "rest", "value": 100 - (parseInt(cosval, 10))}
 865                                 ];
 866                             }
 867                             var sliderpercent = parseInt(cosval, 10);
 868                             if (angular.isDefined(sliderpercent)) {
 869                                 sliderpercent = 0;
 870                             }
 871                             element[0].querySelector('.cosd3Container').setAttribute('id', attrs.id);
 872                             // build chart
 873                             var svg = d3.select(".cosd3Container#" + attrs.id)
 874                                     .attr("style", "height: " + attrs.chartHeight + "px;")
 875                                     .append("svg")
 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')
 881                                     .append("g")
 882                                     .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
 883                             // set radius
 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);
 891
 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 + ")");
 908
 909                             var pie = d3.layout.pie()
 910                                     .sort(null)
 911                                     .startAngle(3.2 * Math.PI)
 912                                     .endAngle(5.2 * Math.PI)
 913                                     .value(function (d) {
 914                                         return d.value;
 915                                     });
 916
 917                             // set chart attributes and bind hover events
 918                             var g = svg.selectAll(".arc")
 919                                     .data(pie(data))
 920                                     .enter()
 921                                     .append("g")
 922                                     .attr("class", "arc")
 923                                     .attr("id", function (d, i) {
 924                                         return "cosarc-" + i;
 925                                     })
 926                                     .style("cursor", "pointer");
 927
 928                             g.append("path")
 929                                     .style("fill", function (d) {
 930                                         return color(d.data.name);
 931                                     })
 932                                     .attr("id", function (d, i) {
 933                                         return "cospath-" + i;
 934                                     })
 935                                     .on("mouseover", function (d) {
 936                                         d3.select(this).transition()
 937                                                 .duration(CosChartD3Config.animduration)
 938                                                 .attr("d", arcOver);
 939                                     })
 940                                     .on("mouseout", function (d) {
 941                                         d3.select(this).transition()
 942                                                 .duration(CosChartD3Config.animduration)
 943                                                 .attr("d", arc);
 944                                     })
 945                                     .transition()
 946                                     .ease("exp")
 947                                     .duration(0)
 948                                     .attrTween("d", tweenPie);
 949
 950                             // animate function
 951                             function tweenPie(b) {
 952                                 var i = d3.interpolate({
 953                                     startAngle: 2.1 * Math.PI,
 954                                     endAngle: 2.1 * Math.PI
 955                                 }, b);
 956                                 return function (t) {
 957                                     return arc(i(t));
 958                                 };
 959                             }
 960                             if(cosval>0 && cosval<100){
 961                                 d3.select(".cosd3Container path#cospath-1").style('stroke', 'black');
 962                             }
 963
 964
 965
 966                         });
 967                     }
 968                 };
 969             }]);
 970 angular.module('att.charts.coschartwithbarD3', ['att.charts.utilities'])
 971 .constant("CosChartWithBarD3Config",
 972         {
 973             "chartcolor": {
 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"
 977             },
 978             "zoomLevel": "25",
 979             "doughnutratio": 20,
 980             "barreqd": "true",
 981             "barHeight": 50,
 982             "barWidth": 150,
 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",
 992             "centerText": {
 993                 'defaultCenterLabel': 'COS 1',
 994                 'defaultCenterCategory': 'Real Time',
 995                 'textValueDy': '0',
 996                 'textValueDx': '0',
 997                 'textPercentDx': '20',
 998                 'textPercentDy': '-10',
 999                 'textLabelDx': '0',
1000                 'textLabelDy': '20',
1001                 'color': '#666666',
1002                 'size': '36px',
1003                 'font': 'omnes_att_light'
1004             },
1005             "centerTextValueDy": "0",
1006             "centerTextValueDx": "0",
1007             "centerTextPercentDx": "20",
1008             "centerTextPercentDy": "-10",
1009             "centerTextLabelDy": "20",
1010             "centerTextLabelDx": "0",
1011             "arcOverMargin": 5
1012         })
1013 .directive('attCosBarD3Chart', ['CosChartWithBarD3Config', '$timeout','$extendObj', function (CosChartWithBarD3Config, $timeout,$extendObj) {return {
1014             restrict: 'A',
1015             scope: {
1016                 chartConfig: '=',
1017                 chartData: '=',
1018                 totalCos: '=',
1019                 remainingCos: '=',
1020                 mouseOver: '=?'
1021             },
1022             templateUrl: 'template/coschartwithbarD3/attCosBarD3Chart.html',
1023             transclude: true,
1024             replace: true,
1025             controller: ['$scope', '$attrs', function ($scope, $attrs) {
1026                 if (angular.isDefined($scope.chartConfig)) {
1027                     CosChartWithBarD3Config = $extendObj.extendDeep(CosChartWithBarD3Config, $scope.chartConfig);
1028                 }
1029
1030                 $scope.chartID = $attrs.id;
1031                 if (!angular.isDefined($attrs.barRequired)) {
1032                     $scope.barRequired = CosChartWithBarD3Config.barreqd;
1033                 } else {
1034                     $scope.barRequired = $attrs.barRequired;
1035                 }
1036
1037                 }],
1038             link: function (scope, element, attrs) {
1039                 /*
1040                     x: x-coordinate
1041                     y: y-coordinate
1042                     w: width
1043                     h: height
1044                     r: corner radius
1045                     tl: top_left rounded?
1046                     tr: top_right rounded?
1047                     bl: bottom_left rounded?
1048                     br: bottom_right rounded?
1049                  */
1050                 function rounded_rect(x, y, w, h, r, tl, tr, bl, br) {
1051                     var retval;
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; }
1065                     retval += "z";
1066                     return retval;
1067                 }
1068
1069                 var radScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);
1070
1071
1072                 var zoom = parseInt(CosChartWithBarD3Config.zoomLevel, 0),data,
1073                     margin = {// optionally set margins
1074                         top: zoom,
1075                         right: zoom,
1076                         bottom: zoom,
1077                         left: zoom
1078                     },
1079                     width = attrs.chartWidth,
1080                     height = attrs.chartHeight,
1081                     radius = Math.min(
1082                             width - (margin.left + margin.right),
1083                             height - (margin.top + margin.bottom)) / 2;
1084
1085
1086                 scope.$watchCollection('chartData', function (value) {
1087                     var j = 0; // index for for-loops
1088
1089                     if(!angular.isDefined(scope.chartData) || scope.chartData.length < 1){
1090                         return;
1091                     }
1092
1093                     d3.select("svg#" + attrs.id).remove();
1094                     d3.selectAll("svg#" + attrs.id + " > *").remove();
1095
1096                     // SnickrBar
1097                     d3.select("svg#" + scope.snickrbarId).remove();
1098                     d3.selectAll("svg#" + scope.snickrbarId + " > *").remove();
1099
1100                     var cosval = scope.chartData[0];
1101                     var remainingCosVal = 0, restCosVal = 0;
1102
1103                     for(j = 1; j < scope.chartData.length; j++)
1104                     {
1105                         remainingCosVal += parseInt(scope.chartData[j], 10); //parseInt allows strings to be passed in
1106                     }
1107                     restCosVal = 100 - cosval - remainingCosVal;
1108                     scope.totalCos = cosval + remainingCosVal;
1109                     scope.remainingCos = remainingCosVal;
1110
1111                     var data = angular.copy(scope.chartData);
1112                     if (angular.isDefined(restCosVal)) {
1113                         data.push(restCosVal);
1114                     }
1115
1116                     element[0].querySelector('.cosd3Container').setAttribute('id', attrs.id);
1117                     // build chart
1118                     var svg = d3.select(".cosd3Container#" + attrs.id)
1119                             .attr("style", "height: " + attrs.chartHeight + "px;")
1120                             .append("svg")
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')
1126                             .append("g")
1127                             .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
1128
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'})
1133                         .append("svg")
1134                         .attr("id", scope.snickrbarId)
1135                         .attr("width", CosChartWithBarD3Config.barWidth + "px")
1136                         .attr("height", CosChartWithBarD3Config.barHeight + "px")
1137                         .append("g");
1138
1139                     // set radius
1140                     var arc = d3.svg.arc()
1141                             .innerRadius(radius - CosChartWithBarD3Config.doughnutratio)
1142                             .outerRadius(radius);
1143
1144                     // set hovered radius
1145                     var arcOver = d3.svg.arc()
1146                             .innerRadius(radius - CosChartWithBarD3Config.doughnutratio)
1147                             .outerRadius(radius + CosChartWithBarD3Config.arcOverMargin);
1148
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 + ")");
1165
1166                     var scale = function(d) {
1167                         if (d <= 0) {
1168                             return 0;
1169                         } else {
1170                             var r = (d * CosChartWithBarD3Config.barWidth) / 100;
1171                             if (isNaN(r)) { r = 0; }
1172                             else if (!isFinite(r)) { r = CosChartWithBarD3Config.barWidth; }
1173
1174                             return r;
1175                         }
1176                     };
1177
1178                     // Only executed when totalCos is 0
1179                     if (cosval <= 0) {
1180                         arc.startAngle(0).endAngle(2 * Math.PI); //just radians
1181                         svg.append("path")
1182                                 .attr("d", arc)
1183                                 .attr("fill", CosChartWithBarD3Config.chartcolor.zeroColor)
1184                                 .style("stroke", CosChartWithBarD3Config.chartcolor.borderColor)
1185                                 .style("stroke-width", 1);
1186                     } else {
1187
1188                         // JVM: This code is temp for just snicker's bar release
1189                         var temp = 100-data[0];
1190                         var newData = [];
1191                         newData.push({'value':data[0]});
1192                         newData.push({'value':temp});
1193
1194                         /*for(j = 0; j < data.length; j++) {
1195                             var obj = angular.extend({}, data[j]);
1196                             obj.value = data[j];
1197                             newData.push(obj);
1198                         }*/
1199
1200
1201                         //======================================================
1202
1203
1204                         var pie = d3.layout.pie()
1205                             .sort(null)
1206                             .value(function (d,index) {
1207                                 var r = d.value;
1208                                 if (d.value <= 0) { r = 0; }
1209                                 return r;
1210                             });
1211
1212                         // set chart attributes and bind hover events
1213                         var g = svg.selectAll(".arc")
1214                                 .data(pie(newData))
1215                                 .enter()
1216                                 .append("g")
1217                                 .attr("class", "arc")
1218                                 .attr("id", function (d, i) {
1219                                     return "cosarc-" + i;
1220                                 })
1221                                 .style("cursor", "pointer");
1222
1223                         g.append("path")
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;
1227                                     }
1228
1229                                     return CosChartWithBarD3Config.chartcolor.paletteColors[i];
1230                                 })
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;
1235                                 })
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);
1241                                     }
1242                                 })
1243                                 .on("mouseout", function (d, index) {
1244                                     if (index < newData.length-1) {
1245                                         d3.select(this).transition()
1246                                                 .duration(CosChartWithBarD3Config.animduration)
1247                                                 .attr("d", arc);
1248                                     }
1249                                 })
1250                                 .transition()
1251                                 .ease("exp")
1252                                 .duration(0)
1253                                 .attrTween("d", tweenPie);
1254                     } // end of else
1255
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++) {
1260                         if (d[j] !== 0) {
1261                             var obj = {};
1262                             obj.data = d[j];
1263                             obj.color = CosChartWithBarD3Config.chartcolor.paletteColors[j+1];
1264                             snickrData.push(obj);
1265                         }
1266                     }
1267
1268                     var prevWidth = 0;
1269                     var nextX = function(d, i) {
1270                         if (i === 0) {
1271                             prevWidth = scale(d);
1272                             return 0;
1273                         } else {
1274                             var p = prevWidth;
1275                             prevWidth += scale(d);
1276                             return p;
1277                         }
1278                     };
1279
1280                     var rect = snickrbar.selectAll("path")
1281                         .data(snickrData)
1282                         .enter()
1283                         .append("path")
1284                         .style("fill", function(d, i) {
1285                             if (i >= CosChartWithBarD3Config.chartcolor.paletteColors.length || d.data === 0) {
1286                                 return CosChartWithBarD3Config.chartcolor.zeroColor;
1287                             }
1288
1289                             return d.color;
1290                         })
1291                         .attr("d", function(d, index) {
1292                             if (index === 0) {
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);
1298                             } else {
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);
1301                             }
1302                         });
1303
1304                     if (remainingCosVal === 0) {
1305                         snickrbar.attr("fill", CosChartWithBarD3Config.chartcolor.zeroColor);
1306                     }
1307
1308                     // add bar text element
1309                     /*var snickerText = d3.select('.snickrBar svg')
1310                         .append("g")
1311                         .style("fill", "black");
1312
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);*/
1328
1329
1330
1331                     // animate function
1332                     function tweenPie(b) {
1333                         var i = d3.interpolate({
1334                             startAngle: 2.1 * Math.PI,
1335                             endAngle: 2.1 * Math.PI
1336                         }, b);
1337                         return function (t) {
1338                             return arc(i(t));
1339                         };
1340                     }
1341
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') {
1346                             if (id === '0') {
1347                                 d3.select("#cospath-" + id).transition()
1348                                     .duration(CosChartWithBarD3Config.animduration)
1349                                     .attr("d", arcOver);
1350                             } else {
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);
1355                                 }
1356                             }
1357                         } else {
1358                             if (id === '0') {
1359                                 d3.select("#cospath-" + id).transition()
1360                                     .duration(CosChartWithBarD3Config.animduration)
1361                                     .attr("d", arc);
1362                             } else {
1363                                 for (j = 0; j < newData.length-1; j++) {
1364                                     d3.select("#cospath-" + (j+1)).transition()
1365                                         .duration(CosChartWithBarD3Config.animduration)
1366                                         .attr("d", arc);
1367                                 }
1368                             }
1369                         }
1370                     });
1371
1372                 });
1373
1374             }
1375         };
1376     }]);
1377 angular.module('att.charts.cosdeletionD3', ['att.charts.utilities'])
1378         .constant("CosdeletionD3Config",
1379                 {
1380                     "chartcolor": {
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"
1389                     },
1390                     "defaultcenterlabel": "Kbps",
1391                     "zoomLevel": "10",
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",
1405                     "arcOverMargin": 5
1406                 })
1407         .directive('attCosdeletiond3Chart', ['CosdeletionD3Config', '$timeout','$extendObj', function(CosdeletionD3Config, $timeout,$extendObj) {
1408                 return {
1409                     restrict: 'A',
1410                     scope: {
1411                         maxValue: '=',
1412                         chartData: '=',
1413                         chartConfig: '=',
1414                         resetChart: '=',
1415                         removeArcs: '='
1416                     },
1417                     controller: ['$scope', '$attrs', function($scope, $attrs) {
1418                         if (angular.isDefined($scope.chartConfig)) {
1419                             CosdeletionD3Config = $extendObj.extendDeep(CosdeletionD3Config, $scope.chartConfig);
1420                         }
1421
1422                         }],
1423                     link: function(scope, element, attrs) {
1424                         var zoom = parseInt(CosdeletionD3Config.zoomLevel, 0),
1425                                 margin = {// optionally set margins
1426                                     top: zoom,
1427                                     right: zoom,
1428                                     bottom: zoom,
1429                                     left: zoom
1430                                 },
1431                         width = attrs.chartWidth,
1432                                 height = attrs.chartHeight,
1433                                 radius = Math.min(
1434                                         width - (margin.left + margin.right),
1435                                         height - (margin.top + margin.bottom)) / 2,arcPath;
1436                         // set radius
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);
1443
1444                         // Browser onresize event
1445                         window.onresize = function() {
1446                             scope.$apply();
1447                         };
1448                         scope.$watch('resetChart', function(newValue, oldValue) {
1449                             if(scope.resetChart === true){
1450                                 scope.resetChart = false;
1451                                 return;
1452                             }
1453                             return scope.render(newValue, oldValue);
1454                         });
1455                         scope.render = function(newValue, oldValue) {
1456                             d3.select("svg#" + attrs.id).remove();
1457                             d3.selectAll("svg#" + attrs.id + " > *").remove();
1458                             if (!scope.chartData)
1459                             {
1460                                 return;
1461                             }
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);
1467                             }
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;
1473
1474                                     data[j].value=0;
1475                                     dynamicColorRange.push(CosdeletionD3Config.chartcolor.MaxBandwidthReached);
1476
1477                                 }else{
1478                                     selectedElem.push({index: data[j].id, value: data[j].value});
1479                                     dynamicColorRange.push(CosdeletionD3Config.chartcolor.UsedBandwidthColor);
1480                                 }
1481                             }
1482                            if(scope.removeArcs){
1483                                 while(data.length > 0) {
1484                                     data.pop();
1485                                 }
1486                               dynamicColorRange=[];
1487                               data.push({name: "totalUsed", value: totalUsed-selectedBandwidth,id:"totalUsed"});
1488                               dynamicColorRange.push(CosdeletionD3Config.chartcolor.UsedBandwidthColor);
1489                               scope.removeArcs=false;
1490                            }
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);
1496                                 }
1497                                 data.push({name: "remaining", value: remainingBandwidth,id:"remaining"});
1498                                 dynamicColorRange.push(CosdeletionD3Config.chartcolor.RemainingBandwidthColor);
1499                             }
1500                             element[0].setAttribute('id', attrs.id);
1501                             var svg = d3.select(element[0])
1502                                     .attr("style", "height: " + attrs.chartHeight + "px;")
1503                                     .append("svg")
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')
1510                                     .append("g")
1511                                     .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
1512
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");
1525
1526                             var color = d3.scale.ordinal().range(dynamicColorRange);
1527                             centerTextValue.text(totalUsed-selectedBandwidth);
1528                             centerTextLabel.text(CosdeletionD3Config.defaultcenterlabel);
1529                             maxbandwidthText.text(totalBandwidth + " " + CosdeletionD3Config.defaultcenterlabel);
1530
1531                             var pie = d3.layout.pie()
1532                                     .sort(null)
1533                                     .startAngle(CosdeletionD3Config.guageStartAngle)
1534                                     .endAngle(CosdeletionD3Config.guageEndAngle)
1535                                     .value(function(d) {
1536                                         return d.value;
1537                                     });
1538
1539                             var g = svg.selectAll(".arc")
1540                                     .data(pie(data))
1541                                     .enter()
1542                                     .append("g")
1543                                     .attr("class", "arc")
1544                                     .attr("id", function(d, i) {
1545                                         return "cosdeletionarc-" + d.data.id;
1546                                     })
1547                                     .style("cursor", "pointer");
1548
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;
1554                                         })
1555                                         .transition()
1556                                         .ease("exp")
1557                                         .duration(0)
1558                                         .attrTween("d", tweenPie);
1559
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);
1565                                     }
1566                                 }
1567
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);
1573                                     }
1574                                 }
1575                                 d3.select("#" + attrs.id + " path#cosdeletionpath-remaining").style('stroke', CosdeletionD3Config.chartcolor.RemainingBandwidthStrokeColor).style("stroke-width", CosdeletionD3Config.chartcolor.RemainingBandwidthStrokeWidth);
1576                             }
1577                         };
1578
1579                         function tweenPie(b) {
1580                                 var i = d3.interpolate({
1581                                     startAngle: 2.1 * Math.PI,
1582                                     endAngle: 2.1 * Math.PI
1583                                 }, b);
1584                                 return function(t) {
1585                                     return arc(i(t));
1586                                 };
1587                             }
1588                     }
1589                 };
1590             }]);
1591 angular.module('att.charts.cosmultichartD3', ['att.charts.utilities'])
1592         .constant("CosMultiChartD3Config",
1593                 {
1594                     "chartcolor": {
1595                         "paletteColors": ["#44c6f7", "#4ba90b", "#d70e80", "#ff9900", "#81017e", "#cccccc"], //default color options for rendering chart baseColor and NeedleColor,
1596                         "zeroTicketColor": ["#d3d3d3"]
1597                     },
1598                     "defaultcenterlabel": "CoS",
1599                     "defaultcentercategory": "2V/2/3/4/5",
1600                     "zoomLevel": "25",
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",
1612                     "arcOverMargin": 5
1613                 })
1614         .directive('attCosmultid3Chart', ['CosMultiChartD3Config', '$timeout','$extendObj', function (CosMultiChartD3Config, $timeout,$extendObj) {
1615                 return {
1616                     restrict: 'A',
1617                     scope: {
1618                         chartData: '=',
1619                         chartConfig: '='
1620                     },
1621                     templateUrl: 'template/cosmultichartD3/attCosmultid3Chart.html',
1622                     transclude: true,
1623                     replace: true,
1624                     controller: ['$scope', '$attrs', function ($scope, $attrs) {
1625
1626                             if (angular.isDefined($scope.chartConfig)) {
1627                                 CosMultiChartD3Config = $extendObj.extendDeep(CosMultiChartD3Config, $scope.chartConfig);
1628                             }
1629
1630                             $scope.addLegendColor = function (id, item) {
1631                                 return {"color": CosMultiChartD3Config.chartcolor.paletteColors[id]};
1632                             };
1633
1634                             $scope.chartID = $attrs.id;
1635                             if (!angular.isDefined($attrs.legendRequired)) {
1636                                 $scope.legendRequired = CosMultiChartD3Config.legendreqd;
1637                             } else {
1638                                 $scope.legendRequired = $attrs.legendRequired;
1639                             }
1640                             if (!angular.isDefined($attrs.legendPosition)) {
1641                                 $scope.legendPosition = CosMultiChartD3Config.legendposition;
1642                             } else {
1643                                 $scope.legendPosition = $attrs.legendPosition;
1644                             }
1645                         }],
1646                     link: function (scope, element, attrs) {
1647                         var zoom = parseInt(CosMultiChartD3Config.zoomLevel, 0),
1648                                 pi = Math.PI,
1649                                 margin = {// optionally set margins
1650                                     top: zoom,
1651                                     right: zoom,
1652                                     bottom: zoom,
1653                                     left: zoom
1654                                 },
1655                         width = attrs.chartWidth,
1656                                 height = attrs.chartHeight,
1657                                 radius = Math.min(
1658                                         width - (margin.left + margin.right),
1659                                         height - (margin.top + margin.bottom)) / 2;
1660
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));
1669                             }
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});
1674                             }
1675                             element[0].querySelector('.cosmultid3Container').setAttribute('id', attrs.id);
1676                             // build chart
1677                             var svg = d3.select(".cosmultid3Container#" + attrs.id)
1678                                     .attr("style", "height: " + attrs.chartHeight + "px;")
1679                                     .append("svg")
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')
1685                                     .append("g")
1686                                     .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
1687                             // set radius
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);
1711
1712                             if (totalCosVal <= 0) {
1713                                 arc.startAngle(0).endAngle(2 * pi); //just radians
1714                                 svg.append("path")
1715                                         .attr("d", arc)
1716                                         .attr("fill", CosMultiChartD3Config.chartcolor.zeroTicketColor);
1717                             } else {
1718                                 var pie = d3.layout.pie()
1719                                         .sort(null)
1720                                         .startAngle(3.2 * Math.PI)
1721                                         .endAngle(5.2 * Math.PI)
1722                                         .value(function (d) {
1723                                             return d.value;
1724                                         });
1725
1726                                 var g = svg.selectAll(".arc")
1727                                         .data(pie(data))
1728                                         .enter()
1729                                         .append("g")
1730                                         .attr("class", "arc")
1731                                         .attr("id", function (d, i) {
1732                                             return "cosmultiarc-" + i;
1733                                         })
1734                                         .style("cursor", "pointer");
1735
1736                                 g.append("path")
1737                                         .style("fill", function (d) {
1738                                             return color(d.data.name);
1739                                         })
1740                                         .attr("id", function (d, i) {
1741                                             return "cosmultipath-" + i;
1742                                         })
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);
1749                                         })
1750                                         .on("mouseout", function (d) {
1751                                             d3.select(this).transition()
1752                                                     .duration(CosMultiChartD3Config.animduration)
1753                                                     .attr("d", arc);
1754                                         })
1755                                         .transition()
1756                                         .ease("exp")
1757                                         .duration(0)
1758                                         .attrTween("d", tweenPie);
1759
1760
1761                             }
1762                             function tweenPie(b) {
1763                                 var i = d3.interpolate({
1764                                     startAngle: 2.1 * Math.PI,
1765                                     endAngle: 2.1 * Math.PI
1766                                 }, b);
1767                                 return function (t) {
1768                                     return arc(i(t));
1769                                 };
1770                             }
1771                         }
1772
1773                         scope.$watch('chartConfig', function(value) {
1774                             if (angular.isDefined(scope.chartConfig)) {
1775                                 CosMultiChartD3Config = $extendObj.extendDeep(CosMultiChartD3Config, scope.chartConfig);
1776                             }
1777
1778                             renderChart();
1779                         }, true);
1780
1781                         scope.$watch('chartData', function (value) {
1782                             renderChart();
1783                         });
1784                     }
1785                 };
1786             }]);
1787 angular.module('att.charts.donutD3', ['att.charts.utilities'])
1788         .constant("DonutChartD3Config",
1789                 {
1790                     "chartcolor": {
1791                         "paletteColors": ["#676767", "#96B1D0", "#0B2477", "#FF9900", "#81017D", "#B6BF00", "#DA0081", "#00C7B2"], //default color options for rendering chart
1792                         "zeroTicketColor": ["#d3d3d3"],
1793                         "centerTicketCountHoverColor":["#0574AC"]
1794                     },
1795                     "zoomlevel": "25",
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",
1804                     "arcOverMargin":10
1805                 })
1806         .directive('attDonutd3Chart', ['DonutChartD3Config', '$timeout','$extendObj', function (DonutChartD3Config, $timeout,$extendObj) {
1807                 return {
1808                     restrict: 'A',
1809                     scope: {
1810                         chartData: '=',
1811                         chartColor: '=',
1812                         chartConfig: '=',
1813                         refreshChart: '=',
1814                         onclickcallback: '&',
1815                         legendclickcallback: '&',
1816                         centerclickcallback: '&'
1817                     },
1818                     templateUrl: 'template/donutD3/attDonutd3Chart.html',
1819                     transclude: true,
1820                     replace: true,
1821                     controller: ['$scope', '$attrs', function ($scope, $attrs) {
1822                             if (angular.isDefined($scope.chartConfig)) {
1823                                 DonutChartD3Config = $extendObj.extendDeep(DonutChartD3Config,$scope.chartConfig);
1824                             }
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]};
1830                                 } else {
1831                                     return {"color": DonutChartD3Config.chartcolor.zeroTicketColor};
1832                                 }
1833                             };
1834                             $scope.chartID = $attrs.id;
1835                             if (!angular.isDefined($attrs.legendRequired)) {
1836                                 $scope.legendRequired = DonutChartD3Config.legendreqd;
1837                             } else {
1838                                 $scope.legendRequired = $attrs.legendRequired;
1839                             }
1840                             if (!angular.isDefined($attrs.legendPosition)) {
1841                                 $scope.legendPosition = DonutChartD3Config.legendposition;
1842                             } else {
1843                                 $scope.legendPosition = $attrs.legendPosition;
1844                             }
1845                             $scope.addStyle = function (elem) {
1846                                 if ($scope.legendRequired && angular.isDefined($scope.legendPosition)) {
1847                                     if ($attrs.legendPosition === "right") {
1848                                         return "floatLeft";
1849                                     } else {
1850                                         if (elem === 'chartLegend')
1851                                         {
1852                                             return "floatLeft";
1853                                         }
1854                                         else
1855                                         {
1856                                             return "floatRight";
1857                                         }
1858                                     }
1859                                 } else {
1860                                     return "floatLeft";
1861                                 }
1862                             };
1863                         }],
1864                     link: function (scope, element, attrs) {
1865                         scope.$watch('refreshChart', function () {
1866                             if (angular.isDefined(scope.refreshChart)) {
1867                                 if (scope.refreshChart !== true)
1868                                 {
1869                                     return;
1870                                 } else {
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");
1875                                     }
1876
1877                                 }
1878
1879                             }
1880
1881                             if (angular.isDefined(scope.chartConfig)) {
1882                                 DonutChartD3Config = $extendObj.extendDeep(DonutChartD3Config, scope.chartConfig);
1883                             }
1884                             d3.select("svg#" + attrs.id).remove();
1885                             d3.selectAll("svg#" + attrs.id + " > *").remove();
1886                             var selectedPath = "",
1887                                     lastSelected,
1888                                     pi = Math.PI;
1889                             var zoom = parseInt(DonutChartD3Config.zoomlevel, 0),
1890                                     coloroptions = (scope.chartColor) ? scope.chartColor : DonutChartD3Config.chartcolor.paletteColors,
1891                                     defaultcenterlabel = DonutChartD3Config.defaultcenterlabel,
1892                                     totalcount = 0,
1893                                     margin = {// optionally set margins
1894                                         top: zoom,
1895                                         right: zoom,
1896                                         bottom: zoom,
1897                                         left: zoom
1898                                     },
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),
1902                                     radius = Math.min(
1903                                             width - (margin.left + margin.right),
1904                                             height - (margin.top + margin.bottom)) / 2,*/
1905                              width = attrs.chartWidth,
1906                                     height = attrs.chartHeight,
1907                                     radius = Math.min(
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));
1915                                     }
1916                                 }
1917                             }
1918
1919                             var data=[];
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});
1924                                 }
1925                             }
1926                             var chartStyle = d3.select(".chartContainer#" + attrs.id)
1927                                     .attr("style");
1928                             var chart = d3.select(".chartContainer#" + attrs.id)
1929                                     .attr("style", "height: " + attrs.chartHeight + "px;width:" + attrs.chartWidth + "px;")
1930                                     .append("svg")
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')
1936                                     .append("g")
1937                                     .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
1938                             // set radius
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});
1951                                         }
1952                                     });
1953                             var centerTextLabel = chart.append("text")
1954                                     .attr("y", DonutChartD3Config.centerTextLabelDy)
1955                                     .attr("class", "donutcenterLabel")
1956                                     .attr("id", attrs.id + "category");
1957
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")
1963                                         .attr("d", arc)
1964                                         .attr("fill", DonutChartD3Config.chartcolor.zeroTicketColor);
1965                             } else {
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()
1971                                         .sort(null)
1972                                         .startAngle(1.1 * Math.PI)
1973                                         .endAngle(3.1 * Math.PI)
1974                                         .value(function (d) {
1975                                             return d.value;
1976                                         });
1977                                 var g = chart.selectAll(".arc")
1978                                         .data(pie(scope.chartData))
1979                                         .enter()
1980                                         .append("g")
1981                                         .attr("class", "arc")
1982                                         .style("cursor", "pointer");
1983                                 // set fill color and animate tween
1984                                 g.append("path")
1985                                         .style("fill", function (d) {
1986                                             return color(d.data.name);
1987                                         })
1988                                         .attr("path-id",function (d, i) {
1989                                             return "b-" + i;
1990                                         })
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);
1997
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");
2002                                         })
2003                                         .on("mouseout", function (d) {
2004                                             if (!this.getAttribute("clicked")) {
2005                                                 d3.select(this).transition()
2006                                                         .duration(DonutChartD3Config.animduration)
2007                                                         .attr("d", arc);
2008                                                 if (selectedPath.length === 0) {
2009                                                     centerTextValue.text(totalcount);
2010                                                     centerTextLabel.text(defaultcenterlabel);
2011                                                 } else {
2012                                                     centerTextValue.text(selectedPath.datum().data.value);
2013                                                     centerTextLabel.text(selectedPath.datum().data.name);
2014                                                 }
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)
2020                                                         .attr("d", arc);
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");
2024                                                 }
2025                                             }
2026                                         })
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});
2030                                             }
2031                                             if (!this.getAttribute("clicked")) {
2032                                                 this.setAttribute("clicked", "clicked");
2033                                                 if (selectedPath !== "") {
2034                                                     lastSelected = selectedPath;
2035                                                     selectedPath[0][0].removeAttribute("clicked");
2036                                                 }
2037                                                 selectedPath = d3.select(this);
2038                                             } else {
2039                                                 if (this.getAttribute("path-id") === selectedPath.attr("path-id")) {
2040                                                     selectedPath[0][0].removeAttribute("clicked");
2041                                                     selectedPath = "";
2042                                                 }
2043                                             }
2044
2045                                         })
2046                                         .transition()
2047                                         .ease("exp")
2048                                         .duration(DonutChartD3Config.initduration)
2049                                         .attrTween("d", tweenPie);
2050                                 // animate function
2051                                 scope.legendMouseOver = function (item, id, e) {
2052                                         selectedId="b-"+id;
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);
2063                                              }
2064                                         });
2065
2066                                         d3.select("#TicketGraphcount").style('fill',DonutChartD3Config.chartcolor.centerTicketCountHoverColor);
2067                                     }
2068                                 };
2069                                 scope.legendMouseLeave = function (item, id, e) {
2070                                     selectedId="b-"+id;
2071                                     hoveredLegendItem=this;
2072                                     if (item.value > 0) {
2073                                         if (selectedPath.length === 0) {
2074                                             centerTextValue.text(totalcount);
2075                                             centerTextLabel.text(defaultcenterlabel);
2076                                         } else {
2077                                             centerTextValue.text(selectedPath.datum().data.value);
2078                                             centerTextLabel.text(selectedPath.datum().data.name);
2079                                         }
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);
2085                                                 }
2086                                              }
2087                                         });
2088                                         d3.select("#TicketGraphcount").style('fill', "#000");
2089
2090                                     }
2091                                 };
2092                             }
2093                             function tweenPie(b) {
2094                                 var i = d3.interpolate({
2095                                     startAngle: 1.1 * Math.PI,
2096                                     endAngle: 1.1 * Math.PI
2097                                 }, b);
2098                                 return function (t) {
2099                                     return arc(i(t));
2100                                 };
2101                             }
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"
2110                                 });
2111                             }, 200);
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);
2117                                 }
2118
2119                             }
2120
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", "");
2125                                              }
2126                                   });
2127                             }
2128                             scope.refreshChart = false;
2129                         });
2130
2131                     }
2132                 };
2133             }])
2134         .filter('filterData', function () {
2135             return function (input) {
2136                 return input.replace(/ /g, "").toUpperCase();
2137             };
2138         });
2139 angular.module('att.charts.donutFusion', [])
2140         .constant("DonutChartFusionConfig",
2141                 {
2142                     "chart": {
2143                         "caption": "Tickets",
2144                         "startingAngle": 0,
2145                         "theme": "fist",
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",
2151                         "pieRadius": "110",
2152                         "showLabels": "0",
2153                         "showValues": "0",
2154                         "showBorder": "0",
2155                         "showpercentintooltip": "0",
2156                         "bgcolor": "#FFFFFF",
2157                         "defaultCenterLabel": "Total",
2158                         "showshadow": 0,
2159                         "centerLabel": "$value $label",
2160                         "plotHoverEffect": 1,
2161                         "plotBorderHoverDashGap": "50",
2162                         "enableRotation": "0",
2163                         "baseFont": "Arial",
2164                         "baseFontColor": "#666666",
2165                         "use3DLighting": "0",
2166                         "numbersuffix": "",
2167                         "defaultAnimation": "0",
2168                         "showValuesOnHover": 0
2169                     }
2170                 })
2171         .directive('attDonutfusionChart', ['DonutChartFusionConfig', '$timeout', function (DonutChartFusionConfig, $timeout) {
2172                 'use strict';
2173                 return {
2174                     restrict: 'A',
2175                     scope: {
2176                         chartData: '=',
2177                         onclickcallback: '&'
2178                     },
2179                     templateUrl: 'template/donutFusion/attDonutfusionChart.html',
2180                     transclude: true,
2181                     replace: true,
2182                     link: function (scope, element, attrs, controller, transclude) {
2183                         var totalItems = 0;
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));
2188                             }
2189                             }
2190                         }
2191                         DonutChartFusionConfig.data = scope.chartData;
2192                         var donutChartDataSource = DonutChartFusionConfig;
2193                         var defaultCenterLabelText;
2194                         defaultCenterLabelText = totalItems + ' ' + DonutChartFusionConfig.chart.defaultCenterLabel;
2195                         donutChartDataSource.chart.defaultCenterLabel = defaultCenterLabelText;
2196
2197                         var initChart = function () {
2198                             FusionCharts.ready(function () {
2199                                 var donutChart = new FusionCharts({
2200                                     type: 'doughnut2d',
2201                                     renderAt: "donutFusionChart",
2202                                     //width: '100%',
2203                                     width: attrs.chartWidth,
2204                                     height: attrs.chartHeight,
2205                                     dataFormat: 'json',
2206                                     dataSource: donutChartDataSource,
2207                                     events: {
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");
2213                                         },
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");
2218                                         },
2219                                         "dataPlotClick": function (evtObj, argObj) {
2220                                             if(angular.isDefined(scope.onclickcallback)){
2221                                             scope.onclickcallback({evtObj:evtObj, argObj:argObj});
2222                                             }
2223                                         }
2224                                     }
2225                                 });
2226                                 donutChart.render();
2227                                 DonutChartFusionConfig.chart.defaultCenterLabel = DonutChartFusionConfig.chart.defaultCenterLabel;
2228                             });
2229                         };
2230                         initChart();
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");
2235
2236                         }, 200);
2237                     },
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]};
2243                         };
2244                         $scope.legendRequired = $attrs.legendRequired;
2245
2246                         $scope.addStyle = function (elem) {
2247                             if ($scope.legendRequired && angular.isDefined($attrs.legendPosition)) {
2248                                 if ($attrs.legendPosition === "right") {
2249                                     if (elem === 'chartLegend')
2250                                     {
2251                                         return {"float": "left"};
2252                                     }
2253                                     else
2254                                     {
2255                                         return {"float": "left"};
2256                                     }
2257                                 } else {
2258                                     if (elem === 'chartLegend')
2259                                     {
2260                                         return {"float": "left"};
2261                                     }
2262                                     else
2263                                     {
2264                                         return {"float": "right"};
2265                                     }
2266                                 }
2267                             } else {
2268                                 return {"float": "left"};
2269                             }
2270                         };
2271                     }
2272                 };
2273             }])
2274         .filter('filterData', function () {
2275             return function (input) {
2276                 return input.replace(/ /g, "").toUpperCase();
2277             };
2278         });
2279 angular.module('att.charts.horseshoeD3', ['att.charts.utilities'])
2280         .constant("HorseShoeChartD3Config",
2281                 {
2282                     "chartcolor": {
2283                         "paletteColors": ["#1072b8", "#FEFFF7"], //default color options for rendering chart baseColor and NeedleColor,
2284                         "paletteBorderColors": ["#1072b8", "#000"]
2285                     },
2286                     "defaultcenterlabel": "COS 1",
2287                     "defaultcentercategory": "Real Time",
2288                     "animduration": 500,
2289                     "legendreqd": "false",
2290                     "legendposition": "top",
2291                     "centerTextLabelDy": "20"
2292                 })
2293         .directive('attHorseshoed3Chart', ['HorseShoeChartD3Config', '$timeout','$extendObj', function (HorseShoeChartD3Config, $timeout,$extendObj) {
2294                 return {
2295                     restrict: 'A',
2296                     scope: {
2297                         chartConfig: '=',
2298                         initVal: '=',
2299                         horseShoeId: '@'
2300                     },
2301                     templateUrl: 'template/horseshoeD3/attHorseshoeD3Chart.html',
2302                     transclude: true,
2303                     replace: true,
2304                     controller: ['$scope', '$attrs',function ($scope, $attrs) {
2305                         if (angular.isDefined($scope.chartConfig)) {
2306                             HorseShoeChartD3Config = $extendObj.extendDeep(HorseShoeChartD3Config, $scope.chartConfig);
2307                         }
2308                         var legendColor = [];
2309                         legendColor = HorseShoeChartD3Config.chartcolor.paletteColors;
2310                         $scope.addLegendColor = function () {
2311                             return {"color": legendColor[0]};
2312                         };
2313                         if (!angular.isDefined($attrs.legendRequired)) {
2314                             $scope.legendRequired = HorseShoeChartD3Config.legendreqd;
2315                         } else {
2316                             $scope.legendRequired = $attrs.legendRequired;
2317                         }
2318                         if (!angular.isDefined($attrs.legendPosition)) {
2319                             $scope.legendPosition = HorseShoeChartD3Config.legendposition;
2320                         } else {
2321                             $scope.legendPosition = $attrs.legendPosition;
2322                         }
2323                     }],
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 + "%";
2331                         var dataset = {
2332                             lower: calcPercent(0),
2333                             upper: calcPercent(guageVal)
2334                         },
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;
2342                                 })
2343                                 .endAngle(function (d) {
2344                                     return d.endAngle + 2.6 * Math.PI / 2;
2345                                 });
2346
2347                         element[0].querySelector('.horseshoed3Container').setAttribute('id', scope.horseShoeId);
2348
2349                         var svg = d3.select(".horseshoed3Container#" + scope.horseShoeId)
2350                                 .attr("style", "height: " + attrs.chartHeight + "px;")
2351                                 .append("svg")
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')
2357                                 .append("g")
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) {
2363                                     return "color" + i;
2364                                 })
2365                                 .attr("fill", HorseShoeChartD3Config.chartcolor.paletteColors[1])
2366                                 .attr("stroke", HorseShoeChartD3Config.chartcolor.paletteBorderColors[1])
2367                                 .attr("d", arc)
2368                                 .each(function (d) {
2369                                     this._current = 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 + ")");
2380                         }
2381                         else {
2382                             var progress = 0;
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]);
2390
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 + ")");
2397                                         return arc(i(t));
2398                                     };
2399                                 }); // redraw the arcs
2400
2401                             }, 200);
2402                         }
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]);
2410
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 + ")");
2417                                     return arc(i(t));
2418                                 };
2419                             }); // redraw the arcs
2420
2421                         });
2422                         function calcPercent(guageVal) {
2423                             return [guageVal, 100 - guageVal];
2424                         }
2425
2426                     }
2427                 };
2428             }]);
2429 angular.module('att.charts.radialguageD3', ['att.charts.utilities'])
2430         .constant("RadialGuageChartD3Config",
2431                 {
2432                     "chartcolor": {
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"]
2442                     },
2443                     "defaultcenterlabel": "Kbps",
2444                     "maxAllowedUnitsLabel": "Kbps",
2445                     "zoomLevel": "25",
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",
2458                     "arcOverMargin": 5
2459                 })
2460         .directive('attRadialguaged3Chart', ['RadialGuageChartD3Config', '$timeout','$extendObj', function(RadialGuageChartD3Config, $timeout,$extendObj) {
2461                 return {
2462                     restrict: 'A',
2463                     scope: {
2464                         maxValue: '=',
2465                         chartData: '=',
2466                         chartConfig: '=',
2467                         resetChart: '=',
2468                         mouseOver: '=?'
2469                     },
2470                     controller: ['$scope', '$attrs', function($scope, $attrs) {
2471                         if (angular.isDefined($scope.chartConfig)) {
2472                             RadialGuageChartD3Config = $extendObj.extendDeep(RadialGuageChartD3Config, $scope.chartConfig);
2473                         }
2474
2475                         }],
2476                     link: function(scope, element, attrs) {
2477                         var zoom = parseInt(RadialGuageChartD3Config.zoomLevel, 0),
2478                                 margin = {// optionally set margins
2479                                     top: zoom,
2480                                     right: zoom,
2481                                     bottom: zoom,
2482                                     left: zoom
2483                                 },
2484                         width = attrs.chartWidth,
2485                                 height = attrs.chartHeight,
2486                                 radius = Math.min(
2487                                         width - (margin.left + margin.right),
2488                                         height - (margin.top + margin.bottom)) / 2;
2489                         // set radius
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() {
2499                             scope.$apply();
2500                         };
2501
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);
2509
2510                             } else {
2511                                 d3.select('path#radialguagepath-' + (id)).transition()
2512                                     .duration(parseInt(RadialGuageChartD3Config.animduration,10))
2513                                     .attr('d', arc);
2514                             }
2515                         });
2516
2517                         scope.$watch('resetChart', function() {
2518                             if (angular.isDefined(scope.resetChart)) {
2519                                 if (angular.isDefined(scope.chartData)) {
2520                                     scope.render(scope.chartData, scope.chartData);
2521                                 }
2522                                 scope.resetChart = false;
2523                             }
2524                         });
2525                         scope.$watch('chartData', function(newValue, oldValue) {
2526                             return scope.render(newValue, oldValue);
2527                         }, true);
2528                         scope.render = function(newValue, oldValue) {
2529                             d3.select("svg#" + attrs.id).remove();
2530                             d3.selectAll("svg#" + attrs.id + " > *").remove();
2531                             if (!scope.chartData)
2532                             {
2533                                 return;
2534                             }
2535                             var color, selectedSlider, totalBandwidth = 0, totalUsed = 0, remainingBandwidth = 0;
2536                             if (angular.isDefined(scope.maxValue)) {
2537                                 totalBandwidth = parseInt(scope.maxValue, 0);
2538                             }
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;
2543                                 }
2544                             });
2545                             var data = angular.copy(scope.chartData);
2546                             if (totalUsed < totalBandwidth) {
2547                                 remainingBandwidth = totalBandwidth - parseInt(totalUsed, 0);
2548                                 data.push({name: "remaining", value: remainingBandwidth});
2549                             }
2550                             element[0].setAttribute('id', attrs.id);
2551                             var svg = d3.select(element[0])
2552                                     .attr("style", "height: " + attrs.chartHeight + "px;")
2553                                     .append("svg")
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')
2559                                     .append("g")
2560                                     .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")");
2561
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;
2576                                 data = [
2577                                     {
2578                                         name: "totalUsed",
2579                                         value: "100"
2580                                     }
2581                                 ];
2582                                 color = d3.scale.ordinal().range(RadialGuageChartD3Config.chartcolor.MaxBandwidthReached);
2583                             } else if (totalUsed <= 0) {
2584                                 data = [
2585                                     {
2586                                         name: "totalUnUsed",
2587                                         value: "100"
2588                                     }
2589                                 ];
2590                                 color = d3.scale.ordinal().range(RadialGuageChartD3Config.chartcolor.ZeroBandwidthSelected);
2591
2592                             } else {
2593                                 var Colorpalette = [];
2594                                 if (newValue === oldValue) {
2595                                     data = [
2596                                         {
2597                                             name: "totalUsed",
2598                                             value: totalUsed
2599                                         }
2600                                     ];
2601                                     if (remainingBandwidth > 0) {
2602                                         data.push({name: "remaining", value: remainingBandwidth});
2603                                     }
2604                                 }
2605                                 for (var j = 0; j < data.length - 1; j++) {
2606                                     Colorpalette[j] = RadialGuageChartD3Config.chartcolor.UsedBandwidthColor;
2607                                 }
2608                                 if (remainingBandwidth > 0) {
2609                                     Colorpalette.push(RadialGuageChartD3Config.chartcolor.RemainingBandwidthColor);
2610                                 }
2611                                 color = d3.scale.ordinal().range(Colorpalette);
2612                             }
2613
2614                             centerTextValue.text(totalUsed);
2615                             centerTextLabel.text(RadialGuageChartD3Config.defaultcenterlabel);
2616                             maxbandwidthText.text(totalBandwidth + " " + RadialGuageChartD3Config.maxAllowedUnitsLabel);
2617                             var pie = d3.layout.pie()
2618                                     .sort(null)
2619                                     .startAngle(RadialGuageChartD3Config.guageStartAngle)
2620                                     .endAngle(RadialGuageChartD3Config.guageEndAngle)
2621                                     .value(function(d) {
2622                                         return d.value;
2623                                     });
2624
2625                             var g = svg.selectAll(".arc")
2626                                     .data(pie(data))
2627                                     .enter()
2628                                     .append("g")
2629                                     .attr("class", "arc")
2630                                     .attr("id", function(d, i) {
2631                                         return "radialguagearc-" + i;
2632                                     })
2633                                     .style("cursor", "pointer");
2634
2635                             if (newValue === oldValue) {
2636                                 g.append("path")
2637                                         .style("fill", function(d) {
2638                                             return color(d.data.name);
2639                                         })
2640                                         .attr("id", function(d, i) {
2641                                             return "radialguagepath-" + i;
2642                                         })
2643                                         .transition()
2644                                         .ease("exp")
2645                                         .duration(0)
2646                                         .attrTween("d", tweenPie);
2647                             } else {
2648                                 g.append("path")
2649                                         .style("fill", function(d) {
2650                                             return color(d.data.name);
2651                                         })
2652                                         .attr("id", function(d, i) {
2653                                             return "radialguagepath-" + i;
2654                                         })
2655                                         .style("stroke", RadialGuageChartD3Config.chartcolor.RemainingBandwidthColor)
2656                                         .style("stroke-width", RadialGuageChartD3Config.chartcolor.UsedBandwidthStrokeWidth)
2657                                         .transition()
2658                                         .ease("exp")
2659                                         .duration(0)
2660                                         .attrTween("d", tweenPie);
2661                             }
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);
2665                             }
2666                             if (angular.isDefined(selectedSlider) && remainingBandwidth > 0) {
2667
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);
2672                             }
2673                             function tweenPie(b) {
2674                                 var i = d3.interpolate({
2675                                     startAngle: 2.1 * Math.PI,
2676                                     endAngle: 2.1 * Math.PI
2677                                 }, b);
2678                                 return function(t) {
2679                                     return arc(i(t));
2680                                 };
2681                             }
2682
2683                         };
2684
2685
2686                     }
2687                 };
2688             }]);
2689 angular.module('att.charts.stackedBarchart', ['att.charts.utilities'])
2690         .constant("stackBarChartConfig",
2691                 {
2692                     "chartcolor": ["#B2B2B2", "#00CC00"],
2693                     "gridLineColor": "#CCCCCC",
2694                     "yAxisMaxTicks": 4,
2695                     "chartHeight": "200",
2696                     "chartOpacity": 0.3,
2697                     "amountKDivision": 1000,
2698                     "amountKText": "K",
2699                     "amountMDivision": 1000000,
2700                     "amountMText": "M",
2701                     "yearLabelPos": {"x": 10, "y": 15},
2702                     "tooltipTopMargin": 110,
2703                     "tooltipLeftMargin": 54,
2704                     "margin": {
2705                         top: 20,
2706                         right: 80,
2707                         bottom: 30,
2708                         left: 52
2709                     }
2710                 })
2711         .directive('stackedBarChart', ['stackBarChartConfig', '$extendObj', '$timeout', function (stackBarChartConfig, $extendObj, $timeout) {
2712                 return {
2713                     restrict: 'A',
2714                     scope: {
2715                         chartData: '=',
2716                         legendRequired: "=",
2717                         refreshChart: "=",
2718                         chartConfig: "="
2719                     },
2720                     templateUrl: "template/stackedBarchart/stackedBarchart.html",
2721                     replace: true,
2722                     controller: ['$scope', '$attrs', function ($scope, $attrs) {
2723                             if (angular.isDefined($scope.chartConfig)) {
2724                                 stackBarChartConfig = $extendObj.extendDeep(stackBarChartConfig, $scope.chartConfig);
2725                             }
2726                             $scope.chartID = $attrs.id;
2727                             $scope.legendColors = stackBarChartConfig.chartcolor;
2728                             $scope.addLegendColor = function (id) {
2729                                 var bgColor = null;
2730                                 bgColor = {"background-color": $scope.legendColors[id]};
2731                                 return bgColor;
2732                             };
2733                         }],
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),
2739                                 padding = 20,
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;
2746                             }
2747                             else {
2748                                 scope.showLegend = false;
2749                             }
2750                         });
2751                         scope.$watch('refreshChart', function (value) {
2752                             if (value === false) {
2753                                 return;
2754                             }
2755
2756                             if (angular.isDefined(scope.chartConfig)) {
2757                                 stackBarChartConfig = $extendObj.extendDeep(stackBarChartConfig, scope.chartConfig);
2758                             }
2759
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;
2765                                 return;
2766                             }
2767
2768                             var xMonth = [], yDomainData = [], yAxisData = [], yValue = [], tempData = [], tooltipData = {}, yearArr = {}, isSingleMonth = false;
2769
2770                             //X-Axis Range
2771                             var xRange = d3.time.scale().range([padding, width - padding * 2]);
2772
2773                             //Y-Axis Range
2774                             var yRange = d3.scale.linear().range([height - padding, padding]);
2775
2776                             dataObj = scope.chartData;
2777
2778                             dataObj.forEach(function (data) {
2779                                 var obj = data.values;
2780                                 xAxisTicks = obj.length;
2781                                 if (obj.length == 1) {
2782                                     isSingleMonth = true;
2783                                 }
2784                                 obj.forEach(function (d) {
2785                                     var tmp = "01-" + d.month;
2786                                     d.numericMonth = parseDate(tmp);
2787                                     yValue.push({'value': +d.value});
2788                                     d.value = +d.value;
2789                                     xMonth.push({'numericMonth': d.numericMonth});
2790                                 });
2791                             });
2792
2793                             //ToolTip Data
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});
2801                                 }
2802                             }
2803
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];
2809                                 if (!(tempObj)) {
2810                                     tempObj = [];
2811                                     tooltipData[tempData[k].month] = tempObj;
2812                                     tooltipData[tempData[k].month]['seriesPer'] = seriesPer;
2813                                 }
2814                                 tempObj.push({seriesName: seriesName, seriesVal: seriesVal});
2815                             }
2816
2817                             //X-Axis Domain
2818                             xRange.domain(d3.extent(xMonth, function (d) {
2819                                 return d.numericMonth;
2820                             }));
2821
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});
2826                             }
2827
2828                             //Y-Axis Domain
2829                             yRange.domain([0, d3.max(yDomainData, function (d) {
2830                                     return (d.yAxisVal);
2831                                 })]);
2832
2833                             var yTick = d3.max(yDomainData, function (d) {
2834                                 return d.yAxisVal;
2835                             });
2836
2837                             yTick = yTick / stackBarChartConfig.yAxisMaxTicks;
2838                             for (var x = 0; x <= stackBarChartConfig.yAxisMaxTicks; x++) {
2839                                 yAxisData.push(yTick * x);
2840                             }
2841
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;
2847                                 } else {
2848                                     return d;
2849                                 }
2850                             };
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);
2853
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);
2856
2857
2858                             //Calculate values for Stack
2859                             var stack = d3.layout.stack()
2860                                     .values(function (d) {
2861                                         return d.values;
2862                                     })
2863                                     .x(function (d) {
2864                                         return d.numericMonth;
2865                                     })
2866                                     .y(function (d) {
2867                                         return d.value;
2868                                     });
2869
2870                             //Plot Chart
2871                             var drawBarChart = d3.select("#stackBarChartContainer")
2872                                     .append("svg")
2873                                     .attr("id", attrs.id)
2874                                     .data(dataObj)
2875                                     .attr("width", width + margin.left + margin.right)
2876                                     .attr("height", parseInt(height, 10) + parseInt(margin.top, 10) + parseInt(margin.bottom, 10))
2877                                     .append("g")
2878                                     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
2879
2880                             //Draw X Axis
2881                             drawBarChart.append("g")
2882                                     .attr("class", "x axis")
2883                                     .attr("transform", "translate(0," + (height - padding) + ")")
2884                                     .call(xAxis);
2885
2886                             if (isSingleMonth) {
2887                                 drawBarChart.select(".x").select(".tick").attr("transform", "translate(" + (isSingleMonth === true) * (width / 2 + 20) + ",0)");
2888                             }
2889
2890                             //Draw Y Grid Lines
2891                             var yGrid = drawBarChart.append("g")
2892                                     .attr("class", "grid").attr("id", "stackBarYGrid")
2893                                     .attr("transform", "translate(0,0)")
2894                                     .call(yAxisGrid);
2895                             yGrid.selectAll("line").style("stroke", stackBarChartConfig.gridLineColor);
2896                             yGrid.selectAll("text").remove();
2897
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);
2904                             })
2905                                     .attr("transform", "translate(" + (isSingleMonth === true) * width / 2 + ",0)");
2906
2907                             barGroup.append("title").text(function (d) {
2908                                 return d.series;
2909                             });
2910
2911                             var bars = barGroup.selectAll("rect")
2912                                     .data(function (d) {
2913                                         return d.values;
2914                                     })
2915                                     .enter().append("rect")
2916                                     .attr("class", "bar")
2917                                     .attr("x", function (d) {
2918                                         return (xRange(d.numericMonth) - 10);
2919                                     })
2920                                     .attr("y", function (d) {
2921                                         return yRange(d.value);
2922                                     })
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");
2937                                 scope.$apply();
2938                             });
2939
2940                             bars.append('desc').append('title').text(function (d) {
2941                                 var nvdaObj = tooltipData[d.month];
2942                                 return (addTitle(nvdaObj, d));
2943                             });
2944
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");
2949                             }
2950
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)")
2955                                     .call(xAxisGrid);
2956
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);
2960                                     });
2961
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++) {
2965                                 var tmpObj = [];
2966
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;
2970                                 }
2971                             }
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)")
2977                                         .call(yAxis);
2978
2979                                 yAxisNodes.selectAll("text").attr('class', 'ticktext');
2980
2981                                 //Append Year Label
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");
2987                                 yAxisIdx++;
2988                             }
2989
2990                             function yAxisId(yAxisIdx) {
2991                                 return ("yAxis" + yAxisIdx);
2992                             }
2993
2994                             //function to select first element
2995                             d3.selection.prototype.first = function () {
2996                                 return d3.select(this[0][0]);
2997                             };
2998
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();
3003
3004                             //Add title for NVDA screen reader
3005                             function addTitle(nvdaObj, d) {
3006                                 var temp = "";
3007                                 for (var y = 0; y < nvdaObj.length; y++) {
3008                                     temp = temp + nvdaObj[y].seriesName + nvdaObj[y].seriesVal;
3009                                 }
3010                                 return (tooltipFormat(d.numericMonth) + "--" + temp + "Retainibility Percentage" + nvdaObj.seriesPer);
3011                             }
3012
3013                             //MouseOver Event
3014                             function mouseOver(d, offsetX, offsetY) {
3015                                 for (var key in tooltipData) {
3016                                     if (key == d.month) {
3017                                         scope.stackDataPoint = tooltipData[key];
3018                                         break;
3019                                     }
3020                                 }
3021                                 scope.monthPoint = {"xData": tooltipFormat(d.numericMonth).replace('-', ' ')};
3022                                 scope.$apply();
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);
3029                                     } else {
3030                                         offsetX = offsetX - (tooltipWidth / 2) + stackBarChartConfig.tooltipLeftMargin;
3031                                     }
3032                                     scope.tooltipStyle = {"left": offsetX + "px", "top": offsetY + "px"};
3033                                     scope.tooltipFlag = true;
3034                                 }, 0);
3035                             }
3036
3037                             //Show Grid Line on Over
3038                             function show_tooltip_grid_line(offsetX, attr) {
3039                                 var dataLength;
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);
3045                                     }
3046                                 }
3047                             }
3048
3049                             //Hide Grid Line
3050                             function hide_tooltip_grid_line(offsetX, attr) {
3051                                 var dataLength;
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");
3057                                     }
3058                                 }
3059                             }
3060                             scope.refreshChart = false;
3061                         });
3062                     }
3063                 };
3064             }])
3065         .filter('filterInput', function () {
3066             return function (input) {
3067                 return input.replace(/ +/g, "").toLowerCase();
3068             };
3069         });
3070 angular.module('att.charts.stackedareachart', ['att.charts.utilities'])
3071         .constant("stackChartConfig",
3072                 {
3073                     "chartcolor": ["#9966FF", "#E68A2E", "#4DDB4D"],
3074                     "gridLineColor": "#808080",
3075                     "lineCurveType": 'linear',
3076                     "yAxisMaxTicks": 4,
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,
3085                     "margin": {
3086                         top: 30,
3087                         right: 80,
3088                         bottom: 30,
3089                         left: 52
3090                     }
3091                 })
3092         .directive('stackedAreaChart', ['stackChartConfig','$extendObj','$timeout', function (stackChartConfig,$extendObj,$timeout) {
3093                 return {
3094                     restrict: 'A',
3095                     scope: {
3096                         chartData: '=',
3097                         legendRequired: "=",
3098                         refreshChart: "=",
3099                         chartConfig: "="
3100                     },
3101                     templateUrl: "template/stackedareachart/stackedAreaChart.html",
3102                     replace: true,
3103                     controller: ['$scope', '$attrs', function ($scope, $attrs) {
3104                             var extendDeep = function extendDeep(dst) {
3105                               angular.forEach(arguments, function(obj) {
3106                                 if (obj !== dst) {
3107                                   angular.forEach(obj, function(value, key) {
3108                                     if (dst[key] && dst[key].constructor && dst[key].constructor === Object) {
3109                                       extendDeep(dst[key], value);
3110                                     } else {
3111                                       dst[key] = value;
3112                                     }
3113                                   });
3114                                 }
3115                               });
3116                               return dst;
3117                             };
3118                             if (angular.isDefined($scope.chartConfig)) {
3119                                 stackChartConfig = $extendObj.extendDeep(stackChartConfig, $scope.chartConfig);
3120                             }
3121                             $scope.chartID = $attrs.id;
3122                             $scope.legendColors = stackChartConfig.chartcolor;
3123                             $scope.legendTooltipColors = angular.copy(stackChartConfig.chartcolor).reverse();
3124                             $scope.addLegendColor = function (id) {
3125                                 var bgColor = null;
3126                                 switch (id) {
3127                                     case 0:
3128                                         bgColor = {"background-color": $scope.legendColors[id], "border-radius": "100%"};
3129                                         break;
3130                                     case 1:
3131                                         bgColor = {"background-color": $scope.legendColors[id]};
3132                                         break;
3133                                     case 2:
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]};
3135                                         break;
3136                                 }
3137                                 return bgColor;
3138                             };
3139                             $scope.addToolTipLegendColor = function (id) {
3140                                 var bgColor = null;
3141                                 switch (id) {
3142                                     case 2:
3143                                         bgColor = {"background-color": $scope.legendTooltipColors[id], "border-radius": "100%"};
3144                                         break;
3145                                     case 1:
3146                                         bgColor = {"background-color": $scope.legendTooltipColors[id]};
3147                                         break;
3148                                     case 0:
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]};
3150                                         break;
3151                                 }
3152                                 return bgColor;
3153                             };
3154                         }],
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;
3166                             }
3167                             else {
3168                                 scope.showLegend = false;
3169                             }
3170                         });
3171                         scope.$watch('refreshChart', function (value) {
3172                             if (value === false) {
3173                                 return;
3174                             }
3175                             if (angular.isDefined(scope.chartConfig)) {
3176                                 stackChartConfig = $extendObj.extendDeep(stackChartConfig, scope.chartConfig);
3177                             }
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;
3183                                 return;
3184                             }
3185
3186                             var xMonth = [], yValue = [], tempData = [], tooltipData = {}, yearArr = {}, yearLabel = '', isSingleMonth = false, singleMonthName, currencyFormat = 'K';
3187
3188                             //X-Axis Range
3189                             var xRange = d3.time.scale()
3190                                     .range([0, width]);
3191
3192                             //Y-Axis Range
3193                             var yRange = d3.scale.linear()
3194                                     .range([height, 0]);
3195
3196                             dataObj = scope.chartData;
3197
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});
3208                                 });
3209                             }
3210
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});
3218                                     d.value = +d.value;
3219                                     xMonth.push({'numericMonth': d.numericMonth});
3220                                     if (d.value > stackChartConfig.yAxisUnitRange) {
3221                                         currencyFormat = 'M';
3222                                     }
3223                                 });
3224                             });
3225
3226                             //ToolTip Data
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});
3233                                 }
3234                             }
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];
3239                                 if (!(tempObj)) {
3240                                     tempObj = [];
3241                                     tooltipData[tempData[k].month] = tempObj;
3242                                 }
3243                                 tempObj.push({seriesName: seriesName, seriesVal: seriesVal});
3244                             }
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;
3252                                 }
3253                             }
3254                             var yDomainData = [],yAxisData = [],yTicksData = [];
3255                             for (var month in tooltipData) {
3256                                 yDomainData.push({"total": tooltipData[month].total});
3257                             }
3258
3259                             //Format yAxis Labels
3260                             var formatCurrency = function (d) {
3261                                 if (currencyFormat === 'M') {
3262                                     return "$" + d / 1000000 + "M";
3263                                 } else {
3264                                     return "$" + d / 1000 + "K";
3265                                 }
3266                             };
3267
3268                             //X-Axis Domain
3269                             xRange.domain(d3.extent(xMonth, function (d) {
3270                                 return d.numericMonth;
3271                             }));
3272
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});
3277                             }
3278
3279                             //Y-Axis Domain
3280                             yRange.domain([0, d3.max(yAxisData, function (d) {
3281                                     return (d.yAxisVal);
3282                                 })]);
3283
3284                             var yTick = d3.max(yAxisData, function (d) {
3285                                 return d.yAxisVal;
3286                             });
3287
3288                             yTick = yTick / stackChartConfig.yAxisMaxTicks;
3289                             for (var c = 0; c <= stackChartConfig.yAxisMaxTicks; c++) {
3290                                 yTicksData.push(yTick * c);
3291                             }
3292
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);
3296
3297                             //Calculate values for Stack
3298                             var stack = d3.layout.stack()
3299                                     .values(function (d) {
3300                                         return d.values;
3301                                     })
3302                                     .x(function (d) {
3303                                         return d.numericMonth;
3304                                     })
3305                                     .y(function (d) {
3306                                         return d.value;
3307                                     });
3308
3309                             //Draw Area
3310                             var area = d3.svg.area()
3311                                     .x(function (d) {
3312                                         return xRange(d.numericMonth);
3313                                     })
3314                                     .y0(function (d) {
3315                                         return yRange(d.y0);
3316                                     })
3317                                     .y1(function (d) {
3318                                         return yRange(d.y0 + d.y);
3319                                     }).interpolate(stackChartConfig.lineCurveType);
3320
3321                             //Plot Chart
3322                             var drawChart = d3.select("#stackChartContainer")
3323                                     .append("svg")
3324                                     .attr("id", attrs.id)
3325                                     .data(dataObj)
3326                                     .attr("width", width + margin.left + margin.right)
3327                                     .attr("height", parseInt(height, 10) + parseInt(margin.top, 10) + parseInt(margin.bottom, 10))
3328                                     .append("g")
3329                                     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
3330
3331                             //Draw X Axis
3332                             drawChart.append("g")
3333                                     .attr("class", "x axis")
3334                                     .attr("transform", "translate(0," + height + ")")
3335                                     .call(xAxis);
3336
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) {
3348                                         return d.series;
3349                                     });
3350
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++) {
3354                                 var tmpObj = [];
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;
3358                                 }
3359                             }
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)")
3365                                         .call(yAxis);
3366
3367                                 yAxisNodes.selectAll("text").attr('class', 'ticktext');
3368                                 //Append Year Label
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");
3374                                 yAxisIdx++;
3375                             }
3376
3377                             //Remove next year Y axis in case of single Month selection
3378                             if (isSingleMonth) {
3379                                 d3.select("#yAxisId1").remove();
3380                             }
3381
3382                             function yAxisId(yAxisIdx) {
3383                                 return ("yAxisId" + yAxisIdx);
3384                             }
3385
3386                             //function to select first element
3387                             d3.selection.prototype.first = function () {
3388                                 return d3.select(this[0][0]);
3389                             };
3390
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();
3395
3396                             if (isSingleMonth) {
3397                                 drawChart.selectAll('.x.axis').selectAll('.tick').selectAll('text')[1][0].textContent = singleMonthName;
3398                             }
3399
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) {
3404                                     idx = 0;
3405                                 }
3406                                 var shape = stackChartConfig.shapes[idx], shapeToAppend;
3407                                 if (shape == 'rect' || shape == 'triangle') {
3408                                     shapeToAppend = 'polygon';
3409                                 }
3410                                 else {
3411                                     shapeToAppend = 'circle';
3412                                 }
3413
3414                                 var newDataObj;
3415                                 if (isSingleMonth) {
3416                                     newDataObj = dataObj[x].values.slice(0, 1);
3417                                 } else {
3418                                     newDataObj = dataObj[x].values;
3419                                 }
3420
3421                                 var dataPoints = drawChart.select('#pathId' + x).selectAll(shapeToAppend)
3422                                         .data(newDataObj)
3423                                         .enter()
3424                                         .append(shapeToAppend)
3425                                         .attr('class', shape);
3426                                 drawShapes(shape, dataPoints);
3427                                 idx++;
3428                             }
3429
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]);
3434                             }
3435
3436                             //function to draw multiple shapes for Data Points
3437                             function drawShapes(shape, dataPoints) {
3438                                 switch (shape) {
3439                                     case 'circle':
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;
3458                                             scope.$apply();
3459                                         });
3460                                         circle.append('desc').append('title').text(function (d) {
3461                                             var nvdaObj = tooltipData[d.month];
3462                                             return (addTitle(nvdaObj, d));
3463                                         });
3464                                         break;
3465                                     case 'rect':
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);
3472                                             var y1 = y;
3473                                             var x2 = x1;
3474                                             var y2 = parseInt((y1 + stackChartConfig.shapeSize[1]), 10);
3475                                             var x3 = x;
3476                                             var y3 = y2;
3477                                             var tmp = x2 + "," + y2 + " " + x3 + "," + y3 + " " + x + "," + y + " " + x1 + "," + y1;
3478                                             return tmp;
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;
3497                                             scope.$apply();
3498                                         });
3499                                         rect.append('desc').append('title').text(function (d) {
3500                                             var nvdaObj = tooltipData[d.month];
3501                                             return (addTitle(nvdaObj, d));
3502                                         });
3503                                         break;
3504                                     case 'triangle':
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);
3511                                             var y2 = y1;
3512                                             var tmp = x1 + "," + y1 + " " + x + "," + y + " " + x2 + "," + y2;
3513                                             return tmp;
3514                                         }).attr("transform", function (d) {
3515                                             var x = parseInt(xRange(d.numericMonth), 10);
3516                                             var y = parseInt(yRange(d.y + d.y0), 10);
3517                                             y = y - 2;
3518                                             var tmp = "rotate(180," + x + "," + y + ")";
3519                                             return tmp;
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;
3538                                             scope.$apply();
3539                                         });
3540                                         triangle.append('desc').append('title').text(function (d) {
3541                                             var nvdaObj = tooltipData[d.month];
3542                                             return (addTitle(nvdaObj, d));
3543                                         });
3544                                         break;
3545                                 }
3546                             }
3547
3548                             //Draw Grid Lines
3549                             drawChart.append("g")
3550                                     .attr("class", "grid")
3551                                     .attr("id", "yStackGrid")
3552                                     .attr("transform", "translate(0,0)")
3553                                     .call(yAxisGrid)
3554                                     .selectAll("text").remove();
3555
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)")
3561                                     .call(make_x_axis()
3562                                             .tickSize(-height, 0)
3563                                             .tickFormat(""));
3564
3565                             // function for the x grid lines
3566                             function make_x_axis() {
3567                                 return d3.svg.axis()
3568                                         .scale(xRange)
3569                                         .orient("top")
3570                                         .tickFormat(d3.time.format('%b')).ticks(d3.time.months);
3571                             }
3572
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);
3577                                     });
3578                             //Add title for NVDA screen reader
3579                             function addTitle(nvdaObj, d) {
3580                                 var temp = "";
3581                                 for (var y = 0; y < nvdaObj.length; y++) {
3582                                     temp = temp + nvdaObj[y].seriesName + nvdaObj[y].seriesVal;
3583                                 }
3584                                 return (tooltipFormat(d.numericMonth) + "--" + temp + "Total Charges" + nvdaObj.total);
3585                             }
3586
3587                             //Show Grid Lines on Mouse Hover
3588                             function show_tooltip_grid_line(offsetX, shape, attr) {
3589                                 try {
3590                                     var dataLength;
3591                                     if (isSingleMonth) {
3592                                         dataLength = 1;
3593                                     } else {
3594                                         dataLength = scope.chartData[0].values.length;
3595                                     }
3596
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);
3601                                         }
3602                                     }
3603                                 } catch (e) {
3604                                 }
3605                             }
3606
3607                             //Hide grid Lines
3608                             function hide_tooltip_grid_line(offsetX, shape, attr) {
3609                                 try {
3610                                     var dataLength;
3611                                     if (isSingleMonth) {
3612                                         dataLength = 1;
3613                                     } else {
3614                                         dataLength = scope.chartData[0].values.length;
3615                                     }
3616
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");
3621                                         }
3622                                     }
3623                                 } catch (e) {
3624                                 }
3625                             }
3626
3627                             //MouseOver Event
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();
3633                                         break;
3634                                     }
3635                                 }
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;
3640                                 }
3641                                 scope.total = monthTotalVal;
3642                                 scope.stackDataPoint.total = monthTotalVal;
3643
3644                                 scope.monthPoint = {"xData": tooltipFormat(d.numericMonth).replace('-', ' ')};
3645                                 scope.$apply();
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);
3652                                 } else {
3653                                     offsetX = offsetX - (tooltipWidth/2) + stackChartConfig.tooltipLeftMargin;
3654                                 }
3655                                 scope.tooltipStyle = {"left": offsetX + "px", "top": offsetY + "px"};
3656                                 scope.tooltipFlag = true;
3657                                 },0);
3658
3659
3660
3661
3662                             }
3663                             //fix for removing upper text if it is below to year label
3664 //                            try {
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];
3668 //                                if (val < 20) {
3669 //                                    drawChart.selectAll('#yAxisId0').selectAll('text')[0][lastTickPostion - 1].remove();
3670 //                                    drawChart.select("#yStackGrid").selectAll('.tick')[0][lastGridPos].remove();
3671 //                                }
3672 //                            } catch (e) {
3673 //                            }
3674                             scope.refreshChart = false;
3675                         });
3676                     }
3677                 };
3678             }])
3679         .filter('filterInput', function () {
3680             return function (input) {
3681                 return input.replace(/ +/g, "").toLowerCase();
3682             };
3683         });
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" +
3690     "        </li>\n" +
3691     "    </ul>\n" +
3692     "    <div id=\"areaChartContainer\">\n" +
3693     "    </div>\n" +
3694     "    <div ng-class=\"{'tooltip--on': tooltipFlag,'tooltip': !tooltipFlag}\" ng-style=\"tooltipStyle\">\n" +
3695     "        <span class=\"title\">{{dataPoint.xData}}</span>\n" +
3696     "        <p>\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" +
3699     "        </p>\n" +
3700     "        <div style=\"clear:both\"></div>          \n" +
3701     "        <p>\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" +
3704     "        </p>\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" +
3709     "        </p>\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" +
3714     "        </p>\n" +
3715     "        <div style=\"clear:both\"></div>\n" +
3716     "        <span class=\"tooltipArrow\"></span>\n" +
3717     "    </div>\n" +
3718     "</div>");
3719 }]);
3720
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" +
3730     "        </span>\n" +
3731     "    </div>\n" +
3732     "</div>");
3733 }]);
3734
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" +
3739     "        <ul>\n" +
3740     "            <li ng-style=\"addLegendColor()\">\n" +
3741     "                <div>\n" +
3742     "                    <span class=\"LegendLabel\">{{LegendLabel}}</span> <span class=\"LegendCategory\">{{LegendCategory}}</span> <span class=\"legendItemValue\">({{cosval}})</span>\n" +
3743     "                </div>\n" +
3744     "            </li>\n" +
3745     "        </ul>\n" +
3746     "    </div>\n" +
3747     "    <div id={{chartID}} class=\"cosd3Container\"></div>\n" +
3748     "    <div class=\"chartLegend\" ng-if=\"legendPosition == 'bottom' && legendRequired\">\n" +
3749     "        <ul>\n" +
3750     "            <li ng-style=\"addLegendColor()\">\n" +
3751     "                <div>\n" +
3752     "                    <span class=\"LegendLabel\">{{LegendLabel}}</span> <span class=\"LegendCategory\">{{LegendCategory}}</span> <span class=\"legendItemValue\">({{cosval}})</span>\n" +
3753     "                </div>\n" +
3754     "            </li>\n" +
3755     "        </ul>\n" +
3756     "    </div>\n" +
3757     "</div>");
3758 }]);
3759
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" +
3765     "</div>");
3766 }]);
3767
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" +
3772     "        <ul>\n" +
3773     "          <li ng-repeat=\"item in chartData\" ng-style=\"addLegendColor($index,item)\" chart-legend-id=\"{{item.name}}\">\n" +
3774     "                <div>\n" +
3775     "                    <span class=\"LegendLabel\">{{item.name}}</span> <span class=\"LegendCategory\">{{item.category}}</span> <span class=\"legendItemValue\">({{item.value}}%)</span>\n" +
3776     "                </div>\n" +
3777     "            </li>\n" +
3778     "        </ul>\n" +
3779     "    </div>\n" +
3780     "    <div id={{chartID}} class=\"cosmultid3Container\"></div>\n" +
3781     "    <div class=\"chartLegend\" ng-if=\"legendPosition == 'bottom' && legendRequired\">\n" +
3782     "        <ul>\n" +
3783     "            <li ng-repeat=\"item in chartData\" ng-style=\"addLegendColor($index,item)\" chart-legend-id=\"{{item.name}}\">\n" +
3784     "                <div>\n" +
3785     "                    <span class=\"LegendLabel\">{{item.name}}</span> <span class=\"LegendCategory\">{{item.category}}</span> <span class=\"legendItemValue\">({{item.value}}%)</span>\n" +
3786     "                </div>\n" +
3787     "            </li>\n" +
3788     "        </ul>\n" +
3789     "    </div>\n" +
3790     "</div>");
3791 }]);
3792
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" +
3798     "        <ul>\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" +
3802     "                </div>\n" +
3803     "            </li>\n" +
3804     "        </ul>\n" +
3805     "    </div>\n" +
3806     "    <div style=\"clear: both;\"></div>\n" +
3807     "</div>");
3808 }]);
3809
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" +
3815     "        <ul>\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" +
3819     "                </div>\n" +
3820     "            </li>\n" +
3821     "        </ul>\n" +
3822     "    </div>\n" +
3823     "    <div style=\"clear: both;\">\n" +
3824     "    </div>\n" +
3825     "</div>    ");
3826 }]);
3827
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" +
3832     "        <ul>\n" +
3833     "            <li ng-style=\"addLegendColor()\">\n" +
3834     "                <div>\n" +
3835     "                    <span class=\"LegendLabel\">{{LegendLabel}}</span> <span class=\"LegendCategory\">{{LegendCategory}}</span> <span class=\"legendItemValue\">({{guageVal}})</span>\n" +
3836     "                </div>\n" +
3837     "            </li>\n" +
3838     "        </ul>\n" +
3839     "    </div>\n" +
3840     "    <div class=\"horseshoed3Container\"></div>\n" +
3841     "    <div class=\"chartLegend\" ng-if=\"legendPosition == 'bottom' && legendRequired\">\n" +
3842     "        <ul>\n" +
3843     "            <li ng-style=\"addLegendColor()\">\n" +
3844     "                <div>\n" +
3845     "                    <span class=\"LegendLabel\">{{LegendLabel}}</span> <span class=\"LegendCategory\">{{LegendCategory}}</span> <span class=\"legendItemValue\">({{guageVal}})</span>\n" +
3846     "                </div>\n" +
3847     "            </li>\n" +
3848     "        </ul>\n" +
3849     "    </div>\n" +
3850     "</div>");
3851 }]);
3852
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" +
3859     "        </li>\n" +
3860     "    </ul>\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" +
3865     "            <p>\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" +
3868     "            </p> \n" +
3869     "\n" +
3870     "            <div style=\"clear:both\"></div>\n" +
3871     "        </div>\n" +
3872     "        <p>\n" +
3873     "            <span class=\"alignLeft\"><i class=\"legend-icon-stackedchart\"></i>Retainability percentage</span>\n" +
3874     "            <span class=\"alignRight\">{{stackDataPoint.seriesPer}}</span>\n" +
3875     "\n" +
3876     "        </p>\n" +
3877     "        <div style=\"clear:both\"></div>\n" +
3878     "        <span class=\"tooltipArrow\"></span>\n" +
3879     "    </div>\n" +
3880     "</div>");
3881 }]);
3882
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" +
3889     "        </li>\n" +
3890     "    </ul>\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" +
3895     "            <p>\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" +
3898     "            </p>\n" +
3899     "            <div style=\"clear:both\"></div>  \n" +
3900     "        </div>\n" +
3901     "        <p>\n" +
3902     "            <span class=\"alignLeft\">Total charges</span>\n" +
3903     "            <span class=\"alignRight\">{{stackDataPoint.total| currency}}</span>\n" +
3904     "        </p>\n" +
3905     "        <div style=\"clear:both\"></div>\n" +
3906     "        <span class=\"tooltipArrow\"></span>\n" +
3907     "    </div>\n" +
3908     "</div>");
3909 }]);