chartai 0.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/LICENSE +21 -0
- package/dist/chart-library.d.ts +170 -0
- package/dist/chart-library.d.ts.map +1 -0
- package/dist/chart-library.js +544 -0
- package/dist/chart-library.min.js +1 -0
- package/dist/gpu-worker.d.ts +2 -0
- package/dist/gpu-worker.d.ts.map +1 -0
- package/dist/gpu-worker.js +853 -0
- package/dist/gpu-worker.min.js +1 -0
- package/dist/hover.d.ts +3 -0
- package/dist/hover.d.ts.map +1 -0
- package/dist/hover.js +181 -0
- package/dist/hover.min.js +1 -0
- package/dist/labels.d.ts +3 -0
- package/dist/labels.d.ts.map +1 -0
- package/dist/labels.js +101 -0
- package/dist/labels.min.js +1 -0
- package/dist/zoom.d.ts +6 -0
- package/dist/zoom.d.ts.map +1 -0
- package/dist/zoom.js +205 -0
- package/dist/zoom.min.js +1 -0
- package/package.json +78 -0
- package/readme.md +121 -0
package/package.json
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "chartai",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "tiny gpu powered charts",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/chart-library.js",
|
|
7
|
+
"module": "./dist/chart-library.js",
|
|
8
|
+
"types": "./dist/chart-library.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/chart-library.d.ts",
|
|
12
|
+
"default": "./dist/chart-library.js"
|
|
13
|
+
},
|
|
14
|
+
"./worker": {
|
|
15
|
+
"types": "./dist/gpu-worker.d.ts",
|
|
16
|
+
"default": "./dist/gpu-worker.js"
|
|
17
|
+
},
|
|
18
|
+
"./plugins/hover": {
|
|
19
|
+
"types": "./dist/hover.d.ts",
|
|
20
|
+
"default": "./dist/hover.js"
|
|
21
|
+
},
|
|
22
|
+
"./plugins/labels": {
|
|
23
|
+
"types": "./dist/labels.d.ts",
|
|
24
|
+
"default": "./dist/labels.js"
|
|
25
|
+
},
|
|
26
|
+
"./plugins/zoom": {
|
|
27
|
+
"types": "./dist/zoom.d.ts",
|
|
28
|
+
"default": "./dist/zoom.js"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"files": [
|
|
32
|
+
"dist",
|
|
33
|
+
"README.md",
|
|
34
|
+
"LICENSE"
|
|
35
|
+
],
|
|
36
|
+
"scripts": {
|
|
37
|
+
"dev": "bun run server.ts",
|
|
38
|
+
"clean": "rm -rf dist docs",
|
|
39
|
+
"prebuild": "bun run clean",
|
|
40
|
+
"build:lib": "bun run clean && bun run build.ts lib",
|
|
41
|
+
"build:pages": "bun run clean && bun run build.ts pages",
|
|
42
|
+
"build": "bun run build.ts all",
|
|
43
|
+
"version:patch": "npm version patch",
|
|
44
|
+
"version:minor": "npm version minor",
|
|
45
|
+
"version:major": "npm version major",
|
|
46
|
+
"prepublishOnly": "bun run build:lib"
|
|
47
|
+
},
|
|
48
|
+
"keywords": [
|
|
49
|
+
"webgpu",
|
|
50
|
+
"chart",
|
|
51
|
+
"charts",
|
|
52
|
+
"visualization",
|
|
53
|
+
"data-viz",
|
|
54
|
+
"canvas",
|
|
55
|
+
"gpu",
|
|
56
|
+
"performance",
|
|
57
|
+
"scatter",
|
|
58
|
+
"line",
|
|
59
|
+
"bar"
|
|
60
|
+
],
|
|
61
|
+
"author": "",
|
|
62
|
+
"license": "Unlicense",
|
|
63
|
+
"repository": {
|
|
64
|
+
"type": "git",
|
|
65
|
+
"url": "git+https://github.com/dgerrells/chartai.git"
|
|
66
|
+
},
|
|
67
|
+
"bugs": {
|
|
68
|
+
"url": "https://github.com/dgerrells/chartai/issues"
|
|
69
|
+
},
|
|
70
|
+
"homepage": "https://dgerrells.github.io/chartai/",
|
|
71
|
+
"peerDependencies": {},
|
|
72
|
+
"devDependencies": {
|
|
73
|
+
"typescript": "^5.0.0"
|
|
74
|
+
},
|
|
75
|
+
"engines": {
|
|
76
|
+
"node": ">=18.0.0"
|
|
77
|
+
}
|
|
78
|
+
}
|
package/readme.md
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# ChartAI
|
|
2
|
+
|
|
3
|
+
Are you looking for a simple tiny little chart library which can draw as many lines and points across as many charts as you have vram? Look no further.
|
|
4
|
+
|
|
5
|
+
ChartAI is an ai powered chart library which can draw millions and millions of lines across hundreds at 60fps. But like good engineers we only draw when we need to saving battery life.
|
|
6
|
+
|
|
7
|
+
**[Try the Canvas Demo →](https://dgerrells.github.io/chartai/canvas/)**
|
|
8
|
+
|
|
9
|
+
Why ChartAI?
|
|
10
|
+
|
|
11
|
+
* Tiny, unlimited charts at ~11kb, plugins make it ~15kb
|
|
12
|
+
* Customizable with plugins
|
|
13
|
+
* Lines, scatter, and bars
|
|
14
|
+
* Chart synchronization
|
|
15
|
+
* Stupid faster compute shaders
|
|
16
|
+
* Passively rendered, automatic virtualization
|
|
17
|
+
* Doesn't miss the spikes in data, unless you want it to
|
|
18
|
+
* Simple api
|
|
19
|
+
|
|
20
|
+
### Add a line chart.
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
import { ChartManager } from 'chartai';
|
|
24
|
+
|
|
25
|
+
const manager = ChartManager.getInstance();
|
|
26
|
+
await manager.init();
|
|
27
|
+
|
|
28
|
+
const x = Array.from({ length: 100 }, (_, i) => i);
|
|
29
|
+
const y = x.map(v => Math.sin(v * 0.1) * 50 + 50);
|
|
30
|
+
|
|
31
|
+
const chartId = manager.create({
|
|
32
|
+
type: 'line',
|
|
33
|
+
container: document.getElementById('chart'),
|
|
34
|
+
series: [{
|
|
35
|
+
label: 'My Data',
|
|
36
|
+
color: { r: 0.4, g: 0.6, b: 1 },
|
|
37
|
+
x,
|
|
38
|
+
y
|
|
39
|
+
}],
|
|
40
|
+
});
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Plugins
|
|
44
|
+
|
|
45
|
+
```js
|
|
46
|
+
import { ChartManager, registerPlugin } from 'chartai';
|
|
47
|
+
import { zoomPlugin } from 'chartai/plugins/zoom';
|
|
48
|
+
import { hoverPlugin } from 'chartai/plugins/hover';
|
|
49
|
+
|
|
50
|
+
registerPlugin(zoomPlugin());
|
|
51
|
+
registerPlugin(hoverPlugin);
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### React weirdos
|
|
55
|
+
|
|
56
|
+
```js
|
|
57
|
+
import { useEffect, useRef } from 'react';
|
|
58
|
+
import { ChartManager, registerPlugin } from 'chartai';
|
|
59
|
+
import { zoomPlugin } from 'chartai/plugins/zoom';
|
|
60
|
+
import { hoverPlugin } from 'chartai/plugins/hover';
|
|
61
|
+
import { labelsPlugin } from 'chartai/plugins/labels';
|
|
62
|
+
|
|
63
|
+
function Chart() {
|
|
64
|
+
const ref = useRef(null);
|
|
65
|
+
const chartIdRef = useRef(null);
|
|
66
|
+
|
|
67
|
+
useEffect(() => {
|
|
68
|
+
registerPlugin(labelsPlugin);
|
|
69
|
+
registerPlugin(zoomPlugin());
|
|
70
|
+
registerPlugin(hoverPlugin);
|
|
71
|
+
|
|
72
|
+
const manager = ChartManager.getInstance();
|
|
73
|
+
manager.init().then(() => {
|
|
74
|
+
const x = Array.from({ length: 100 }, (_, i) => i);
|
|
75
|
+
const y = x.map(v => Math.sin(v * 0.1) * 50 + 50);
|
|
76
|
+
|
|
77
|
+
chartIdRef.current = manager.create({
|
|
78
|
+
type: 'line',
|
|
79
|
+
container: ref.current,
|
|
80
|
+
series: [{ label: 'My Data', color: { r: 0.4, g: 0.6, b: 1 }, x, y }],
|
|
81
|
+
zoomMode: 'both',
|
|
82
|
+
showTooltip: true
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
manager.setZoomMode(chartIdRef.current, 'x-only');
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
return () => {
|
|
89
|
+
if (chartIdRef.current) {
|
|
90
|
+
manager.destroy(chartIdRef.current);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
}, []);
|
|
94
|
+
|
|
95
|
+
return <div ref={ref} style={{ width: '100%', height: '400px' }} />;
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Design
|
|
100
|
+
|
|
101
|
+
I need to draw lots of lines, points, boxes whatever on multiple (2o+) charts where the view port is synchronized. The solution is to have a web worker generating frames via compute shaders. This allows for almost unlimited charts. As many as you can fit on the screen. Data scale depends on hardware but an m1 can push it at 60fps until ram runs out.
|
|
102
|
+
|
|
103
|
+
## Gotchas and missing features
|
|
104
|
+
|
|
105
|
+
* appending or updating is stupid. Full reupload. There are ways you can fast copy on the gpu memory to smartly grow. At small sizes it is still butter.
|
|
106
|
+
|
|
107
|
+
* Bar charts...i like these and will not change them. They may not fit your jib. Copypasta your own shader, this lib is tiny.
|
|
108
|
+
|
|
109
|
+
* Webgpu is used. No compute shaders, no charts
|
|
110
|
+
|
|
111
|
+
* missing line size option. I need to switch up to a post process option (works well and cheap) or use signed distance fields. Many benefits but complex.
|
|
112
|
+
|
|
113
|
+
* triple layered canvas. The plugins allow for canvas drawing behind and in front of the chart via 2 extra canvases. I hate it. There is a way I think to use a single canvas but I am still trying to figure it out.
|
|
114
|
+
|
|
115
|
+
* Decimation may not be to your liking.
|
|
116
|
+
|
|
117
|
+
* Finding the closes data point is a little messy.
|
|
118
|
+
|
|
119
|
+
* I fucking hate npm publishing so if you like this, best bet is to just copypasta whatever you want. Or point local AI at this repo cook.
|
|
120
|
+
|
|
121
|
+
* AI help with every line reviewed by a human. If you want your code free-range and hormone free, look elsewhere.
|