BaryoDev / BaryoDev/barakoBrew

Analytics charts: adopt Recharts when the restyle needs it, not before

Open
#44 0 comments 0 reactions 1 assignee Claimed by @arnelirobles View on GitHub
enhancement
Dominant language
TypeScript
Stars
1
Forks
2
Avg merge
4h 34m
Merged PRs (30d)
60

Description

**Target release: 1.0.0**

#14 wants the analytics screen restyled plus a previous-period series the module does not return yet.

## The current state is fine, and that matters

`src/components/analytics/sparkline.tsx` is a hand-rolled, dependency-free SVG area chart — about 45 lines, scales to its container, carries a `role="img"` and an aria-label. For a single series with no axes it is genuinely the right amount of code, and replacing it with a charting library would be a net loss.

**So this issue is deliberately conditional.** Adopt a chart library at the point #14 actually needs axes, tooltips, a legend and two overlaid series. Not before.

## The pick, when that point arrives

`recharts` 3.10.1, MIT, ~290 releases, last publish 2026-07-25.

Policy check (#39):
- **Licence:** MIT. Passes.
- **Runtime gate:** none. Recharts is a community project with no commercial entity behind it, so there is no upsell path to be captured by.
- **Maintenance:** active.
- React 19 in the peer range (`^16.8.0 || ^17 || ^18 || ^19`).

Alternatives considered and rejected: `@nivo/*` (MIT, heavier, more opinionated styling to fight), `visx` (MIT, lower level — more control than needed and closer to hand-rolling), Chart.js (MIT, canvas-based, which loses the CSS theming the console gets for free from SVG and complicates the dark-mode story).

Explicitly banned by #39: **Highcharts** and any chart library with a commercial licence for commercial use. Do not let a "free for non-commercial" library into an admin console that ships in a product.

## Scope, in order

1. **Confirm the API side first.** #14 says the previous-period series is not returned by the analytics module. A chart library cannot draw data that does not exist — that is a barakoCMS change and it blocks the interesting half of this issue.
2. Restyle with the existing sparkline where a single series is all that is shown.
3. Introduce Recharts only for the views that need two series, axes or tooltips.
4. If Recharts lands, keep the sparkline for the small inline trend cells rather than routing everything through the heavier component.

## Accessibility

The current sparkline sets `role="img"` with a label. Recharts renders SVG with its own structure, so the axe pass and a screen-reader-accessible summary need re-checking rather than assuming they carry over. A chart that is only meaningful visually fails the standard this project holds (28 jsx-a11y rules, axe in CI).

Serves #14. Follows #39.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.