brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: slope tooltip clipping — use clip:false + marginTop instead of dy function

Browse Source
This commit is contained in:
Davide Scaini
2026-05-23 22:24:55 +02:00
parent 40aa51be4d
commit aca9f79b46
1 changed files with 3 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/ActivityCharts.svelte
+3 -7
View File
@@ -355,15 +355,11 @@
); );
if (isSlope) { if (isSlope) {
const nearTop = (d: any) => {
const range = lineDomainMax - lineDomainMin;
return range > 0 && (d[yKey] - lineDomainMin) / range > 0.85;
};
marks.push( marks.push(
Plot.text(lineData, Plot.pointerX({ Plot.text(lineData, Plot.pointerX({
x, y: yKey, x, y: yKey,
text: (d: any) => d.slope != null ? `${d.slope > 0.05 ? '+' : ''}${(+d.slope).toFixed(1)}%` : '', text: (d: any) => d.slope != null ? `${d.slope > 0.05 ? '+' : ''}${(+d.slope).toFixed(1)}%` : '',
dy: (d: any) => nearTop(d) ? 22 : -22, dy: -22, clip: false,
fill: (d: any) => slopeColor(d.slope ?? 0), fill: (d: any) => slopeColor(d.slope ?? 0),
stroke: tc.tooltipBg, strokeWidth: 3, stroke: tc.tooltipBg, strokeWidth: 3,
fontSize: 11, fontWeight: '700', fontSize: 11, fontWeight: '700',
@@ -371,7 +367,7 @@
Plot.text(lineData, Plot.pointerX({ Plot.text(lineData, Plot.pointerX({
x, y: yKey, x, y: yKey,
text: (d: any) => d[yKey] != null ? `${Math.round(d[yKey])}m` : '', text: (d: any) => d[yKey] != null ? `${Math.round(d[yKey])}m` : '',
dy: (d: any) => nearTop(d) ? 10 : -10, dy: -10, clip: false,
fill: tc.axis, stroke: tc.tooltipBg, strokeWidth: 3, fill: tc.axis, stroke: tc.tooltipBg, strokeWidth: 3,
fontSize: 10, fontSize: 10,
})), })),
@@ -397,7 +393,7 @@
}; };
const svg = Plot.plot({ const svg = Plot.plot({
width: w, height: h, marginLeft: 48, marginBottom: 32, width: w, height: h, marginLeft: 48, marginBottom: 32, marginTop: isSlope ? 36 : 20,
style: { background: 'transparent', color: tc.axis, fontSize: '11px' }, style: { background: 'transparent', color: tc.axis, fontSize: '11px' },
x: { label: null, tickFormat: xTickFormat, grid: false, ticks: 6 }, x: { label: null, tickFormat: xTickFormat, grid: false, ticks: 6 },
y: { label: yLabel, grid: true, tickCount: 4, domain: [lineDomainMin, lineDomainMax] }, y: { label: yLabel, grid: true, tickCount: 4, domain: [lineDomainMin, lineDomainMax] },