jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Ensure graph tooltips do not overflow the graph

Browse Source
This commit is contained in:
Johannes Zellner
2025-09-17 15:08:50 +02:00
parent 6938b6e9ac
commit 0c791ec52c
1 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
dashboard/src/components/GraphItem.vue
View File

@@ -76,9 +76,22 @@ function createGraphOptions({ yscale, period, highMark }) {
tooltipElem.value.innerHTML = innerHtml;
}
tooltipElem.value.style.opacity = 1;
tooltipElem.value.style.position = 'absolute';
tooltipElem.value.style.left = tooltipModel.caretX + 'px';
tooltipElem.value.classList.remove('graphs-tooltip-caret-left', 'graphs-tooltip-caret-right');
if (tooltipModel.chart.width/2 < tooltipModel.caretX) {
tooltipElem.value.style.right = (tooltipModel.chart.width - tooltipModel.caretX) + 'px';
tooltipElem.value.style.left = 'unset';
tooltipElem.value.classList.add('graphs-tooltip-caret-right');
} else {
tooltipElem.value.style.right = 'unset';
tooltipElem.value.style.left = tooltipModel.caretX + 'px';
tooltipElem.value.classList.add('graphs-tooltip-caret-left');
}
tooltipElem.value.style.top = 0 + 'px';
tooltipElem.value.style.height = '100%';
},
@@ -315,17 +328,25 @@ defineExpose({
.graphs-tooltip {
white-space: nowrap;
border-left: 1px var(--pankow-color-primary) solid;
padding-left: 10px;
padding-right: 10px;
pointer-events: none;
}
.graphs-tooltip-caret-left {
border-left: 1px var(--pankow-color-primary) solid;
}
.graphs-tooltip-caret-right {
border-right: 1px var(--pankow-color-primary) solid;
}
.graphs-tooltip-title {
font-weight: bold;
}
.graphs-tooltip-item {
padding: 2px 10px;
padding: 2px 0px;
-webkit-text-stroke: 0.2px gray;
}