fix(beszel): prevent recharts negative dimension warnings
Add minWidth: 0 and overflow: hidden to ChartPanel (CSS Grid item) and minWidth: 0 to BeszelAreaChart. Prevents ResponsiveContainer from computing negative width/height in grid/flex layouts before first paint.
This commit is contained in:
1 file changed
+3
-2
@@ -19,7 +19,7 @@ interface ChartPanelProps {
|
||||
}
|
||||
|
||||
export const ChartPanel = ({ title, subtitle, children }: ChartPanelProps) => (
|
||||
<Stack gap={4}>
|
||||
<Stack gap={4} style={{ minWidth: 0, overflow: "hidden" }}>
|
||||
<Group gap="xs">
|
||||
<Text size="sm" fw={600}>
|
||||
{title}
|
||||
@@ -39,13 +39,14 @@ type BeszelAreaChartProps = Omit<AreaChartProps, "dataKey" | "curveType" | "with
|
||||
yAxisDomain?: [number, string];
|
||||
};
|
||||
|
||||
export const BeszelAreaChart = ({ yAxisFormatter, yAxisDomain, yAxisProps, ...props }: BeszelAreaChartProps) => (
|
||||
export const BeszelAreaChart = ({ yAxisFormatter, yAxisDomain, yAxisProps, style, ...props }: BeszelAreaChartProps) => (
|
||||
<AreaChart
|
||||
dataKey="time"
|
||||
curveType="monotone"
|
||||
withDots={false}
|
||||
withXAxis
|
||||
withYAxis
|
||||
style={{ minWidth: 0, ...style }}
|
||||
yAxisProps={{
|
||||
...yAxisBase,
|
||||
...(yAxisDomain ? { domain: yAxisDomain } : {}),
|
||||
|
||||
Reference in new issue
Block a user