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