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

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