Address CodeRabbit review on system resources widget PR

- Render the chart tooltip via a portal so it isn't clipped by the
  card's overflow:hidden (needed to stop the chart line itself
  bleeding past its rounded corners).
- Move chartColumns' width breakpoints into a lookup table and
  memoize the computed value, instead of an inline ternary.
This commit is contained in:
Bergasha committed 2026-08-27 10:46:04 +10:00
1 parent 26d12d9fad
commit 73de83b48f
2 files changed
+19 -2

No files matched your search

@@ -127,7 +127,12 @@ export const CommonChart = ({
},
}}
tooltipAnimationDuration={200}
tooltipProps={tooltipProps}
tooltipProps={{
// Render via portal so the tooltip isn't clipped by the card's overflow:hidden
// (needed to stop the chart line itself bleeding past its rounded corners).
portal: typeof document !== "undefined" ? document.body : undefined,
...tooltipProps,
}}
withTooltip={height >= 64}
yAxisProps={yAxisProps}
fillOpacity={chartType === "area" ? 0.3 : undefined}
@@ -19,6 +19,15 @@ const COMPACT_HISTORY_SIZE = 15;
const ADVANCED_HISTORY_SIZE = 60;
const ALL_SYSTEM_CHARTS = ["cpu", "memory", "gpu", "network"] as const;
const ADVANCED_CHART_COLUMN_BREAKPOINTS = [
{ minWidth: 1100, columns: 4 },
{ minWidth: 560, columns: 2 },
{ minWidth: 0, columns: 1 },
] as const;
const getAdvancedChartColumns = (width: number): number =>
ADVANCED_CHART_COLUMN_BREAKPOINTS.find(({ minWidth }) => width >= minWidth)?.columns ?? 1;
type SystemChart = WidgetComponentProps<"systemResources">["options"]["visibleCharts"][number];
type ChartItem = {
@@ -226,7 +235,10 @@ const SystemCharts = ({
const showNetwork = visibleCharts.includes("network");
const labelDisplayMode = isAdvanced ? "textWithIcon" : options.labelDisplayMode;
const chartCount = visibleCharts.length;
const chartColumns = isAdvanced ? (width >= 1100 ? 4 : width >= 560 ? 2 : 1) : 1;
const chartColumns = useMemo(
() => (isAdvanced ? getAdvancedChartColumns(width) : 1),
[isAdvanced, width],
);
const compactChartGap = 8;
const compactRowHeight = 56;
const chartHeight = isAdvanced