ecomp-sdk-app/src/main/webapp/app/fusion/external/d3/js/models/multiBarChart.js

   1
   2 nv.models.multiBarChart = function() {
   3   "use strict";
   4   //============================================================
   5   // Public Variables with Default Settings
   6   //------------------------------------------------------------
   7
   8   var multibar = nv.models.multiBar()
   9     , xAxis = nv.models.axis()
  10     , yAxis = nv.models.axis()
  11     , legend = nv.models.legend()
  12     , controls = nv.models.legend()
  13     ;
  14
  15   var margin = {top: 30, right: 20, bottom: 50, left: 60}
  16     , width = null
  17     , height = null
  18     , color = nv.utils.defaultColor()
  19     , showControls = true
  20     , showLegend = true
  21     , showXAxis = true
  22     , showYAxis = true
  23     , rightAlignYAxis = false
  24     , reduceXTicks = true // if false a tick will show for every data point
  25     , staggerLabels = false
  26     , rotateLabels = 0
  27     , tooltips = true
  28     , tooltip = function(key, x, y, e, graph) {
  29         return '<h3>' + key + '</h3>' +
  30                '<p>' +  y + ' on ' + x + '</p>'
  31       }
  32     , x //can be accessed via chart.xScale()
  33     , y //can be accessed via chart.yScale()
  34     , state = { stacked: false }
  35     , defaultState = null
  36     , noData = "No Data Available."
  37     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
  38     , controlWidth = function() { return showControls ? 180 : 0 }
  39     , transitionDuration = 250
  40     ;
  41
  42   multibar
  43     .stacked(false)
  44     ;
  45   xAxis
  46     .orient('bottom')
  47     .tickPadding(7)
  48     .highlightZero(true)
  49     .showMaxMin(false)
  50     .tickFormat(function(d) { return d })
  51     ;
  52   yAxis
  53     .orient((rightAlignYAxis) ? 'right' : 'left')
  54     .tickFormat(d3.format(',.1f'))
  55     ;
  56
  57   controls.updateState(false);
  58   //============================================================
  59
  60
  61   //============================================================
  62   // Private Variables
  63   //------------------------------------------------------------
  64
  65   var showTooltip = function(e, offsetElement) {
  66     var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
  67         top = e.pos[1] + ( offsetElement.offsetTop || 0),
  68         x = xAxis.tickFormat()(multibar.x()(e.point, e.pointIndex)),
  69         y = yAxis.tickFormat()(multibar.y()(e.point, e.pointIndex)),
  70         content = tooltip(e.series.key, x, y, e, chart);
  71
  72     nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', 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       chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
  89       chart.container = this;
  90
  91       //set state.disabled
  92       state.disabled = data.map(function(d) { return !!d.disabled });
  93
  94       if (!defaultState) {
  95         var key;
  96         defaultState = {};
  97         for (key in state) {
  98           if (state[key] instanceof Array)
  99             defaultState[key] = state[key].slice(0);
 100           else
 101             defaultState[key] = state[key];
 102         }
 103       }
 104       //------------------------------------------------------------
 105       // Display noData message if there's nothing to show.
 106
 107       if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
 108         var noDataText = container.selectAll('.nv-noData').data([noData]);
 109
 110         noDataText.enter().append('text')
 111           .attr('class', 'nvd3 nv-noData')
 112           .attr('dy', '-.7em')
 113           .style('text-anchor', 'middle');
 114
 115         noDataText
 116           .attr('x', margin.left + availableWidth / 2)
 117           .attr('y', margin.top + availableHeight / 2)
 118           .text(function(d) { return d });
 119
 120         return chart;
 121       } else {
 122         container.selectAll('.nv-noData').remove();
 123       }
 124
 125       //------------------------------------------------------------
 126
 127
 128       //------------------------------------------------------------
 129       // Setup Scales
 130
 131       x = multibar.xScale();
 132       y = multibar.yScale();
 133
 134       //------------------------------------------------------------
 135
 136
 137       //------------------------------------------------------------
 138       // Setup containers and skeleton of chart
 139
 140       var wrap = container.selectAll('g.nv-wrap.nv-multiBarWithLegend').data([data]);
 141       var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarWithLegend').append('g');
 142       var g = wrap.select('g');
 143
 144       gEnter.append('g').attr('class', 'nv-x nv-axis');
 145       gEnter.append('g').attr('class', 'nv-y nv-axis');
 146       gEnter.append('g').attr('class', 'nv-barsWrap');
 147       gEnter.append('g').attr('class', 'nv-legendWrap');
 148       gEnter.append('g').attr('class', 'nv-controlsWrap');
 149
 150       //------------------------------------------------------------
 151
 152
 153       //------------------------------------------------------------
 154       // Legend
 155
 156       if (showLegend) {
 157         legend.width(availableWidth - controlWidth());
 158
 159         if (multibar.barColor())
 160           data.forEach(function(series,i) {
 161             series.color = d3.rgb('#ccc').darker(i * 1.5).toString();
 162           })
 163
 164         g.select('.nv-legendWrap')
 165             .datum(data)
 166             .call(legend);
 167
 168         if ( margin.top != legend.height()) {
 169           margin.top = legend.height();
 170           availableHeight = (height || parseInt(container.style('height')) || 400)
 171                              - margin.top - margin.bottom;
 172         }
 173
 174         g.select('.nv-legendWrap')
 175             .attr('transform', 'translate(' + controlWidth() + ',' + (-margin.top) +')');
 176       }
 177
 178       //------------------------------------------------------------
 179
 180
 181       //------------------------------------------------------------
 182       // Controls
 183
 184       if (showControls) {
 185         var controlsData = [
 186           { key: 'Grouped', disabled: multibar.stacked() },
 187           { key: 'Stacked', disabled: !multibar.stacked() }
 188         ];
 189
 190         controls.width(controlWidth()).color(['#444', '#444', '#444']);
 191         g.select('.nv-controlsWrap')
 192             .datum(controlsData)
 193             .attr('transform', 'translate(0,' + (-margin.top) +')')
 194             .call(controls);
 195       }
 196
 197       //------------------------------------------------------------
 198
 199
 200       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 201
 202       if (rightAlignYAxis) {
 203           g.select(".nv-y.nv-axis")
 204               .attr("transform", "translate(" + availableWidth + ",0)");
 205       }
 206
 207       //------------------------------------------------------------
 208       // Main Chart Component(s)
 209
 210       multibar
 211         .disabled(data.map(function(series) { return series.disabled }))
 212         .width(availableWidth)
 213         .height(availableHeight)
 214         .color(data.map(function(d,i) {
 215           return d.color || color(d, i);
 216         }).filter(function(d,i) { return !data[i].disabled }))
 217
 218
 219       var barsWrap = g.select('.nv-barsWrap')
 220           .datum(data.filter(function(d) { return !d.disabled }))
 221
 222       barsWrap.transition().call(multibar);
 223
 224       //------------------------------------------------------------
 225
 226
 227       //------------------------------------------------------------
 228       // Setup Axes
 229
 230       if (showXAxis) {
 231           xAxis
 232             .scale(x)
 233             .ticks( availableWidth / 100 )
 234             .tickSize(-availableHeight, 0);
 235
 236           g.select('.nv-x.nv-axis')
 237               .attr('transform', 'translate(0,' + y.range()[0] + ')');
 238           g.select('.nv-x.nv-axis').transition()
 239               .call(xAxis);
 240
 241           var xTicks = g.select('.nv-x.nv-axis > g').selectAll('g');
 242
 243           xTicks
 244               .selectAll('line, text')
 245               .style('opacity', 1)
 246
 247           if (staggerLabels) {
 248               var getTranslate = function(x,y) {
 249                   return "translate(" + x + "," + y + ")";
 250               };
 251
 252               var staggerUp = 5, staggerDown = 17;  //pixels to stagger by
 253               // Issue #140
 254               xTicks
 255                 .selectAll("text")
 256                 .attr('transform', function(d,i,j) {
 257                     return  getTranslate(0, (j % 2 == 0 ? staggerUp : staggerDown));
 258                   });
 259
 260               var totalInBetweenTicks = d3.selectAll(".nv-x.nv-axis .nv-wrap g g text")[0].length;
 261               g.selectAll(".nv-x.nv-axis .nv-axisMaxMin text")
 262                 .attr("transform", function(d,i) {
 263                     return getTranslate(0, (i === 0 || totalInBetweenTicks % 2 !== 0) ? staggerDown : staggerUp);
 264                 });
 265           }
 266
 267           if (reduceXTicks)
 268             xTicks
 269               .filter(function(d,i) {
 270                   return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;
 271                 })
 272               .selectAll('text, line')
 273               .style('opacity', 0);
 274
 275           if(rotateLabels)
 276             xTicks
 277               .selectAll('.tick text')
 278               .attr('transform', 'rotate(' + rotateLabels + ' 0,0)')
 279               .style('text-anchor', rotateLabels > 0 ? 'start' : 'end');
 280
 281           g.select('.nv-x.nv-axis').selectAll('g.nv-axisMaxMin text')
 282               .style('opacity', 1);
 283       }
 284
 285
 286       if (showYAxis) {
 287           yAxis
 288             .scale(y)
 289             .ticks( availableHeight / 36 )
 290             .tickSize( -availableWidth, 0);
 291
 292           g.select('.nv-y.nv-axis').transition()
 293               .call(yAxis);
 294       }
 295
 296
 297       //------------------------------------------------------------
 298
 299
 300
 301       //============================================================
 302       // Event Handling/Dispatching (in chart's scope)
 303       //------------------------------------------------------------
 304
 305       legend.dispatch.on('stateChange', function(newState) {
 306         state = newState;
 307         dispatch.stateChange(state);
 308         chart.update();
 309       });
 310
 311       controls.dispatch.on('legendClick', function(d,i) {
 312         if (!d.disabled) return;
 313         controlsData = controlsData.map(function(s) {
 314           s.disabled = true;
 315           return s;
 316         });
 317         d.disabled = false;
 318
 319         switch (d.key) {
 320           case 'Grouped':
 321             multibar.stacked(false);
 322             break;
 323           case 'Stacked':
 324             multibar.stacked(true);
 325             break;
 326         }
 327
 328         state.stacked = multibar.stacked();
 329         dispatch.stateChange(state);
 330
 331         chart.update();
 332       });
 333
 334       dispatch.on('tooltipShow', function(e) {
 335         if (tooltips) showTooltip(e, that.parentNode)
 336       });
 337
 338       // Update chart from a state object passed to event handler
 339       dispatch.on('changeState', function(e) {
 340
 341         if (typeof e.disabled !== 'undefined') {
 342           data.forEach(function(series,i) {
 343             series.disabled = e.disabled[i];
 344           });
 345
 346           state.disabled = e.disabled;
 347         }
 348
 349         if (typeof e.stacked !== 'undefined') {
 350           multibar.stacked(e.stacked);
 351           state.stacked = e.stacked;
 352         }
 353
 354         chart.update();
 355       });
 356
 357       //============================================================
 358
 359
 360     });
 361
 362     return chart;
 363   }
 364
 365
 366   //============================================================
 367   // Event Handling/Dispatching (out of chart's scope)
 368   //------------------------------------------------------------
 369
 370   multibar.dispatch.on('elementMouseover.tooltip', function(e) {
 371     e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
 372     dispatch.tooltipShow(e);
 373   });
 374
 375   multibar.dispatch.on('elementMouseout.tooltip', function(e) {
 376     dispatch.tooltipHide(e);
 377   });
 378   dispatch.on('tooltipHide', function() {
 379     if (tooltips) nv.tooltip.cleanup();
 380   });
 381
 382   //============================================================
 383
 384
 385   //============================================================
 386   // Expose Public Variables
 387   //------------------------------------------------------------
 388
 389   // expose chart's sub-components
 390   chart.dispatch = dispatch;
 391   chart.multibar = multibar;
 392   chart.legend = legend;
 393   chart.xAxis = xAxis;
 394   chart.yAxis = yAxis;
 395
 396   d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'clipEdge',
 397    'id', 'stacked', 'stackOffset', 'delay', 'barColor','groupSpacing');
 398
 399   chart.options = nv.utils.optionsFunc.bind(chart);
 400
 401   chart.margin = function(_) {
 402     if (!arguments.length) return margin;
 403     margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
 404     margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
 405     margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
 406     margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
 407     return chart;
 408   };
 409
 410   chart.width = function(_) {
 411     if (!arguments.length) return width;
 412     width = _;
 413     return chart;
 414   };
 415
 416   chart.height = function(_) {
 417     if (!arguments.length) return height;
 418     height = _;
 419     return chart;
 420   };
 421
 422   chart.color = function(_) {
 423     if (!arguments.length) return color;
 424     color = nv.utils.getColor(_);
 425     legend.color(color);
 426     return chart;
 427   };
 428
 429   chart.showControls = function(_) {
 430     if (!arguments.length) return showControls;
 431     showControls = _;
 432     return chart;
 433   };
 434
 435   chart.showLegend = function(_) {
 436     if (!arguments.length) return showLegend;
 437     showLegend = _;
 438     return chart;
 439   };
 440
 441   chart.showXAxis = function(_) {
 442     if (!arguments.length) return showXAxis;
 443     showXAxis = _;
 444     return chart;
 445   };
 446
 447   chart.showYAxis = function(_) {
 448     if (!arguments.length) return showYAxis;
 449     showYAxis = _;
 450     return chart;
 451   };
 452
 453   chart.rightAlignYAxis = function(_) {
 454     if(!arguments.length) return rightAlignYAxis;
 455     rightAlignYAxis = _;
 456     yAxis.orient( (_) ? 'right' : 'left');
 457     return chart;
 458   };
 459
 460   chart.reduceXTicks= function(_) {
 461     if (!arguments.length) return reduceXTicks;
 462     reduceXTicks = _;
 463     return chart;
 464   };
 465
 466   chart.rotateLabels = function(_) {
 467     if (!arguments.length) return rotateLabels;
 468     rotateLabels = _;
 469     return chart;
 470   }
 471
 472   chart.staggerLabels = function(_) {
 473     if (!arguments.length) return staggerLabels;
 474     staggerLabels = _;
 475     return chart;
 476   };
 477
 478   chart.tooltip = function(_) {
 479     if (!arguments.length) return tooltip;
 480     tooltip = _;
 481     return chart;
 482   };
 483
 484   chart.tooltips = function(_) {
 485     if (!arguments.length) return tooltips;
 486     tooltips = _;
 487     return chart;
 488   };
 489
 490   chart.tooltipContent = function(_) {
 491     if (!arguments.length) return tooltip;
 492     tooltip = _;
 493     return chart;
 494   };
 495
 496   chart.state = function(_) {
 497     if (!arguments.length) return state;
 498     state = _;
 499     return chart;
 500   };
 501
 502   chart.defaultState = function(_) {
 503     if (!arguments.length) return defaultState;
 504     defaultState = _;
 505     return chart;
 506   };
 507
 508   chart.noData = function(_) {
 509     if (!arguments.length) return noData;
 510     noData = _;
 511     return chart;
 512   };
 513
 514   chart.transitionDuration = function(_) {
 515     if (!arguments.length) return transitionDuration;
 516     transitionDuration = _;
 517     return chart;
 518   };
 519
 520   //============================================================
 521
 522
 523   return chart;
 524 }