--- a/js/flotr2/js/plugins/hit.js +++ b/js/flotr2/js/plugins/hit.js @@ -1,1 +1,360 @@ - +(function () { + +var + D = Flotr.DOM, + _ = Flotr._, + flotr = Flotr, + S_MOUSETRACK = 'opacity:0.7;background-color:#000;color:#fff;display:none;position:absolute;padding:2px 8px;-moz-border-radius:4px;border-radius:4px;white-space:nowrap;'; + +Flotr.addPlugin('hit', { + callbacks: { + 'flotr:mousemove': function(e, pos) { + this.hit.track(pos); + }, + 'flotr:click': function(pos) { + var + hit = this.hit.track(pos); + _.defaults(pos, hit); + }, + 'flotr:mouseout': function() { + this.hit.clearHit(); + }, + 'flotr:destroy': function() { + this.mouseTrack = null; + } + }, + track : function (pos) { + if (this.options.mouse.track || _.any(this.series, function(s){return s.mouse && s.mouse.track;})) { + return this.hit.hit(pos); + } + }, + /** + * Try a method on a graph type. If the method exists, execute it. + * @param {Object} series + * @param {String} method Method name. + * @param {Array} args Arguments applied to method. + * @return executed successfully or failed. + */ + executeOnType: function(s, method, args){ + var + success = false, + options; + + if (!_.isArray(s)) s = [s]; + + function e(s, index) { + _.each(_.keys(flotr.graphTypes), function (type) { + if (s[type] && s[type].show && this[type][method]) { + options = this.getOptions(s, type); + + options.fill = !!s.mouse.fillColor; + options.fillStyle = this.processColor(s.mouse.fillColor || '#ffffff', {opacity: s.mouse.fillOpacity}); + options.color = s.mouse.lineColor; + options.context = this.octx; + options.index = index; + + if (args) options.args = args; + this[type][method].call(this[type], options); + success = true; + } + }, this); + } + _.each(s, e, this); + + return success; + }, + /** + * Updates the mouse tracking point on the overlay. + */ + drawHit: function(n){ + var octx = this.octx, + s = n.series; + + if (s.mouse.lineColor) { + octx.save(); + octx.lineWidth = (s.points ? s.points.lineWidth : 1); + octx.strokeStyle = s.mouse.lineColor; + octx.fillStyle = this.processColor(s.mouse.fillColor || '#ffffff', {opacity: s.mouse.fillOpacity}); + octx.translate(this.plotOffset.left, this.plotOffset.top); + + if (!this.hit.executeOnType(s, 'drawHit', n)) { + var + xa = n.xaxis, + ya = n.yaxis; + + octx.beginPath(); + // TODO fix this (points) should move to general testable graph mixin + octx.arc(xa.d2p(n.x), ya.d2p(n.y), s.points.hitRadius || s.points.radius || s.mouse.radius, 0, 2 * Math.PI, true); + octx.fill(); + octx.stroke(); + octx.closePath(); + } + octx.restore(); + this.clip(octx); + } + this.prevHit = n; + }, + /** + * Removes the mouse tracking point from the overlay. + */ + clearHit: function(){ + var prev = this.prevHit, + octx = this.octx, + plotOffset = this.plotOffset; + octx.save(); + octx.translate(plotOffset.left, plotOffset.top); + if (prev) { + if (!this.hit.executeOnType(prev.series, 'clearHit', this.prevHit)) { + // TODO fix this (points) should move to general testable graph mixin + var + s = prev.series, + lw = (s.points ? s.points.lineWidth : 1); + offset = (s.points.hitRadius || s.points.radius || s.mouse.radius) + lw; + octx.clearRect( + prev.xaxis.d2p(prev.x) - offset, + prev.yaxis.d2p(prev.y) - offset, + offset*2, + offset*2 + ); + } + D.hide(this.mouseTrack); + this.prevHit = null; + } + octx.restore(); + }, + /** + * Retrieves the nearest data point from the mouse cursor. If it's within + * a certain range, draw a point on the overlay canvas and display the x and y + * value of the data. + * @param {Object} mouse - Object that holds the relative x and y coordinates of the cursor. + */ + hit : function (mouse) { + + var + options = this.options, + prevHit = this.prevHit, + closest, sensibility, dataIndex, seriesIndex, series, value, xaxis, yaxis, n; + + if (this.series.length === 0) return; + + // Nearest data element. + // dist, x, y, relX, relY, absX, absY, sAngle, eAngle, fraction, mouse, + // xaxis, yaxis, series, index, seriesIndex + n = { + relX : mouse.relX, + relY : mouse.relY, + absX : mouse.absX, + absY : mouse.absY + }; + + if (options.mouse.trackY && + !options.mouse.trackAll && + this.hit.executeOnType(this.series, 'hit', [mouse, n]) && + !_.isUndefined(n.seriesIndex)) + { + series = this.series[n.seriesIndex]; + n.series = series; + n.mouse = series.mouse; + n.xaxis = series.xaxis; + n.yaxis = series.yaxis; + } else { + + closest = this.hit.closest(mouse); + + if (closest) { + + closest = options.mouse.trackY ? closest.point : closest.x; + seriesIndex = closest.seriesIndex; + series = this.series[seriesIndex]; + xaxis = series.xaxis; + yaxis = series.yaxis; + sensibility = 2 * series.mouse.sensibility; + + if + (options.mouse.trackAll || + (closest.distanceX < sensibility / xaxis.scale && + (!options.mouse.trackY || closest.distanceY < sensibility / yaxis.scale))) + { + n.series = series; + n.xaxis = series.xaxis; + n.yaxis = series.yaxis; + n.mouse = series.mouse; + n.x = closest.x; + n.y = closest.y; + n.dist = closest.distance; + n.index = closest.dataIndex; + n.seriesIndex = seriesIndex; + } + } + } + + if (!prevHit || (prevHit.index !== n.index || prevHit.seriesIndex !== n.seriesIndex)) { + this.hit.clearHit(); + if (n.series && n.mouse && n.mouse.track) { + this.hit.drawMouseTrack(n); + this.hit.drawHit(n); + Flotr.EventAdapter.fire(this.el, 'flotr:hit', [n, this]); + } + } + + return n; + }, + + closest : function (mouse) { + + var + series = this.series, + options = this.options, + relX = mouse.relX, + relY = mouse.relY, + compare = Number.MAX_VALUE, + compareX = Number.MAX_VALUE, + closest = {}, + closestX = {}, + check = false, + serie, data, + distance, distanceX, distanceY, + mouseX, mouseY, + x, y, i, j; + + function setClosest (o) { + o.distance = distance; + o.distanceX = distanceX; + o.distanceY = distanceY; + o.seriesIndex = i; + o.dataIndex = j; + o.x = x; + o.y = y; + check = true; + } + + for (i = 0; i < series.length; i++) { + + serie = series[i]; + data = serie.data; + mouseX = serie.xaxis.p2d(relX); + mouseY = serie.yaxis.p2d(relY); + + for (j = data.length; j--;) { + + x = data[j][0]; + y = data[j][1]; + + if (x === null || y === null) continue; + + // don't check if the point isn't visible in the current range + if (x < serie.xaxis.min || x > serie.xaxis.max) continue; + + distanceX = Math.abs(x - mouseX); + distanceY = Math.abs(y - mouseY); + + // Skip square root for speed + distance = distanceX * distanceX + distanceY * distanceY; + + if (distance < compare) { + compare = distance; + setClosest(closest); + } + + if (distanceX < compareX) { + compareX = distanceX; + setClosest(closestX); + } + } + } + + return check ? { + point : closest, + x : closestX + } : false; + }, + + drawMouseTrack : function (n) { + + var + pos = '', + s = n.series, + p = n.mouse.position, + m = n.mouse.margin, + x = n.x, + y = n.y, + elStyle = S_MOUSETRACK, + mouseTrack = this.mouseTrack, + plotOffset = this.plotOffset, + left = plotOffset.left, + right = plotOffset.right, + bottom = plotOffset.bottom, + top = plotOffset.top, + decimals = n.mouse.trackDecimals, + options = this.options; + + // Create + if (!mouseTrack) { + mouseTrack = D.node('<div class="flotr-mouse-value"></div>'); + this.mouseTrack = mouseTrack; + D.insert(this.el, mouseTrack); + } + + if (!n.mouse.relative) { // absolute to the canvas + + if (p.charAt(0) == 'n') pos += 'top:' + (m + top) + 'px;bottom:auto;'; + else if (p.charAt(0) == 's') pos += 'bottom:' + (m + bottom) + 'px;top:auto;'; + if (p.charAt(1) == 'e') pos += 'right:' + (m + right) + 'px;left:auto;'; + else if (p.charAt(1) == 'w') pos += 'left:' + (m + left) + 'px;right:auto;'; + + // Pie + } else if (s.pie && s.pie.show) { + var center = { + x: (this.plotWidth)/2, + y: (this.plotHeight)/2 + }, + radius = (Math.min(this.canvasWidth, this.canvasHeight) * s.pie.sizeRatio) / 2, + bisection = n.sAngle<n.eAngle ? (n.sAngle + n.eAngle) / 2: (n.sAngle + n.eAngle + 2* Math.PI) / 2; + + pos += 'bottom:' + (m - top - center.y - Math.sin(bisection) * radius/2 + this.canvasHeight) + 'px;top:auto;'; + pos += 'left:' + (m + left + center.x + Math.cos(bisection) * radius/2) + 'px;right:auto;'; + + // Default + } else { + if (/n/.test(p)) pos += 'bottom:' + (m - top - n.yaxis.d2p(n.y) + this.canvasHeight) + 'px;top:auto;'; + else pos += 'top:' + (m + top + n.yaxis.d2p(n.y)) + 'px;bottom:auto;'; + if (/w/.test(p)) pos += 'right:' + (m - left - n.xaxis.d2p(n.x) + this.canvasWidth) + 'px;left:auto;'; + else pos += 'left:' + (m + left + n.xaxis.d2p(n.x)) + 'px;right:auto;'; + } + + elStyle += pos; + mouseTrack.style.cssText = elStyle; + if (!decimals || decimals < 0) decimals = 0; + + if (x && x.toFixed) x = x.toFixed(decimals); + + if (y && y.toFixed) y = y.toFixed(decimals); + + mouseTrack.innerHTML = n.mouse.trackFormatter({ + x: x , + y: y, + series: n.series, + index: n.index, + nearest: n, + fraction: n.fraction + }); + + D.show(mouseTrack); + + if (n.mouse.relative) { + if (!/[ew]/.test(p)) { + // Center Horizontally + mouseTrack.style.left = + (left + n.xaxis.d2p(n.x) - D.size(mouseTrack).width / 2) + 'px'; + } else + if (!/[ns]/.test(p)) { + // Center Vertically + mouseTrack.style.top = + (top + n.yaxis.d2p(n.y) - D.size(mouseTrack).height / 2) + 'px'; + } + } + } + +}); +})(); +