ecomp-sdk-app/src/main/webapp/static/fusion/d3/js/models/pieChart.js

   1 nv.models.pieChart = function() {
   2   "use strict";
   3   //============================================================
   4   // Public Variables with Default Settings
   5   //------------------------------------------------------------
   6
   7   var pie = nv.models.pie()
   8     , legend = nv.models.legend()
   9     ;
  10
  11   var margin = {top: 30, right: 20, bottom: 20, left: 20}
  12     , width = null
  13     , height = null
  14     , showLegend = true
  15     , color = nv.utils.defaultColor()
  16     , tooltips = false
  17     , tooltip = function(key, y, e, graph) {
  18         return '<h3>' + key + '</h3>' +
  19                '<p>' +  y + '</p>'
  20       }
  21     , state = {}
  22     , defaultState = null
  23     , noData = "No Data Available."
  24     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
  25     ;
  26
  27   //============================================================
  28
  29
  30   //============================================================
  31   // Private Variables
  32   //------------------------------------------------------------
  33
  34   var showTooltip = function(e, offsetElement) {
  35     var tooltipLabel = pie.description()(e.point) || pie.x()(e.point)
  36     var left = e.pos[0] + ( (offsetElement && offsetElement.offsetLeft) || 0 ),
  37         top = e.pos[1] + ( (offsetElement && offsetElement.offsetTop) || 0),
  38         y = pie.valueFormat()(pie.y()(e.point)),
  39         content = tooltip(tooltipLabel, y, e, chart);
  40
  41     nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
  42   };
  43
  44   //============================================================
  45
  46
  47   function chart(selection) {
  48     selection.each(function(data) {
  49       var container = d3.select(this),
  50           that = this;
  51
  52       var availableWidth = (width || parseInt(container.style('width')) || 960)
  53                              - margin.left - margin.right,
  54           availableHeight = (height || parseInt(container.style('height')) || 400)
  55                              - margin.top - margin.bottom;
  56
  57       chart.update = function() { container.transition().call(chart); };
  58       chart.container = this;
  59
  60       //set state.disabled
  61       state.disabled = data.map(function(d) { return !!d.disabled });
  62
  63       if (!defaultState) {
  64         var key;
  65         defaultState = {};
  66         for (key in state) {
  67           if (state[key] instanceof Array)
  68             defaultState[key] = state[key].slice(0);
  69           else
  70             defaultState[key] = state[key];
  71         }
  72       }
  73
  74       //------------------------------------------------------------
  75       // Display No Data message if there's nothing to show.
  76
  77       if (!data || !data.length) {
  78         var noDataText = container.selectAll('.nv-noData').data([noData]);
  79
  80         noDataText.enter().append('text')
  81           .attr('class', 'nvd3 nv-noData')
  82           .attr('dy', '-.7em')
  83           .style('text-anchor', 'middle');
  84
  85         noDataText
  86           .attr('x', margin.left + availableWidth / 2)
  87           .attr('y', margin.top + availableHeight / 2)
  88           .text(function(d) { return d });
  89
  90         return chart;
  91       } else {
  92         container.selectAll('.nv-noData').remove();
  93       }
  94
  95       //------------------------------------------------------------
  96
  97
  98       //------------------------------------------------------------
  99       // Setup containers and skeleton of chart
 100
 101       var wrap = container.selectAll('g.nv-wrap.nv-pieChart').data([data]);
 102       var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-pieChart').append('g');
 103       var g = wrap.select('g');
 104
 105       gEnter.append('g').attr('class', 'nv-pieWrap');
 106       gEnter.append('g').attr('class', 'nv-legendWrap');
 107
 108       //------------------------------------------------------------
 109
 110
 111       //------------------------------------------------------------
 112       // Legend
 113
 114       if (showLegend) {
 115         legend
 116           .width( availableWidth )
 117           .key(pie.x());
 118
 119         wrap.select('.nv-legendWrap')
 120             .datum(data)
 121             .call(legend);
 122
 123         if ( margin.top != legend.height()) {
 124           margin.top = legend.height();
 125           availableHeight = (height || parseInt(container.style('height')) || 400)
 126                              - margin.top - margin.bottom;
 127         }
 128
 129         wrap.select('.nv-legendWrap')
 130             .attr('transform', 'translate(0,' + (-margin.top) +')');
 131       }
 132
 133       //------------------------------------------------------------
 134
 135
 136       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 137
 138
 139       //------------------------------------------------------------
 140       // Main Chart Component(s)
 141
 142       pie
 143         .width(availableWidth)
 144         .height(availableHeight);
 145
 146
 147       var pieWrap = g.select('.nv-pieWrap')
 148           .datum([data]);
 149
 150       d3.transition(pieWrap).call(pie);
 151
 152       //------------------------------------------------------------
 153
 154
 155       //============================================================
 156       // Event Handling/Dispatching (in chart's scope)
 157       //------------------------------------------------------------
 158
 159       /*legend.dispatch.on('stateChange', function(newState) {
 160         state = newState;
 161         dispatch.stateChange(state);
 162         chart.update();
 163       });*/
 164
 165       pie.dispatch.on('elementMouseout.tooltip', function(e) {
 166         dispatch.tooltipHide(e);
 167       });
 168
 169       // Update chart from a state object passed to event handler
 170       dispatch.on('changeState', function(e) {
 171
 172         if (typeof e.disabled !== 'undefined') {
 173           data.forEach(function(series,i) {
 174             series.disabled = e.disabled[i];
 175           });
 176
 177           state.disabled = e.disabled;
 178         }
 179
 180         chart.update();
 181       });
 182
 183       //============================================================
 184
 185
 186     });
 187
 188     return chart;
 189   }
 190
 191   //============================================================
 192   // Event Handling/Dispatching (out of chart's scope)
 193   //------------------------------------------------------------
 194
 195   pie.dispatch.on('elementMouseover.tooltip', function(e) {
 196     e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
 197     dispatch.tooltipShow(e);
 198   });
 199
 200   dispatch.on('tooltipShow', function(e) {
 201     if (tooltips) showTooltip(e);
 202   });
 203
 204   dispatch.on('tooltipHide', function() {
 205     if (tooltips) nv.tooltip.cleanup();
 206   });
 207
 208   //============================================================
 209
 210
 211   //============================================================
 212   // Expose Public Variables
 213   //------------------------------------------------------------
 214
 215   // expose chart's sub-components
 216   chart.legend = legend;
 217   chart.dispatch = dispatch;
 218   chart.pie = pie;
 219
 220   d3.rebind(chart, pie, 'valueFormat', 'values', 'x', 'y', 'description', 'id', 'showLabels', 'donutLabelsOutside', 'pieLabelsOutside', 'labelType', 'donut', 'donutRatio', 'labelThreshold');
 221   chart.options = nv.utils.optionsFunc.bind(chart);
 222
 223   chart.margin = function(_) {
 224     if (!arguments.length) return margin;
 225     margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
 226     margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
 227     margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
 228     margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
 229     return chart;
 230   };
 231
 232   chart.width = function(_) {
 233     if (!arguments.length) return width;
 234     width = _;
 235     return chart;
 236   };
 237
 238   chart.height = function(_) {
 239     if (!arguments.length) return height;
 240     height = _;
 241     return chart;
 242   };
 243
 244   chart.color = function(_) {
 245     if (!arguments.length) return color;
 246     color = nv.utils.getColor(_);
 247     legend.color(color);
 248     pie.color(color);
 249     return chart;
 250   };
 251
 252   chart.showLegend = function(_) {
 253     if (!arguments.length) return showLegend;
 254     showLegend = _;
 255     return chart;
 256   };
 257
 258   chart.tooltips = function(_) {
 259     if (!arguments.length) return tooltips;
 260     tooltips = _;
 261     return chart;
 262   };
 263
 264   chart.tooltipContent = function(_) {
 265     if (!arguments.length) return tooltip;
 266     tooltip = _;
 267     return chart;
 268   };
 269
 270   chart.state = function(_) {
 271     if (!arguments.length) return state;
 272     state = _;
 273     return chart;
 274   };
 275
 276   chart.defaultState = function(_) {
 277     if (!arguments.length) return defaultState;
 278     defaultState = _;
 279     return chart;
 280   };
 281
 282   chart.noData = function(_) {
 283     if (!arguments.length) return noData;
 284     noData = _;
 285     return chart;
 286   };
 287
 288   //============================================================
 289
 290
 291   return chart;
 292 }