@cascivo/charts 0.2.0
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 +68 -0
- package/dist/charts.css +2 -0
- package/dist/index.d.ts +684 -0
- package/dist/index.js +2090 -0
- package/package.json +72 -0
- package/readme.body.md +38 -0
package/README.md
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!-- generated by scripts/readme/generate.ts — edit readme.body.md, not this file -->
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
<a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="72" height="72" alt="cascivo logo"></a>
|
|
5
|
+
<h1>@cascivo/charts</h1>
|
|
6
|
+
<p><strong>Chart components built from scratch — scales, shapes, and signal-driven rendering, zero dependencies</strong></p>
|
|
7
|
+
|
|
8
|
+
[](https://www.npmjs.com/package/@cascivo/charts)
|
|
9
|
+
[](https://www.npmjs.com/package/@cascivo/charts)
|
|
10
|
+
[](https://github.com/cascivo/cascivo/blob/main/LICENSE)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
[npm](https://www.npmjs.com/package/@cascivo/charts) · [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo)
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
Accessible, signal-driven chart library for cascivo — AreaChart, BarChart, LineChart, Sparkline, Heatmap, and more. All charts are keyboard-navigable with `aria-live` tooltips. CVD-safe palettes (Okabe-Ito, oklch) verified in CI across all 14 themes.
|
|
20
|
+
|
|
21
|
+
## Install
|
|
22
|
+
|
|
23
|
+
```sh
|
|
24
|
+
pnpm add @cascivo/charts @preact/signals-react
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
`react`, `react-dom`, and `@preact/signals-react` are peer dependencies — install them in your app.
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { AreaChart, BarChart, LineChart, Sparkline } from '@cascivo/charts'
|
|
33
|
+
import '@cascivo/charts/styles.css' // required — maps to the dist `charts.css`
|
|
34
|
+
import '@cascivo/themes/dark.css' // any cascivo theme drives the chart colors
|
|
35
|
+
|
|
36
|
+
export function Traffic() {
|
|
37
|
+
return (
|
|
38
|
+
<LineChart
|
|
39
|
+
data={[
|
|
40
|
+
{ x: 0, y: 12 },
|
|
41
|
+
{ x: 1, y: 28 },
|
|
42
|
+
{ x: 2, y: 19 },
|
|
43
|
+
]}
|
|
44
|
+
/>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Charts are CSS-token-themed: drop them inside any element carrying a `data-theme` (or import a
|
|
50
|
+
theme stylesheet) and they pick up the same palette, radii, and typography as the rest of cascivo.
|
|
51
|
+
|
|
52
|
+
### React apps must subscribe to signals
|
|
53
|
+
|
|
54
|
+
The charts are signal-driven. In a plain React app (no Babel signals transform), call `useSignals()`
|
|
55
|
+
from `@cascivo/core` as the first statement of any component that reads a signal during render. The
|
|
56
|
+
docs app (Preact) does not need this.
|
|
57
|
+
|
|
58
|
+
## Install
|
|
59
|
+
|
|
60
|
+
```sh
|
|
61
|
+
pnpm add @cascivo/charts
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
[cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo) · AI agents: use [`@cascivo/mcp`](https://github.com/cascivo/cascivo/tree/main/packages/mcp) and [`registry.json`](https://github.com/cascivo/cascivo/blob/main/registry.json) · MIT
|
|
67
|
+
|
|
68
|
+
<div align="center"><a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="28" height="28" alt="cascivo"></a></div>
|
package/dist/charts.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer cascivo.component{._frame_1aivh_2{inline-size:100%;position:relative}._fallback_1aivh_7{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;inset-inline-start:-9999px;overflow:hidden}._legend_zczeh_2{gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);flex-wrap:wrap;display:flex}._item_zczeh_9{align-items:center;gap:var(--cascivo-space-1);padding:var(--cascivo-space-1) var(--cascivo-space-2);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-sm);cursor:pointer;font-size:var(--cascivo-font-size-sm);color:var(--cascivo-color-text);transition:opacity var(--cascivo-duration-150,.15s) ease;background:0 0;display:flex}._item_zczeh_9[data-state=off]{opacity:.4}._swatch_zczeh_27{border-radius:2px;flex-shrink:0;block-size:12px;inline-size:12px;display:inline-block}}
|
|
2
|
+
/*$vite$:1*/
|