Cutlery/beestat
1
0
Fork 0
mirror of https://github.com/beestat/app.git synced 2025-06-03 05:36:51 -04:00
Code Actions Packages Releases Activity

Updated tooltip to stay out of the way

Browse Source 
https://community.beestat.io/t/add-hysteresis-to-tooltip-position/218/
This commit is contained in:
Jon Ziebell 2021-01-27 22:22:02 -05:00
parent 15724bc78d
commit 6d9a8fea4b
1 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
js/component/chart.js
View File

@ -497,7 +497,9 @@ beestat.component.chart.prototype.get_options_tooltip_positioner_ = function() {
}; };
/** /**
* Get the tooltip positioner x value. * Get the tooltip positioner x value. This remembers which way you're moving
* the mouse and attempts to position the tooltip out of the way of the
* direction of movement.
* *
* @param {number} tooltip_width Tooltip width. * @param {number} tooltip_width Tooltip width.
* @param {number} tooltip_height Tooltip height. * @param {number} tooltip_height Tooltip height.
@ -506,18 +508,41 @@ beestat.component.chart.prototype.get_options_tooltip_positioner_ = function() {
* @return {number} The tooltip x value. * @return {number} The tooltip x value.
*/ */
beestat.component.chart.prototype.get_options_tooltip_positioner_x_ = function(tooltip_width, tooltip_height, point) { beestat.component.chart.prototype.get_options_tooltip_positioner_x_ = function(tooltip_width, tooltip_height, point) {
var plot_width = this.chart_.plotWidth; const plot_width = this.chart_.plotWidth;
var fits_on_left = (point.plotX - tooltip_width) > 0; const tooltip_x_history_size = 20;
var fits_on_right = (point.plotX + tooltip_width) < plot_width; if (this.last_tooltip_x_ === undefined) {
this.last_tooltip_x_ = [];
}
var x; this.last_tooltip_x_.push(point.plotX);
if (fits_on_left === true) { if (this.last_tooltip_x_.length > tooltip_x_history_size) {
x = point.plotX - tooltip_width + this.chart_.plotLeft; this.last_tooltip_x_.shift();
} else if (fits_on_right === true) { }
x = point.plotX + this.chart_.plotLeft;
} else { const prefer_left = this.last_tooltip_x_[0] <= this.last_tooltip_x_[this.last_tooltip_x_.length - 1];
const fits_on_left = (point.plotX - tooltip_width) > 0;
const fits_on_right = (point.plotX + tooltip_width) < plot_width;
let x;
if (fits_on_left === false && fits_on_right === false) {
x = this.chart_.plotLeft; x = this.chart_.plotLeft;
} else {
if (prefer_left === true) {
if (fits_on_left === true) {
x = point.plotX - tooltip_width + this.chart_.plotLeft;
} else {
x = point.plotX + this.chart_.plotLeft;
}
} else {
if (fits_on_right === true) {
x = point.plotX + this.chart_.plotLeft;
} else {
x = point.plotX - tooltip_width + this.chart_.plotLeft;
}
}
} }
return x; return x;