You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/recharts-poc-report.md
+25-25Lines changed: 25 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,27 +13,27 @@
13
13
14
14
## Functional acceptance criteria
15
15
16
-
| # | Criterion | Status | Evidence | Notes |
17
-
|---|-----------|:------:|----------|-------|
18
-
| 1 | Bar chart w/ rounded corners + custom colors | ✅ |`components/recharts-poc/charts/BarChartCard.tsx`|`radius={[8,8,0,0]}` on `<Bar>`; per-bar `<Cell fill>`; colors driven by `usePalette()` so the palette adapts to theme. |
19
-
| 2 | Line chart w/ splines | ✅ |`components/recharts-poc/charts/LineChartCard.tsx`|`<Line type="monotone">` + `<Area>` fill overlay for the long-tail series. |
20
-
| 3 | Dual-axis different scales | ✅ |`components/recharts-poc/charts/DualAxisChartCard.tsx`|`<ComposedChart>` + two `<YAxis yAxisId="left" \| "right">` with independent orientations, tick formatters, and colours. |
21
-
| 4 | Histogram comparing 2 metrics |⚠️ |`components/recharts-poc/charts/HistogramCard.tsx`| Recharts has no native histogram primitive — we pre-bucket data in `mocks/keywordLength.ts` and render two `<Bar>` series side-by-side. Standard, idiomatic Recharts approach. |
22
-
| 5 | Pie/donut chart with %-labels | ✅ |`components/recharts-poc/charts/DonutCard.tsx`|`<Pie innerRadius={60} outerRadius={110}>` + custom percent-label renderer positioned outside the slice. Hover-grow via `activeShape={{ outerRadius: 120 }}` (note: Recharts 3.x drives this through internal Redux tooltip state, not the deprecated `activeIndex` prop). |
23
-
| 6 | Table with metric breakdown | ✅ |`components/recharts-poc/table/BreakdownTable.tsx`| Plain HTML table; sortable column headers; heat-tinted "position now" cell scaled by `\|delta\|/maxDelta`; Δ column rendered via shared `DeltaBadge`. |
24
-
| 7 | Data labels with position control + format hooks | ✅ |`<LabelList>` children across charts; position picker on `BarChartCard`| The bar chart exposes a `top / inside / center / insideTop` picker so a reviewer can see position control without reading source. Formatter hook used on bar + histogram (`Intl.NumberFormat('en-US')`). |
25
-
| 8 | Toggle data labels on/off | ✅ |`primitives/LabelsToggle.tsx` per chart | Bar, line, histogram each have an independent toggle. Donut renders labels always (it's unreadable without them). |
26
-
| 9 | Period-over-period delta | ✅ |`primitives/periodOverPeriod.ts` + `kpi/DeltaBadge.tsx`| Pure helper, fully tested (positive, negative, flat, zero-prev, zero-curr, both-zero). Renders `▲ +N%` / `▼ -N%` / `— 0%` and gracefully degrades to absolute delta when there's no prior-period baseline. |
27
-
| 10 | Tooltips, legend visible, series toggle, responsive layout |✅ |`<ResponsiveContainer>` + `<Legend onClick>` + `hide` prop | Legend click toggles a local `Set<string>` of hidden series; the corresponding `<Bar hide>` / `<Line hide>` reads from it. Applied to line, histogram, dual-axis (bar and donut don't need it — single effective series). |
| 1 | Bar chart w/ rounded corners + custom colors | ✅ |`components/recharts-poc/charts/BarChartCard.tsx`|`radius={[8,8,0,0]}` on `<Bar>`; per-bar `<Cell fill>`; colors driven by `usePalette()` so the palette adapts to theme.|
19
+
| 2 | Line chart w/ splines | ✅ |`components/recharts-poc/charts/LineChartCard.tsx`|`<Line type="monotone">` + `<Area>` fill overlay for the long-tail series.|
20
+
| 3 | Dual-axis different scales | ✅ |`components/recharts-poc/charts/DualAxisChartCard.tsx`|`<ComposedChart>` + two `<YAxis yAxisId="left" \| "right">` with independent orientations, tick formatters, and colours.|
21
+
| 4 | Histogram comparing 2 metrics |⚠️ |`components/recharts-poc/charts/HistogramCard.tsx`| Recharts has no native histogram primitive — we pre-bucket data in `mocks/keywordLength.ts` and render two `<Bar>` series side-by-side. Standard, idiomatic Recharts approach.|
22
+
| 5 | Pie/donut chart with %-labels | ✅ |`components/recharts-poc/charts/DonutCard.tsx`|`<Pie innerRadius={60} outerRadius={110}>` + custom percent-label renderer positioned outside the slice. Hover-grow via `activeShape={{ outerRadius: 120 }}` (note: Recharts 3.x drives this through internal Redux tooltip state, not the deprecated `activeIndex` prop). |
23
+
| 6 | Table with metric breakdown | ✅ |`components/recharts-poc/table/BreakdownTable.tsx`| Plain HTML table; sortable column headers; heat-tinted "position now" cell scaled by `\|delta\|/maxDelta`; Δ column rendered via shared `DeltaBadge`.|
24
+
| 7 | Data labels with position control + format hooks | ✅ |`<LabelList>` children across charts; position picker on `BarChartCard`| The bar chart exposes a `top / inside / center / insideTop` picker so a reviewer can see position control without reading source. Formatter hook used on bar + histogram (`Intl.NumberFormat('en-US')`).|
25
+
| 8 | Toggle data labels on/off | ✅ |`primitives/LabelsToggle.tsx` per chart | Bar, line, histogram each have an independent toggle. Donut renders labels always (it's unreadable without them).|
26
+
| 9 | Period-over-period delta | ✅ |`primitives/periodOverPeriod.ts` + `kpi/DeltaBadge.tsx`| Pure helper, fully tested (positive, negative, flat, zero-prev, zero-curr, both-zero). Renders `▲ +N%` / `▼ -N%` / `— 0%` and gracefully degrades to absolute delta when there's no prior-period baseline.|
27
+
| 10 | Tooltips, legend visible, series toggle, responsive layout | ✅ |`<ResponsiveContainer>` + `<Legend onClick>` + `hide` prop | Legend click toggles a local `Set<string>` of hidden series; the corresponding `<Bar hide>` / `<Line hide>` reads from it. Applied to line, histogram, dual-axis (bar and donut don't need it — single effective series).|
28
28
29
29
## Non-functional
30
30
31
-
| Criterion | Status | Evidence |
32
-
|-----------|:------:|----------|
33
-
| Last release ≤ 6 months |✅ |`recharts@3.8.1` released **2026-03-25** (npm registry). Today is 2026-06-09 — about 2.5 months ago. Well within the window. |
34
-
| TypeScript types | ✅ | Recharts ships its own types — no `@types/recharts` needed. The POC's `pnpm typecheck` is clean across 21 new files. Two type widenings were needed in v3 strict types: `Tooltip.formatter` / `LabelList.formatter` accept `(v: unknown) => ...`, and `Pie.activeShape` needs a cast to attach a plain object — both documented inline in the chart files. |
35
-
| Documentation quality | ✅ | recharts.org + Storybook stories were sufficient for every chart attempted. The only "discoverability" pain point is the v3 API rewrite around `Pie` hover behaviour, which has migrated from props to internal state — but the new behaviour is correct and the types make the right shape obvious. |
36
-
| Bundle impact |⚠️ | Measured from `next build` output via `.next/build-manifest.json`. **First Load JS (gzipped) — `/labs/recharts`: 315.0 kB vs homepage `/`: 206.0 kB → Δ ≈ 109 kB.** Raw uncompressed delta: ~393 kB (Recharts + d3-* family + Redux Toolkit + react-redux + immer, all from Recharts' transitive graph). Pages Router code-splits per route, so this is **route-local — the homepage and other pages are unaffected**. Reasonable for an analytics page; heavy for a marketing page. |
| Last release ≤ 6 months | ✅ |`recharts@3.8.1` released **2026-03-25** (npm registry). Today is 2026-06-09 — about 2.5 months ago. Well within the window.|
34
+
| TypeScript types | ✅ | Recharts ships its own types — no `@types/recharts` needed. The POC's `pnpm typecheck` is clean across 21 new files. Two type widenings were needed in v3 strict types: `Tooltip.formatter` / `LabelList.formatter` accept `(v: unknown) => ...`, and `Pie.activeShape` needs a cast to attach a plain object — both documented inline in the chart files.|
35
+
| Documentation quality | ✅ | recharts.org + Storybook stories were sufficient for every chart attempted. The only "discoverability" pain point is the v3 API rewrite around `Pie` hover behaviour, which has migrated from props to internal state — but the new behaviour is correct and the types make the right shape obvious.|
36
+
| Bundle impact |⚠️ | Measured from `next build` output via `.next/build-manifest.json`. **First Load JS (gzipped) — `/labs/recharts`: 315.0 kB vs homepage `/`: 206.0 kB → Δ ≈ 109 kB.** Raw uncompressed delta: ~393 kB (Recharts + d3-\* family + Redux Toolkit + react-redux + immer, all from Recharts' transitive graph). Pages Router code-splits per route, so this is **route-local — the homepage and other pages are unaffected**. Reasonable for an analytics page; heavy for a marketing page. |
37
37
38
38
## Weak-laptop test (Marta's Lenovo)
39
39
@@ -44,13 +44,13 @@ To be filled in after running on the target hardware. Test instructions:
44
44
3. Re-open `http://shramko.dev/labs/recharts?perf=1` (animations off) and repeat.
45
45
4. Fill in the scores below (1 = unusable, 5 = smooth).
0 commit comments