shukivaknin/jabali-panel
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clamp server chart tooltips inside chart

Browse Source
This commit is contained in:
root
2026-01-30 02:00:19 +02:00
parent 98b6da4f52
commit 845b12f786
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
resources/views/filament/admin/widgets/server-charts.blade.php
View File

@@ -441,14 +441,17 @@
this.tooltipEl.style.opacity = '1'; this.tooltipEl.style.opacity = '1';
const rect = this.$refs.chart.getBoundingClientRect(); const rect = this.$refs.chart.getBoundingClientRect();
const tooltipRect = this.tooltipEl.getBoundingClientRect(); const tooltipRect = this.tooltipEl.getBoundingClientRect();
const padding = 8;
let left = x + 12; let left = x + 12;
let top = y - tooltipRect.height - 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; left = x - tooltipRect.width - 12;
} }
if (top < 0) { if (top < padding) {
top = y + 12; 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)`; this.tooltipEl.style.transform = `translate(${left}px, ${top}px)`;
}, },
hideTooltip() { hideTooltip() {
@@ -736,14 +739,17 @@
this.tooltipEl.style.opacity = '1'; this.tooltipEl.style.opacity = '1';
const rect = this.$refs.chart.getBoundingClientRect(); const rect = this.$refs.chart.getBoundingClientRect();
const tooltipRect = this.tooltipEl.getBoundingClientRect(); const tooltipRect = this.tooltipEl.getBoundingClientRect();
const padding = 8;
let left = x + 12; let left = x + 12;
let top = y - tooltipRect.height - 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; left = x - tooltipRect.width - 12;
} }
if (top < 0) { if (top < padding) {
top = y + 12; 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)`; this.tooltipEl.style.transform = `translate(${left}px, ${top}px)`;
}, },
hideTooltip() { hideTooltip() {
@@ -902,14 +908,17 @@
this.tooltipEl.style.opacity = '1'; this.tooltipEl.style.opacity = '1';
const rect = this.$refs.chart.getBoundingClientRect(); const rect = this.$refs.chart.getBoundingClientRect();
const tooltipRect = this.tooltipEl.getBoundingClientRect(); const tooltipRect = this.tooltipEl.getBoundingClientRect();
const padding = 8;
let left = x + 12; let left = x + 12;
let top = y - tooltipRect.height - 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; left = x - tooltipRect.width - 12;
} }
if (top < 0) { if (top < padding) {
top = y + 12; 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)`; this.tooltipEl.style.transform = `translate(${left}px, ${top}px)`;
}, },
hideTooltip() { hideTooltip() {