| 33 | } |
| 34 | |
| 35 | function ChartContainer({ |
| 36 | id, |
| 37 | className, |
| 38 | children, |
| 39 | config, |
| 40 | height = "100%", |
| 41 | ...props |
| 42 | }: React.ComponentProps<"div"> & { |
| 43 | height?: string | number |
| 44 | config: ChartConfig |
| 45 | children: React.ComponentProps< |
| 46 | typeof RechartsPrimitive.ResponsiveContainer |
| 47 | >["children"] |
| 48 | }) { |
| 49 | const uniqueId = React.useId() |
| 50 | const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` |
| 51 | |
| 52 | return ( |
| 53 | <ChartContext.Provider value={{ config }}> |
| 54 | <div |
| 55 | data-slot="chart" |
| 56 | data-chart={chartId} |
| 57 | className={cn( |
| 58 | "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", |
| 59 | className |
| 60 | )} |
| 61 | {...props} |
| 62 | > |
| 63 | <ChartStyle id={chartId} config={config} /> |
| 64 | <RechartsPrimitive.ResponsiveContainer height={height}> |
| 65 | {children} |
| 66 | </RechartsPrimitive.ResponsiveContainer> |
| 67 | </div> |
| 68 | </ChartContext.Provider> |
| 69 | ) |
| 70 | } |
| 71 | |
| 72 | const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { |
| 73 | const colorConfig = Object.entries(config).filter( |