aliencharts 0.3.0 → 0.3.2
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 +67 -32
- package/dist/aliencharts.global.js +3327 -0
- package/dist/aliencharts.global.js.map +7 -0
- package/dist/aliencharts.global.min.js +159 -0
- package/dist/aliencharts.global.min.js.map +7 -0
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -34,6 +34,45 @@ import "aliencharts/styles.css";
|
|
|
34
34
|
|
|
35
35
|
Dark mode follows a `.dark` class on any ancestor element (e.g. `<html class="dark">`).
|
|
36
36
|
|
|
37
|
+
## React
|
|
38
|
+
|
|
39
|
+
If you use React in your application, import the React entry point:
|
|
40
|
+
|
|
41
|
+
```jsx
|
|
42
|
+
import { useRef, useState } from "react";
|
|
43
|
+
import "aliencharts/styles.css";
|
|
44
|
+
import { ChartGrid, createLineSeries } from "aliencharts/react";
|
|
45
|
+
|
|
46
|
+
const series = createLineSeries({
|
|
47
|
+
id: "run-1",
|
|
48
|
+
x: [0, 1, 2, 3, 4],
|
|
49
|
+
y: [2.5, 1.9, 1.4, 1.1, 0.9],
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
export default function Dashboard() {
|
|
53
|
+
const gridRef = useRef(null);
|
|
54
|
+
const [dataRevision, setDataRevision] = useState(0);
|
|
55
|
+
|
|
56
|
+
const append = () => {
|
|
57
|
+
series.append([series.length], [Math.random()]);
|
|
58
|
+
setDataRevision((value) => value + 1);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<div style={{ height: "100vh" }}>
|
|
63
|
+
<button onClick={append}>Append</button>
|
|
64
|
+
<ChartGrid
|
|
65
|
+
ref={gridRef}
|
|
66
|
+
charts={[{ id: "loss", title: "train/loss", series: [series] }]}
|
|
67
|
+
dataRevision={dataRevision}
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
See the [React demo source](https://github.com/FarangLab/AlienCharts/blob/main/examples/DemoPage.jsx) for a larger controlled-state example.
|
|
75
|
+
|
|
37
76
|
## Vanilla Web
|
|
38
77
|
|
|
39
78
|
```html
|
|
@@ -81,45 +120,40 @@ grid.destroy();
|
|
|
81
120
|
|
|
82
121
|
See the [Vanilla Web example source](https://github.com/FarangLab/AlienCharts/blob/main/examples/vanilla.js) for a more complete setup.
|
|
83
122
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
If you use React in your application, import the React entry point:
|
|
87
|
-
|
|
88
|
-
```jsx
|
|
89
|
-
import { useRef, useState } from "react";
|
|
90
|
-
import "aliencharts/styles.css";
|
|
91
|
-
import { ChartGrid, createLineSeries } from "aliencharts/react";
|
|
123
|
+
### CDN / script tag
|
|
92
124
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
x: [0, 1, 2, 3, 4],
|
|
96
|
-
y: [2.5, 1.9, 1.4, 1.1, 0.9],
|
|
97
|
-
});
|
|
125
|
+
For browser use without npm or a bundler, load the stylesheet and standalone
|
|
126
|
+
build from jsDelivr:
|
|
98
127
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
128
|
+
```html
|
|
129
|
+
<link
|
|
130
|
+
rel="stylesheet"
|
|
131
|
+
href="https://cdn.jsdelivr.net/npm/aliencharts@0.3.1/dist/aliencharts.css"
|
|
132
|
+
>
|
|
102
133
|
|
|
103
|
-
|
|
104
|
-
series.append([series.length], [Math.random()]);
|
|
105
|
-
setDataRevision((value) => value + 1);
|
|
106
|
-
};
|
|
134
|
+
<div id="charts" style="height: 100vh"></div>
|
|
107
135
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
136
|
+
<script src="https://cdn.jsdelivr.net/npm/aliencharts@0.3.1/dist/aliencharts.global.min.js"></script>
|
|
137
|
+
<script>
|
|
138
|
+
const series = AlienCharts.createLineSeries({
|
|
139
|
+
id: "run-1",
|
|
140
|
+
x: [0, 1, 2, 3],
|
|
141
|
+
y: [2.5, 1.9, 1.4, 1.1],
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
const grid = AlienCharts.createChartGrid(
|
|
145
|
+
document.querySelector("#charts"),
|
|
146
|
+
{
|
|
147
|
+
charts: [{
|
|
148
|
+
id: "loss",
|
|
149
|
+
title: "train/loss",
|
|
150
|
+
series: [series],
|
|
151
|
+
}],
|
|
152
|
+
},
|
|
117
153
|
);
|
|
118
|
-
|
|
154
|
+
</script>
|
|
119
155
|
```
|
|
120
156
|
|
|
121
|
-
See the [React demo source](https://github.com/FarangLab/AlienCharts/blob/main/examples/DemoPage.jsx) for a larger controlled-state example.
|
|
122
|
-
|
|
123
157
|
## Data API
|
|
124
158
|
|
|
125
159
|
Framework-neutral data helpers are also available from the package root:
|
|
@@ -227,6 +261,7 @@ npm run examples
|
|
|
227
261
|
Then open:
|
|
228
262
|
|
|
229
263
|
- Vanilla Web: <http://127.0.0.1:4178/examples/vanilla.html>
|
|
264
|
+
- Standalone script: <http://127.0.0.1:4178/examples/standalone.html>
|
|
230
265
|
- React: <http://127.0.0.1:4178/examples/react.html>
|
|
231
266
|
- Bar charts: <http://127.0.0.1:4178/examples/bars.html>
|
|
232
267
|
|