@canplot/react 0.1.20 → 0.1.22

package/dist/canplot.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),v=require("react"),ee=require("zustand"),B=(e,s,t)=>Math.min(Math.max(e,s),t),ke=e=>e.reduce((s,t)=>s+(t??0),0),Re=(e,s)=>{let t=0;for(let n=0;n<e.length;n++)Math.abs(e[n]-s)<Math.abs(e[t]-s)&&(t=n);return t},ge=(e,s,t,n)=>{const{min:o,max:i,origin:r}=I(e,t),d=n==="canvas"?e.chartAreaCanvasPX:e.chartAreaCSS,l=(r==="x"?d.width:d.height)/(i-o);return s/l},I=(e,s)=>{const t=e.scales.find(n=>n.id===s);if(!t)throw new Error(`Scale ${s} not found`);return t},A=(e,s)=>{const t=window.devicePixelRatio||1;e.lineCap=s?.lineCap??"butt",e.lineDashOffset=t*(s?.lineDashOffset??0),e.lineJoin=s?.lineJoin??"miter",e.lineWidth=t*(s?.lineWidth??1),e.miterLimit=t*(s?.miterLimit??10),e.strokeStyle=s?.strokeStyle??"black",e.fillStyle=s?.fillStyle??e.strokeStyle,e.font=s?.font??`${10*t}px sans-serif`,e.textAlign=s?.textAlign??"start",e.direction=s?.direction??"inherit",e.textBaseline=s?.textBaseline??"alphabetic",e.fontKerning=s?.fontKerning??"auto"},te=(e,s,t,n)=>{const o=n==="canvas"?e.chartAreaCanvasPX:e.chartAreaCSS,{min:i,max:r,origin:d}=I(e,t),l=(d==="x"?o.width:o.height)/(r-i);return s*l},j=(e,s,t,n)=>{const{min:o,origin:i}=I(e,t),r=n==="canvas"?e.chartAreaCanvasPX:e.chartAreaCSS,d=te(e,s-o,t,n);return i==="x"?B(r.x+d,r.x-10*r.width,r.x+11*r.width):B(r.y+r.height-d,r.y-10*r.height,r.y+11*r.height)},Ae=(e,s,t)=>{const{min:n,max:o}=I(e,t);return B(s,n,o)},Y=(e,s,t)=>{const n=t==="canvas"?e.chartAreaCanvasPX:e.chartAreaCSS;return B(s,n.x,n.x+n.width)},z=(e,s,t)=>{const n=t==="canvas"?e.chartAreaCanvasPX:e.chartAreaCSS;return B(s,n.y,n.y+n.height)},Z=(e,s,t)=>{const{min:n,max:o}=I(e,t);return s>=n&&s<=o},_=(e,s,t,n)=>{const{min:o,max:i,origin:r}=I(e,t),d=n==="canvas"?e.chartAreaCanvasPX:e.chartAreaCSS,l=r==="x"?(s-d.x)/d.width:(d.height-s+d.y)/d.height;return o+l*(i-o)},Le=e=>{const{ctx:s,scales:t}=e;for(const n of t){if(!n.axis)continue;s.save(),A(s,{strokeStyle:"black",fillStyle:"black",lineWidth:1,...n.axis.style});const o=n.axis.canvasRect;if(n.origin==="x"){if(n.axis.position==="bottom")s.beginPath(),s.moveTo(o.x,o.y),s.lineTo(o.x+o.width,o.y),s.stroke();else if(n.axis.position==="top"){const i=o.y+o.height;s.beginPath(),s.moveTo(o.x,i),s.lineTo(o.x+o.width,i),s.stroke()}}else if(n.axis.position==="left"){const i=o.x+o.width;s.beginPath(),s.moveTo(i,o.y),s.lineTo(i,o.y+o.height),s.stroke()}else n.axis.position==="right"&&(s.beginPath(),s.moveTo(o.x,o.y),s.lineTo(o.x,o.y+o.height),s.stroke());s.restore()}},J={TOP:300,MIDDLE:200,BOTTOM:200,BACKGROUND:100},De=()=>ee.createStore((e,s)=>{const t=()=>{const n=s()._frame;if(!n)throw new Error("No frame set in frame store");return n};return{_frame:null,getFrame:t,getCtx:()=>t().ctx,clampXPosToChartArea:(n,o)=>Y(t(),n,o??"canvas"),clampYPosToChartArea:(n,o)=>z(t(),n,o??"canvas"),valToPos:(n,o,i)=>j(t(),n,o,i??"canvas"),valToPxDistance:(n,o,i)=>te(t(),n,o,i??"canvas"),valFits:(n,o)=>Z(t(),n,o),getScale:n=>I(t(),n),_listeners:[],_subscribe:(n,o)=>(s()._listeners.push([o,n]),s()._listeners.sort((i,r)=>i[0]-r[0]),()=>{const i=s()._listeners.findIndex(([,r])=>r===n);i!==-1&&s()._listeners.splice(i,1)}),_notifyListeners:n=>{for(const[,o]of s()._listeners)o(n)}}}),_e=()=>ee.createStore(e=>({notify:()=>{e(s=>({version:s.version+1}))},version:0})),de=v.createContext(null),Se=v.createContext(null),O=(e,s,t)=>{const n=v.useContext(de),o=v.useContext(Se);if(!n||!o)throw new Error("useFrame must be used within a CanPlot component");const i=v.useRef(s);i.current=s,v.useLayoutEffect(()=>(Promise.resolve().then(()=>{i.current(n.getState())}),n.getState()._subscribe(r=>{r._frame&&i.current(r)},typeof e=="number"?e:J[e])),[n,e]),v.useEffect(()=>{o.getState().notify()},[o,...t])},se=e=>{const s=v.useContext(de);if(!s)throw new Error("useFrame must be used within a CanPlot component");return ee.useStore(s,e??(t=>t.getFrame()))};function Ie(e){return s=>{for(const t of e)ue(t,s)}}function Ue(e){return s=>{const t=[];for(const n of e){const o=ue(n,s),i=typeof o=="function";t.push(i?o:()=>ue(n,null))}return()=>{for(const n of t)n()}}}function ue(e,s){if(typeof e=="function")return e(s);e&&(e.current=s)}var Xe=parseInt(v.version.split(".")[0],10)>=19?Ue:Ie;const Oe=v.forwardRef(({configuration:e,children:s,style:t,className:n},o)=>{const i=v.useRef(null),r=v.useRef(null),d=Ke(r),l=v.useMemo(De,[]),c=v.useMemo(_e,[]);v.useLayoutEffect(()=>{l.setState({_frame:Ye(e,d,i.current)});const m=l.getState();m._notifyListeners(m)},[e,d,i,l]),v.useLayoutEffect(()=>l.getState()._subscribe(m=>{const h=m._frame?.ctx;h&&h.clearRect(0,0,h.canvas.width,h.canvas.height)},J.BACKGROUND),[l]),v.useLayoutEffect(()=>l.getState()._subscribe(m=>{m._frame&&Le(m._frame)},J.BOTTOM),[l]),v.useLayoutEffect(()=>{let m=!1;return c.subscribe(()=>{m||(m=!0,window.requestAnimationFrame(()=>{m=!1,l.setState(f=>({_frame:f._frame?{...f._frame}:null}));const h=l.getState();h._notifyListeners(h)}))})},[c,l]);const a=window.devicePixelRatio||1;return M.jsxs("div",{ref:Xe([o,r]),className:n,style:{position:"relative",overflow:"hidden",...t},"data-canplotroot":!0,children:[M.jsx("canvas",{ref:i,width:d.width*a,height:d.height*a,style:{inset:0,position:"absolute",width:`${d.width}px`,height:`${d.height}px`}}),M.jsx(Fe,{frameStore:l,updateRequestStore:c,children:s})]})}),Fe=({frameStore:e,updateRequestStore:s,children:t})=>ee.useStore(e,o=>!!o._frame)?M.jsx(Se.Provider,{value:s,children:M.jsx(de.Provider,{value:e,children:t})}):null,Ke=e=>{const[s,t]=v.useState({width:0,height:0}),[n]=v.useState(()=>new ResizeObserver(o=>{for(const i of o){const r=Math.round(i.contentRect.width),d=Math.round(i.contentRect.height);t(l=>l.width!==r||l.height!==d?{...l,width:r,height:d}:l)}}));return v.useLayoutEffect(()=>{if(!e.current)return;const o=e.current.clientWidth,i=e.current.clientHeight;return t(r=>r.width!==o||r.height!==i?{...r,width:o,height:i}:r),n.observe(e.current,{box:"border-box"}),()=>n.disconnect()},[n,e]),s},Ye=(e,s,t)=>{const n=t?.getContext("2d");if(!n)return null;const o=window.devicePixelRatio||1;if(s.width===0||s.height===0)return null;const i={x:e.padding.left,y:e.padding.top,width:s.width-e.padding.left-e.padding.right,height:s.height-e.padding.top-e.padding.bottom};for(const f of e.scales)f.axis&&(f.origin==="x"?(f.axis.position==="bottom"||f.axis.position==="top")&&(i.height=Math.max(0,i.height-f.axis.size),f.axis.position==="top"&&(i.y+=f.axis.size)):(f.axis.position==="left"||f.axis.position==="right")&&(i.width=Math.max(0,i.width-f.axis.size),f.axis.position==="left"&&(i.x+=f.axis.size)));const r={x:i.x*o,y:i.y*o,width:i.width*o,height:i.height*o},d=[];let l=e.padding.left*o,c=n.canvas.width-e.padding.right*o,a=n.canvas.height-e.padding.bottom*o,m=e.padding.top*o;for(const f of e.scales){if(!f.axis){d.push({...f,axis:null});continue}let u;if(f.origin==="x")switch(f.axis.position){case"bottom":a-=f.axis.size*o,u={x:i.x,y:a/o,width:i.width,height:f.axis.size};break;case"top":m+=f.axis.size*o,u={x:i.x,y:m/o-f.axis.size,width:i.width,height:f.axis.size};break;case"left":case"right":throw new Error("Invalid axis position for x origin")}else switch(f.axis.position){case"left":l+=f.axis.size*o,u={x:l/o-f.axis.size,y:i.y,width:f.axis.size,height:i.height};break;case"right":c-=f.axis.size*o,u={x:c/o,y:i.y,width:f.axis.size,height:i.height};break;case"top":case"bottom":throw new Error("Invalid axis position for y origin")}const p={x:u.x*o,y:u.y*o,width:u.width*o,height:u.height*o};d.push({...f,axis:{...f.axis,cssRect:u,canvasRect:p}})}return{ctx:n,dpr:o,padding:e.padding,scales:d,chartAreaCSS:i,chartAreaCanvasPX:r}},ze=({data:e,xScaleId:s,yScaleId:t,style:n})=>(O("MIDDLE",({getCtx:o,clampXPosToChartArea:i,clampYPosToChartArea:r,valToPos:d})=>{const l=o();l.save(),l.beginPath(),A(l,n);for(const c of e){const a=i(d(c.x,s)),m=r(d(c.y,t));l.lineTo(a,m)}l.stroke(),l.restore()},[e,s,t,n]),null),Be=({data:e,xScaleId:s,yScaleId:t,radius:n=5,style:o})=>(O("MIDDLE",({getCtx:i,valToPos:r,valFits:d})=>{const l=i();l.save(),l.beginPath(),A(l,o);for(const c of e){if(!d(c.x,s)||!d(c.y,t))continue;const a=r(c.x,s),m=r(c.y,t);l.moveTo(a+n,m),l.arc(a,m,n,0,Math.PI*2)}l.stroke(),l.fill(),l.restore()},[e,s,t,n,o]),null),je=({data:e,xScaleId:s,yScaleId:t,style:n,barWidth:o,xPositionOffset:i,radius:r})=>(O("MIDDLE",({getCtx:d,valToPxDistance:l,valToPos:c,clampXPosToChartArea:a,clampYPosToChartArea:m})=>{if(e.length===0)return;const h=d();h.save(),A(h,n);const f=l(o,s);h.beginPath();for(const u of e){const x=c(u.x,s)-f/2+i*f,g=m(c(0,t)),S=m(c(u.y,t)),y=g-S,b=a(x),T=a(x+f)-b;r?h.roundRect(b,S,T,y,r):h.rect(b,S,T,y)}h.closePath(),h.fill(),n?.strokeStyle&&h.stroke(),h.restore()},[e,s,t,n,o,i,r]),null),Ne=({data:e,xScaleId:s,yScaleId:t,style:n})=>(O("MIDDLE",({getCtx:o,clampXPosToChartArea:i,clampYPosToChartArea:r,valToPos:d})=>{const l=[];for(const a of e){const m=i(d(a.x,s)),h=r(d(a.y[0],t)),f=r(d(a.y[1],t));l.push({x:m,y:h}),l.unshift({x:m,y:f})}const c=o();if(l.length>0){c.save(),c.beginPath(),A(c,n),c.moveTo(l[0].x,l[0].y);for(const a of l)c.lineTo(a.x,a.y);c.closePath(),c.fill(),c.restore()}},[e,s,t,n]),null),$e=({data:e,stroked:s,xScaleId:t,yScaleId:n,style:o})=>(O("MIDDLE",({getCtx:i,clampXPosToChartArea:r,clampYPosToChartArea:d,valToPos:l})=>{const c=[],a=i();for(const u of e){const p=r(l(u.x,t)),x=d(l(u.y,n));c.push({x:p,y:x})}const m=c.at(0),h=c.at(-1);if(!m||!h)return;const f=d(l(0,n));a.save(),a.beginPath(),A(a,o),a.moveTo(m.x,f);for(const u of c)a.lineTo(u.x,u.y);if(a.lineTo(h.x,f),a.closePath(),a.fill(),s){a.beginPath(),a.moveTo(m.x,m.y);for(const u of c)a.lineTo(u.x,u.y);a.stroke()}a.restore()},[e,s,t,n,o]),null),Ve=(e,s)=>se(({clampXPosToChartArea:t,clampYPosToChartArea:n,getScale:o,valToPos:i,valFits:r})=>{const d={};for(const l in e){const c=e[l];switch(c.exceeding){case"discard":{if(r(c.value,c.scaleId)){const a=i(c.value,c.scaleId,s);d[l]=a}break}case"clamp":{const a=i(c.value,c.scaleId,s);d[l]=o(c.scaleId)?.origin==="x"?t(a,s):n(a,s);break}}}return d}),He=({scaleId:e,tickStyle:s,labelStyle:t,labelGap:n,tickSize:o,ticks:i})=>(O("BOTTOM",({getCtx:r,valToPos:d,getScale:l,getFrame:c})=>{const a=r(),m=l(e);if(!m||!m.axis||m.origin!=="x")return;const h=m.axis,f=h.position==="top"?h.canvasRect.y+h.canvasRect.height:h.canvasRect.y,u=window.devicePixelRatio||1,p=f,x=(o??6)*u,g=h.position==="top"?f-x:f+x,S=(n??12)*u;a.save(),a.fontKerning="auto",A(a,{...s}),a.beginPath();const y=Array.isArray(i)?i:i({...m,axis:h},c());for(const{value:b}of y){const T=d(b,e,"canvas");a.moveTo(T,p),a.lineTo(T,g)}a.stroke(),a.restore(),a.save(),A(a,{textBaseline:h.position==="top"?"bottom":"top",textAlign:"center",...s,...t});for(const{value:b,label:T}of y){const C=d(b,e,"canvas"),w=T.split(`
-`);for(let E=0;E<w.length;E++)a.fillText(w[E],C,g+u*2+E*S)}a.restore()},[i,e,s,t]),null),qe=({scaleId:e,tickStyle:s,labelStyle:t,labelGap:n,tickSize:o,ticks:i})=>(O("BOTTOM",({getCtx:r,valToPos:d,getScale:l,getFrame:c})=>{const a=r(),m=l(e);if(!m||!m.axis||m.origin!=="y")return;const h=m.axis,f=h.position==="left"?h.canvasRect.x+h.canvasRect.width:h.canvasRect.x,u=f,p=o??6,x=h.position==="left"?f-p:f+p,g=n??12,S=Array.isArray(i)?i:i({...m,axis:h},c());a.save(),a.fontKerning="auto",A(a,{...s}),a.beginPath();for(const{value:y}of S){const b=d(y,e,"canvas");a.moveTo(u,b),a.lineTo(x,b)}a.stroke(),a.restore(),a.save(),A(a,{textBaseline:"middle",textAlign:h.position==="left"?"right":"left",...s,...t});for(const{value:y,label:b}of S){const T=d(y,e,"canvas"),C=b.split(`
-`);for(let w=0;w<C.length;w++)a.fillText(` ${C[w]} `,x,T+w*g)}a.restore()},[i,e,s,t]),null),L=()=>{const e=[];return{addEventListener:(s,t)=>(e.push({syncKey:s,callback:t}),()=>{const n=e.findIndex(o=>o.callback===t);n!==-1&&e.splice(n,1)}),dispatchEvent:(s,t)=>{for(const n of e)n.syncKey===s&&n.callback(s,t)}}},P={dblclick:L(),click:L(),contextmenu:L(),move:L(),mousedown:L(),mouseup:L(),spanselect:L(),documentmouseup:L(),pressandwheel:L(),sync_move:L()},D=(e,s,t)=>{const n=v.useRef(t);n.current=t,v.useEffect(()=>P[e].addEventListener(s,(i,r)=>{n.current(r,i)}),[s,e,n])},he=v.createContext(""),ne=(e,s)=>{const t=v.useContext(he);return D(e,t,s)},We=(e,s,t,n,o)=>{if(!s)return;const i=n??t.scales.find(m=>m.origin==="x")?.id,r=o??t.scales.find(m=>m.origin==="y")?.id;if(!i||!r)return;const d=e.clientX-s.left,l={scaleId:i,value:_(t,d,i,"css")},c=e.clientY-s.top,a={scaleId:r,value:_(t,c,r,"css")};return{pointerSyncPosition:{x:l,y:a},cssX:d,cssY:c}},K=(e,s)=>{const{x:t,y:n}=e,o=t&&s.scales.some(r=>r.id===t.scaleId)?j(s,t.value,t.scaleId,"css"):null,i=n&&s.scales.some(r=>r.id===n.scaleId)?j(s,n.value,n.scaleId,"css"):null;return{cssX:o,cssY:i,scaled:Object.fromEntries(s.scales.flatMap(r=>{const d=r.origin==="y"?i:o;return d===null?[]:[[r.id,_(s,d,r.id,"css")]]}))}},ye=(e,s,t)=>{const n=j(t,s.from,s.scaleId,"css"),o=j(t,s.to,s.scaleId,"css"),i=t.scales.flatMap(r=>{if(r.origin!==e)return[];const d=_(t,n,r.id,"css"),l=_(t,o,r.id,"css");return[{scaleId:r.id,from:d,to:l}]});return{fromCSS:n,toCSS:o,scaled:i}},Ge=({id:e,onClick:s,onDblClick:t,onMouseMove:n,onMouseDown:o,onMouseUp:i,onDocumentMouseUp:r,onSpanSelect:d,onContextMenu:l,className:c,style:a,sync:m,children:h})=>{const f=v.useId(),u=e||f;return D("dblclick",u,p=>{t?.(p)}),D("click",u,p=>{s?.(p)}),D("move",u,p=>{n?.(p)}),D("mousedown",u,p=>{o?.(p)}),D("mouseup",u,p=>{i?.(p)}),D("documentmouseup",u,p=>{r?.(p)}),D("spanselect",u,p=>{d?.(p)}),D("contextmenu",u,p=>{l?.(p)}),M.jsxs(he.Provider,{value:u,children:[M.jsx(Ze,{className:c,style:a,sync:m}),h]})},Ze=({className:e,style:s,sync:t})=>{const n=v.useRef(null),o=se(),i=v.useRef(o);i.current=o;const r=v.useContext(he),d=t?.key||r,l=v.useRef(null),c=v.useRef(null),a=v.useRef(null),m=()=>{const u=n.current?.parentElement;if(u){if(u.dataset.canplotroot===void 0)throw new Error("ChartAreaInteractions must be used within a CanPlot component");return u.getBoundingClientRect()}},h=(u,p)=>{const x=We(u,m(),i.current,t?.xViaScaleId,t?.yViaScaleId);x&&p(x.pointerSyncPosition,{cssX:x.cssX,cssY:x.cssY},{ctrlKey:u.ctrlKey,altKey:u.altKey,shiftKey:u.shiftKey,metaKey:u.metaKey})},f=v.useRef(h);return f.current=h,v.useEffect(()=>{const u=y=>{const b=c.current;b&&P.spanselect.dispatchEvent(r,{...b,completed:!0}),P.documentmouseup.dispatchEvent(r,{frame:i.current,keys:{ctrlKey:y.ctrlKey,altKey:y.altKey,shiftKey:y.shiftKey,metaKey:y.metaKey}})},p=y=>{const b={ctrlKey:y.ctrlKey,altKey:y.altKey,shiftKey:y.shiftKey,metaKey:y.metaKey},T=a.current;if(T&&Object.entries(b).some(([w,E])=>T.keys[w]!==E)){const w={...T,keys:b};a.current=w,P.sync_move.dispatchEvent(d,w)}const C=c.current;if(C&&Object.entries(b).some(([w,E])=>C.keys[w]!==E)){y.stopPropagation(),y.preventDefault();const w={...C,keys:b};c.current=w,P.spanselect.dispatchEvent(r,w)}},x=y=>{f.current(y,(b,{cssX:T,cssY:C},w)=>{const E=l.current;if(!E||!b.x||!b.y)return;const k=i.current,R=E.xRangeCss.start,N=T,F=E.yRangeCss.start,ie=C,re=I(k,b.x.scaleId),ce=I(k,b.y.scaleId);l.current={xRangeCss:{start:R,end:N},yRangeCss:{start:F,end:ie}};let $="below_threshold";const ae=Math.abs(F-ie),le=Math.abs(R-N);ae<10&&le<10?$="below_threshold":ae>30&&le>30?$="box":ae>le?$="y":$="x";const me={scaleId:re.id,from:_(k,Y(i.current,R,"css"),re.id,"css"),to:_(k,Y(i.current,N,"css"),re.id,"css")},pe={scaleId:ce.id,from:_(k,z(i.current,F,"css"),ce.id,"css"),to:_(k,z(i.current,ie,"css"),ce.id,"css")},V=me&&ye("x",me,i.current),H=pe&&ye("y",pe,i.current),Ee=V?.scaled,Me=H?.scaled,xe={mode:$,frame:i.current,completed:!1,x:{css:V&&{from:V.fromCSS,to:V.toCSS},scaled:Ee??[]},y:{css:H&&{from:H.fromCSS,to:H.toCSS},scaled:Me??[]},keys:w};c.current=xe,P.spanselect.dispatchEvent(r,xe)})},g=y=>{f.current(y,(b,T,C)=>{const w=K(b,i.current);if(!w)return;if(Object.values(C).some(k=>k)){y.preventDefault();const k=Math.abs(y.deltaY)>Math.abs(y.deltaX)?y.deltaY:y.deltaX;P.pressandwheel.dispatchEvent(r,{pointer:w,frame:i.current,keys:C,deltaX:y.deltaX,deltaY:y.deltaY,deltaAbs:k})}})};document.addEventListener("mouseup",u),document.addEventListener("keydown",p),document.addEventListener("keyup",p),document.addEventListener("mousemove",x);const S=n.current;return S?.addEventListener("wheel",g,{passive:!1}),()=>{document.removeEventListener("mouseup",u),document.removeEventListener("keydown",p),document.removeEventListener("keyup",p),document.removeEventListener("mousemove",x),S?.removeEventListener("wheel",g)}},[i,r,d,f]),D("sync_move",d,u=>{const p=u.positions?K(u.positions,i.current):null;a.current=u,P.move.dispatchEvent(r,{frame:i.current,pointer:p??null,keys:u.keys})}),M.jsx("div",{ref:n,id:"interactions",className:e,style:{position:"absolute",left:o.chartAreaCSS.x,top:o.chartAreaCSS.y,width:o.chartAreaCSS.width,height:o.chartAreaCSS.height,zIndex:25,...s},onDragStart:u=>{u.preventDefault()},onClick:u=>{h(u,(p,x,g)=>{const S=K(p,i.current);S&&P.click.dispatchEvent(r,{pointer:S,frame:i.current,keys:g})})},onMouseLeave:u=>{h(u,(p,x,g)=>{P.sync_move.dispatchEvent(d,{positions:null,keys:g})})},onMouseMove:u=>{h(u,(p,x,g)=>{P.sync_move.dispatchEvent(d,{positions:p,keys:g})})},onMouseDown:u=>{h(u,(p,{cssX:x,cssY:g},S)=>{const y=K(p,i.current);y&&(P.mousedown.dispatchEvent(r,{pointer:y,frame:i.current,keys:S}),l.current={xRangeCss:{start:x,end:x},yRangeCss:{start:g,end:g}})})},onMouseUp:u=>{h(u,(p,x,g)=>{const S=K(p,i.current);if(!S)return;P.mouseup.dispatchEvent(r,{frame:i.current,pointer:S,keys:g});const y=c.current;c.current=null;const b=l.current;if(l.current=null,b&&y){const T={...y,keys:g,completed:!0};c.current=null,P.spanselect.dispatchEvent(r,T)}})},onContextMenu:u=>{u.preventDefault(),h(u,(p,x,g)=>{const S=K(p,i.current);S&&P.contextmenu.dispatchEvent(r,{frame:i.current,pointer:S,keys:g})})},onDoubleClick:u=>{h(u,(p,x,g)=>{const S=K(p,i.current);S&&P.dblclick.dispatchEvent(r,{frame:i.current,pointer:S,keys:g})})}})},Je=({data:e,renderTooltip:s,xScaleId:t})=>{const[n,o]=v.useState(null);ne("move",r=>{o(r)});const i=v.useMemo(()=>{if(!n)return null;const{frame:r,pointer:d}=n,l=d?.scaled[t];if(l===void 0)return null;const c=[];let a=l;for(const m of e){let h=null,f=1/0;for(const[p,x]of m.points.entries()){if(!Z(r,x.x,t)||!Z(r,x.y,m.yScaleId))continue;const g=Math.abs(x.x-l);g<f&&(f=g,h=p)}const u=m.points[h??-1];if(!u||te(r,f,t,"css")>30){c.push({seriesId:m.seriesId,y:null});continue}a=u.x,c.push({seriesId:m.seriesId,y:u.y})}return{frame:r,x:a,points:c}},[e,n,t]);return s(i)},Qe=({makeXStyle:e,makeXClassName:s,makeYStyle:t,makeYClassName:n})=>{const[o,i]=v.useState(null);if(ne("move",h=>{i(h)}),!o)return null;const{frame:r,pointer:d}=o,l=d?.cssX??null,c=d?.cssY??null,a=l?Y(r,l,"css"):0,m=c?z(r,c,"css"):0;return M.jsxs(M.Fragment,{children:[M.jsx("div",{"data-show":!!d,className:s?.(o),style:{position:"absolute",left:0,visibility:l===null?"hidden":"visible",top:r.chartAreaCSS.y,height:r.chartAreaCSS.height,borderColor:"red",borderLeftWidth:"1px",borderLeftStyle:"solid",pointerEvents:"none",opacity:d?1:0,transform:`translateX(${a}px)`,...e?.(o)}}),M.jsx("div",{className:n?.(o),"data-show":!!d,style:{position:"absolute",visibility:c===null?"hidden":"visible",top:0,height:0,borderTop:"solid 1px red",left:r.chartAreaCSS.x,width:r.chartAreaCSS.width,pointerEvents:"none",opacity:d?1:0,transform:`translateY(${m}px)`,...t?.(o)}})]})},et=({makeClassName:e,makeStyle:s})=>{const[t,n]=v.useState(null);ne("spanselect",i=>{n(i.mode==="below_threshold"||i.completed?null:i)});const o=v.useMemo(()=>{if(!t||t.mode==="below_threshold")return null;const i=t.mode==="y"?-1/0:t.x.css?.from??-1/0,r=t.mode==="y"?1/0:t.x.css?.to??1/0,d=t.mode==="x"?-1/0:t.y.css?.from??-1/0,l=t.mode==="x"?1/0:t.y.css?.to??1/0,c=Y(t.frame,i,"css"),a=Y(t.frame,r,"css"),m=z(t.frame,d,"css"),h=z(t.frame,l,"css"),f=Math.min(c,a),u=Math.min(m,h),p=Math.abs(a-c),x=Math.abs(h-m);return{leftPx:f,topPx:u,widthPx:p,heightPx:x}},[t]);return M.jsx("div",{className:t?e?.(t):void 0,style:{position:"absolute",visibility:t?"visible":"hidden",left:`${o?.leftPx??0}px`,top:`${o?.topPx??0}px`,width:`${o?.widthPx??0}px`,height:`${o?.heightPx??0}px`,pointerEvents:"none",...t?s?.(t):void 0}})},tt=({style:e,children:s,scaleId:t,...n})=>{const o=se(i=>i.getScale(t)?.axis);return o?M.jsx("div",{style:{position:"absolute",backgroundColor:"#0000ff11",left:o.cssRect.x,top:o.cssRect.y,height:o.cssRect.height,width:o.cssRect.width,...e},...n,children:s}):null},be=60,st=30,we="UTC",nt="en-GB",ot=({space:e,formatter:s,acceptableIncrements:t}={})=>(n,o)=>{const{min:i,max:r}=n,d=[],l=window.devicePixelRatio||1,c=(e??(n.origin==="x"?be:st))*l,a=ge(o,c,n.id,"canvas"),m=t??q,h=m.find(u=>u>a)??m.at(-1)??1;let f=i;if(Math.abs(f%h)>Number.EPSILON){const u=(h-f%h)%h;f+=u}for(;f<=r&&d.length<1e3;)d.push(f),f+=h;return(s??Te)(d)},Te=e=>{const s=Math.max(0,Math.ceil(-Math.log10(e[1]-e[0])));return e.map(t=>({value:t,label:t.toFixed(s)}))},q=[];for(let e=-12;e<=12;e++)q.push(1*10**e),q.push(2*10**e),q.push(5*10**e);const it=1,Ce=1e3*it,fe=60*Ce,Q=60*fe,oe=24*Q,rt=30*oe,ct=365*oe,at=[[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"]],W=e=>{const[s,t]=e;switch(t){case"milliseconds":return s;case"seconds":return s*Ce;case"minutes":return s*fe;case"hours":return s*Q;case"days":return s*oe;case"months":return s*rt;case"years":return s*ct}},lt=(e,s)=>{const t=new Date(e);return t.setUTCMilliseconds(t.getUTCMilliseconds()+s),t.getTime()},ut=(e,s)=>{const t=new Date(e);return t.setUTCSeconds(t.getUTCSeconds()+s),t.getTime()},dt=(e,s)=>{const t=new Date(e);return t.setUTCMinutes(t.getUTCMinutes()+s),t.getTime()},ht=(e,s)=>{const t=new Date(e);return t.setUTCHours(t.getUTCHours()+s),t.getTime()},ft=(e,s)=>{const t=new Date(e);return t.setUTCDate(t.getUTCDate()+s),t.getTime()},ve=(e,s)=>{const t=new Date(e);return t.setUTCMonth(t.getUTCMonth()+s),t.getTime()},X=(e,s)=>{const[t,n]=s;switch(n){case"milliseconds":return lt(e,t);case"seconds":return ut(e,t);case"minutes":return dt(e,t);case"hours":return ht(e,t);case"days":return ft(e,t);case"months":return ve(e,t);case"years":return ve(e,t*12)}};function G(e,s){const t=new Date(e),n=new Date(t.toLocaleString("en-US",{timeZone:s})),o=new Date(t.toLocaleString("en-US",{timeZone:"UTC"}));return(n.getTime()-o.getTime())/(3600*1e3)}const mt=(e,s,t="UTC")=>{const[n,o]=s;let i=new Date(e);const r=()=>{i.setUTCHours(-G(i,t),0,0,0)};switch(o){case"milliseconds":i.setUTCMilliseconds(Math.ceil(i.getUTCMilliseconds()/n)*n);break;case"seconds":i.setUTCSeconds(Math.ceil(i.getUTCSeconds()/n)*n,0);break;case"minutes":i.setUTCMinutes(Math.ceil(i.getTime()%Q/fe/n)*n,0,0);break;case"hours":i.setUTCHours(Math.ceil(i.getTime()%oe/Q/n)*n,0,0,0);break;case"days":case"months":case"years":o==="months"?i.setUTCDate(1):o==="years"&&i.setUTCMonth(0,1),r(),i.getTime()<e&&(i=new Date(X(i,[1,o])));break}return i.getTime()},pt=({timeZone:e=we,space:s=be,formatter:t,locale:n,showTimezone:o}={})=>(i,r)=>{const{min:d,max:l}=i,c=Math.floor(r.chartAreaCanvasPX.width/s)+1,m=(l-d)/c,[h,f]=at.find(S=>W(S)>=m)??[1,"milliseconds"],u=mt(d,[h,f],e),p=G(u,e),x=[u];let g;for(;;){switch(f){case"milliseconds":case"seconds":case"minutes":case"hours":{g=X(u,[x.length*h,f]);break}case"days":{const S=X(u,[x.length*h,f]);g=X(S,[p-G(S,e),"hours"]);break}case"months":case"years":{const S=X(X(X(u,[p,"hours"]),[x.length*h,f]),[-p,"hours"]);g=X(S,[p-G(S,e),"hours"]);break}}if(g>l)break;x.push(g)}return(t??Pe({locale:n,showTimezone:o,timeZone:e}))(x)},U=(e,s,t)=>e.find(n=>n.type===t)?.value!==s.find(n=>n.type===t)?.value,Pe=({timeZone:e=we,locale:s=nt,showTimezone:t=!0})=>{const n=new Intl.DateTimeFormat(s,{year:"numeric",day:"numeric",month:"short",hour:"numeric",hourCycle:"h23",minute:"numeric",second:"numeric",fractionalSecondDigits:3,timeZoneName:"short",timeZone:e});return o=>{const i=o[1]-o[0],r=i<W([1,"days"]),d=i<W([1,"minutes"]),l=i<W([1,"seconds"]);return o.map(c=>({value:c,label:n.formatToParts(new Date(c))})).map((c,a,m)=>{const h=m[a-1],f=a===0||U(c.label,h.label,"year"),u=a===0||U(c.label,h.label,"day"),p=a===0||U(c.label,h.label,"month"),x=a===0||U(c.label,h.label,"hour"),g=a===0||U(c.label,h.label,"timeZoneName"),S=a===0||U(c.label,h.label,"minute"),y=a===0||U(c.label,h.label,"second"),b=a===0||U(c.label,h.label,"fractionalSecond"),T=[];if(r&&(x||S||g||y||b)){const C=c.label.find(R=>R.type==="hour")?.value,w=c.label.find(R=>R.type==="minute")?.value,E=c.label.find(R=>R.type==="timeZoneName")?.value;let k="";if(d){const R=c.label.find(F=>F.type==="second")?.value,N=c.label.find(F=>F.type==="fractionalSecond")?.value;k=`:${R}`+(l?`.${N}`:"")}T.push(`${C}:${w}${k}`+(t&&g?` ${E}`:""))}return(u||p)&&T.push([c.label.find(C=>C.type==="month")?.value,u&&c.label.find(C=>C.type==="day")?.value].filter(Boolean).join(" ")),f&&T.push(c.label.find(C=>C.type==="year")?.value),{value:c.value,label:T.filter(C=>C).join(`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react/jsx-runtime"),v=require("react"),ee=require("zustand"),B=(s,t,e)=>Math.min(Math.max(s,t),e),ke=s=>s.reduce((t,e)=>t+(e??0),0),Re=(s,t)=>{let e=0;for(let n=0;n<s.length;n++)Math.abs(s[n]-t)<Math.abs(s[e]-t)&&(e=n);return e},ge=(s,t,e,n)=>{const{min:o,max:i,origin:r}=I(s,e),d=n==="canvas"?s.chartAreaCanvasPX:s.chartAreaCSS,h=(r==="x"?d.width:d.height)/(i-o);return t/h},I=(s,t)=>{const e=s.scales.find(n=>n.id===t);if(!e)throw new Error(`Scale ${t} not found`);return e},A=(s,t)=>{const e=window.devicePixelRatio||1;s.lineCap=t?.lineCap??"butt",s.lineDashOffset=e*(t?.lineDashOffset??0),s.lineJoin=t?.lineJoin??"miter",s.lineWidth=e*(t?.lineWidth??1),s.miterLimit=e*(t?.miterLimit??10),s.strokeStyle=t?.strokeStyle??"black",s.fillStyle=t?.fillStyle??s.strokeStyle,s.font=t?.font??`${10*e}px sans-serif`,s.textAlign=t?.textAlign??"start",s.direction=t?.direction??"inherit",s.textBaseline=t?.textBaseline??"alphabetic",s.fontKerning=t?.fontKerning??"auto"},te=(s,t,e,n)=>{const o=n==="canvas"?s.chartAreaCanvasPX:s.chartAreaCSS,{min:i,max:r,origin:d}=I(s,e),h=(d==="x"?o.width:o.height)/(r-i);return t*h},j=(s,t,e,n)=>{const{min:o,origin:i}=I(s,e),r=n==="canvas"?s.chartAreaCanvasPX:s.chartAreaCSS,d=te(s,t-o,e,n);return i==="x"?B(r.x+d,r.x-10*r.width,r.x+11*r.width):B(r.y+r.height-d,r.y-10*r.height,r.y+11*r.height)},Ae=(s,t,e)=>{const{min:n,max:o}=I(s,e);return B(t,n,o)},Y=(s,t,e)=>{const n=e==="canvas"?s.chartAreaCanvasPX:s.chartAreaCSS;return B(t,n.x,n.x+n.width)},z=(s,t,e)=>{const n=e==="canvas"?s.chartAreaCanvasPX:s.chartAreaCSS;return B(t,n.y,n.y+n.height)},Z=(s,t,e)=>{const{min:n,max:o}=I(s,e);return t>=n&&t<=o},_=(s,t,e,n)=>{const{min:o,max:i,origin:r}=I(s,e),d=n==="canvas"?s.chartAreaCanvasPX:s.chartAreaCSS,h=r==="x"?(t-d.x)/d.width:(d.height-t+d.y)/d.height;return o+h*(i-o)},Le=s=>{const{ctx:t,scales:e}=s;for(const n of e){if(!n.axis)continue;t.save(),A(t,{strokeStyle:"black",fillStyle:"black",lineWidth:1,...n.axis.style});const o=n.axis.canvasRect;if(n.origin==="x"){if(n.axis.position==="bottom")t.beginPath(),t.moveTo(o.x,o.y),t.lineTo(o.x+o.width,o.y),t.stroke();else if(n.axis.position==="top"){const i=o.y+o.height;t.beginPath(),t.moveTo(o.x,i),t.lineTo(o.x+o.width,i),t.stroke()}}else if(n.axis.position==="left"){const i=o.x+o.width;t.beginPath(),t.moveTo(i,o.y),t.lineTo(i,o.y+o.height),t.stroke()}else n.axis.position==="right"&&(t.beginPath(),t.moveTo(o.x,o.y),t.lineTo(o.x,o.y+o.height),t.stroke());t.restore()}},J={TOP:400,MIDDLE:300,BOTTOM:200,BACKGROUND:100},De=()=>ee.createStore((s,t)=>{const e=()=>{const n=t()._frame;if(!n)throw new Error("No frame set in frame store");return n};return{_frame:null,getFrame:e,getCtx:()=>e().ctx,clampXPosToChartArea:(n,o)=>Y(e(),n,o??"canvas"),clampYPosToChartArea:(n,o)=>z(e(),n,o??"canvas"),valToPos:(n,o,i)=>j(e(),n,o,i??"canvas"),valToPxDistance:(n,o,i)=>te(e(),n,o,i??"canvas"),valFits:(n,o)=>Z(e(),n,o),getScale:n=>I(e(),n),_listeners:[],_subscribe:(n,o)=>(t()._listeners.push([o,n]),t()._listeners.sort((i,r)=>i[0]-r[0]),()=>{const i=t()._listeners.findIndex(([,r])=>r===n);i!==-1&&t()._listeners.splice(i,1)}),_notifyListeners:n=>{for(const[,o]of t()._listeners)o(n)}}}),_e=()=>ee.createStore(s=>({notify:()=>{s(t=>({version:t.version+1}))},version:0})),de=v.createContext(null),Se=v.createContext(null),O=(s,t,e)=>{const n=v.useContext(de),o=v.useContext(Se);if(!n||!o)throw new Error("useFrame must be used within a CanPlot component");const i=v.useRef(t);i.current=t,v.useLayoutEffect(()=>(Promise.resolve().then(()=>{i.current(n.getState())}),n.getState()._subscribe(r=>{r._frame&&i.current(r)},typeof s=="number"?s:J[s])),[n,s]),v.useEffect(()=>{o.getState().notify()},[o,...e])},se=s=>{const t=v.useContext(de);if(!t)throw new Error("useFrame must be used within a CanPlot component");return ee.useStore(t,s??(e=>e.getFrame()))};function Ie(s){return t=>{for(const e of s)ue(e,t)}}function Ue(s){return t=>{const e=[];for(const n of s){const o=ue(n,t),i=typeof o=="function";e.push(i?o:()=>ue(n,null))}return()=>{for(const n of e)n()}}}function ue(s,t){if(typeof s=="function")return s(t);s&&(s.current=t)}var Xe=parseInt(v.version.split(".")[0],10)>=19?Ue:Ie;const Oe=v.forwardRef(({configuration:s,children:t,style:e,className:n},o)=>{const i=v.useRef(null),r=v.useRef(null),d=Ke(r),h=v.useMemo(De,[]),u=v.useMemo(_e,[]);v.useLayoutEffect(()=>{h.setState({_frame:Ye(s,d,i.current)});const c=h.getState();c._notifyListeners(c)},[s,d,i,h]),v.useLayoutEffect(()=>h.getState()._subscribe(c=>{const f=c._frame?.ctx;f&&f.clearRect(0,0,f.canvas.width,f.canvas.height)},J.BACKGROUND),[h]),v.useLayoutEffect(()=>h.getState()._subscribe(c=>{c._frame&&Le(c._frame)},J.BOTTOM),[h]),v.useLayoutEffect(()=>{let c=!1;return u.subscribe(()=>{c||(c=!0,window.requestAnimationFrame(()=>{c=!1,h.setState(a=>({_frame:a._frame?{...a._frame}:null}));const f=h.getState();f._notifyListeners(f)}))})},[u,h]);const m=window.devicePixelRatio||1;return k.jsxs("div",{ref:Xe([o,r]),className:n,style:{position:"relative",overflow:"hidden",...e},"data-canplotroot":!0,children:[k.jsx("canvas",{ref:i,width:d.width*m,height:d.height*m,style:{inset:0,position:"absolute",width:`${d.width}px`,height:`${d.height}px`}}),k.jsx(Fe,{frameStore:h,updateRequestStore:u,children:t})]})}),Fe=({frameStore:s,updateRequestStore:t,children:e})=>ee.useStore(s,o=>!!o._frame)?k.jsx(Se.Provider,{value:t,children:k.jsx(de.Provider,{value:s,children:e})}):null,Ke=s=>{const[t,e]=v.useState({width:0,height:0}),[n]=v.useState(()=>new ResizeObserver(o=>{for(const i of o){const r=Math.round(i.contentRect.width),d=Math.round(i.contentRect.height);e(h=>h.width!==r||h.height!==d?{...h,width:r,height:d}:h)}}));return v.useLayoutEffect(()=>{if(!s.current)return;const o=s.current.clientWidth,i=s.current.clientHeight;return e(r=>r.width!==o||r.height!==i?{...r,width:o,height:i}:r),n.observe(s.current,{box:"border-box"}),()=>n.disconnect()},[n,s]),t},Ye=(s,t,e)=>{const n=e?.getContext("2d");if(!n)return null;const o=window.devicePixelRatio||1;if(t.width===0||t.height===0)return null;const i={x:s.padding.left,y:s.padding.top,width:t.width-s.padding.left-s.padding.right,height:t.height-s.padding.top-s.padding.bottom};for(const a of s.scales)a.axis&&(a.origin==="x"?(a.axis.position==="bottom"||a.axis.position==="top")&&(i.height=Math.max(0,i.height-a.axis.size),a.axis.position==="top"&&(i.y+=a.axis.size)):(a.axis.position==="left"||a.axis.position==="right")&&(i.width=Math.max(0,i.width-a.axis.size),a.axis.position==="left"&&(i.x+=a.axis.size)));const r={x:i.x*o,y:i.y*o,width:i.width*o,height:i.height*o},d=[];let h=s.padding.left*o,u=n.canvas.width-s.padding.right*o,m=n.canvas.height-s.padding.bottom*o,c=s.padding.top*o;for(const a of s.scales){if(!a.axis){d.push({...a,axis:null});continue}let l;if(a.origin==="x")switch(a.axis.position){case"bottom":m-=a.axis.size*o,l={x:i.x,y:m/o,width:i.width,height:a.axis.size};break;case"top":c+=a.axis.size*o,l={x:i.x,y:c/o-a.axis.size,width:i.width,height:a.axis.size};break;case"left":case"right":throw new Error("Invalid axis position for x origin")}else switch(a.axis.position){case"left":h+=a.axis.size*o,l={x:h/o-a.axis.size,y:i.y,width:a.axis.size,height:i.height};break;case"right":u-=a.axis.size*o,l={x:u/o,y:i.y,width:a.axis.size,height:i.height};break;case"top":case"bottom":throw new Error("Invalid axis position for y origin")}const p={x:l.x*o,y:l.y*o,width:l.width*o,height:l.height*o};d.push({...a,axis:{...a.axis,cssRect:l,canvasRect:p}})}return{ctx:n,dpr:o,padding:s.padding,scales:d,chartAreaCSS:i,chartAreaCanvasPX:r}},ze=({layer:s="MIDDLE",data:t,xScaleId:e,yScaleId:n,style:o})=>(O(s,({getCtx:i,clampXPosToChartArea:r,clampYPosToChartArea:d,valToPos:h})=>{const u=i();u.save(),u.beginPath(),A(u,o);for(const m of t){const c=r(h(m.x,e)),f=d(h(m.y,n));u.lineTo(c,f)}u.stroke(),u.restore()},[t,e,n,o]),null),Be=({layer:s="MIDDLE",data:t,xScaleId:e,yScaleId:n,radius:o=5,style:i,globalAlpha:r})=>(O(s,({getCtx:d,valToPos:h,valFits:u})=>{const m=d();m.save(),m.beginPath();const c=new Path2D;A(m,i),r!==void 0&&(m.globalAlpha=r);for(const f of t){if(!u(f.x,e)||!u(f.y,n))continue;const a=h(f.x,e),l=h(f.y,n);c.moveTo(a+o,l),c.arc(a,l,o,0,Math.PI*2)}m.fill(c),m.stroke(c),m.restore()},[t,e,n,o,i,r]),null),je=({data:s,xScaleId:t,yScaleId:e,style:n,barWidth:o,xPositionOffset:i,radius:r,layer:d="MIDDLE"})=>(O(d,({getCtx:h,valToPxDistance:u,valToPos:m,clampXPosToChartArea:c,clampYPosToChartArea:f})=>{if(s.length===0)return;const a=h();a.save(),A(a,n);const l=u(o,t);a.beginPath();for(const p of s){const x=m(p.x,t)-l/2+i*l,S=f(m(0,e)),y=f(m(p.y,e)),w=S-y,T=c(x),b=c(x+l)-T;r?a.roundRect(T,y,b,w,r):a.rect(T,y,b,w)}a.closePath(),a.fill(),n?.strokeStyle&&a.stroke(),a.restore()},[s,t,e,n,o,i,r]),null),Ne=({layer:s="MIDDLE",data:t,xScaleId:e,yScaleId:n,style:o})=>(O(s,({getCtx:i,clampXPosToChartArea:r,clampYPosToChartArea:d,valToPos:h})=>{const u=[];for(const c of t){const f=r(h(c.x,e)),a=d(h(c.y[0],n)),l=d(h(c.y[1],n));u.push({x:f,y:a}),u.unshift({x:f,y:l})}const m=i();if(u.length>0){m.save(),m.beginPath(),A(m,o),m.moveTo(u[0].x,u[0].y);for(const c of u)m.lineTo(c.x,c.y);m.closePath(),m.fill(),m.restore()}},[t,e,n,o]),null),$e=({layer:s="MIDDLE",data:t,stroked:e,xScaleId:n,yScaleId:o,style:i})=>(O(s,({getCtx:r,clampXPosToChartArea:d,clampYPosToChartArea:h,valToPos:u})=>{const m=[],c=r();for(const p of t){const g=d(u(p.x,n)),x=h(u(p.y,o));m.push({x:g,y:x})}const f=m.at(0),a=m.at(-1);if(!f||!a)return;const l=h(u(0,o));c.save(),c.beginPath(),A(c,i),c.moveTo(f.x,l);for(const p of m)c.lineTo(p.x,p.y);if(c.lineTo(a.x,l),c.closePath(),c.fill(),e){c.beginPath(),c.moveTo(f.x,f.y);for(const p of m)c.lineTo(p.x,p.y);c.stroke()}c.restore()},[t,e,n,o,i]),null),Ve=(s,t)=>se(({clampXPosToChartArea:e,clampYPosToChartArea:n,getScale:o,valToPos:i,valFits:r})=>{const d={};for(const h in s){const u=s[h];switch(u.exceeding){case"discard":{if(r(u.value,u.scaleId)){const m=i(u.value,u.scaleId,t);d[h]=m}break}case"clamp":{const m=i(u.value,u.scaleId,t);d[h]=o(u.scaleId)?.origin==="x"?e(m,t):n(m,t);break}}}return d}),He=({layer:s="BOTTOM",scaleId:t,tickStyle:e,labelStyle:n,labelGap:o,tickSize:i,ticks:r})=>(O(s,({getCtx:d,valToPos:h,getScale:u,getFrame:m})=>{const c=d(),f=u(t);if(!f||!f.axis||f.origin!=="x")return;const a=f.axis,l=a.position==="top"?a.canvasRect.y+a.canvasRect.height:a.canvasRect.y,p=window.devicePixelRatio||1,g=l,x=(i??6)*p,S=a.position==="top"?l-x:l+x,y=(o??12)*p;c.save(),c.fontKerning="auto",A(c,{...e}),c.beginPath();const w=Array.isArray(r)?r:r({...f,axis:a},m());for(const{value:T}of w){const b=h(T,t,"canvas");c.moveTo(b,g),c.lineTo(b,S)}c.stroke(),c.restore(),c.save(),A(c,{textBaseline:a.position==="top"?"bottom":"top",textAlign:"center",...e,...n});for(const{value:T,label:b}of w){const C=h(T,t,"canvas"),P=b.split(`
+`);for(let E=0;E<P.length;E++)c.fillText(P[E],C,S+p*2+E*y)}c.restore()},[r,t,e,n]),null),qe=({layer:s="BOTTOM",scaleId:t,tickStyle:e,labelStyle:n,labelGap:o,tickSize:i,ticks:r})=>(O(s,({getCtx:d,valToPos:h,getScale:u,getFrame:m})=>{const c=d(),f=u(t);if(!f||!f.axis||f.origin!=="y")return;const a=f.axis,l=a.position==="left"?a.canvasRect.x+a.canvasRect.width:a.canvasRect.x,p=l,g=i??6,x=a.position==="left"?l-g:l+g,S=o??12,y=Array.isArray(r)?r:r({...f,axis:a},m());c.save(),c.fontKerning="auto",A(c,{...e}),c.beginPath();for(const{value:w}of y){const T=h(w,t,"canvas");c.moveTo(p,T),c.lineTo(x,T)}c.stroke(),c.restore(),c.save(),A(c,{textBaseline:"middle",textAlign:a.position==="left"?"right":"left",...e,...n});for(const{value:w,label:T}of y){const b=h(w,t,"canvas"),C=T.split(`
+`);for(let P=0;P<C.length;P++)c.fillText(` ${C[P]} `,x,b+P*S)}c.restore()},[r,t,e,n]),null),L=()=>{const s=[];return{addEventListener:(t,e)=>(s.push({syncKey:t,callback:e}),()=>{const n=s.findIndex(o=>o.callback===e);n!==-1&&s.splice(n,1)}),dispatchEvent:(t,e)=>{for(const n of s)n.syncKey===t&&n.callback(t,e)}}},M={dblclick:L(),click:L(),contextmenu:L(),move:L(),mousedown:L(),mouseup:L(),spanselect:L(),documentmouseup:L(),pressandwheel:L(),sync_move:L()},D=(s,t,e)=>{const n=v.useRef(e);n.current=e,v.useEffect(()=>M[s].addEventListener(t,(i,r)=>{n.current(r,i)}),[t,s,n])},he=v.createContext(""),ne=(s,t)=>{const e=v.useContext(he);return D(s,e,t)},We=(s,t,e,n,o)=>{if(!t)return;const i=n??e.scales.find(c=>c.origin==="x")?.id,r=o??e.scales.find(c=>c.origin==="y")?.id;if(!i||!r)return;const d=s.clientX-t.left,h={scaleId:i,value:_(e,d,i,"css")},u=s.clientY-t.top,m={scaleId:r,value:_(e,u,r,"css")};return{pointerSyncPosition:{x:h,y:m},cssX:d,cssY:u}},K=(s,t)=>{const{x:e,y:n}=s,o=e&&t.scales.some(r=>r.id===e.scaleId)?j(t,e.value,e.scaleId,"css"):null,i=n&&t.scales.some(r=>r.id===n.scaleId)?j(t,n.value,n.scaleId,"css"):null;return{cssX:o,cssY:i,scaled:Object.fromEntries(t.scales.flatMap(r=>{const d=r.origin==="y"?i:o;return d===null?[]:[[r.id,_(t,d,r.id,"css")]]}))}},ye=(s,t,e)=>{const n=j(e,t.from,t.scaleId,"css"),o=j(e,t.to,t.scaleId,"css"),i=e.scales.flatMap(r=>{if(r.origin!==s)return[];const d=_(e,n,r.id,"css"),h=_(e,o,r.id,"css");return[{scaleId:r.id,from:d,to:h}]});return{fromCSS:n,toCSS:o,scaled:i}},Ge=({id:s,onClick:t,onDblClick:e,onMouseMove:n,onMouseDown:o,onMouseUp:i,onDocumentMouseUp:r,onSpanSelect:d,onContextMenu:h,className:u,style:m,sync:c,children:f})=>{const a=v.useId(),l=s||a;return D("dblclick",l,p=>{e?.(p)}),D("click",l,p=>{t?.(p)}),D("move",l,p=>{n?.(p)}),D("mousedown",l,p=>{o?.(p)}),D("mouseup",l,p=>{i?.(p)}),D("documentmouseup",l,p=>{r?.(p)}),D("spanselect",l,p=>{d?.(p)}),D("contextmenu",l,p=>{h?.(p)}),k.jsxs(he.Provider,{value:l,children:[k.jsx(Ze,{className:u,style:m,sync:c}),f]})},Ze=({className:s,style:t,sync:e})=>{const n=v.useRef(null),o=se(),i=v.useRef(o);i.current=o;const r=v.useContext(he),d=e?.key||r,h=v.useRef(null),u=v.useRef(null),m=v.useRef(null),c=()=>{const l=n.current?.parentElement;if(l){if(l.dataset.canplotroot===void 0)throw new Error("ChartAreaInteractions must be used within a CanPlot component");return l.getBoundingClientRect()}},f=(l,p)=>{const g=We(l,c(),i.current,e?.xViaScaleId,e?.yViaScaleId);g&&p(g.pointerSyncPosition,{cssX:g.cssX,cssY:g.cssY},{ctrlKey:l.ctrlKey,altKey:l.altKey,shiftKey:l.shiftKey,metaKey:l.metaKey})},a=v.useRef(f);return a.current=f,v.useEffect(()=>{const l=y=>{const w=u.current;w&&M.spanselect.dispatchEvent(r,{...w,completed:!0}),M.documentmouseup.dispatchEvent(r,{frame:i.current,keys:{ctrlKey:y.ctrlKey,altKey:y.altKey,shiftKey:y.shiftKey,metaKey:y.metaKey}})},p=y=>{const w={ctrlKey:y.ctrlKey,altKey:y.altKey,shiftKey:y.shiftKey,metaKey:y.metaKey},T=m.current;if(T&&Object.entries(w).some(([C,P])=>T.keys[C]!==P)){const C={...T,keys:w};m.current=C,M.sync_move.dispatchEvent(d,C)}const b=u.current;if(b&&Object.entries(w).some(([C,P])=>b.keys[C]!==P)){y.stopPropagation(),y.preventDefault();const C={...b,keys:w};u.current=C,M.spanselect.dispatchEvent(r,C)}},g=y=>{a.current(y,(w,{cssX:T,cssY:b},C)=>{const P=h.current;if(!P||!w.x||!w.y)return;const E=i.current,R=P.xRangeCss.start,N=T,F=P.yRangeCss.start,ie=b,re=I(E,w.x.scaleId),ce=I(E,w.y.scaleId);h.current={xRangeCss:{start:R,end:N},yRangeCss:{start:F,end:ie}};let $="below_threshold";const ae=Math.abs(F-ie),le=Math.abs(R-N);ae<10&&le<10?$="below_threshold":ae>30&&le>30?$="box":ae>le?$="y":$="x";const me={scaleId:re.id,from:_(E,Y(i.current,R,"css"),re.id,"css"),to:_(E,Y(i.current,N,"css"),re.id,"css")},pe={scaleId:ce.id,from:_(E,z(i.current,F,"css"),ce.id,"css"),to:_(E,z(i.current,ie,"css"),ce.id,"css")},V=me&&ye("x",me,i.current),H=pe&&ye("y",pe,i.current),Ee=V?.scaled,Me=H?.scaled,xe={mode:$,frame:i.current,completed:!1,x:{css:V&&{from:V.fromCSS,to:V.toCSS},scaled:Ee??[]},y:{css:H&&{from:H.fromCSS,to:H.toCSS},scaled:Me??[]},keys:C};u.current=xe,M.spanselect.dispatchEvent(r,xe)})},x=y=>{a.current(y,(w,T,b)=>{const C=K(w,i.current);if(!C)return;if(Object.values(b).some(E=>E)){y.preventDefault();const E=Math.abs(y.deltaY)>Math.abs(y.deltaX)?y.deltaY:y.deltaX;M.pressandwheel.dispatchEvent(r,{pointer:C,frame:i.current,keys:b,deltaX:y.deltaX,deltaY:y.deltaY,deltaAbs:E})}})};document.addEventListener("mouseup",l),document.addEventListener("keydown",p),document.addEventListener("keyup",p),document.addEventListener("mousemove",g);const S=n.current;return S?.addEventListener("wheel",x,{passive:!1}),()=>{document.removeEventListener("mouseup",l),document.removeEventListener("keydown",p),document.removeEventListener("keyup",p),document.removeEventListener("mousemove",g),S?.removeEventListener("wheel",x)}},[i,r,d,a]),D("sync_move",d,l=>{const p=l.positions?K(l.positions,i.current):null;m.current=l,M.move.dispatchEvent(r,{frame:i.current,pointer:p??null,keys:l.keys})}),k.jsx("div",{ref:n,id:"interactions",className:s,style:{position:"absolute",left:o.chartAreaCSS.x,top:o.chartAreaCSS.y,width:o.chartAreaCSS.width,height:o.chartAreaCSS.height,zIndex:25,...t},onDragStart:l=>{l.preventDefault()},onClick:l=>{f(l,(p,g,x)=>{const S=K(p,i.current);S&&M.click.dispatchEvent(r,{pointer:S,frame:i.current,keys:x})})},onMouseLeave:l=>{f(l,(p,g,x)=>{M.sync_move.dispatchEvent(d,{positions:null,keys:x})})},onMouseMove:l=>{f(l,(p,g,x)=>{M.sync_move.dispatchEvent(d,{positions:p,keys:x})})},onMouseDown:l=>{f(l,(p,{cssX:g,cssY:x},S)=>{const y=K(p,i.current);y&&(M.mousedown.dispatchEvent(r,{pointer:y,frame:i.current,keys:S}),h.current={xRangeCss:{start:g,end:g},yRangeCss:{start:x,end:x}})})},onMouseUp:l=>{f(l,(p,g,x)=>{const S=K(p,i.current);if(!S)return;M.mouseup.dispatchEvent(r,{frame:i.current,pointer:S,keys:x});const y=u.current;u.current=null;const w=h.current;if(h.current=null,w&&y){const T={...y,keys:x,completed:!0};u.current=null,M.spanselect.dispatchEvent(r,T)}})},onContextMenu:l=>{l.preventDefault(),f(l,(p,g,x)=>{const S=K(p,i.current);S&&M.contextmenu.dispatchEvent(r,{frame:i.current,pointer:S,keys:x})})},onDoubleClick:l=>{f(l,(p,g,x)=>{const S=K(p,i.current);S&&M.dblclick.dispatchEvent(r,{frame:i.current,pointer:S,keys:x})})}})},Je=({data:s,renderTooltip:t,xScaleId:e})=>{const[n,o]=v.useState(null);ne("move",r=>{o(r)});const i=v.useMemo(()=>{if(!n)return null;const{frame:r,pointer:d}=n,h=d?.scaled[e];if(h===void 0)return null;const u=[];let m=h;for(const c of s){let f=null,a=1/0;for(const[p,g]of c.points.entries()){if(!Z(r,g.x,e)||!Z(r,g.y,c.yScaleId))continue;const x=Math.abs(g.x-h);x<a&&(a=x,f=p)}const l=c.points[f??-1];if(!l||te(r,a,e,"css")>30){u.push({seriesId:c.seriesId,y:null});continue}m=l.x,u.push({seriesId:c.seriesId,y:l.y})}return{frame:r,x:m,points:u}},[s,n,e]);return t(i)},Qe=({makeXStyle:s,makeXClassName:t,makeYStyle:e,makeYClassName:n})=>{const[o,i]=v.useState(null);if(ne("move",f=>{i(f)}),!o)return null;const{frame:r,pointer:d}=o,h=d?.cssX??null,u=d?.cssY??null,m=h?Y(r,h,"css"):0,c=u?z(r,u,"css"):0;return k.jsxs(k.Fragment,{children:[k.jsx("div",{"data-show":!!d,className:t?.(o),style:{position:"absolute",left:0,visibility:h===null?"hidden":"visible",top:r.chartAreaCSS.y,height:r.chartAreaCSS.height,borderColor:"red",borderLeftWidth:"1px",borderLeftStyle:"solid",pointerEvents:"none",opacity:d?1:0,transform:`translateX(${m}px)`,...s?.(o)}}),k.jsx("div",{className:n?.(o),"data-show":!!d,style:{position:"absolute",visibility:u===null?"hidden":"visible",top:0,height:0,borderTop:"solid 1px red",left:r.chartAreaCSS.x,width:r.chartAreaCSS.width,pointerEvents:"none",opacity:d?1:0,transform:`translateY(${c}px)`,...e?.(o)}})]})},et=({makeClassName:s,makeStyle:t})=>{const[e,n]=v.useState(null);ne("spanselect",i=>{n(i.mode==="below_threshold"||i.completed?null:i)});const o=v.useMemo(()=>{if(!e||e.mode==="below_threshold")return null;const i=e.mode==="y"?-1/0:e.x.css?.from??-1/0,r=e.mode==="y"?1/0:e.x.css?.to??1/0,d=e.mode==="x"?-1/0:e.y.css?.from??-1/0,h=e.mode==="x"?1/0:e.y.css?.to??1/0,u=Y(e.frame,i,"css"),m=Y(e.frame,r,"css"),c=z(e.frame,d,"css"),f=z(e.frame,h,"css"),a=Math.min(u,m),l=Math.min(c,f),p=Math.abs(m-u),g=Math.abs(f-c);return{leftPx:a,topPx:l,widthPx:p,heightPx:g}},[e]);return k.jsx("div",{className:e?s?.(e):void 0,style:{position:"absolute",visibility:e?"visible":"hidden",left:`${o?.leftPx??0}px`,top:`${o?.topPx??0}px`,width:`${o?.widthPx??0}px`,height:`${o?.heightPx??0}px`,pointerEvents:"none",...e?t?.(e):void 0}})},tt=({style:s,children:t,scaleId:e,...n})=>{const o=se(i=>i.getScale(e)?.axis);return o?k.jsx("div",{style:{position:"absolute",backgroundColor:"#0000ff11",left:o.cssRect.x,top:o.cssRect.y,height:o.cssRect.height,width:o.cssRect.width,...s},...n,children:t}):null},we=60,st=30,be="UTC",nt="en-GB",ot=({space:s,formatter:t,acceptableIncrements:e}={})=>(n,o)=>{const{min:i,max:r}=n,d=[],h=window.devicePixelRatio||1,u=(s??(n.origin==="x"?we:st))*h,m=ge(o,u,n.id,"canvas"),c=e??q,f=c.find(l=>l>m)??c.at(-1)??1;let a=i;if(Math.abs(a%f)>Number.EPSILON){const l=(f-a%f)%f;a+=l}for(;a<=r&&d.length<1e3;)d.push(a),a+=f;return(t??Te)(d)},Te=s=>{const t=Math.max(0,Math.ceil(-Math.log10(s[1]-s[0])));return s.map(e=>({value:e,label:e.toFixed(t)}))},q=[];for(let s=-12;s<=12;s++)q.push(1*10**s),q.push(2*10**s),q.push(5*10**s);const it=1,Ce=1e3*it,fe=60*Ce,Q=60*fe,oe=24*Q,rt=30*oe,ct=365*oe,at=[[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"]],W=s=>{const[t,e]=s;switch(e){case"milliseconds":return t;case"seconds":return t*Ce;case"minutes":return t*fe;case"hours":return t*Q;case"days":return t*oe;case"months":return t*rt;case"years":return t*ct}},lt=(s,t)=>{const e=new Date(s);return e.setUTCMilliseconds(e.getUTCMilliseconds()+t),e.getTime()},ut=(s,t)=>{const e=new Date(s);return e.setUTCSeconds(e.getUTCSeconds()+t),e.getTime()},dt=(s,t)=>{const e=new Date(s);return e.setUTCMinutes(e.getUTCMinutes()+t),e.getTime()},ht=(s,t)=>{const e=new Date(s);return e.setUTCHours(e.getUTCHours()+t),e.getTime()},ft=(s,t)=>{const e=new Date(s);return e.setUTCDate(e.getUTCDate()+t),e.getTime()},ve=(s,t)=>{const e=new Date(s);return e.setUTCMonth(e.getUTCMonth()+t),e.getTime()},X=(s,t)=>{const[e,n]=t;switch(n){case"milliseconds":return lt(s,e);case"seconds":return ut(s,e);case"minutes":return dt(s,e);case"hours":return ht(s,e);case"days":return ft(s,e);case"months":return ve(s,e);case"years":return ve(s,e*12)}};function G(s,t){const e=new Date(s),n=new Date(e.toLocaleString("en-US",{timeZone:t})),o=new Date(e.toLocaleString("en-US",{timeZone:"UTC"}));return(n.getTime()-o.getTime())/(3600*1e3)}const mt=(s,t,e="UTC")=>{const[n,o]=t;let i=new Date(s);const r=()=>{i.setUTCHours(-G(i,e),0,0,0)};switch(o){case"milliseconds":i.setUTCMilliseconds(Math.ceil(i.getUTCMilliseconds()/n)*n);break;case"seconds":i.setUTCSeconds(Math.ceil(i.getUTCSeconds()/n)*n,0);break;case"minutes":i.setUTCMinutes(Math.ceil(i.getTime()%Q/fe/n)*n,0,0);break;case"hours":i.setUTCHours(Math.ceil(i.getTime()%oe/Q/n)*n,0,0,0);break;case"days":case"months":case"years":o==="months"?i.setUTCDate(1):o==="years"&&i.setUTCMonth(0,1),r(),i.getTime()<s&&(i=new Date(X(i,[1,o])));break}return i.getTime()},pt=({timeZone:s=be,space:t=we,formatter:e,locale:n,showTimezone:o}={})=>(i,r)=>{const{min:d,max:h}=i,u=Math.floor(r.chartAreaCanvasPX.width/t)+1,c=(h-d)/u,[f,a]=at.find(S=>W(S)>=c)??[1,"milliseconds"],l=mt(d,[f,a],s),p=G(l,s),g=[l];let x;for(;;){switch(a){case"milliseconds":case"seconds":case"minutes":case"hours":{x=X(l,[g.length*f,a]);break}case"days":{const S=X(l,[g.length*f,a]);x=X(S,[p-G(S,s),"hours"]);break}case"months":case"years":{const S=X(X(X(l,[p,"hours"]),[g.length*f,a]),[-p,"hours"]);x=X(S,[p-G(S,s),"hours"]);break}}if(x>h)break;g.push(x)}return(e??Pe({locale:n,showTimezone:o,timeZone:s}))(g)},U=(s,t,e)=>s.find(n=>n.type===e)?.value!==t.find(n=>n.type===e)?.value,Pe=({timeZone:s=be,locale:t=nt,showTimezone:e=!0})=>{const n=new Intl.DateTimeFormat(t,{year:"numeric",day:"numeric",month:"short",hour:"numeric",hourCycle:"h23",minute:"numeric",second:"numeric",fractionalSecondDigits:3,timeZoneName:"short",timeZone:s});return o=>{const i=o[1]-o[0],r=i<W([1,"days"]),d=i<W([1,"minutes"]),h=i<W([1,"seconds"]);return o.map(u=>({value:u,label:n.formatToParts(new Date(u))})).map((u,m,c)=>{const f=c[m-1],a=m===0||U(u.label,f.label,"year"),l=m===0||U(u.label,f.label,"day"),p=m===0||U(u.label,f.label,"month"),g=m===0||U(u.label,f.label,"hour"),x=m===0||U(u.label,f.label,"timeZoneName"),S=m===0||U(u.label,f.label,"minute"),y=m===0||U(u.label,f.label,"second"),w=m===0||U(u.label,f.label,"fractionalSecond"),T=[];if(r&&(g||S||x||y||w)){const b=u.label.find(R=>R.type==="hour")?.value,C=u.label.find(R=>R.type==="minute")?.value,P=u.label.find(R=>R.type==="timeZoneName")?.value;let E="";if(d){const R=u.label.find(F=>F.type==="second")?.value,N=u.label.find(F=>F.type==="fractionalSecond")?.value;E=`:${R}`+(h?`.${N}`:"")}T.push(`${b}:${C}${E}`+(e&&x?` ${P}`:""))}return(l||p)&&T.push([u.label.find(b=>b.type==="month")?.value,l&&u.label.find(b=>b.type==="day")?.value].filter(Boolean).join(" ")),a&&T.push(u.label.find(b=>b.type==="year")?.value),{value:u.value,label:T.filter(b=>b).join(`
 `)}})}};exports.AreaPlot=Ne;exports.AxisOverlay=tt;exports.BarPlot=je;exports.CANPLOT_LAYER=J;exports.CanPlot=Oe;exports.ChartAreaInteractions=Ge;exports.Crosshair=Qe;exports.LinePlot=ze;exports.ScatterPlot=Be;exports.SelectBox=et;exports.SparklinePlot=$e;exports.TooltipsX=Je;exports.XTicks=He;exports.YTicks=qe;exports.applyStyles=A;exports.clamp=B;exports.clampUnfit=Ae;exports.clampXPosToChartArea=Y;exports.clampYPosToChartArea=z;exports.defaultNumericalTicksFormatter=Te;exports.findClosestIndex=Re;exports.getScale=I;exports.makeLinearTicks=ot;exports.makeTimeTickFormat=Pe;exports.makeTimeTicks=pt;exports.posToVal=_;exports.pxToValDistance=ge;exports.sum=ke;exports.useDrawEffect=O;exports.useFrameState=se;exports.useInteractionsEvent=ne;exports.useXPositioned=Ve;exports.valFits=Z;exports.valToPos=j;exports.valToPxDistance=te;
 //# sourceMappingURL=canplot.cjs.map