chartout 1.0.0 → 1.0.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 +66 -39
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,56 +1,83 @@
|
|
|
1
|
-
# chartout
|
|
1
|
+
# chartout
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Print Your Insights, Anytime, Anywhere**
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
<sub><sup>With every purchase, we donate 10% to NumFOCUS to support open-source scientific software.</sup></sub>
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|------|------|
|
|
9
|
-
| **chartout** | Python package + JavaScript reference implementation |
|
|
10
|
-
| **chartout-api** | Backend API |
|
|
11
|
-
| **chartout-app** | This repo — widget bundle + npm package |
|
|
12
|
-
| **chartout-web** | Checkout web app |
|
|
7
|
+
Chartout turns data visualizations into beautiful, printed products — canvas prints, mugs, mousepads and more. You create a chart, pick a product, and chartout handles everything from interactive 3D preview to order fulfilment.
|
|
13
8
|
|
|
14
|
-
##
|
|
9
|
+
## Python / Jupyter
|
|
15
10
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
```bash
|
|
12
|
+
pip install chartout
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```python
|
|
16
|
+
import matplotlib.pyplot as plt
|
|
17
|
+
import chartout
|
|
18
|
+
|
|
19
|
+
# matplotlib
|
|
20
|
+
fig, ax = plt.subplots()
|
|
21
|
+
ax.plot(x, y)
|
|
22
|
+
store = chartout.Store(fig)
|
|
23
|
+
|
|
24
|
+
# or Altair
|
|
25
|
+
import altair as alt
|
|
26
|
+
chart = alt.Chart(data).mark_point().encode(x='x', y='y')
|
|
27
|
+
store = chartout.Store(chart)
|
|
28
|
+
|
|
29
|
+
store # renders the interactive widget in Jupyter
|
|
30
|
+
```
|
|
22
31
|
|
|
23
|
-
##
|
|
32
|
+
## JavaScript / React
|
|
24
33
|
|
|
25
34
|
```bash
|
|
26
|
-
|
|
27
|
-
cd chartout-app
|
|
28
|
-
pixi install
|
|
29
|
-
pixi run npm-install
|
|
30
|
-
pixi run npm-dev
|
|
35
|
+
npm install chartout
|
|
31
36
|
```
|
|
32
37
|
|
|
33
|
-
|
|
38
|
+
Three steps connect your chart to the widget:
|
|
34
39
|
|
|
35
|
-
|
|
40
|
+
```ts
|
|
41
|
+
import { createChartoutModel } from 'chartout';
|
|
42
|
+
import type { CartItem, ActiveItem } from 'chartout';
|
|
36
43
|
|
|
37
|
-
|
|
38
|
-
|
|
44
|
+
// 1. Create the state bridge
|
|
45
|
+
const model = createChartoutModel({});
|
|
46
|
+
|
|
47
|
+
// 2. Rasterise your chart at print resolution
|
|
48
|
+
const bytes = svgToBytes(mySvgElement, 3900, 3900);
|
|
49
|
+
|
|
50
|
+
// 3. Push to the widget
|
|
51
|
+
model.set('active_item', {
|
|
52
|
+
id: 'canvas_10x10',
|
|
53
|
+
name: 'Canvas (10″×10″)',
|
|
54
|
+
placements: [{ id: 'default', content: bytes }],
|
|
55
|
+
} satisfies ActiveItem);
|
|
56
|
+
|
|
57
|
+
// Listen to cart changes
|
|
58
|
+
model.on('change:cart', () => {
|
|
59
|
+
const cart = model.get('cart'); // CartItem[]
|
|
60
|
+
});
|
|
39
61
|
```
|
|
40
62
|
|
|
41
|
-
|
|
63
|
+
### Embedding in React
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { useEffect, useRef } from 'react';
|
|
67
|
+
import { widgetRender } from 'chartout/render';
|
|
68
|
+
|
|
69
|
+
function ChartoutWidget({ model, style }) {
|
|
70
|
+
const ref = useRef(null);
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
const cleanup = widgetRender({ model, el: ref.current, experimental: {} });
|
|
73
|
+
return () => typeof cleanup === 'function' && cleanup();
|
|
74
|
+
}, [model]);
|
|
75
|
+
return <div ref={ref} style={{ width: '100%', ...style }} />;
|
|
76
|
+
}
|
|
77
|
+
```
|
|
42
78
|
|
|
43
|
-
| Script | Output |
|
|
44
|
-
|--------|--------|
|
|
45
|
-
| `npm run build` | Full production build (widget + lib + render + types) |
|
|
46
|
-
| `npm run buildwidget` | `bundle/Widget.js` |
|
|
47
|
-
| `npm run buildlib` | `bundle/lib.js` |
|
|
48
|
-
| `npm run buildrender` | `bundle/render.js` |
|
|
49
|
-
| `npm run buildtypes` | `bundle/types/` |
|
|
50
|
-
| `npm run dev` | Watch all outputs + serve |
|
|
51
79
|
|
|
52
|
-
##
|
|
80
|
+
## Links
|
|
53
81
|
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
- **chartout-web** — Checkout web app: https://github.com/hoekinsights/chartout-web
|
|
82
|
+
- [chartout.io](https://chartout.io)
|
|
83
|
+
- [npm](https://www.npmjs.com/package/chartout)
|