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

   1
   2 nv.models.line = function() {
   3   "use strict";
   4   //============================================================
   5   // Public Variables with Default Settings
   6   //------------------------------------------------------------
   7
   8   var  scatter = nv.models.scatter()
   9     ;
  10
  11   var margin = {top: 0, right: 0, bottom: 0, left: 0}
  12     , width = 960
  13     , height = 500
  14     , color = nv.utils.defaultColor() // a function that returns a color
  15     , getX = function(d) { return d.x } // accessor to get the x value from a data point
  16     , getY = function(d) { return d.y } // accessor to get the y value from a data point
  17     , defined = function(d,i) { return !isNaN(getY(d,i)) && getY(d,i) !== null } // allows a line to be not continuous when it is not defined
  18     , isArea = function(d) { return d.area } // decides if a line is an area or just a line
  19     , clipEdge = false // if true, masks lines within x and y scale
  20     , x //can be accessed via chart.xScale()
  21     , y //can be accessed via chart.yScale()
  22     , interpolate = "linear" // controls the line interpolation
  23     ;
  24
  25   scatter
  26     .size(16) // default size
  27     .sizeDomain([16,256]) //set to speed up calculation, needs to be unset if there is a custom size accessor
  28     ;
  29
  30   //============================================================
  31
  32
  33   //============================================================
  34   // Private Variables
  35   //------------------------------------------------------------
  36
  37   var x0, y0 //used to store previous scales
  38       ;
  39
  40   //============================================================
  41
  42
  43   function chart(selection) {
  44     selection.each(function(data) {
  45       var availableWidth = width - margin.left - margin.right,
  46           availableHeight = height - margin.top - margin.bottom,
  47           container = d3.select(this);
  48
  49       //------------------------------------------------------------
  50       // Setup Scales
  51
  52       x = scatter.xScale();
  53       y = scatter.yScale();
  54
  55       x0 = x0 || x;
  56       y0 = y0 || y;
  57
  58       //------------------------------------------------------------
  59
  60
  61       //------------------------------------------------------------
  62       // Setup containers and skeleton of chart
  63
  64       var wrap = container.selectAll('g.nv-wrap.nv-line').data([data]);
  65       var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-line');
  66       var defsEnter = wrapEnter.append('defs');
  67       var gEnter = wrapEnter.append('g');
  68       var g = wrap.select('g')
  69
  70       gEnter.append('g').attr('class', 'nv-groups');
  71       gEnter.append('g').attr('class', 'nv-scatterWrap');
  72
  73       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  74
  75       //------------------------------------------------------------
  76
  77
  78
  79
  80       scatter
  81         .width(availableWidth)
  82         .height(availableHeight)
  83
  84       var scatterWrap = wrap.select('.nv-scatterWrap');
  85           //.datum(data); // Data automatically trickles down from the wrap
  86
  87       scatterWrap.transition().call(scatter);
  88
  89
  90
  91       defsEnter.append('clipPath')
  92           .attr('id', 'nv-edge-clip-' + scatter.id())
  93         .append('rect');
  94
  95       wrap.select('#nv-edge-clip-' + scatter.id() + ' rect')
  96           .attr('width', availableWidth)
  97           .attr('height', availableHeight);
  98
  99       g   .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');
 100       scatterWrap
 101           .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');
 102
 103
 104
 105
 106       var groups = wrap.select('.nv-groups').selectAll('.nv-group')
 107           .data(function(d) { return d }, function(d) { return d.key });
 108       groups.enter().append('g')
 109           .style('stroke-opacity', 1e-6)
 110           .style('fill-opacity', 1e-6);
 111       groups.exit()
 112           .transition()
 113           .style('stroke-opacity', 1e-6)
 114           .style('fill-opacity', 1e-6)
 115           .remove();
 116       groups
 117           .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
 118           .classed('hover', function(d) { return d.hover })
 119           .style('fill', function(d,i){ return color(d, i) })
 120           .style('stroke', function(d,i){ return color(d, i)});
 121       groups
 122           .transition()
 123           .style('stroke-opacity', 1)
 124           .style('fill-opacity', .5);
 125
 126
 127
 128       var areaPaths = groups.selectAll('path.nv-area')
 129           .data(function(d) { return isArea(d) ? [d] : [] }); // this is done differently than lines because I need to check if series is an area
 130       areaPaths.enter().append('path')
 131           .attr('class', 'nv-area')
 132           .attr('d', function(d) {
 133             return d3.svg.area()
 134                 .interpolate(interpolate)
 135                 .defined(defined)
 136                 .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
 137                 .y0(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
 138                 .y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
 139                 //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
 140                 .apply(this, [d.values])
 141           });
 142       groups.exit().selectAll('path.nv-area')
 143            .remove();
 144
 145       areaPaths
 146           .transition()
 147           .attr('d', function(d) {
 148             return d3.svg.area()
 149                 .interpolate(interpolate)
 150                 .defined(defined)
 151                 .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
 152                 .y0(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
 153                 .y1(function(d,i) { return y( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
 154                 //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
 155                 .apply(this, [d.values])
 156           });
 157
 158
 159
 160       var linePaths = groups.selectAll('path.nv-line')
 161           .data(function(d) { return [d.values] });
 162       linePaths.enter().append('path')
 163           .attr('class', 'nv-line')
 164           .attr('d',
 165             d3.svg.line()
 166               .interpolate(interpolate)
 167               .defined(defined)
 168               .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
 169               .y(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
 170           );
 171       groups.exit().selectAll('path.nv-line')
 172           .transition()
 173           .attr('d',
 174             d3.svg.line()
 175               .interpolate(interpolate)
 176               .defined(defined)
 177               .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
 178               .y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
 179           );
 180       linePaths
 181           .transition()
 182           .attr('d',
 183             d3.svg.line()
 184               .interpolate(interpolate)
 185               .defined(defined)
 186               .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
 187               .y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
 188           );
 189
 190
 191
 192       //store old scales for use in transitions on update
 193       x0 = x.copy();
 194       y0 = y.copy();
 195
 196     });
 197
 198     return chart;
 199   }
 200
 201
 202   //============================================================
 203   // Expose Public Variables
 204   //------------------------------------------------------------
 205
 206   chart.dispatch = scatter.dispatch;
 207   chart.scatter = scatter;
 208
 209   d3.rebind(chart, scatter, 'id', 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'xRange', 'yRange',
 210     'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'useVoronoi', 'clipRadius', 'padData','highlightPoint','clearHighlights');
 211
 212   chart.options = nv.utils.optionsFunc.bind(chart);
 213
 214   chart.margin = function(_) {
 215     if (!arguments.length) return margin;
 216     margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
 217     margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
 218     margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
 219     margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
 220     return chart;
 221   };
 222
 223   chart.width = function(_) {
 224     if (!arguments.length) return width;
 225     width = _;
 226     return chart;
 227   };
 228
 229   chart.height = function(_) {
 230     if (!arguments.length) return height;
 231     height = _;
 232     return chart;
 233   };
 234
 235   chart.x = function(_) {
 236     if (!arguments.length) return getX;
 237     getX = _;
 238     scatter.x(_);
 239     return chart;
 240   };
 241
 242   chart.y = function(_) {
 243     if (!arguments.length) return getY;
 244     getY = _;
 245     scatter.y(_);
 246     return chart;
 247   };
 248
 249   chart.clipEdge = function(_) {
 250     if (!arguments.length) return clipEdge;
 251     clipEdge = _;
 252     return chart;
 253   };
 254
 255   chart.color = function(_) {
 256     if (!arguments.length) return color;
 257     color = nv.utils.getColor(_);
 258     scatter.color(color);
 259     return chart;
 260   };
 261
 262   chart.interpolate = function(_) {
 263     if (!arguments.length) return interpolate;
 264     interpolate = _;
 265     return chart;
 266   };
 267
 268   chart.defined = function(_) {
 269     if (!arguments.length) return defined;
 270     defined = _;
 271     return chart;
 272   };
 273
 274   chart.isArea = function(_) {
 275     if (!arguments.length) return isArea;
 276     isArea = d3.functor(_);
 277     return chart;
 278   };
 279
 280   //============================================================
 281
 282
 283   return chart;
 284 }