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