@cascivo/charts 0.2.1 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -0
- package/dist/index.d.ts +152 -68
- package/dist/index.js +694 -561
- package/package.json +5 -3
- package/readme.body.md +64 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cascivo/charts",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Chart components built from scratch — scales, shapes, and signal-driven rendering, zero dependencies",
|
|
6
6
|
"keywords": [
|
|
@@ -43,10 +43,11 @@
|
|
|
43
43
|
"provenance": true
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@cascivo/core": "^0.
|
|
47
|
-
"@cascivo/i18n": "^0.1.
|
|
46
|
+
"@cascivo/core": "^0.2.0",
|
|
47
|
+
"@cascivo/i18n": "^0.1.8"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
+
"@preact/signals": "^2",
|
|
50
51
|
"@testing-library/jest-dom": "^6.9.1",
|
|
51
52
|
"@testing-library/react": "^16.3.2",
|
|
52
53
|
"@testing-library/user-event": "^14",
|
|
@@ -54,6 +55,7 @@
|
|
|
54
55
|
"@types/react-dom": "^19.2.3",
|
|
55
56
|
"fast-check": "^4.0.0",
|
|
56
57
|
"jsdom": "^29",
|
|
58
|
+
"preact": "^10",
|
|
57
59
|
"react": "^19.2.7",
|
|
58
60
|
"react-dom": "^19.2.7",
|
|
59
61
|
"typescript": "^5",
|
package/readme.body.md
CHANGED
|
@@ -36,3 +36,67 @@ theme stylesheet) and they pick up the same palette, radii, and typography as th
|
|
|
36
36
|
The charts are signal-driven. In a plain React app (no Babel signals transform), call `useSignals()`
|
|
37
37
|
from `@cascivo/core` as the first statement of any component that reads a signal during render. The
|
|
38
38
|
docs app (Preact) does not need this.
|
|
39
|
+
|
|
40
|
+
## Coloring
|
|
41
|
+
|
|
42
|
+
By default every slice/series/layer is colored from the positional palette
|
|
43
|
+
(`--cascivo-chart-1` … `--cascivo-chart-8`, theme-driven and CVD-safe). To pin a specific color,
|
|
44
|
+
set `color` on the **datum** (`PieChartDatum`) or **series** (`BarChartSeries`) — not on the chart
|
|
45
|
+
component. Any CSS color works, including a token:
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
<PieChart
|
|
49
|
+
title="Task status"
|
|
50
|
+
data={[
|
|
51
|
+
{ id: 'done', label: 'Done', value: 92, color: 'var(--cascivo-color-success)' },
|
|
52
|
+
{ id: 'blocked', label: 'Blocked', value: 16, color: 'var(--cascivo-color-destructive)' },
|
|
53
|
+
]}
|
|
54
|
+
/>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Omit `color` and the slice falls back to its positional palette entry.
|
|
58
|
+
|
|
59
|
+
## Donut with a center label
|
|
60
|
+
|
|
61
|
+
Pass `donut`, then `centerValue`/`centerLabel` (or arbitrary `centerSlot` content) to fill the hole.
|
|
62
|
+
`thickness` (ring width, px) or `innerRadius` (px, wins over `thickness`) tune the ring; `size` is a
|
|
63
|
+
square width/height shorthand:
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
<PieChart
|
|
67
|
+
donut
|
|
68
|
+
size={220}
|
|
69
|
+
thickness={28}
|
|
70
|
+
centerValue="142"
|
|
71
|
+
centerLabel="Total tasks"
|
|
72
|
+
title="Task status"
|
|
73
|
+
data={data}
|
|
74
|
+
/>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
Empty `data` renders a visible placeholder ("No data", override with `emptyLabel`).
|
|
78
|
+
|
|
79
|
+
## Stacked bars from row data
|
|
80
|
+
|
|
81
|
+
`toStackedSeries(rows)` pivots row-oriented `{ label, segments: [{ key, value, color? }] }` data into
|
|
82
|
+
the `series` + `x`/`y` shape `BarChart` consumes, preserving per-segment color. Spread the result in:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { BarChart, toStackedSeries } from '@cascivo/charts'
|
|
86
|
+
|
|
87
|
+
const rows = [
|
|
88
|
+
{ label: 'Mon', segments: [
|
|
89
|
+
{ key: 'Done', value: 5, color: 'var(--cascivo-color-success)' },
|
|
90
|
+
{ key: 'Blocked', value: 2, color: 'var(--cascivo-color-destructive)' },
|
|
91
|
+
] },
|
|
92
|
+
{ label: 'Tue', segments: [
|
|
93
|
+
{ key: 'Done', value: 8, color: 'var(--cascivo-color-success)' },
|
|
94
|
+
{ key: 'Blocked', value: 1, color: 'var(--cascivo-color-destructive)' },
|
|
95
|
+
] },
|
|
96
|
+
]
|
|
97
|
+
|
|
98
|
+
<BarChart mode="stacked" tooltip {...toStackedSeries(rows)} title="Throughput" />
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
The stacked tooltip lists `label · total` then each non-zero layer in its color; pass `tooltipFormat`
|
|
102
|
+
to override, or `xLabelEvery={n}` to thin a crowded x-axis.
|