Review
Responsive multi-series cold-chain chart
Pharmacy cold-chain ops dashboard was clipping the 14-day excursion chart on narrow viewports and remounting series on every poll. Wraps the LineChart in ResponsiveContainer and keys each series by depot id so color and animation stay stable when the series list reorders.
RechartsTier 1frontendcharts
Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.
components/ops/ColdChainExcursionChart.tsx+7-5
| 18 | 18 | type DepotSeries = { id: string; label: string; color: string; dataKey: string }; | |
| 19 | 19 | ||
| 20 | 20 | export function ColdChainExcursionChart({ | |
| 21 | 21 | points, | |
| 22 | 22 | series, | |
| 23 | 23 | }: { | |
| 24 | 24 | points: Array<Record<string, string | number>>; | |
| 25 | 25 | series: DepotSeries[]; | |
| 26 | 26 | }) { | |
| 27 | 27 | return ( | |
| 28 | - | <div className="h-72 w-full overflow-hidden"> | |
| 29 | - | <LineChart width={640} height={288} data={points}> | |
| 28 | + | <div className="h-72 w-full"> | |
| 29 | + | <ResponsiveContainer width="100%" height="100%"> | |
| 30 | + | <LineChart data={points}> | |
| 30 | 31 | <XAxis dataKey="day" tickMargin={8} /> | |
| 31 | 32 | <YAxis allowDecimals={false} /> | |
| 32 | 33 | <Tooltip /> | |
| 33 | 34 | <Legend /> | |
| 34 | - | {series.map((s, i) => ( | |
| 35 | - | <Line key={i} type="monotone" dataKey={s.dataKey} name={s.label} stroke={s.color} /> | |
| 35 | + | {series.map((s) => ( | |
| 36 | + | <Line key={s.id} type="monotone" dataKey={s.dataKey} name={s.label} stroke={s.color} dot={false} /> | |
| 36 | 37 | ))} | |
| 37 | - | </LineChart> | |
| 38 | + | </LineChart> | |
| 39 | + | </ResponsiveContainer> | |
| 38 | 40 | </div> | |
| 39 | 41 | ); | |
| 40 | 42 | } |