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

   1
   2 nv.models.lineChart = function() {
   3   "use strict";
   4   var margin = {top: 30, right: 20, bottom: 50, left: 60},
   5       color = nv.utils.defaultColor(),
   6       width = null,
   7       height = null,
   8       showLegend = true,
   9       showControls = true,
  10       fisheye = 0,
  11       pauseFisheye = false,
  12       tooltips = true,
  13       tooltip = function(key, x, y, e, graph) {
  14         return '<h3>' + key + '</h3>' +
  15                '<p>' +  y + ' at ' + x + '</p>'
  16       },
  17       noData = "No Data Available."
  18       ;
  19
  20
  21   var x = d3.fisheye.scale(d3.scale.linear).distortion(0);
  22
  23   var lines = nv.models.line().xScale(x),
  24       //x = lines.xScale(),
  25       y = lines.yScale(),
  26       xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
  27       yAxis = nv.models.axis().scale(y).orient('left'),
  28       legend = nv.models.legend().height(30),
  29       controls = nv.models.legend().height(30).updateState(false),
  30       dispatch = d3.dispatch('tooltipShow', 'tooltipHide');
  31
  32
  33   var showTooltip = function(e, offsetElement) {
  34     var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
  35         top = e.pos[1] + ( offsetElement.offsetTop || 0),
  36         x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
  37         y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex)),
  38         content = tooltip(e.series.key, x, y, e, chart);
  39
  40     nv.tooltip.show([left, top], content, null, null, offsetElement);
  41   };
  42
  43
  44   var controlsData = [
  45     { key: 'Magnify', disabled: true }
  46   ];
  47
  48
  49   function chart(selection) {
  50     selection.each(function(data) {
  51       var container = d3.select(this),
  52           that = this;
  53
  54       var availableWidth = (width  || parseInt(container.style('width')) || 960)
  55                              - margin.left - margin.right,
  56           availableHeight = (height || parseInt(container.style('height')) || 400)
  57                              - margin.top - margin.bottom;
  58
  59     chart.update = function() { container.transition().call(chart) };
  60     chart.container = this; // I need a reference to the container in order to have outside code check if the chart is visible or not
  61       //------------------------------------------------------------
  62       // Display No Data message if there's nothing to show.
  63
  64       if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
  65         container.append('text')
  66           .attr('class', 'nvd3 nv-noData')
  67           .attr('x', availableWidth / 2)
  68           .attr('y', availableHeight / 2)
  69           .attr('dy', '-.7em')
  70           .style('text-anchor', 'middle')
  71           .text(noData);
  72           return chart;
  73       } else {
  74         container.select('.nv-noData').remove();
  75       }
  76
  77       //------------------------------------------------------------
  78
  79
  80
  81       var wrap = container.selectAll('g.nv-wrap.nv-lineChart').data([data]);
  82       var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g');
  83
  84
  85       gEnter.append('rect')
  86           .attr('class', 'nvd3 nv-background')
  87           .attr('width', availableWidth)
  88           .attr('height', availableHeight);
  89
  90
  91       gEnter.append('g').attr('class', 'nv-x nv-axis');
  92       gEnter.append('g').attr('class', 'nv-y nv-axis');
  93       gEnter.append('g').attr('class', 'nv-linesWrap');
  94       gEnter.append('g').attr('class', 'nv-legendWrap');
  95       gEnter.append('g').attr('class', 'nv-controlsWrap');
  96       gEnter.append('g').attr('class', 'nv-controlsWrap');
  97
  98
  99       var g = wrap.select('g');
 100
 101
 102
 103
 104       if (showLegend) {
 105         legend.width(availableWidth);
 106
 107         g.select('.nv-legendWrap')
 108             .datum(data)
 109             .call(legend);
 110
 111         if ( margin.top != legend.height()) {
 112           margin.top = legend.height();
 113           availableHeight = (height || parseInt(container.style('height')) || 400)
 114                              - margin.top - margin.bottom;
 115         }
 116
 117         g.select('.nv-legendWrap')
 118             .attr('transform', 'translate(0,' + (-margin.top) +')')
 119       }
 120
 121       if (showControls) {
 122         controls.width(180).color(['#444']);
 123         g.select('.nv-controlsWrap')
 124             .datum(controlsData)
 125             .attr('transform', 'translate(0,' + (-margin.top) +')')
 126             .call(controls);
 127       }
 128
 129
 130
 131       lines
 132         .width(availableWidth)
 133         .height(availableHeight)
 134         .color(data.map(function(d,i) {
 135           return d.color || color(d, i);
 136         }).filter(function(d,i) { return !data[i].disabled }));
 137
 138
 139
 140       g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 141
 142
 143       var linesWrap = g.select('.nv-linesWrap')
 144           .datum(data.filter(function(d) { return !d.disabled }))
 145
 146       d3.transition(linesWrap).call(lines);
 147
 148
 149
 150       xAxis
 151         //.scale(x)
 152         .ticks( availableWidth / 100 )
 153         .tickSize(-availableHeight, 0);
 154
 155       g.select('.nv-x.nv-axis')
 156           .attr('transform', 'translate(0,' + y.range()[0] + ')');
 157       d3.transition(g.select('.nv-x.nv-axis'))
 158           .call(xAxis);
 159
 160
 161       yAxis
 162         //.scale(y)
 163         .ticks( availableHeight / 36 )
 164         .tickSize( -availableWidth, 0);
 165
 166       d3.transition(g.select('.nv-y.nv-axis'))
 167           .call(yAxis);
 168
 169
 170
 171       g.select('.nv-background').on('mousemove', updateFisheye);
 172       g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye; });
 173       //g.select('.point-paths').on('mousemove', updateFisheye);
 174
 175
 176       function updateFisheye() {
 177         if (pauseFisheye) {
 178           //g.select('.background') .style('pointer-events', 'none');
 179           g.select('.nv-point-paths').style('pointer-events', 'all');
 180           return false;
 181         }
 182
 183         g.select('.nv-background') .style('pointer-events', 'all');
 184         g.select('.nv-point-paths').style('pointer-events', 'none' );
 185
 186         var mouse = d3.mouse(this);
 187         linesWrap.call(lines);
 188         g.select('.nv-x.nv-axis').call(xAxis);
 189         x.distortion(fisheye).focus(mouse[0]);
 190       }
 191
 192
 193       controls.dispatch.on('legendClick', function(d,i) {
 194         d.disabled = !d.disabled;
 195
 196         fisheye = d.disabled ? 0 : 5;
 197         g.select('.nv-background') .style('pointer-events', d.disabled ? 'none' : 'all');
 198         g.select('.nv-point-paths').style('pointer-events', d.disabled ? 'all' : 'none' );
 199
 200         //scatter.interactive(d.disabled);
 201         //tooltips = d.disabled;
 202
 203         if (d.disabled) {
 204           x.distortion(fisheye).focus(0);
 205
 206           linesWrap.call(lines);
 207           g.select('.nv-x.nv-axis').call(xAxis);
 208         } else {
 209           pauseFisheye = false;
 210         }
 211
 212         chart.update();
 213       });
 214
 215
 216       legend.dispatch.on('stateChange', function(newState) {
 217         chart.update();
 218       });
 219
 220       lines.dispatch.on('elementMouseover.tooltip', function(e) {
 221         e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
 222         dispatch.tooltipShow(e);
 223       });
 224       if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, that.parentNode) } ); // TODO: maybe merge with above?
 225
 226       lines.dispatch.on('elementMouseout.tooltip', function(e) {
 227         dispatch.tooltipHide(e);
 228       });
 229       if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
 230
 231     });
 232
 233     return chart;
 234   }
 235
 236
 237   chart.dispatch = dispatch;
 238   chart.legend = legend;
 239   chart.xAxis = xAxis;
 240   chart.yAxis = yAxis;
 241
 242   d3.rebind(chart, lines, 'defined', 'x', 'y', 'size', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate');
 243
 244   chart.options = nv.utils.optionsFunc.bind(chart);
 245
 246   chart.margin = function(_) {
 247     if (!arguments.length) return margin;
 248     margin = _;
 249     return chart;
 250   };
 251
 252   chart.width = function(_) {
 253     if (!arguments.length) return width;
 254     width = _;
 255     return chart;
 256   };
 257
 258   chart.height = function(_) {
 259     if (!arguments.length) return height;
 260     height = _;
 261     return chart;
 262   };
 263
 264   chart.color = function(_) {
 265     if (!arguments.length) return color;
 266     color = nv.utils.getColor(_);
 267     legend.color(color);
 268     return chart;
 269   };
 270
 271   chart.showLegend = function(_) {
 272     if (!arguments.length) return showLegend;
 273     showLegend = _;
 274     return chart;
 275   };
 276
 277   chart.tooltips = function(_) {
 278     if (!arguments.length) return tooltips;
 279     tooltips = _;
 280     return chart;
 281   };
 282
 283   chart.tooltipContent = function(_) {
 284     if (!arguments.length) return tooltip;
 285     tooltip = _;
 286     return chart;
 287   };
 288
 289   chart.noData = function(_) {
 290     if (!arguments.length) return noData;
 291     noData = _;
 292     return chart;
 293   };
 294
 295
 296   return chart;
 297 }