fix: slope tooltip clipping — use clip:false + marginTop instead of dy function
This commit is contained in:
@@ -355,15 +355,11 @@
|
||||
);
|
||||
|
||||
if (isSlope) {
|
||||
const nearTop = (d: any) => {
|
||||
const range = lineDomainMax - lineDomainMin;
|
||||
return range > 0 && (d[yKey] - lineDomainMin) / range > 0.85;
|
||||
};
|
||||
marks.push(
|
||||
Plot.text(lineData, Plot.pointerX({
|
||||
x, y: yKey,
|
||||
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),
|
||||
stroke: tc.tooltipBg, strokeWidth: 3,
|
||||
fontSize: 11, fontWeight: '700',
|
||||
@@ -371,7 +367,7 @@
|
||||
Plot.text(lineData, Plot.pointerX({
|
||||
x, y: yKey,
|
||||
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,
|
||||
fontSize: 10,
|
||||
})),
|
||||
@@ -397,7 +393,7 @@
|
||||
};
|
||||
|
||||
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' },
|
||||
x: { label: null, tickFormat: xTickFormat, grid: false, ticks: 6 },
|
||||
y: { label: yLabel, grid: true, tickCount: 4, domain: [lineDomainMin, lineDomainMax] },
|
||||
|
||||
Reference in New Issue
Block a user