ecomp-sdk-app/src/main/webapp/static/fusion/raptor/d3/js/models/pie.js.bak

   1 nv.models.pie = function() {
   2   "use strict";
   3   //============================================================
   4   // Public Variables with Default Settings
   5   //------------------------------------------------------------
   6
   7   var margin = {top: 0, right: 0, bottom: 0, left: 0}
   8     , width = 500
   9     , height = 500
  10     , getX = function(d) { return d.x }
  11     , getY = function(d) { return d.y }
  12     , getDescription = function(d) { return d.description }
  13     , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
  14     , color = nv.utils.defaultColor()
  15     , valueFormat = d3.format(',.2f')
  16     , showLabels = true
  17     , pieLabelsOutside = true
  18     , donutLabelsOutside = false
  19     , labelType = "key"
  20     , labelThreshold = .02 //if slice percentage is under this, don't show label
  21     , donut = false
  22     , labelSunbeamLayout = false
  23     , startAngle = false
  24     , endAngle = false
  25     , donutRatio = 0.5
  26     , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
  27     ;
  28
  29   //============================================================
  30
  31
  32   function chart(selection) {
  33     selection.each(function(data) {
  34       var availableWidth = width - margin.left - margin.right,
  35           availableHeight = height - margin.top - margin.bottom,
  36           radius = Math.min(availableWidth, availableHeight) / 2,
  37           arcRadius = radius-(radius / 5),
  38           container = d3.select(this);
  39
  40
  41       //------------------------------------------------------------
  42       // Setup containers and skeleton of chart
  43
  44       //var wrap = container.selectAll('.nv-wrap.nv-pie').data([data]);
  45       var wrap = container.selectAll('.nv-wrap.nv-pie').data(data);
  46       var wrapEnter = wrap.enter().append('g').attr('class','nvd3 nv-wrap nv-pie nv-chart-' + id);
  47       var gEnter = wrapEnter.append('g');
  48       var g = wrap.select('g');
  49
  50       gEnter.append('g').attr('class', 'nv-pie');
  51
  52       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  53       g.select('.nv-pie').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');
  54
  55       //------------------------------------------------------------
  56
  57
  58       container
  59           .on('click', function(d,i) {
  60               dispatch.chartClick({
  61                   data: d,
  62                   index: i,
  63                   pos: d3.event,
  64                   id: id
  65               });
  66           });
  67
  68
  69       var arc = d3.svg.arc()
  70                   .outerRadius(arcRadius);
  71
  72       if (startAngle) arc.startAngle(startAngle)
  73       if (endAngle) arc.endAngle(endAngle);
  74       if (donut) arc.innerRadius(radius * donutRatio);
  75
  76       // Setup the Pie chart and choose the data element
  77       var pie = d3.layout.pie()
  78           .sort(null)
  79           .value(function(d) { return d.disabled ? 0 : getY(d) });
  80
  81       var slices = wrap.select('.nv-pie').selectAll('.nv-slice')
  82           .data(pie);
  83
  84       slices.exit().remove();
  85
  86       var ae = slices.enter().append('g')
  87               .attr('class', 'nv-slice')
  88               .on('mouseover', function(d,i){
  89                 d3.select(this).classed('hover', true);
  90                 dispatch.elementMouseover({
  91                     label: getX(d.data),
  92                     value: getY(d.data),
  93                     point: d.data,
  94                     pointIndex: i,
  95                     pos: [d3.event.pageX, d3.event.pageY],
  96                     id: id
  97                 });
  98               })
  99               .on('mouseout', function(d,i){
 100                 d3.select(this).classed('hover', false);
 101                 dispatch.elementMouseout({
 102                     label: getX(d.data),
 103                     value: getY(d.data),
 104                     point: d.data,
 105                     index: i,
 106                     id: id
 107                 });
 108               })
 109               .on('click', function(d,i) {
 110                 dispatch.elementClick({
 111                     label: getX(d.data),
 112                     value: getY(d.data),
 113                     point: d.data,
 114                     index: i,
 115                     pos: d3.event,
 116                     id: id
 117                 });
 118                 d3.event.stopPropagation();
 119               })
 120               .on('dblclick', function(d,i) {
 121                 dispatch.elementDblClick({
 122                     label: getX(d.data),
 123                     value: getY(d.data),
 124                     point: d.data,
 125                     index: i,
 126                     pos: d3.event,
 127                     id: id
 128                 });
 129                 d3.event.stopPropagation();
 130               });
 131
 132         slices
 133             .attr('fill', function(d,i) { return color(d, i); })
 134             .attr('stroke', function(d,i) { return color(d, i); });
 135
 136         var paths = ae.append('path')
 137             .each(function(d) { this._current = d; });
 138             //.attr('d', arc);
 139
 140         d3.transition(slices.select('path'))
 141             .attr('d', arc)
 142             .attrTween('d', arcTween);
 143
 144         if (showLabels) {
 145           // This does the normal label
 146           var labelsArc = d3.svg.arc().innerRadius(0);
 147
 148           if (pieLabelsOutside){ labelsArc = arc; }
 149
 150           if (donutLabelsOutside) { labelsArc = d3.svg.arc().outerRadius(arc.outerRadius()); }
 151
 152           ae.append("g").classed("nv-label", true)
 153             .each(function(d, i) {
 154               var group = d3.select(this);
 155
 156               group
 157                 .attr('transform', function(d) {
 158                      if (labelSunbeamLayout) {
 159                        d.outerRadius = arcRadius + 10; // Set Outer Coordinate
 160                        d.innerRadius = arcRadius + 15; // Set Inner Coordinate
 161                        var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
 162                        if ((d.startAngle+d.endAngle)/2 < Math.PI) {
 163                          rotateAngle -= 90;
 164                        } else {
 165                          rotateAngle += 90;
 166                        }
 167                        return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')';
 168                      } else {
 169                        d.outerRadius = radius + 10; // Set Outer Coordinate
 170                        d.innerRadius = radius + 15; // Set Inner Coordinate
 171                        return 'translate(' + labelsArc.centroid(d) + ')'
 172                      }
 173                 });
 174
 175               group.append('rect')
 176                   .style('stroke', '#fff')
 177                   .style('fill', '#fff')
 178                   .attr("rx", 3)
 179                   .attr("ry", 3);
 180
 181               group.append('text')
 182                   .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
 183                   .style('fill', '#000')
 184
 185
 186           });
 187
 188           slices.select(".nv-label").transition()
 189             .attr('transform', function(d) {
 190                 if (labelSunbeamLayout) {
 191                   d.outerRadius = arcRadius + 10; // Set Outer Coordinate
 192                   d.innerRadius = arcRadius + 15; // Set Inner Coordinate
 193                   var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
 194                   if ((d.startAngle+d.endAngle)/2 < Math.PI) {
 195                     rotateAngle -= 90;
 196                   } else {
 197                     rotateAngle += 90;
 198                   }
 199                   return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')';
 200                 } else {
 201                   d.outerRadius = radius + 10; // Set Outer Coordinate
 202                   d.innerRadius = radius + 15; // Set Inner Coordinate
 203                   return 'translate(' + labelsArc.centroid(d) + ')'
 204                 }
 205             });
 206
 207           slices.each(function(d, i) {
 208             var slice = d3.select(this);
 209
 210             slice
 211               .select(".nv-label text")
 212                 .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
 213                 .text(function(d, i) {
 214                   var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
 215                                   return Math.round(percent*1001/10)+"%";
 216                   /*var labelTypes = {
 217                     "key" : getX(d.data),
 218                     "value": getY(d.data),
 219                     "percent": d3.format('%')(percent)
 220                   };
 221                   return (d.value && percent > labelThreshold) ? labelTypes[labelType] : '';
 222                                   */
 223                 });
 224
 225             var textBox = slice.select('text').node().getBBox();
 226             slice.select(".nv-label rect")
 227               .attr("width", textBox.width + 10)
 228               .attr("height", textBox.height + 10)
 229               .attr("transform", function() {
 230                 return "translate(" + [textBox.x - 5, textBox.y - 5] + ")";
 231               });
 232           });
 233         }
 234
 235
 236         // Computes the angle of an arc, converting from radians to degrees.
 237         function angle(d) {
 238           var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
 239           return a > 90 ? a - 180 : a;
 240         }
 241
 242         function arcTween(a) {
 243           a.endAngle = isNaN(a.endAngle) ? 0 : a.endAngle;
 244           a.startAngle = isNaN(a.startAngle) ? 0 : a.startAngle;
 245           if (!donut) a.innerRadius = 0;
 246           var i = d3.interpolate(this._current, a);
 247           this._current = i(0);
 248           return function(t) {
 249             return arc(i(t));
 250           };
 251         }
 252
 253         function tweenPie(b) {
 254           b.innerRadius = 0;
 255           var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
 256           return function(t) {
 257               return arc(i(t));
 258           };
 259         }
 260
 261     });
 262
 263     return chart;
 264   }
 265
 266
 267   //============================================================
 268   // Expose Public Variables
 269   //------------------------------------------------------------
 270
 271   chart.dispatch = dispatch;
 272   chart.options = nv.utils.optionsFunc.bind(chart);
 273
 274   chart.margin = function(_) {
 275     if (!arguments.length) return margin;
 276     margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
 277     margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
 278     margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
 279     margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
 280     return chart;
 281   };
 282
 283   chart.width = function(_) {
 284     if (!arguments.length) return width;
 285     width = _;
 286     return chart;
 287   };
 288
 289   chart.height = function(_) {
 290     if (!arguments.length) return height;
 291     height = _;
 292     return chart;
 293   };
 294
 295   chart.values = function(_) {
 296     nv.log("pie.values() is no longer supported.");
 297     return chart;
 298   };
 299
 300   chart.x = function(_) {
 301     if (!arguments.length) return getX;
 302     getX = _;
 303     return chart;
 304   };
 305
 306   chart.y = function(_) {
 307     if (!arguments.length) return getY;
 308     getY = d3.functor(_);
 309     return chart;
 310   };
 311
 312   chart.description = function(_) {
 313     if (!arguments.length) return getDescription;
 314     getDescription = _;
 315     return chart;
 316   };
 317
 318   chart.showLabels = function(_) {
 319     if (!arguments.length) return showLabels;
 320     showLabels = _;
 321     return chart;
 322   };
 323
 324   chart.labelSunbeamLayout = function(_) {
 325     if (!arguments.length) return labelSunbeamLayout;
 326     labelSunbeamLayout = _;
 327     return chart;
 328   };
 329
 330   chart.donutLabelsOutside = function(_) {
 331     if (!arguments.length) return donutLabelsOutside;
 332     donutLabelsOutside = _;
 333     return chart;
 334   };
 335
 336   chart.pieLabelsOutside = function(_) {
 337     if (!arguments.length) return pieLabelsOutside;
 338     pieLabelsOutside = _;
 339     return chart;
 340   };
 341
 342   chart.labelType = function(_) {
 343     if (!arguments.length) return labelType;
 344     labelType = _;
 345     labelType = labelType || "key";
 346     return chart;
 347   };
 348
 349   chart.donut = function(_) {
 350     if (!arguments.length) return donut;
 351     donut = _;
 352     return chart;
 353   };
 354
 355   chart.donutRatio = function(_) {
 356     if (!arguments.length) return donutRatio;
 357     donutRatio = _;
 358     return chart;
 359   };
 360
 361   chart.startAngle = function(_) {
 362     if (!arguments.length) return startAngle;
 363     startAngle = _;
 364     return chart;
 365   };
 366
 367   chart.endAngle = function(_) {
 368     if (!arguments.length) return endAngle;
 369     endAngle = _;
 370     return chart;
 371   };
 372
 373   chart.id = function(_) {
 374     if (!arguments.length) return id;
 375     id = _;
 376     return chart;
 377   };
 378
 379   chart.color = function(_) {
 380     if (!arguments.length) return color;
 381     color = nv.utils.getColor(_);
 382     return chart;
 383   };
 384
 385   chart.valueFormat = function(_) {
 386     if (!arguments.length) return valueFormat;
 387     valueFormat = _;
 388     return chart;
 389   };
 390
 391   chart.labelThreshold = function(_) {
 392     if (!arguments.length) return labelThreshold;
 393     labelThreshold = _;
 394     return chart;
 395   };
 396   //============================================================
 397
 398
 399   return chart;
 400 }