Clamp server chart tooltips inside chart
This commit is contained in:
@@ -441,14 +441,17 @@
|
||||
this.tooltipEl.style.opacity = '1';
|
||||
const rect = this.$refs.chart.getBoundingClientRect();
|
||||
const tooltipRect = this.tooltipEl.getBoundingClientRect();
|
||||
const padding = 8;
|
||||
let left = x + 12;
|
||||
let top = y - tooltipRect.height - 12;
|
||||
if (left + tooltipRect.width > rect.width) {
|
||||
if (left + tooltipRect.width + padding > rect.width) {
|
||||
left = x - tooltipRect.width - 12;
|
||||
}
|
||||
if (top < 0) {
|
||||
if (top < padding) {
|
||||
top = y + 12;
|
||||
}
|
||||
left = Math.min(Math.max(padding, left), rect.width - tooltipRect.width - padding);
|
||||
top = Math.min(Math.max(padding, top), rect.height - tooltipRect.height - padding);
|
||||
this.tooltipEl.style.transform = `translate(${left}px, ${top}px)`;
|
||||
},
|
||||
hideTooltip() {
|
||||
@@ -736,14 +739,17 @@
|
||||
this.tooltipEl.style.opacity = '1';
|
||||
const rect = this.$refs.chart.getBoundingClientRect();
|
||||
const tooltipRect = this.tooltipEl.getBoundingClientRect();
|
||||
const padding = 8;
|
||||
let left = x + 12;
|
||||
let top = y - tooltipRect.height - 12;
|
||||
if (left + tooltipRect.width > rect.width) {
|
||||
if (left + tooltipRect.width + padding > rect.width) {
|
||||
left = x - tooltipRect.width - 12;
|
||||
}
|
||||
if (top < 0) {
|
||||
if (top < padding) {
|
||||
top = y + 12;
|
||||
}
|
||||
left = Math.min(Math.max(padding, left), rect.width - tooltipRect.width - padding);
|
||||
top = Math.min(Math.max(padding, top), rect.height - tooltipRect.height - padding);
|
||||
this.tooltipEl.style.transform = `translate(${left}px, ${top}px)`;
|
||||
},
|
||||
hideTooltip() {
|
||||
@@ -902,14 +908,17 @@
|
||||
this.tooltipEl.style.opacity = '1';
|
||||
const rect = this.$refs.chart.getBoundingClientRect();
|
||||
const tooltipRect = this.tooltipEl.getBoundingClientRect();
|
||||
const padding = 8;
|
||||
let left = x + 12;
|
||||
let top = y - tooltipRect.height - 12;
|
||||
if (left + tooltipRect.width > rect.width) {
|
||||
if (left + tooltipRect.width + padding > rect.width) {
|
||||
left = x - tooltipRect.width - 12;
|
||||
}
|
||||
if (top < 0) {
|
||||
if (top < padding) {
|
||||
top = y + 12;
|
||||
}
|
||||
left = Math.min(Math.max(padding, left), rect.width - tooltipRect.width - padding);
|
||||
top = Math.min(Math.max(padding, top), rect.height - tooltipRect.height - padding);
|
||||
this.tooltipEl.style.transform = `translate(${left}px, ${top}px)`;
|
||||
},
|
||||
hideTooltip() {
|
||||
|
||||
Reference in New Issue
Block a user