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

   1
   2 nv.models.historicalBarChart = function() {
   3   "use strict";
   4   //============================================================
   5   // Public Variables with Default Settings
   6   //------------------------------------------------------------
   7
   8   var bars = nv.models.historicalBar()
   9     , xAxis = nv.models.axis()
  10     , yAxis = nv.models.axis()
  11     , legend = nv.models.legend()
  12     ;
  13
  14
  15   var margin = {top: 30, right: 90, bottom: 50, left: 90}
  16     , color = nv.utils.defaultColor()
  17     , width = null
  18     , height = null
  19     , showLegend = false
  20     , showXAxis = true
  21     , showYAxis = true
  22     , rightAlignYAxis = false
  23     , tooltips = true
  24     , tooltip = function(key, x, y, e, graph) {
  25         return '<h3>' + key + '</h3>' +
  26                '<p>' +  y + ' at ' + x + '</p>'
  27       }
  28     , x
  29     , y
  30     , state = {}
  31     , defaultState = null
  32     , noData = 'No Data Available.'
  33     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
  34     , transitionDuration = 250
  35     ;
  36
  37   xAxis
  38     .orient('bottom')
  39     .tickPadding(7)
  40     ;
  41   yAxis
  42     .orient( (rightAlignYAxis) ? 'right' : 'left')
  43     ;
  44
  45   //============================================================
  46
  47
  48   //============================================================
  49   // Private Variables
  50   //------------------------------------------------------------
  51
  52   var showTooltip = function(e, offsetElement) {
  53
  54     // New addition to calculate position if SVG is scaled with viewBox, may move TODO: consider implementing everywhere else
  55     if (offsetElement) {
  56       var svg = d3.select(offsetElement).select('svg');
  57       var viewBox = (svg.node()) ? svg.attr('viewBox') : null;
  58       if (viewBox) {
  59         viewBox = viewBox.split(' ');
  60         var ratio = parseInt(svg.style('width')) / viewBox[2];
  61         e.pos[0] = e.pos[0] * ratio;
  62         e.pos[1] = e.pos[1] * ratio;
  63       }
  64     }
  65
  66     var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
  67         top = e.pos[1] + ( offsetElement.offsetTop || 0),
  68         x = xAxis.tickFormat()(bars.x()(e.point, e.pointIndex)),
  69         y = yAxis.tickFormat()(bars.y()(e.point, e.pointIndex)),
  70         content = tooltip(e.series.key, x, y, e, chart);
  71
  72     nv.tooltip.show([left, top], content, null, null, offsetElement);
  73   };
  74
  75   //============================================================
  76
  77
  78   function chart(selection) {
  79     selection.each(function(data) {
  80       var container = d3.select(this),
  81           that = this;
  82
  83       var availableWidth = (width  || parseInt(container.style('width')) || 960)
  84                              - margin.left - margin.right,
  85           availableHeight = (height || parseInt(container.style('height')) || 400)
  86                              - margin.top - margin.bottom;
  87
  88
  89       chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
  90       chart.container = this;
  91
  92       //set state.disabled
  93       state.disabled = data.map(function(d) { return !!d.disabled });
  94
  95       if (!defaultState) {
  96         var key;
  97         defaultState = {};
  98         for (key in state) {
  99           if (state[key] instanceof Array)
 100             defaultState[key] = state[key].slice(0);
 101           else
 102             defaultState[key] = state[key];
 103         }
 104       }
 105
 106       //------------------------------------------------------------
 107       // Display noData message if there's nothing to show.
 108
 109       if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
 110         var noDataText = container.selectAll('.nv-noData').data([noData]);
 111
 112         noDataText.enter().append('text')
 113           .attr('class', 'nvd3 nv-noData')
 114           .attr('dy', '-.7em')
 115           .style('text-anchor', 'middle');
 116
 117         noDataText
 118           .attr('x', margin.left + availableWidth / 2)
 119           .attr('y', margin.top + availableHeight / 2)
 120           .text(function(d) { return d });
 121
 122         return chart;
 123       } else {
 124         container.selectAll('.nv-noData').remove();
 125       }
 126
 127       //------------------------------------------------------------
 128
 129
 130       //------------------------------------------------------------
 131       // Setup Scales
 132
 133       x = bars.xScale();
 134       y = bars.yScale();
 135
 136       //------------------------------------------------------------
 137
 138
 139       //------------------------------------------------------------
 140       // Setup containers and skeleton of chart
 141
 142       var wrap = container.selectAll('g.nv-wrap.nv-historicalBarChart').data([data]);
 143       var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-historicalBarChart').append('g');
 144       var g = wrap.select('g');
 145
 146       gEnter.append('g').attr('class', 'nv-x nv-axis');
 147       gEnter.append('g').attr('class', 'nv-y nv-axis');
 148       gEnter.append('g').attr('class', 'nv-barsWrap');
 149       gEnter.append('g').attr('class', 'nv-legendWrap');
 150
 151       //------------------------------------------------------------
 152
 153
 154       //------------------------------------------------------------
 155       // Legend
 156
 157       if (showLegend) {
 158         legend.width(availableWidth);
 159
 160         g.select('.nv-legendWrap')
 161             .datum(data)
 162             .call(legend);
 163
 164         if ( margin.top != legend.height()) {
 165           margin.top = legend.height();
 166           availableHeight = (height || parseInt(container.style('height')) || 400)
 167                              - margin.top - margin.bottom;
 168         }
 169
 170         wrap.select('.nv-legendWrap')
 171             .attr('transform', 'translate(0,' + (-margin.top) +')')
 172       }
 173
 174       //------------------------------------------------------------
 175
 176       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 177
 178       if (rightAlignYAxis) {
 179         g.select(".nv-y.nv-axis")
 180             .attr("transform", "translate(" + availableWidth + ",0)");
 181       }
 182
 183
 184       //------------------------------------------------------------
 185       // Main Chart Component(s)
 186
 187       bars
 188         .width(availableWidth)
 189         .height(availableHeight)
 190         .color(data.map(function(d,i) {
 191           return d.color || color(d, i);
 192         }).filter(function(d,i) { return !data[i].disabled }));
 193
 194
 195       var barsWrap = g.select('.nv-barsWrap')
 196           .datum(data.filter(function(d) { return !d.disabled }))
 197
 198       barsWrap.transition().call(bars);
 199
 200       //------------------------------------------------------------
 201
 202
 203       //------------------------------------------------------------
 204       // Setup Axes
 205
 206       if (showXAxis) {
 207         xAxis
 208           .scale(x)
 209           .tickSize(-availableHeight, 0);
 210
 211         g.select('.nv-x.nv-axis')
 212             .attr('transform', 'translate(0,' + y.range()[0] + ')');
 213         g.select('.nv-x.nv-axis')
 214             .transition()
 215             .call(xAxis);
 216       }
 217
 218       if (showYAxis) {
 219         yAxis
 220           .scale(y)
 221           .ticks( availableHeight / 36 )
 222           .tickSize( -availableWidth, 0);
 223
 224         g.select('.nv-y.nv-axis')
 225           .transition()
 226             .call(yAxis);
 227       }
 228       //------------------------------------------------------------
 229
 230
 231       //============================================================
 232       // Event Handling/Dispatching (in chart's scope)
 233       //------------------------------------------------------------
 234
 235       legend.dispatch.on('legendClick', function(d,i) {
 236         d.disabled = !d.disabled;
 237
 238         if (!data.filter(function(d) { return !d.disabled }).length) {
 239           data.map(function(d) {
 240             d.disabled = false;
 241             wrap.selectAll('.nv-series').classed('disabled', false);
 242             return d;
 243           });
 244         }
 245
 246         state.disabled = data.map(function(d) { return !!d.disabled });
 247         dispatch.stateChange(state);
 248
 249         selection.transition().call(chart);
 250       });
 251
 252       legend.dispatch.on('legendDblclick', function(d) {
 253           //Double clicking should always enable current series, and disabled all others.
 254           data.forEach(function(d) {
 255              d.disabled = true;
 256           });
 257           d.disabled = false;
 258
 259           state.disabled = data.map(function(d) { return !!d.disabled });
 260           dispatch.stateChange(state);
 261           chart.update();
 262       });
 263
 264       dispatch.on('tooltipShow', function(e) {
 265         if (tooltips) showTooltip(e, that.parentNode);
 266       });
 267
 268
 269       dispatch.on('changeState', function(e) {
 270
 271         if (typeof e.disabled !== 'undefined') {
 272           data.forEach(function(series,i) {
 273             series.disabled = e.disabled[i];
 274           });
 275
 276           state.disabled = e.disabled;
 277         }
 278
 279         selection.call(chart);
 280       });
 281
 282       //============================================================
 283
 284     });
 285
 286     return chart;
 287   }
 288
 289
 290   //============================================================
 291   // Event Handling/Dispatching (out of chart's scope)
 292   //------------------------------------------------------------
 293
 294   bars.dispatch.on('elementMouseover.tooltip', function(e) {
 295     e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
 296     dispatch.tooltipShow(e);
 297   });
 298
 299   bars.dispatch.on('elementMouseout.tooltip', function(e) {
 300     dispatch.tooltipHide(e);
 301   });
 302
 303   dispatch.on('tooltipHide', function() {
 304     if (tooltips) nv.tooltip.cleanup();
 305   });
 306
 307   //============================================================
 308
 309
 310   //============================================================
 311   // Expose Public Variables
 312   //------------------------------------------------------------
 313
 314   // expose chart's sub-components
 315   chart.dispatch = dispatch;
 316   chart.bars = bars;
 317   chart.legend = legend;
 318   chart.xAxis = xAxis;
 319   chart.yAxis = yAxis;
 320
 321   d3.rebind(chart, bars, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale',
 322     'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate','highlightPoint','clearHighlights', 'interactive');
 323
 324   chart.options = nv.utils.optionsFunc.bind(chart);
 325
 326   chart.margin = function(_) {
 327     if (!arguments.length) return margin;
 328     margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
 329     margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
 330     margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
 331     margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
 332     return chart;
 333   };
 334
 335   chart.width = function(_) {
 336     if (!arguments.length) return width;
 337     width = _;
 338     return chart;
 339   };
 340
 341   chart.height = function(_) {
 342     if (!arguments.length) return height;
 343     height = _;
 344     return chart;
 345   };
 346
 347   chart.color = function(_) {
 348     if (!arguments.length) return color;
 349     color = nv.utils.getColor(_);
 350     legend.color(color);
 351     return chart;
 352   };
 353
 354   chart.showLegend = function(_) {
 355     if (!arguments.length) return showLegend;
 356     showLegend = _;
 357     return chart;
 358   };
 359
 360   chart.showXAxis = function(_) {
 361     if (!arguments.length) return showXAxis;
 362     showXAxis = _;
 363     return chart;
 364   };
 365
 366   chart.showYAxis = function(_) {
 367     if (!arguments.length) return showYAxis;
 368     showYAxis = _;
 369     return chart;
 370   };
 371
 372   chart.rightAlignYAxis = function(_) {
 373     if(!arguments.length) return rightAlignYAxis;
 374     rightAlignYAxis = _;
 375     yAxis.orient( (_) ? 'right' : 'left');
 376     return chart;
 377   };
 378
 379   chart.tooltips = function(_) {
 380     if (!arguments.length) return tooltips;
 381     tooltips = _;
 382     return chart;
 383   };
 384
 385   chart.tooltipContent = function(_) {
 386     if (!arguments.length) return tooltip;
 387     tooltip = _;
 388     return chart;
 389   };
 390
 391   chart.state = function(_) {
 392     if (!arguments.length) return state;
 393     state = _;
 394     return chart;
 395   };
 396
 397   chart.defaultState = function(_) {
 398     if (!arguments.length) return defaultState;
 399     defaultState = _;
 400     return chart;
 401   };
 402
 403   chart.noData = function(_) {
 404     if (!arguments.length) return noData;
 405     noData = _;
 406     return chart;
 407   };
 408
 409   chart.transitionDuration = function(_) {
 410     if (!arguments.length) return transitionDuration;
 411     transitionDuration = _;
 412     return chart;
 413   };
 414
 415   //============================================================
 416
 417
 418   return chart;
 419 }