@canplot/react 0.1.0 → 0.1.3

package/README.md

@@ -2,6 +2,10 @@
 
 A high-performance React charting library built on Canvas.
 
+## Documentation
+
+📚 [View live examples and documentation](https://jedzej.github.io/canplot/)
+
 ## Features
 
 - 🚀 **High Performance**: Built on Canvas for smooth rendering of large datasets
@@ -15,19 +19,19 @@ A high-performance React charting library built on Canvas.
 ## Installation
 
 ```bash
-npm install canplot
+npm install @canplot/react
 # or
-yarn add canplot
+yarn add @canplot/react
 # or
-pnpm add canplot
+pnpm add @canplot/react
 # or
-bun add canplot
+bun add @canplot/react
 ```
 
 ## Quick Start
 
 ```tsx
-import { CanPlot, LinePlot } from 'canplot';
+import { CanPlot, LinePlot } from '@canplot/react';
 
 function MyChart() {
   const data = [
@@ -226,6 +230,34 @@ const data = Array.from({ length: 30 }, (_, i) => ({
 
 Full TypeScript type definitions are included.
 
+## Troubleshooting
+
+### "Could not find a declaration file for module" error
+
+If you encounter this error:
+
+1. **Install React type definitions**:
+   ```bash
+   npm install --save-dev @types/react @types/react-dom
+   ```
+
+2. **Check your tsconfig.json**:
+   ```json
+   {
+     "compilerOptions": {
+       "moduleResolution": "bundler",  // or "node16", "nodenext"
+       "esModuleInterop": true,
+       "skipLibCheck": false
+     }
+   }
+   ```
+
+3. **Clear cache and reinstall**:
+   ```bash
+   rm -rf node_modules/.cache
+   npm install
+   ```
+
 ## License
 
 MIT

package/dist/CanPlot.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { PlotConfiguration } from "./types";
+export declare const CanPlot: import("react").ForwardRefExoticComponent<{
+    configuration: PlotConfiguration;
+    children?: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=CanPlot.d.ts.map

package/dist/CanPlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanPlot.d.ts","sourceRoot":"","sources":["../src/lib/CanPlot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAiC,MAAM,SAAS,CAAC;AAUhF,eAAO,MAAM,OAAO;mBAGD,iBAAiB;eACrB,SAAS;YACZ,KAAK,CAAC,aAAa;gBACf,MAAM;kDAmDpB,CAAC"}

package/dist/axes.d.ts

@@ -0,0 +1,18 @@
+import type { PlotDrawFrame } from "./types";
+export declare const drawAxes: (plotDrawFrame: PlotDrawFrame) => void;
+export type PlotAxisGenTicksOpts = {
+    frame: PlotDrawFrame;
+    scaleId: string;
+};
+export type PlotAxisTickFormatOpts = {
+    frame: PlotDrawFrame;
+    scaleId: string;
+    ticks: number[];
+};
+export type PlotAxisGenTicks = (opts: PlotAxisGenTicksOpts) => number[];
+export type PlotAxisTickFormat = (opts: PlotAxisTickFormatOpts) => string[];
+export declare const makeGenTicksDefault: ({ space, }?: {
+    space?: number;
+}) => PlotAxisGenTicks;
+export declare const formatTicksDefault: PlotAxisTickFormat;
+//# sourceMappingURL=axes.d.ts.map

package/dist/axes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axes.d.ts","sourceRoot":"","sources":["../src/lib/axes.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAS7C,eAAO,MAAM,QAAQ,GAAI,eAAe,aAAa,SA8DpD,CAAC;AA8GF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,EAAE,CAAC;AACxE,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,sBAAsB,KAAK,MAAM,EAAE,CAAC;AAE5E,eAAO,MAAM,mBAAmB,GAAI,aAEjC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAO,KAAG,gBA4B5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,kBAGhC,CAAC"}

package/dist/canplot.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),S=require("react"),it=require("zustand"),xt=5,St=10,gt=60,kt=30,vt="UTC",Et="en-GB",W=(t,s,e)=>Math.min(Math.max(t,s),e),wt=(t,s,e,o)=>{const{min:c,max:n}=R(t,e),r=o==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS,a=(B(t,e)?r.width:r.height)/(n-c);return s/a},R=(t,s)=>{const e=t.scales.find(o=>o.id===s);if(!e)throw new Error(`Scale ${s} not found`);return e},B=(t,s)=>t.scales.find(e=>e.id===s)?.origin==="x",Pt=(t,s)=>t.scales.find(e=>e.id===s)?.origin==="y",U=(t,s)=>{const e=window.devicePixelRatio||1;t.lineCap=s?.lineCap??"butt",t.lineDashOffset=e*(s?.lineDashOffset??0),t.lineJoin=s?.lineJoin??"miter",t.lineWidth=e*(s?.lineWidth??1),t.miterLimit=e*(s?.miterLimit??10),t.strokeStyle=s?.strokeStyle??"black",t.fillStyle=s?.fillStyle??t.strokeStyle,t.font=s?.font??`${10*e}px sans-serif`,t.textAlign=s?.textAlign??"start",t.direction=s?.direction??"inherit",t.textBaseline=s?.textBaseline??"alphabetic",t.fontKerning=s?.fontKerning??"auto"},J=(t,s,e,o)=>{const c=o==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS,{min:n,max:r}=R(t,e),a=(B(t,e)?c.width:c.height)/(r-n);return s*a},D=(t,s,e,o)=>{const{min:c}=R(t,e),n=o==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS,r=J(t,s-c,e,o);return B(t,e)?W(n.x+r,n.x-10*n.width,n.x+11*n.width):W(n.y+n.height-r,n.y-10*n.height,n.y+11*n.height)},Y=(t,s,e)=>{const o=e==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS;return W(s,o.x,o.x+o.width)},j=(t,s,e)=>{const o=e==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS;return W(s,o.y,o.y+o.height)},G=(t,s,e)=>{const{min:o,max:c}=R(t,e);return s>=o&&s<=c},L=(t,s,e,o)=>{const{min:c,max:n}=R(t,e),r=o==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS,a=B(t,e)?(s-r.x)/r.width:(r.height-s+r.y)/r.height;return c+a*(n-c)},Mt=1,Ct=1e3*Mt,rt=60*Ct,q=60*rt,Q=24*q,At=30*Q,Rt=365*Q,_t=[[1,"milliseconds"],[2,"milliseconds"],[5,"milliseconds"],[10,"milliseconds"],[20,"milliseconds"],[50,"milliseconds"],[100,"milliseconds"],[200,"milliseconds"],[500,"milliseconds"],[1,"seconds"],[5,"seconds"],[10,"seconds"],[15,"seconds"],[30,"seconds"],[1,"minutes"],[5,"minutes"],[10,"minutes"],[15,"minutes"],[30,"minutes"],[1,"hours"],[2,"hours"],[3,"hours"],[4,"hours"],[6,"hours"],[8,"hours"],[12,"hours"],[1,"days"],[3,"days"],[5,"days"],[7,"days"],[10,"days"],[15,"days"],[1,"months"],[2,"months"],[3,"months"],[4,"months"],[6,"months"],[1,"years"],[2,"years"],[5,"years"],[10,"years"],[25,"years"],[50,"years"],[100,"years"]],V=t=>{const[s,e]=t;switch(e){case"milliseconds":return s;case"seconds":return s*Ct;case"minutes":return s*rt;case"hours":return s*q;case"days":return s*Q;case"months":return s*At;case"years":return s*Rt}},Lt=(t,s)=>{const e=new Date(t);return e.setUTCMilliseconds(e.getUTCMilliseconds()+s),e.getTime()},Ut=(t,s)=>{const e=new Date(t);return e.setUTCSeconds(e.getUTCSeconds()+s),e.getTime()},Dt=(t,s)=>{const e=new Date(t);return e.setUTCMinutes(e.getUTCMinutes()+s),e.getTime()},Xt=(t,s)=>{const e=new Date(t);return e.setUTCHours(e.getUTCHours()+s),e.getTime()},Kt=(t,s)=>{const e=new Date(t);return e.setUTCDate(e.getUTCDate()+s),e.getTime()},ft=(t,s)=>{const e=new Date(t);return e.setUTCMonth(e.getUTCMonth()+s),e.getTime()},z=(t,s)=>{const[e,o]=s;switch(o){case"milliseconds":return Lt(t,e);case"seconds":return Ut(t,e);case"minutes":return Dt(t,e);case"hours":return Xt(t,e);case"days":return Kt(t,e);case"months":return ft(t,e);case"years":return ft(t,e*12)}};function H(t,s){const e=new Date(t),o=new Date(e.toLocaleString("en-US",{timeZone:s})),c=new Date(e.toLocaleString("en-US",{timeZone:"UTC"}));return(o.getTime()-c.getTime())/(3600*1e3)}const It=(t,s,e="UTC")=>{const[o,c]=s;let n=new Date(t);const r=()=>{n.setUTCHours(-H(n,e),0,0,0)};switch(c){case"milliseconds":n.setUTCMilliseconds(Math.ceil(n.getUTCMilliseconds()/o)*o);break;case"seconds":n.setUTCSeconds(Math.ceil(n.getUTCSeconds()/o)*o,0);break;case"minutes":n.setUTCMinutes(Math.ceil(n.getTime()%q/rt/o)*o,0,0);break;case"hours":n.setUTCHours(Math.ceil(n.getTime()%Q/q/o)*o,0,0,0);break;case"days":case"months":case"years":c==="months"?n.setUTCDate(1):c==="years"&&n.setUTCMonth(0,1),r(),n.getTime()<t&&(n=new Date(z(n,[1,c])));break}return n.getTime()},zt=({timeZone:t=vt,space:s=gt})=>({frame:e,scaleId:o})=>{const{min:c,max:n}=R(e,o),r=Math.floor(e.chartAreaCanvasPX.width/s)+1,u=(n-c)/r,[l,d]=_t.find(f=>V(f)>=u)??[1,"milliseconds"],m=It(c,[l,d],t),p=H(m,t),h=[m];let i;for(;;){switch(d){case"milliseconds":case"seconds":case"minutes":case"hours":{i=z(m,[h.length*l,d]);break}case"days":{const f=z(m,[h.length*l,d]);i=z(f,[p-H(f,t),"hours"]);break}case"months":case"years":{const f=z(z(z(m,[p,"hours"]),[h.length*l,d]),[-p,"hours"]);i=z(f,[p-H(f,t),"hours"]);break}}if(i>n)break;h.push(i)}return h},I=(t,s,e)=>t.find(o=>o.type===e)?.value!==s.find(o=>o.type===e)?.value,Ft=({timeZone:t=vt,locale:s=Et,showTimezone:e=!0})=>{const o=new Intl.DateTimeFormat(s,{year:"numeric",day:"numeric",month:"short",hour:"numeric",hourCycle:"h23",minute:"numeric",second:"numeric",fractionalSecondDigits:3,timeZoneName:"short",timeZone:t});return({ticks:c})=>{const n=c[1]-c[0],r=n<V([1,"days"]),a=n<V([1,"minutes"]),u=n<V([1,"seconds"]);return c.map(l=>o.formatToParts(new Date(l))).map((l,d,m)=>{const p=m[d-1],h=d===0||I(l,p,"year"),i=d===0||I(l,p,"day"),f=d===0||I(l,p,"month"),y=d===0||I(l,p,"hour"),x=d===0||I(l,p,"timeZoneName"),T=d===0||I(l,p,"minute"),g=d===0||I(l,p,"second"),v=d===0||I(l,p,"fractionalSecond"),E=[];if(r&&(y||T||x||g||v)){const C=l.find(_=>_.type==="hour")?.value,P=l.find(_=>_.type==="minute")?.value,M=l.find(_=>_.type==="timeZoneName")?.value;let X="";if(a){const _=l.find(F=>F.type==="second")?.value,$=l.find(F=>F.type==="fractionalSecond")?.value;X=`:${_}`+(u?`.${$}`:"")}E.push(`${C}:${P}${X}`+(e&&x?` ${M}`:""))}return(i||f)&&E.push([l.find(C=>C.type==="month")?.value,i&&l.find(C=>C.type==="day")?.value].filter(Boolean).join(" ")),h&&E.push(l.find(C=>C.type==="year")?.value),E.filter(C=>C).join(`
-`)})}},Z=[];for(let t=-12;t<=12;t++)Z.push(1*10**t),Z.push(2*10**t),Z.push(5*10**t);const Yt=t=>{const{ctx:s,scales:e}=t;s.save(),s.strokeStyle="black",s.fillStyle="black",s.lineWidth=1,s.font="12px Arial",s.textAlign="center",s.textBaseline="middle";for(const o of e){if(!o.axis)continue;const c=o.type==="time"?zt({space:o.axis.tickSpace,timeZone:o.timeZone}):jt({space:o.axis.tickSpace}),n=o.type==="time"?Ft({timeZone:o.timeZone,showTimezone:o.axis.showTimezone,locale:o.locale}):Ot,r=o.axis.canvasRect;if(o.origin==="x"){if(o.axis.position==="bottom")s.beginPath(),s.moveTo(r.x,r.y),s.lineTo(r.x+r.width,r.y),s.stroke(),mt(t,o.id,r.y,c,n);else if(o.axis.position==="top"){const a=r.y+r.height;s.beginPath(),s.moveTo(r.x,a),s.lineTo(r.x+r.width,a),s.stroke(),mt(t,o.id,a,c,n)}}else if(o.axis.position==="left"){const a=r.x+r.width;s.beginPath(),s.moveTo(a,r.y),s.lineTo(a,r.y+r.height),s.stroke(),pt(t,o.id,a,c,n)}else o.axis.position==="right"&&(s.beginPath(),s.moveTo(r.x,r.y),s.lineTo(r.x,r.y+r.height),s.stroke(),pt(t,o.id,r.x,c,n))}s.restore()},pt=(t,s,e,o,c)=>{const{ctx:n}=t,r=t.scales.find(i=>i.id===s)?.axis;if(!r)return;const a=window.devicePixelRatio||1,u=xt,l=e,d=r.position==="left"?e-u:e+u,m=St*a,p=o({frame:t,scaleId:s})??[],h=c({frame:t,scaleId:s,ticks:p});n.save(),n.fontKerning="auto",U(n,{}),n.beginPath();for(let i=0;i<p.length;i++){const f=D(t,p[i],s,"canvas");n.moveTo(l,f),n.lineTo(d,f)}n.stroke(),n.restore(),n.save(),U(n,{textBaseline:"middle",textAlign:r.position==="left"?"right":"left"});for(let i=0;i<p.length;i++){const f=D(t,p[i],s,"canvas"),y=h[i].split(`
-`);for(let x=0;x<y.length;x++)n.fillText(` ${y[x]} `,d,f+x*m)}n.restore()},mt=(t,s,e,o,c)=>{const{ctx:n}=t,r=t.scales.find(i=>i.id===s)?.axis;if(!r)return;const a=window.devicePixelRatio||1,u=xt,l=e,d=r.position==="top"?e-u:e+u,m=St*a,p=o({frame:t,scaleId:s})??[],h=c({frame:t,scaleId:s,ticks:p});n.save(),n.fontKerning="auto",U(n,{}),n.beginPath();for(let i=0;i<p.length;i++){const f=D(t,p[i],s,"canvas");n.moveTo(f,l),n.lineTo(f,d)}n.stroke(),n.restore(),n.save(),U(n,{textBaseline:r.position==="top"?"bottom":"top",textAlign:"center"});for(let i=0;i<p.length;i++){const f=D(t,p[i],s,"canvas"),y=h[i].split(`
-`);for(let x=0;x<y.length;x++)n.fillText(y[x],f,d+a*2+x*m)}n.restore()},jt=({space:t}={})=>({frame:s,scaleId:e})=>{const{min:o,max:c}=R(s,e),n=[],r=window.devicePixelRatio||1,a=(t??(B(s,e)?gt:kt))*r,u=wt(s,a,e,"canvas"),l=Z.find(m=>m>u)??1;let d=o%l<Number.EPSILON?o:o+l-o%l;for(;d<=c;)n.push(d),d+=l;return n},Ot=({ticks:t})=>{const s=Math.max(0,Math.ceil(-Math.log10(t[1]-t[0])));return t.map(e=>e.toFixed(s))},Bt=()=>it.createStore((t,s)=>{const e=()=>{const o=s()._frame;if(!o)throw new Error("No frame set in frame store");return o};return{_frame:null,getFrame:e,getCtx:()=>e().ctx,clampXPosToChartArea:(o,c)=>Y(e(),o,c??"canvas"),clampYPosToChartArea:(o,c)=>j(e(),o,c??"canvas"),valToPos:(o,c,n)=>D(e(),o,c,n??"canvas"),valToPxDistance:(o,c,n)=>J(e(),o,c,n??"canvas"),valFits:(o,c)=>G(e(),o,c),getScale:o=>R(e(),o)}}),at=S.createContext(null),N=(t,s)=>{const e=S.useContext(at);if(!e)throw new Error("useFrame must be used within a CanPlot component");const o=S.useRef(t);o.current=t,S.useLayoutEffect(()=>{o.current(e.getState()),e.subscribe(c=>{c._frame&&o.current(c)})},[e,...s])},lt=t=>{const s=S.useContext(at);if(!s)throw new Error("useFrame must be used within a CanPlot component");return it.useStore(s,t??(e=>e.getFrame()))};function $t(t){return s=>{for(const e of t)ct(e,s)}}function Nt(t){return s=>{const e=[];for(const o of t){const c=ct(o,s),n=typeof c=="function";e.push(n?c:()=>ct(o,null))}return()=>{for(const o of e)o()}}}function ct(t,s){if(typeof t=="function")return t(s);t&&(t.current=s)}var Vt=parseInt(S.version.split(".")[0],10)>=19?Nt:$t;const Ht=S.forwardRef(({configuration:t,children:s,style:e,className:o},c)=>{const n=S.useRef(null),r=S.useRef(null),a=Wt(r),u=S.useMemo(Bt,[]);S.useLayoutEffect(()=>{u.setState({_frame:Gt(t,a,n.current)})},[t,a,n,u]),S.useLayoutEffect(()=>u.subscribe(d=>{d._frame&&qt(d._frame)}),[u]);const l=window.devicePixelRatio||1;return A.jsxs("div",{ref:Vt([c,r]),className:o,style:{position:"relative",overflow:"hidden",...e},"data-canplotroot":!0,children:[A.jsx("canvas",{ref:n,width:a.width*l,height:a.height*l,style:{inset:0,position:"absolute",width:`${a.width}px`,height:`${a.height}px`}}),A.jsx(Zt,{frameStore:u,children:s})]})}),Zt=({frameStore:t,children:s})=>it.useStore(t,o=>!!o._frame)?A.jsx(at.Provider,{value:t,children:s}):null,Wt=t=>{const[s,e]=S.useState({width:0,height:0}),[o]=S.useState(()=>new ResizeObserver(c=>{for(const n of c){const r=Math.round(n.contentRect.width),a=Math.round(n.contentRect.height);e(u=>u.width!==r||u.height!==a?{...u,width:r,height:a}:u)}}));return S.useLayoutEffect(()=>{if(!t.current)return;const c=t.current.clientWidth,n=t.current.clientHeight;return e(r=>r.width!==c||r.height!==n?{...r,width:c,height:n}:r),o.observe(t.current,{box:"border-box"}),()=>o.disconnect()},[o,t]),s},Gt=(t,s,e)=>{const o=e?.getContext("2d");if(!o)return null;const c=window.devicePixelRatio||1;if(s.width===0||s.height===0)return null;const n={x:t.padding.left,y:t.padding.top,width:s.width-t.padding.left-t.padding.right,height:s.height-t.padding.top-t.padding.bottom};for(const h of t.scales)h.axis&&(h.origin==="x"?(h.axis.position==="bottom"||h.axis.position==="top")&&(n.height=Math.max(0,n.height-h.axis.size),h.axis.position==="top"&&(n.y+=h.axis.size)):(h.axis.position==="left"||h.axis.position==="right")&&(n.width=Math.max(0,n.width-h.axis.size),h.axis.position==="left"&&(n.x+=h.axis.size)));const r={x:n.x*c,y:n.y*c,width:n.width*c,height:n.height*c},a=[];let u=t.padding.left*c,l=o.canvas.width-t.padding.right*c,d=o.canvas.height-t.padding.bottom*c,m=t.padding.top*c;for(const h of t.scales){if(!h.axis){a.push({...h,axis:null});continue}let i;if(h.origin==="x")switch(h.axis.position){case"bottom":d-=h.axis.size*c,i={x:n.x,y:d/c,width:n.width,height:h.axis.size};break;case"top":m+=h.axis.size*c,i={x:n.x,y:m/c-h.axis.size,width:n.width,height:h.axis.size};break;case"left":case"right":throw new Error("Invalid axis position for x origin")}else switch(h.axis.position){case"left":u+=h.axis.size*c,i={x:u/c-h.axis.size,y:n.y,width:h.axis.size,height:n.height};break;case"right":l-=h.axis.size*c,i={x:l/c,y:n.y,width:h.axis.size,height:n.height};break;case"top":case"bottom":throw new Error("Invalid axis position for y origin")}const f={x:i.x*c,y:i.y*c,width:i.width*c,height:i.height*c};a.push({...h,axis:{...h.axis,cssRect:i,canvasRect:f}})}return{ctx:o,dpr:c,padding:t.padding,scales:a,chartAreaCSS:n,chartAreaCanvasPX:r}},qt=t=>{t.ctx.clearRect(0,0,t.ctx.canvas.width,t.ctx.canvas.height),Yt(t)},Jt=({data:t,xScaleId:s,yScaleId:e,style:o})=>(N(({getCtx:c,clampXPosToChartArea:n,clampYPosToChartArea:r,valToPos:a})=>{const u=c();u.save(),u.beginPath(),U(u,o);for(const l of t){const d=n(a(l.x,s)),m=r(a(l.y,e));u.lineTo(d,m)}u.stroke(),u.restore()},[t,s,e,o]),null),Qt=({data:t,xScaleId:s,yScaleId:e,radius:o=5,style:c})=>(N(({getCtx:n,valToPos:r,valFits:a})=>{const u=n();u.save(),u.beginPath(),U(u,c);for(const l of t){if(!a(l.x,s)||!a(l.y,e))continue;const d=r(l.x,s),m=r(l.y,e);u.moveTo(d+o,m),u.arc(d,m,o,0,Math.PI*2)}u.stroke(),u.fill(),u.restore()},[t,s,e,o,c]),null),te=({data:t,xScaleId:s,yScaleId:e,style:o,barWidth:c,xPositionOffset:n,radius:r})=>(N(({getCtx:a,valToPxDistance:u,valToPos:l,clampXPosToChartArea:d,clampYPosToChartArea:m})=>{if(t.length===0)return;const p=a();p.save(),U(p,o);const h=u(c,s);p.beginPath();for(const i of t){const y=l(i.x,s)-h/2+n*h,x=m(l(0,e)),T=m(l(i.y,e)),g=x-T,v=d(y),E=d(y+h)-v;r?p.roundRect(v,T,E,g,r):p.rect(v,T,E,g)}p.closePath(),p.fill(),o?.strokeStyle&&p.stroke(),p.restore()},[t,s,e,o,c,n,r]),null),ee=({data:t,xScaleId:s,yScaleId:e,style:o})=>(N(({getCtx:c,clampXPosToChartArea:n,clampYPosToChartArea:r,valToPos:a})=>{const u=[];for(const d of t){const m=n(a(d.x,s)),p=r(a(d.y[0],e)),h=r(a(d.y[1],e));u.push({x:m,y:p}),u.unshift({x:m,y:h})}const l=c();if(u.length>0){l.save(),l.beginPath(),U(l,o),l.moveTo(u[0].x,u[0].y);for(const d of u)l.lineTo(d.x,d.y);l.closePath(),l.fill(),l.restore()}},[t,s,e,o]),null),se=({data:t,stroked:s,xScaleId:e,yScaleId:o,style:c})=>(N(({getCtx:n,clampXPosToChartArea:r,clampYPosToChartArea:a,valToPos:u})=>{const l=[],d=n();for(const i of t){const f=r(u(i.x,e)),y=a(u(i.y,o));l.push({x:f,y})}const m=l.at(0),p=l.at(-1);if(!m||!p)return;const h=a(u(0,o));d.save(),d.beginPath(),U(d,c),d.moveTo(m.x,h);for(const i of l)d.lineTo(i.x,i.y);if(d.lineTo(p.x,h),d.closePath(),d.fill(),s){d.beginPath(),d.moveTo(m.x,m.y);for(const i of l)d.lineTo(i.x,i.y);d.stroke()}d.restore()},[t,s,e,o,c]),null),ne=(t,s)=>lt(({clampXPosToChartArea:e,clampYPosToChartArea:o,getScale:c,valToPos:n,valFits:r})=>{const a={};for(const u in t){const l=t[u];switch(l.exceeding){case"discard":{if(r(l.value,l.scaleId)){const d=n(l.value,l.scaleId,s);a[u]=d}break}case"clamp":{const d=n(l.value,l.scaleId,s);a[u]=c(l.scaleId)?.origin==="x"?e(d,s):o(d,s);break}}}return a}),b=()=>{const t=[];return{addEventListener:(s,e)=>(t.push({syncKey:s,callback:e}),()=>{const o=t.findIndex(c=>c.callback===e);o!==-1&&t.splice(o,1)}),dispatchEvent:(s,e)=>{for(const o of t)o.syncKey===s&&o.callback(s,e)}}},w={dblclick:b(),click:b(),move:b(),mousedown:b(),mouseup:b(),spanselect:b(),documentmouseup:b(),pressandwheel:b(),sync_dblclick:b(),sync_click:b(),sync_move:b(),sync_mousedown:b(),sync_mouseup:b(),sync_spanselect:b(),sync_pressandwheel:b()},k=(t,s,e)=>{const o=S.useRef(e);o.current=e,S.useEffect(()=>w[t].addEventListener(s,(n,r)=>{o.current(r,n)}),[s,t,o])},ut=S.createContext(""),dt=(t,s)=>{const e=S.useContext(ut);return k(t,e,s)},oe=(t,s,e,o,c)=>{if(!s)return;const n=o??e.scales.find(m=>m.origin==="x")?.id,r=c??e.scales.find(m=>m.origin==="y")?.id;if(!n||!r)return;const a=t.clientX-s.left,u={scaleId:n,value:L(e,a,n,"css")},l=t.clientY-s.top,d={scaleId:r,value:L(e,l,r,"css")};return{pointerSyncPosition:{x:u,y:d},cssX:a,cssY:l}},O=(t,s)=>{const e=t.x?D(s,t.x.value,t.x.scaleId,"css"):0,o=t.y?D(s,t.y.value,t.y.scaleId,"css"):0;return{cssX:e,cssY:o,scaled:Object.fromEntries(s.scales.map(c=>{const n=c.origin==="y"?o:e;return[c.id,L(s,n,c.id,"css")]}))}},yt=(t,s,e)=>{if(!s){const r=t==="x"?e.chartAreaCSS.x:e.chartAreaCSS.y,a=t==="x"?e.chartAreaCSS.x+e.chartAreaCSS.width:e.chartAreaCSS.y+e.chartAreaCSS.height;return{fromCSS:r,toCSS:a,scaled:e.scales.flatMap(u=>{if(u.origin!==t)return[];const{min:l,max:d}=R(e,u.id);return[{scaleId:u.id,from:l,to:d}]})}}const o=D(e,s.from,s.scaleId,"css"),c=D(e,s.to,s.scaleId,"css"),n=e.scales.flatMap(r=>{if(r.origin!==t)return[];const a=L(e,o,r.id,"css"),u=L(e,c,r.id,"css");return[{scaleId:r.id,from:a,to:u}]});return{fromCSS:o,toCSS:c,scaled:n}},ce=({id:t,onClick:s,onDblClick:e,onMouseMove:o,onMouseDown:c,onMouseUp:n,onDocumentMouseUp:r,onSpanSelect:a,className:u,style:l,sync:d,children:m})=>{const p=S.useId(),h=t||p;return k("dblclick",h,i=>{e?.(i)}),k("click",h,i=>{s?.(i)}),k("move",h,i=>{o?.(i)}),k("mousedown",h,i=>{c?.(i)}),k("mouseup",h,i=>{n?.(i)}),k("documentmouseup",h,i=>{r?.(i)}),k("spanselect",h,i=>{a?.(i)}),A.jsxs(ut,{value:h,children:[A.jsx(ie,{className:u,style:l,sync:d}),m]})},ie=({className:t,style:s,sync:e})=>{const o=S.useRef(null),c=lt(),n=S.useRef(c);n.current=c;const r=S.useContext(ut),a=e?.key||r,u=S.useRef(null),l=S.useRef(null),d=S.useRef(null),m=()=>{const i=o.current?.parentElement;if(i){if(i.dataset.canplotroot===void 0)throw new Error("ChartAreaInteractions must be used within a CanPlot component");return i.getBoundingClientRect()}},p=(i,f)=>{const y=oe(i,m(),n.current,e?.xViaScaleId,e?.yViaScaleId);y&&f(y.pointerSyncPosition,{cssX:y.cssX,cssY:y.cssY},{ctrlKey:i.ctrlKey,altKey:i.altKey,shiftKey:i.shiftKey,metaKey:i.metaKey})},h=S.useRef(p);return h.current=p,S.useEffect(()=>{const i=g=>{const v=l.current;v&&w.sync_spanselect.dispatchEvent(a,{...v,completed:!0}),w.documentmouseup.dispatchEvent(a,{frame:n.current,keys:{ctrlKey:g.ctrlKey,altKey:g.altKey,shiftKey:g.shiftKey,metaKey:g.metaKey}})},f=g=>{const v={ctrlKey:g.ctrlKey,altKey:g.altKey,shiftKey:g.shiftKey,metaKey:g.metaKey},E=d.current;if(E&&Object.entries(v).some(([P,M])=>E.keys[P]!==M)){const P={...E,keys:v};d.current=P,w.sync_move.dispatchEvent(a,P)}const C=l.current;if(C&&Object.entries(v).some(([P,M])=>C.keys[P]!==M)){g.stopPropagation(),g.preventDefault();const P={...C,keys:v};l.current=P,w.sync_spanselect.dispatchEvent(a,P)}},y=g=>{h.current(g,(v,{cssX:E,cssY:C},P)=>{const M=u.current;if(!M||!v.x||!v.y)return;const X=n.current,_=M.xRangeCss.start,$=E,F=M.yRangeCss.start,tt=C,et=R(X,v.x.scaleId),st=R(X,v.y.scaleId);u.current={xRangeCss:{start:_,end:$},yRangeCss:{start:F,end:tt}};let K="none";const nt=Math.abs(F-tt),ot=Math.abs(_-$);nt<10&&ot<10?K="none":nt>30&&ot>30?K="box":nt>ot?K="y":K="x";const Tt=K==="x"||K==="box"?{scaleId:et.id,from:L(X,Y(n.current,_,"css"),et.id,"css"),to:L(X,Y(n.current,$,"css"),et.id,"css")}:void 0,bt=K==="y"||K==="box"?{scaleId:st.id,from:L(X,j(n.current,F,"css"),st.id,"css"),to:L(X,j(n.current,tt,"css"),st.id,"css")}:void 0,ht={mode:K,xRange:Tt,yRange:bt,completed:!1,keys:P};l.current=ht,w.sync_spanselect.dispatchEvent(a,ht)})},x=g=>{h.current(g,(v,E,C)=>{if(Object.values(C).some(M=>M)){g.preventDefault();const M=Math.abs(g.deltaY)>Math.abs(g.deltaX)?g.deltaY:g.deltaX;w.sync_pressandwheel.dispatchEvent(a,{positions:v,keys:C,deltaX:g.deltaX,deltaY:g.deltaY,deltaAbs:M})}})};document.addEventListener("mouseup",i),document.addEventListener("keydown",f),document.addEventListener("keyup",f),document.addEventListener("mousemove",y);const T=o.current;return T?.addEventListener("wheel",x,{passive:!1}),()=>{document.removeEventListener("mouseup",i),document.removeEventListener("keydown",f),document.removeEventListener("keyup",f),document.removeEventListener("mousemove",y),T?.removeEventListener("wheel",x)}},[n,a,h]),k("sync_dblclick",a,i=>{const f=O(i.positions,n.current);f&&w.dblclick.dispatchEvent(r,{frame:n.current,pointer:f,keys:i.keys})}),k("sync_click",a,i=>{const f=O(i.positions,n.current);f&&w.click.dispatchEvent(r,{frame:n.current,pointer:f,keys:i.keys})}),k("sync_move",a,i=>{const f=i.positions?O(i.positions,n.current):null;d.current=i,w.move.dispatchEvent(r,{frame:n.current,pointer:f??null,keys:i.keys})}),k("sync_mousedown",a,i=>{const f=O(i.positions,n.current);f&&w.mousedown.dispatchEvent(r,{frame:n.current,pointer:f,keys:i.keys})}),k("sync_mouseup",a,i=>{const f=O(i.positions,n.current);f&&w.mouseup.dispatchEvent(r,{frame:n.current,pointer:f,keys:i.keys})}),k("sync_pressandwheel",a,i=>{const f=O(i.positions,n.current);f&&w.pressandwheel.dispatchEvent(r,{frame:n.current,pointer:f,keys:i.keys,deltaX:i.deltaX,deltaY:i.deltaY,deltaAbs:i.deltaAbs})}),k("sync_spanselect",a,i=>{const f=yt("x",i.xRange,n.current),y=yt("y",i.yRange,n.current),x=f.scaled,T=y.scaled;i.completed&&(u.current=null),w.spanselect.dispatchEvent(r,{mode:i.mode,frame:n.current,xRanges:x,yRanges:T,completed:i.completed,x:{fromCSS:f.fromCSS,toCSS:f.toCSS},y:{fromCSS:y.fromCSS,toCSS:y.toCSS},keys:i.keys})}),A.jsx("div",{ref:o,id:"interactions",className:t,style:{position:"absolute",left:c.chartAreaCSS.x,top:c.chartAreaCSS.y,width:c.chartAreaCSS.width,height:c.chartAreaCSS.height,zIndex:25,...s},onClick:i=>{p(i,(f,y,x)=>{w.sync_click.dispatchEvent(a,{positions:f,keys:x})})},onMouseLeave:i=>{p(i,(f,y,x)=>{w.sync_move.dispatchEvent(a,{positions:null,keys:x})})},onMouseMove:i=>{p(i,(f,y,x)=>{w.sync_move.dispatchEvent(a,{positions:f,keys:x})})},onMouseDown:i=>{p(i,(f,{cssX:y,cssY:x},T)=>{w.sync_mousedown.dispatchEvent(a,{positions:f,keys:T}),l.current=null,u.current={xRangeCss:{start:y,end:y},yRangeCss:{start:x,end:x}}})},onMouseUp:i=>{p(i,(f,y,x)=>{w.sync_mouseup.dispatchEvent(a,{positions:f,keys:x});const T=l.current;l.current=null;const g=u.current;if(u.current=null,g&&T){const v={...T,keys:x,completed:!0};w.sync_spanselect.dispatchEvent(a,v)}})},onDoubleClick:i=>{p(i,(f,y,x)=>{w.sync_dblclick.dispatchEvent(a,{positions:f,keys:x})})}})},re=({data:t,renderTooltip:s,xScaleId:e})=>{const[o,c]=S.useState(null);dt("move",r=>{c(r)});const n=S.useMemo(()=>{if(!o)return null;const{frame:r,pointer:a}=o,u=a?.scaled[e];if(u===void 0)return null;const l=[];let d=u;for(const m of t){let p=null,h=1/0;for(const[f,y]of m.points.entries()){if(!G(r,y.x,e)||!G(r,y.y,m.yScaleId))continue;const x=Math.abs(y.x-u);x<h&&(h=x,p=f)}const i=m.points[p??-1];if(!i||J(r,h,e,"css")>30){l.push({seriesId:m.seriesId,y:null});continue}d=i.x,l.push({seriesId:m.seriesId,y:i.y})}return{frame:r,x:d,points:l}},[t,o,e]);return s(n)},ae=({makeXStyle:t,makeXClassName:s,makeYStyle:e,makeYClassName:o})=>{const[c,n]=S.useState(null);if(dt("move",d=>{n(d)}),!c)return null;const{frame:r,pointer:a}=c,u=Y(r,a?.cssX??0,"css"),l=j(r,a?.cssY??0,"css");return A.jsxs(A.Fragment,{children:[A.jsx("div",{"data-show":!!a,className:s?.(c),style:{position:"absolute",left:0,top:r.chartAreaCSS.y,height:r.chartAreaCSS.height,borderColor:"red",borderLeftWidth:"1px",borderLeftStyle:"solid",pointerEvents:"none",opacity:a?1:0,transform:`translateX(${u}px)`,...t?.(c)}}),A.jsx("div",{className:o?.(c),"data-show":!!a,style:{position:"absolute",top:0,height:0,borderTop:"solid 1px red",left:r.chartAreaCSS.x,width:r.chartAreaCSS.width,pointerEvents:"none",opacity:a?1:0,transform:`translateY(${l}px)`,...e?.(c)}})]})},le=({makeClassName:t,makeStyle:s})=>{const[e,o]=S.useState(null);if(dt("spanselect",p=>{o(p.mode==="none"||p.completed?null:p)}),!e)return null;const c=Y(e.frame,e.x.fromCSS,"css"),n=Y(e.frame,e.x.toCSS,"css"),r=j(e.frame,e.y.fromCSS,"css"),a=j(e.frame,e.y.toCSS,"css"),u=Math.min(c,n),l=Math.min(r,a),d=Math.abs(n-c),m=Math.abs(a-r);return A.jsx("div",{className:t?.(e),style:{position:"absolute",backgroundColor:"#0000ff22",left:`${u}px`,top:`${l}px`,width:`${d}px`,height:`${m}px`,pointerEvents:"none",...s?.(e)}})},ue=({style:t,children:s,scaleId:e,...o})=>{const c=lt(n=>n.getScale(e)?.axis);return c?A.jsx("div",{style:{position:"absolute",backgroundColor:"#0000ff11",left:c.cssRect.x,top:c.cssRect.y,height:c.cssRect.height,width:c.cssRect.width,...t},...o,children:s}):null};exports.AreaPlot=ee;exports.AxisOverlay=ue;exports.BarPlot=te;exports.CanPlot=Ht;exports.ChartAreaInteractions=ce;exports.Crosshair=ae;exports.LinePlot=Jt;exports.ScatterPlot=Qt;exports.SelectBox=le;exports.SparklinePlot=se;exports.TooltipsX=re;exports.applyStyles=U;exports.clampXPosToChartArea=Y;exports.clampYPosToChartArea=j;exports.getScale=R;exports.isXScale=B;exports.isYScale=Pt;exports.posToVal=L;exports.pxToValDistance=wt;exports.usePositioned=ne;exports.valFits=G;exports.valToPos=D;exports.valToPxDistance=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),S=require("react"),ct=require("zustand"),xt=5,St=10,gt=60,kt=30,vt="UTC",Et="en-GB",W=(t,s,e)=>Math.min(Math.max(t,s),e),wt=(t,s,e,o)=>{const{min:i,max:n}=R(t,e),r=o==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS,a=(B(t,e)?r.width:r.height)/(n-i);return s/a},R=(t,s)=>{const e=t.scales.find(o=>o.id===s);if(!e)throw new Error(`Scale ${s} not found`);return e},B=(t,s)=>t.scales.find(e=>e.id===s)?.origin==="x",Pt=(t,s)=>t.scales.find(e=>e.id===s)?.origin==="y",U=(t,s)=>{const e=window.devicePixelRatio||1;t.lineCap=s?.lineCap??"butt",t.lineDashOffset=e*(s?.lineDashOffset??0),t.lineJoin=s?.lineJoin??"miter",t.lineWidth=e*(s?.lineWidth??1),t.miterLimit=e*(s?.miterLimit??10),t.strokeStyle=s?.strokeStyle??"black",t.fillStyle=s?.fillStyle??t.strokeStyle,t.font=s?.font??`${10*e}px sans-serif`,t.textAlign=s?.textAlign??"start",t.direction=s?.direction??"inherit",t.textBaseline=s?.textBaseline??"alphabetic",t.fontKerning=s?.fontKerning??"auto"},J=(t,s,e,o)=>{const i=o==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS,{min:n,max:r}=R(t,e),a=(B(t,e)?i.width:i.height)/(r-n);return s*a},D=(t,s,e,o)=>{const{min:i}=R(t,e),n=o==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS,r=J(t,s-i,e,o);return B(t,e)?W(n.x+r,n.x-10*n.width,n.x+11*n.width):W(n.y+n.height-r,n.y-10*n.height,n.y+11*n.height)},Y=(t,s,e)=>{const o=e==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS;return W(s,o.x,o.x+o.width)},j=(t,s,e)=>{const o=e==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS;return W(s,o.y,o.y+o.height)},G=(t,s,e)=>{const{min:o,max:i}=R(t,e);return s>=o&&s<=i},L=(t,s,e,o)=>{const{min:i,max:n}=R(t,e),r=o==="canvas"?t.chartAreaCanvasPX:t.chartAreaCSS,a=B(t,e)?(s-r.x)/r.width:(r.height-s+r.y)/r.height;return i+a*(n-i)},Mt=1,Ct=1e3*Mt,rt=60*Ct,q=60*rt,Q=24*q,At=30*Q,Rt=365*Q,_t=[[1,"milliseconds"],[2,"milliseconds"],[5,"milliseconds"],[10,"milliseconds"],[20,"milliseconds"],[50,"milliseconds"],[100,"milliseconds"],[200,"milliseconds"],[500,"milliseconds"],[1,"seconds"],[5,"seconds"],[10,"seconds"],[15,"seconds"],[30,"seconds"],[1,"minutes"],[5,"minutes"],[10,"minutes"],[15,"minutes"],[30,"minutes"],[1,"hours"],[2,"hours"],[3,"hours"],[4,"hours"],[6,"hours"],[8,"hours"],[12,"hours"],[1,"days"],[3,"days"],[5,"days"],[7,"days"],[10,"days"],[15,"days"],[1,"months"],[2,"months"],[3,"months"],[4,"months"],[6,"months"],[1,"years"],[2,"years"],[5,"years"],[10,"years"],[25,"years"],[50,"years"],[100,"years"]],V=t=>{const[s,e]=t;switch(e){case"milliseconds":return s;case"seconds":return s*Ct;case"minutes":return s*rt;case"hours":return s*q;case"days":return s*Q;case"months":return s*At;case"years":return s*Rt}},Lt=(t,s)=>{const e=new Date(t);return e.setUTCMilliseconds(e.getUTCMilliseconds()+s),e.getTime()},Ut=(t,s)=>{const e=new Date(t);return e.setUTCSeconds(e.getUTCSeconds()+s),e.getTime()},Dt=(t,s)=>{const e=new Date(t);return e.setUTCMinutes(e.getUTCMinutes()+s),e.getTime()},Xt=(t,s)=>{const e=new Date(t);return e.setUTCHours(e.getUTCHours()+s),e.getTime()},Kt=(t,s)=>{const e=new Date(t);return e.setUTCDate(e.getUTCDate()+s),e.getTime()},ft=(t,s)=>{const e=new Date(t);return e.setUTCMonth(e.getUTCMonth()+s),e.getTime()},z=(t,s)=>{const[e,o]=s;switch(o){case"milliseconds":return Lt(t,e);case"seconds":return Ut(t,e);case"minutes":return Dt(t,e);case"hours":return Xt(t,e);case"days":return Kt(t,e);case"months":return ft(t,e);case"years":return ft(t,e*12)}};function H(t,s){const e=new Date(t),o=new Date(e.toLocaleString("en-US",{timeZone:s})),i=new Date(e.toLocaleString("en-US",{timeZone:"UTC"}));return(o.getTime()-i.getTime())/(3600*1e3)}const It=(t,s,e="UTC")=>{const[o,i]=s;let n=new Date(t);const r=()=>{n.setUTCHours(-H(n,e),0,0,0)};switch(i){case"milliseconds":n.setUTCMilliseconds(Math.ceil(n.getUTCMilliseconds()/o)*o);break;case"seconds":n.setUTCSeconds(Math.ceil(n.getUTCSeconds()/o)*o,0);break;case"minutes":n.setUTCMinutes(Math.ceil(n.getTime()%q/rt/o)*o,0,0);break;case"hours":n.setUTCHours(Math.ceil(n.getTime()%Q/q/o)*o,0,0,0);break;case"days":case"months":case"years":i==="months"?n.setUTCDate(1):i==="years"&&n.setUTCMonth(0,1),r(),n.getTime()<t&&(n=new Date(z(n,[1,i])));break}return n.getTime()},zt=({timeZone:t=vt,space:s=gt})=>({frame:e,scaleId:o})=>{const{min:i,max:n}=R(e,o),r=Math.floor(e.chartAreaCanvasPX.width/s)+1,u=(n-i)/r,[l,d]=_t.find(f=>V(f)>=u)??[1,"milliseconds"],m=It(i,[l,d],t),p=H(m,t),h=[m];let c;for(;;){switch(d){case"milliseconds":case"seconds":case"minutes":case"hours":{c=z(m,[h.length*l,d]);break}case"days":{const f=z(m,[h.length*l,d]);c=z(f,[p-H(f,t),"hours"]);break}case"months":case"years":{const f=z(z(z(m,[p,"hours"]),[h.length*l,d]),[-p,"hours"]);c=z(f,[p-H(f,t),"hours"]);break}}if(c>n)break;h.push(c)}return h},I=(t,s,e)=>t.find(o=>o.type===e)?.value!==s.find(o=>o.type===e)?.value,Ft=({timeZone:t=vt,locale:s=Et,showTimezone:e=!0})=>{const o=new Intl.DateTimeFormat(s,{year:"numeric",day:"numeric",month:"short",hour:"numeric",hourCycle:"h23",minute:"numeric",second:"numeric",fractionalSecondDigits:3,timeZoneName:"short",timeZone:t});return({ticks:i})=>{const n=i[1]-i[0],r=n<V([1,"days"]),a=n<V([1,"minutes"]),u=n<V([1,"seconds"]);return i.map(l=>o.formatToParts(new Date(l))).map((l,d,m)=>{const p=m[d-1],h=d===0||I(l,p,"year"),c=d===0||I(l,p,"day"),f=d===0||I(l,p,"month"),y=d===0||I(l,p,"hour"),x=d===0||I(l,p,"timeZoneName"),T=d===0||I(l,p,"minute"),g=d===0||I(l,p,"second"),v=d===0||I(l,p,"fractionalSecond"),E=[];if(r&&(y||T||x||g||v)){const C=l.find(_=>_.type==="hour")?.value,P=l.find(_=>_.type==="minute")?.value,M=l.find(_=>_.type==="timeZoneName")?.value;let X="";if(a){const _=l.find(F=>F.type==="second")?.value,$=l.find(F=>F.type==="fractionalSecond")?.value;X=`:${_}`+(u?`.${$}`:"")}E.push(`${C}:${P}${X}`+(e&&x?` ${M}`:""))}return(c||f)&&E.push([l.find(C=>C.type==="month")?.value,c&&l.find(C=>C.type==="day")?.value].filter(Boolean).join(" ")),h&&E.push(l.find(C=>C.type==="year")?.value),E.filter(C=>C).join(`
+`)})}},Z=[];for(let t=-12;t<=12;t++)Z.push(1*10**t),Z.push(2*10**t),Z.push(5*10**t);const Yt=t=>{const{ctx:s,scales:e}=t;s.save(),s.strokeStyle="black",s.fillStyle="black",s.lineWidth=1,s.font="12px Arial",s.textAlign="center",s.textBaseline="middle";for(const o of e){if(!o.axis)continue;const i=o.type==="time"?zt({space:o.axis.tickSpace,timeZone:o.timeZone}):jt({space:o.axis.tickSpace}),n=o.type==="time"?Ft({timeZone:o.timeZone,showTimezone:o.axis.showTimezone,locale:o.locale}):Ot,r=o.axis.canvasRect;if(o.origin==="x"){if(o.axis.position==="bottom")s.beginPath(),s.moveTo(r.x,r.y),s.lineTo(r.x+r.width,r.y),s.stroke(),mt(t,o.id,r.y,i,n);else if(o.axis.position==="top"){const a=r.y+r.height;s.beginPath(),s.moveTo(r.x,a),s.lineTo(r.x+r.width,a),s.stroke(),mt(t,o.id,a,i,n)}}else if(o.axis.position==="left"){const a=r.x+r.width;s.beginPath(),s.moveTo(a,r.y),s.lineTo(a,r.y+r.height),s.stroke(),pt(t,o.id,a,i,n)}else o.axis.position==="right"&&(s.beginPath(),s.moveTo(r.x,r.y),s.lineTo(r.x,r.y+r.height),s.stroke(),pt(t,o.id,r.x,i,n))}s.restore()},pt=(t,s,e,o,i)=>{const{ctx:n}=t,r=t.scales.find(c=>c.id===s)?.axis;if(!r)return;const a=window.devicePixelRatio||1,u=xt,l=e,d=r.position==="left"?e-u:e+u,m=St*a,p=o({frame:t,scaleId:s})??[],h=i({frame:t,scaleId:s,ticks:p});n.save(),n.fontKerning="auto",U(n,{}),n.beginPath();for(let c=0;c<p.length;c++){const f=D(t,p[c],s,"canvas");n.moveTo(l,f),n.lineTo(d,f)}n.stroke(),n.restore(),n.save(),U(n,{textBaseline:"middle",textAlign:r.position==="left"?"right":"left"});for(let c=0;c<p.length;c++){const f=D(t,p[c],s,"canvas"),y=h[c].split(`
+`);for(let x=0;x<y.length;x++)n.fillText(` ${y[x]} `,d,f+x*m)}n.restore()},mt=(t,s,e,o,i)=>{const{ctx:n}=t,r=t.scales.find(c=>c.id===s)?.axis;if(!r)return;const a=window.devicePixelRatio||1,u=xt,l=e,d=r.position==="top"?e-u:e+u,m=St*a,p=o({frame:t,scaleId:s})??[],h=i({frame:t,scaleId:s,ticks:p});n.save(),n.fontKerning="auto",U(n,{}),n.beginPath();for(let c=0;c<p.length;c++){const f=D(t,p[c],s,"canvas");n.moveTo(f,l),n.lineTo(f,d)}n.stroke(),n.restore(),n.save(),U(n,{textBaseline:r.position==="top"?"bottom":"top",textAlign:"center"});for(let c=0;c<p.length;c++){const f=D(t,p[c],s,"canvas"),y=h[c].split(`
+`);for(let x=0;x<y.length;x++)n.fillText(y[x],f,d+a*2+x*m)}n.restore()},jt=({space:t}={})=>({frame:s,scaleId:e})=>{const{min:o,max:i}=R(s,e),n=[],r=window.devicePixelRatio||1,a=(t??(B(s,e)?gt:kt))*r,u=wt(s,a,e,"canvas"),l=Z.find(m=>m>u)??1;let d=o%l<Number.EPSILON?o:o+l-o%l;for(;d<=i;)n.push(d),d+=l;return n},Ot=({ticks:t})=>{const s=Math.max(0,Math.ceil(-Math.log10(t[1]-t[0])));return t.map(e=>e.toFixed(s))},Bt=()=>ct.createStore((t,s)=>{const e=()=>{const o=s()._frame;if(!o)throw new Error("No frame set in frame store");return o};return{_frame:null,getFrame:e,getCtx:()=>e().ctx,clampXPosToChartArea:(o,i)=>Y(e(),o,i??"canvas"),clampYPosToChartArea:(o,i)=>j(e(),o,i??"canvas"),valToPos:(o,i,n)=>D(e(),o,i,n??"canvas"),valToPxDistance:(o,i,n)=>J(e(),o,i,n??"canvas"),valFits:(o,i)=>G(e(),o,i),getScale:o=>R(e(),o)}}),at=S.createContext(null),N=(t,s)=>{const e=S.useContext(at);if(!e)throw new Error("useFrame must be used within a CanPlot component");const o=S.useRef(t);o.current=t,S.useLayoutEffect(()=>{o.current(e.getState()),e.subscribe(i=>{i._frame&&o.current(i)})},[e,...s])},lt=t=>{const s=S.useContext(at);if(!s)throw new Error("useFrame must be used within a CanPlot component");return ct.useStore(s,t??(e=>e.getFrame()))};function $t(t){return s=>{for(const e of t)it(e,s)}}function Nt(t){return s=>{const e=[];for(const o of t){const i=it(o,s),n=typeof i=="function";e.push(n?i:()=>it(o,null))}return()=>{for(const o of e)o()}}}function it(t,s){if(typeof t=="function")return t(s);t&&(t.current=s)}var Vt=parseInt(S.version.split(".")[0],10)>=19?Nt:$t;const Ht=S.forwardRef(({configuration:t,children:s,style:e,className:o},i)=>{const n=S.useRef(null),r=S.useRef(null),a=Wt(r),u=S.useMemo(Bt,[]);S.useLayoutEffect(()=>{u.setState({_frame:Gt(t,a,n.current)})},[t,a,n,u]),S.useLayoutEffect(()=>u.subscribe(d=>{d._frame&&qt(d._frame)}),[u]);const l=window.devicePixelRatio||1;return A.jsxs("div",{ref:Vt([i,r]),className:o,style:{position:"relative",overflow:"hidden",...e},"data-canplotroot":!0,children:[A.jsx("canvas",{ref:n,width:a.width*l,height:a.height*l,style:{inset:0,position:"absolute",width:`${a.width}px`,height:`${a.height}px`}}),A.jsx(Zt,{frameStore:u,children:s})]})}),Zt=({frameStore:t,children:s})=>ct.useStore(t,o=>!!o._frame)?A.jsx(at.Provider,{value:t,children:s}):null,Wt=t=>{const[s,e]=S.useState({width:0,height:0}),[o]=S.useState(()=>new ResizeObserver(i=>{for(const n of i){const r=Math.round(n.contentRect.width),a=Math.round(n.contentRect.height);e(u=>u.width!==r||u.height!==a?{...u,width:r,height:a}:u)}}));return S.useLayoutEffect(()=>{if(!t.current)return;const i=t.current.clientWidth,n=t.current.clientHeight;return e(r=>r.width!==i||r.height!==n?{...r,width:i,height:n}:r),o.observe(t.current,{box:"border-box"}),()=>o.disconnect()},[o,t]),s},Gt=(t,s,e)=>{const o=e?.getContext("2d");if(!o)return null;const i=window.devicePixelRatio||1;if(s.width===0||s.height===0)return null;const n={x:t.padding.left,y:t.padding.top,width:s.width-t.padding.left-t.padding.right,height:s.height-t.padding.top-t.padding.bottom};for(const h of t.scales)h.axis&&(h.origin==="x"?(h.axis.position==="bottom"||h.axis.position==="top")&&(n.height=Math.max(0,n.height-h.axis.size),h.axis.position==="top"&&(n.y+=h.axis.size)):(h.axis.position==="left"||h.axis.position==="right")&&(n.width=Math.max(0,n.width-h.axis.size),h.axis.position==="left"&&(n.x+=h.axis.size)));const r={x:n.x*i,y:n.y*i,width:n.width*i,height:n.height*i},a=[];let u=t.padding.left*i,l=o.canvas.width-t.padding.right*i,d=o.canvas.height-t.padding.bottom*i,m=t.padding.top*i;for(const h of t.scales){if(!h.axis){a.push({...h,axis:null});continue}let c;if(h.origin==="x")switch(h.axis.position){case"bottom":d-=h.axis.size*i,c={x:n.x,y:d/i,width:n.width,height:h.axis.size};break;case"top":m+=h.axis.size*i,c={x:n.x,y:m/i-h.axis.size,width:n.width,height:h.axis.size};break;case"left":case"right":throw new Error("Invalid axis position for x origin")}else switch(h.axis.position){case"left":u+=h.axis.size*i,c={x:u/i-h.axis.size,y:n.y,width:h.axis.size,height:n.height};break;case"right":l-=h.axis.size*i,c={x:l/i,y:n.y,width:h.axis.size,height:n.height};break;case"top":case"bottom":throw new Error("Invalid axis position for y origin")}const f={x:c.x*i,y:c.y*i,width:c.width*i,height:c.height*i};a.push({...h,axis:{...h.axis,cssRect:c,canvasRect:f}})}return{ctx:o,dpr:i,padding:t.padding,scales:a,chartAreaCSS:n,chartAreaCanvasPX:r}},qt=t=>{t.ctx.clearRect(0,0,t.ctx.canvas.width,t.ctx.canvas.height),Yt(t)},Jt=({data:t,xScaleId:s,yScaleId:e,style:o})=>(N(({getCtx:i,clampXPosToChartArea:n,clampYPosToChartArea:r,valToPos:a})=>{const u=i();u.save(),u.beginPath(),U(u,o);for(const l of t){const d=n(a(l.x,s)),m=r(a(l.y,e));u.lineTo(d,m)}u.stroke(),u.restore()},[t,s,e,o]),null),Qt=({data:t,xScaleId:s,yScaleId:e,radius:o=5,style:i})=>(N(({getCtx:n,valToPos:r,valFits:a})=>{const u=n();u.save(),u.beginPath(),U(u,i);for(const l of t){if(!a(l.x,s)||!a(l.y,e))continue;const d=r(l.x,s),m=r(l.y,e);u.moveTo(d+o,m),u.arc(d,m,o,0,Math.PI*2)}u.stroke(),u.fill(),u.restore()},[t,s,e,o,i]),null),te=({data:t,xScaleId:s,yScaleId:e,style:o,barWidth:i,xPositionOffset:n,radius:r})=>(N(({getCtx:a,valToPxDistance:u,valToPos:l,clampXPosToChartArea:d,clampYPosToChartArea:m})=>{if(t.length===0)return;const p=a();p.save(),U(p,o);const h=u(i,s);p.beginPath();for(const c of t){const y=l(c.x,s)-h/2+n*h,x=m(l(0,e)),T=m(l(c.y,e)),g=x-T,v=d(y),E=d(y+h)-v;r?p.roundRect(v,T,E,g,r):p.rect(v,T,E,g)}p.closePath(),p.fill(),o?.strokeStyle&&p.stroke(),p.restore()},[t,s,e,o,i,n,r]),null),ee=({data:t,xScaleId:s,yScaleId:e,style:o})=>(N(({getCtx:i,clampXPosToChartArea:n,clampYPosToChartArea:r,valToPos:a})=>{const u=[];for(const d of t){const m=n(a(d.x,s)),p=r(a(d.y[0],e)),h=r(a(d.y[1],e));u.push({x:m,y:p}),u.unshift({x:m,y:h})}const l=i();if(u.length>0){l.save(),l.beginPath(),U(l,o),l.moveTo(u[0].x,u[0].y);for(const d of u)l.lineTo(d.x,d.y);l.closePath(),l.fill(),l.restore()}},[t,s,e,o]),null),se=({data:t,stroked:s,xScaleId:e,yScaleId:o,style:i})=>(N(({getCtx:n,clampXPosToChartArea:r,clampYPosToChartArea:a,valToPos:u})=>{const l=[],d=n();for(const c of t){const f=r(u(c.x,e)),y=a(u(c.y,o));l.push({x:f,y})}const m=l.at(0),p=l.at(-1);if(!m||!p)return;const h=a(u(0,o));d.save(),d.beginPath(),U(d,i),d.moveTo(m.x,h);for(const c of l)d.lineTo(c.x,c.y);if(d.lineTo(p.x,h),d.closePath(),d.fill(),s){d.beginPath(),d.moveTo(m.x,m.y);for(const c of l)d.lineTo(c.x,c.y);d.stroke()}d.restore()},[t,s,e,o,i]),null),ne=(t,s)=>lt(({clampXPosToChartArea:e,clampYPosToChartArea:o,getScale:i,valToPos:n,valFits:r})=>{const a={};for(const u in t){const l=t[u];switch(l.exceeding){case"discard":{if(r(l.value,l.scaleId)){const d=n(l.value,l.scaleId,s);a[u]=d}break}case"clamp":{const d=n(l.value,l.scaleId,s);a[u]=i(l.scaleId)?.origin==="x"?e(d,s):o(d,s);break}}}return a}),b=()=>{const t=[];return{addEventListener:(s,e)=>(t.push({syncKey:s,callback:e}),()=>{const o=t.findIndex(i=>i.callback===e);o!==-1&&t.splice(o,1)}),dispatchEvent:(s,e)=>{for(const o of t)o.syncKey===s&&o.callback(s,e)}}},w={dblclick:b(),click:b(),move:b(),mousedown:b(),mouseup:b(),spanselect:b(),documentmouseup:b(),pressandwheel:b(),sync_dblclick:b(),sync_click:b(),sync_move:b(),sync_mousedown:b(),sync_mouseup:b(),sync_spanselect:b(),sync_pressandwheel:b()},k=(t,s,e)=>{const o=S.useRef(e);o.current=e,S.useEffect(()=>w[t].addEventListener(s,(n,r)=>{o.current(r,n)}),[s,t,o])},ut=S.createContext(""),dt=(t,s)=>{const e=S.useContext(ut);return k(t,e,s)},oe=(t,s,e,o,i)=>{if(!s)return;const n=o??e.scales.find(m=>m.origin==="x")?.id,r=i??e.scales.find(m=>m.origin==="y")?.id;if(!n||!r)return;const a=t.clientX-s.left,u={scaleId:n,value:L(e,a,n,"css")},l=t.clientY-s.top,d={scaleId:r,value:L(e,l,r,"css")};return{pointerSyncPosition:{x:u,y:d},cssX:a,cssY:l}},O=(t,s)=>{const e=t.x?D(s,t.x.value,t.x.scaleId,"css"):0,o=t.y?D(s,t.y.value,t.y.scaleId,"css"):0;return{cssX:e,cssY:o,scaled:Object.fromEntries(s.scales.map(i=>{const n=i.origin==="y"?o:e;return[i.id,L(s,n,i.id,"css")]}))}},yt=(t,s,e)=>{if(!s){const r=t==="x"?e.chartAreaCSS.x:e.chartAreaCSS.y,a=t==="x"?e.chartAreaCSS.x+e.chartAreaCSS.width:e.chartAreaCSS.y+e.chartAreaCSS.height;return{fromCSS:r,toCSS:a,scaled:e.scales.flatMap(u=>{if(u.origin!==t)return[];const{min:l,max:d}=R(e,u.id);return[{scaleId:u.id,from:l,to:d}]})}}const o=D(e,s.from,s.scaleId,"css"),i=D(e,s.to,s.scaleId,"css"),n=e.scales.flatMap(r=>{if(r.origin!==t)return[];const a=L(e,o,r.id,"css"),u=L(e,i,r.id,"css");return[{scaleId:r.id,from:a,to:u}]});return{fromCSS:o,toCSS:i,scaled:n}},ie=({id:t,onClick:s,onDblClick:e,onMouseMove:o,onMouseDown:i,onMouseUp:n,onDocumentMouseUp:r,onSpanSelect:a,className:u,style:l,sync:d,children:m})=>{const p=S.useId(),h=t||p;return k("dblclick",h,c=>{e?.(c)}),k("click",h,c=>{s?.(c)}),k("move",h,c=>{o?.(c)}),k("mousedown",h,c=>{i?.(c)}),k("mouseup",h,c=>{n?.(c)}),k("documentmouseup",h,c=>{r?.(c)}),k("spanselect",h,c=>{a?.(c)}),A.jsxs(ut.Provider,{value:h,children:[A.jsx(ce,{className:u,style:l,sync:d}),m]})},ce=({className:t,style:s,sync:e})=>{const o=S.useRef(null),i=lt(),n=S.useRef(i);n.current=i;const r=S.useContext(ut),a=e?.key||r,u=S.useRef(null),l=S.useRef(null),d=S.useRef(null),m=()=>{const c=o.current?.parentElement;if(c){if(c.dataset.canplotroot===void 0)throw new Error("ChartAreaInteractions must be used within a CanPlot component");return c.getBoundingClientRect()}},p=(c,f)=>{const y=oe(c,m(),n.current,e?.xViaScaleId,e?.yViaScaleId);y&&f(y.pointerSyncPosition,{cssX:y.cssX,cssY:y.cssY},{ctrlKey:c.ctrlKey,altKey:c.altKey,shiftKey:c.shiftKey,metaKey:c.metaKey})},h=S.useRef(p);return h.current=p,S.useEffect(()=>{const c=g=>{const v=l.current;v&&w.sync_spanselect.dispatchEvent(a,{...v,completed:!0}),w.documentmouseup.dispatchEvent(a,{frame:n.current,keys:{ctrlKey:g.ctrlKey,altKey:g.altKey,shiftKey:g.shiftKey,metaKey:g.metaKey}})},f=g=>{const v={ctrlKey:g.ctrlKey,altKey:g.altKey,shiftKey:g.shiftKey,metaKey:g.metaKey},E=d.current;if(E&&Object.entries(v).some(([P,M])=>E.keys[P]!==M)){const P={...E,keys:v};d.current=P,w.sync_move.dispatchEvent(a,P)}const C=l.current;if(C&&Object.entries(v).some(([P,M])=>C.keys[P]!==M)){g.stopPropagation(),g.preventDefault();const P={...C,keys:v};l.current=P,w.sync_spanselect.dispatchEvent(a,P)}},y=g=>{h.current(g,(v,{cssX:E,cssY:C},P)=>{const M=u.current;if(!M||!v.x||!v.y)return;const X=n.current,_=M.xRangeCss.start,$=E,F=M.yRangeCss.start,tt=C,et=R(X,v.x.scaleId),st=R(X,v.y.scaleId);u.current={xRangeCss:{start:_,end:$},yRangeCss:{start:F,end:tt}};let K="none";const nt=Math.abs(F-tt),ot=Math.abs(_-$);nt<10&&ot<10?K="none":nt>30&&ot>30?K="box":nt>ot?K="y":K="x";const Tt=K==="x"||K==="box"?{scaleId:et.id,from:L(X,Y(n.current,_,"css"),et.id,"css"),to:L(X,Y(n.current,$,"css"),et.id,"css")}:void 0,bt=K==="y"||K==="box"?{scaleId:st.id,from:L(X,j(n.current,F,"css"),st.id,"css"),to:L(X,j(n.current,tt,"css"),st.id,"css")}:void 0,ht={mode:K,xRange:Tt,yRange:bt,completed:!1,keys:P};l.current=ht,w.sync_spanselect.dispatchEvent(a,ht)})},x=g=>{h.current(g,(v,E,C)=>{if(Object.values(C).some(M=>M)){g.preventDefault();const M=Math.abs(g.deltaY)>Math.abs(g.deltaX)?g.deltaY:g.deltaX;w.sync_pressandwheel.dispatchEvent(a,{positions:v,keys:C,deltaX:g.deltaX,deltaY:g.deltaY,deltaAbs:M})}})};document.addEventListener("mouseup",c),document.addEventListener("keydown",f),document.addEventListener("keyup",f),document.addEventListener("mousemove",y);const T=o.current;return T?.addEventListener("wheel",x,{passive:!1}),()=>{document.removeEventListener("mouseup",c),document.removeEventListener("keydown",f),document.removeEventListener("keyup",f),document.removeEventListener("mousemove",y),T?.removeEventListener("wheel",x)}},[n,a,h]),k("sync_dblclick",a,c=>{const f=O(c.positions,n.current);f&&w.dblclick.dispatchEvent(r,{frame:n.current,pointer:f,keys:c.keys})}),k("sync_click",a,c=>{const f=O(c.positions,n.current);f&&w.click.dispatchEvent(r,{frame:n.current,pointer:f,keys:c.keys})}),k("sync_move",a,c=>{const f=c.positions?O(c.positions,n.current):null;d.current=c,w.move.dispatchEvent(r,{frame:n.current,pointer:f??null,keys:c.keys})}),k("sync_mousedown",a,c=>{const f=O(c.positions,n.current);f&&w.mousedown.dispatchEvent(r,{frame:n.current,pointer:f,keys:c.keys})}),k("sync_mouseup",a,c=>{const f=O(c.positions,n.current);f&&w.mouseup.dispatchEvent(r,{frame:n.current,pointer:f,keys:c.keys})}),k("sync_pressandwheel",a,c=>{const f=O(c.positions,n.current);f&&w.pressandwheel.dispatchEvent(r,{frame:n.current,pointer:f,keys:c.keys,deltaX:c.deltaX,deltaY:c.deltaY,deltaAbs:c.deltaAbs})}),k("sync_spanselect",a,c=>{const f=yt("x",c.xRange,n.current),y=yt("y",c.yRange,n.current),x=f.scaled,T=y.scaled;c.completed&&(u.current=null),w.spanselect.dispatchEvent(r,{mode:c.mode,frame:n.current,xRanges:x,yRanges:T,completed:c.completed,x:{fromCSS:f.fromCSS,toCSS:f.toCSS},y:{fromCSS:y.fromCSS,toCSS:y.toCSS},keys:c.keys})}),A.jsx("div",{ref:o,id:"interactions",className:t,style:{position:"absolute",left:i.chartAreaCSS.x,top:i.chartAreaCSS.y,width:i.chartAreaCSS.width,height:i.chartAreaCSS.height,zIndex:25,...s},onClick:c=>{p(c,(f,y,x)=>{w.sync_click.dispatchEvent(a,{positions:f,keys:x})})},onMouseLeave:c=>{p(c,(f,y,x)=>{w.sync_move.dispatchEvent(a,{positions:null,keys:x})})},onMouseMove:c=>{p(c,(f,y,x)=>{w.sync_move.dispatchEvent(a,{positions:f,keys:x})})},onMouseDown:c=>{p(c,(f,{cssX:y,cssY:x},T)=>{w.sync_mousedown.dispatchEvent(a,{positions:f,keys:T}),l.current=null,u.current={xRangeCss:{start:y,end:y},yRangeCss:{start:x,end:x}}})},onMouseUp:c=>{p(c,(f,y,x)=>{w.sync_mouseup.dispatchEvent(a,{positions:f,keys:x});const T=l.current;l.current=null;const g=u.current;if(u.current=null,g&&T){const v={...T,keys:x,completed:!0};w.sync_spanselect.dispatchEvent(a,v)}})},onDoubleClick:c=>{p(c,(f,y,x)=>{w.sync_dblclick.dispatchEvent(a,{positions:f,keys:x})})}})},re=({data:t,renderTooltip:s,xScaleId:e})=>{const[o,i]=S.useState(null);dt("move",r=>{i(r)});const n=S.useMemo(()=>{if(!o)return null;const{frame:r,pointer:a}=o,u=a?.scaled[e];if(u===void 0)return null;const l=[];let d=u;for(const m of t){let p=null,h=1/0;for(const[f,y]of m.points.entries()){if(!G(r,y.x,e)||!G(r,y.y,m.yScaleId))continue;const x=Math.abs(y.x-u);x<h&&(h=x,p=f)}const c=m.points[p??-1];if(!c||J(r,h,e,"css")>30){l.push({seriesId:m.seriesId,y:null});continue}d=c.x,l.push({seriesId:m.seriesId,y:c.y})}return{frame:r,x:d,points:l}},[t,o,e]);return s(n)},ae=({makeXStyle:t,makeXClassName:s,makeYStyle:e,makeYClassName:o})=>{const[i,n]=S.useState(null);if(dt("move",d=>{n(d)}),!i)return null;const{frame:r,pointer:a}=i,u=Y(r,a?.cssX??0,"css"),l=j(r,a?.cssY??0,"css");return A.jsxs(A.Fragment,{children:[A.jsx("div",{"data-show":!!a,className:s?.(i),style:{position:"absolute",left:0,top:r.chartAreaCSS.y,height:r.chartAreaCSS.height,borderColor:"red",borderLeftWidth:"1px",borderLeftStyle:"solid",pointerEvents:"none",opacity:a?1:0,transform:`translateX(${u}px)`,...t?.(i)}}),A.jsx("div",{className:o?.(i),"data-show":!!a,style:{position:"absolute",top:0,height:0,borderTop:"solid 1px red",left:r.chartAreaCSS.x,width:r.chartAreaCSS.width,pointerEvents:"none",opacity:a?1:0,transform:`translateY(${l}px)`,...e?.(i)}})]})},le=({makeClassName:t,makeStyle:s})=>{const[e,o]=S.useState(null);if(dt("spanselect",p=>{o(p.mode==="none"||p.completed?null:p)}),!e)return null;const i=Y(e.frame,e.x.fromCSS,"css"),n=Y(e.frame,e.x.toCSS,"css"),r=j(e.frame,e.y.fromCSS,"css"),a=j(e.frame,e.y.toCSS,"css"),u=Math.min(i,n),l=Math.min(r,a),d=Math.abs(n-i),m=Math.abs(a-r);return A.jsx("div",{className:t?.(e),style:{position:"absolute",backgroundColor:"#0000ff22",left:`${u}px`,top:`${l}px`,width:`${d}px`,height:`${m}px`,pointerEvents:"none",...s?.(e)}})},ue=({style:t,children:s,scaleId:e,...o})=>{const i=lt(n=>n.getScale(e)?.axis);return i?A.jsx("div",{style:{position:"absolute",backgroundColor:"#0000ff11",left:i.cssRect.x,top:i.cssRect.y,height:i.cssRect.height,width:i.cssRect.width,...t},...o,children:s}):null};exports.AreaPlot=ee;exports.AxisOverlay=ue;exports.BarPlot=te;exports.CanPlot=Ht;exports.ChartAreaInteractions=ie;exports.Crosshair=ae;exports.LinePlot=Jt;exports.ScatterPlot=Qt;exports.SelectBox=le;exports.SparklinePlot=se;exports.TooltipsX=re;exports.applyStyles=U;exports.clampXPosToChartArea=Y;exports.clampYPosToChartArea=j;exports.getScale=R;exports.isXScale=B;exports.isYScale=Pt;exports.posToVal=L;exports.pxToValDistance=wt;exports.usePositioned=ne;exports.valFits=G;exports.valToPos=D;exports.valToPxDistance=J;
 //# sourceMappingURL=canplot.cjs.map