Fix issue with hover pos being undefined & resizing of plot
This commit is contained in:
Gina Häußge
parent
00c14e6936
commit
cfae406a4c
3 changed files with 93 additions and 66 deletions
|
|
@ -1065,6 +1065,7 @@ class Server(object):
|
|||
"js/lib/jquery/jquery.flot.js",
|
||||
"js/lib/jquery/jquery.flot.time.js",
|
||||
"js/lib/jquery/jquery.flot.crosshair.js",
|
||||
"js/lib/jquery/jquery.flot.resize.js",
|
||||
"js/lib/jquery/jquery.iframe-transport.js",
|
||||
"js/lib/jquery/jquery.fileupload.js",
|
||||
"js/lib/jquery/jquery.slimscroll.min.js",
|
||||
|
|
|
|||
|
|
@ -99,46 +99,7 @@ $(function() {
|
|||
});
|
||||
|
||||
self.temperatures = [];
|
||||
self.plotOptions = {
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 310,
|
||||
ticks: 10
|
||||
},
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
minTickSize: [2, "minute"],
|
||||
tickFormatter: function(val, axis) {
|
||||
if (val == undefined || val == 0)
|
||||
return ""; // we don't want to display the minutes since the epoch if not connected yet ;)
|
||||
|
||||
// current time in milliseconds in UTC
|
||||
var timestampUtc = Date.now();
|
||||
|
||||
// calculate difference in milliseconds
|
||||
var diff = timestampUtc - val;
|
||||
|
||||
// convert to minutes
|
||||
var diffInMins = Math.round(diff / (60 * 1000));
|
||||
if (diffInMins == 0)
|
||||
return gettext("just now");
|
||||
else
|
||||
return "- " + diffInMins + " " + gettext("min");
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: "sw",
|
||||
noColumns: 2,
|
||||
backgroundOpacity: 0
|
||||
},
|
||||
crosshair: {
|
||||
mode: "x"
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
autoHighlight: false
|
||||
}
|
||||
};
|
||||
self.plot = undefined;
|
||||
self.plotHoverPos = undefined;
|
||||
self.plotLegendTimeout = undefined;
|
||||
|
|
@ -389,42 +350,48 @@ $(function() {
|
|||
self.updateLegend = function(replaceLegendLabel) {
|
||||
self.plotLegendTimeout = undefined;
|
||||
|
||||
var i;
|
||||
var pos = self.plotHoverPos;
|
||||
var axes = self.plot.getAxes();
|
||||
var dataset = self.plot.getData();
|
||||
if (pos) {
|
||||
// we got a hover position, let's see what we need to do with that
|
||||
|
||||
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
|
||||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
|
||||
var i;
|
||||
var axes = self.plot.getAxes();
|
||||
var dataset = self.plot.getData();
|
||||
|
||||
_.each(dataset, function(series, index) {
|
||||
var value = series.data && series.data.length ? series.data[series.data.length - 1][1] : undefined;
|
||||
replaceLegendLabel(index, series, value);
|
||||
});
|
||||
} else {
|
||||
_.each(dataset, function(series, index) {
|
||||
for (i = 0; i < series.data.length; i++) {
|
||||
if (series.data[i][0] > pos.x) {
|
||||
break;
|
||||
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
|
||||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
|
||||
// position outside of the graph, show latest temperature in legend
|
||||
_.each(dataset, function(series, index) {
|
||||
var value = series.data && series.data.length ? series.data[series.data.length - 1][1] : undefined;
|
||||
replaceLegendLabel(index, series, value);
|
||||
});
|
||||
} else {
|
||||
// position inside the graph, determine temperature at point and display that in the legend
|
||||
_.each(dataset, function(series, index) {
|
||||
for (i = 0; i < series.data.length; i++) {
|
||||
if (series.data[i][0] > pos.x) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var y;
|
||||
var p1 = series.data[i - 1];
|
||||
var p2 = series.data[i];
|
||||
var y;
|
||||
var p1 = series.data[i - 1];
|
||||
var p2 = series.data[i];
|
||||
|
||||
if (p1 == undefined) {
|
||||
y = p2[1];
|
||||
} else if (p2 == undefined) {
|
||||
y = p1[1];
|
||||
} else {
|
||||
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
|
||||
}
|
||||
if (p1 == undefined) {
|
||||
y = p2[1];
|
||||
} else if (p2 == undefined) {
|
||||
y = p1[1];
|
||||
} else {
|
||||
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
|
||||
}
|
||||
|
||||
replaceLegendLabel(index, series, y, true);
|
||||
});
|
||||
replaceLegendLabel(index, series, y, true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// update the grid
|
||||
self.plot.setupGrid();
|
||||
};
|
||||
|
||||
|
|
|
|||
59
src/octoprint/static/js/lib/jquery/jquery.flot.resize.js
Normal file
59
src/octoprint/static/js/lib/jquery/jquery.flot.resize.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/* Flot plugin for automatically redrawing plots as the placeholder resizes.
|
||||
|
||||
Copyright (c) 2007-2014 IOLA and Ole Laursen.
|
||||
Licensed under the MIT license.
|
||||
|
||||
It works by listening for changes on the placeholder div (through the jQuery
|
||||
resize event plugin) - if the size changes, it will redraw the plot.
|
||||
|
||||
There are no options. If you need to disable the plugin for some plots, you
|
||||
can just fix the size of their placeholders.
|
||||
|
||||
*/
|
||||
|
||||
/* Inline dependency:
|
||||
* jQuery resize event - v1.1 - 3/14/2010
|
||||
* http://benalman.com/projects/jquery-resize-plugin/
|
||||
*
|
||||
* Copyright (c) 2010 "Cowboy" Ben Alman
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* http://benalman.com/about/license/
|
||||
*/
|
||||
(function($,e,t){"$:nomunge";var i=[],n=$.resize=$.extend($.resize,{}),a,r=false,s="setTimeout",u="resize",m=u+"-special-event",o="pendingDelay",l="activeDelay",f="throttleWindow";n[o]=200;n[l]=20;n[f]=true;$.event.special[u]={setup:function(){if(!n[f]&&this[s]){return false}var e=$(this);i.push(this);e.data(m,{w:e.width(),h:e.height()});if(i.length===1){a=t;h()}},teardown:function(){if(!n[f]&&this[s]){return false}var e=$(this);for(var t=i.length-1;t>=0;t--){if(i[t]==this){i.splice(t,1);break}}e.removeData(m);if(!i.length){if(r){cancelAnimationFrame(a)}else{clearTimeout(a)}a=null}},add:function(e){if(!n[f]&&this[s]){return false}var i;function a(e,n,a){var r=$(this),s=r.data(m)||{};s.w=n!==t?n:r.width();s.h=a!==t?a:r.height();i.apply(this,arguments)}if($.isFunction(e)){i=e;return a}else{i=e.handler;e.handler=a}}};function h(t){if(r===true){r=t||1}for(var s=i.length-1;s>=0;s--){var l=$(i[s]);if(l[0]==e||l.is(":visible")){var f=l.width(),c=l.height(),d=l.data(m);if(d&&(f!==d.w||c!==d.h)){l.trigger(u,[d.w=f,d.h=c]);r=t||true}}else{d=l.data(m);d.w=0;d.h=0}}if(a!==null){if(r&&(t==null||t-r<1e3)){a=e.requestAnimationFrame(h)}else{a=setTimeout(h,n[o]);r=false}}}if(!e.requestAnimationFrame){e.requestAnimationFrame=function(){return e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t,i){return e.setTimeout(function(){t((new Date).getTime())},n[l])}}()}if(!e.cancelAnimationFrame){e.cancelAnimationFrame=function(){return e.webkitCancelRequestAnimationFrame||e.mozCancelRequestAnimationFrame||e.oCancelRequestAnimationFrame||e.msCancelRequestAnimationFrame||clearTimeout}()}})(jQuery,this);
|
||||
|
||||
(function ($) {
|
||||
var options = { }; // no options
|
||||
|
||||
function init(plot) {
|
||||
function onResize() {
|
||||
var placeholder = plot.getPlaceholder();
|
||||
|
||||
// somebody might have hidden us and we can't plot
|
||||
// when we don't have the dimensions
|
||||
if (placeholder.width() == 0 || placeholder.height() == 0)
|
||||
return;
|
||||
|
||||
plot.resize();
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
}
|
||||
|
||||
function bindEvents(plot, eventHolder) {
|
||||
plot.getPlaceholder().resize(onResize);
|
||||
}
|
||||
|
||||
function shutdown(plot, eventHolder) {
|
||||
plot.getPlaceholder().unbind("resize", onResize);
|
||||
}
|
||||
|
||||
plot.hooks.bindEvents.push(bindEvents);
|
||||
plot.hooks.shutdown.push(shutdown);
|
||||
}
|
||||
|
||||
$.plot.plugins.push({
|
||||
init: init,
|
||||
options: options,
|
||||
name: 'resize',
|
||||
version: '1.0'
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Reference in a new issue