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

   1
   2 nv.models.scatterPlusLineChart = function() {
   3   "use strict";
   4   //============================================================
   5   // Public Variables with Default Settings
   6   //------------------------------------------------------------
   7
   8   var scatter      = nv.models.scatter()
   9     , xAxis        = nv.models.axis()
  10     , yAxis        = nv.models.axis()
  11     , legend       = nv.models.legend()
  12     , controls     = nv.models.legend()
  13     , distX        = nv.models.distribution()
  14     , distY        = nv.models.distribution()
  15     ;
  16
  17   var margin       = {top: 30, right: 20, bottom: 50, left: 75}
  18     , width        = null
  19     , height       = null
  20     , color        = nv.utils.defaultColor()
  21     , x            = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.xScale()
  22     , y            = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.yScale()
  23     , showDistX    = false
  24     , showDistY    = false
  25     , showLegend   = true
  26     , showXAxis    = true
  27     , showYAxis    = true
  28     , rightAlignYAxis = false
  29     , showControls = !!d3.fisheye
  30     , fisheye      = 0
  31     , pauseFisheye = false
  32     , tooltips     = true
  33     , tooltipX     = function(key, x, y) { return '<strong>' + x + '</strong>' }
  34     , tooltipY     = function(key, x, y) { return '<strong>' + y + '</strong>' }
  35     , tooltip      = function(key, x, y, date) { return '<h3>' + key + '</h3>'
  36                                                       + '<p>' + date + '</p>' }
  37     , state = {}
  38     , defaultState = null
  39     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
  40     , noData       = "No Data Available."
  41     , transitionDuration = 250
  42     ;
  43
  44   scatter
  45     .xScale(x)
  46     .yScale(y)
  47     ;
  48   xAxis
  49     .orient('bottom')
  50     .tickPadding(10)
  51     ;
  52   yAxis
  53     .orient((rightAlignYAxis) ? 'right' : 'left')
  54     .tickPadding(10)
  55     ;
  56   distX
  57     .axis('x')
  58     ;
  59   distY
  60     .axis('y')
  61     ;
  62
  63   controls.updateState(false);
  64   //============================================================
  65
  66
  67   //============================================================
  68   // Private Variables
  69   //------------------------------------------------------------
  70
  71   var x0, y0;
  72
  73   var showTooltip = function(e, offsetElement) {
  74     //TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)
  75
  76     var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
  77         top = e.pos[1] + ( offsetElement.offsetTop || 0),
  78         leftX = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
  79         topX = y.range()[0] + margin.top + ( offsetElement.offsetTop || 0),
  80         leftY = x.range()[0] + margin.left + ( offsetElement.offsetLeft || 0 ),
  81         topY = e.pos[1] + ( offsetElement.offsetTop || 0),
  82         xVal = xAxis.tickFormat()(scatter.x()(e.point, e.pointIndex)),
  83         yVal = yAxis.tickFormat()(scatter.y()(e.point, e.pointIndex));
  84
  85       if( tooltipX != null )
  86           nv.tooltip.show([leftX, topX], tooltipX(e.series.key, xVal, yVal, e, chart), 'n', 1, offsetElement, 'x-nvtooltip');
  87       if( tooltipY != null )
  88           nv.tooltip.show([leftY, topY], tooltipY(e.series.key, xVal, yVal, e, chart), 'e', 1, offsetElement, 'y-nvtooltip');
  89       if( tooltip != null )
  90           nv.tooltip.show([left, top], tooltip(e.series.key, xVal, yVal, e.point.tooltip, e, chart), e.value < 0 ? 'n' : 's', null, offsetElement);
  91   };
  92
  93   var controlsData = [
  94     { key: 'Magnify', disabled: true }
  95   ];
  96
  97   //============================================================
  98
  99
 100   function chart(selection) {
 101     selection.each(function(data) {
 102       var container = d3.select(this),
 103           that = this;
 104
 105       var availableWidth = (width  || parseInt(container.style('width')) || 960)
 106                              - margin.left - margin.right,
 107           availableHeight = (height || parseInt(container.style('height')) || 400)
 108                              - margin.top - margin.bottom;
 109
 110       chart.update = function() { container.transition().duration(transitionDuration).call(chart); };
 111       chart.container = this;
 112
 113       //set state.disabled
 114       state.disabled = data.map(function(d) { return !!d.disabled });
 115
 116       if (!defaultState) {
 117         var key;
 118         defaultState = {};
 119         for (key in state) {
 120           if (state[key] instanceof Array)
 121             defaultState[key] = state[key].slice(0);
 122           else
 123             defaultState[key] = state[key];
 124         }
 125       }
 126
 127       //------------------------------------------------------------
 128       // Display noData message if there's nothing to show.
 129
 130       if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
 131         var noDataText = container.selectAll('.nv-noData').data([noData]);
 132
 133         noDataText.enter().append('text')
 134           .attr('class', 'nvd3 nv-noData')
 135           .attr('dy', '-.7em')
 136           .style('text-anchor', 'middle');
 137
 138         noDataText
 139           .attr('x', margin.left + availableWidth / 2)
 140           .attr('y', margin.top + availableHeight / 2)
 141           .text(function(d) { return d });
 142
 143         return chart;
 144       } else {
 145         container.selectAll('.nv-noData').remove();
 146       }
 147
 148       //------------------------------------------------------------
 149
 150
 151       //------------------------------------------------------------
 152       // Setup Scales
 153
 154       x = scatter.xScale();
 155       y = scatter.yScale();
 156
 157       x0 = x0 || x;
 158       y0 = y0 || y;
 159
 160       //------------------------------------------------------------
 161
 162
 163       //------------------------------------------------------------
 164       // Setup containers and skeleton of chart
 165
 166       var wrap = container.selectAll('g.nv-wrap.nv-scatterChart').data([data]);
 167       var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatterChart nv-chart-' + scatter.id());
 168       var gEnter = wrapEnter.append('g');
 169       var g = wrap.select('g')
 170
 171       // background for pointer events
 172       gEnter.append('rect').attr('class', 'nvd3 nv-background').style("pointer-events","none");
 173
 174       gEnter.append('g').attr('class', 'nv-x nv-axis');
 175       gEnter.append('g').attr('class', 'nv-y nv-axis');
 176       gEnter.append('g').attr('class', 'nv-scatterWrap');
 177       gEnter.append('g').attr('class', 'nv-regressionLinesWrap');
 178       gEnter.append('g').attr('class', 'nv-distWrap');
 179       gEnter.append('g').attr('class', 'nv-legendWrap');
 180       gEnter.append('g').attr('class', 'nv-controlsWrap');
 181
 182       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 183
 184       if (rightAlignYAxis) {
 185           g.select(".nv-y.nv-axis")
 186               .attr("transform", "translate(" + availableWidth + ",0)");
 187       }
 188
 189       //------------------------------------------------------------
 190
 191
 192       //------------------------------------------------------------
 193       // Legend
 194
 195       if (showLegend) {
 196         legend.width( availableWidth / 2 );
 197
 198         wrap.select('.nv-legendWrap')
 199             .datum(data)
 200             .call(legend);
 201
 202         if ( margin.top != legend.height()) {
 203           margin.top = legend.height();
 204           availableHeight = (height || parseInt(container.style('height')) || 400)
 205                              - margin.top - margin.bottom;
 206         }
 207
 208         wrap.select('.nv-legendWrap')
 209             .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
 210       }
 211
 212       //------------------------------------------------------------
 213
 214
 215       //------------------------------------------------------------
 216       // Controls
 217
 218       if (showControls) {
 219         controls.width(180).color(['#444']);
 220         g.select('.nv-controlsWrap')
 221             .datum(controlsData)
 222             .attr('transform', 'translate(0,' + (-margin.top) +')')
 223             .call(controls);
 224       }
 225
 226       //------------------------------------------------------------
 227
 228
 229       //------------------------------------------------------------
 230       // Main Chart Component(s)
 231
 232       scatter
 233           .width(availableWidth)
 234           .height(availableHeight)
 235           .color(data.map(function(d,i) {
 236             return d.color || color(d, i);
 237           }).filter(function(d,i) { return !data[i].disabled }))
 238
 239       wrap.select('.nv-scatterWrap')
 240           .datum(data.filter(function(d) { return !d.disabled }))
 241           .call(scatter);
 242
 243       wrap.select('.nv-regressionLinesWrap')
 244           .attr('clip-path', 'url(#nv-edge-clip-' + scatter.id() + ')');
 245
 246       var regWrap = wrap.select('.nv-regressionLinesWrap').selectAll('.nv-regLines')
 247                       .data(function(d) {return d });
 248
 249       regWrap.enter().append('g').attr('class', 'nv-regLines');
 250
 251       var regLine = regWrap.selectAll('.nv-regLine').data(function(d){return [d]});
 252       var regLineEnter = regLine.enter()
 253                        .append('line').attr('class', 'nv-regLine')
 254                        .style('stroke-opacity', 0);
 255
 256       regLine
 257           .transition()
 258           .attr('x1', x.range()[0])
 259           .attr('x2', x.range()[1])
 260           .attr('y1', function(d,i) {return y(x.domain()[0] * d.slope + d.intercept) })
 261           .attr('y2', function(d,i) { return y(x.domain()[1] * d.slope + d.intercept) })
 262           .style('stroke', function(d,i,j) { return color(d,j) })
 263           .style('stroke-opacity', function(d,i) {
 264             return (d.disabled || typeof d.slope === 'undefined' || typeof d.intercept === 'undefined') ? 0 : 1
 265           });
 266
 267       //------------------------------------------------------------
 268
 269
 270       //------------------------------------------------------------
 271       // Setup Axes
 272
 273       if (showXAxis) {
 274         xAxis
 275             .scale(x)
 276             .ticks( xAxis.ticks() ? xAxis.ticks() : availableWidth / 100 )
 277             .tickSize( -availableHeight , 0);
 278
 279         g.select('.nv-x.nv-axis')
 280             .attr('transform', 'translate(0,' + y.range()[0] + ')')
 281             .call(xAxis);
 282       }
 283
 284       if (showYAxis) {
 285         yAxis
 286             .scale(y)
 287             .ticks( yAxis.ticks() ? yAxis.ticks() : availableHeight / 36 )
 288             .tickSize( -availableWidth, 0);
 289
 290         g.select('.nv-y.nv-axis')
 291             .call(yAxis);
 292       }
 293
 294
 295       if (showDistX) {
 296         distX
 297             .getData(scatter.x())
 298             .scale(x)
 299             .width(availableWidth)
 300             .color(data.map(function(d,i) {
 301               return d.color || color(d, i);
 302             }).filter(function(d,i) { return !data[i].disabled }));
 303         gEnter.select('.nv-distWrap').append('g')
 304             .attr('class', 'nv-distributionX');
 305         g.select('.nv-distributionX')
 306             .attr('transform', 'translate(0,' + y.range()[0] + ')')
 307             .datum(data.filter(function(d) { return !d.disabled }))
 308             .call(distX);
 309       }
 310
 311       if (showDistY) {
 312         distY
 313             .getData(scatter.y())
 314             .scale(y)
 315             .width(availableHeight)
 316             .color(data.map(function(d,i) {
 317               return d.color || color(d, i);
 318             }).filter(function(d,i) { return !data[i].disabled }));
 319         gEnter.select('.nv-distWrap').append('g')
 320             .attr('class', 'nv-distributionY');
 321         g.select('.nv-distributionY')
 322             .attr('transform', 'translate(' + (rightAlignYAxis ? availableWidth : -distY.size() ) + ',0)')
 323             .datum(data.filter(function(d) { return !d.disabled }))
 324             .call(distY);
 325       }
 326
 327       //------------------------------------------------------------
 328
 329
 330
 331
 332       if (d3.fisheye) {
 333         g.select('.nv-background')
 334             .attr('width', availableWidth)
 335             .attr('height', availableHeight)
 336             ;
 337
 338         g.select('.nv-background').on('mousemove', updateFisheye);
 339         g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye;});
 340         scatter.dispatch.on('elementClick.freezeFisheye', function() {
 341           pauseFisheye = !pauseFisheye;
 342         });
 343       }
 344
 345
 346       function updateFisheye() {
 347         if (pauseFisheye) {
 348           g.select('.nv-point-paths').style('pointer-events', 'all');
 349           return false;
 350         }
 351
 352         g.select('.nv-point-paths').style('pointer-events', 'none' );
 353
 354         var mouse = d3.mouse(this);
 355         x.distortion(fisheye).focus(mouse[0]);
 356         y.distortion(fisheye).focus(mouse[1]);
 357
 358         g.select('.nv-scatterWrap')
 359             .datum(data.filter(function(d) { return !d.disabled }))
 360             .call(scatter);
 361
 362         if (showXAxis)
 363           g.select('.nv-x.nv-axis').call(xAxis);
 364
 365         if (showYAxis)
 366           g.select('.nv-y.nv-axis').call(yAxis);
 367
 368         g.select('.nv-distributionX')
 369             .datum(data.filter(function(d) { return !d.disabled }))
 370             .call(distX);
 371         g.select('.nv-distributionY')
 372             .datum(data.filter(function(d) { return !d.disabled }))
 373             .call(distY);
 374       }
 375
 376
 377
 378       //============================================================
 379       // Event Handling/Dispatching (in chart's scope)
 380       //------------------------------------------------------------
 381
 382       controls.dispatch.on('legendClick', function(d,i) {
 383         d.disabled = !d.disabled;
 384
 385         fisheye = d.disabled ? 0 : 2.5;
 386         g.select('.nv-background') .style('pointer-events', d.disabled ? 'none' : 'all');
 387         g.select('.nv-point-paths').style('pointer-events', d.disabled ? 'all' : 'none' );
 388
 389         if (d.disabled) {
 390           x.distortion(fisheye).focus(0);
 391           y.distortion(fisheye).focus(0);
 392
 393           g.select('.nv-scatterWrap').call(scatter);
 394           g.select('.nv-x.nv-axis').call(xAxis);
 395           g.select('.nv-y.nv-axis').call(yAxis);
 396         } else {
 397           pauseFisheye = false;
 398         }
 399
 400         chart.update();
 401       });
 402
 403       legend.dispatch.on('stateChange', function(newState) {
 404         state = newState;
 405         dispatch.stateChange(state);
 406         chart.update();
 407       });
 408
 409
 410       scatter.dispatch.on('elementMouseover.tooltip', function(e) {
 411         d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distx-' + e.pointIndex)
 412             .attr('y1', e.pos[1] - availableHeight);
 413         d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-disty-' + e.pointIndex)
 414             .attr('x2', e.pos[0] + distX.size());
 415
 416         e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
 417         dispatch.tooltipShow(e);
 418       });
 419
 420       dispatch.on('tooltipShow', function(e) {
 421         if (tooltips) showTooltip(e, that.parentNode);
 422       });
 423
 424       // Update chart from a state object passed to event handler
 425       dispatch.on('changeState', function(e) {
 426
 427         if (typeof e.disabled !== 'undefined') {
 428           data.forEach(function(series,i) {
 429             series.disabled = e.disabled[i];
 430           });
 431
 432           state.disabled = e.disabled;
 433         }
 434
 435         chart.update();
 436       });
 437
 438       //============================================================
 439
 440
 441       //store old scales for use in transitions on update
 442       x0 = x.copy();
 443       y0 = y.copy();
 444
 445
 446     });
 447
 448     return chart;
 449   }
 450
 451
 452   //============================================================
 453   // Event Handling/Dispatching (out of chart's scope)
 454   //------------------------------------------------------------
 455
 456   scatter.dispatch.on('elementMouseout.tooltip', function(e) {
 457     dispatch.tooltipHide(e);
 458
 459     d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distx-' + e.pointIndex)
 460         .attr('y1', 0);
 461     d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-disty-' + e.pointIndex)
 462         .attr('x2', distY.size());
 463   });
 464   dispatch.on('tooltipHide', function() {
 465     if (tooltips) nv.tooltip.cleanup();
 466   });
 467
 468   //============================================================
 469
 470
 471   //============================================================
 472   // Expose Public Variables
 473   //------------------------------------------------------------
 474
 475   // expose chart's sub-components
 476   chart.dispatch = dispatch;
 477   chart.scatter = scatter;
 478   chart.legend = legend;
 479   chart.controls = controls;
 480   chart.xAxis = xAxis;
 481   chart.yAxis = yAxis;
 482   chart.distX = distX;
 483   chart.distY = distY;
 484
 485   d3.rebind(chart, scatter, 'id', 'interactive', 'pointActive', 'x', 'y', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'xRange', 'yRange', 'sizeDomain', 'sizeRange', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'useVoronoi');
 486
 487   chart.options = nv.utils.optionsFunc.bind(chart);
 488
 489   chart.margin = function(_) {
 490     if (!arguments.length) return margin;
 491     margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
 492     margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
 493     margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
 494     margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
 495     return chart;
 496   };
 497
 498   chart.width = function(_) {
 499     if (!arguments.length) return width;
 500     width = _;
 501     return chart;
 502   };
 503
 504   chart.height = function(_) {
 505     if (!arguments.length) return height;
 506     height = _;
 507     return chart;
 508   };
 509
 510   chart.color = function(_) {
 511     if (!arguments.length) return color;
 512     color = nv.utils.getColor(_);
 513     legend.color(color);
 514     distX.color(color);
 515     distY.color(color);
 516     return chart;
 517   };
 518
 519   chart.showDistX = function(_) {
 520     if (!arguments.length) return showDistX;
 521     showDistX = _;
 522     return chart;
 523   };
 524
 525   chart.showDistY = function(_) {
 526     if (!arguments.length) return showDistY;
 527     showDistY = _;
 528     return chart;
 529   };
 530
 531   chart.showControls = function(_) {
 532     if (!arguments.length) return showControls;
 533     showControls = _;
 534     return chart;
 535   };
 536
 537   chart.showLegend = function(_) {
 538     if (!arguments.length) return showLegend;
 539     showLegend = _;
 540     return chart;
 541   };
 542
 543   chart.showXAxis = function(_) {
 544     if (!arguments.length) return showXAxis;
 545     showXAxis = _;
 546     return chart;
 547   };
 548
 549   chart.showYAxis = function(_) {
 550     if (!arguments.length) return showYAxis;
 551     showYAxis = _;
 552     return chart;
 553   };
 554
 555   chart.rightAlignYAxis = function(_) {
 556     if(!arguments.length) return rightAlignYAxis;
 557     rightAlignYAxis = _;
 558     yAxis.orient( (_) ? 'right' : 'left');
 559     return chart;
 560   };
 561
 562   chart.fisheye = function(_) {
 563     if (!arguments.length) return fisheye;
 564     fisheye = _;
 565     return chart;
 566   };
 567
 568   chart.tooltips = function(_) {
 569     if (!arguments.length) return tooltips;
 570     tooltips = _;
 571     return chart;
 572   };
 573
 574   chart.tooltipContent = function(_) {
 575     if (!arguments.length) return tooltip;
 576     tooltip = _;
 577     return chart;
 578   };
 579
 580   chart.tooltipXContent = function(_) {
 581     if (!arguments.length) return tooltipX;
 582     tooltipX = _;
 583     return chart;
 584   };
 585
 586   chart.tooltipYContent = function(_) {
 587     if (!arguments.length) return tooltipY;
 588     tooltipY = _;
 589     return chart;
 590   };
 591
 592   chart.state = function(_) {
 593     if (!arguments.length) return state;
 594     state = _;
 595     return chart;
 596   };
 597
 598   chart.defaultState = function(_) {
 599     if (!arguments.length) return defaultState;
 600     defaultState = _;
 601     return chart;
 602   };
 603
 604   chart.noData = function(_) {
 605     if (!arguments.length) return noData;
 606     noData = _;
 607     return chart;
 608   };
 609
 610   chart.transitionDuration = function(_) {
 611     if (!arguments.length) return transitionDuration;
 612     transitionDuration = _;
 613     return chart;
 614   };
 615
 616   //============================================================
 617
 618
 619   return chart;
 620 }