| <!-- The <plot-simple-sk> custom element declaration. |
| |
| A custom element for plotting x,y graphs. |
| |
| Attributes: |
| width - The width of the element in px. |
| |
| height - The height of the element in px. |
| |
| nocrosshair - If true then the mouse following croshair is hidden. |
| |
| specialevents - If true then special lines emit events also. |
| |
| Events: |
| trace_selected - Event produced when the user clicks on a line. |
| The e.detail contains the id of the line and the index of the |
| point in the line closest to the mouse, and the [x, y] value |
| of the point in 'pt'. |
| |
| e.detail = { |
| id: "id of trace", |
| index: 3, |
| pt: [2, 34.5], |
| } |
| |
| trace_focused - Event produced when the user moves the mouse close |
| to a line. The e.detail contains the id of the line and the index of the |
| point in the line closest to the mouse. |
| |
| e.detail = { |
| id: "id of trace", |
| index: 3, |
| pt: [2, 34.5], |
| } |
| |
| zoom - Event produced when the user has zoomed into a region |
| by dragging. |
| |
| Methods: |
| addLines(lines) - Add lines to the plot, where lines is an object that |
| maps the line id to an array of [x, y] points. For example: |
| |
| var lines = { |
| foo: [ |
| [0.1, 3.7], |
| [0.2, 3.8], |
| [0.4, 3.0], |
| ], |
| bar: [ |
| [0.0, 2.5], |
| [0.2, 4.2], |
| [0.5, 3.9], |
| ], |
| }; |
| plot.addLines(lines); |
| |
| Any line id that begins with "special" will be treated specially, |
| i.e. it will be presented as a dashed black line that doesn't |
| generate events. This may be useful for adding a line at y=0, |
| or a reference trace. |
| |
| deleteLine(id) - Removes the line with the given id from the plot. |
| If no line with that id exists then the function returns without |
| any action. |
| |
| removeAll() - Removes all lines from the plot. |
| |
| setHighlight(ids) - Highlights all the lines that have an id that |
| appears in the array 'ids'. |
| |
| plot.setHighlight(["foo", "bar"]) |
| |
| clearHighlight() - Removes highlighting from all lines. |
| |
| highlighted() - Returns the ids of all the lines that are highlighted. |
| |
| setXBar(x) - Places a distinct vertical bar at the given location |
| on the x-axis. There can be at most only one xbar placed at any |
| one time. |
| |
| clearXBar() - Removes the vertical bar placed by setXBar(). |
| |
| setBanding(bands) - Set a background highlight for the given x ranges |
| given in 'bands'. |
| |
| var bands = [ |
| [0.0, 0.1], |
| [0.5, 1.2], |
| ]; |
| plot.setBanding(bands); |
| |
| setTicks(ticks) - Sets the tick mark locations and values. If not called |
| then uniformly spaces tick marks in the x axis units are displayed. |
| The value of ticks is an object that maps x axis values to their display |
| value. |
| |
| var ticks = { |
| 1: "5th", |
| 10: "6th", |
| 25: "7th", |
| }; |
| |
| resetAxes() - Resets the axes back after the user has zoomed. |
| |
| --> |
| <link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html"> |
| <script src="/res/imp/bower_components/d3/d3.min.js"></script> |
| |
| <!-- |
| Styles for the svg elements used in plot-simple-sk are kept in a separate |
| CSS file since we are using d3 to manage those elements and not the |
| Polymer.dom() functions, so the whole magic CSS scoping stuff doesn't |
| work, so we just prefix every rule with plot-simple-sk. |
| --> |
| <link rel="stylesheet" href="plot-simple.css"> |
| |
| <dom-module id="plot-simple-sk"> |
| <template> |
| <svg id="svg" width$="{{width}}" height$="{{height}}" |
| class$="{{noCrosshair(nocrosshair)}}"> |
| <defs> |
| <clipPath id="clip"> |
| <rect x="0" y="0" width="1000" height="500" /> |
| </clipPath> |
| </defs> |
| </svg> |
| </template> |
| </dom-module> |
| |
| <script> |
| (function () { |
| var SPECIAL = "special"; |
| |
| var colors = [ |
| "#000000", |
| "#1B9E77", |
| "#D95F02", |
| "#7570B3", |
| "#E7298A", |
| "#66A61E", |
| "#E6AB02", |
| "#A6761D", |
| "#666666", |
| ]; |
| |
| var margins = { |
| top: 20, |
| right: 10, |
| bottom: 20, |
| left: 80 |
| }; |
| |
| Polymer({ |
| is: "plot-simple-sk", |
| |
| properties: { |
| width: { |
| type: Number, |
| value: 1000, |
| reflectToAttribute: true, |
| observer: "_calcSize", |
| }, |
| height: { |
| type: Number, |
| value: 500, |
| reflectToAttribute: true, |
| observer: "_calcSize", |
| }, |
| nocrosshair: { |
| type: Boolean, |
| value: false, |
| reflectToAttribute: true, |
| }, |
| specialevents: { |
| type: Boolean, |
| value: false, |
| }, |
| }, |
| |
| ready: function() { |
| // The last reported position of the mouse, in plot and native |
| // coordinates. |
| this._mouse = { |
| x: 0, |
| y: 0, |
| x_native: 0, |
| y_native: 0, |
| }; |
| |
| // The closes line to the mouse, calculated after every mouse move |
| // event. |
| this._closest = { |
| d: 1e20, |
| trace: -1, |
| index: -1, |
| value: 0, |
| }; |
| |
| // The location of the XBar. See setXBar(). |
| this._xbarx = 0; |
| |
| // The locations of the background bands. See setBanding(). |
| this._bands = []; |
| |
| // The values of the custom x-axis tick marks, if set. See setTicks(). |
| this._ticks = {}; |
| |
| this._lineData = [ ]; |
| this._initialSetup(); |
| this.resetAxes(); |
| this._plot(); |
| }, |
| |
| // lines is a map to the line data. |
| addLines: function(lines) { |
| Object.keys(lines).forEach(function(id) { |
| var line = lines[id]; |
| line._id = id; |
| line._hash = (sk.hashString(id) % 8) + 1; |
| if (id.startsWith(SPECIAL)) { |
| line._hash = 0; |
| } |
| this._lineData.push(line); |
| }.bind(this)); |
| this.resetAxes(); |
| this._plot(); |
| }, |
| |
| deleteLine: function(id) { |
| // First clear all the lines, but backup _lineData for later use. |
| var backup = this._lineData; |
| this.removeAll(); |
| // Then re-add all the lines except the one we want deleted. |
| for (var i = backup.length - 1; i >= 0; i--) { |
| if (backup[i]._id != id) { |
| this._lineData.push(backup[i]); |
| } |
| } |
| this._plot(); |
| }, |
| |
| removeAll: function() { |
| this._lineData = []; |
| this._plot(); |
| }, |
| |
| setHighlight: function(ids) { |
| $$('.trace').forEach(function(ele) { |
| if (ids.indexOf(ele.getAttribute('data-id')) != -1) { |
| ele.classList.add('highlight'); |
| } |
| }); |
| }, |
| |
| highlighted: function() { |
| var ids = []; |
| $$('.trace.highlight').forEach(function(ele) { |
| ids.push(ele.getAttribute('data-id')); |
| }); |
| return ids; |
| }, |
| |
| clearHighlight: function() { |
| this._svg.selectAll(".trace") |
| .classed('highlight', false); |
| }, |
| |
| setXBar: function(x) { |
| this._xbarx = x; |
| this._xbar |
| .attr('x1', this._xRange(x)) |
| .attr('x2', this._xRange(x)) |
| .classed('displayed', true); |
| }, |
| |
| clearXBar: function(x) { |
| this._xbar |
| .classed('displayed', false); |
| }, |
| |
| setBanding: function(bands) { |
| this._bands = bands; |
| this._plot(); |
| }, |
| |
| setTicks: function(ticks) { |
| var values = Object.keys(ticks).sort(); |
| this._ticks = ticks; |
| |
| this._xAxis |
| .tickValues(values) |
| .tickFormat(function(d) { return this._ticks[d]; }.bind(this)); |
| |
| this._plot(); |
| }, |
| |
| resetAxes: function() { |
| if (!this._lineData || !this._xRange) { |
| return |
| } |
| xMin = d3.min(this._lineData, function (d) { return d3.min(d, function (d) { return d[0]; }) }); |
| xMax = d3.max(this._lineData, function (d) { return d3.max(d, function (d) { return d[0]; }) }); |
| yMin = d3.min(this._lineData, function (d) { return d3.min(d, function (d) { return d[1]; }) }); |
| yMax = d3.max(this._lineData, function (d) { return d3.max(d, function (d) { return d[1]; }) }); |
| var xMargin = Math.abs(xMax - xMin)*0.02; |
| var yMargin = Math.abs(yMax - yMin)*0.02; |
| this._xRange.domain([xMin-xMargin, xMax+xMargin]); |
| this._yRange.domain([yMin-yMargin, yMax+yMargin]); |
| this._plot(); |
| }, |
| |
| // Create an event from this._closest of the given name. |
| _eventFromClosest: function(name) { |
| var id = this._lineData[this._closest.trace]._id; |
| if (!this.specialevents && id.startsWith(SPECIAL)) { |
| return |
| } |
| var detail = { |
| id: id, |
| index: this._closest.index, |
| value: this._closest.value, |
| pt: this._closest.pt, |
| } |
| this.dispatchEvent(new CustomEvent(name, {detail: detail, bubbles: true})); |
| }, |
| |
| _click: function() { |
| if (this._closest.trace == -1) { |
| return |
| } |
| this._eventFromClosest("trace_selected"); |
| }, |
| |
| _move: function(p) { |
| this._mouse.x_native = p[0] - margins.left; |
| this._mouse.y_native = p[1] - margins.top; |
| |
| // Only do the minimal work in _move, schedule the rest of the work |
| // to be done later in _mouseMoveWork. |
| window.setTimeout(this._mouseMoveWork.bind(this), 1); |
| }, |
| |
| // Calculates new this._closest value based on the mouse position. |
| // Also updates the 'focused' status of lines and dots. |
| _mouseMoveWork: function() { |
| this._mouse.x = this._xRange.invert(this._mouse.x_native); |
| this._mouse.y = this._yRange.invert(this._mouse.y_native); |
| |
| this._vhair.attr('x1', this._mouse.x_native); |
| this._vhair.attr('x2', this._mouse.x_native); |
| this._hhair.attr('y1', this._mouse.y_native); |
| this._hhair.attr('y2', this._mouse.y_native); |
| |
| var oldTrace = this._closest.trace; |
| var oldCommit = this._closest.index; |
| |
| this._closest = { |
| d: 1e20, |
| trace: -1, |
| index: -1, |
| value: 0, |
| }; |
| // We are going to calculate the distance between all the points and |
| // the mouse. For that to work we'll normalize all the x and y deltas |
| // so they scale from 0 to 1.0. |
| var scalex = Math.abs(xMax - xMin); |
| var scaley = Math.abs(yMax - yMin); |
| for (var i = this._lineData.length - 1; i >= 0; i--) { |
| var atrace = this._lineData[i]; |
| for (var j = atrace.length - 1; j >= 0; j--) { |
| var pt = atrace[j]; |
| var d = Math.pow((pt[0] - this._mouse.x)/scalex, 2) + Math.pow((pt[1] - this._mouse.y)/scaley, 2); |
| if (d < this._closest.d) { |
| this._closest.d = d; |
| this._closest.trace = i; |
| this._closest.index= j; |
| this._closest.pt = pt; |
| this._closest.value= atrace[j][1]; |
| } |
| } |
| } |
| if (oldTrace != this._closest.trace || oldCommit != this._closest.index) { |
| this._svg.selectAll(".trace") |
| .classed('focused', false); |
| this._svg.selectAll(".dot") |
| .classed('focused', false); |
| if (this._closest.trace >= 0) { |
| this._svg.select("#trace_"+this._closest.trace) |
| .classed('focused', true); |
| this._svg.select("#trace_"+this._closest.trace + " .c"+this._closest.index) |
| .classed('focused', true); |
| } |
| |
| if (this._closest.trace != -1) { |
| this._eventFromClosest("trace_focused"); |
| } |
| } |
| }, |
| |
| _calcSize: function() { |
| if (!this.height || !this.width || !this._lineData) { |
| return; |
| } |
| var ele = this.$.svg; |
| this._outerWidth = ele.width.baseVal.value; |
| this._outerHeight = ele.height.baseVal.value; |
| this._width = this._outerWidth - margins.left - margins.right; |
| this._height = this._outerHeight - margins.top - margins.bottom; |
| d3.select(ele).select('#clip rect') |
| .attr('width', this._width) |
| .attr('height', this._height); |
| var xMin = d3.min(this._lineData, function (d) { return d3.min(d, function (d) { return d[0]; }) }); |
| var xMax = d3.max(this._lineData, function (d) { return d3.max(d, function (d) { return d[0]; }) }); |
| var yMin = d3.min(this._lineData, function (d) { return d3.min(d, function (d) { return d[1]; }) }); |
| var yMax = d3.max(this._lineData, function (d) { return d3.max(d, function (d) { return d[1]; }) }); |
| |
| this._xRange = d3.scale |
| .linear() |
| .range([0, this._width]) |
| .domain([xMin, xMax]); |
| |
| this._yRange = d3.scale |
| .linear() |
| .range([this._height, 0]) |
| .domain([yMin, yMax]); |
| |
| this._lineFunc = d3.svg.line() |
| .x(function (d) { return this._xRange(d[0]); }.bind(this)) |
| .y(function (d) { return this._yRange(d[1]); }.bind(this)) |
| .interpolate('linear'); |
| |
| this._xAxis = d3.svg.axis() |
| .scale(this._xRange) |
| .tickSize(5) |
| .tickSubdivide(true); |
| |
| this._yAxis = d3.svg.axis() |
| .scale(this._yRange) |
| .tickSize(5) |
| .orient("left") |
| .tickSubdivide(true); |
| |
| if (this._hhair) { |
| this._hhair.attr('x2', this._width); |
| } |
| |
| this.setTicks(this._ticks); |
| |
| this.resetAxes(); |
| }, |
| |
| // Creates the initial set of SVG elements. |
| _initialSetup: function() { |
| var ele = this.$.svg; |
| this._calcSize(); |
| |
| this._svg = d3.select(ele) |
| .append("g") |
| .attr("class", "top") |
| .attr("transform", "translate(" + margins.left + "," + margins.top + ")"); |
| |
| d3.select(ele) |
| .on("click", this._click.bind(this)) |
| .on("mousedown", this._mouseDown.bind(this)) |
| .on("mousemove", this._mouseMove.bind(this)) |
| .on("mouseup", this._mouseUp.bind(this)); |
| |
| this._svg.append("g") |
| .attr("class", "x axis") |
| .attr("transform", "translate(0," + this._height + ")") |
| .call(this._xAxis); |
| |
| this._svg.append("g") |
| .attr("class", "y axis") |
| .call(this._yAxis); |
| |
| // Add the crosshair. |
| this._hhair = this._svg.append("line") |
| .attr('x1', 0) |
| .attr('y1', 0) |
| .attr('x2', this._width) |
| .attr('y2', 0) |
| .attr('class', 'xhair'); |
| |
| this._vhair = this._svg.append("line") |
| .attr('x1', 0) |
| .attr('y1', 0) |
| .attr('x2', 0) |
| .attr('y2', this._height) |
| .attr('class', 'xhair'); |
| |
| this._xbar = this._svg.append("line") |
| .attr('x1', 0) |
| .attr('y1', 0) |
| .attr('x2', 0) |
| .attr('y2', this._height) |
| .attr('class', 'xbar'); |
| |
| this._vis = this._svg.append("g"); |
| }, |
| |
| |
| // Update the date displayed on the plot. |
| _plot: function() { |
| if (!this._vis) { |
| return |
| } |
| var trace = this._vis.selectAll(".trace") |
| .data(this._lineData); |
| |
| trace.enter().append("g") |
| .attr("class", function(d) { |
| var ret = "trace"; |
| if (d._id && d._id.startsWith(SPECIAL)) { |
| ret += " special"; |
| } |
| return ret |
| }) |
| .attr("clip-path", "url(#clip)") |
| .attr("stroke", function(d) { return colors[d._hash]; }) |
| .attr("id", function(d, i) { return "trace_" + i; }) |
| .attr("data-id", function(d) { return d._id; }) |
| .append("path") |
| .attr("stroke-width", 2) |
| .attr("fill", "none"); |
| |
| trace.exit().remove(); |
| |
| trace.selectAll("path") |
| .attr("d", function(d) { return this._lineFunc(d); }.bind(this)); |
| |
| var dots = trace.selectAll(".dot") |
| .data(function(d) { return d; }); |
| |
| dots.enter().append("circle") |
| .attr("class", function(d, i) { return "c" + i + " dot"; }) |
| .attr("r", 3.5); |
| |
| dots.exit().remove(); |
| |
| dots |
| .attr("cx", this._lineFunc.x()) |
| .attr("cy", this._lineFunc.y()); |
| |
| |
| var bands = this._vis.selectAll(".band") |
| .data(this._bands); |
| |
| bands.enter().append("rect") |
| .attr("class", "band") |
| |
| bands.exit().remove(); |
| |
| bands |
| .attr("x", function(d) { return this._xRange(d[0]); }.bind(this)) |
| .attr("y", 0) |
| .attr("width", function(d) { return this._xRange(d[1]) - this._xRange(d[0]); }.bind(this)) |
| .attr("height", function() { return this._height; }.bind(this)) |
| |
| if (this._xbar && this._xbarx && this._xRange(this._xbarx) ) { |
| this._xbar |
| .attr('x1', this._xRange(this._xbarx)) |
| .attr('x2', this._xRange(this._xbarx)) |
| } |
| |
| this._svg.select(".x.axis").call(this._xAxis); |
| this._svg.select(".y.axis").call(this._yAxis); |
| }, |
| |
| _mouseDown: function() { |
| var p = d3.mouse(this.$.svg); |
| |
| this._svg.append("rect") |
| .attr({ |
| rx : 6, |
| ry : 6, |
| class : "selectionrect", |
| x : p[0] - margins.left, |
| y : p[1] - margins.top, |
| width : 0, |
| height: 0, |
| }); |
| }, |
| |
| _mouseMove: function() { |
| var s = this._svg.select(".selectionrect"); |
| |
| if (s.empty()) { |
| this._move(d3.mouse(this.$.svg)); |
| return |
| } |
| |
| var p = d3.mouse(this.$.svg); |
| p[0] = p[0] - margins.left; |
| p[1] = p[1] - margins.top; |
| var d = { |
| x : parseInt(s.attr("x"), 10), |
| y : parseInt(s.attr("y"), 10), |
| width : parseInt(s.attr("width"), 10), |
| height: parseInt(s.attr("height"), 10) |
| }; |
| var dx = p[0] - d.x; |
| var dy = p[1]- d.y; |
| |
| if (dx < 1) { |
| d.x = p[0]; |
| d.width -= dx; |
| } else { |
| d.width = dx; |
| } |
| |
| if (dy < 1) { |
| d.y = p[1]; |
| d.height -= dy; |
| } else { |
| d.height = dy; |
| } |
| |
| s.attr(d); |
| }, |
| |
| _mouseUp: function() { |
| var r = this._svg.select(".selectionrect")[0][0]; |
| if (!r) { |
| return |
| } |
| var xMin = this._xRange.invert(r.x.baseVal.value); |
| var xMax = this._xRange.invert(r.x.baseVal.value + r.width.baseVal.value); |
| var yMax = this._yRange.invert(r.y.baseVal.value); |
| var yMin = this._yRange.invert(r.y.baseVal.value + r.height.baseVal.value); |
| this._svg.selectAll(".selectionrect").remove(); |
| |
| if (r.width.baseVal.value < 5 || r.height.baseVal.value < 5) { |
| return |
| } |
| |
| this._xRange.domain([xMin, xMax]); |
| this._yRange.domain([yMin, yMax]); |
| this._plot(); |
| var detail = { |
| xMin: xMin, |
| xMax: xMax, |
| yMin: yMin, |
| yMax: yMax, |
| }; |
| this.dispatchEvent(new CustomEvent("zoom", {detail: detail, bubbles: true})); |
| }, |
| |
| noCrosshair: function(nocrosshair) { |
| return nocrosshair ? 'nocrosshair' : ''; |
| }, |
| |
| }); |
| })(); |
| </script> |
