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:
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
|
||||
|
||||
Reference in new issue
Block a user