diff --git a/CHANGELOG.md b/CHANGELOG.md index dd551b0d0..c9cc8ad7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ - The plugin video no longer has a second border around it - The hint at the bottom of Browse and the stored data footer on plugin pages have the same padding as the rest of the page - Sign in methods on the Security page have a line between them +- Chart axis labels with long units, like KiB/s, are no longer cut off ## 26.11.0 diff --git a/src/ui/components/charts/LineChart.tsx b/src/ui/components/charts/LineChart.tsx index f618e9159..4cb0c75f3 100644 --- a/src/ui/components/charts/LineChart.tsx +++ b/src/ui/components/charts/LineChart.tsx @@ -20,7 +20,7 @@ interface LineChartProps { className?: string; } -const Y_LABEL_W = 44; +const Y_LABEL_MIN = 44; const X_LABEL_H = 20; const TOP_PAD = 6; const TICK_COUNT = 5; @@ -84,7 +84,18 @@ export function LineChart({ return () => ro.disconnect(); }, []); - const chartW = Math.max(0, width - Y_LABEL_W); + const yTicks = (() => { + const [lo, hi] = domain; + const step = (hi - lo) / (TICK_COUNT - 1); + return Array.from({ length: TICK_COUNT }, (_, i) => lo + i * step); + })(); + + // Wide enough for the longest tick label, like "1.5 KiB/s". + const yLabelW = Math.max( + Y_LABEL_MIN, + Math.max(...yTicks.map((tick) => yFormatter(tick).length)) * 6 + 12, + ); + const chartW = Math.max(0, width - yLabelW); const drawH = height - TOP_PAD; const svgH = height + X_LABEL_H; @@ -94,25 +105,19 @@ export function LineChart({ parseServerTime(timestamps[0]).getTime() : 0; - const yTicks = (() => { - const [lo, hi] = domain; - const step = (hi - lo) / (TICK_COUNT - 1); - return Array.from({ length: TICK_COUNT }, (_, i) => lo + i * step); - })(); - const xTickIndices = pickXTicks(timestamps, rangeMs, chartW); const handleMouseMove = useCallback( (e: React.MouseEvent) => { if (timestamps.length < 2 || chartW <= 0) return; const rect = (e.currentTarget as SVGElement).getBoundingClientRect(); - const relX = e.clientX - rect.left - Y_LABEL_W; + const relX = e.clientX - rect.left - yLabelW; const index = Math.round( Math.max(0, Math.min(1, relX / chartW)) * (timestamps.length - 1), ); setTooltip({ x: e.clientX - rect.left, index }); }, - [timestamps.length, chartW], + [timestamps.length, chartW, yLabelW], ); return ( @@ -134,7 +139,7 @@ export function LineChart({ return ( ); })} @@ -195,13 +200,9 @@ export function LineChart({ {/* Crosshair */} {tooltip !== null && timestamps.length > 1 && chartW > 0 && (