chartai 0.1.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartai",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "description": "tiny gpu powered charts",
   "type": "module",
   "main": "./dist/chart-library.js",
@@ -11,21 +11,21 @@
       "types": "./dist/chart-library.d.ts",
       "default": "./dist/chart-library.js"
     },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "default": "./dist/types.js"
+    },
     "./worker": {
       "types": "./dist/gpu-worker.d.ts",
       "default": "./dist/gpu-worker.js"
     },
-    "./plugins/hover": {
-      "types": "./dist/plugins/hover.d.ts",
-      "default": "./dist/plugins/hover.js"
-    },
-    "./plugins/labels": {
-      "types": "./dist/plugins/labels.d.ts",
-      "default": "./dist/plugins/labels.js"
+    "./plugins/*": {
+      "types": "./dist/plugins/*.d.ts",
+      "default": "./dist/plugins/*.js"
     },
-    "./plugins/zoom": {
-      "types": "./dist/plugins/zoom.d.ts",
-      "default": "./dist/plugins/zoom.js"
+    "./charts/*": {
+      "types": "./dist/charts/*.d.ts",
+      "default": "./dist/charts/*.js"
     }
   },
   "files": [

package/readme.md

@@ -1,41 +1,46 @@
-# ChartAI
+# chartai
 
-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.
+Are you looking for a simple tiny little chart library which can draw as many lines and points as you have vram? Look no further.
 
-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. 
+chartai is a library that can draw millions and millions of lines across thousands of series wickedly fast. It uses a passive rendering system that only update charts when needed. It lives in a web worker keeping the main thread free. It is fully pluggable so you only take way you need or add what's missing.
 
 * **[Examples](https://dgerrells.github.io/chartai/)**
 * **[Playground](https://dgerrells.github.io/chartai/demo/)**
-* **[Real data canvas demo](https://dgerrells.github.io/chartai/canvas/)**
+* **[Silly overly complicated demo](https://dgerrells.github.io/chartai/canvas/)**
 
-Why ChartAI?
+## Why chartai?
 
-* Tiny, unlimited charts at ~11kb, plugins make it ~15kb
+This library was inspired by uplot which is likely all you need. But if you do need the performance without the bundle bloat, this may do it. With all the core charts and plugins, chartai is about the same size as uplot.
+
+* Tiny, unlimited line charts at ~11kb
 * Customizable with plugins
-* Lines, scatter, and bars
+* Lines, scatter, bar, adn candlestick out of the box
 * Chart synchronization
 * Stupid faster compute shaders
 * Passively rendered, automatic virtualization
 * Doesn't miss the spikes in data, unless you want it to
-* Simple api
+* Typescript, No dependencies
+
+Cool. How do I use it?
 
-### Add a line chart.
+### Add a line chart
 
 ```js
 import { ChartManager } from 'chartai';
+import { LineChart } from 'chartai/charts/line';
 
-const manager = ChartManager.getInstance();
-await manager.init();
+ChartManager.use(LineChart);
+await ChartManager.init();
 
 const x = Array.from({ length: 100 }, (_, i) => i);
 const y = x.map(v => Math.sin(v * 0.1) * 50 + 50);
 
-const chartId = manager.create({
+const chart = ChartManager.create({
   type: 'line',
   container: document.getElementById('chart'),
   series: [{
     label: 'My Data',
-    color: { r: 0.4, g: 0.6, b: 1 },
+    color: 'oklab(0.65 0.15 -0.2)', 
     x,
     y
   }],
@@ -45,52 +50,53 @@ const chartId = manager.create({
 ### Plugins
 
 ```js
-import { ChartManager, registerPlugin } from 'chartai';
-import { zoomPlugin } from 'chartai/plugins/zoom';
+import { ChartManager } from 'chartai';
+import { labelsPlugin } from 'chartai/plugins/labels';
 import { hoverPlugin } from 'chartai/plugins/hover';
 
-registerPlugin(zoomPlugin());
-registerPlugin(hoverPlugin);
+ChartManager.use(zoomPlugin);
+ChartManager.use(hoverPlugin);
 ```
 
-### React weirdos
+### Agnostic
+
+It is pure js. Add it to your favorite framework. 
 
 ```js
 import { useEffect, useRef } from 'react';
-import { ChartManager, registerPlugin } from 'chartai';
+import { ChartManager } from 'chartai';
+import { LineChart } from 'chartai/charts/line';
 import { zoomPlugin } from 'chartai/plugins/zoom';
 import { hoverPlugin } from 'chartai/plugins/hover';
 import { labelsPlugin } from 'chartai/plugins/labels';
 
 function Chart() {
   const ref = useRef(null);
-  const chartIdRef = useRef(null);
+  const chartRef = useRef(null);
   
   useEffect(() => {
-    registerPlugin(labelsPlugin);
-    registerPlugin(zoomPlugin());
-    registerPlugin(hoverPlugin);
+    ChartManager.use(LineChart);
+    ChartManager.use(labelsPlugin);
+    ChartManager.use(zoomPlugin());
+    ChartManager.use(hoverPlugin);
     
-    const manager = ChartManager.getInstance();
-    manager.init().then(() => {
+    ChartManager.init().then(() => {
       const x = Array.from({ length: 100 }, (_, i) => i);
       const y = x.map(v => Math.sin(v * 0.1) * 50 + 50);
       
-      chartIdRef.current = manager.create({
+      chartRef.current = ChartManager.create({
         type: 'line',
         container: ref.current,
-        series: [{ label: 'My Data', color: { r: 0.4, g: 0.6, b: 1 }, x, y }],
+        series: [{ label: 'My Data', color: '#ffffff', x, y }],
         zoomMode: 'both',
         showTooltip: true
       });
       
-      manager.setZoomMode(chartIdRef.current, 'x-only');
+      chartRef.current.configure({ zoomMode: 'x-only' });
     });
     
     return () => {
-      if (chartIdRef.current) {
-        manager.destroy(chartIdRef.current);
-      }
+      chartRef.current?.destroy();
     };
   }, []);
   
@@ -100,16 +106,22 @@ function Chart() {
 
 ## Design
 
-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.
+A little layer communicates with a web worker that does all the gpu rendering. The design is pretty simple. Everything is a plugin. Both charts and well, plugins. The best way to see how to write your own plugins and charts is to look at the ones that already exist.
+
+Yes, you can point an agent at the examples and it will understand it. 
+
+To demonstrate just how well it works there is a boids simulation chart where the chart data functions as starting locations for the boids. It is totally overkill and ridiculous and silly. It does show the power of the framework.
+
+Some charts and plugins are AI generated without thorough review. They are listed under an `/experimental` folder to make it explicit they are not polished.
+
+## Gotchas
+
+* WebGPU - this uses it so if it isn't there it will not work. No fallback is provided as the intent is for this library to be tiny and lean. 
+* Appending data - Updating data is plenty fast even with larger datasets but it could be smarter. It doesn't support having a larger buffer size and only sending updated data. It is a full update internally for now.
+* Workers - The library will try and inline bundle the worker for maximum simplicity. If it fails, it will fallback to standard es worker loading.
+
+### Contribution
 
-## Gotchas and missing features
+I test using bun which handles most of the bundling out of the box.
 
-* 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.
-* Bar charts...i like these and will not change them. They may not fit your jib. Copypasta your own shader, this lib is tiny. 
-* Webgpu is used. No compute shaders, no charts
-* 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.
-* 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.
-* Decimation may not be to your liking.
-* Finding the closes data point is a little messy.
-* 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.
-* AI help with human review. If you want your code free-range and hormone free, look elsewhere. This works for me. 
+You can start a server watching files by running `bun server.ts`.

package/dist/chunk-bgfkgcmg.js

@@ -1,25 +0,0 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-export { __toESM, __require };

package/dist/chunk-cj3zanvs.min.js

@@ -1,2 +0,0 @@
-var g=Object.create;var{getPrototypeOf:h,defineProperty:f,getOwnPropertyNames:i}=Object;var j=Object.prototype.hasOwnProperty;var k=(a,c,b)=>{b=a!=null?g(h(a)):{};let d=c||!a||!a.__esModule?f(b,"default",{value:a,enumerable:!0}):b;for(let e of i(a))if(!j.call(d,e))f(d,e,{get:()=>a[e],enumerable:!0});return d};var l=((a)=>typeof require!=="undefined"?require:typeof Proxy!=="undefined"?new Proxy(a,{get:(c,b)=>(typeof require!=="undefined"?require:c)[b]}):a)(function(a){if(typeof require!=="undefined")return require.apply(this,arguments);throw Error('Dynamic require of "'+a+'" is not supported')});
-export{k as b,l as c};