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

   1
   2 nv.models.multiBarHorizontal = function() {
   3   "use strict";
   4   //============================================================
   5   // Public Variables with Default Settings
   6   //------------------------------------------------------------
   7
   8   var margin = {top: 0, right: 0, bottom: 0, left: 0}
   9     , width = 960
  10     , height = 500
  11     , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
  12     , x = d3.scale.ordinal()
  13     , y = d3.scale.linear()
  14     , getX = function(d) { return d.x }
  15     , getY = function(d) { return d.y }
  16     , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
  17     , color = nv.utils.defaultColor()
  18     , barColor = null // adding the ability to set the color for each rather than the whole group
  19     , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
  20     , stacked = false
  21     , showValues = false
  22     , valuePadding = 60
  23     , valueFormat = d3.format(',.2f')
  24     , delay = 1200
  25     , xDomain
  26     , yDomain
  27     , xRange
  28     , yRange
  29     , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
  30     ;
  31
  32   //============================================================
  33
  34
  35   //============================================================
  36   // Private Variables
  37   //------------------------------------------------------------
  38
  39   var x0, y0 //used to store previous scales
  40       ;
  41
  42   //============================================================
  43
  44
  45   function chart(selection) {
  46     selection.each(function(data) {
  47       var availableWidth = width - margin.left - margin.right,
  48           availableHeight = height - margin.top - margin.bottom,
  49           container = d3.select(this);
  50
  51
  52       if (stacked)
  53         data = d3.layout.stack()
  54                  .offset('zero')
  55                  .values(function(d){ return d.values })
  56                  .y(getY)
  57                  (data);
  58
  59
  60       //add series index to each data point for reference
  61       data.forEach(function(series, i) {
  62         series.values.forEach(function(point) {
  63           point.series = i;
  64         });
  65       });
  66
  67
  68
  69       //------------------------------------------------------------
  70       // HACK for negative value stacking
  71       if (stacked)
  72         data[0].values.map(function(d,i) {
  73           var posBase = 0, negBase = 0;
  74           data.map(function(d) {
  75             var f = d.values[i]
  76             f.size = Math.abs(f.y);
  77             if (f.y<0)  {
  78               f.y1 = negBase - f.size;
  79               negBase = negBase - f.size;
  80             } else
  81             {
  82               f.y1 = posBase;
  83               posBase = posBase + f.size;
  84             }
  85           });
  86         });
  87
  88
  89
  90       //------------------------------------------------------------
  91       // Setup Scales
  92
  93       // remap and flatten the data for use in calculating the scales' domains
  94       var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
  95             data.map(function(d) {
  96               return d.values.map(function(d,i) {
  97                 return { x: getX(d,i), y: getY(d,i), y0: d.y0, y1: d.y1 }
  98               })
  99             });
 100
 101       x   .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
 102           .rangeBands(xRange || [0, availableHeight], .1);
 103
 104       //y   .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y + (stacked ? d.y0 : 0) }).concat(forceY)))
 105       y   .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return stacked ? (d.y > 0 ? d.y1 + d.y : d.y1 ) : d.y }).concat(forceY)))
 106
 107       if (showValues && !stacked)
 108         y.range(yRange || [(y.domain()[0] < 0 ? valuePadding : 0), availableWidth - (y.domain()[1] > 0 ? valuePadding : 0) ]);
 109       else
 110         y.range(yRange || [0, availableWidth]);
 111
 112       x0 = x0 || x;
 113       y0 = y0 || d3.scale.linear().domain(y.domain()).range([y(0),y(0)]);
 114
 115       //------------------------------------------------------------
 116
 117
 118       //------------------------------------------------------------
 119       // Setup containers and skeleton of chart
 120
 121       var wrap = d3.select(this).selectAll('g.nv-wrap.nv-multibarHorizontal').data([data]);
 122       var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multibarHorizontal');
 123       var defsEnter = wrapEnter.append('defs');
 124       var gEnter = wrapEnter.append('g');
 125       var g = wrap.select('g');
 126
 127       gEnter.append('g').attr('class', 'nv-groups');
 128
 129       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 130
 131       //------------------------------------------------------------
 132
 133
 134
 135       var groups = wrap.select('.nv-groups').selectAll('.nv-group')
 136           .data(function(d) { return d }, function(d,i) { return i });
 137       groups.enter().append('g')
 138           .style('stroke-opacity', 1e-6)
 139           .style('fill-opacity', 1e-6);
 140       groups.exit().transition()
 141           .style('stroke-opacity', 1e-6)
 142           .style('fill-opacity', 1e-6)
 143           .remove();
 144       groups
 145           .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
 146           .classed('hover', function(d) { return d.hover })
 147           .style('fill', function(d,i){ return color(d, i) })
 148           .style('stroke', function(d,i){ return color(d, i) });
 149       groups.transition()
 150           .style('stroke-opacity', 1)
 151           .style('fill-opacity', .75);
 152
 153
 154       var bars = groups.selectAll('g.nv-bar')
 155           .data(function(d) { return d.values });
 156
 157       bars.exit().remove();
 158
 159
 160       var barsEnter = bars.enter().append('g')
 161           .attr('transform', function(d,i,j) {
 162               return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
 163           });
 164
 165       barsEnter.append('rect')
 166           .attr('width', 0)
 167           .attr('height', x.rangeBand() / (stacked ? 1 : data.length) )
 168
 169       bars
 170           .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
 171             d3.select(this).classed('hover', true);
 172             dispatch.elementMouseover({
 173               value: getY(d,i),
 174               point: d,
 175               series: data[d.series],
 176               pos: [ y(getY(d,i) + (stacked ? d.y0 : 0)), x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length) ],
 177               pointIndex: i,
 178               seriesIndex: d.series,
 179               e: d3.event
 180             });
 181           })
 182           .on('mouseout', function(d,i) {
 183             d3.select(this).classed('hover', false);
 184             dispatch.elementMouseout({
 185               value: getY(d,i),
 186               point: d,
 187               series: data[d.series],
 188               pointIndex: i,
 189               seriesIndex: d.series,
 190               e: d3.event
 191             });
 192           })
 193           .on('click', function(d,i) {
 194             dispatch.elementClick({
 195               value: getY(d,i),
 196               point: d,
 197               series: data[d.series],
 198               pos: [x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length), y(getY(d,i) + (stacked ? d.y0 : 0))],  // TODO: Figure out why the value appears to be shifted
 199               pointIndex: i,
 200               seriesIndex: d.series,
 201               e: d3.event
 202             });
 203             d3.event.stopPropagation();
 204           })
 205           .on('dblclick', function(d,i) {
 206             dispatch.elementDblClick({
 207               value: getY(d,i),
 208               point: d,
 209               series: data[d.series],
 210               pos: [x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length), y(getY(d,i) + (stacked ? d.y0 : 0))],  // TODO: Figure out why the value appears to be shifted
 211               pointIndex: i,
 212               seriesIndex: d.series,
 213               e: d3.event
 214             });
 215             d3.event.stopPropagation();
 216           });
 217
 218
 219       barsEnter.append('text');
 220
 221       if (showValues && !stacked) {
 222         bars.select('text')
 223             .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'end' : 'start' })
 224             .attr('y', x.rangeBand() / (data.length * 2))
 225             .attr('dy', '.32em')
 226             .text(function(d,i) { return valueFormat(getY(d,i)) })
 227         bars.transition()
 228           .select('text')
 229             .attr('x', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
 230       } else {
 231         bars.selectAll('text').text('');
 232       }
 233
 234       bars
 235           .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
 236
 237       if (barColor) {
 238         if (!disabled) disabled = data.map(function() { return true });
 239         bars
 240           .style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); })
 241           .style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); });
 242       }
 243
 244       if (stacked)
 245         bars.transition()
 246             .attr('transform', function(d,i) {
 247               return 'translate(' + y(d.y1) + ',' + x(getX(d,i)) + ')'
 248             })
 249           .select('rect')
 250             .attr('width', function(d,i) {
 251               return Math.abs(y(getY(d,i) + d.y0) - y(d.y0))
 252             })
 253             .attr('height', x.rangeBand() );
 254       else
 255         bars.transition()
 256             .attr('transform', function(d,i) {
 257               //TODO: stacked must be all positive or all negative, not both?
 258               return 'translate(' +
 259               (getY(d,i) < 0 ? y(getY(d,i)) : y(0))
 260               + ',' +
 261               (d.series * x.rangeBand() / data.length
 262               +
 263               x(getX(d,i)) )
 264               + ')'
 265             })
 266           .select('rect')
 267             .attr('height', x.rangeBand() / data.length )
 268             .attr('width', function(d,i) {
 269               return Math.max(Math.abs(y(getY(d,i)) - y(0)),1)
 270             });
 271
 272
 273       //store old scales for use in transitions on update
 274       x0 = x.copy();
 275       y0 = y.copy();
 276
 277     });
 278
 279     return chart;
 280   }
 281
 282
 283   //============================================================
 284   // Expose Public Variables
 285   //------------------------------------------------------------
 286
 287   chart.dispatch = dispatch;
 288
 289   chart.options = nv.utils.optionsFunc.bind(chart);
 290
 291   chart.x = function(_) {
 292     if (!arguments.length) return getX;
 293     getX = _;
 294     return chart;
 295   };
 296
 297   chart.y = function(_) {
 298     if (!arguments.length) return getY;
 299     getY = _;
 300     return chart;
 301   };
 302
 303   chart.margin = function(_) {
 304     if (!arguments.length) return margin;
 305     margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
 306     margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
 307     margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
 308     margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
 309     return chart;
 310   };
 311
 312   chart.width = function(_) {
 313     if (!arguments.length) return width;
 314     width = _;
 315     return chart;
 316   };
 317
 318   chart.height = function(_) {
 319     if (!arguments.length) return height;
 320     height = _;
 321     return chart;
 322   };
 323
 324   chart.xScale = function(_) {
 325     if (!arguments.length) return x;
 326     x = _;
 327     return chart;
 328   };
 329
 330   chart.yScale = function(_) {
 331     if (!arguments.length) return y;
 332     y = _;
 333     return chart;
 334   };
 335
 336   chart.xDomain = function(_) {
 337     if (!arguments.length) return xDomain;
 338     xDomain = _;
 339     return chart;
 340   };
 341
 342   chart.yDomain = function(_) {
 343     if (!arguments.length) return yDomain;
 344     yDomain = _;
 345     return chart;
 346   };
 347
 348   chart.xRange = function(_) {
 349     if (!arguments.length) return xRange;
 350     xRange = _;
 351     return chart;
 352   };
 353
 354   chart.yRange = function(_) {
 355     if (!arguments.length) return yRange;
 356     yRange = _;
 357     return chart;
 358   };
 359
 360   chart.forceY = function(_) {
 361     if (!arguments.length) return forceY;
 362     forceY = _;
 363     return chart;
 364   };
 365
 366   chart.stacked = function(_) {
 367     if (!arguments.length) return stacked;
 368     stacked = _;
 369     return chart;
 370   };
 371
 372   chart.color = function(_) {
 373     if (!arguments.length) return color;
 374     color = nv.utils.getColor(_);
 375     return chart;
 376   };
 377
 378   chart.barColor = function(_) {
 379     if (!arguments.length) return barColor;
 380     barColor = nv.utils.getColor(_);
 381     return chart;
 382   };
 383
 384   chart.disabled = function(_) {
 385     if (!arguments.length) return disabled;
 386     disabled = _;
 387     return chart;
 388   };
 389
 390   chart.id = function(_) {
 391     if (!arguments.length) return id;
 392     id = _;
 393     return chart;
 394   };
 395
 396   chart.delay = function(_) {
 397     if (!arguments.length) return delay;
 398     delay = _;
 399     return chart;
 400   };
 401
 402   chart.showValues = function(_) {
 403     if (!arguments.length) return showValues;
 404     showValues = _;
 405     return chart;
 406   };
 407
 408   chart.valueFormat= function(_) {
 409     if (!arguments.length) return valueFormat;
 410     valueFormat = _;
 411     return chart;
 412   };
 413
 414   chart.valuePadding = function(_) {
 415     if (!arguments.length) return valuePadding;
 416     valuePadding = _;
 417     return chart;
 418   };
 419
 420   //============================================================
 421
 422
 423   return chart;
 424 }