diff options
author | 2017-09-01 11:57:47 +0800 | |
---|---|---|
committer | 2017-09-01 11:57:58 +0800 | |
commit | 57dbba269d19bc59fad89160200bb2dbcccb9003 (patch) | |
tree | d466041ceffa2161124ca79a48b3e077777c74b8 /usecaseui-common/src/main/webapp/app/fusion/external/d3/js/models/lineWithFisheyeChart.js | |
parent | 4ff32341a0af1972b44a7410e76e9b231131e7ab (diff) |
Upload Monitor function code
Change-Id: I33ad76221b4cb771a298ff240245fc24be664efb
Issue-Id: USECASEUI-6
Signed-off-by: shentao <shentao@chinamobile.com>
Diffstat (limited to 'usecaseui-common/src/main/webapp/app/fusion/external/d3/js/models/lineWithFisheyeChart.js')
-rw-r--r-- | usecaseui-common/src/main/webapp/app/fusion/external/d3/js/models/lineWithFisheyeChart.js | 297 |
1 files changed, 297 insertions, 0 deletions
diff --git a/usecaseui-common/src/main/webapp/app/fusion/external/d3/js/models/lineWithFisheyeChart.js b/usecaseui-common/src/main/webapp/app/fusion/external/d3/js/models/lineWithFisheyeChart.js new file mode 100644 index 00000000..ad894190 --- /dev/null +++ b/usecaseui-common/src/main/webapp/app/fusion/external/d3/js/models/lineWithFisheyeChart.js @@ -0,0 +1,297 @@ + +nv.models.lineChart = function() { + "use strict"; + var margin = {top: 30, right: 20, bottom: 50, left: 60}, + color = nv.utils.defaultColor(), + width = null, + height = null, + showLegend = true, + showControls = true, + fisheye = 0, + pauseFisheye = false, + tooltips = true, + tooltip = function(key, x, y, e, graph) { + return '<h3>' + key + '</h3>' + + '<p>' + y + ' at ' + x + '</p>' + }, + noData = "No Data Available." + ; + + + var x = d3.fisheye.scale(d3.scale.linear).distortion(0); + + var lines = nv.models.line().xScale(x), + //x = lines.xScale(), + y = lines.yScale(), + xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5), + yAxis = nv.models.axis().scale(y).orient('left'), + legend = nv.models.legend().height(30), + controls = nv.models.legend().height(30).updateState(false), + dispatch = d3.dispatch('tooltipShow', 'tooltipHide'); + + + var showTooltip = function(e, offsetElement) { + var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ), + top = e.pos[1] + ( offsetElement.offsetTop || 0), + x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)), + y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex)), + content = tooltip(e.series.key, x, y, e, chart); + + nv.tooltip.show([left, top], content, null, null, offsetElement); + }; + + + var controlsData = [ + { key: 'Magnify', disabled: true } + ]; + + + function chart(selection) { + selection.each(function(data) { + var container = d3.select(this), + that = this; + + var availableWidth = (width || parseInt(container.style('width')) || 960) + - margin.left - margin.right, + availableHeight = (height || parseInt(container.style('height')) || 400) + - margin.top - margin.bottom; + + chart.update = function() { container.transition().call(chart) }; + chart.container = this; // I need a reference to the container in order to have outside code check if the chart is visible or not + //------------------------------------------------------------ + // Display No Data message if there's nothing to show. + + if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) { + container.append('text') + .attr('class', 'nvd3 nv-noData') + .attr('x', availableWidth / 2) + .attr('y', availableHeight / 2) + .attr('dy', '-.7em') + .style('text-anchor', 'middle') + .text(noData); + return chart; + } else { + container.select('.nv-noData').remove(); + } + + //------------------------------------------------------------ + + + + var wrap = container.selectAll('g.nv-wrap.nv-lineChart').data([data]); + var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g'); + + + gEnter.append('rect') + .attr('class', 'nvd3 nv-background') + .attr('width', availableWidth) + .attr('height', availableHeight); + + + gEnter.append('g').attr('class', 'nv-x nv-axis'); + gEnter.append('g').attr('class', 'nv-y nv-axis'); + gEnter.append('g').attr('class', 'nv-linesWrap'); + gEnter.append('g').attr('class', 'nv-legendWrap'); + gEnter.append('g').attr('class', 'nv-controlsWrap'); + gEnter.append('g').attr('class', 'nv-controlsWrap'); + + + var g = wrap.select('g'); + + + + + if (showLegend) { + legend.width(availableWidth); + + g.select('.nv-legendWrap') + .datum(data) + .call(legend); + + if ( margin.top != legend.height()) { + margin.top = legend.height(); + availableHeight = (height || parseInt(container.style('height')) || 400) + - margin.top - margin.bottom; + } + + g.select('.nv-legendWrap') + .attr('transform', 'translate(0,' + (-margin.top) +')') + } + + if (showControls) { + controls.width(180).color(['#444']); + g.select('.nv-controlsWrap') + .datum(controlsData) + .attr('transform', 'translate(0,' + (-margin.top) +')') + .call(controls); + } + + + + lines + .width(availableWidth) + .height(availableHeight) + .color(data.map(function(d,i) { + return d.color || color(d, i); + }).filter(function(d,i) { return !data[i].disabled })); + + + + g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); + + + var linesWrap = g.select('.nv-linesWrap') + .datum(data.filter(function(d) { return !d.disabled })) + + d3.transition(linesWrap).call(lines); + + + + xAxis + //.scale(x) + .ticks( availableWidth / 100 ) + .tickSize(-availableHeight, 0); + + g.select('.nv-x.nv-axis') + .attr('transform', 'translate(0,' + y.range()[0] + ')'); + d3.transition(g.select('.nv-x.nv-axis')) + .call(xAxis); + + + yAxis + //.scale(y) + .ticks( availableHeight / 36 ) + .tickSize( -availableWidth, 0); + + d3.transition(g.select('.nv-y.nv-axis')) + .call(yAxis); + + + + g.select('.nv-background').on('mousemove', updateFisheye); + g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye; }); + //g.select('.point-paths').on('mousemove', updateFisheye); + + + function updateFisheye() { + if (pauseFisheye) { + //g.select('.background') .style('pointer-events', 'none'); + g.select('.nv-point-paths').style('pointer-events', 'all'); + return false; + } + + g.select('.nv-background') .style('pointer-events', 'all'); + g.select('.nv-point-paths').style('pointer-events', 'none' ); + + var mouse = d3.mouse(this); + linesWrap.call(lines); + g.select('.nv-x.nv-axis').call(xAxis); + x.distortion(fisheye).focus(mouse[0]); + } + + + controls.dispatch.on('legendClick', function(d,i) { + d.disabled = !d.disabled; + + fisheye = d.disabled ? 0 : 5; + g.select('.nv-background') .style('pointer-events', d.disabled ? 'none' : 'all'); + g.select('.nv-point-paths').style('pointer-events', d.disabled ? 'all' : 'none' ); + + //scatter.interactive(d.disabled); + //tooltips = d.disabled; + + if (d.disabled) { + x.distortion(fisheye).focus(0); + + linesWrap.call(lines); + g.select('.nv-x.nv-axis').call(xAxis); + } else { + pauseFisheye = false; + } + + chart.update(); + }); + + + legend.dispatch.on('stateChange', function(newState) { + chart.update(); + }); + + lines.dispatch.on('elementMouseover.tooltip', function(e) { + e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top]; + dispatch.tooltipShow(e); + }); + if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, that.parentNode) } ); // TODO: maybe merge with above? + + lines.dispatch.on('elementMouseout.tooltip', function(e) { + dispatch.tooltipHide(e); + }); + if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup); + + }); + + return chart; + } + + + chart.dispatch = dispatch; + chart.legend = legend; + chart.xAxis = xAxis; + chart.yAxis = yAxis; + + d3.rebind(chart, lines, 'defined', 'x', 'y', 'size', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate'); + + chart.options = nv.utils.optionsFunc.bind(chart); + + chart.margin = function(_) { + if (!arguments.length) return margin; + margin = _; + return chart; + }; + + chart.width = function(_) { + if (!arguments.length) return width; + width = _; + return chart; + }; + + chart.height = function(_) { + if (!arguments.length) return height; + height = _; + return chart; + }; + + chart.color = function(_) { + if (!arguments.length) return color; + color = nv.utils.getColor(_); + legend.color(color); + return chart; + }; + + chart.showLegend = function(_) { + if (!arguments.length) return showLegend; + showLegend = _; + return chart; + }; + + chart.tooltips = function(_) { + if (!arguments.length) return tooltips; + tooltips = _; + return chart; + }; + + chart.tooltipContent = function(_) { + if (!arguments.length) return tooltip; + tooltip = _; + return chart; + }; + + chart.noData = function(_) { + if (!arguments.length) return noData; + noData = _; + return chart; + }; + + + return chart; +} |