chartai 1.0.0 → 1.1.0

package/dist/worker-inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"worker-inline.d.ts","sourceRoot":"","sources":["../src/worker-inline.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,8ueAA8ue,CAAC"}
+{"version":3,"file":"worker-inline.d.ts","sourceRoot":"","sources":["../src/worker-inline.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,43eAA43e,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartai",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "tiny gpu powered charts",
   "type": "module",
   "main": "./dist/chart-library.js",

package/readme.md

@@ -10,7 +10,7 @@ chartai is a library that can draw millions and millions of lines across thousan
 
 ## Why chartai?
 
-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.
+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
@@ -19,6 +19,7 @@ This library was inspired by uplot which is likely all you need. But if you do n
 * Stupid faster compute shaders
 * Passively rendered, automatic virtualization
 * Doesn't miss the spikes in data, unless you want it to
+* Typescript, No dependencies
 
 Cool. How do I use it?
 
@@ -105,11 +106,13 @@ function Chart() {
 
 ## Design
 
-A little layer communicates with a web worker that does all the web 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 exist.
+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 how powerful the framework is.
+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
 

package/dist/chunk-94kc81rr.min.js

@@ -1,2 +0,0 @@
-import{m as B}from"./chunk-bfyv7z27.js";import{o as Y}from"./chunk-me3qaz3m.js";class X{id;_mgr;constructor(q,A){this.id=q,this._mgr=A}get _c(){return this._mgr.charts.get(this.id)}setData(q){this._mgr.updateSeries(this.id,q)}configure(q){let A=this._c;if(!A)return;Object.assign(A.config,q);let F=new Set((A.renderer.uniforms??[]).map((J)=>J.name)),G={};for(let J of Object.keys(q)){let T=q[J];if(typeof T==="number"&&F.has(J))G[J]=T}if(Object.keys(G).length>0)Object.assign(A.customUniforms,G),this._mgr.worker?.postMessage({type:B.SET_UNIFORMS,id:this.id,values:G});if("bgColor"in q&&q.bgColor!==void 0){let[J,T,I]=q.bgColor,N=A.el.querySelector("div");if(N)N.style.background=`rgb(${Math.round(J*255)},${Math.round(T*255)},${Math.round(I*255)})`;this._mgr.worker?.postMessage({type:B.SET_STYLE,id:this.id,bgColor:q.bgColor})}this._mgr.requestRender(this.id),this._mgr.drawChart(A)}addPlugin(q){let A=this._c;if(!A||A.plugins.some((G)=>G.name===q.name))return;let F=A.el.querySelector("div");q.install?.(A,F),A.plugins.push(q),this._mgr.drawChart(A)}removePlugin(q){let A=this._c;if(!A)return;let F=A.plugins.findIndex((G)=>G.name===q);if(F>=0)A.plugins[F].uninstall?.(A),A.plugins.splice(F,1),this._mgr.drawChart(A)}hasPlugin(q){return this._c?.plugins.some((A)=>A.name===q)??!1}resetView(){this._mgr.resetView(this.id)}destroy(){this._mgr.destroy(this.id)}}var H=null;function z(q){if(typeof q!=="string")return q;if(!H)H=document.createElement("i"),H.style.cssText="display:none",document.body.appendChild(H);H.style.color=q;let A=getComputedStyle(H).color.match(/\d+/g);return{r:+A[0]/255,g:+A[1]/255,b:+A[2]/255}}function W(q,A,F){let G=devicePixelRatio||1;if(q.width=Math.round(A*G),q.height=Math.round(F*G),q instanceof HTMLCanvasElement)q.style.width=`${A}px`,q.style.height=`${F}px`}class S{static instance=null;worker=null;charts=new Map;renderers=new Map;uiPlugins=[];pendingRenderers=[];chartIdCounter=0;_isDark=!1;_syncViews=!1;statsCallbacks=[];currentStats={fps:0,renderMs:0,total:0,active:0};visibilityObserver;resizeObserver;constructor(){this._isDark=document.documentElement.classList.contains("dark"),this.visibilityObserver=new IntersectionObserver((q)=>{for(let A of q){let F=A.target.dataset.chartId;if(!F)continue;let G=this.charts.get(F);if(!G)continue;if(G.visible=A.isIntersecting,this.worker?.postMessage({type:B.SET_VISIBILITY,id:F,visible:A.isIntersecting}),A.isIntersecting)this.drawChart(G)}},{threshold:0.01}),this.resizeObserver=new ResizeObserver((q)=>{for(let A of q){let F=A.target.dataset.chartId;if(!F)continue;let G=this.charts.get(F);if(!G)continue;let{width:J,height:T}=A.contentRect;if(J<=0||T<=0)continue;G.width=J,G.height=T;let I=devicePixelRatio||1;W(G.backCanvas,J,T),W(G.frontCanvas,J,T);let{bufferSizes:N,perSeriesPassMeta:Z}=this.computeRendererMeta(G.renderer,G);this.worker?.postMessage({type:B.RESIZE,id:F,width:Math.round(J*I),height:Math.round(T*I),bufferSizes:N,perSeriesPassMeta:Z}),this.drawChart(G)}})}static getInstance(){if(!S.instance)S.instance=new S;return S.instance}get isDark(){return this._isDark}get syncViews(){return this._syncViews}use(q){if("passes"in q){let A=q;if(this.renderers.set(A.name,A),this.worker)this.sendRendererRegistration(A);else this.pendingRenderers.push(A)}else{let A=q;if(!this.uiPlugins.some((F)=>F.name===A.name))this.uiPlugins.push(A)}}async init(){if(this.worker)return!0;return new Promise((q)=>{import("./worker-inline.js").then(({WORKER_CODE:A})=>{let F=new Blob([A],{type:"application/javascript"});this.worker=new Worker(URL.createObjectURL(F),{type:"module"}),this.setupWorkerHandlers(q)}).catch(()=>{this.worker=new Worker(new URL("./gpu-worker.js",import.meta.url),{type:"module"}),this.setupWorkerHandlers(q)})})}setupWorkerHandlers(q){if(!this.worker)return;this.worker.onmessage=(A)=>{let{type:F,...G}=A.data;switch(F){case B.GPU_READY:for(let J of this.pendingRenderers)this.sendRendererRegistration(J);this.pendingRenderers=[],q(!0);break;case B.ERROR:console.error("chartai:",G.code),q(!1);break;case B.STATS:this.currentStats={fps:G.fps,renderMs:G.renderMs,total:G.totalCharts,active:G.activeCharts};for(let J of this.statsCallbacks)J(this.currentStats);break}},this.worker.onerror=(A)=>{console.error("chartai:",A),q(!1)},this.worker.postMessage({type:B.INIT,isDark:this._isDark})}sendRendererRegistration(q){let A=(q.buffers??[]).map((F)=>({name:F.name,usages:F.usages,perSeries:q.passes.some((G)=>G.perSeries!==!1&&G.bindings.some((J)=>J.source===F.name))}));this.worker?.postMessage({type:B.REGISTER_RENDERER,name:q.name,shaders:q.shaders,passes:q.passes.map((F)=>({type:F.type,shader:F.shader,bindings:F.bindings,perSeries:F.perSeries!==!1,topology:F.topology,loadOp:F.loadOp,blend:F.blend})),bufferDefs:A,uniformDefs:q.uniforms??[]})}computeRendererMeta(q,A){let F={},G=[],J=A.series.length>0?A.series:[{rawX:[],rawY:[],extra:{},label:"",color:{r:0,g:0,b:0}}],T=devicePixelRatio||1,I=Math.round(A.width*T),N=Math.round(A.height*T);for(let Z of J){let K={width:I,height:N,samples:Z.rawX.length,seriesCount:J.length,bounds:A.bounds,view:A.view};for(let V of q.buffers??[]){let D=V.bytes(K);F[V.name]=Math.max(F[V.name]??0,D)}G.push(q.passes.map((V)=>({dispatch:V.dispatch?.(K),draw:V.draw?.(K)})))}return{bufferSizes:F,perSeriesPassMeta:G}}create(q){if(!this.worker)throw Error("Call init() before create().");let A=this.renderers.get(q.type);if(!A)throw Error(`No renderer "${q.type}". Call manager.use() with a matching RendererPlugin first.`);let F=`chart-${++this.chartIdCounter}`,G=document.createElement("div");G.dataset.chartId=F,G.style.cssText="width:100%;height:100%;position:relative;";let J=document.createElement("div");J.dataset.chartId=F,J.style.cssText="width:100%;height:100%;position:relative;";let T=(Q,$)=>{let U=document.createElement("canvas");return U.style.cssText=`position:absolute;inset:0;width:100%;height:100%;pointer-events:${$};z-index:${Q};`,U},I=T(0,"none"),N=T(1,"auto"),Z=T(2,"none");J.append(I,N,Z),G.appendChild(J),q.container.appendChild(G);let K;try{K=N.transferControlToOffscreen()}catch(Q){throw Error(`Failed to acquire OffscreenCanvas: ${Q}`)}let V=J.getBoundingClientRect(),D=V.width||400,P=V.height||200;if(W(K,D,P),W(I,D,P),W(Z,D,P),q.bgColor){let[Q,$,U]=q.bgColor;J.style.background=`rgb(${Math.round(Q*255)},${Math.round($*255)},${Math.round(U*255)})`}let L={};for(let Q of A.uniforms??[]){let $=q[Q.name];L[Q.name]=typeof $==="number"?$:Q.default}let j={id:F,config:q,el:G,backCanvas:I,frontCanvas:Z,width:D,height:P,series:[],bounds:{minX:0,maxX:1,minY:0,maxY:1},view:{panX:0,panY:0,zoomX:1,zoomY:1},visible:!0,dragging:!1,plugins:[...this.uiPlugins],renderer:A,customUniforms:L};this.charts.set(F,j);let R=devicePixelRatio||1,{bufferSizes:O,perSeriesPassMeta:E}=this.computeRendererMeta(A,j);this.worker.postMessage({type:B.REGISTER_CHART,id:F,canvas:K,rendererName:q.type,bgColor:q.bgColor??null,bufferSizes:O,perSeriesPassMeta:E,customUniformValues:L,width:Math.round(D*R),height:Math.round(P*R)},[K]),this.visibilityObserver.observe(G),this.resizeObserver.observe(J);for(let Q of j.plugins)Q.install?.(j,J);return A.install?.(j,J),this.updateSeries(F,q.series),new X(F,this)}destroy(q){let A=this.charts.get(q);if(!A)return;A.renderer.uninstall?.(A);for(let G of A.plugins)G.uninstall?.(A);this.visibilityObserver.unobserve(A.el);let F=A.el.querySelector("div");if(F)this.resizeObserver.unobserve(F);A.el.remove(),this.worker?.postMessage({type:B.UNREGISTER_CHART,id:q}),this.charts.delete(q)}updateSeries(q,A){let F=this.charts.get(q);if(!F||!this.worker||A.length===0)return;F.series=A.map((L)=>{let j=L.x.length,R=z(L.color);if(j===0)return{label:L.label,color:R,rawX:[],rawY:[],extra:{}};let O=Array.from({length:j},(Q,$)=>$).sort((Q,$)=>L.x[Q]-L.x[$]),E={};for(let Q in L)if(Q!=="label"&&Q!=="color"&&Q!=="x"&&Q!=="y"&&Array.isArray(L[Q]))E[Q]=O.map(($)=>L[Q][$]);return{label:L.label,color:R,rawX:O.map((Q)=>L.x[Q]),rawY:O.map((Q)=>L.y[Q]),extra:E}});let G=F.renderer.computeBounds?.(F.series),{minX:J,maxX:T,minY:I,maxY:N}=G??(()=>{let L=1/0,j=-1/0,R=1/0,O=-1/0;for(let $ of F.series)for(let U=0;U<$.rawX.length;U++){if($.rawX[U]<L)L=$.rawX[U];if($.rawX[U]>j)j=$.rawX[U];if($.rawY[U]<R)R=$.rawY[U];if($.rawY[U]>O)O=$.rawY[U]}let E=(j-L)*0.05||1,Q=(O-R)*0.1||1;return{minX:L-E,maxX:j+E,minY:R-Q,maxY:O+Q}})(),Z=F.config.defaultBounds;if(Z){if(Z.minX!==void 0)J=Z.minX;if(Z.maxX!==void 0)T=Z.maxX;if(Z.minY!==void 0)I=Z.minY;if(Z.maxY!==void 0)N=Z.maxY}F.bounds={minX:J,maxX:T,minY:I,maxY:N};let{bufferSizes:K,perSeriesPassMeta:V}=this.computeRendererMeta(F.renderer,F),D=F.series.map((L)=>{let j={};for(let R in L.extra)j[R]=new Float32Array(L.extra[R]);return{label:L.label,colorR:L.color.r,colorG:L.color.g,colorB:L.color.b,dataX:new Float32Array(L.rawX),dataY:new Float32Array(L.rawY),extra:j}}),P=D.flatMap((L)=>[L.dataX.buffer,L.dataY.buffer,...Object.values(L.extra).map((j)=>j.buffer)]);this.worker.postMessage({type:B.UPDATE_SERIES,id:q,series:D,bounds:F.bounds,bufferSizes:K,perSeriesPassMeta:V},P),this.sendViewTransform(F),this.drawChart(F)}setSyncViews(q){this._syncViews=q}setTheme(q){this._isDark=q,this.worker?.postMessage({type:B.THEME,isDark:q});for(let A of this.charts.values())this.drawChart(A)}onStats(q){return this.statsCallbacks.push(q),()=>{let A=this.statsCallbacks.indexOf(q);if(A>=0)this.statsCallbacks.splice(A,1)}}getStats(){return{...this.currentStats}}resetView(q){let A=this.charts.get(q);if(!A)return;for(let Z of A.plugins)Z.resetView?.(A);let{panX:F,panY:G,zoomX:J,zoomY:T}=A.view,I=performance.now(),N=()=>{let Z=Math.min(1,(performance.now()-I)/300),K=1-Math.pow(1-Z,3);if(A.view.panX=F*(1-K),A.view.panY=G*(1-K),A.view.zoomX=J+(1-J)*K,A.view.zoomY=T+(1-T)*K,this.sendViewTransform(A),this.drawChart(A),this._syncViews)this.syncAllViews(A);if(Z<1)requestAnimationFrame(N)};requestAnimationFrame(N)}requestRender(q){let A=this.charts.get(q);if(A)this.sendViewTransform(A)}sendViewTransform(q){this.worker?.postMessage({type:B.VIEW_TRANSFORM,id:q.id,panX:q.view.panX,panY:q.view.panY,zoomX:q.view.zoomX,zoomY:q.view.zoomY})}syncAllViews(q){let A=[];for(let F of this.charts.values())if(F.id!==q.id)F.view={...q.view},A.push({id:F.id}),this.drawChart(F);if(A.length>0)this.worker?.postMessage({type:B.BATCH_VIEW_TRANSFORM,panX:q.view.panX,panY:q.view.panY,zoomX:q.view.zoomX,zoomY:q.view.zoomY,transforms:A})}drawChart(q){if(!q.visible)return;let A=devicePixelRatio||1,F=q.backCanvas.getContext("2d");if(F){F.clearRect(0,0,q.backCanvas.width,q.backCanvas.height),F.save(),F.scale(A,A);for(let J of q.plugins)J.beforeDraw?.(F,q);F.restore()}let G=q.frontCanvas.getContext("2d");if(G){G.clearRect(0,0,q.frontCanvas.width,q.frontCanvas.height),G.save(),G.scale(A,A);for(let J of q.plugins)J.afterDraw?.(G,q);G.restore()}}}var y=S.getInstance();
-export{X as k,y as l};

package/dist/chunk-qr6mweck.min.js

@@ -1,2 +0,0 @@
-import{j as T}from"./chunk-e7d3zgw5.js";import{l as p}from"./chunk-94kc81rr.js";var D='-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',F=12,c=(t,m,s)=>{let o=m-t;if(o<=0)return[t];let e=o/s,n=10**Math.floor(Math.log10(e)),a=e/n,r=n*(a<=1.5?1:a<=3?2:a<=7?5:10),l=[];for(let g=Math.ceil(t/r)*r;g<=m;g+=r)l.push(g);return l},M=(t)=>{let{width:m,height:s}=t,o=T,{bounds:e,view:n}=t,a=e.maxX-e.minX,r=e.maxY-e.minY,l=a/n.zoomX,g=r/n.zoomY,u=e.minX+n.panX*a,i=e.minY+n.panY*r,h=t.config.bgColor??(p.isDark?[0.11,0.11,0.12]:[0.98,0.98,0.98]);return{w:m,h:s,m:o,rx:l,ry:g,mx:u,my:i,bg:`${Math.round(h[0]*255)},${Math.round(h[1]*255)},${Math.round(h[2]*255)}`,font:t.config.fontFamily??D,text:t.config.textColor??(p.isDark?"#c0c0c0":"#333333"),grid:t.config.gridColor??(p.isDark?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)")}},A={name:"labels",beforeDraw(t,m){let{w:s,h:o,m:e,rx:n,ry:a,mx:r,my:l,grid:g}=M(m);t.strokeStyle=g,t.lineWidth=1,t.beginPath(),c(l,l+a,7).forEach((u)=>{let i=o*(1-(u-l)/a);if(i>5&&i<o-e.bottom-5)t.moveTo(e.left,i),t.lineTo(s,i)}),c(r,r+n,8).forEach((u)=>{let i=s*((u-r)/n);if(i>e.left&&i<s)t.moveTo(i,0),t.lineTo(i,o-e.bottom)}),t.stroke()},afterDraw(t,m){let{w:s,h:o,m:e,rx:n,ry:a,mx:r,my:l,bg:g,font:u,text:i}=M(m),{formatX:h=String,formatY:E=String,labelSize:k=F}=m.config,d=(b,f,C,y,S)=>{let L=b==="left"?t.createLinearGradient(f,0,f+y,0):t.createLinearGradient(0,C,0,C+S),w=b==="left"?[1,0.7,0.2,0.05,0]:[0,0.05,0.2,0.7,1];[0,0.35,0.55,0.7,1].forEach((X,Y)=>L.addColorStop(X,`rgba(${g},${w[Y]})`)),t.fillStyle=L,t.fillRect(f,C,y,S)};d("left",0,0,e.left+20,o),d("bottom",0,o-e.bottom-20,s,e.bottom+20),t.font=`${k}px ${u}`,t.fillStyle=i,t.textAlign="right",t.textBaseline="middle",c(l,l+a,7).forEach((b)=>{let f=o*(1-(b-l)/a);if(f>5&&f<o-e.bottom-5)t.fillText(E(b),e.left-5,f)}),t.textAlign="right",t.textBaseline="top",c(r,r+n,8).forEach((b)=>{let f=s*((b-r)/n);if(f<e.left-10||f>s+30)return;t.save(),t.translate(f,o-e.bottom+5),t.rotate(-Math.PI/14),t.fillText(h(b),0,0),t.restore()})}};
-export{D as g,F as h,A as i};