@indiminds/charts 1.0.1

package/dist/candlestick/viewport.d.ts

@@ -0,0 +1,28 @@
+/** Which slice of the candles is on screen, and how zooming and panning move
+ *  it. The chart only calls methods here — it never touches the offsets. */
+export declare class ViewportState {
+    visibleCandles: number;
+    /** How far the view sits from the newest candle, in candles. Negative means
+     *  empty space on the right, which is the normal resting position. */
+    rightOffset: number;
+    private dataLength;
+    private chartWidth;
+    /** The chart re-tells us these on every resize and data update. */
+    update(dataLength: number, chartWidth: number): void;
+    get candleWidth(): number;
+    get rightBound(): number;
+    get leftBound(): number;
+    get minRightOffset(): number;
+    get defaultRightOffset(): number;
+    /** Back to the default view — first load, or a new symbol. */
+    reset(dataLength: number): void;
+    /** Zoom around a specific X position on the canvas. */
+    zoom(deltaY: number, mouseX: number): void;
+    /** Shift the view sideways by a pixel amount. */
+    pan(deltaX: number): void;
+    /** A new candle arrived: step along with it so the view doesn't drift, but
+     *  only if the user has already scrolled back from the live edge. */
+    onLiveTick(candlesAdded: number): void;
+    private clampMin;
+    private clampMax;
+}

package/dist/canvas-chart-base.d.ts

@@ -0,0 +1,23 @@
+import { type ChartShell } from "./chart-shell";
+export declare abstract class CanvasChartEngine<THoverEvent> {
+    protected readonly canvas: HTMLCanvasElement;
+    protected readonly shell: ChartShell;
+    protected width: number;
+    protected height: number;
+    protected mouseX: number | null;
+    protected mouseY: number | null;
+    private animationFrame;
+    /** Fires on every hover change, including leaving the canvas (null). */
+    onHoverChange?: (event: THoverEvent | null) => void;
+    constructor(canvas: HTMLCanvasElement, container: HTMLElement);
+    /** Redraws everything. Subclasses read the size and mouse fields above. */
+    protected abstract render(): void;
+    destroy(): void;
+    /** Runs a 0-to-1 animation that slows as it finishes, cancelling any still
+     *  going. A higher `power` makes it snappier. The last frame lands on 1. */
+    protected animate(durationMs: number, power: number, onFrame: (eased: number) => void): void;
+    private cancelAnimation;
+    private resize;
+    private handleMouseMove;
+    private handleMouseLeave;
+}

package/dist/category-axis.d.ts

@@ -0,0 +1,9 @@
+import type { DrawContext } from "./renderers/primitives/context";
+export declare function drawCategoryAxis(c: DrawContext, categories: readonly string[], axisTop: number): void;
+/** How many categories to skip between drawn labels so neighbours don't
+ *  collide. The same step spaces the vertical gridlines, so lines and labels
+ *  always land on the same ticks. */
+export declare function measureLabelStep(ctx: CanvasRenderingContext2D, categories: readonly string[], toX: (i: number) => number): number;
+/** Labels only, every `step`th category — for charts that draw their own
+ *  gridlines (the dual-axis ones) rather than using drawCategoryAxis. */
+export declare function drawCategoryLabels(ctx: CanvasRenderingContext2D, categories: readonly string[], toX: (i: number) => number, axisTop: number, step: number): void;

package/dist/category-layout.d.ts

@@ -0,0 +1,9 @@
+export interface CategoryLayout {
+    slotWidth: number;
+    /** Category index -> canvas X, slot center. Same shape as DrawContext.toX. */
+    toX: (categoryIndex: number) => number;
+}
+export declare function computeCategoryLayout(categoryCount: number, availableWidth: number): CategoryLayout;
+/** Category whose slot center sits closest to `x` — how hover snaps to a
+ *  category on charts whose plot area starts past a left gutter. */
+export declare function nearestCategoryIndex(x: number, categoryCount: number, toX: (categoryIndex: number) => number): number | null;

package/dist/chart-shell.d.ts

@@ -0,0 +1,14 @@
+export interface ChartShellCallbacks {
+    /** The container changed size. Already deferred to the next frame. */
+    onResize: (width: number, height: number) => void;
+    /** The theme changed. COLORS has already been updated by the time this runs. */
+    onThemeChange: () => void;
+}
+export interface ChartShell {
+    ctx: CanvasRenderingContext2D;
+    /** Resizes the canvas for the current screen, so it stays sharp on a
+     *  high-density display. Call once per resize. */
+    resizeBackingStore: (width: number, height: number) => void;
+    destroy: () => void;
+}
+export declare function createChartShell(canvas: HTMLCanvasElement, container: HTMLElement, callbacks: ChartShellCallbacks): ChartShell;

package/dist/combo-chart/combo-chart.d.ts

@@ -0,0 +1,26 @@
+import { CanvasChartEngine } from "../canvas-chart-base";
+import type { ComboChartData, ComboHoverEvent } from "./types";
+/** Grouped bars with lines drawn over them, sharing one category axis. Its own
+ *  class rather than a mode on the bar or line chart — it's a different shape. */
+export declare class ComboChart extends CanvasChartEngine<ComboHoverEvent> {
+    private data;
+    /** 0-1 sweep applied to the bars/lines only — 1 means fully drawn. */
+    private reveal;
+    /** Swaps the data and replays it in: the bars and overlay lines sweep in
+     *  left to right while the axes/labels stay put. Runs on every swap — a
+     *  whole new category set is exactly when the redraw is most abrupt. */
+    setData(data: ComboChartData): void;
+    protected render(): void;
+    /** Tinted spans behind the whole plot, plus a solid ribbon in the top
+     *  gutter so the boundaries stay legible at a tint you can barely see.
+     *  Drawn first so nothing sits on top of the bars. */
+    private drawBands;
+    /** Rotated axis title, centered alongside the tick labels — the same idea as
+     *  any chart's axis name, just turned on its side. */
+    private drawAxisTitles;
+    /** Pill callouts above a category's bars, pre-formatted by the caller. */
+    private drawMarkers;
+    /** Crosshair plus the hovered category's values — the tooltip itself is a
+     *  DOM overlay owned by whoever consumes onHoverChange. */
+    private drawHover;
+}

package/dist/combo-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { ComboChart } from "./combo-chart";
+export type { BarFillMode, ComboBand, ComboBarSeries, ComboChartData, ComboHoverEvent, ComboHoverPoint, ComboLineOverlay, ComboLineStyle, ComboMarker, ComboSubScaleBars, } from "./types";

package/dist/combo-chart/index.js

@@ -0,0 +1 @@
+var Ce=Object.defineProperty;var ye=(e,n,t)=>n in e?Ce(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t;var x=(e,n,t)=>ye(e,typeof n!="symbol"?n+"":n,t);var M={bullish:"#22c55e",bearish:"#ef4444",grid:"#313150",text:"#8b8b93",crosshair:"#a1a1aa",priceLine:"#3b82f6",pill:"#313150",pillText:"#ffffff",divider:"#505064",dividerActive:"#8c8cb9",background:"transparent"},Me=[["--chart-grid","grid"],["--chart-axis","text"],["--chart-crosshair","crosshair"],["--chart-1","priceLine"],["--chart-pill","pill"],["--chart-pill-foreground","pillText"],["--chart-divider","divider"],["--chart-divider-active","dividerActive"]];function X(){if(typeof document>"u")return;let e=getComputedStyle(document.documentElement);for(let[n,t]of Me){let o=e.getPropertyValue(n).trim();o&&(M[t]=o)}}function Z(e,n,t){let o=e.getContext("2d");if(!o)throw new Error("Could not get 2D context");let r=new ResizeObserver(l=>{if(l.length===0)return;let{width:s,height:b}=l[0].contentRect;requestAnimationFrame(()=>t.onResize(Math.floor(s),Math.floor(b)))});r.observe(n),X();let i=new MutationObserver(()=>{X(),t.onThemeChange()});i.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]});function a(l,s){let b=window.devicePixelRatio||1;o.setTransform(1,0,0,1,0,0),e.width=Math.floor(l*b),e.height=Math.floor(s*b),e.style.width=`${l}px`,e.style.height=`${s}px`,o.scale(b,b)}return{ctx:o,resizeBackingStore:a,destroy:()=>{r.disconnect(),i.disconnect()}}}var O=class{constructor(n,t){x(this,"canvas");x(this,"shell");x(this,"width",0);x(this,"height",0);x(this,"mouseX",null);x(this,"mouseY",null);x(this,"animationFrame",null);x(this,"onHoverChange");x(this,"handleMouseMove",n=>{let t=this.canvas.getBoundingClientRect();this.mouseX=n.clientX-t.left,this.mouseY=n.clientY-t.top,this.render()});x(this,"handleMouseLeave",()=>{this.mouseX=null,this.mouseY=null,this.onHoverChange?.(null),this.render()});this.canvas=n,this.shell=Z(n,t,{onResize:(o,r)=>this.resize(o,r),onThemeChange:()=>this.render()}),n.addEventListener("mousemove",this.handleMouseMove),n.addEventListener("mouseleave",this.handleMouseLeave)}destroy(){this.cancelAnimation(),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.shell.destroy()}animate(n,t,o){this.cancelAnimation();let r=performance.now(),i=a=>{let l=Math.min(1,(a-r)/n);o(1-(1-l)**t),this.render(),this.animationFrame=l<1?requestAnimationFrame(i):null};this.animationFrame=requestAnimationFrame(i)}cancelAnimation(){this.animationFrame!=null&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=null)}resize(n,t){n===0||t===0||(this.width=n,this.height=t,this.shell.resizeBackingStore(n,t),this.render())}};var S="11px Inter, sans-serif";function I(e,n){let{ctx:t}=e;t.save(),t.beginPath(),t.rect(0,e.top,e.chartWidth,e.height),t.clip(),t.beginPath(),n(t),t.restore()}function V(e,n){e.strokeStyle=n.color,e.fillStyle=n.color,e.lineWidth=n.lineWidth??1.5,e.globalAlpha=n.opacity??1,e.setLineDash(n.dash??[])}function j(e,n,t){return Math.max(n/2,Math.min(e,t-n/2))}function Q(e,n,t,o){e.save(),e.strokeStyle=M.crosshair,e.lineWidth=1,e.setLineDash([4,4]),e.beginPath(),e.moveTo(n,t),e.lineTo(n,o),e.stroke(),e.restore()}function ee(e,n){let t=e/Math.max(1,n),o=Math.pow(10,Math.floor(Math.log10(Math.max(t,1e-10)))),r=t/o,i;return r<1.5?i=1:r<3.5?i=2:r<7.5?i=5:i=10,i*o}function te(e,n,t,o,r,i={}){let{paddingX:a=6,height:l=16,radius:s=4}=i;e.font=r.font??S,e.textBaseline="middle",e.textAlign="center";let b=e.measureText(o).width+a*2;return e.fillStyle=r.background,Se(e,n-b/2,t,b,l,s),e.fill(),e.fillStyle=r.text,e.fillText(o,n,t+l/2),b}function Se(e,n,t,o,r,i){e.beginPath(),e.moveTo(n+i,t),e.arcTo(n+o,t,n+o,t+r,i),e.arcTo(n+o,t+r,n,t+r,i),e.arcTo(n,t+r,n,t,i),e.arcTo(n,t,n+o,t,i),e.closePath()}function ne(e,n,t,o){if(e.mode==="price")return null;let r=1/0,i=-1/0;for(let m of n){let h=Math.min(o,m.length);for(let f=Math.max(0,t);f<h;f++){let c=m[f];c==null||!Number.isFinite(c)||(c<r&&(r=c),c>i&&(i=c))}}let a=Number.isFinite(r)&&Number.isFinite(i);if(e.mode==="auto"){if(!a)return null;let m=Math.max(i-r,1e-10),h=Math.max(m*e.cushionRatio,e.minCushion??0);return{min:r-h,max:i+h}}if(!a){let[m,h]=e.alwaysInclude??[e.min,e.max];return{min:m,max:h}}let l=i-r,s=Math.max(l*e.cushionRatio,e.minCushion??0),b=r-s,u=i+s;return e.alwaysInclude&&(b=Math.min(b,e.alwaysInclude[0]),u=Math.max(u,e.alwaysInclude[1])),{min:Math.max(b,e.min),max:Math.min(u,e.max)}}function F(e,n,t,o=8,r=8){let i=Math.max(1,t-o-r),a=Math.max(e.max-e.min,1e-10);return l=>n+o+(e.max-l)/a*i}function oe(e,n,t,o){let r=Math.max(1,o);return{left:e,right:n,top:t,width:Math.max(1,n-e),height:r,bottom:t+r}}function k(e){return Math.round(e)+.5}function B(e,n,t){return ne({mode:"auto",cushionRatio:t},e,0,n)??{min:0,max:1}}function re(e,n){let t=ee(e.max-e.min,Math.max(2,Math.round(n/45))),o=[];for(let r=Math.ceil(e.min/t)*t;r<=e.max;r+=t)o.push(r);return o}function Te(e,n,t,o){let r=e.candleWidth*t,i=r/n,a=Math.max(1,i*(1-o));return{groupWidth:r,slotWidth:i,barWidth:a}}function Pe(e,n,t){return e-n.groupWidth/2+t*n.slotWidth+(n.slotWidth-n.barWidth)/2}var ie=new Map;function we(e,n){let t=ie.get(n);if(t)return t;let o=document.createElement("canvas");o.width=6,o.height=6;let r=o.getContext("2d");if(!r)return n;r.strokeStyle=n,r.lineWidth=1.5,r.beginPath(),r.moveTo(0,6),r.lineTo(6,0),r.moveTo(-1.5,1.5),r.lineTo(1.5,-1.5),r.moveTo(4.5,7.5),r.lineTo(7.5,4.5),r.stroke();let i=e.createPattern(o,"repeat");return i?(ie.set(n,i),i):n}var De=.45;function Re(e,n){if(!/^#[0-9a-fA-F]{6}$/.test(e))return e;let t=parseInt(e.slice(1,3),16),o=parseInt(e.slice(3,5),16),r=parseInt(e.slice(5,7),16),i=a=>Math.round(a+(255-a)*n);return`rgb(${i(t)}, ${i(o)}, ${i(r)})`}function G(e,n,t={}){if(n.length===0)return;let{baseline:o=0,groupWidthRatio:r=.7,barGapRatio:i=.15,focusIndex:a=null,growProgress:l=1,slotCount:s,slotOffset:b=0}=t;I(e,u=>{u.globalAlpha=1,u.setLineDash([]);let m=e.toY(o),h=Te(e,s??n.length,r,i),f=Math.min(e.endIndex,...n.map(c=>c.values.length));for(let c=Math.max(0,e.startIndex);c<f;c++){let v=e.toX(c),g=a!=null&&c===a;n.forEach((C,d)=>{let T=C.values[c];if(T==null||!Number.isFinite(T))return;let y=C.fillModes?.[c]??"solid",E=e.toY(T),P=Pe(v,h,b+d),w=Math.max(1,Math.abs(E-m)*l),D=E<=m?m-w:m,W=C.colors?.[c]??C.color,R=g?Re(W,De):W;if(y==="outline"){u.strokeStyle=R,u.lineWidth=g?2:1.5,u.strokeRect(P+.75,D+.75,Math.max(0,h.barWidth-1.5),Math.max(0,w-1.5));return}u.fillStyle=y==="hatched"?we(u,R):R,u.fillRect(P,D,h.barWidth,w),y==="hatched"&&(u.strokeStyle=R,u.lineWidth=1,u.strokeRect(P+.5,D+.5,Math.max(0,h.barWidth-1),Math.max(0,w-1))),g&&(u.strokeStyle=R,u.lineWidth=1.5,u.strokeRect(P+.75,D+.75,Math.max(0,h.barWidth-1.5),Math.max(0,w-1.5)))})}})}function ae(e,n,t,o={}){let{colorMode:r="fixed",momentumColors:i,colorValues:a}=o;I(e,l=>{V(l,t),l.lineJoin="round",l.lineCap="round";let s=r==="directional"&&!!i,b=Math.min(e.endIndex,n.length),u=null,m=null,h=null;for(let f=Math.max(0,e.startIndex);f<b;f++){let c=n[f];if(c==null||!Number.isFinite(c)){u=null,m=null,h=null;continue}let v=e.toX(f),g=e.toY(c),C=a?.[f],d=C!=null&&C<0,T=s&&h!==null&&d!==h;if(u==null||m==null||T){s||l.moveTo(v,g),u=v,m=g,h=d;continue}s?(l.strokeStyle=d?i.bearStrong:i.bullStrong,l.beginPath(),l.moveTo(u,m),l.lineTo(v,g),l.stroke()):l.lineTo(v,g),u=v,m=g,h=d}s||l.stroke()})}function $(e,n,t){let o=t.side==="left";e.save(),e.font=S,e.lineWidth=1,e.textBaseline="middle",e.textAlign=o?"right":"left";let r=o?n.left-8:n.right+8;for(let i of re(t.extent,n.height)){let a=t.toY(i);a<n.top||a>n.bottom||(t.gridlines&&(e.strokeStyle=M.grid,e.beginPath(),e.moveTo(n.left,k(a)),e.lineTo(n.right,k(a)),e.stroke()),e.fillStyle=M.text,e.fillText(t.format(i),r,a))}e.restore()}function le(e,n){e.save(),e.strokeStyle=M.grid,e.lineWidth=1,e.beginPath(),e.moveTo(n.left,k(n.bottom)),e.lineTo(n.right,k(n.bottom)),e.stroke(),e.restore()}function se(e,n,t){e.save(),e.font=S;let o=24;for(let i of n)o=Math.max(o,e.measureText(i).width);e.restore();let r=n.length>=2?t(1)-t(0):o+12;return Math.max(1,Math.ceil((o+16)/Math.max(1,r)))}function ue(e,n,t,o,r){e.save(),e.font=S,e.textBaseline="top",e.textAlign="center",e.fillStyle=M.text;for(let i=0;i<n.length;i+=r)e.fillText(n[i],t(i),o+8);e.restore()}function me(e,n){let t=e>0?n/e:n;return{slotWidth:t,toX:o=>o*t+t/2}}function he(e,n,t){if(n===0)return null;let o=0,r=1/0;for(let i=0;i<n;i++){let a=Math.abs(t(i)-e);a<r&&(r=a,o=i)}return o}var Ae=56,de=46,Ee=30,be=22,We=3,ce=9,Ie=.32,A=0,Y=16,Fe=700,z=class extends O{constructor(){super(...arguments);x(this,"data",{categories:[],bars:[]});x(this,"reveal",1)}setData(t){this.data=t,this.reveal=0,this.animate(Fe,2,o=>{this.reveal=o})}render(){let{ctx:t}=this.shell;if(this.width===0||this.height===0)return;t.clearRect(0,0,this.width,this.height);let{categories:o,bars:r,lineOverlays:i=[],markers:a=[],bands:l=[],subBars:s,leftFormatter:b=p=>p.toLocaleString(),leftAxisLabel:u,rightAxisLabel:m}=this.data;if(o.length===0)return;let h=o.length,f=i.filter(p=>p.axis==="right"),c=i.filter(p=>p.axis==="auto"),v=f.length>0,g=s?ke(s.values,h):0,C=g>0,d=oe(Ae+(u?Y:0),this.width-(v?de+(m?Y:0):8),be,this.height-be-Ee),T=me(h,d.width),y=p=>d.left+T.toX(p),E=B(r.map(p=>p.values),h,.1),P={min:Math.min(E.min,A),max:Math.max(E.max,A)},w=F(P,d.top,d.height,0,0),D=v?B(f.map(p=>p.values),h,.1):{min:0,max:1},W=F(D,d.top,d.height,0,0),R=d.height*Ie,U={min:0,max:g>0?g:1},H=C?F(U,d.bottom-R,R,0,0):null,K=new Map;for(let p of c){let L=B([p.values],h,.15);K.set(p.id,F(L,d.top,d.height,0,0))}this.drawBands(t,d,y,T.slotWidth,l,h),$(t,d,{extent:P,toY:w,format:b,side:"left",gridlines:!0}),v&&$(t,d,{extent:D,toY:W,format:f[0]?.formatter??(p=>p.toFixed(2)),side:"right",gridlines:!1}),le(t,d),this.drawAxisTitles(t,d,u,v?m:void 0);let ge=se(t,o,y);ue(t,o,y,d.bottom,ge);let N={ctx:t,chartWidth:d.right,priceScaleWidth:de,top:d.top,height:d.height,extent:P,candleWidth:T.slotWidth,startIndex:0,endIndex:h,toX:y,toY:w},_=this.mouseX==null?null:he(this.mouseX,h,y),J=r.length+(H?1:0);G(N,r,{baseline:A,focusIndex:_,growProgress:this.reveal,slotCount:J}),s&&H&&G({...N,extent:U,toY:H},[{color:s.color,values:s.values}],{baseline:A,focusIndex:_,growProgress:this.reveal,slotCount:J,slotOffset:r.length});let ve=Math.max(1,Math.ceil(h*this.reveal));for(let p of[...f,...c]){let L=p.axis==="right",xe={...N,extent:L?D:P,toY:L?W:K.get(p.id),endIndex:ve},q=p.style==="dashed";ae(xe,p.values,{color:p.color,lineWidth:q?1.5:2.5,dash:q?[5,3]:void 0})}this.drawMarkers(t,d,y,w,a,r,h),this.drawHover(t,d,y,_,o,r,i)}drawBands(t,o,r,i,a,l){if(a.length!==0){t.save(),t.font=S,t.textAlign="center";for(let s of a){let b=Math.max(0,Math.min(s.from,s.to)),u=Math.min(l-1,Math.max(s.from,s.to));if(u<b)continue;let m=Math.max(o.left,r(b)-i/2),f=Math.min(o.right,r(u)+i/2)-m;f<=0||(t.globalAlpha=s.alpha??.07,t.fillStyle=s.color,t.fillRect(m,o.top,f,o.height),t.globalAlpha=.85,t.fillRect(m,o.top-ce,f,We),s.label&&(t.globalAlpha=1,t.measureText(s.label).width+8<=f&&(t.textBaseline="bottom",t.fillText(s.label,m+f/2,o.top-ce-2))))}t.restore()}}drawAxisTitles(t,o,r,i){if(!r&&!i)return;let a=o.top+o.height/2;t.save(),t.font=S,t.fillStyle=M.text,t.textAlign="center",t.textBaseline="middle",r&&fe(t,r,Y/2,a),i&&fe(t,i,this.width-Y/2,a),t.restore()}drawMarkers(t,o,r,i,a,l,s){if(a.length===0)return;let b=16,u=i(A);t.save(),t.font=S;for(let m of a){if(m.index<0||m.index>=s)continue;let h=o.bottom;for(let g of l){let C=g.values[m.index];if(C==null||!Number.isFinite(C))continue;let d=i(Math.max(C,A));h=Math.min(h,u-(u-d)*this.reveal)}let f=Math.max(2,h-b-4),c=t.measureText(m.label).width+12,v=j(r(m.index),c,o.right);te(t,v,f,m.label,{background:m.background,text:m.color})}t.restore()}drawHover(t,o,r,i,a,l,s){if(i==null)return;let b=a[i];if(b==null)return;let u=r(i);Q(t,u,o.top,o.bottom),this.onHoverChange?.({index:i,category:b,x:u,bars:pe(l,i),lines:pe(s??[],i)})}};function fe(e,n,t,o){e.save(),e.translate(t,o),e.rotate(-Math.PI/2),e.fillText(n,0,0),e.restore()}function ke(e,n){let t=0;for(let o=0;o<n;o++){let r=e[o];r!=null&&Number.isFinite(r)&&r>t&&(t=r)}return t}function pe(e,n){let t=[];for(let o of e){let r=o.values[n];r!=null&&t.push({id:o.id,value:r,color:o.color})}return t}export{z as ComboChart};

package/dist/combo-chart/types.d.ts

@@ -0,0 +1,75 @@
+import type { BarFillMode } from "../renderers/primitives/grouped-bars";
+export type { BarFillMode };
+export interface ComboBarSeries {
+    id: string;
+    color: string;
+    /** One entry per category, aligned to ComboChartData.categories. */
+    values: readonly (number | null)[];
+    /** Per-bar colour override. Missing entries fall back to `color`. */
+    colors?: readonly (string | null | undefined)[];
+    /** Per-category fill, aligned to `values`. Missing = "solid". */
+    fillModes?: readonly BarFillMode[];
+}
+export type ComboLineStyle = "solid" | "dashed";
+export interface ComboLineOverlay {
+    id: string;
+    color: string;
+    values: readonly (number | null)[];
+    style?: ComboLineStyle;
+    /** "right" gives the line its own labelled axis. "auto" just stretches it to
+     *  fill the pane, so you see its shape but read its value only on hover. */
+    axis: "right" | "auto";
+    /** How to write the right-axis numbers. Unused by "auto" lines. */
+    formatter?: (value: number) => string;
+}
+/** A small label above one category's bars. The caller writes the text; the
+ *  chart only places it. */
+export interface ComboMarker {
+    index: number;
+    label: string;
+    background: string;
+    color: string;
+}
+/** A tint across a run of categories, drawn behind everything, for marking a
+ *  stretch as one period. `label` goes in the gutter above it when it fits. */
+export interface ComboBand {
+    /** Inclusive category indices. */
+    from: number;
+    to: number;
+    color: string;
+    /** How strong the tint is. Kept faint by default so the bars stay readable. */
+    alpha?: number;
+    label?: string;
+}
+/** Extra bars beside the main ones, on their own scale and squashed into a
+ *  strip at the bottom. For numbers far too small to show on the main axis;
+ *  unlabelled, so their values only appear on hover. */
+export interface ComboSubScaleBars {
+    id: string;
+    color: string;
+    values: readonly (number | null)[];
+}
+export interface ComboChartData {
+    categories: readonly string[];
+    bars: readonly ComboBarSeries[];
+    lineOverlays?: readonly ComboLineOverlay[];
+    markers?: readonly ComboMarker[];
+    bands?: readonly ComboBand[];
+    subBars?: ComboSubScaleBars;
+    leftFormatter?: (value: number) => string;
+    /** Axis names, drawn sideways next to the numbers. Omit for none. */
+    leftAxisLabel?: string;
+    rightAxisLabel?: string;
+}
+export interface ComboHoverPoint {
+    id: string;
+    value: number;
+    color: string;
+}
+export interface ComboHoverEvent {
+    index: number;
+    category: string;
+    x: number;
+    bars: readonly ComboHoverPoint[];
+    lines: readonly ComboHoverPoint[];
+}

package/dist/config.d.ts

@@ -0,0 +1,94 @@
+export declare const CHART_CONFIG: {
+    readonly layout: {
+        readonly priceScaleWidth: 60;
+        readonly timeScaleHeight: 30;
+    };
+    readonly zoom: {
+        readonly default: 100;
+        readonly min: 10;
+        readonly max: 800;
+        readonly inFactor: 0.95;
+        readonly outFactor: 1.05;
+    };
+    readonly pan: {
+        /** How far the chart moves per pixel of scroll. Lower feels heavier. */
+        readonly wheelSensitivity: 1;
+        /** Some browsers measure a mouse wheel in lines, not pixels — this is
+         *  how big we treat a line, so a wheel and a trackpad feel similar. */
+        readonly linesToPx: 16;
+    };
+    readonly viewport: {
+        /** Share of the view left empty to the right of the newest candle. */
+        readonly rightPaddingRatio: 0.2;
+        /** How far past the oldest candle you can scroll, as a share of the
+         *  visible range — stops you panning into a blank screen. */
+        readonly maxLeftEmptyRatio: 0.8;
+    };
+    readonly infiniteScroll: {
+        /** Fetch older candles once this few remain to the left of the view.
+         *  Raise it if the data source is slow. */
+        readonly triggerThreshold: 50;
+    };
+    readonly priceScale: {
+        /** Share of the visible price range added above and below, so candles
+         *  never touch the top or bottom edge. */
+        readonly paddingRatio: 0.1;
+    };
+    /** Floors that keep the price pane usable no matter what panes are added.
+     *  An indicator's own preferred height lives in its render spec, not here. */
+    readonly pane: {
+        /** Fallback height when a pane's spec doesn't state one. */
+        readonly defaultHeight: 120;
+        /** Hard floor for any sub-pane, whatever its spec says. */
+        readonly minHeight: 60;
+        /** The price pane never shrinks below this, however many panes exist. */
+        readonly minChartHeight: 120;
+        /** Px either side of a divider that still counts as grabbing it. */
+        readonly handleHitZone: 6;
+    };
+};
+export declare const LAYOUT: {
+    readonly priceScaleWidth: 60;
+    readonly timeScaleHeight: 30;
+};
+export declare const ZOOM: {
+    readonly default: 100;
+    readonly min: 10;
+    readonly max: 800;
+    readonly inFactor: 0.95;
+    readonly outFactor: 1.05;
+};
+export declare const VIEWPORT: {
+    /** Share of the view left empty to the right of the newest candle. */
+    readonly rightPaddingRatio: 0.2;
+    /** How far past the oldest candle you can scroll, as a share of the
+     *  visible range — stops you panning into a blank screen. */
+    readonly maxLeftEmptyRatio: 0.8;
+};
+export declare const PAN: {
+    /** How far the chart moves per pixel of scroll. Lower feels heavier. */
+    readonly wheelSensitivity: 1;
+    /** Some browsers measure a mouse wheel in lines, not pixels — this is
+     *  how big we treat a line, so a wheel and a trackpad feel similar. */
+    readonly linesToPx: 16;
+};
+export declare const INFINITE_SCROLL: {
+    /** Fetch older candles once this few remain to the left of the view.
+     *  Raise it if the data source is slow. */
+    readonly triggerThreshold: 50;
+};
+export declare const PRICE_SCALE: {
+    /** Share of the visible price range added above and below, so candles
+     *  never touch the top or bottom edge. */
+    readonly paddingRatio: 0.1;
+};
+export declare const PANE: {
+    /** Fallback height when a pane's spec doesn't state one. */
+    readonly defaultHeight: 120;
+    /** Hard floor for any sub-pane, whatever its spec says. */
+    readonly minHeight: 60;
+    /** The price pane never shrinks below this, however many panes exist. */
+    readonly minChartHeight: 120;
+    /** Px either side of a divider that still counts as grabbing it. */
+    readonly handleHitZone: 6;
+};

package/dist/line-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChart } from "./line-chart";
+export type { LineChartData, LineHoverEvent, LineHoverPoint, LineSeriesSpec } from "./types";

package/dist/line-chart/index.js

@@ -0,0 +1 @@
+var Z=Object.defineProperty;var j=(e,n,t)=>n in e?Z(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t;var f=(e,n,t)=>j(e,typeof n!="symbol"?n+"":n,t);var x={bullish:"#22c55e",bearish:"#ef4444",grid:"#313150",text:"#8b8b93",crosshair:"#a1a1aa",priceLine:"#3b82f6",pill:"#313150",pillText:"#ffffff",divider:"#505064",dividerActive:"#8c8cb9",background:"transparent"},Q=[["--chart-grid","grid"],["--chart-axis","text"],["--chart-crosshair","crosshair"],["--chart-1","priceLine"],["--chart-pill","pill"],["--chart-pill-foreground","pillText"],["--chart-divider","divider"],["--chart-divider-active","dividerActive"]];function w(){if(typeof document>"u")return;let e=getComputedStyle(document.documentElement);for(let[n,t]of Q){let r=e.getPropertyValue(n).trim();r&&(x[t]=r)}}function k(e,n,t){let r=e.getContext("2d");if(!r)throw new Error("Could not get 2D context");let o=new ResizeObserver(a=>{if(a.length===0)return;let{width:b,height:m}=a[0].contentRect;requestAnimationFrame(()=>t.onResize(Math.floor(b),Math.floor(m)))});o.observe(n),w();let i=new MutationObserver(()=>{w(),t.onThemeChange()});i.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]});function s(a,b){let m=window.devicePixelRatio||1;r.setTransform(1,0,0,1,0,0),e.width=Math.floor(a*m),e.height=Math.floor(b*m),e.style.width=`${a}px`,e.style.height=`${b}px`,r.scale(m,m)}return{ctx:r,resizeBackingStore:s,destroy:()=>{o.disconnect(),i.disconnect()}}}var T=class{constructor(n,t){f(this,"canvas");f(this,"shell");f(this,"width",0);f(this,"height",0);f(this,"mouseX",null);f(this,"mouseY",null);f(this,"animationFrame",null);f(this,"onHoverChange");f(this,"handleMouseMove",n=>{let t=this.canvas.getBoundingClientRect();this.mouseX=n.clientX-t.left,this.mouseY=n.clientY-t.top,this.render()});f(this,"handleMouseLeave",()=>{this.mouseX=null,this.mouseY=null,this.onHoverChange?.(null),this.render()});this.canvas=n,this.shell=k(n,t,{onResize:(r,o)=>this.resize(r,o),onThemeChange:()=>this.render()}),n.addEventListener("mousemove",this.handleMouseMove),n.addEventListener("mouseleave",this.handleMouseLeave)}destroy(){this.cancelAnimation(),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.shell.destroy()}animate(n,t,r){this.cancelAnimation();let o=performance.now(),i=s=>{let a=Math.min(1,(s-o)/n);r(1-(1-a)**t),this.render(),this.animationFrame=a<1?requestAnimationFrame(i):null};this.animationFrame=requestAnimationFrame(i)}cancelAnimation(){this.animationFrame!=null&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=null)}resize(n,t){n===0||t===0||(this.width=n,this.height=t,this.shell.resizeBackingStore(n,t),this.render())}};var S="11px Inter, sans-serif";function I(e,n,t){e.save(),e.font=S;let r=24;for(let i of n)r=Math.max(r,e.measureText(i).width);e.restore();let o=n.length>=2?t(1)-t(0):r+12;return Math.max(1,Math.ceil((r+16)/Math.max(1,o)))}function O(e,n,t,r,o){e.save(),e.font=S,e.textBaseline="top",e.textAlign="center",e.fillStyle=x.text;for(let i=0;i<n.length;i+=o)e.fillText(n[i],t(i),r+8);e.restore()}function _(e,n){let t=e>0?n/e:n;return{slotWidth:t,toX:r=>r*t+t/2}}function H(e,n,t){if(n===0)return null;let r=0,o=1/0;for(let i=0;i<n;i++){let s=Math.abs(t(i)-e);s<o&&(o=s,r=i)}return r}function L(e,n){let{ctx:t}=e;t.save(),t.beginPath(),t.rect(0,e.top,e.chartWidth,e.height),t.clip(),t.beginPath(),n(t),t.restore()}function E(e,n){e.strokeStyle=n.color,e.fillStyle=n.color,e.lineWidth=n.lineWidth??1.5,e.globalAlpha=n.opacity??1,e.setLineDash(n.dash??[])}function Y(e,n,t,r){e.save(),e.strokeStyle=x.crosshair,e.lineWidth=1,e.setLineDash([4,4]),e.beginPath(),e.moveTo(n,t),e.lineTo(n,r),e.stroke(),e.restore()}function N(e,n){let t=e/Math.max(1,n),r=Math.pow(10,Math.floor(Math.log10(Math.max(t,1e-10)))),o=t/r,i;return o<1.5?i=1:o<3.5?i=2:o<7.5?i=5:i=10,i*r}function X(e,n,t,r){if(e.mode==="price")return null;let o=1/0,i=-1/0;for(let l of n){let d=Math.min(r,l.length);for(let h=Math.max(0,t);h<d;h++){let u=l[h];u==null||!Number.isFinite(u)||(u<o&&(o=u),u>i&&(i=u))}}let s=Number.isFinite(o)&&Number.isFinite(i);if(e.mode==="auto"){if(!s)return null;let l=Math.max(i-o,1e-10),d=Math.max(l*e.cushionRatio,e.minCushion??0);return{min:o-d,max:i+d}}if(!s){let[l,d]=e.alwaysInclude??[e.min,e.max];return{min:l,max:d}}let a=i-o,b=Math.max(a*e.cushionRatio,e.minCushion??0),m=o-b,p=i+b;return e.alwaysInclude&&(m=Math.min(m,e.alwaysInclude[0]),p=Math.max(p,e.alwaysInclude[1])),{min:Math.max(m,e.min),max:Math.min(p,e.max)}}function D(e,n,t,r=8,o=8){let i=Math.max(1,t-r-o),s=Math.max(e.max-e.min,1e-10);return a=>n+r+(e.max-a)/s*i}function B(e,n,t,r){let o=Math.max(1,r);return{left:e,right:n,top:t,width:Math.max(1,n-e),height:o,bottom:t+o}}function M(e){return Math.round(e)+.5}function A(e,n,t){return X({mode:"auto",cushionRatio:t},e,0,n)??{min:0,max:1}}function V(e,n){let t=N(e.max-e.min,Math.max(2,Math.round(n/45))),r=[];for(let o=Math.ceil(e.min/t)*t;o<=e.max;o+=t)r.push(o);return r}function $(e,n,t,r={}){let{colorMode:o="fixed",momentumColors:i,colorValues:s}=r;L(e,a=>{E(a,t),a.lineJoin="round",a.lineCap="round";let b=o==="directional"&&!!i,m=Math.min(e.endIndex,n.length),p=null,l=null,d=null;for(let h=Math.max(0,e.startIndex);h<m;h++){let u=n[h];if(u==null||!Number.isFinite(u)){p=null,l=null,d=null;continue}let g=e.toX(h),v=e.toY(u),C=s?.[h],y=C!=null&&C<0,P=b&&d!==null&&y!==d;if(p==null||l==null||P){b||a.moveTo(g,v),p=g,l=v,d=y;continue}b?(a.strokeStyle=y?i.bearStrong:i.bullStrong,a.beginPath(),a.moveTo(p,l),a.lineTo(g,v),a.stroke()):a.lineTo(g,v),p=g,l=v,d=y}b||a.stroke()})}function R(e,n,t){let r=t.side==="left";e.save(),e.font=S,e.lineWidth=1,e.textBaseline="middle",e.textAlign=r?"right":"left";let o=r?n.left-8:n.right+8;for(let i of V(t.extent,n.height)){let s=t.toY(i);s<n.top||s>n.bottom||(t.gridlines&&(e.strokeStyle=x.grid,e.beginPath(),e.moveTo(n.left,M(s)),e.lineTo(n.right,M(s)),e.stroke()),e.fillStyle=x.text,e.fillText(t.format(i),o,s))}e.restore()}function K(e,n){e.save(),e.strokeStyle=x.grid,e.lineWidth=1,e.beginPath(),e.moveTo(n.left,M(n.bottom)),e.lineTo(n.right,M(n.bottom)),e.stroke(),e.restore()}function z(e,n,t,r,o){e.save(),e.strokeStyle=x.grid,e.lineWidth=1;for(let i=0;i<t;i+=o){let s=M(r(i));e.beginPath(),e.moveTo(s,n.top),e.lineTo(s,n.bottom),e.stroke()}e.restore()}var ee=56,G=60,te=30,J=8,ne=650,F=class e extends T{constructor(){super(...arguments);f(this,"data",{categories:[],series:[]});f(this,"revealProgress",1);f(this,"shapeKey",null)}setData(t){let r=e.computeShapeKey(t),o=r===this.shapeKey;if(this.data=t,this.shapeKey=r,o||t.categories.length===0){this.revealProgress=1,this.render();return}this.revealProgress=0,this.animate(ne,2,i=>{this.revealProgress=i})}static computeShapeKey(t){return`${t.categories.length}|${t.series.map(r=>`${r.id}:${r.axis}`).join(",")}`}render(){let{ctx:t}=this.shell;if(this.width===0||this.height===0)return;t.clearRect(0,0,this.width,this.height);let{categories:r,series:o,leftFormatter:i=c=>c.toFixed(2),rightFormatter:s=c=>c.toLocaleString()}=this.data;if(r.length===0)return;let a=r.length,b=o.filter(c=>c.axis==="left"),m=o.filter(c=>c.axis==="right"),p=m.length>0,l=B(ee,this.width-(p?G:8),J,this.height-J-te),d=_(a,l.width),h=c=>l.left+d.toX(c),u=A(b.map(c=>c.values),a,.08),g=A(m.map(c=>c.values),a,.08),v={min:Math.min(g.min,0),max:g.max},C=D(u,l.top,l.height,0,0),y=D(v,l.top,l.height,0,0);p&&R(t,l,{extent:v,toY:y,format:s,side:"right",gridlines:!0}),R(t,l,{extent:u,toY:C,format:i,side:"left",gridlines:!p});let P=I(t,r,h);z(t,l,a,h,P),K(t,l),O(t,r,h,l.bottom,P);let U=Math.max(1,Math.ceil(a*this.revealProgress)),q={ctx:t,chartWidth:l.right,priceScaleWidth:G,top:l.top,height:l.height,extent:u,candleWidth:d.slotWidth,startIndex:0,endIndex:U,toX:h,toY:C};for(let c of o){let W=c.axis==="left";$({...q,extent:W?u:v,toY:W?C:y},c.values,{color:c.color,lineWidth:c.emphasis?1.75:1.5})}this.drawHover(t,l,h,C,y,r,o)}drawHover(t,r,o,i,s,a,b){if(this.mouseX==null)return;let m=H(this.mouseX,a.length,o);if(m==null)return;let p=a[m];if(p==null)return;let l=o(m);Y(t,l,r.top,r.bottom);let d=[];for(let h of b){let u=h.values[m];if(u==null)continue;let g=h.axis==="left"?i(u):s(u);d.push({id:h.id,value:u,x:l,y:g})}this.onHoverChange?.({index:m,category:p,x:l,points:d})}};export{F as LineChart};

package/dist/line-chart/line-chart.d.ts

@@ -0,0 +1,21 @@
+import { CanvasChartEngine } from "../canvas-chart-base";
+import type { LineChartData, LineHoverEvent } from "./types";
+/** A few line series over a fixed list of labels, with an independent scale on
+ *  each side. Draws its own two-sided axes; the rest of the package has one. */
+export declare class LineChart extends CanvasChartEngine<LineHoverEvent> {
+    private data;
+    /** 0-1, how much of the X range the lines are drawn out to — animated from
+     *  0 on a fresh draw so it reads as data arriving, not a jump cut. */
+    private revealProgress;
+    /** The previous data's shape (category count + series ids/axes): a same-shape
+     *  update is just new values for the same lines, so it updates in place
+     *  instead of replaying the reveal. */
+    private shapeKey;
+    setData(data: LineChartData): void;
+    private static computeShapeKey;
+    protected render(): void;
+    /** Crosshair plus one screen-space point per series at the hovered index —
+     *  the tooltip itself is a DOM overlay owned by whoever consumes
+     *  onHoverChange, same split as the categorical bar chart's hover. */
+    private drawHover;
+}

package/dist/line-chart/types.d.ts

@@ -0,0 +1,30 @@
+export interface LineSeriesSpec {
+    id: string;
+    color: string;
+    /** One entry per category, aligned to LineChartData.categories. */
+    values: readonly (number | null)[];
+    axis: "left" | "right";
+    /** Drawn a touch thicker, to make one line stand out from the rest. */
+    emphasis?: boolean;
+}
+export interface LineChartData {
+    /** X-axis labels, in display order — usually formatted time buckets. */
+    categories: readonly string[];
+    series: readonly LineSeriesSpec[];
+    leftFormatter?: (value: number) => string;
+    rightFormatter?: (value: number) => string;
+}
+/** One series' value at the hovered spot, plus where it sits on screen — so
+ *  each line can have its own little tooltip. */
+export interface LineHoverPoint {
+    id: string;
+    value: number;
+    x: number;
+    y: number;
+}
+export interface LineHoverEvent {
+    index: number;
+    category: string;
+    x: number;
+    points: readonly LineHoverPoint[];
+}

package/dist/pie-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { PieChart } from "./pie-chart";
+export type { PieChartData, PieHoverEvent, PieSlice } from "./types";

package/dist/pie-chart/index.js

@@ -0,0 +1 @@
+var E=Object.defineProperty;var T=(s,n,e)=>n in s?E(s,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[n]=e;var u=(s,n,e)=>T(s,typeof n!="symbol"?n+"":n,e);var b={bullish:"#22c55e",bearish:"#ef4444",grid:"#313150",text:"#8b8b93",crosshair:"#a1a1aa",priceLine:"#3b82f6",pill:"#313150",pillText:"#ffffff",divider:"#505064",dividerActive:"#8c8cb9",background:"transparent"},L=[["--chart-grid","grid"],["--chart-axis","text"],["--chart-crosshair","crosshair"],["--chart-1","priceLine"],["--chart-pill","pill"],["--chart-pill-foreground","pillText"],["--chart-divider","divider"],["--chart-divider-active","dividerActive"]];function f(){if(typeof document>"u")return;let s=getComputedStyle(document.documentElement);for(let[n,e]of L){let t=s.getPropertyValue(n).trim();t&&(b[e]=t)}}function g(s,n,e){let t=s.getContext("2d");if(!t)throw new Error("Could not get 2D context");let r=new ResizeObserver(i=>{if(i.length===0)return;let{width:a,height:l}=i[0].contentRect;requestAnimationFrame(()=>e.onResize(Math.floor(a),Math.floor(l)))});r.observe(n),f();let o=new MutationObserver(()=>{f(),e.onThemeChange()});o.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]});function h(i,a){let l=window.devicePixelRatio||1;t.setTransform(1,0,0,1,0,0),s.width=Math.floor(i*l),s.height=Math.floor(a*l),s.style.width=`${i}px`,s.style.height=`${a}px`,t.scale(l,l)}return{ctx:t,resizeBackingStore:h,destroy:()=>{r.disconnect(),o.disconnect()}}}var p=class{constructor(n,e){u(this,"canvas");u(this,"shell");u(this,"width",0);u(this,"height",0);u(this,"mouseX",null);u(this,"mouseY",null);u(this,"animationFrame",null);u(this,"onHoverChange");u(this,"handleMouseMove",n=>{let e=this.canvas.getBoundingClientRect();this.mouseX=n.clientX-e.left,this.mouseY=n.clientY-e.top,this.render()});u(this,"handleMouseLeave",()=>{this.mouseX=null,this.mouseY=null,this.onHoverChange?.(null),this.render()});this.canvas=n,this.shell=g(n,e,{onResize:(t,r)=>this.resize(t,r),onThemeChange:()=>this.render()}),n.addEventListener("mousemove",this.handleMouseMove),n.addEventListener("mouseleave",this.handleMouseLeave)}destroy(){this.cancelAnimation(),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.shell.destroy()}animate(n,e,t){this.cancelAnimation();let r=performance.now(),o=h=>{let i=Math.min(1,(h-r)/n);t(1-(1-i)**e),this.render(),this.animationFrame=i<1?requestAnimationFrame(o):null};this.animationFrame=requestAnimationFrame(o)}cancelAnimation(){this.animationFrame!=null&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=null)}resize(n,e){n===0||e===0||(this.width=n,this.height=e,this.shell.resizeBackingStore(n,e),this.render())}};var y="bold 11px Inter, sans-serif";var v=Math.PI*2,S=-Math.PI/2,M=6,x=8+M,w=600;function D(s,n){return s.slices.length===n.slices.length&&s.slices.every((e,t)=>e.id===n.slices[t].id)}function H(s,n,e){return{...n,slices:n.slices.map((t,r)=>{let o=s.slices[r]?.value,h=o!=null&&Number.isFinite(o)?o+(t.value-o)*e:t.value;return{...t,value:h}})}}function A(s,n){let e=s;for(;e<n;)e+=v;for(;e>=n+v;)e-=v;return e}var C=class extends p{constructor(){super(...arguments);u(this,"data",{slices:[]})}setData(e){let t=this.data;if(t.slices.length===0||!D(t,e)){this.data=e,this.render();return}this.animate(w,1.5,r=>{this.data=H(t,e,r)})}render(){let{ctx:e}=this.shell;if(this.width===0||this.height===0)return;e.clearRect(0,0,this.width,this.height);let{slices:t}=this.data,r=t.reduce((m,c)=>m+Math.max(0,c.value),0);if(t.length===0||r<=0)return;let o=this.width/2,h=this.height/2,i=Math.min(this.width,this.height)/2-x,a=i*Math.max(0,Math.min(1,this.data.innerRadiusRatio??0));if(i<=0)return;let l=this.computeGeometry(t,r),d=this.findHoverIndex(o,h,a,i,l);l.forEach((m,c)=>{if(!m)return;let P=i+(c===d?M:0);this.drawSlice(e,o,h,a,P,m.start,m.end,t[c].color)}),a>0&&this.data.centerLabel&&this.drawCenterLabel(e,o,h,this.data.centerLabel),this.emitHover(d,l,t,o,h,i)}computeGeometry(e,t){let r=S;return e.map(o=>{let h=Math.max(0,o.value);if(h===0)return null;let i=h/t,a=r,l=a+i*v;return r=l,{start:a,end:l,fraction:i}})}drawSlice(e,t,r,o,h,i,a,l){e.beginPath(),o>0?(e.arc(t,r,h,i,a,!1),e.arc(t,r,o,a,i,!0)):(e.moveTo(t,r),e.arc(t,r,h,i,a,!1)),e.closePath(),e.fillStyle=l,e.fill()}drawCenterLabel(e,t,r,o){e.save(),e.font=y,e.fillStyle=b.text,e.textAlign="center",e.textBaseline="middle",e.fillText(o,t,r),e.restore()}findHoverIndex(e,t,r,o,h){if(this.mouseX==null||this.mouseY==null)return null;let i=this.mouseX-e,a=this.mouseY-t,l=Math.hypot(i,a);if(l<r||l>o)return null;let d=A(Math.atan2(a,i),S),m=h.findIndex(c=>c!=null&&d>=c.start&&d<c.end);return m===-1?null:m}emitHover(e,t,r,o,h,i){if(e==null){this.onHoverChange?.(null);return}let a=t[e],l=r[e];if(!a||!l){this.onHoverChange?.(null);return}let d=(a.start+a.end)/2,m=o+Math.cos(d)*i,c=h+Math.sin(d)*i;this.onHoverChange?.({index:e,slice:l,fraction:a.fraction,x:m,y:c})}};export{C as PieChart};

package/dist/pie-chart/pie-chart.d.ts

@@ -0,0 +1,21 @@
+import { CanvasChartEngine } from "../canvas-chart-base";
+import type { PieChartData, PieHoverEvent } from "./types";
+/** A single ring of slices sized by value, no axes — there's nothing to
+ *  scale against but the whole. `innerRadiusRatio` turns it into a donut. */
+export declare class PieChart extends CanvasChartEngine<PieHoverEvent> {
+    private data;
+    setData(data: PieChartData): void;
+    protected render(): void;
+    /** One entry per slice, aligned by index — null for a zero/negative value,
+     *  which draws nothing and can never be hovered. */
+    private computeGeometry;
+    private drawSlice;
+    private drawCenterLabel;
+    /** Which slice (if any) the cursor sits over — outside the ring, or inside
+     *  a donut's hole, is nobody's. */
+    private findHoverIndex;
+    /** The value breakdown is a DOM tooltip owned by whoever consumes
+     *  onHoverChange, same split as every other chart in this package —
+     *  x/y here just tell it where to sit. */
+    private emitHover;
+}

package/dist/pie-chart/types.d.ts

@@ -0,0 +1,26 @@
+export interface PieSlice {
+    id: string;
+    label: string;
+    value: number;
+    color: string;
+}
+export interface PieChartData {
+    slices: readonly PieSlice[];
+    /** How to write each slice's value in the hover event. Defaults to a plain
+     *  formatted number. */
+    valueFormatter?: (value: number) => string;
+    /** 0 (the default) draws a full pie. A donut with a hole this fraction of
+     *  the outer radius otherwise — e.g. 0.6. */
+    innerRadiusRatio?: number;
+    /** Short text drawn in the donut's hole (e.g. a total). Ignored when
+     *  innerRadiusRatio is 0 — a full pie has no hole to put it in. */
+    centerLabel?: string;
+}
+export interface PieHoverEvent {
+    index: number;
+    slice: PieSlice;
+    /** This slice's share of the total of all positive values, 0-1. */
+    fraction: number;
+    x: number;
+    y: number;
+}

package/dist/plot-frame.d.ts

@@ -0,0 +1,19 @@
+import type { PriceExtent } from "./types";
+export interface PlotFrame {
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+    height: number;
+    /** y of the category axis — where bars and lines bottom out. */
+    bottom: number;
+}
+export declare function createPlotFrame(left: number, right: number, top: number, height: number): PlotFrame;
+/** Nudges a coordinate half a pixel. A 1px line drawn on a whole pixel gets
+ *  smeared across two rows and looks washed out. */
+export declare function snapPixel(value: number): number;
+/** Value range fitting every series, with room to spare. Falls back to 0-1
+ *  when there's nothing to fit. */
+export declare function autoExtent(valueSets: readonly (readonly (number | null)[])[], categoryCount: number, cushionRatio: number): PriceExtent;
+/** Tick values spanning `extent` at round steps, aiming for one per ~45px. */
+export declare function axisTicks(extent: PriceExtent, plotHeight: number): number[];

package/dist/renderers/helpers.d.ts

@@ -0,0 +1,17 @@
+declare const MONTH_NAMES: readonly ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+declare const DASH_PATTERN: readonly [4, 4];
+declare const SOLID_PATTERN: number[];
+declare const AXIS_FONT = "11px Inter, sans-serif";
+declare const AXIS_FONT_BOLD = "bold 11px Inter, sans-serif";
+declare const LEGEND_FONT = "15px 'Inter', sans-serif";
+/** Price -> Y pixel. Build it once a frame and pass it around, so every draw
+ *  lands on exactly the same pixels. */
+declare function makeMapY(minPrice: number, maxPrice: number, chartHeight: number): (price: number) => number;
+declare function formatDateTime(timestamp: number): string;
+declare function formatVolume(v: number): string;
+/** Timestamp for a candle index. Indexes past either end of the data are
+ *  guessed from the spacing, so labels keep going into the empty space. */
+declare function timeAtIndex(data: {
+    time: number;
+}[], index: number): number | null;
+export { makeMapY, formatDateTime, formatVolume, timeAtIndex, MONTH_NAMES, DASH_PATTERN, SOLID_PATTERN, AXIS_FONT, AXIS_FONT_BOLD, LEGEND_FONT, };

package/dist/renderers/primitives/axis-pills.d.ts

@@ -0,0 +1,11 @@
+import type { DrawContext } from "./context";
+export interface AxisPill {
+    value: number;
+    /** Background colour — the text is always white. */
+    color: string;
+    text: string;
+    /** "full" fills the whole gutter width; "snug" wraps the text. */
+    variant?: "snug" | "full";
+}
+/** Draws a pane's labels together, so they can be spaced out as a group. */
+export declare function drawAxisPills(c: DrawContext, pills: readonly AxisPill[]): void;

package/dist/renderers/primitives/context.d.ts

@@ -0,0 +1,36 @@
+import type { PriceExtent } from "../../types";
+export interface DrawContext {
+    ctx: CanvasRenderingContext2D;
+    /** Where the plot area ends and the value gutter begins. */
+    chartWidth: number;
+    priceScaleWidth: number;
+    /** The pane being drawn into. */
+    top: number;
+    height: number;
+    /** The value range spread across that pane's height. */
+    extent: PriceExtent;
+    /** Candle index -> canvas X, at the middle of the candle. */
+    toX: (absIndex: number) => number;
+    /** Value -> canvas Y inside this pane. */
+    toY: (value: number) => number;
+    /** Width of one candle's slot, in px. */
+    candleWidth: number;
+    /** The visible slice, as indexes into the full data array. */
+    startIndex: number;
+    endIndex: number;
+}
+export interface PlotStyle {
+    color: string;
+    lineWidth?: number;
+    /** 0-1, applied separately so it works with any colour format. */
+    opacity?: number;
+    dash?: number[];
+}
+/** Runs `draw` clipped to the pane, and tidies the canvas up afterwards. */
+export declare function withPaneClip(c: DrawContext, draw: (ctx: CanvasRenderingContext2D) => void): void;
+export declare function applyStyle(ctx: CanvasRenderingContext2D, style: PlotStyle): void;
+/** The most recent real value up to `endIndex`, and which bar it was on. */
+export declare function lastValueBefore(values: readonly (number | null)[], endIndex: number): {
+    value: number;
+    index: number;
+} | null;

package/dist/renderers/primitives/decorations.d.ts

@@ -0,0 +1,44 @@
+import { type DrawContext } from "./context";
+/** A horizontal line at a fixed value, optionally named in the side gutter. */
+export interface ReferenceLine {
+    value: number;
+    color: string;
+    label?: string;
+    /** Label colour; falls back to the line's own. */
+    labelColor?: string;
+    dash?: number[];
+    lineWidth?: number;
+}
+/** A filled horizontal band between two values. */
+export interface Zone {
+    from: number;
+    to: number;
+    color: string;
+}
+export declare function drawZones(c: DrawContext, zones: readonly Zone[]): void;
+export declare function drawReferenceLines(c: DrawContext, lines: readonly ReferenceLine[]): void;
+/** Centres a label on `x`, nudged inward if it would hang off either edge. */
+export declare function clampPillCenter(x: number, pillWidth: number, chartWidth: number): number;
+/** Dashed vertical line at the hovered x, spanning one pane. */
+export declare function drawCrosshairLine(ctx: CanvasRenderingContext2D, x: number, top: number, bottom: number): void;
+/** Rounds a gap between gridlines to something a person would pick — 1, 2, 5
+ *  or 10, times a power of ten. */
+export declare function niceStep(range: number, targetLines: number): number;
+/** Horizontal grid lines with their values, roughly one every 40px. */
+export declare function drawPaneGrid(c: DrawContext, format?: (value: number) => string): void;
+/** Line along a pane's top edge, with a little grip showing it can be dragged. */
+export declare function drawPaneDivider(c: DrawContext, fullWidth: number, highlighted: boolean): void;
+export interface PillStyle {
+    background: string;
+    text: string;
+    font?: string;
+}
+/** A small rounded label hung from (centerX, topY). Returns its width, so a
+ *  caller placing several in a row knows where the next one starts. */
+export declare function drawLabelPill(ctx: CanvasRenderingContext2D, centerX: number, topY: number, text: string, style: PillStyle, options?: {
+    paddingX?: number;
+    height?: number;
+    radius?: number;
+}): number;
+/** Traces a rounded rectangle. Caller fills or strokes it. */
+export declare function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void;