@jacshuo/onyx 2.0.0 → 2.2.0
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/README.md +358 -361
- package/dist/Chart/BarChart.cjs +1 -1
- package/dist/Chart/BarChart.js +1 -1
- package/dist/Chart/LineChart.cjs +1 -1
- package/dist/Chart/LineChart.js +1 -1
- package/dist/Chart/PieChart.cjs +1 -1
- package/dist/Chart/PieChart.js +1 -1
- package/dist/Chart/ScatterChart.cjs +1 -1
- package/dist/Chart/ScatterChart.js +1 -1
- package/dist/Chart/index.cjs +1 -1
- package/dist/Chart/index.js +1 -1
- package/dist/DataDisplay/CodeBlock.cjs +2 -2
- package/dist/DataDisplay/CodeBlock.js +2 -2
- package/dist/DataDisplay/List.cjs +1 -1
- package/dist/DataDisplay/List.js +1 -1
- package/dist/DataDisplay/MetricCard.cjs +1 -0
- package/dist/DataDisplay/MetricCard.d.cts +3 -0
- package/dist/DataDisplay/MetricCard.d.ts +3 -0
- package/dist/DataDisplay/MetricCard.js +1 -0
- package/dist/DataDisplay/Stat.cjs +1 -0
- package/dist/DataDisplay/Stat.d.cts +3 -0
- package/dist/DataDisplay/Stat.d.ts +3 -0
- package/dist/DataDisplay/Stat.js +1 -0
- package/dist/DataDisplay/Table.cjs +1 -1
- package/dist/DataDisplay/Table.js +1 -1
- package/dist/DataDisplay/Tree.cjs +1 -1
- package/dist/DataDisplay/Tree.js +1 -1
- package/dist/DataDisplay/index.cjs +2 -2
- package/dist/DataDisplay/index.d.cts +6 -0
- package/dist/DataDisplay/index.d.ts +6 -0
- package/dist/DataDisplay/index.js +2 -2
- package/dist/Extras/CommandPalette.cjs +1 -0
- package/dist/Extras/CommandPalette.css +1 -0
- package/dist/Extras/CommandPalette.d.cts +4 -0
- package/dist/Extras/CommandPalette.d.ts +4 -0
- package/dist/Extras/CommandPalette.js +1 -0
- package/dist/Extras/DateTimePicker.cjs +1 -0
- package/dist/Extras/DateTimePicker.css +1 -0
- package/dist/Extras/DateTimePicker.d.cts +5 -0
- package/dist/Extras/DateTimePicker.d.ts +5 -0
- package/dist/Extras/DateTimePicker.js +1 -0
- package/dist/Extras/FileExplorer.cjs +2 -2
- package/dist/Extras/FileExplorer.js +2 -2
- package/dist/Extras/Timeline.cjs +1 -0
- package/dist/Extras/Timeline.css +1 -0
- package/dist/Extras/Timeline.d.cts +6 -0
- package/dist/Extras/Timeline.d.ts +6 -0
- package/dist/Extras/Timeline.js +1 -0
- package/dist/Extras/index.cjs +4 -4
- package/dist/Extras/index.css +1 -1
- package/dist/Extras/index.d.cts +14 -0
- package/dist/Extras/index.d.ts +14 -0
- package/dist/Extras/index.js +4 -4
- package/dist/Feedback/Alert.cjs +1 -1
- package/dist/Feedback/Alert.js +1 -1
- package/dist/Feedback/ProgressBar.cjs +1 -1
- package/dist/Feedback/ProgressBar.js +1 -1
- package/dist/Feedback/Skeleton.cjs +1 -0
- package/dist/Feedback/Skeleton.d.cts +2 -0
- package/dist/Feedback/Skeleton.d.ts +2 -0
- package/dist/Feedback/Skeleton.js +1 -0
- package/dist/Feedback/Spin.cjs +2 -2
- package/dist/Feedback/Spin.js +2 -2
- package/dist/Feedback/Toast.cjs +1 -0
- package/dist/Feedback/Toast.d.cts +11 -0
- package/dist/Feedback/Toast.d.ts +11 -0
- package/dist/Feedback/Toast.js +1 -0
- package/dist/Feedback/index.cjs +2 -2
- package/dist/Feedback/index.d.cts +11 -0
- package/dist/Feedback/index.d.ts +11 -0
- package/dist/Feedback/index.js +2 -2
- package/dist/Forms/Select.cjs +1 -0
- package/dist/Forms/Select.css +1 -0
- package/dist/Forms/Select.d.cts +3 -0
- package/dist/Forms/Select.d.ts +3 -0
- package/dist/Forms/Select.js +1 -0
- package/dist/Navigation/Breadcrumb.cjs +1 -0
- package/dist/Navigation/Breadcrumb.d.cts +3 -0
- package/dist/Navigation/Breadcrumb.d.ts +3 -0
- package/dist/Navigation/Breadcrumb.js +1 -0
- package/dist/Navigation/Header.cjs +1 -1
- package/dist/Navigation/Header.js +1 -1
- package/dist/Navigation/Pagination.cjs +1 -0
- package/dist/Navigation/Pagination.d.cts +2 -0
- package/dist/Navigation/Pagination.d.ts +2 -0
- package/dist/Navigation/Pagination.js +1 -0
- package/dist/Navigation/RibbonBar.cjs +1 -0
- package/dist/Navigation/RibbonBar.d.cts +6 -0
- package/dist/Navigation/RibbonBar.d.ts +6 -0
- package/dist/Navigation/RibbonBar.js +1 -0
- package/dist/Navigation/SideNav.cjs +1 -1
- package/dist/Navigation/SideNav.js +1 -1
- package/dist/Navigation/index.cjs +2 -2
- package/dist/Navigation/index.d.cts +8 -0
- package/dist/Navigation/index.d.ts +8 -0
- package/dist/Navigation/index.js +2 -2
- package/dist/Overlay/ContextMenu.cjs +1 -0
- package/dist/Overlay/ContextMenu.d.cts +3 -0
- package/dist/Overlay/ContextMenu.d.ts +3 -0
- package/dist/Overlay/ContextMenu.js +1 -0
- package/dist/Overlay/Drawer.cjs +1 -0
- package/dist/Overlay/Drawer.css +1 -0
- package/dist/Overlay/Drawer.d.cts +10 -0
- package/dist/Overlay/Drawer.d.ts +10 -0
- package/dist/Overlay/Drawer.js +1 -0
- package/dist/Overlay/index.cjs +1 -1
- package/dist/Overlay/index.css +1 -0
- package/dist/Overlay/index.d.cts +8 -0
- package/dist/Overlay/index.d.ts +8 -0
- package/dist/Overlay/index.js +1 -1
- package/dist/Primitives/Avatar.cjs +1 -0
- package/dist/Primitives/Avatar.d.cts +4 -0
- package/dist/Primitives/Avatar.d.ts +4 -0
- package/dist/Primitives/Avatar.js +1 -0
- package/dist/Primitives/Badge.cjs +1 -1
- package/dist/Primitives/Badge.js +1 -1
- package/dist/Primitives/Button.cjs +1 -1
- package/dist/Primitives/Button.js +1 -1
- package/dist/Primitives/Checkbox.cjs +1 -1
- package/dist/Primitives/Checkbox.js +1 -1
- package/dist/Primitives/Dropdown.cjs +1 -1
- package/dist/Primitives/Dropdown.js +1 -1
- package/dist/Primitives/DropdownButton.cjs +1 -1
- package/dist/Primitives/DropdownButton.js +1 -1
- package/dist/Primitives/Indicator.cjs +1 -1
- package/dist/Primitives/Indicator.js +1 -1
- package/dist/Primitives/Input.cjs +1 -1
- package/dist/Primitives/Input.js +1 -1
- package/dist/Primitives/Label.cjs +1 -1
- package/dist/Primitives/Label.js +1 -1
- package/dist/Primitives/Radio.cjs +1 -1
- package/dist/Primitives/Radio.js +1 -1
- package/dist/Primitives/Slider.cjs +1 -0
- package/dist/Primitives/Slider.css +1 -0
- package/dist/Primitives/Slider.d.cts +4 -0
- package/dist/Primitives/Slider.d.ts +4 -0
- package/dist/Primitives/Slider.js +1 -0
- package/dist/Primitives/Switch.cjs +1 -1
- package/dist/Primitives/Switch.js +1 -1
- package/dist/Primitives/Tag.cjs +1 -0
- package/dist/Primitives/Tag.d.cts +2 -0
- package/dist/Primitives/Tag.d.ts +2 -0
- package/dist/Primitives/Tag.js +1 -0
- package/dist/Primitives/index.cjs +1 -1
- package/dist/Primitives/index.css +1 -0
- package/dist/Primitives/index.d.cts +6 -0
- package/dist/Primitives/index.d.ts +6 -0
- package/dist/Primitives/index.js +1 -1
- package/dist/_tsup-dts-rollup.d.cts +1130 -3
- package/dist/_tsup-dts-rollup.d.ts +1130 -3
- package/dist/index.cjs +5 -5
- package/dist/index.css +1 -1
- package/dist/index.d.cts +74 -0
- package/dist/index.d.ts +74 -0
- package/dist/index.js +5 -5
- package/dist/styles/DataDisplay/MetricCard.css +1 -0
- package/dist/styles/DataDisplay/Stat.css +1 -0
- package/dist/styles/Extras/CommandPalette.css +65 -0
- package/dist/styles/Extras/DateTimePicker.css +566 -0
- package/dist/styles/Extras/Timeline.css +52 -0
- package/dist/styles/Feedback/Skeleton.css +37 -0
- package/dist/styles/Feedback/Toast.css +77 -0
- package/dist/styles/Forms/Select.css +36 -0
- package/dist/styles/Navigation/RibbonBar.css +1 -0
- package/dist/styles/Overlay/ContextMenu.css +1 -0
- package/dist/styles/Overlay/Drawer.css +52 -0
- package/dist/styles/Primitives/Slider.css +4 -0
- package/dist/styles/Primitives/Tag.css +1 -0
- package/dist/styles/base.css +1059 -20
- package/dist/styles.css +1726 -18
- package/dist/theme.cjs +1 -1
- package/dist/theme.d.cts +7 -0
- package/dist/theme.d.ts +7 -0
- package/dist/theme.js +1 -1
- package/package.json +1 -1
package/dist/Chart/BarChart.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime');function G(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var O=classVarianceAuthority.cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),P=classVarianceAuthority.cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),K=classVarianceAuthority.cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function et(t){let[o,r]=react.useState(()=>new Set(t)),i=react.useCallback(s=>{r(h=>{let d=new Set(h);return d.has(s)?d.delete(s):d.add(s),d});},[]),a=react.useCallback(s=>o.has(s),[o]),m=react.useCallback(()=>{r(new Set(t));},[t]);return {visible:o,toggle:i,isVisible:a,showAll:m}}function nt(t){let o=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(r,i)=>o[i%o.length])}function q(t,o,r=.1){if(t===o)return [t-1,o+1];let a=(o-t)*r;return [Math.floor(t-a),Math.ceil(o+a)]}function ot(t,o,r){if(r<=1)return [t];let i=(o-t)/(r-1);return Array.from({length:r},(a,m)=>+(t+m*i).toFixed(10))}function Y(t,o){return o?o(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function J(t,o,r){return {top:20,right:r?65:20,bottom:t?52:36,left:o?65:52}}function Q(t,o,r){let i=Math.max(t,120);return {width:i,height:o,margins:r,plotLeft:r.left,plotTop:r.top,plotRight:i-r.right,plotBottom:o-r.bottom,plotWidth:Math.max(i-r.left-r.right,10),plotHeight:Math.max(o-r.top-r.bottom,10)}}function at(t,o){let r=new Set,i=[];for(let a of t)if(o.has(a.id))for(let m of a.data){let s=String(m.x);r.has(s)||(r.add(s),i.push(s));}return i}function it(t,o,r,i){if(r){let a=0;for(let s of t)if(o.has(s.id))for(let h of s.data)h.y>a&&(a=h.y);a===0&&(a=1);let[,m]=q(0,a,.05);return [i?.min??0,i?.max??m]}else {let a=new Map;for(let h of t)if(o.has(h.id))for(let d of h.data){let C=String(d.x);a.set(C,(a.get(C)??0)+d.y);}let m=Math.max(0,...a.values()),[,s]=q(0,m===0?1:m,.05);return [i?.min??0,i?.max??s]}}function st(t,o){let[r,i]=t,[a,m]=o;return i===r?()=>(a+m)/2:s=>a+(s-r)/(i-r)*(m-a)}function ct(t,o=5){return ot(t[0],t[1],o)}function lt(t,o,r,i,a,m,s,h,d,C,S){let v=t.filter(y=>o.has(y.id)),f=r.length,b=v.length;if(f===0||b===0)return [];let u=m/f,p=u*(1-C),k=b>0?p*(1-S)/b:0,x=[];for(let y=0;y<r.length;y++){let M=r[y],V=a+y*u+(u-p)/2;for(let B=0;B<v.length;B++){let g=v[B],F=g.data.find(H=>String(H.x)===M);if(!F)continue;let W=V+B*(k+p*S/b),$=d(F.y);x.push({seriesId:g.id,category:M,x:W,y:$,width:Math.max(k,1),height:Math.max(s-$,0),stackBase:s,value:F.y,color:i.get(g.id)??"var(--color-chart-1)"});}}return x}function ut(t,o,r,i,a,m,s,h,d,C){let S=t.filter(x=>o.has(x.id)),v=r.length,f=S.length;if(v===0||f===0)return [];let b=s/v,u=b*(1-d),p=f>0?u*(1-C)/f:0,k=[];for(let x=0;x<r.length;x++){let y=r[x],M=m+x*b+(b-u)/2;for(let V=0;V<S.length;V++){let B=S[V],g=B.data.find($=>String($.x)===y);if(!g)continue;let F=M+V*(p+u*C/Math.max(f,1)),W=h(g.y);k.push({seriesId:B.id,category:y,x:a,y:F,width:Math.max(W-a,0),height:Math.max(p,1),stackBase:a,value:g.y,color:i.get(B.id)??"var(--color-chart-1)"});}}return k}function mt(t,o,r,i,a,m,s,h,d){let C=t.filter(u=>o.has(u.id)),S=r.length;if(S===0)return [];let v=s/S*(1-d),f=[],b=new Map;r.forEach(u=>b.set(u,a));for(let u of C)for(let p of r){let k=u.data.find(B=>String(B.x)===p);if(!k)continue;let x=b.get(p)??a,y=Math.max(h(k.y)-a,0),M=r.indexOf(p),V=m+(M+.5)*(s/S);f.push({seriesId:u.id,category:p,x,y:V-v/2,width:y,height:Math.max(v,1),stackBase:x,value:k.y,color:i.get(u.id)??"var(--color-chart-1)"}),b.set(p,x+y);}return f}function pt(t,o,r,i,a,m,s,h,d){let C=t.filter(u=>o.has(u.id)),S=r.length;if(S===0)return [];let v=m/S*(1-d),f=[],b=new Map;r.forEach(u=>b.set(u,s));for(let u of C)for(let p of r){let k=u.data.find(g=>String(g.x)===p);if(!k)continue;let x=b.get(p)??s,y=Math.max(s-h(k.y),0),M=x-y,V=r.indexOf(p),B=a+(V+.5)*(m/S);f.push({seriesId:u.id,category:p,x:B-v/2,y:M,width:Math.max(v,1),height:y,stackBase:x,value:k.y,color:i.get(u.id)??"var(--color-chart-1)"}),b.set(p,M);}return f}function j({items:t,position:o,onToggle:r}){return jsxRuntime.jsx("div",{className:P({position:o}),children:t.map(i=>jsxRuntime.jsxs("button",{onClick:()=>r(i.id),className:G("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!i.visible&&"opacity-40"),"aria-pressed":i.visible,children:[jsxRuntime.jsx("span",{className:"h-2.5 w-5 rounded-sm shrink-0",style:{background:i.color}}),i.label]},i.id))})}function Jt({series:t,xAxis:o,yAxis:r,orientation:i="vertical",grouped:a=true,barRadius:m=4,barPadding:s=.2,groupPadding:h=.3,title:d,height:C=300,className:S,legend:v=true,legendPosition:f="bottom",animateOnMount:b=true,emptyText:u="No data to display"}){let p=react.useRef(null),k=react.useRef(null),[x,y]=react.useState(600),[M,V]=react.useState(null);react.useEffect(()=>{let e=k.current;if(!e)return;let c=e.getBoundingClientRect().width;c>0&&y(c);let T=new ResizeObserver(R=>{let D=R[0]?.contentRect.width;D&&D>0&&y(D);});return T.observe(e),()=>T.disconnect()},[]);let B=react.useMemo(()=>t.map(e=>e.id),[t]),{visible:g,toggle:F,isVisible:W}=et(B),$=react.useMemo(()=>nt(t.length),[t.length]),H=react.useMemo(()=>new Map(t.map((e,c)=>[e.id,e.color??$[c]])),[t,$]),w=i==="horizontal",U=react.useMemo(()=>J(!!o?.label,!!r?.label,false),[o?.label,r?.label]),n=react.useMemo(()=>Q(x,C,U),[x,C,U]),N=react.useMemo(()=>at(t,g),[t,g]),_=react.useMemo(()=>it(t,g,a,w?o:r),[t,g,a,w,o,r]),I=react.useMemo(()=>st(_,w?[n.plotLeft,n.plotRight]:[n.plotBottom,n.plotTop]),[_,n,w]),A=react.useMemo(()=>ct(_,(w?o:r)?.tickCount??5),[_,w,o,r]),dt=react.useMemo(()=>w?a?ut(t,g,N,H,n.plotLeft,n.plotTop,n.plotHeight,I,h,s):mt(t,g,N,H,n.plotLeft,n.plotTop,n.plotHeight,I,h):a?lt(t,g,N,H,n.plotLeft,n.plotWidth,n.plotBottom,n.plotTop,I,h,s):pt(t,g,N,H,n.plotLeft,n.plotWidth,n.plotBottom,I,h),[t,g,N,H,n,I,a,w,h,s]),bt=N.length>0?n.plotWidth/N.length:1,xt=N.length>0?n.plotHeight/N.length:1,tt=react.useCallback((e,c)=>{let T=p.current?.getBoundingClientRect();if(!T)return;let R=t.filter(D=>W(D.id)).map(D=>{let rt=D.data.find(St=>String(St.x)===c);return {name:D.name,value:rt?Y(rt.y,r?.format):"\u2014",color:H.get(D.id)??"var(--color-chart-1)"}});V({x:e.clientX-T.left+12,y:e.clientY-T.top-10,category:c,items:R});},[t,W,H,r?.format]),E=react.useMemo(()=>t.map((e,c)=>({id:e.id,label:e.name,color:e.color??$[c],visible:W(e.id)})),[t,$,W]),gt=t.some(e=>e.data.length>0),yt=f==="left"||f==="right",vt=jsxRuntime.jsxs("svg",{role:"img","aria-label":d??"Bar chart",width:n.width,height:n.height,viewBox:`0 0 ${n.width} ${n.height}`,shapeRendering:"geometricPrecision",children:[A.map(e=>{let c=I(e);return w?jsxRuntime.jsx("line",{x1:c,x2:c,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},e):jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:c,y2:c,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},e)}),dt.map(e=>{let c=Math.min(m,e.width/2,e.height/2),T=`${e.seriesId}-${e.category}`;return w?jsxRuntime.jsx("rect",{x:e.x,y:e.y,width:e.width,height:e.height,rx:c,fill:e.color,className:G("chart-bar-h",b&&"chart-bar-animate"),onMouseMove:R=>tt(R,e.category),onMouseLeave:()=>V(null)},T):jsxRuntime.jsx("rect",{x:e.x,y:e.y,width:e.width,height:e.height,rx:c,fill:e.color,className:G("chart-bar-v",b&&"chart-bar-animate"),onMouseMove:R=>tt(R,e.category),onMouseLeave:()=>V(null)},T)}),jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotLeft,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:n.plotBottom,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),!w&&A.map(e=>{let c=I(e);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:n.plotLeft-4,x2:n.plotLeft,y1:c,y2:c,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:n.plotLeft-6,y:c,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:Y(e,r?.format)})]},e)}),w&&A.map(e=>{let c=I(e);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:c,x2:c,y1:n.plotBottom,y2:n.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:c,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:Y(e,o?.format)})]},e)}),N.map((e,c)=>{if(w){let R=n.plotTop+(c+.5)*xt;return jsxRuntime.jsx("text",{x:n.plotLeft-6,y:R,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:e},e)}let T=n.plotLeft+(c+.5)*bt;return jsxRuntime.jsx("text",{x:T,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:e},e)}),r?.label&&!w&&jsxRuntime.jsx("text",{x:-(n.plotTop+n.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:r.label}),o?.label&&jsxRuntime.jsx("text",{x:n.plotLeft+n.plotWidth/2,y:n.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:o.label})]});return jsxRuntime.jsxs("div",{ref:p,className:G(O(),S),children:[d&&jsxRuntime.jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:d}),v&&f==="top"&&jsxRuntime.jsx(j,{items:E,position:"top",onToggle:F}),jsxRuntime.jsxs("div",{className:G("flex items-start",yt&&"gap-0"),children:[v&&f==="left"&&jsxRuntime.jsx(j,{items:E,position:"left",onToggle:F}),jsxRuntime.jsx("div",{ref:k,className:"flex-1 min-w-0 overflow-hidden",children:gt?vt:jsxRuntime.jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:C},children:u})}),v&&f==="right"&&jsxRuntime.jsx(j,{items:E,position:"right",onToggle:F})]}),v&&f==="bottom"&&jsxRuntime.jsx(j,{items:E,position:"bottom",onToggle:F}),M&&jsxRuntime.jsxs("div",{className:K(),style:{left:M.x,top:M.y},role:"tooltip",children:[jsxRuntime.jsx("div",{className:"mb-1 font-medium text-primary-200",children:M.category}),M.items.map((e,c)=>jsxRuntime.jsxs("div",{className:"flex items-center gap-1.5",children:[jsxRuntime.jsx("span",{className:"h-2 w-2 rounded-full shrink-0",style:{background:e.color}}),jsxRuntime.jsxs("span",{className:"text-primary-300",children:[e.name,":"]}),jsxRuntime.jsx("span",{className:"font-medium",children:e.value})]},c))]})]})}exports.BarChart=Jt;
|
|
1
|
+
'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime');function G(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var O=classVarianceAuthority.cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),P=classVarianceAuthority.cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),K=classVarianceAuthority.cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function et(t){let[o,r]=react.useState(()=>new Set(t)),i=react.useCallback(s=>{r(h=>{let f=new Set(h);return f.has(s)?f.delete(s):f.add(s),f});},[]),a=react.useCallback(s=>o.has(s),[o]),u=react.useCallback(()=>{r(new Set(t));},[t]);return {visible:o,toggle:i,isVisible:a,showAll:u}}function nt(t){let o=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(r,i)=>o[i%o.length])}function q(t,o,r=.1){if(t===o)return [t-1,o+1];let a=(o-t)*r;return [Math.floor(t-a),Math.ceil(o+a)]}function ot(t,o,r){if(r<=1)return [t];let i=(o-t)/(r-1);return Array.from({length:r},(a,u)=>+(t+u*i).toFixed(10))}function Y(t,o){return o?o(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function J(t,o,r){return {top:20,right:r?65:20,bottom:t?52:36,left:o?65:52}}function Q(t,o,r){let i=Math.max(t,120);return {width:i,height:o,margins:r,plotLeft:r.left,plotTop:r.top,plotRight:i-r.right,plotBottom:o-r.bottom,plotWidth:Math.max(i-r.left-r.right,10),plotHeight:Math.max(o-r.top-r.bottom,10)}}function at(t,o){let r=new Set,i=[];for(let a of t)if(o.has(a.id))for(let u of a.data){let s=String(u.x);r.has(s)||(r.add(s),i.push(s));}return i}function it(t,o,r,i){if(r){let a=0;for(let s of t)if(o.has(s.id))for(let h of s.data)h.y>a&&(a=h.y);a===0&&(a=1);let[,u]=q(0,a,.05);return [i?.min??0,i?.max??u]}else {let a=new Map;for(let h of t)if(o.has(h.id))for(let f of h.data){let C=String(f.x);a.set(C,(a.get(C)??0)+f.y);}let u=Math.max(0,...a.values()),[,s]=q(0,u===0?1:u,.05);return [i?.min??0,i?.max??s]}}function st(t,o){let[r,i]=t,[a,u]=o;return i===r?()=>(a+u)/2:s=>a+(s-r)/(i-r)*(u-a)}function ct(t,o=5){return ot(t[0],t[1],o)}function lt(t,o,r,i,a,u,s,h,f,C,S){let v=t.filter(y=>o.has(y.id)),d=r.length,b=v.length;if(d===0||b===0)return [];let m=u/d,p=m*(1-C),k=b>0?p*(1-S)/b:0,x=[];for(let y=0;y<r.length;y++){let V=r[y],M=a+y*m+(m-p)/2;for(let B=0;B<v.length;B++){let g=v[B],F=g.data.find(H=>String(H.x)===V);if(!F)continue;let W=M+B*(k+p*S/b),$=f(F.y);x.push({seriesId:g.id,category:V,x:W,y:$,width:Math.max(k,1),height:Math.max(s-$,0),stackBase:s,value:F.y,color:i.get(g.id)??"var(--color-chart-1)"});}}return x}function mt(t,o,r,i,a,u,s,h,f,C){let S=t.filter(x=>o.has(x.id)),v=r.length,d=S.length;if(v===0||d===0)return [];let b=s/v,m=b*(1-f),p=d>0?m*(1-C)/d:0,k=[];for(let x=0;x<r.length;x++){let y=r[x],V=u+x*b+(b-m)/2;for(let M=0;M<S.length;M++){let B=S[M],g=B.data.find($=>String($.x)===y);if(!g)continue;let F=V+M*(p+m*C/Math.max(d,1)),W=h(g.y);k.push({seriesId:B.id,category:y,x:a,y:F,width:Math.max(W-a,0),height:Math.max(p,1),stackBase:a,value:g.y,color:i.get(B.id)??"var(--color-chart-1)"});}}return k}function ut(t,o,r,i,a,u,s,h,f){let C=t.filter(m=>o.has(m.id)),S=r.length;if(S===0)return [];let v=s/S*(1-f),d=[],b=new Map;r.forEach(m=>b.set(m,a));for(let m of C)for(let p of r){let k=m.data.find(B=>String(B.x)===p);if(!k)continue;let x=b.get(p)??a,y=Math.max(h(k.y)-a,0),V=r.indexOf(p),M=u+(V+.5)*(s/S);d.push({seriesId:m.id,category:p,x,y:M-v/2,width:y,height:Math.max(v,1),stackBase:x,value:k.y,color:i.get(m.id)??"var(--color-chart-1)"}),b.set(p,x+y);}return d}function pt(t,o,r,i,a,u,s,h,f){let C=t.filter(m=>o.has(m.id)),S=r.length;if(S===0)return [];let v=u/S*(1-f),d=[],b=new Map;r.forEach(m=>b.set(m,s));for(let m of C)for(let p of r){let k=m.data.find(g=>String(g.x)===p);if(!k)continue;let x=b.get(p)??s,y=Math.max(s-h(k.y),0),V=x-y,M=r.indexOf(p),B=a+(M+.5)*(u/S);d.push({seriesId:m.id,category:p,x:B-v/2,y:V,width:Math.max(v,1),height:y,stackBase:x,value:k.y,color:i.get(m.id)??"var(--color-chart-1)"}),b.set(p,V);}return d}function j({items:t,position:o,onToggle:r}){return jsxRuntime.jsx("div",{className:P({position:o}),children:t.map(i=>jsxRuntime.jsxs("button",{onClick:()=>r(i.id),className:G("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!i.visible&&"opacity-40"),"aria-pressed":i.visible,children:[jsxRuntime.jsx("span",{className:"h-2.5 w-5 rounded-sm shrink-0",style:{background:i.color}}),i.label]},i.id))})}function Jt({series:t,xAxis:o,yAxis:r,orientation:i="vertical",grouped:a=true,barRadius:u=4,barPadding:s=.2,groupPadding:h=.3,title:f,height:C=300,className:S,legend:v=true,legendPosition:d="bottom",animateOnMount:b=true,emptyText:m="No data to display"}){let p=react.useRef(null),k=react.useRef(null),[x,y]=react.useState(600),[V,M]=react.useState(null);react.useEffect(()=>{let e=k.current;if(!e)return;let c=e.getBoundingClientRect().width;c>0&&y(c);let T=new ResizeObserver(R=>{let D=R[0]?.contentRect.width;D&&D>0&&y(D);});return T.observe(e),()=>T.disconnect()},[]);let B=react.useMemo(()=>t.map(e=>e.id),[t]),{visible:g,toggle:F,isVisible:W}=et(B),$=react.useMemo(()=>nt(t.length),[t.length]),H=react.useMemo(()=>new Map(t.map((e,c)=>[e.id,e.color??$[c]])),[t,$]),w=i==="horizontal",U=react.useMemo(()=>J(!!o?.label,!!r?.label,false),[o?.label,r?.label]),n=react.useMemo(()=>Q(x,C,U),[x,C,U]),N=react.useMemo(()=>at(t,g),[t,g]),_=react.useMemo(()=>it(t,g,a,w?o:r),[t,g,a,w,o,r]),I=react.useMemo(()=>st(_,w?[n.plotLeft,n.plotRight]:[n.plotBottom,n.plotTop]),[_,n,w]),A=react.useMemo(()=>ct(_,(w?o:r)?.tickCount??5),[_,w,o,r]),ft=react.useMemo(()=>w?a?mt(t,g,N,H,n.plotLeft,n.plotTop,n.plotHeight,I,h,s):ut(t,g,N,H,n.plotLeft,n.plotTop,n.plotHeight,I,h):a?lt(t,g,N,H,n.plotLeft,n.plotWidth,n.plotBottom,n.plotTop,I,h,s):pt(t,g,N,H,n.plotLeft,n.plotWidth,n.plotBottom,I,h),[t,g,N,H,n,I,a,w,h,s]),bt=N.length>0?n.plotWidth/N.length:1,xt=N.length>0?n.plotHeight/N.length:1,tt=react.useCallback((e,c)=>{let T=p.current?.getBoundingClientRect();if(!T)return;let R=t.filter(D=>W(D.id)).map(D=>{let rt=D.data.find(St=>String(St.x)===c);return {name:D.name,value:rt?Y(rt.y,r?.format):"\u2014",color:H.get(D.id)??"var(--color-chart-1)"}});M({x:e.clientX-T.left+12,y:e.clientY-T.top-10,category:c,items:R});},[t,W,H,r?.format]),E=react.useMemo(()=>t.map((e,c)=>({id:e.id,label:e.name,color:e.color??$[c],visible:W(e.id)})),[t,$,W]),gt=t.some(e=>e.data.length>0),yt=d==="left"||d==="right",vt=jsxRuntime.jsxs("svg",{role:"img","aria-label":f??"Bar chart",width:n.width,height:n.height,viewBox:`0 0 ${n.width} ${n.height}`,shapeRendering:"geometricPrecision",children:[A.map(e=>{let c=I(e);return w?jsxRuntime.jsx("line",{x1:c,x2:c,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},e):jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:c,y2:c,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},e)}),ft.map(e=>{let c=Math.min(u,e.width/2,e.height/2),T=`${e.seriesId}-${e.category}`;return w?jsxRuntime.jsx("rect",{x:e.x,y:e.y,width:e.width,height:e.height,rx:c,fill:e.color,className:G("chart-bar-h",b&&"chart-bar-animate"),onMouseMove:R=>tt(R,e.category),onMouseLeave:()=>M(null)},T):jsxRuntime.jsx("rect",{x:e.x,y:e.y,width:e.width,height:e.height,rx:c,fill:e.color,className:G("chart-bar-v",b&&"chart-bar-animate"),onMouseMove:R=>tt(R,e.category),onMouseLeave:()=>M(null)},T)}),jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotLeft,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:n.plotBottom,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),!w&&A.map(e=>{let c=I(e);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:n.plotLeft-4,x2:n.plotLeft,y1:c,y2:c,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:n.plotLeft-6,y:c,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:Y(e,r?.format)})]},e)}),w&&A.map(e=>{let c=I(e);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:c,x2:c,y1:n.plotBottom,y2:n.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:c,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:Y(e,o?.format)})]},e)}),N.map((e,c)=>{if(w){let R=n.plotTop+(c+.5)*xt;return jsxRuntime.jsx("text",{x:n.plotLeft-6,y:R,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:e},e)}let T=n.plotLeft+(c+.5)*bt;return jsxRuntime.jsx("text",{x:T,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:e},e)}),r?.label&&!w&&jsxRuntime.jsx("text",{x:-(n.plotTop+n.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:r.label}),o?.label&&jsxRuntime.jsx("text",{x:n.plotLeft+n.plotWidth/2,y:n.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:o.label})]});return jsxRuntime.jsxs("div",{ref:p,className:G(O(),S),children:[f&&jsxRuntime.jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:f}),v&&d==="top"&&jsxRuntime.jsx(j,{items:E,position:"top",onToggle:F}),jsxRuntime.jsxs("div",{className:G("flex items-start",yt&&"gap-0"),children:[v&&d==="left"&&jsxRuntime.jsx(j,{items:E,position:"left",onToggle:F}),jsxRuntime.jsx("div",{ref:k,className:"flex-1 min-w-0 overflow-hidden",children:gt?vt:jsxRuntime.jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:C},children:m})}),v&&d==="right"&&jsxRuntime.jsx(j,{items:E,position:"right",onToggle:F})]}),v&&d==="bottom"&&jsxRuntime.jsx(j,{items:E,position:"bottom",onToggle:F}),V&&jsxRuntime.jsxs("div",{className:K(),style:{left:V.x,top:V.y},role:"tooltip",children:[jsxRuntime.jsx("div",{className:"mb-1 font-medium text-primary-200",children:V.category}),V.items.map((e,c)=>jsxRuntime.jsxs("div",{className:"flex items-center gap-1.5",children:[jsxRuntime.jsx("span",{className:"h-2 w-2 rounded-full shrink-0",style:{background:e.color}}),jsxRuntime.jsxs("span",{className:"text-primary-300",children:[e.name,":"]}),jsxRuntime.jsx("span",{className:"font-medium",children:e.value})]},c))]})]})}exports.BarChart=Jt;
|
package/dist/Chart/BarChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {useRef,useState,useEffect,useMemo,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';function G(...t){return twMerge(clsx(t))}var O=cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),P=cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),K=cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function et(t){let[o,r]=useState(()=>new Set(t)),i=useCallback(s=>{r(h=>{let d=new Set(h);return d.has(s)?d.delete(s):d.add(s),d});},[]),a=useCallback(s=>o.has(s),[o]),m=useCallback(()=>{r(new Set(t));},[t]);return {visible:o,toggle:i,isVisible:a,showAll:m}}function nt(t){let o=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(r,i)=>o[i%o.length])}function q(t,o,r=.1){if(t===o)return [t-1,o+1];let a=(o-t)*r;return [Math.floor(t-a),Math.ceil(o+a)]}function ot(t,o,r){if(r<=1)return [t];let i=(o-t)/(r-1);return Array.from({length:r},(a,m)=>+(t+m*i).toFixed(10))}function Y(t,o){return o?o(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function J(t,o,r){return {top:20,right:r?65:20,bottom:t?52:36,left:o?65:52}}function Q(t,o,r){let i=Math.max(t,120);return {width:i,height:o,margins:r,plotLeft:r.left,plotTop:r.top,plotRight:i-r.right,plotBottom:o-r.bottom,plotWidth:Math.max(i-r.left-r.right,10),plotHeight:Math.max(o-r.top-r.bottom,10)}}function at(t,o){let r=new Set,i=[];for(let a of t)if(o.has(a.id))for(let m of a.data){let s=String(m.x);r.has(s)||(r.add(s),i.push(s));}return i}function it(t,o,r,i){if(r){let a=0;for(let s of t)if(o.has(s.id))for(let h of s.data)h.y>a&&(a=h.y);a===0&&(a=1);let[,m]=q(0,a,.05);return [i?.min??0,i?.max??m]}else {let a=new Map;for(let h of t)if(o.has(h.id))for(let d of h.data){let C=String(d.x);a.set(C,(a.get(C)??0)+d.y);}let m=Math.max(0,...a.values()),[,s]=q(0,m===0?1:m,.05);return [i?.min??0,i?.max??s]}}function st(t,o){let[r,i]=t,[a,m]=o;return i===r?()=>(a+m)/2:s=>a+(s-r)/(i-r)*(m-a)}function ct(t,o=5){return ot(t[0],t[1],o)}function lt(t,o,r,i,a,m,s,h,d,C,S){let v=t.filter(y=>o.has(y.id)),f=r.length,b=v.length;if(f===0||b===0)return [];let u=m/f,p=u*(1-C),k=b>0?p*(1-S)/b:0,x=[];for(let y=0;y<r.length;y++){let M=r[y],V=a+y*u+(u-p)/2;for(let B=0;B<v.length;B++){let g=v[B],F=g.data.find(H=>String(H.x)===M);if(!F)continue;let W=V+B*(k+p*S/b),$=d(F.y);x.push({seriesId:g.id,category:M,x:W,y:$,width:Math.max(k,1),height:Math.max(s-$,0),stackBase:s,value:F.y,color:i.get(g.id)??"var(--color-chart-1)"});}}return x}function ut(t,o,r,i,a,m,s,h,d,C){let S=t.filter(x=>o.has(x.id)),v=r.length,f=S.length;if(v===0||f===0)return [];let b=s/v,u=b*(1-d),p=f>0?u*(1-C)/f:0,k=[];for(let x=0;x<r.length;x++){let y=r[x],M=m+x*b+(b-u)/2;for(let V=0;V<S.length;V++){let B=S[V],g=B.data.find($=>String($.x)===y);if(!g)continue;let F=M+V*(p+u*C/Math.max(f,1)),W=h(g.y);k.push({seriesId:B.id,category:y,x:a,y:F,width:Math.max(W-a,0),height:Math.max(p,1),stackBase:a,value:g.y,color:i.get(B.id)??"var(--color-chart-1)"});}}return k}function mt(t,o,r,i,a,m,s,h,d){let C=t.filter(u=>o.has(u.id)),S=r.length;if(S===0)return [];let v=s/S*(1-d),f=[],b=new Map;r.forEach(u=>b.set(u,a));for(let u of C)for(let p of r){let k=u.data.find(B=>String(B.x)===p);if(!k)continue;let x=b.get(p)??a,y=Math.max(h(k.y)-a,0),M=r.indexOf(p),V=m+(M+.5)*(s/S);f.push({seriesId:u.id,category:p,x,y:V-v/2,width:y,height:Math.max(v,1),stackBase:x,value:k.y,color:i.get(u.id)??"var(--color-chart-1)"}),b.set(p,x+y);}return f}function pt(t,o,r,i,a,m,s,h,d){let C=t.filter(u=>o.has(u.id)),S=r.length;if(S===0)return [];let v=m/S*(1-d),f=[],b=new Map;r.forEach(u=>b.set(u,s));for(let u of C)for(let p of r){let k=u.data.find(g=>String(g.x)===p);if(!k)continue;let x=b.get(p)??s,y=Math.max(s-h(k.y),0),M=x-y,V=r.indexOf(p),B=a+(V+.5)*(m/S);f.push({seriesId:u.id,category:p,x:B-v/2,y:M,width:Math.max(v,1),height:y,stackBase:x,value:k.y,color:i.get(u.id)??"var(--color-chart-1)"}),b.set(p,M);}return f}function j({items:t,position:o,onToggle:r}){return jsx("div",{className:P({position:o}),children:t.map(i=>jsxs("button",{onClick:()=>r(i.id),className:G("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!i.visible&&"opacity-40"),"aria-pressed":i.visible,children:[jsx("span",{className:"h-2.5 w-5 rounded-sm shrink-0",style:{background:i.color}}),i.label]},i.id))})}function Jt({series:t,xAxis:o,yAxis:r,orientation:i="vertical",grouped:a=true,barRadius:m=4,barPadding:s=.2,groupPadding:h=.3,title:d,height:C=300,className:S,legend:v=true,legendPosition:f="bottom",animateOnMount:b=true,emptyText:u="No data to display"}){let p=useRef(null),k=useRef(null),[x,y]=useState(600),[M,V]=useState(null);useEffect(()=>{let e=k.current;if(!e)return;let c=e.getBoundingClientRect().width;c>0&&y(c);let T=new ResizeObserver(R=>{let D=R[0]?.contentRect.width;D&&D>0&&y(D);});return T.observe(e),()=>T.disconnect()},[]);let B=useMemo(()=>t.map(e=>e.id),[t]),{visible:g,toggle:F,isVisible:W}=et(B),$=useMemo(()=>nt(t.length),[t.length]),H=useMemo(()=>new Map(t.map((e,c)=>[e.id,e.color??$[c]])),[t,$]),w=i==="horizontal",U=useMemo(()=>J(!!o?.label,!!r?.label,false),[o?.label,r?.label]),n=useMemo(()=>Q(x,C,U),[x,C,U]),N=useMemo(()=>at(t,g),[t,g]),_=useMemo(()=>it(t,g,a,w?o:r),[t,g,a,w,o,r]),I=useMemo(()=>st(_,w?[n.plotLeft,n.plotRight]:[n.plotBottom,n.plotTop]),[_,n,w]),A=useMemo(()=>ct(_,(w?o:r)?.tickCount??5),[_,w,o,r]),dt=useMemo(()=>w?a?ut(t,g,N,H,n.plotLeft,n.plotTop,n.plotHeight,I,h,s):mt(t,g,N,H,n.plotLeft,n.plotTop,n.plotHeight,I,h):a?lt(t,g,N,H,n.plotLeft,n.plotWidth,n.plotBottom,n.plotTop,I,h,s):pt(t,g,N,H,n.plotLeft,n.plotWidth,n.plotBottom,I,h),[t,g,N,H,n,I,a,w,h,s]),bt=N.length>0?n.plotWidth/N.length:1,xt=N.length>0?n.plotHeight/N.length:1,tt=useCallback((e,c)=>{let T=p.current?.getBoundingClientRect();if(!T)return;let R=t.filter(D=>W(D.id)).map(D=>{let rt=D.data.find(St=>String(St.x)===c);return {name:D.name,value:rt?Y(rt.y,r?.format):"\u2014",color:H.get(D.id)??"var(--color-chart-1)"}});V({x:e.clientX-T.left+12,y:e.clientY-T.top-10,category:c,items:R});},[t,W,H,r?.format]),E=useMemo(()=>t.map((e,c)=>({id:e.id,label:e.name,color:e.color??$[c],visible:W(e.id)})),[t,$,W]),gt=t.some(e=>e.data.length>0),yt=f==="left"||f==="right",vt=jsxs("svg",{role:"img","aria-label":d??"Bar chart",width:n.width,height:n.height,viewBox:`0 0 ${n.width} ${n.height}`,shapeRendering:"geometricPrecision",children:[A.map(e=>{let c=I(e);return w?jsx("line",{x1:c,x2:c,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},e):jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:c,y2:c,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},e)}),dt.map(e=>{let c=Math.min(m,e.width/2,e.height/2),T=`${e.seriesId}-${e.category}`;return w?jsx("rect",{x:e.x,y:e.y,width:e.width,height:e.height,rx:c,fill:e.color,className:G("chart-bar-h",b&&"chart-bar-animate"),onMouseMove:R=>tt(R,e.category),onMouseLeave:()=>V(null)},T):jsx("rect",{x:e.x,y:e.y,width:e.width,height:e.height,rx:c,fill:e.color,className:G("chart-bar-v",b&&"chart-bar-animate"),onMouseMove:R=>tt(R,e.category),onMouseLeave:()=>V(null)},T)}),jsx("line",{x1:n.plotLeft,x2:n.plotLeft,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:n.plotBottom,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),!w&&A.map(e=>{let c=I(e);return jsxs("g",{children:[jsx("line",{x1:n.plotLeft-4,x2:n.plotLeft,y1:c,y2:c,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:n.plotLeft-6,y:c,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:Y(e,r?.format)})]},e)}),w&&A.map(e=>{let c=I(e);return jsxs("g",{children:[jsx("line",{x1:c,x2:c,y1:n.plotBottom,y2:n.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:c,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:Y(e,o?.format)})]},e)}),N.map((e,c)=>{if(w){let R=n.plotTop+(c+.5)*xt;return jsx("text",{x:n.plotLeft-6,y:R,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:e},e)}let T=n.plotLeft+(c+.5)*bt;return jsx("text",{x:T,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:e},e)}),r?.label&&!w&&jsx("text",{x:-(n.plotTop+n.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:r.label}),o?.label&&jsx("text",{x:n.plotLeft+n.plotWidth/2,y:n.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:o.label})]});return jsxs("div",{ref:p,className:G(O(),S),children:[d&&jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:d}),v&&f==="top"&&jsx(j,{items:E,position:"top",onToggle:F}),jsxs("div",{className:G("flex items-start",yt&&"gap-0"),children:[v&&f==="left"&&jsx(j,{items:E,position:"left",onToggle:F}),jsx("div",{ref:k,className:"flex-1 min-w-0 overflow-hidden",children:gt?vt:jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:C},children:u})}),v&&f==="right"&&jsx(j,{items:E,position:"right",onToggle:F})]}),v&&f==="bottom"&&jsx(j,{items:E,position:"bottom",onToggle:F}),M&&jsxs("div",{className:K(),style:{left:M.x,top:M.y},role:"tooltip",children:[jsx("div",{className:"mb-1 font-medium text-primary-200",children:M.category}),M.items.map((e,c)=>jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("span",{className:"h-2 w-2 rounded-full shrink-0",style:{background:e.color}}),jsxs("span",{className:"text-primary-300",children:[e.name,":"]}),jsx("span",{className:"font-medium",children:e.value})]},c))]})]})}export{Jt as BarChart};
|
|
1
|
+
import {useRef,useState,useEffect,useMemo,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';function G(...t){return twMerge(clsx(t))}var O=cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),P=cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),K=cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function et(t){let[o,r]=useState(()=>new Set(t)),i=useCallback(s=>{r(h=>{let f=new Set(h);return f.has(s)?f.delete(s):f.add(s),f});},[]),a=useCallback(s=>o.has(s),[o]),u=useCallback(()=>{r(new Set(t));},[t]);return {visible:o,toggle:i,isVisible:a,showAll:u}}function nt(t){let o=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(r,i)=>o[i%o.length])}function q(t,o,r=.1){if(t===o)return [t-1,o+1];let a=(o-t)*r;return [Math.floor(t-a),Math.ceil(o+a)]}function ot(t,o,r){if(r<=1)return [t];let i=(o-t)/(r-1);return Array.from({length:r},(a,u)=>+(t+u*i).toFixed(10))}function Y(t,o){return o?o(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function J(t,o,r){return {top:20,right:r?65:20,bottom:t?52:36,left:o?65:52}}function Q(t,o,r){let i=Math.max(t,120);return {width:i,height:o,margins:r,plotLeft:r.left,plotTop:r.top,plotRight:i-r.right,plotBottom:o-r.bottom,plotWidth:Math.max(i-r.left-r.right,10),plotHeight:Math.max(o-r.top-r.bottom,10)}}function at(t,o){let r=new Set,i=[];for(let a of t)if(o.has(a.id))for(let u of a.data){let s=String(u.x);r.has(s)||(r.add(s),i.push(s));}return i}function it(t,o,r,i){if(r){let a=0;for(let s of t)if(o.has(s.id))for(let h of s.data)h.y>a&&(a=h.y);a===0&&(a=1);let[,u]=q(0,a,.05);return [i?.min??0,i?.max??u]}else {let a=new Map;for(let h of t)if(o.has(h.id))for(let f of h.data){let C=String(f.x);a.set(C,(a.get(C)??0)+f.y);}let u=Math.max(0,...a.values()),[,s]=q(0,u===0?1:u,.05);return [i?.min??0,i?.max??s]}}function st(t,o){let[r,i]=t,[a,u]=o;return i===r?()=>(a+u)/2:s=>a+(s-r)/(i-r)*(u-a)}function ct(t,o=5){return ot(t[0],t[1],o)}function lt(t,o,r,i,a,u,s,h,f,C,S){let v=t.filter(y=>o.has(y.id)),d=r.length,b=v.length;if(d===0||b===0)return [];let m=u/d,p=m*(1-C),k=b>0?p*(1-S)/b:0,x=[];for(let y=0;y<r.length;y++){let V=r[y],M=a+y*m+(m-p)/2;for(let B=0;B<v.length;B++){let g=v[B],F=g.data.find(H=>String(H.x)===V);if(!F)continue;let W=M+B*(k+p*S/b),$=f(F.y);x.push({seriesId:g.id,category:V,x:W,y:$,width:Math.max(k,1),height:Math.max(s-$,0),stackBase:s,value:F.y,color:i.get(g.id)??"var(--color-chart-1)"});}}return x}function mt(t,o,r,i,a,u,s,h,f,C){let S=t.filter(x=>o.has(x.id)),v=r.length,d=S.length;if(v===0||d===0)return [];let b=s/v,m=b*(1-f),p=d>0?m*(1-C)/d:0,k=[];for(let x=0;x<r.length;x++){let y=r[x],V=u+x*b+(b-m)/2;for(let M=0;M<S.length;M++){let B=S[M],g=B.data.find($=>String($.x)===y);if(!g)continue;let F=V+M*(p+m*C/Math.max(d,1)),W=h(g.y);k.push({seriesId:B.id,category:y,x:a,y:F,width:Math.max(W-a,0),height:Math.max(p,1),stackBase:a,value:g.y,color:i.get(B.id)??"var(--color-chart-1)"});}}return k}function ut(t,o,r,i,a,u,s,h,f){let C=t.filter(m=>o.has(m.id)),S=r.length;if(S===0)return [];let v=s/S*(1-f),d=[],b=new Map;r.forEach(m=>b.set(m,a));for(let m of C)for(let p of r){let k=m.data.find(B=>String(B.x)===p);if(!k)continue;let x=b.get(p)??a,y=Math.max(h(k.y)-a,0),V=r.indexOf(p),M=u+(V+.5)*(s/S);d.push({seriesId:m.id,category:p,x,y:M-v/2,width:y,height:Math.max(v,1),stackBase:x,value:k.y,color:i.get(m.id)??"var(--color-chart-1)"}),b.set(p,x+y);}return d}function pt(t,o,r,i,a,u,s,h,f){let C=t.filter(m=>o.has(m.id)),S=r.length;if(S===0)return [];let v=u/S*(1-f),d=[],b=new Map;r.forEach(m=>b.set(m,s));for(let m of C)for(let p of r){let k=m.data.find(g=>String(g.x)===p);if(!k)continue;let x=b.get(p)??s,y=Math.max(s-h(k.y),0),V=x-y,M=r.indexOf(p),B=a+(M+.5)*(u/S);d.push({seriesId:m.id,category:p,x:B-v/2,y:V,width:Math.max(v,1),height:y,stackBase:x,value:k.y,color:i.get(m.id)??"var(--color-chart-1)"}),b.set(p,V);}return d}function j({items:t,position:o,onToggle:r}){return jsx("div",{className:P({position:o}),children:t.map(i=>jsxs("button",{onClick:()=>r(i.id),className:G("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!i.visible&&"opacity-40"),"aria-pressed":i.visible,children:[jsx("span",{className:"h-2.5 w-5 rounded-sm shrink-0",style:{background:i.color}}),i.label]},i.id))})}function Jt({series:t,xAxis:o,yAxis:r,orientation:i="vertical",grouped:a=true,barRadius:u=4,barPadding:s=.2,groupPadding:h=.3,title:f,height:C=300,className:S,legend:v=true,legendPosition:d="bottom",animateOnMount:b=true,emptyText:m="No data to display"}){let p=useRef(null),k=useRef(null),[x,y]=useState(600),[V,M]=useState(null);useEffect(()=>{let e=k.current;if(!e)return;let c=e.getBoundingClientRect().width;c>0&&y(c);let T=new ResizeObserver(R=>{let D=R[0]?.contentRect.width;D&&D>0&&y(D);});return T.observe(e),()=>T.disconnect()},[]);let B=useMemo(()=>t.map(e=>e.id),[t]),{visible:g,toggle:F,isVisible:W}=et(B),$=useMemo(()=>nt(t.length),[t.length]),H=useMemo(()=>new Map(t.map((e,c)=>[e.id,e.color??$[c]])),[t,$]),w=i==="horizontal",U=useMemo(()=>J(!!o?.label,!!r?.label,false),[o?.label,r?.label]),n=useMemo(()=>Q(x,C,U),[x,C,U]),N=useMemo(()=>at(t,g),[t,g]),_=useMemo(()=>it(t,g,a,w?o:r),[t,g,a,w,o,r]),I=useMemo(()=>st(_,w?[n.plotLeft,n.plotRight]:[n.plotBottom,n.plotTop]),[_,n,w]),A=useMemo(()=>ct(_,(w?o:r)?.tickCount??5),[_,w,o,r]),ft=useMemo(()=>w?a?mt(t,g,N,H,n.plotLeft,n.plotTop,n.plotHeight,I,h,s):ut(t,g,N,H,n.plotLeft,n.plotTop,n.plotHeight,I,h):a?lt(t,g,N,H,n.plotLeft,n.plotWidth,n.plotBottom,n.plotTop,I,h,s):pt(t,g,N,H,n.plotLeft,n.plotWidth,n.plotBottom,I,h),[t,g,N,H,n,I,a,w,h,s]),bt=N.length>0?n.plotWidth/N.length:1,xt=N.length>0?n.plotHeight/N.length:1,tt=useCallback((e,c)=>{let T=p.current?.getBoundingClientRect();if(!T)return;let R=t.filter(D=>W(D.id)).map(D=>{let rt=D.data.find(St=>String(St.x)===c);return {name:D.name,value:rt?Y(rt.y,r?.format):"\u2014",color:H.get(D.id)??"var(--color-chart-1)"}});M({x:e.clientX-T.left+12,y:e.clientY-T.top-10,category:c,items:R});},[t,W,H,r?.format]),E=useMemo(()=>t.map((e,c)=>({id:e.id,label:e.name,color:e.color??$[c],visible:W(e.id)})),[t,$,W]),gt=t.some(e=>e.data.length>0),yt=d==="left"||d==="right",vt=jsxs("svg",{role:"img","aria-label":f??"Bar chart",width:n.width,height:n.height,viewBox:`0 0 ${n.width} ${n.height}`,shapeRendering:"geometricPrecision",children:[A.map(e=>{let c=I(e);return w?jsx("line",{x1:c,x2:c,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},e):jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:c,y2:c,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},e)}),ft.map(e=>{let c=Math.min(u,e.width/2,e.height/2),T=`${e.seriesId}-${e.category}`;return w?jsx("rect",{x:e.x,y:e.y,width:e.width,height:e.height,rx:c,fill:e.color,className:G("chart-bar-h",b&&"chart-bar-animate"),onMouseMove:R=>tt(R,e.category),onMouseLeave:()=>M(null)},T):jsx("rect",{x:e.x,y:e.y,width:e.width,height:e.height,rx:c,fill:e.color,className:G("chart-bar-v",b&&"chart-bar-animate"),onMouseMove:R=>tt(R,e.category),onMouseLeave:()=>M(null)},T)}),jsx("line",{x1:n.plotLeft,x2:n.plotLeft,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:n.plotBottom,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),!w&&A.map(e=>{let c=I(e);return jsxs("g",{children:[jsx("line",{x1:n.plotLeft-4,x2:n.plotLeft,y1:c,y2:c,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:n.plotLeft-6,y:c,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:Y(e,r?.format)})]},e)}),w&&A.map(e=>{let c=I(e);return jsxs("g",{children:[jsx("line",{x1:c,x2:c,y1:n.plotBottom,y2:n.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:c,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:Y(e,o?.format)})]},e)}),N.map((e,c)=>{if(w){let R=n.plotTop+(c+.5)*xt;return jsx("text",{x:n.plotLeft-6,y:R,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:e},e)}let T=n.plotLeft+(c+.5)*bt;return jsx("text",{x:T,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:e},e)}),r?.label&&!w&&jsx("text",{x:-(n.plotTop+n.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:r.label}),o?.label&&jsx("text",{x:n.plotLeft+n.plotWidth/2,y:n.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:o.label})]});return jsxs("div",{ref:p,className:G(O(),S),children:[f&&jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:f}),v&&d==="top"&&jsx(j,{items:E,position:"top",onToggle:F}),jsxs("div",{className:G("flex items-start",yt&&"gap-0"),children:[v&&d==="left"&&jsx(j,{items:E,position:"left",onToggle:F}),jsx("div",{ref:k,className:"flex-1 min-w-0 overflow-hidden",children:gt?vt:jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:C},children:m})}),v&&d==="right"&&jsx(j,{items:E,position:"right",onToggle:F})]}),v&&d==="bottom"&&jsx(j,{items:E,position:"bottom",onToggle:F}),V&&jsxs("div",{className:K(),style:{left:V.x,top:V.y},role:"tooltip",children:[jsx("div",{className:"mb-1 font-medium text-primary-200",children:V.category}),V.items.map((e,c)=>jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("span",{className:"h-2 w-2 rounded-full shrink-0",style:{background:e.color}}),jsxs("span",{className:"text-primary-300",children:[e.name,":"]}),jsx("span",{className:"font-medium",children:e.value})]},c))]})]})}export{Jt as BarChart};
|
package/dist/Chart/LineChart.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime');function P(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var rt=classVarianceAuthority.cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),nt=classVarianceAuthority.cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),at=classVarianceAuthority.cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function Mt(t){let[r,a]=react.useState(()=>new Set(t)),e=react.useCallback(s=>{a(k=>{let p=new Set(k);return p.has(s)?p.delete(s):p.add(s),p});},[]),l=react.useCallback(s=>r.has(s),[r]),m=react.useCallback(()=>{a(new Set(t));},[t]);return {visible:r,toggle:e,isVisible:l,showAll:m}}function Tt(t){let r=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(a,e)=>r[e%r.length])}function wt(t,r,a=.1){if(t===r)return [t-1,r+1];let l=(r-t)*a;return [Math.floor(t-l),Math.ceil(r+l)]}function Rt(t,r,a){if(a<=1)return [t];let e=(r-t)/(a-1);return Array.from({length:a},(l,m)=>+(t+m*e).toFixed(10))}function $(t,r){return r?r(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function Nt(t,r,a){return {top:20,right:a?65:20,bottom:t?52:36,left:r?65:52}}function St(t,r,a){let e=Math.max(t,120);return {width:e,height:r,margins:a,plotLeft:a.left,plotTop:a.top,plotRight:e-a.right,plotBottom:r-a.bottom,plotWidth:Math.max(e-a.left-a.right,10),plotHeight:Math.max(r-a.top-a.bottom,10)}}function Ft(t,r){let a=new Set,e=[];for(let l of t)if(r.has(l.id))for(let m of l.data){let s=String(m.x);a.has(s)||(a.add(s),e.push(s));}return e}function lt(t,r,a){let e=1/0,l=-1/0;for(let k of t)if(r.has(k.id))for(let p of k.data)p.y<e&&(e=p.y),p.y>l&&(l=p.y);if(!isFinite(e))return [0,1];let[m,s]=wt(e,l);return [a?.min??m,a?.max??s]}function G(t,r){let[a,e]=t,[l,m]=r;return e===a?()=>(l+m)/2:s=>l+(s-a)/(e-a)*(m-l)}function K(t,r){let a=t.length;if(a===0)return ()=>(r[0]+r[1])/2;let e=(r[1]-r[0])/a;return l=>{let m=t.indexOf(l);return m<0?(r[0]+r[1])/2:r[0]+m*e+e/2}}function $t(t,r,a){return t.map(e=>`${r(e.x).toFixed(2)},${a(e.y).toFixed(2)}`).join(" ")}function st(t,r,a){if(t.length===0)return "";let e=t.map(s=>({x:r(s.x),y:a(s.y)}));if(e.length===1)return `M ${e[0].x.toFixed(2)} ${e[0].y.toFixed(2)}`;let l=.5,m=`M ${e[0].x.toFixed(2)} ${e[0].y.toFixed(2)}`;for(let s=0;s<e.length-1;s++){let k=s===0?{x:2*e[0].x-e[1].x,y:2*e[0].y-e[1].y}:e[s-1],p=e[s],V=e[s+1],D=s+2<e.length?e[s+2]:{x:2*e[e.length-1].x-e[e.length-2].x,y:2*e[e.length-1].y-e[e.length-2].y},J=p.x+(V.x-k.x)*l/3,B=p.y+(V.y-k.y)*l/3,w=V.x-(D.x-p.x)*l/3,W=V.y-(D.y-p.y)*l/3;m+=` C ${J.toFixed(2)} ${B.toFixed(2)}, ${w.toFixed(2)} ${W.toFixed(2)}, ${V.x.toFixed(2)} ${V.y.toFixed(2)}`;}return m}function Dt(t,r,a,e,l){if(t.length===0)return "";let m=e?st(t,r,a):`M ${t.map(p=>`${r(p.x).toFixed(2)},${a(p.y).toFixed(2)}`).join(" L ")}`,s=r(t[t.length-1].x).toFixed(2),k=r(t[0].x).toFixed(2);return `${m} L ${s},${l.toFixed(2)} L ${k},${l.toFixed(2)} Z`}function Z(t,r=5){return Rt(t[0],t[1],r)}function ct(t,r,a){if(r.length===0)return -1;let e=1/0,l=0;for(let m=0;m<r.length;m++){let s=Math.abs(a(r[m])-t);s<e&&(e=s,l=m);}return l}function mt(t,r){return t.data.find(a=>String(a.x)===r)?.y}function Bt(t){for(let r of t)for(let a of r.data)if(typeof a.x=="string")return true;return false}function q({items:t,position:r,onToggle:a}){return jsxRuntime.jsx("div",{className:nt({position:r}),children:t.map(e=>jsxRuntime.jsxs("button",{onClick:()=>a(e.id),className:P("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!e.visible&&"opacity-40"),"aria-pressed":e.visible,children:[jsxRuntime.jsx("span",{className:"h-2.5 w-5 rounded-sm shrink-0",style:{background:e.color}}),e.label]},e.id))})}function ye({series:t,xAxis:r,yAxis:a,y2Axis:e,y2Series:l=[],smooth:m=false,showDots:s=true,area:k=false,strokeWidth:p=2,title:V,height:D=300,className:J,legend:B=true,legendPosition:w="bottom",animateOnMount:W=true,emptyText:Xt="No data to display"}){let O=react.useRef(null),pt=react.useRef(null),[ft,ht]=react.useState(600),[X,Q]=react.useState(null),[U,A]=react.useState(null);react.useEffect(()=>{let o=pt.current;if(!o)return;let i=o.getBoundingClientRect().width;i>0&&ht(i);let d=new ResizeObserver(f=>{let u=f[0]?.contentRect.width;u&&u>0&&ht(u);});return d.observe(o),()=>d.disconnect()},[]);let Yt=react.useMemo(()=>t.map(o=>o.id),[t]),{visible:Y,toggle:z,isVisible:T}=Mt(Yt),E=react.useMemo(()=>Tt(t.length),[t.length]),R=react.useMemo(()=>new Map(t.map((o,i)=>[o.id,o.color??E[i]])),[t,E]),gt=react.useMemo(()=>Nt(!!r?.label,!!a?.label,!!e),[r?.label,a?.label,e]),n=react.useMemo(()=>St(ft,D,gt),[ft,D,gt]),b=react.useMemo(()=>Bt(t),[t]),x=react.useMemo(()=>b?Ft(t,Y):[],[t,Y,b]),N=react.useMemo(()=>{if(b){let u=K(x,[n.plotLeft,n.plotRight]);return y=>u(y)}let o=t.flatMap(u=>u.data.map(y=>y.x));if(o.length===0)return ()=>n.plotLeft;let i=Math.min(...o),d=Math.max(...o),f=G([i,d],[n.plotLeft,n.plotRight]);return u=>f(u)},[t,b,x,n]),_=react.useMemo(()=>lt(t,Y,a),[t,Y,a]),S=react.useMemo(()=>G(_,[n.plotBottom,n.plotTop]),[_,n]),xt=react.useMemo(()=>Z(_,a?.tickCount??5),[_,a?.tickCount]),I=react.useMemo(()=>{if(!e)return null;let o=t.filter(i=>l.includes(i.id));return lt(o,Y,e)},[e,t,l,Y]),v=react.useMemo(()=>I?G(I,[n.plotBottom,n.plotTop]):null,[I,n]),It=react.useMemo(()=>I?Z(I,e?.tickCount??5):[],[I,e?.tickCount]),tt=react.useMemo(()=>{if(b)return x;let o=t.flatMap(f=>f.data.map(u=>Number(u.x)));if(o.length===0)return [];let i=Math.min(...o),d=Math.max(...o);return Z([i,d],r?.tickCount??6)},[b,x,t,r?.tickCount]),Pt=react.useCallback(o=>{let i=o.currentTarget.closest("svg");if(!i)return;let d=i.getBoundingClientRect(),f=o.clientX-d.left,u=O.current?.getBoundingClientRect();if(!u)return;let y="",L=f;if(b&&x.length>0){let h=K(x,[n.plotLeft,n.plotRight]),kt=ct(f,x,h);y=x[kt]??"",L=h(y);}else if(!b){let h=tt;y=$((f-n.plotLeft)/n.plotWidth*(h[h.length-1]-h[0])+h[0],r?.format),L=f;}let F=t.filter(h=>T(h.id)).map(h=>{l.includes(h.id)&&v!=null?v:S;let j;if(b)j=mt(h,y);else {let Ht=f,vt=1/0,Ct;for(let Vt of h.data){let jt=N(Vt.x),Lt=Math.abs(jt-Ht);Lt<vt&&(vt=Lt,Ct=Vt.y);}j=Ct;}return {name:h.name,value:j!==void 0?$(j,a?.format):"\u2014",color:R.get(h.id)??"var(--color-chart-1)"}});L>=n.plotLeft&&L<=n.plotRight&&A(L);let et=o.clientX-u.left+12,M=o.clientY-u.top-10;Q({x:et,y:M,label:y,items:F});},[b,x,n,t,T,l,v,S,N,tt,r?.format,a?.format,R]),bt=react.useCallback(()=>{Q(null),A(null);},[]),yt=react.useCallback(o=>{o.preventDefault();let i=o.touches[0];if(!i)return;let d=o.currentTarget.closest("svg");if(!d)return;let f=d.getBoundingClientRect(),u=O.current?.getBoundingClientRect();if(!u)return;let y=i.clientX-f.left,L=y,F="";if(b&&x.length>0){let M=K(x,[n.plotLeft,n.plotRight]),h=ct(y,x,M);F=x[h]??"",L=M(F);}L>=n.plotLeft&&L<=n.plotRight&&A(L);let et=t.filter(M=>T(M.id)).map(M=>({name:M.name,value:b&&F?$(mt(M,F)??0,a?.format):"\u2014",color:R.get(M.id)??"var(--color-chart-1)"}));Q({x:i.clientX-u.left+12,y:i.clientY-u.top-10,label:F,items:et});},[b,x,n,t,T,a?.format,R]),H=react.useMemo(()=>t.map((o,i)=>({id:o.id,label:o.name,color:o.color??E[i],visible:T(o.id)})),[t,E,T]),zt=t.some(o=>o.data.length>0),Et=jsxRuntime.jsxs("svg",{role:"img","aria-label":V??"Line chart",width:n.width,height:n.height,viewBox:`0 0 ${n.width} ${n.height}`,shapeRendering:"geometricPrecision",children:[a?.gridLines!==false&&xt.map(o=>{let i=S(o);return jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:i,y2:i,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},o)}),k&&t.map(o=>{if(!T(o.id)||o.data.length===0)return null;let d=l.includes(o.id)&&v!=null?v:S,f=R.get(o.id)??"var(--color-chart-1)",u=Dt(o.data,N,d,m,n.plotBottom);return jsxRuntime.jsx("path",{d:u,fill:f,fillOpacity:.15,stroke:"none",className:W?"chart-area-animate":""},`area-${o.id}`)}),t.map(o=>{if(!T(o.id)||o.data.length===0)return null;let d=l.includes(o.id)&&v!=null?v:S,f=R.get(o.id)??"var(--color-chart-1)";return m?jsxRuntime.jsx("path",{d:st(o.data,N,d),fill:"none",stroke:f,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",className:W?"chart-line-animate":""},o.id):jsxRuntime.jsx("polyline",{points:$t(o.data,N,d),fill:"none",stroke:f,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",className:W?"chart-line-animate":""},o.id)}),s&&t.map(o=>{if(!T(o.id))return null;let d=l.includes(o.id)&&v!=null?v:S,f=R.get(o.id)??"var(--color-chart-1)";return o.data.map((u,y)=>jsxRuntime.jsx("circle",{cx:N(u.x),cy:d(u.y),r:3,fill:f,stroke:"white",strokeWidth:1.5,className:P("chart-dot",W?"chart-dot-animate":"")},`${o.id}-${y}`))}),U!=null&&jsxRuntime.jsx("line",{className:"chart-crosshair",x1:U,x2:U,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,strokeDasharray:"4 4",opacity:.5,style:{color:"var(--color-secondary-400)"}}),jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotLeft,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),xt.map(o=>{let i=S(o);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:n.plotLeft-4,x2:n.plotLeft,y1:i,y2:i,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:n.plotLeft-6,y:i,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(o,a?.format)})]},o)}),a?.label&&jsxRuntime.jsx("text",{x:-(n.plotTop+n.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:a.label}),e&&v&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("line",{x1:n.plotRight,x2:n.plotRight,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),It.map(o=>{let i=v(o);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:n.plotRight,x2:n.plotRight+4,y1:i,y2:i,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:n.plotRight+6,y:i,textAnchor:"start",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(o,e?.format)})]},o)}),e?.label&&jsxRuntime.jsx("text",{x:n.plotTop+n.plotHeight/2,y:-(n.width-14),textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(90)",children:e.label})]}),jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:n.plotBottom,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),(b?x:tt).map((o,i)=>{let d=N(o);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:d,x2:d,y1:n.plotBottom,y2:n.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:d,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(o,r?.format)})]},i)}),r?.label&&jsxRuntime.jsx("text",{x:n.plotLeft+n.plotWidth/2,y:n.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:r.label}),jsxRuntime.jsx("rect",{x:n.plotLeft,y:n.plotTop,width:n.plotWidth,height:n.plotHeight,fill:"transparent",onMouseMove:Pt,onMouseLeave:bt,onTouchStart:yt,onTouchMove:yt,onTouchEnd:bt,style:{cursor:"crosshair"}})]}),_t=w==="left"||w==="right";return jsxRuntime.jsxs("div",{ref:O,className:P(rt(),J),children:[V&&jsxRuntime.jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:V}),B&&w==="top"&&jsxRuntime.jsx(q,{items:H,position:"top",onToggle:z}),jsxRuntime.jsxs("div",{className:P("flex items-start",_t&&"gap-0"),children:[B&&w==="left"&&jsxRuntime.jsx(q,{items:H,position:"left",onToggle:z}),jsxRuntime.jsx("div",{ref:pt,className:"flex-1 min-w-0 overflow-hidden",children:zt?Et:jsxRuntime.jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:D},children:Xt})}),B&&w==="right"&&jsxRuntime.jsx(q,{items:H,position:"right",onToggle:z})]}),B&&w==="bottom"&&jsxRuntime.jsx(q,{items:H,position:"bottom",onToggle:z}),X&&jsxRuntime.jsxs("div",{className:at(),style:{left:X.x,top:X.y},role:"tooltip",children:[X.label&&jsxRuntime.jsx("div",{className:"mb-1 font-medium text-primary-200",children:X.label}),X.items.map((o,i)=>jsxRuntime.jsxs("div",{className:"flex items-center gap-1.5",children:[jsxRuntime.jsx("span",{className:"h-2 w-2 rounded-full shrink-0",style:{background:o.color}}),jsxRuntime.jsxs("span",{className:"text-primary-300",children:[o.name,":"]}),jsxRuntime.jsx("span",{className:"font-medium",children:o.value})]},i))]})]})}exports.LineChart=ye;
|
|
1
|
+
'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime');function P(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var ot=classVarianceAuthority.cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),nt=classVarianceAuthority.cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),at=classVarianceAuthority.cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function Mt(t){let[o,a]=react.useState(()=>new Set(t)),e=react.useCallback(l=>{a(k=>{let p=new Set(k);return p.has(l)?p.delete(l):p.add(l),p});},[]),s=react.useCallback(l=>o.has(l),[o]),m=react.useCallback(()=>{a(new Set(t));},[t]);return {visible:o,toggle:e,isVisible:s,showAll:m}}function Tt(t){let o=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(a,e)=>o[e%o.length])}function wt(t,o,a=.1){if(t===o)return [t-1,o+1];let s=(o-t)*a;return [Math.floor(t-s),Math.ceil(o+s)]}function Rt(t,o,a){if(a<=1)return [t];let e=(o-t)/(a-1);return Array.from({length:a},(s,m)=>+(t+m*e).toFixed(10))}function $(t,o){return o?o(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function Nt(t,o,a){return {top:20,right:a?65:20,bottom:t?52:36,left:o?65:52}}function St(t,o,a){let e=Math.max(t,120);return {width:e,height:o,margins:a,plotLeft:a.left,plotTop:a.top,plotRight:e-a.right,plotBottom:o-a.bottom,plotWidth:Math.max(e-a.left-a.right,10),plotHeight:Math.max(o-a.top-a.bottom,10)}}function Ft(t,o){let a=new Set,e=[];for(let s of t)if(o.has(s.id))for(let m of s.data){let l=String(m.x);a.has(l)||(a.add(l),e.push(l));}return e}function st(t,o,a){let e=1/0,s=-1/0;for(let k of t)if(o.has(k.id))for(let p of k.data)p.y<e&&(e=p.y),p.y>s&&(s=p.y);if(!isFinite(e))return [0,1];let[m,l]=wt(e,s);return [a?.min??m,a?.max??l]}function G(t,o){let[a,e]=t,[s,m]=o;return e===a?()=>(s+m)/2:l=>s+(l-a)/(e-a)*(m-s)}function K(t,o){let a=t.length;if(a===0)return ()=>(o[0]+o[1])/2;let e=(o[1]-o[0])/a;return s=>{let m=t.indexOf(s);return m<0?(o[0]+o[1])/2:o[0]+m*e+e/2}}function $t(t,o,a){return t.map(e=>`${o(e.x).toFixed(2)},${a(e.y).toFixed(2)}`).join(" ")}function lt(t,o,a){if(t.length===0)return "";let e=t.map(l=>({x:o(l.x),y:a(l.y)}));if(e.length===1)return `M ${e[0].x.toFixed(2)} ${e[0].y.toFixed(2)}`;let s=.5,m=`M ${e[0].x.toFixed(2)} ${e[0].y.toFixed(2)}`;for(let l=0;l<e.length-1;l++){let k=l===0?{x:2*e[0].x-e[1].x,y:2*e[0].y-e[1].y}:e[l-1],p=e[l],V=e[l+1],D=l+2<e.length?e[l+2]:{x:2*e[e.length-1].x-e[e.length-2].x,y:2*e[e.length-1].y-e[e.length-2].y},J=p.x+(V.x-k.x)*s/3,B=p.y+(V.y-k.y)*s/3,w=V.x-(D.x-p.x)*s/3,W=V.y-(D.y-p.y)*s/3;m+=` C ${J.toFixed(2)} ${B.toFixed(2)}, ${w.toFixed(2)} ${W.toFixed(2)}, ${V.x.toFixed(2)} ${V.y.toFixed(2)}`;}return m}function Dt(t,o,a,e,s){if(t.length===0)return "";let m=e?lt(t,o,a):`M ${t.map(p=>`${o(p.x).toFixed(2)},${a(p.y).toFixed(2)}`).join(" L ")}`,l=o(t[t.length-1].x).toFixed(2),k=o(t[0].x).toFixed(2);return `${m} L ${l},${s.toFixed(2)} L ${k},${s.toFixed(2)} Z`}function Z(t,o=5){return Rt(t[0],t[1],o)}function ct(t,o,a){if(o.length===0)return -1;let e=1/0,s=0;for(let m=0;m<o.length;m++){let l=Math.abs(a(o[m])-t);l<e&&(e=l,s=m);}return s}function mt(t,o){return t.data.find(a=>String(a.x)===o)?.y}function Bt(t){for(let o of t)for(let a of o.data)if(typeof a.x=="string")return true;return false}function q({items:t,position:o,onToggle:a}){return jsxRuntime.jsx("div",{className:nt({position:o}),children:t.map(e=>jsxRuntime.jsxs("button",{onClick:()=>a(e.id),className:P("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!e.visible&&"opacity-40"),"aria-pressed":e.visible,children:[jsxRuntime.jsx("span",{className:"h-2.5 w-5 rounded-sm shrink-0",style:{background:e.color}}),e.label]},e.id))})}function ye({series:t,xAxis:o,yAxis:a,y2Axis:e,y2Series:s=[],smooth:m=false,showDots:l=true,area:k=false,strokeWidth:p=2,title:V,height:D=300,className:J,legend:B=true,legendPosition:w="bottom",animateOnMount:W=true,emptyText:Xt="No data to display"}){let O=react.useRef(null),pt=react.useRef(null),[ft,ht]=react.useState(600),[X,Q]=react.useState(null),[U,A]=react.useState(null);react.useEffect(()=>{let r=pt.current;if(!r)return;let i=r.getBoundingClientRect().width;i>0&&ht(i);let d=new ResizeObserver(f=>{let u=f[0]?.contentRect.width;u&&u>0&&ht(u);});return d.observe(r),()=>d.disconnect()},[]);let Yt=react.useMemo(()=>t.map(r=>r.id),[t]),{visible:Y,toggle:z,isVisible:T}=Mt(Yt),E=react.useMemo(()=>Tt(t.length),[t.length]),R=react.useMemo(()=>new Map(t.map((r,i)=>[r.id,r.color??E[i]])),[t,E]),gt=react.useMemo(()=>Nt(!!o?.label,!!a?.label,!!e),[o?.label,a?.label,e]),n=react.useMemo(()=>St(ft,D,gt),[ft,D,gt]),b=react.useMemo(()=>Bt(t),[t]),x=react.useMemo(()=>b?Ft(t,Y):[],[t,Y,b]),N=react.useMemo(()=>{if(b){let u=K(x,[n.plotLeft,n.plotRight]);return y=>u(y)}let r=t.flatMap(u=>u.data.map(y=>y.x));if(r.length===0)return ()=>n.plotLeft;let i=Math.min(...r),d=Math.max(...r),f=G([i,d],[n.plotLeft,n.plotRight]);return u=>f(u)},[t,b,x,n]),_=react.useMemo(()=>st(t,Y,a),[t,Y,a]),S=react.useMemo(()=>G(_,[n.plotBottom,n.plotTop]),[_,n]),xt=react.useMemo(()=>Z(_,a?.tickCount??5),[_,a?.tickCount]),I=react.useMemo(()=>{if(!e)return null;let r=t.filter(i=>s.includes(i.id));return st(r,Y,e)},[e,t,s,Y]),v=react.useMemo(()=>I?G(I,[n.plotBottom,n.plotTop]):null,[I,n]),It=react.useMemo(()=>I?Z(I,e?.tickCount??5):[],[I,e?.tickCount]),tt=react.useMemo(()=>{if(b)return x;let r=t.flatMap(f=>f.data.map(u=>Number(u.x)));if(r.length===0)return [];let i=Math.min(...r),d=Math.max(...r);return Z([i,d],o?.tickCount??6)},[b,x,t,o?.tickCount]),Pt=react.useCallback(r=>{let i=r.currentTarget.closest("svg");if(!i)return;let d=i.getBoundingClientRect(),f=r.clientX-d.left,u=O.current?.getBoundingClientRect();if(!u)return;let y="",L=f;if(b&&x.length>0){let h=K(x,[n.plotLeft,n.plotRight]),kt=ct(f,x,h);y=x[kt]??"",L=h(y);}else if(!b){let h=tt;y=$((f-n.plotLeft)/n.plotWidth*(h[h.length-1]-h[0])+h[0],o?.format),L=f;}let F=t.filter(h=>T(h.id)).map(h=>{s.includes(h.id)&&v!=null?v:S;let j;if(b)j=mt(h,y);else {let Ht=f,vt=1/0,Ct;for(let Vt of h.data){let jt=N(Vt.x),Lt=Math.abs(jt-Ht);Lt<vt&&(vt=Lt,Ct=Vt.y);}j=Ct;}return {name:h.name,value:j!==void 0?$(j,a?.format):"\u2014",color:R.get(h.id)??"var(--color-chart-1)"}});L>=n.plotLeft&&L<=n.plotRight&&A(L);let et=r.clientX-u.left+12,M=r.clientY-u.top-10;Q({x:et,y:M,label:y,items:F});},[b,x,n,t,T,s,v,S,N,tt,o?.format,a?.format,R]),bt=react.useCallback(()=>{Q(null),A(null);},[]),yt=react.useCallback(r=>{r.preventDefault();let i=r.touches[0];if(!i)return;let d=r.currentTarget.closest("svg");if(!d)return;let f=d.getBoundingClientRect(),u=O.current?.getBoundingClientRect();if(!u)return;let y=i.clientX-f.left,L=y,F="";if(b&&x.length>0){let M=K(x,[n.plotLeft,n.plotRight]),h=ct(y,x,M);F=x[h]??"",L=M(F);}L>=n.plotLeft&&L<=n.plotRight&&A(L);let et=t.filter(M=>T(M.id)).map(M=>({name:M.name,value:b&&F?$(mt(M,F)??0,a?.format):"\u2014",color:R.get(M.id)??"var(--color-chart-1)"}));Q({x:i.clientX-u.left+12,y:i.clientY-u.top-10,label:F,items:et});},[b,x,n,t,T,a?.format,R]),H=react.useMemo(()=>t.map((r,i)=>({id:r.id,label:r.name,color:r.color??E[i],visible:T(r.id)})),[t,E,T]),zt=t.some(r=>r.data.length>0),Et=jsxRuntime.jsxs("svg",{role:"img","aria-label":V??"Line chart",width:n.width,height:n.height,viewBox:`0 0 ${n.width} ${n.height}`,shapeRendering:"geometricPrecision",children:[a?.gridLines!==false&&xt.map(r=>{let i=S(r);return jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:i,y2:i,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},r)}),k&&t.map(r=>{if(!T(r.id)||r.data.length===0)return null;let d=s.includes(r.id)&&v!=null?v:S,f=R.get(r.id)??"var(--color-chart-1)",u=Dt(r.data,N,d,m,n.plotBottom);return jsxRuntime.jsx("path",{d:u,fill:f,fillOpacity:.15,stroke:"none",className:W?"chart-area-animate":""},`area-${r.id}`)}),t.map(r=>{if(!T(r.id)||r.data.length===0)return null;let d=s.includes(r.id)&&v!=null?v:S,f=R.get(r.id)??"var(--color-chart-1)";return m?jsxRuntime.jsx("path",{d:lt(r.data,N,d),fill:"none",stroke:f,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",className:W?"chart-line-animate":""},r.id):jsxRuntime.jsx("polyline",{points:$t(r.data,N,d),fill:"none",stroke:f,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",className:W?"chart-line-animate":""},r.id)}),l&&t.map(r=>{if(!T(r.id))return null;let d=s.includes(r.id)&&v!=null?v:S,f=R.get(r.id)??"var(--color-chart-1)";return r.data.map((u,y)=>jsxRuntime.jsx("circle",{cx:N(u.x),cy:d(u.y),r:3,fill:f,stroke:"white",strokeWidth:1.5,className:P("chart-dot",W?"chart-dot-animate":"")},`${r.id}-${y}`))}),U!=null&&jsxRuntime.jsx("line",{className:"chart-crosshair",x1:U,x2:U,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,strokeDasharray:"4 4",opacity:.5,style:{color:"var(--color-secondary-400)"}}),jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotLeft,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),xt.map(r=>{let i=S(r);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:n.plotLeft-4,x2:n.plotLeft,y1:i,y2:i,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:n.plotLeft-6,y:i,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(r,a?.format)})]},r)}),a?.label&&jsxRuntime.jsx("text",{x:-(n.plotTop+n.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:a.label}),e&&v&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("line",{x1:n.plotRight,x2:n.plotRight,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),It.map(r=>{let i=v(r);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:n.plotRight,x2:n.plotRight+4,y1:i,y2:i,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:n.plotRight+6,y:i,textAnchor:"start",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(r,e?.format)})]},r)}),e?.label&&jsxRuntime.jsx("text",{x:n.plotTop+n.plotHeight/2,y:-(n.width-14),textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(90)",children:e.label})]}),jsxRuntime.jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:n.plotBottom,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),(b?x:tt).map((r,i)=>{let d=N(r);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:d,x2:d,y1:n.plotBottom,y2:n.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:d,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(r,o?.format)})]},i)}),o?.label&&jsxRuntime.jsx("text",{x:n.plotLeft+n.plotWidth/2,y:n.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:o.label}),jsxRuntime.jsx("rect",{x:n.plotLeft,y:n.plotTop,width:n.plotWidth,height:n.plotHeight,fill:"transparent",onMouseMove:Pt,onMouseLeave:bt,onTouchStart:yt,onTouchMove:yt,onTouchEnd:bt,style:{cursor:"crosshair"}})]}),_t=w==="left"||w==="right";return jsxRuntime.jsxs("div",{ref:O,className:P(ot(),J),children:[V&&jsxRuntime.jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:V}),B&&w==="top"&&jsxRuntime.jsx(q,{items:H,position:"top",onToggle:z}),jsxRuntime.jsxs("div",{className:P("flex items-start",_t&&"gap-0"),children:[B&&w==="left"&&jsxRuntime.jsx(q,{items:H,position:"left",onToggle:z}),jsxRuntime.jsx("div",{ref:pt,className:"flex-1 min-w-0 overflow-hidden",children:zt?Et:jsxRuntime.jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:D},children:Xt})}),B&&w==="right"&&jsxRuntime.jsx(q,{items:H,position:"right",onToggle:z})]}),B&&w==="bottom"&&jsxRuntime.jsx(q,{items:H,position:"bottom",onToggle:z}),X&&jsxRuntime.jsxs("div",{className:at(),style:{left:X.x,top:X.y},role:"tooltip",children:[X.label&&jsxRuntime.jsx("div",{className:"mb-1 font-medium text-primary-200",children:X.label}),X.items.map((r,i)=>jsxRuntime.jsxs("div",{className:"flex items-center gap-1.5",children:[jsxRuntime.jsx("span",{className:"h-2 w-2 rounded-full shrink-0",style:{background:r.color}}),jsxRuntime.jsxs("span",{className:"text-primary-300",children:[r.name,":"]}),jsxRuntime.jsx("span",{className:"font-medium",children:r.value})]},i))]})]})}exports.LineChart=ye;
|
package/dist/Chart/LineChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {useRef,useState,useEffect,useMemo,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function P(...t){return twMerge(clsx(t))}var rt=cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),nt=cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),at=cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function Mt(t){let[r,a]=useState(()=>new Set(t)),e=useCallback(s=>{a(k=>{let p=new Set(k);return p.has(s)?p.delete(s):p.add(s),p});},[]),l=useCallback(s=>r.has(s),[r]),m=useCallback(()=>{a(new Set(t));},[t]);return {visible:r,toggle:e,isVisible:l,showAll:m}}function Tt(t){let r=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(a,e)=>r[e%r.length])}function wt(t,r,a=.1){if(t===r)return [t-1,r+1];let l=(r-t)*a;return [Math.floor(t-l),Math.ceil(r+l)]}function Rt(t,r,a){if(a<=1)return [t];let e=(r-t)/(a-1);return Array.from({length:a},(l,m)=>+(t+m*e).toFixed(10))}function $(t,r){return r?r(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function Nt(t,r,a){return {top:20,right:a?65:20,bottom:t?52:36,left:r?65:52}}function St(t,r,a){let e=Math.max(t,120);return {width:e,height:r,margins:a,plotLeft:a.left,plotTop:a.top,plotRight:e-a.right,plotBottom:r-a.bottom,plotWidth:Math.max(e-a.left-a.right,10),plotHeight:Math.max(r-a.top-a.bottom,10)}}function Ft(t,r){let a=new Set,e=[];for(let l of t)if(r.has(l.id))for(let m of l.data){let s=String(m.x);a.has(s)||(a.add(s),e.push(s));}return e}function lt(t,r,a){let e=1/0,l=-1/0;for(let k of t)if(r.has(k.id))for(let p of k.data)p.y<e&&(e=p.y),p.y>l&&(l=p.y);if(!isFinite(e))return [0,1];let[m,s]=wt(e,l);return [a?.min??m,a?.max??s]}function G(t,r){let[a,e]=t,[l,m]=r;return e===a?()=>(l+m)/2:s=>l+(s-a)/(e-a)*(m-l)}function K(t,r){let a=t.length;if(a===0)return ()=>(r[0]+r[1])/2;let e=(r[1]-r[0])/a;return l=>{let m=t.indexOf(l);return m<0?(r[0]+r[1])/2:r[0]+m*e+e/2}}function $t(t,r,a){return t.map(e=>`${r(e.x).toFixed(2)},${a(e.y).toFixed(2)}`).join(" ")}function st(t,r,a){if(t.length===0)return "";let e=t.map(s=>({x:r(s.x),y:a(s.y)}));if(e.length===1)return `M ${e[0].x.toFixed(2)} ${e[0].y.toFixed(2)}`;let l=.5,m=`M ${e[0].x.toFixed(2)} ${e[0].y.toFixed(2)}`;for(let s=0;s<e.length-1;s++){let k=s===0?{x:2*e[0].x-e[1].x,y:2*e[0].y-e[1].y}:e[s-1],p=e[s],V=e[s+1],D=s+2<e.length?e[s+2]:{x:2*e[e.length-1].x-e[e.length-2].x,y:2*e[e.length-1].y-e[e.length-2].y},J=p.x+(V.x-k.x)*l/3,B=p.y+(V.y-k.y)*l/3,w=V.x-(D.x-p.x)*l/3,W=V.y-(D.y-p.y)*l/3;m+=` C ${J.toFixed(2)} ${B.toFixed(2)}, ${w.toFixed(2)} ${W.toFixed(2)}, ${V.x.toFixed(2)} ${V.y.toFixed(2)}`;}return m}function Dt(t,r,a,e,l){if(t.length===0)return "";let m=e?st(t,r,a):`M ${t.map(p=>`${r(p.x).toFixed(2)},${a(p.y).toFixed(2)}`).join(" L ")}`,s=r(t[t.length-1].x).toFixed(2),k=r(t[0].x).toFixed(2);return `${m} L ${s},${l.toFixed(2)} L ${k},${l.toFixed(2)} Z`}function Z(t,r=5){return Rt(t[0],t[1],r)}function ct(t,r,a){if(r.length===0)return -1;let e=1/0,l=0;for(let m=0;m<r.length;m++){let s=Math.abs(a(r[m])-t);s<e&&(e=s,l=m);}return l}function mt(t,r){return t.data.find(a=>String(a.x)===r)?.y}function Bt(t){for(let r of t)for(let a of r.data)if(typeof a.x=="string")return true;return false}function q({items:t,position:r,onToggle:a}){return jsx("div",{className:nt({position:r}),children:t.map(e=>jsxs("button",{onClick:()=>a(e.id),className:P("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!e.visible&&"opacity-40"),"aria-pressed":e.visible,children:[jsx("span",{className:"h-2.5 w-5 rounded-sm shrink-0",style:{background:e.color}}),e.label]},e.id))})}function ye({series:t,xAxis:r,yAxis:a,y2Axis:e,y2Series:l=[],smooth:m=false,showDots:s=true,area:k=false,strokeWidth:p=2,title:V,height:D=300,className:J,legend:B=true,legendPosition:w="bottom",animateOnMount:W=true,emptyText:Xt="No data to display"}){let O=useRef(null),pt=useRef(null),[ft,ht]=useState(600),[X,Q]=useState(null),[U,A]=useState(null);useEffect(()=>{let o=pt.current;if(!o)return;let i=o.getBoundingClientRect().width;i>0&&ht(i);let d=new ResizeObserver(f=>{let u=f[0]?.contentRect.width;u&&u>0&&ht(u);});return d.observe(o),()=>d.disconnect()},[]);let Yt=useMemo(()=>t.map(o=>o.id),[t]),{visible:Y,toggle:z,isVisible:T}=Mt(Yt),E=useMemo(()=>Tt(t.length),[t.length]),R=useMemo(()=>new Map(t.map((o,i)=>[o.id,o.color??E[i]])),[t,E]),gt=useMemo(()=>Nt(!!r?.label,!!a?.label,!!e),[r?.label,a?.label,e]),n=useMemo(()=>St(ft,D,gt),[ft,D,gt]),b=useMemo(()=>Bt(t),[t]),x=useMemo(()=>b?Ft(t,Y):[],[t,Y,b]),N=useMemo(()=>{if(b){let u=K(x,[n.plotLeft,n.plotRight]);return y=>u(y)}let o=t.flatMap(u=>u.data.map(y=>y.x));if(o.length===0)return ()=>n.plotLeft;let i=Math.min(...o),d=Math.max(...o),f=G([i,d],[n.plotLeft,n.plotRight]);return u=>f(u)},[t,b,x,n]),_=useMemo(()=>lt(t,Y,a),[t,Y,a]),S=useMemo(()=>G(_,[n.plotBottom,n.plotTop]),[_,n]),xt=useMemo(()=>Z(_,a?.tickCount??5),[_,a?.tickCount]),I=useMemo(()=>{if(!e)return null;let o=t.filter(i=>l.includes(i.id));return lt(o,Y,e)},[e,t,l,Y]),v=useMemo(()=>I?G(I,[n.plotBottom,n.plotTop]):null,[I,n]),It=useMemo(()=>I?Z(I,e?.tickCount??5):[],[I,e?.tickCount]),tt=useMemo(()=>{if(b)return x;let o=t.flatMap(f=>f.data.map(u=>Number(u.x)));if(o.length===0)return [];let i=Math.min(...o),d=Math.max(...o);return Z([i,d],r?.tickCount??6)},[b,x,t,r?.tickCount]),Pt=useCallback(o=>{let i=o.currentTarget.closest("svg");if(!i)return;let d=i.getBoundingClientRect(),f=o.clientX-d.left,u=O.current?.getBoundingClientRect();if(!u)return;let y="",L=f;if(b&&x.length>0){let h=K(x,[n.plotLeft,n.plotRight]),kt=ct(f,x,h);y=x[kt]??"",L=h(y);}else if(!b){let h=tt;y=$((f-n.plotLeft)/n.plotWidth*(h[h.length-1]-h[0])+h[0],r?.format),L=f;}let F=t.filter(h=>T(h.id)).map(h=>{l.includes(h.id)&&v!=null?v:S;let j;if(b)j=mt(h,y);else {let Ht=f,vt=1/0,Ct;for(let Vt of h.data){let jt=N(Vt.x),Lt=Math.abs(jt-Ht);Lt<vt&&(vt=Lt,Ct=Vt.y);}j=Ct;}return {name:h.name,value:j!==void 0?$(j,a?.format):"\u2014",color:R.get(h.id)??"var(--color-chart-1)"}});L>=n.plotLeft&&L<=n.plotRight&&A(L);let et=o.clientX-u.left+12,M=o.clientY-u.top-10;Q({x:et,y:M,label:y,items:F});},[b,x,n,t,T,l,v,S,N,tt,r?.format,a?.format,R]),bt=useCallback(()=>{Q(null),A(null);},[]),yt=useCallback(o=>{o.preventDefault();let i=o.touches[0];if(!i)return;let d=o.currentTarget.closest("svg");if(!d)return;let f=d.getBoundingClientRect(),u=O.current?.getBoundingClientRect();if(!u)return;let y=i.clientX-f.left,L=y,F="";if(b&&x.length>0){let M=K(x,[n.plotLeft,n.plotRight]),h=ct(y,x,M);F=x[h]??"",L=M(F);}L>=n.plotLeft&&L<=n.plotRight&&A(L);let et=t.filter(M=>T(M.id)).map(M=>({name:M.name,value:b&&F?$(mt(M,F)??0,a?.format):"\u2014",color:R.get(M.id)??"var(--color-chart-1)"}));Q({x:i.clientX-u.left+12,y:i.clientY-u.top-10,label:F,items:et});},[b,x,n,t,T,a?.format,R]),H=useMemo(()=>t.map((o,i)=>({id:o.id,label:o.name,color:o.color??E[i],visible:T(o.id)})),[t,E,T]),zt=t.some(o=>o.data.length>0),Et=jsxs("svg",{role:"img","aria-label":V??"Line chart",width:n.width,height:n.height,viewBox:`0 0 ${n.width} ${n.height}`,shapeRendering:"geometricPrecision",children:[a?.gridLines!==false&&xt.map(o=>{let i=S(o);return jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:i,y2:i,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},o)}),k&&t.map(o=>{if(!T(o.id)||o.data.length===0)return null;let d=l.includes(o.id)&&v!=null?v:S,f=R.get(o.id)??"var(--color-chart-1)",u=Dt(o.data,N,d,m,n.plotBottom);return jsx("path",{d:u,fill:f,fillOpacity:.15,stroke:"none",className:W?"chart-area-animate":""},`area-${o.id}`)}),t.map(o=>{if(!T(o.id)||o.data.length===0)return null;let d=l.includes(o.id)&&v!=null?v:S,f=R.get(o.id)??"var(--color-chart-1)";return m?jsx("path",{d:st(o.data,N,d),fill:"none",stroke:f,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",className:W?"chart-line-animate":""},o.id):jsx("polyline",{points:$t(o.data,N,d),fill:"none",stroke:f,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",className:W?"chart-line-animate":""},o.id)}),s&&t.map(o=>{if(!T(o.id))return null;let d=l.includes(o.id)&&v!=null?v:S,f=R.get(o.id)??"var(--color-chart-1)";return o.data.map((u,y)=>jsx("circle",{cx:N(u.x),cy:d(u.y),r:3,fill:f,stroke:"white",strokeWidth:1.5,className:P("chart-dot",W?"chart-dot-animate":"")},`${o.id}-${y}`))}),U!=null&&jsx("line",{className:"chart-crosshair",x1:U,x2:U,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,strokeDasharray:"4 4",opacity:.5,style:{color:"var(--color-secondary-400)"}}),jsx("line",{x1:n.plotLeft,x2:n.plotLeft,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),xt.map(o=>{let i=S(o);return jsxs("g",{children:[jsx("line",{x1:n.plotLeft-4,x2:n.plotLeft,y1:i,y2:i,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:n.plotLeft-6,y:i,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(o,a?.format)})]},o)}),a?.label&&jsx("text",{x:-(n.plotTop+n.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:a.label}),e&&v&&jsxs(Fragment,{children:[jsx("line",{x1:n.plotRight,x2:n.plotRight,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),It.map(o=>{let i=v(o);return jsxs("g",{children:[jsx("line",{x1:n.plotRight,x2:n.plotRight+4,y1:i,y2:i,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:n.plotRight+6,y:i,textAnchor:"start",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(o,e?.format)})]},o)}),e?.label&&jsx("text",{x:n.plotTop+n.plotHeight/2,y:-(n.width-14),textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(90)",children:e.label})]}),jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:n.plotBottom,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),(b?x:tt).map((o,i)=>{let d=N(o);return jsxs("g",{children:[jsx("line",{x1:d,x2:d,y1:n.plotBottom,y2:n.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:d,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(o,r?.format)})]},i)}),r?.label&&jsx("text",{x:n.plotLeft+n.plotWidth/2,y:n.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:r.label}),jsx("rect",{x:n.plotLeft,y:n.plotTop,width:n.plotWidth,height:n.plotHeight,fill:"transparent",onMouseMove:Pt,onMouseLeave:bt,onTouchStart:yt,onTouchMove:yt,onTouchEnd:bt,style:{cursor:"crosshair"}})]}),_t=w==="left"||w==="right";return jsxs("div",{ref:O,className:P(rt(),J),children:[V&&jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:V}),B&&w==="top"&&jsx(q,{items:H,position:"top",onToggle:z}),jsxs("div",{className:P("flex items-start",_t&&"gap-0"),children:[B&&w==="left"&&jsx(q,{items:H,position:"left",onToggle:z}),jsx("div",{ref:pt,className:"flex-1 min-w-0 overflow-hidden",children:zt?Et:jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:D},children:Xt})}),B&&w==="right"&&jsx(q,{items:H,position:"right",onToggle:z})]}),B&&w==="bottom"&&jsx(q,{items:H,position:"bottom",onToggle:z}),X&&jsxs("div",{className:at(),style:{left:X.x,top:X.y},role:"tooltip",children:[X.label&&jsx("div",{className:"mb-1 font-medium text-primary-200",children:X.label}),X.items.map((o,i)=>jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("span",{className:"h-2 w-2 rounded-full shrink-0",style:{background:o.color}}),jsxs("span",{className:"text-primary-300",children:[o.name,":"]}),jsx("span",{className:"font-medium",children:o.value})]},i))]})]})}export{ye as LineChart};
|
|
1
|
+
import {useRef,useState,useEffect,useMemo,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function P(...t){return twMerge(clsx(t))}var ot=cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),nt=cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),at=cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function Mt(t){let[o,a]=useState(()=>new Set(t)),e=useCallback(l=>{a(k=>{let p=new Set(k);return p.has(l)?p.delete(l):p.add(l),p});},[]),s=useCallback(l=>o.has(l),[o]),m=useCallback(()=>{a(new Set(t));},[t]);return {visible:o,toggle:e,isVisible:s,showAll:m}}function Tt(t){let o=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(a,e)=>o[e%o.length])}function wt(t,o,a=.1){if(t===o)return [t-1,o+1];let s=(o-t)*a;return [Math.floor(t-s),Math.ceil(o+s)]}function Rt(t,o,a){if(a<=1)return [t];let e=(o-t)/(a-1);return Array.from({length:a},(s,m)=>+(t+m*e).toFixed(10))}function $(t,o){return o?o(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function Nt(t,o,a){return {top:20,right:a?65:20,bottom:t?52:36,left:o?65:52}}function St(t,o,a){let e=Math.max(t,120);return {width:e,height:o,margins:a,plotLeft:a.left,plotTop:a.top,plotRight:e-a.right,plotBottom:o-a.bottom,plotWidth:Math.max(e-a.left-a.right,10),plotHeight:Math.max(o-a.top-a.bottom,10)}}function Ft(t,o){let a=new Set,e=[];for(let s of t)if(o.has(s.id))for(let m of s.data){let l=String(m.x);a.has(l)||(a.add(l),e.push(l));}return e}function st(t,o,a){let e=1/0,s=-1/0;for(let k of t)if(o.has(k.id))for(let p of k.data)p.y<e&&(e=p.y),p.y>s&&(s=p.y);if(!isFinite(e))return [0,1];let[m,l]=wt(e,s);return [a?.min??m,a?.max??l]}function G(t,o){let[a,e]=t,[s,m]=o;return e===a?()=>(s+m)/2:l=>s+(l-a)/(e-a)*(m-s)}function K(t,o){let a=t.length;if(a===0)return ()=>(o[0]+o[1])/2;let e=(o[1]-o[0])/a;return s=>{let m=t.indexOf(s);return m<0?(o[0]+o[1])/2:o[0]+m*e+e/2}}function $t(t,o,a){return t.map(e=>`${o(e.x).toFixed(2)},${a(e.y).toFixed(2)}`).join(" ")}function lt(t,o,a){if(t.length===0)return "";let e=t.map(l=>({x:o(l.x),y:a(l.y)}));if(e.length===1)return `M ${e[0].x.toFixed(2)} ${e[0].y.toFixed(2)}`;let s=.5,m=`M ${e[0].x.toFixed(2)} ${e[0].y.toFixed(2)}`;for(let l=0;l<e.length-1;l++){let k=l===0?{x:2*e[0].x-e[1].x,y:2*e[0].y-e[1].y}:e[l-1],p=e[l],V=e[l+1],D=l+2<e.length?e[l+2]:{x:2*e[e.length-1].x-e[e.length-2].x,y:2*e[e.length-1].y-e[e.length-2].y},J=p.x+(V.x-k.x)*s/3,B=p.y+(V.y-k.y)*s/3,w=V.x-(D.x-p.x)*s/3,W=V.y-(D.y-p.y)*s/3;m+=` C ${J.toFixed(2)} ${B.toFixed(2)}, ${w.toFixed(2)} ${W.toFixed(2)}, ${V.x.toFixed(2)} ${V.y.toFixed(2)}`;}return m}function Dt(t,o,a,e,s){if(t.length===0)return "";let m=e?lt(t,o,a):`M ${t.map(p=>`${o(p.x).toFixed(2)},${a(p.y).toFixed(2)}`).join(" L ")}`,l=o(t[t.length-1].x).toFixed(2),k=o(t[0].x).toFixed(2);return `${m} L ${l},${s.toFixed(2)} L ${k},${s.toFixed(2)} Z`}function Z(t,o=5){return Rt(t[0],t[1],o)}function ct(t,o,a){if(o.length===0)return -1;let e=1/0,s=0;for(let m=0;m<o.length;m++){let l=Math.abs(a(o[m])-t);l<e&&(e=l,s=m);}return s}function mt(t,o){return t.data.find(a=>String(a.x)===o)?.y}function Bt(t){for(let o of t)for(let a of o.data)if(typeof a.x=="string")return true;return false}function q({items:t,position:o,onToggle:a}){return jsx("div",{className:nt({position:o}),children:t.map(e=>jsxs("button",{onClick:()=>a(e.id),className:P("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!e.visible&&"opacity-40"),"aria-pressed":e.visible,children:[jsx("span",{className:"h-2.5 w-5 rounded-sm shrink-0",style:{background:e.color}}),e.label]},e.id))})}function ye({series:t,xAxis:o,yAxis:a,y2Axis:e,y2Series:s=[],smooth:m=false,showDots:l=true,area:k=false,strokeWidth:p=2,title:V,height:D=300,className:J,legend:B=true,legendPosition:w="bottom",animateOnMount:W=true,emptyText:Xt="No data to display"}){let O=useRef(null),pt=useRef(null),[ft,ht]=useState(600),[X,Q]=useState(null),[U,A]=useState(null);useEffect(()=>{let r=pt.current;if(!r)return;let i=r.getBoundingClientRect().width;i>0&&ht(i);let d=new ResizeObserver(f=>{let u=f[0]?.contentRect.width;u&&u>0&&ht(u);});return d.observe(r),()=>d.disconnect()},[]);let Yt=useMemo(()=>t.map(r=>r.id),[t]),{visible:Y,toggle:z,isVisible:T}=Mt(Yt),E=useMemo(()=>Tt(t.length),[t.length]),R=useMemo(()=>new Map(t.map((r,i)=>[r.id,r.color??E[i]])),[t,E]),gt=useMemo(()=>Nt(!!o?.label,!!a?.label,!!e),[o?.label,a?.label,e]),n=useMemo(()=>St(ft,D,gt),[ft,D,gt]),b=useMemo(()=>Bt(t),[t]),x=useMemo(()=>b?Ft(t,Y):[],[t,Y,b]),N=useMemo(()=>{if(b){let u=K(x,[n.plotLeft,n.plotRight]);return y=>u(y)}let r=t.flatMap(u=>u.data.map(y=>y.x));if(r.length===0)return ()=>n.plotLeft;let i=Math.min(...r),d=Math.max(...r),f=G([i,d],[n.plotLeft,n.plotRight]);return u=>f(u)},[t,b,x,n]),_=useMemo(()=>st(t,Y,a),[t,Y,a]),S=useMemo(()=>G(_,[n.plotBottom,n.plotTop]),[_,n]),xt=useMemo(()=>Z(_,a?.tickCount??5),[_,a?.tickCount]),I=useMemo(()=>{if(!e)return null;let r=t.filter(i=>s.includes(i.id));return st(r,Y,e)},[e,t,s,Y]),v=useMemo(()=>I?G(I,[n.plotBottom,n.plotTop]):null,[I,n]),It=useMemo(()=>I?Z(I,e?.tickCount??5):[],[I,e?.tickCount]),tt=useMemo(()=>{if(b)return x;let r=t.flatMap(f=>f.data.map(u=>Number(u.x)));if(r.length===0)return [];let i=Math.min(...r),d=Math.max(...r);return Z([i,d],o?.tickCount??6)},[b,x,t,o?.tickCount]),Pt=useCallback(r=>{let i=r.currentTarget.closest("svg");if(!i)return;let d=i.getBoundingClientRect(),f=r.clientX-d.left,u=O.current?.getBoundingClientRect();if(!u)return;let y="",L=f;if(b&&x.length>0){let h=K(x,[n.plotLeft,n.plotRight]),kt=ct(f,x,h);y=x[kt]??"",L=h(y);}else if(!b){let h=tt;y=$((f-n.plotLeft)/n.plotWidth*(h[h.length-1]-h[0])+h[0],o?.format),L=f;}let F=t.filter(h=>T(h.id)).map(h=>{s.includes(h.id)&&v!=null?v:S;let j;if(b)j=mt(h,y);else {let Ht=f,vt=1/0,Ct;for(let Vt of h.data){let jt=N(Vt.x),Lt=Math.abs(jt-Ht);Lt<vt&&(vt=Lt,Ct=Vt.y);}j=Ct;}return {name:h.name,value:j!==void 0?$(j,a?.format):"\u2014",color:R.get(h.id)??"var(--color-chart-1)"}});L>=n.plotLeft&&L<=n.plotRight&&A(L);let et=r.clientX-u.left+12,M=r.clientY-u.top-10;Q({x:et,y:M,label:y,items:F});},[b,x,n,t,T,s,v,S,N,tt,o?.format,a?.format,R]),bt=useCallback(()=>{Q(null),A(null);},[]),yt=useCallback(r=>{r.preventDefault();let i=r.touches[0];if(!i)return;let d=r.currentTarget.closest("svg");if(!d)return;let f=d.getBoundingClientRect(),u=O.current?.getBoundingClientRect();if(!u)return;let y=i.clientX-f.left,L=y,F="";if(b&&x.length>0){let M=K(x,[n.plotLeft,n.plotRight]),h=ct(y,x,M);F=x[h]??"",L=M(F);}L>=n.plotLeft&&L<=n.plotRight&&A(L);let et=t.filter(M=>T(M.id)).map(M=>({name:M.name,value:b&&F?$(mt(M,F)??0,a?.format):"\u2014",color:R.get(M.id)??"var(--color-chart-1)"}));Q({x:i.clientX-u.left+12,y:i.clientY-u.top-10,label:F,items:et});},[b,x,n,t,T,a?.format,R]),H=useMemo(()=>t.map((r,i)=>({id:r.id,label:r.name,color:r.color??E[i],visible:T(r.id)})),[t,E,T]),zt=t.some(r=>r.data.length>0),Et=jsxs("svg",{role:"img","aria-label":V??"Line chart",width:n.width,height:n.height,viewBox:`0 0 ${n.width} ${n.height}`,shapeRendering:"geometricPrecision",children:[a?.gridLines!==false&&xt.map(r=>{let i=S(r);return jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:i,y2:i,stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},r)}),k&&t.map(r=>{if(!T(r.id)||r.data.length===0)return null;let d=s.includes(r.id)&&v!=null?v:S,f=R.get(r.id)??"var(--color-chart-1)",u=Dt(r.data,N,d,m,n.plotBottom);return jsx("path",{d:u,fill:f,fillOpacity:.15,stroke:"none",className:W?"chart-area-animate":""},`area-${r.id}`)}),t.map(r=>{if(!T(r.id)||r.data.length===0)return null;let d=s.includes(r.id)&&v!=null?v:S,f=R.get(r.id)??"var(--color-chart-1)";return m?jsx("path",{d:lt(r.data,N,d),fill:"none",stroke:f,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",className:W?"chart-line-animate":""},r.id):jsx("polyline",{points:$t(r.data,N,d),fill:"none",stroke:f,strokeWidth:p,strokeLinecap:"round",strokeLinejoin:"round",className:W?"chart-line-animate":""},r.id)}),l&&t.map(r=>{if(!T(r.id))return null;let d=s.includes(r.id)&&v!=null?v:S,f=R.get(r.id)??"var(--color-chart-1)";return r.data.map((u,y)=>jsx("circle",{cx:N(u.x),cy:d(u.y),r:3,fill:f,stroke:"white",strokeWidth:1.5,className:P("chart-dot",W?"chart-dot-animate":"")},`${r.id}-${y}`))}),U!=null&&jsx("line",{className:"chart-crosshair",x1:U,x2:U,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,strokeDasharray:"4 4",opacity:.5,style:{color:"var(--color-secondary-400)"}}),jsx("line",{x1:n.plotLeft,x2:n.plotLeft,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),xt.map(r=>{let i=S(r);return jsxs("g",{children:[jsx("line",{x1:n.plotLeft-4,x2:n.plotLeft,y1:i,y2:i,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:n.plotLeft-6,y:i,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(r,a?.format)})]},r)}),a?.label&&jsx("text",{x:-(n.plotTop+n.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:a.label}),e&&v&&jsxs(Fragment,{children:[jsx("line",{x1:n.plotRight,x2:n.plotRight,y1:n.plotTop,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),It.map(r=>{let i=v(r);return jsxs("g",{children:[jsx("line",{x1:n.plotRight,x2:n.plotRight+4,y1:i,y2:i,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:n.plotRight+6,y:i,textAnchor:"start",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(r,e?.format)})]},r)}),e?.label&&jsx("text",{x:n.plotTop+n.plotHeight/2,y:-(n.width-14),textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(90)",children:e.label})]}),jsx("line",{x1:n.plotLeft,x2:n.plotRight,y1:n.plotBottom,y2:n.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),(b?x:tt).map((r,i)=>{let d=N(r);return jsxs("g",{children:[jsx("line",{x1:d,x2:d,y1:n.plotBottom,y2:n.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:d,y:n.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$(r,o?.format)})]},i)}),o?.label&&jsx("text",{x:n.plotLeft+n.plotWidth/2,y:n.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:o.label}),jsx("rect",{x:n.plotLeft,y:n.plotTop,width:n.plotWidth,height:n.plotHeight,fill:"transparent",onMouseMove:Pt,onMouseLeave:bt,onTouchStart:yt,onTouchMove:yt,onTouchEnd:bt,style:{cursor:"crosshair"}})]}),_t=w==="left"||w==="right";return jsxs("div",{ref:O,className:P(ot(),J),children:[V&&jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:V}),B&&w==="top"&&jsx(q,{items:H,position:"top",onToggle:z}),jsxs("div",{className:P("flex items-start",_t&&"gap-0"),children:[B&&w==="left"&&jsx(q,{items:H,position:"left",onToggle:z}),jsx("div",{ref:pt,className:"flex-1 min-w-0 overflow-hidden",children:zt?Et:jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:D},children:Xt})}),B&&w==="right"&&jsx(q,{items:H,position:"right",onToggle:z})]}),B&&w==="bottom"&&jsx(q,{items:H,position:"bottom",onToggle:z}),X&&jsxs("div",{className:at(),style:{left:X.x,top:X.y},role:"tooltip",children:[X.label&&jsx("div",{className:"mb-1 font-medium text-primary-200",children:X.label}),X.items.map((r,i)=>jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("span",{className:"h-2 w-2 rounded-full shrink-0",style:{background:r.color}}),jsxs("span",{className:"text-primary-300",children:[r.name,":"]}),jsx("span",{className:"font-medium",children:r.value})]},i))]})]})}export{ye as LineChart};
|
package/dist/Chart/PieChart.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime');function B(...n){return tailwindMerge.twMerge(clsx.clsx(n))}var lt=classVarianceAuthority.cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),dt=classVarianceAuthority.cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),mt=classVarianceAuthority.cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function Vt(n){let[l,h]=react.useState(()=>new Set(n)),a=react.useCallback(u=>{h(C=>{let A=new Set(C);return A.has(u)?A.delete(u):A.add(u),A});},[]),g=react.useCallback(u=>l.has(u),[l]),p=react.useCallback(()=>{h(new Set(n));},[n]);return {visible:l,toggle:a,isVisible:g,showAll:p}}function wt(n){let l=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:n},(h,a)=>l[a%l.length])}function tt(n,l){return l?l(n):typeof n=="number"?Math.abs(n)>=1e6?`${(n/1e6).toFixed(1)}M`:Math.abs(n)>=1e3?`${(n/1e3).toFixed(1)}K`:Number.isInteger(n)?n.toString():n.toFixed(2):String(n)}function k(n,l,h,a){let g=(a-90)*Math.PI/180;return {x:n+h*Math.cos(g),y:l+h*Math.sin(g)}}function kt(n,l,h,a,g,p,u,C,A){let z=n.filter(m=>l.has(m.id)),L=z.reduce((m,F)=>m+F.value,0);if(L===0)return [];let H=new Map(n.map((m,F)=>[m.id,m.color??h[F%h.length]])),j=[],E=C;for(let m of z){let F=m.value/L*360,G=A/2,b=E+G,M=E+F-G,ot=(b+M)/2,T;if(Math.abs(M-b)>=359.9){let f=k(p,u,a,b),$=k(p,u,a,b+180);T=`M ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 1 1 ${$.x.toFixed(3)} ${$.y.toFixed(3)} A ${a} ${a} 0 1 1 ${f.x.toFixed(3)} ${f.y.toFixed(3)} Z`;}else if(g>0){let f=k(p,u,a,b),$=k(p,u,a,M),S=k(p,u,g,M),R=k(p,u,g,b),P=M-b>180?1:0;T=`M ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 ${P} 1 ${$.x.toFixed(3)} ${$.y.toFixed(3)} L ${S.x.toFixed(3)} ${S.y.toFixed(3)} A ${g} ${g} 0 ${P} 0 ${R.x.toFixed(3)} ${R.y.toFixed(3)} Z`;}else {let f=k(p,u,a,b),$=k(p,u,a,M),S=M-b>180?1:0;T=`M ${p.toFixed(3)} ${u.toFixed(3)} L ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 ${S} 1 ${$.x.toFixed(3)} ${$.y.toFixed(3)} Z`;}j.push({id:m.id,label:m.label,value:m.value,percent:Math.round(m.value/L*1e3)/10,color:H.get(m.id)??"var(--color-chart-1)",startAngle:b,endAngle:M,midAngle:ot,path:T,outerR:a,innerR:g,cx:p,cy:u}),E+=F;}return j}function Mt(n,l){let h=(n-90)*Math.PI/180;return {dx:Math.cos(h)*l,dy:Math.sin(h)*l}}function rt({items:n,position:l,onToggle:h}){return jsxRuntime.jsx("div",{className:dt({position:l}),children:n.map(a=>jsxRuntime.jsxs("button",{onClick:()=>h(a.id),className:B("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!a.visible&&"opacity-40"),"aria-pressed":a.visible,children:[jsxRuntime.jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:a.color}}),jsxRuntime.jsx("span",{children:a.label}),jsxRuntime.jsxs("span",{className:"text-secondary-400",children:["(",a.percent,"%)"]})]},a.id))})}function ce({data:n,donut:l=false,donutThickness:h=.5,startAngle:a=-90,padAngle:g=0,labelType:p="percent",centerLabel:u,centerSubLabel:C,explodeOnHover:A=true,explodeOffset:z=8,title:L,height:H=300,className:j,legend:E=true,legendPosition:m="bottom",animateOnMount:F=true,emptyText:G="No data to display"}){let b=react.useRef(null),M=react.useRef(null),[ot,T]=react.useState(400),[f,$]=react.useState(null),[S,R]=react.useState(null),[P,ft]=react.useState({}),O=react.useRef(null);react.useEffect(()=>{let t=M.current;if(!t)return;let o=t.getBoundingClientRect().width;o>0&&T(o);let r=new ResizeObserver(i=>{let c=i[0]?.contentRect.width;c&&c>0&&T(c);});return r.observe(t),()=>r.disconnect()},[]),react.useEffect(()=>{function t(r){let i=O.current;if(!i)return;"touches"in r&&r.cancelable&&r.preventDefault();let c="touches"in r?r.touches[0]?.clientX??i.startX:r.clientX,w="touches"in r?r.touches[0]?.clientY??i.startY:r.clientY;ft(X=>({...X,[i.id]:{dx:i.origDx+c-i.startX,dy:i.origDy+w-i.startY}}));}function o(){O.current=null;}return window.addEventListener("mousemove",t),window.addEventListener("mouseup",o),window.addEventListener("touchmove",t,{passive:false}),window.addEventListener("touchend",o),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",o),window.removeEventListener("touchmove",t),window.removeEventListener("touchend",o);}},[]);let St=react.useMemo(()=>n.map(t=>t.id),[n]),{visible:xt,toggle:Z,isVisible:gt}=Vt(St),K=react.useMemo(()=>wt(n.length),[n.length]),I=10,At=6.4,bt=18,it=14,U=6,at=ot,_=H,N=at/2,D=_/2,Et=p!=="none"?bt+U+4:U+4,st=Math.max(Math.min(N,D)-Et,20),yt=l?st*h:0,V=react.useMemo(()=>kt(n,xt,K,st,yt,N,D,a,g),[n,xt,K,st,yt,N,D,a,g]),Ct=react.useMemo(()=>V.map(t=>t.id).join(","),[V]);react.useEffect(()=>{ft({});},[Ct]);let Lt=react.useCallback((t,o)=>{if(O.current)return;let r=b.current?.getBoundingClientRect();if(!r)return;$(o);let i=V.find(c=>c.id===o);i&&R({x:t.clientX-r.left+12,y:t.clientY-r.top-10,items:[{label:i.label,value:tt(i.value),percent:`${i.percent}%`,color:i.color}]});},[V]),vt=react.useCallback(()=>{$(null),R(null);},[]),$t=react.useCallback((t,o,r)=>{let i=P[t]??{dx:0,dy:0};O.current={id:t,startX:o,startY:r,origDx:i.dx,origDy:i.dy};},[P]),Tt=react.useCallback((t,o)=>{t.preventDefault(),$(o);let r=b.current?.getBoundingClientRect();if(!r)return;let i=t.touches[0];if(!i)return;let c=V.find(w=>w.id===o);c&&R({x:i.clientX-r.left+12,y:i.clientY-r.top-10,items:[{label:c.label,value:tt(c.value),percent:`${c.percent}%`,color:c.color}]});},[V]),q=react.useMemo(()=>{let t=n.reduce((o,r)=>o+r.value,0);return n.map((o,r)=>({id:o.id,label:o.label,color:o.color??K[r],visible:gt(o.id),percent:t>0?Math.round(o.value/t*1e3)/10:0}))},[n,K,gt]),Nt=n.length>0&&n.some(t=>t.value>0),Dt=m==="left"||m==="right",Xt=react.useMemo(()=>{if(p==="none")return [];let t=I+3,o=U+I*.5,r=_-U-I*.5,i=V.filter(e=>e.percent>=3).map(e=>{let x="";switch(p){case "percent":x=`${e.percent}%`;break;case "value":x=tt(e.value);break;case "label":x=e.label;break;case "label+percent":x=`${e.label} ${e.percent}%`;break}let Y=k(e.cx,e.cy,e.outerR+2,e.midAngle),y=k(e.cx,e.cy,e.outerR+bt,e.midAngle),s=(e.midAngle-90)*Math.PI/180,J=Math.cos(s)>=0,Q=Math.ceil(x.length*At);return {id:e.id,color:e.color,text:x,textW:Q,p1:Y,elbowX:y.x,y:y.y,isRight:J}}),c=i.filter(e=>e.isRight).sort((e,x)=>e.y-x.y),w=i.filter(e=>!e.isRight).sort((e,x)=>e.y-x.y);function X(e){if(e.length!==0)for(let x=0;x<20;x++){let Y=false;for(let s=1;s<e.length;s++){let J=e[s].y-e[s-1].y;if(J<t){let Q=(t-J)/2;e[s-1].y-=Q,e[s].y+=Q,Y=true;}}e[0].y<o&&(e[0].y=o);for(let s=1;s<e.length;s++)e[s].y<e[s-1].y+t&&(e[s].y=e[s-1].y+t);let y=e.length-1;e[y].y>r&&(e[y].y=r);for(let s=y-1;s>=0;s--)e[s].y>e[s+1].y-t&&(e[s].y=e[s+1].y-t);for(let s of e)s.y=Math.max(o,Math.min(r,s.y));if(!Y)break}}return X(c),X(w),[...w,...c]},[V,p,_]),Rt=jsxRuntime.jsxs("svg",{role:"img","aria-label":L??"Pie chart",width:at,height:_,viewBox:`0 0 ${at} ${_}`,shapeRendering:"geometricPrecision",children:[jsxRuntime.jsxs("g",{className:F?"chart-pie-animate":"",children:[V.map((t,o)=>{let r=f===t.id,i=A&&r,c=Mt(t.midAngle,i?z:0);return jsxRuntime.jsx("path",{d:t.path,fill:t.color,transform:i?`translate(${c.dx}, ${c.dy})`:void 0,className:B("chart-slice",F&&`chart-slice-animate-${Math.min(o,7)}`,r&&"chart-slice--exploded"),stroke:t.color,strokeWidth:.6,onMouseMove:w=>Lt(w,t.id),onMouseLeave:vt,onTouchStart:w=>Tt(w,t.id),onTouchEnd:vt,"aria-label":`${t.label}: ${t.percent}%`},t.id)}),Xt.map(t=>{let o=P[t.id]??{dx:0,dy:0},r=t.elbowX+o.dx,i=t.y+o.dy,c=r+(t.isRight?it:-it),w=t.isRight?c+3:c-3,X=it+3+t.textW+6,e=t.isRight?r:r-X,x=i-I-2,Y=I*2+4;return jsxRuntime.jsxs("g",{style:{userSelect:"none"},children:[jsxRuntime.jsx("polyline",{points:[`${t.p1.x.toFixed(2)},${t.p1.y.toFixed(2)}`,`${r.toFixed(2)},${i.toFixed(2)}`,`${c.toFixed(2)},${i.toFixed(2)}`].join(" "),fill:"none",stroke:t.color,strokeWidth:1.2,opacity:.85,strokeLinejoin:"round",strokeLinecap:"round",style:{pointerEvents:"none"}}),jsxRuntime.jsx("text",{x:w.toFixed(2),y:i.toFixed(2),textAnchor:t.isRight?"start":"end",dominantBaseline:"middle",fontSize:I,fill:"currentColor",className:"text-primary-700 dark:text-primary-300",style:{pointerEvents:"none"},children:t.text}),jsxRuntime.jsx("rect",{x:e,y:x,width:X,height:Y,fill:"transparent",style:{cursor:"grab",touchAction:"none"},onMouseDown:y=>{y.stopPropagation(),$t(t.id,y.clientX,y.clientY);},onTouchStart:y=>{y.stopPropagation();let s=y.touches[0];s&&$t(t.id,s.clientX,s.clientY);}})]},`label-${t.id}`)})]}),l&&jsxRuntime.jsx("g",{style:{pointerEvents:"none"},children:f&&V.find(t=>t.id===f)?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("text",{x:N,y:D-8,textAnchor:"middle",dominantBaseline:"middle",fontSize:18,fontWeight:600,fill:"currentColor",className:"text-primary-800 dark:text-primary-100",children:[V.find(t=>t.id===f)?.percent,"%"]}),jsxRuntime.jsx("text",{x:N,y:D+12,textAnchor:"middle",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:V.find(t=>t.id===f)?.label})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[u&&jsxRuntime.jsx("text",{x:N,y:D-(C?8:0),textAnchor:"middle",dominantBaseline:"middle",fontSize:16,fontWeight:600,fill:"currentColor",className:"text-primary-800 dark:text-primary-100",children:u}),C&&jsxRuntime.jsx("text",{x:N,y:D+14,textAnchor:"middle",dominantBaseline:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:C})]})})]});return jsxRuntime.jsxs("div",{ref:b,className:B(lt(),j),children:[L&&jsxRuntime.jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:L}),E&&m==="top"&&jsxRuntime.jsx(rt,{items:q,position:"top",onToggle:Z}),jsxRuntime.jsxs("div",{className:B("flex items-start justify-center",Dt&&"gap-0"),children:[E&&m==="left"&&jsxRuntime.jsx(rt,{items:q,position:"left",onToggle:Z}),jsxRuntime.jsx("div",{ref:M,className:"flex-1 min-w-0 overflow-hidden",children:Nt?Rt:jsxRuntime.jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:H},children:G})}),E&&m==="right"&&jsxRuntime.jsx(rt,{items:q,position:"right",onToggle:Z})]}),E&&m==="bottom"&&jsxRuntime.jsx(rt,{items:q,position:"bottom",onToggle:Z}),S&&jsxRuntime.jsx("div",{className:mt(),style:{left:S.x,top:S.y},role:"tooltip",children:S.items.map((t,o)=>jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:t.color}}),jsxRuntime.jsxs("span",{className:"font-medium",children:[t.label,":"]}),jsxRuntime.jsx("span",{children:t.value}),jsxRuntime.jsxs("span",{className:"text-primary-300",children:["(",t.percent,")"]})]},o))})]})}exports.PieChart=ce;
|
|
1
|
+
'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime');function B(...n){return tailwindMerge.twMerge(clsx.clsx(n))}var lt=classVarianceAuthority.cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),dt=classVarianceAuthority.cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),mt=classVarianceAuthority.cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function $t(n){let[l,h]=react.useState(()=>new Set(n)),a=react.useCallback(u=>{h(C=>{let A=new Set(C);return A.has(u)?A.delete(u):A.add(u),A});},[]),g=react.useCallback(u=>l.has(u),[l]),p=react.useCallback(()=>{h(new Set(n));},[n]);return {visible:l,toggle:a,isVisible:g,showAll:p}}function wt(n){let l=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:n},(h,a)=>l[a%l.length])}function tt(n,l){return l?l(n):typeof n=="number"?Math.abs(n)>=1e6?`${(n/1e6).toFixed(1)}M`:Math.abs(n)>=1e3?`${(n/1e3).toFixed(1)}K`:Number.isInteger(n)?n.toString():n.toFixed(2):String(n)}function k(n,l,h,a){let g=(a-90)*Math.PI/180;return {x:n+h*Math.cos(g),y:l+h*Math.sin(g)}}function kt(n,l,h,a,g,p,u,C,A){let z=n.filter(m=>l.has(m.id)),L=z.reduce((m,F)=>m+F.value,0);if(L===0)return [];let H=new Map(n.map((m,F)=>[m.id,m.color??h[F%h.length]])),j=[],E=C;for(let m of z){let F=m.value/L*360,G=A/2,b=E+G,M=E+F-G,ot=(b+M)/2,T;if(Math.abs(M-b)>=359.9){let f=k(p,u,a,b),V=k(p,u,a,b+180);T=`M ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 1 1 ${V.x.toFixed(3)} ${V.y.toFixed(3)} A ${a} ${a} 0 1 1 ${f.x.toFixed(3)} ${f.y.toFixed(3)} Z`;}else if(g>0){let f=k(p,u,a,b),V=k(p,u,a,M),S=k(p,u,g,M),R=k(p,u,g,b),P=M-b>180?1:0;T=`M ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 ${P} 1 ${V.x.toFixed(3)} ${V.y.toFixed(3)} L ${S.x.toFixed(3)} ${S.y.toFixed(3)} A ${g} ${g} 0 ${P} 0 ${R.x.toFixed(3)} ${R.y.toFixed(3)} Z`;}else {let f=k(p,u,a,b),V=k(p,u,a,M),S=M-b>180?1:0;T=`M ${p.toFixed(3)} ${u.toFixed(3)} L ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 ${S} 1 ${V.x.toFixed(3)} ${V.y.toFixed(3)} Z`;}j.push({id:m.id,label:m.label,value:m.value,percent:Math.round(m.value/L*1e3)/10,color:H.get(m.id)??"var(--color-chart-1)",startAngle:b,endAngle:M,midAngle:ot,path:T,outerR:a,innerR:g,cx:p,cy:u}),E+=F;}return j}function Mt(n,l){let h=(n-90)*Math.PI/180;return {dx:Math.cos(h)*l,dy:Math.sin(h)*l}}function rt({items:n,position:l,onToggle:h}){return jsxRuntime.jsx("div",{className:dt({position:l}),children:n.map(a=>jsxRuntime.jsxs("button",{onClick:()=>h(a.id),className:B("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!a.visible&&"opacity-40"),"aria-pressed":a.visible,children:[jsxRuntime.jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:a.color}}),jsxRuntime.jsx("span",{children:a.label}),jsxRuntime.jsxs("span",{className:"text-secondary-400",children:["(",a.percent,"%)"]})]},a.id))})}function ce({data:n,donut:l=false,donutThickness:h=.5,startAngle:a=-90,padAngle:g=0,labelType:p="percent",centerLabel:u,centerSubLabel:C,explodeOnHover:A=true,explodeOffset:z=8,title:L,height:H=300,className:j,legend:E=true,legendPosition:m="bottom",animateOnMount:F=true,emptyText:G="No data to display"}){let b=react.useRef(null),M=react.useRef(null),[ot,T]=react.useState(400),[f,V]=react.useState(null),[S,R]=react.useState(null),[P,ft]=react.useState({}),O=react.useRef(null);react.useEffect(()=>{let t=M.current;if(!t)return;let o=t.getBoundingClientRect().width;o>0&&T(o);let r=new ResizeObserver(i=>{let c=i[0]?.contentRect.width;c&&c>0&&T(c);});return r.observe(t),()=>r.disconnect()},[]),react.useEffect(()=>{function t(r){let i=O.current;if(!i)return;"touches"in r&&r.cancelable&&r.preventDefault();let c="touches"in r?r.touches[0]?.clientX??i.startX:r.clientX,w="touches"in r?r.touches[0]?.clientY??i.startY:r.clientY;ft(X=>({...X,[i.id]:{dx:i.origDx+c-i.startX,dy:i.origDy+w-i.startY}}));}function o(){O.current=null;}return window.addEventListener("mousemove",t),window.addEventListener("mouseup",o),window.addEventListener("touchmove",t,{passive:false}),window.addEventListener("touchend",o),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",o),window.removeEventListener("touchmove",t),window.removeEventListener("touchend",o);}},[]);let St=react.useMemo(()=>n.map(t=>t.id),[n]),{visible:xt,toggle:Z,isVisible:gt}=$t(St),K=react.useMemo(()=>wt(n.length),[n.length]),I=10,At=6.4,bt=18,it=14,U=6,at=ot,_=H,N=at/2,D=_/2,Et=p!=="none"?bt+U+4:U+4,st=Math.max(Math.min(N,D)-Et,20),yt=l?st*h:0,$=react.useMemo(()=>kt(n,xt,K,st,yt,N,D,a,g),[n,xt,K,st,yt,N,D,a,g]),Ct=react.useMemo(()=>$.map(t=>t.id).join(","),[$]);react.useEffect(()=>{ft({});},[Ct]);let Lt=react.useCallback((t,o)=>{if(O.current)return;let r=b.current?.getBoundingClientRect();if(!r)return;V(o);let i=$.find(c=>c.id===o);i&&R({x:t.clientX-r.left+12,y:t.clientY-r.top-10,items:[{label:i.label,value:tt(i.value),percent:`${i.percent}%`,color:i.color}]});},[$]),vt=react.useCallback(()=>{V(null),R(null);},[]),Vt=react.useCallback((t,o,r)=>{let i=P[t]??{dx:0,dy:0};O.current={id:t,startX:o,startY:r,origDx:i.dx,origDy:i.dy};},[P]),Tt=react.useCallback((t,o)=>{t.preventDefault(),V(o);let r=b.current?.getBoundingClientRect();if(!r)return;let i=t.touches[0];if(!i)return;let c=$.find(w=>w.id===o);c&&R({x:i.clientX-r.left+12,y:i.clientY-r.top-10,items:[{label:c.label,value:tt(c.value),percent:`${c.percent}%`,color:c.color}]});},[$]),q=react.useMemo(()=>{let t=n.reduce((o,r)=>o+r.value,0);return n.map((o,r)=>({id:o.id,label:o.label,color:o.color??K[r],visible:gt(o.id),percent:t>0?Math.round(o.value/t*1e3)/10:0}))},[n,K,gt]),Nt=n.length>0&&n.some(t=>t.value>0),Dt=m==="left"||m==="right",Xt=react.useMemo(()=>{if(p==="none")return [];let t=I+3,o=U+I*.5,r=_-U-I*.5,i=$.filter(e=>e.percent>=3).map(e=>{let x="";switch(p){case "percent":x=`${e.percent}%`;break;case "value":x=tt(e.value);break;case "label":x=e.label;break;case "label+percent":x=`${e.label} ${e.percent}%`;break}let Y=k(e.cx,e.cy,e.outerR+2,e.midAngle),y=k(e.cx,e.cy,e.outerR+bt,e.midAngle),s=(e.midAngle-90)*Math.PI/180,J=Math.cos(s)>=0,Q=Math.ceil(x.length*At);return {id:e.id,color:e.color,text:x,textW:Q,p1:Y,elbowX:y.x,y:y.y,isRight:J}}),c=i.filter(e=>e.isRight).sort((e,x)=>e.y-x.y),w=i.filter(e=>!e.isRight).sort((e,x)=>e.y-x.y);function X(e){if(e.length!==0)for(let x=0;x<20;x++){let Y=false;for(let s=1;s<e.length;s++){let J=e[s].y-e[s-1].y;if(J<t){let Q=(t-J)/2;e[s-1].y-=Q,e[s].y+=Q,Y=true;}}e[0].y<o&&(e[0].y=o);for(let s=1;s<e.length;s++)e[s].y<e[s-1].y+t&&(e[s].y=e[s-1].y+t);let y=e.length-1;e[y].y>r&&(e[y].y=r);for(let s=y-1;s>=0;s--)e[s].y>e[s+1].y-t&&(e[s].y=e[s+1].y-t);for(let s of e)s.y=Math.max(o,Math.min(r,s.y));if(!Y)break}}return X(c),X(w),[...w,...c]},[$,p,_]),Rt=jsxRuntime.jsxs("svg",{role:"img","aria-label":L??"Pie chart",width:at,height:_,viewBox:`0 0 ${at} ${_}`,shapeRendering:"geometricPrecision",children:[jsxRuntime.jsxs("g",{className:F?"chart-pie-animate":"",children:[$.map((t,o)=>{let r=f===t.id,i=A&&r,c=Mt(t.midAngle,i?z:0);return jsxRuntime.jsx("path",{d:t.path,fill:t.color,transform:i?`translate(${c.dx}, ${c.dy})`:void 0,className:B("chart-slice",F&&`chart-slice-animate-${Math.min(o,7)}`,r&&"chart-slice--exploded"),stroke:t.color,strokeWidth:.6,onMouseMove:w=>Lt(w,t.id),onMouseLeave:vt,onTouchStart:w=>Tt(w,t.id),onTouchEnd:vt,"aria-label":`${t.label}: ${t.percent}%`},t.id)}),Xt.map(t=>{let o=P[t.id]??{dx:0,dy:0},r=t.elbowX+o.dx,i=t.y+o.dy,c=r+(t.isRight?it:-it),w=t.isRight?c+3:c-3,X=it+3+t.textW+6,e=t.isRight?r:r-X,x=i-I-2,Y=I*2+4;return jsxRuntime.jsxs("g",{style:{userSelect:"none"},children:[jsxRuntime.jsx("polyline",{points:[`${t.p1.x.toFixed(2)},${t.p1.y.toFixed(2)}`,`${r.toFixed(2)},${i.toFixed(2)}`,`${c.toFixed(2)},${i.toFixed(2)}`].join(" "),fill:"none",stroke:t.color,strokeWidth:1.2,opacity:.85,strokeLinejoin:"round",strokeLinecap:"round",style:{pointerEvents:"none"}}),jsxRuntime.jsx("text",{x:w.toFixed(2),y:i.toFixed(2),textAnchor:t.isRight?"start":"end",dominantBaseline:"middle",fontSize:I,fill:"currentColor",className:"text-primary-700 dark:text-primary-300",style:{pointerEvents:"none"},children:t.text}),jsxRuntime.jsx("rect",{x:e,y:x,width:X,height:Y,fill:"transparent",style:{cursor:"grab",touchAction:"none"},onMouseDown:y=>{y.stopPropagation(),Vt(t.id,y.clientX,y.clientY);},onTouchStart:y=>{y.stopPropagation();let s=y.touches[0];s&&Vt(t.id,s.clientX,s.clientY);}})]},`label-${t.id}`)})]}),l&&jsxRuntime.jsx("g",{style:{pointerEvents:"none"},children:f&&$.find(t=>t.id===f)?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("text",{x:N,y:D-8,textAnchor:"middle",dominantBaseline:"middle",fontSize:18,fontWeight:600,fill:"currentColor",className:"text-primary-800 dark:text-primary-100",children:[$.find(t=>t.id===f)?.percent,"%"]}),jsxRuntime.jsx("text",{x:N,y:D+12,textAnchor:"middle",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$.find(t=>t.id===f)?.label})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[u&&jsxRuntime.jsx("text",{x:N,y:D-(C?8:0),textAnchor:"middle",dominantBaseline:"middle",fontSize:16,fontWeight:600,fill:"currentColor",className:"text-primary-800 dark:text-primary-100",children:u}),C&&jsxRuntime.jsx("text",{x:N,y:D+14,textAnchor:"middle",dominantBaseline:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:C})]})})]});return jsxRuntime.jsxs("div",{ref:b,className:B(lt(),j),children:[L&&jsxRuntime.jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:L}),E&&m==="top"&&jsxRuntime.jsx(rt,{items:q,position:"top",onToggle:Z}),jsxRuntime.jsxs("div",{className:B("flex items-start justify-center",Dt&&"gap-0"),children:[E&&m==="left"&&jsxRuntime.jsx(rt,{items:q,position:"left",onToggle:Z}),jsxRuntime.jsx("div",{ref:M,className:"flex-1 min-w-0 overflow-hidden",children:Nt?Rt:jsxRuntime.jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:H},children:G})}),E&&m==="right"&&jsxRuntime.jsx(rt,{items:q,position:"right",onToggle:Z})]}),E&&m==="bottom"&&jsxRuntime.jsx(rt,{items:q,position:"bottom",onToggle:Z}),S&&jsxRuntime.jsx("div",{className:mt(),style:{left:S.x,top:S.y},role:"tooltip",children:S.items.map((t,o)=>jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:t.color}}),jsxRuntime.jsxs("span",{className:"font-medium",children:[t.label,":"]}),jsxRuntime.jsx("span",{children:t.value}),jsxRuntime.jsxs("span",{className:"text-primary-300",children:["(",t.percent,")"]})]},o))})]})}exports.PieChart=ce;
|
package/dist/Chart/PieChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {useRef,useState,useEffect,useMemo,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function B(...n){return twMerge(clsx(n))}var lt=cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),dt=cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),mt=cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function Vt(n){let[l,h]=useState(()=>new Set(n)),a=useCallback(u=>{h(C=>{let A=new Set(C);return A.has(u)?A.delete(u):A.add(u),A});},[]),g=useCallback(u=>l.has(u),[l]),p=useCallback(()=>{h(new Set(n));},[n]);return {visible:l,toggle:a,isVisible:g,showAll:p}}function wt(n){let l=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:n},(h,a)=>l[a%l.length])}function tt(n,l){return l?l(n):typeof n=="number"?Math.abs(n)>=1e6?`${(n/1e6).toFixed(1)}M`:Math.abs(n)>=1e3?`${(n/1e3).toFixed(1)}K`:Number.isInteger(n)?n.toString():n.toFixed(2):String(n)}function k(n,l,h,a){let g=(a-90)*Math.PI/180;return {x:n+h*Math.cos(g),y:l+h*Math.sin(g)}}function kt(n,l,h,a,g,p,u,C,A){let z=n.filter(m=>l.has(m.id)),L=z.reduce((m,F)=>m+F.value,0);if(L===0)return [];let H=new Map(n.map((m,F)=>[m.id,m.color??h[F%h.length]])),j=[],E=C;for(let m of z){let F=m.value/L*360,G=A/2,b=E+G,M=E+F-G,ot=(b+M)/2,T;if(Math.abs(M-b)>=359.9){let f=k(p,u,a,b),$=k(p,u,a,b+180);T=`M ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 1 1 ${$.x.toFixed(3)} ${$.y.toFixed(3)} A ${a} ${a} 0 1 1 ${f.x.toFixed(3)} ${f.y.toFixed(3)} Z`;}else if(g>0){let f=k(p,u,a,b),$=k(p,u,a,M),S=k(p,u,g,M),R=k(p,u,g,b),P=M-b>180?1:0;T=`M ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 ${P} 1 ${$.x.toFixed(3)} ${$.y.toFixed(3)} L ${S.x.toFixed(3)} ${S.y.toFixed(3)} A ${g} ${g} 0 ${P} 0 ${R.x.toFixed(3)} ${R.y.toFixed(3)} Z`;}else {let f=k(p,u,a,b),$=k(p,u,a,M),S=M-b>180?1:0;T=`M ${p.toFixed(3)} ${u.toFixed(3)} L ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 ${S} 1 ${$.x.toFixed(3)} ${$.y.toFixed(3)} Z`;}j.push({id:m.id,label:m.label,value:m.value,percent:Math.round(m.value/L*1e3)/10,color:H.get(m.id)??"var(--color-chart-1)",startAngle:b,endAngle:M,midAngle:ot,path:T,outerR:a,innerR:g,cx:p,cy:u}),E+=F;}return j}function Mt(n,l){let h=(n-90)*Math.PI/180;return {dx:Math.cos(h)*l,dy:Math.sin(h)*l}}function rt({items:n,position:l,onToggle:h}){return jsx("div",{className:dt({position:l}),children:n.map(a=>jsxs("button",{onClick:()=>h(a.id),className:B("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!a.visible&&"opacity-40"),"aria-pressed":a.visible,children:[jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:a.color}}),jsx("span",{children:a.label}),jsxs("span",{className:"text-secondary-400",children:["(",a.percent,"%)"]})]},a.id))})}function ce({data:n,donut:l=false,donutThickness:h=.5,startAngle:a=-90,padAngle:g=0,labelType:p="percent",centerLabel:u,centerSubLabel:C,explodeOnHover:A=true,explodeOffset:z=8,title:L,height:H=300,className:j,legend:E=true,legendPosition:m="bottom",animateOnMount:F=true,emptyText:G="No data to display"}){let b=useRef(null),M=useRef(null),[ot,T]=useState(400),[f,$]=useState(null),[S,R]=useState(null),[P,ft]=useState({}),O=useRef(null);useEffect(()=>{let t=M.current;if(!t)return;let o=t.getBoundingClientRect().width;o>0&&T(o);let r=new ResizeObserver(i=>{let c=i[0]?.contentRect.width;c&&c>0&&T(c);});return r.observe(t),()=>r.disconnect()},[]),useEffect(()=>{function t(r){let i=O.current;if(!i)return;"touches"in r&&r.cancelable&&r.preventDefault();let c="touches"in r?r.touches[0]?.clientX??i.startX:r.clientX,w="touches"in r?r.touches[0]?.clientY??i.startY:r.clientY;ft(X=>({...X,[i.id]:{dx:i.origDx+c-i.startX,dy:i.origDy+w-i.startY}}));}function o(){O.current=null;}return window.addEventListener("mousemove",t),window.addEventListener("mouseup",o),window.addEventListener("touchmove",t,{passive:false}),window.addEventListener("touchend",o),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",o),window.removeEventListener("touchmove",t),window.removeEventListener("touchend",o);}},[]);let St=useMemo(()=>n.map(t=>t.id),[n]),{visible:xt,toggle:Z,isVisible:gt}=Vt(St),K=useMemo(()=>wt(n.length),[n.length]),I=10,At=6.4,bt=18,it=14,U=6,at=ot,_=H,N=at/2,D=_/2,Et=p!=="none"?bt+U+4:U+4,st=Math.max(Math.min(N,D)-Et,20),yt=l?st*h:0,V=useMemo(()=>kt(n,xt,K,st,yt,N,D,a,g),[n,xt,K,st,yt,N,D,a,g]),Ct=useMemo(()=>V.map(t=>t.id).join(","),[V]);useEffect(()=>{ft({});},[Ct]);let Lt=useCallback((t,o)=>{if(O.current)return;let r=b.current?.getBoundingClientRect();if(!r)return;$(o);let i=V.find(c=>c.id===o);i&&R({x:t.clientX-r.left+12,y:t.clientY-r.top-10,items:[{label:i.label,value:tt(i.value),percent:`${i.percent}%`,color:i.color}]});},[V]),vt=useCallback(()=>{$(null),R(null);},[]),$t=useCallback((t,o,r)=>{let i=P[t]??{dx:0,dy:0};O.current={id:t,startX:o,startY:r,origDx:i.dx,origDy:i.dy};},[P]),Tt=useCallback((t,o)=>{t.preventDefault(),$(o);let r=b.current?.getBoundingClientRect();if(!r)return;let i=t.touches[0];if(!i)return;let c=V.find(w=>w.id===o);c&&R({x:i.clientX-r.left+12,y:i.clientY-r.top-10,items:[{label:c.label,value:tt(c.value),percent:`${c.percent}%`,color:c.color}]});},[V]),q=useMemo(()=>{let t=n.reduce((o,r)=>o+r.value,0);return n.map((o,r)=>({id:o.id,label:o.label,color:o.color??K[r],visible:gt(o.id),percent:t>0?Math.round(o.value/t*1e3)/10:0}))},[n,K,gt]),Nt=n.length>0&&n.some(t=>t.value>0),Dt=m==="left"||m==="right",Xt=useMemo(()=>{if(p==="none")return [];let t=I+3,o=U+I*.5,r=_-U-I*.5,i=V.filter(e=>e.percent>=3).map(e=>{let x="";switch(p){case "percent":x=`${e.percent}%`;break;case "value":x=tt(e.value);break;case "label":x=e.label;break;case "label+percent":x=`${e.label} ${e.percent}%`;break}let Y=k(e.cx,e.cy,e.outerR+2,e.midAngle),y=k(e.cx,e.cy,e.outerR+bt,e.midAngle),s=(e.midAngle-90)*Math.PI/180,J=Math.cos(s)>=0,Q=Math.ceil(x.length*At);return {id:e.id,color:e.color,text:x,textW:Q,p1:Y,elbowX:y.x,y:y.y,isRight:J}}),c=i.filter(e=>e.isRight).sort((e,x)=>e.y-x.y),w=i.filter(e=>!e.isRight).sort((e,x)=>e.y-x.y);function X(e){if(e.length!==0)for(let x=0;x<20;x++){let Y=false;for(let s=1;s<e.length;s++){let J=e[s].y-e[s-1].y;if(J<t){let Q=(t-J)/2;e[s-1].y-=Q,e[s].y+=Q,Y=true;}}e[0].y<o&&(e[0].y=o);for(let s=1;s<e.length;s++)e[s].y<e[s-1].y+t&&(e[s].y=e[s-1].y+t);let y=e.length-1;e[y].y>r&&(e[y].y=r);for(let s=y-1;s>=0;s--)e[s].y>e[s+1].y-t&&(e[s].y=e[s+1].y-t);for(let s of e)s.y=Math.max(o,Math.min(r,s.y));if(!Y)break}}return X(c),X(w),[...w,...c]},[V,p,_]),Rt=jsxs("svg",{role:"img","aria-label":L??"Pie chart",width:at,height:_,viewBox:`0 0 ${at} ${_}`,shapeRendering:"geometricPrecision",children:[jsxs("g",{className:F?"chart-pie-animate":"",children:[V.map((t,o)=>{let r=f===t.id,i=A&&r,c=Mt(t.midAngle,i?z:0);return jsx("path",{d:t.path,fill:t.color,transform:i?`translate(${c.dx}, ${c.dy})`:void 0,className:B("chart-slice",F&&`chart-slice-animate-${Math.min(o,7)}`,r&&"chart-slice--exploded"),stroke:t.color,strokeWidth:.6,onMouseMove:w=>Lt(w,t.id),onMouseLeave:vt,onTouchStart:w=>Tt(w,t.id),onTouchEnd:vt,"aria-label":`${t.label}: ${t.percent}%`},t.id)}),Xt.map(t=>{let o=P[t.id]??{dx:0,dy:0},r=t.elbowX+o.dx,i=t.y+o.dy,c=r+(t.isRight?it:-it),w=t.isRight?c+3:c-3,X=it+3+t.textW+6,e=t.isRight?r:r-X,x=i-I-2,Y=I*2+4;return jsxs("g",{style:{userSelect:"none"},children:[jsx("polyline",{points:[`${t.p1.x.toFixed(2)},${t.p1.y.toFixed(2)}`,`${r.toFixed(2)},${i.toFixed(2)}`,`${c.toFixed(2)},${i.toFixed(2)}`].join(" "),fill:"none",stroke:t.color,strokeWidth:1.2,opacity:.85,strokeLinejoin:"round",strokeLinecap:"round",style:{pointerEvents:"none"}}),jsx("text",{x:w.toFixed(2),y:i.toFixed(2),textAnchor:t.isRight?"start":"end",dominantBaseline:"middle",fontSize:I,fill:"currentColor",className:"text-primary-700 dark:text-primary-300",style:{pointerEvents:"none"},children:t.text}),jsx("rect",{x:e,y:x,width:X,height:Y,fill:"transparent",style:{cursor:"grab",touchAction:"none"},onMouseDown:y=>{y.stopPropagation(),$t(t.id,y.clientX,y.clientY);},onTouchStart:y=>{y.stopPropagation();let s=y.touches[0];s&&$t(t.id,s.clientX,s.clientY);}})]},`label-${t.id}`)})]}),l&&jsx("g",{style:{pointerEvents:"none"},children:f&&V.find(t=>t.id===f)?jsxs(Fragment,{children:[jsxs("text",{x:N,y:D-8,textAnchor:"middle",dominantBaseline:"middle",fontSize:18,fontWeight:600,fill:"currentColor",className:"text-primary-800 dark:text-primary-100",children:[V.find(t=>t.id===f)?.percent,"%"]}),jsx("text",{x:N,y:D+12,textAnchor:"middle",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:V.find(t=>t.id===f)?.label})]}):jsxs(Fragment,{children:[u&&jsx("text",{x:N,y:D-(C?8:0),textAnchor:"middle",dominantBaseline:"middle",fontSize:16,fontWeight:600,fill:"currentColor",className:"text-primary-800 dark:text-primary-100",children:u}),C&&jsx("text",{x:N,y:D+14,textAnchor:"middle",dominantBaseline:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:C})]})})]});return jsxs("div",{ref:b,className:B(lt(),j),children:[L&&jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:L}),E&&m==="top"&&jsx(rt,{items:q,position:"top",onToggle:Z}),jsxs("div",{className:B("flex items-start justify-center",Dt&&"gap-0"),children:[E&&m==="left"&&jsx(rt,{items:q,position:"left",onToggle:Z}),jsx("div",{ref:M,className:"flex-1 min-w-0 overflow-hidden",children:Nt?Rt:jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:H},children:G})}),E&&m==="right"&&jsx(rt,{items:q,position:"right",onToggle:Z})]}),E&&m==="bottom"&&jsx(rt,{items:q,position:"bottom",onToggle:Z}),S&&jsx("div",{className:mt(),style:{left:S.x,top:S.y},role:"tooltip",children:S.items.map((t,o)=>jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:t.color}}),jsxs("span",{className:"font-medium",children:[t.label,":"]}),jsx("span",{children:t.value}),jsxs("span",{className:"text-primary-300",children:["(",t.percent,")"]})]},o))})]})}export{ce as PieChart};
|
|
1
|
+
import {useRef,useState,useEffect,useMemo,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function B(...n){return twMerge(clsx(n))}var lt=cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),dt=cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),mt=cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function $t(n){let[l,h]=useState(()=>new Set(n)),a=useCallback(u=>{h(C=>{let A=new Set(C);return A.has(u)?A.delete(u):A.add(u),A});},[]),g=useCallback(u=>l.has(u),[l]),p=useCallback(()=>{h(new Set(n));},[n]);return {visible:l,toggle:a,isVisible:g,showAll:p}}function wt(n){let l=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:n},(h,a)=>l[a%l.length])}function tt(n,l){return l?l(n):typeof n=="number"?Math.abs(n)>=1e6?`${(n/1e6).toFixed(1)}M`:Math.abs(n)>=1e3?`${(n/1e3).toFixed(1)}K`:Number.isInteger(n)?n.toString():n.toFixed(2):String(n)}function k(n,l,h,a){let g=(a-90)*Math.PI/180;return {x:n+h*Math.cos(g),y:l+h*Math.sin(g)}}function kt(n,l,h,a,g,p,u,C,A){let z=n.filter(m=>l.has(m.id)),L=z.reduce((m,F)=>m+F.value,0);if(L===0)return [];let H=new Map(n.map((m,F)=>[m.id,m.color??h[F%h.length]])),j=[],E=C;for(let m of z){let F=m.value/L*360,G=A/2,b=E+G,M=E+F-G,ot=(b+M)/2,T;if(Math.abs(M-b)>=359.9){let f=k(p,u,a,b),V=k(p,u,a,b+180);T=`M ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 1 1 ${V.x.toFixed(3)} ${V.y.toFixed(3)} A ${a} ${a} 0 1 1 ${f.x.toFixed(3)} ${f.y.toFixed(3)} Z`;}else if(g>0){let f=k(p,u,a,b),V=k(p,u,a,M),S=k(p,u,g,M),R=k(p,u,g,b),P=M-b>180?1:0;T=`M ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 ${P} 1 ${V.x.toFixed(3)} ${V.y.toFixed(3)} L ${S.x.toFixed(3)} ${S.y.toFixed(3)} A ${g} ${g} 0 ${P} 0 ${R.x.toFixed(3)} ${R.y.toFixed(3)} Z`;}else {let f=k(p,u,a,b),V=k(p,u,a,M),S=M-b>180?1:0;T=`M ${p.toFixed(3)} ${u.toFixed(3)} L ${f.x.toFixed(3)} ${f.y.toFixed(3)} A ${a} ${a} 0 ${S} 1 ${V.x.toFixed(3)} ${V.y.toFixed(3)} Z`;}j.push({id:m.id,label:m.label,value:m.value,percent:Math.round(m.value/L*1e3)/10,color:H.get(m.id)??"var(--color-chart-1)",startAngle:b,endAngle:M,midAngle:ot,path:T,outerR:a,innerR:g,cx:p,cy:u}),E+=F;}return j}function Mt(n,l){let h=(n-90)*Math.PI/180;return {dx:Math.cos(h)*l,dy:Math.sin(h)*l}}function rt({items:n,position:l,onToggle:h}){return jsx("div",{className:dt({position:l}),children:n.map(a=>jsxs("button",{onClick:()=>h(a.id),className:B("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!a.visible&&"opacity-40"),"aria-pressed":a.visible,children:[jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:a.color}}),jsx("span",{children:a.label}),jsxs("span",{className:"text-secondary-400",children:["(",a.percent,"%)"]})]},a.id))})}function ce({data:n,donut:l=false,donutThickness:h=.5,startAngle:a=-90,padAngle:g=0,labelType:p="percent",centerLabel:u,centerSubLabel:C,explodeOnHover:A=true,explodeOffset:z=8,title:L,height:H=300,className:j,legend:E=true,legendPosition:m="bottom",animateOnMount:F=true,emptyText:G="No data to display"}){let b=useRef(null),M=useRef(null),[ot,T]=useState(400),[f,V]=useState(null),[S,R]=useState(null),[P,ft]=useState({}),O=useRef(null);useEffect(()=>{let t=M.current;if(!t)return;let o=t.getBoundingClientRect().width;o>0&&T(o);let r=new ResizeObserver(i=>{let c=i[0]?.contentRect.width;c&&c>0&&T(c);});return r.observe(t),()=>r.disconnect()},[]),useEffect(()=>{function t(r){let i=O.current;if(!i)return;"touches"in r&&r.cancelable&&r.preventDefault();let c="touches"in r?r.touches[0]?.clientX??i.startX:r.clientX,w="touches"in r?r.touches[0]?.clientY??i.startY:r.clientY;ft(X=>({...X,[i.id]:{dx:i.origDx+c-i.startX,dy:i.origDy+w-i.startY}}));}function o(){O.current=null;}return window.addEventListener("mousemove",t),window.addEventListener("mouseup",o),window.addEventListener("touchmove",t,{passive:false}),window.addEventListener("touchend",o),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",o),window.removeEventListener("touchmove",t),window.removeEventListener("touchend",o);}},[]);let St=useMemo(()=>n.map(t=>t.id),[n]),{visible:xt,toggle:Z,isVisible:gt}=$t(St),K=useMemo(()=>wt(n.length),[n.length]),I=10,At=6.4,bt=18,it=14,U=6,at=ot,_=H,N=at/2,D=_/2,Et=p!=="none"?bt+U+4:U+4,st=Math.max(Math.min(N,D)-Et,20),yt=l?st*h:0,$=useMemo(()=>kt(n,xt,K,st,yt,N,D,a,g),[n,xt,K,st,yt,N,D,a,g]),Ct=useMemo(()=>$.map(t=>t.id).join(","),[$]);useEffect(()=>{ft({});},[Ct]);let Lt=useCallback((t,o)=>{if(O.current)return;let r=b.current?.getBoundingClientRect();if(!r)return;V(o);let i=$.find(c=>c.id===o);i&&R({x:t.clientX-r.left+12,y:t.clientY-r.top-10,items:[{label:i.label,value:tt(i.value),percent:`${i.percent}%`,color:i.color}]});},[$]),vt=useCallback(()=>{V(null),R(null);},[]),Vt=useCallback((t,o,r)=>{let i=P[t]??{dx:0,dy:0};O.current={id:t,startX:o,startY:r,origDx:i.dx,origDy:i.dy};},[P]),Tt=useCallback((t,o)=>{t.preventDefault(),V(o);let r=b.current?.getBoundingClientRect();if(!r)return;let i=t.touches[0];if(!i)return;let c=$.find(w=>w.id===o);c&&R({x:i.clientX-r.left+12,y:i.clientY-r.top-10,items:[{label:c.label,value:tt(c.value),percent:`${c.percent}%`,color:c.color}]});},[$]),q=useMemo(()=>{let t=n.reduce((o,r)=>o+r.value,0);return n.map((o,r)=>({id:o.id,label:o.label,color:o.color??K[r],visible:gt(o.id),percent:t>0?Math.round(o.value/t*1e3)/10:0}))},[n,K,gt]),Nt=n.length>0&&n.some(t=>t.value>0),Dt=m==="left"||m==="right",Xt=useMemo(()=>{if(p==="none")return [];let t=I+3,o=U+I*.5,r=_-U-I*.5,i=$.filter(e=>e.percent>=3).map(e=>{let x="";switch(p){case "percent":x=`${e.percent}%`;break;case "value":x=tt(e.value);break;case "label":x=e.label;break;case "label+percent":x=`${e.label} ${e.percent}%`;break}let Y=k(e.cx,e.cy,e.outerR+2,e.midAngle),y=k(e.cx,e.cy,e.outerR+bt,e.midAngle),s=(e.midAngle-90)*Math.PI/180,J=Math.cos(s)>=0,Q=Math.ceil(x.length*At);return {id:e.id,color:e.color,text:x,textW:Q,p1:Y,elbowX:y.x,y:y.y,isRight:J}}),c=i.filter(e=>e.isRight).sort((e,x)=>e.y-x.y),w=i.filter(e=>!e.isRight).sort((e,x)=>e.y-x.y);function X(e){if(e.length!==0)for(let x=0;x<20;x++){let Y=false;for(let s=1;s<e.length;s++){let J=e[s].y-e[s-1].y;if(J<t){let Q=(t-J)/2;e[s-1].y-=Q,e[s].y+=Q,Y=true;}}e[0].y<o&&(e[0].y=o);for(let s=1;s<e.length;s++)e[s].y<e[s-1].y+t&&(e[s].y=e[s-1].y+t);let y=e.length-1;e[y].y>r&&(e[y].y=r);for(let s=y-1;s>=0;s--)e[s].y>e[s+1].y-t&&(e[s].y=e[s+1].y-t);for(let s of e)s.y=Math.max(o,Math.min(r,s.y));if(!Y)break}}return X(c),X(w),[...w,...c]},[$,p,_]),Rt=jsxs("svg",{role:"img","aria-label":L??"Pie chart",width:at,height:_,viewBox:`0 0 ${at} ${_}`,shapeRendering:"geometricPrecision",children:[jsxs("g",{className:F?"chart-pie-animate":"",children:[$.map((t,o)=>{let r=f===t.id,i=A&&r,c=Mt(t.midAngle,i?z:0);return jsx("path",{d:t.path,fill:t.color,transform:i?`translate(${c.dx}, ${c.dy})`:void 0,className:B("chart-slice",F&&`chart-slice-animate-${Math.min(o,7)}`,r&&"chart-slice--exploded"),stroke:t.color,strokeWidth:.6,onMouseMove:w=>Lt(w,t.id),onMouseLeave:vt,onTouchStart:w=>Tt(w,t.id),onTouchEnd:vt,"aria-label":`${t.label}: ${t.percent}%`},t.id)}),Xt.map(t=>{let o=P[t.id]??{dx:0,dy:0},r=t.elbowX+o.dx,i=t.y+o.dy,c=r+(t.isRight?it:-it),w=t.isRight?c+3:c-3,X=it+3+t.textW+6,e=t.isRight?r:r-X,x=i-I-2,Y=I*2+4;return jsxs("g",{style:{userSelect:"none"},children:[jsx("polyline",{points:[`${t.p1.x.toFixed(2)},${t.p1.y.toFixed(2)}`,`${r.toFixed(2)},${i.toFixed(2)}`,`${c.toFixed(2)},${i.toFixed(2)}`].join(" "),fill:"none",stroke:t.color,strokeWidth:1.2,opacity:.85,strokeLinejoin:"round",strokeLinecap:"round",style:{pointerEvents:"none"}}),jsx("text",{x:w.toFixed(2),y:i.toFixed(2),textAnchor:t.isRight?"start":"end",dominantBaseline:"middle",fontSize:I,fill:"currentColor",className:"text-primary-700 dark:text-primary-300",style:{pointerEvents:"none"},children:t.text}),jsx("rect",{x:e,y:x,width:X,height:Y,fill:"transparent",style:{cursor:"grab",touchAction:"none"},onMouseDown:y=>{y.stopPropagation(),Vt(t.id,y.clientX,y.clientY);},onTouchStart:y=>{y.stopPropagation();let s=y.touches[0];s&&Vt(t.id,s.clientX,s.clientY);}})]},`label-${t.id}`)})]}),l&&jsx("g",{style:{pointerEvents:"none"},children:f&&$.find(t=>t.id===f)?jsxs(Fragment,{children:[jsxs("text",{x:N,y:D-8,textAnchor:"middle",dominantBaseline:"middle",fontSize:18,fontWeight:600,fill:"currentColor",className:"text-primary-800 dark:text-primary-100",children:[$.find(t=>t.id===f)?.percent,"%"]}),jsx("text",{x:N,y:D+12,textAnchor:"middle",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:$.find(t=>t.id===f)?.label})]}):jsxs(Fragment,{children:[u&&jsx("text",{x:N,y:D-(C?8:0),textAnchor:"middle",dominantBaseline:"middle",fontSize:16,fontWeight:600,fill:"currentColor",className:"text-primary-800 dark:text-primary-100",children:u}),C&&jsx("text",{x:N,y:D+14,textAnchor:"middle",dominantBaseline:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:C})]})})]});return jsxs("div",{ref:b,className:B(lt(),j),children:[L&&jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:L}),E&&m==="top"&&jsx(rt,{items:q,position:"top",onToggle:Z}),jsxs("div",{className:B("flex items-start justify-center",Dt&&"gap-0"),children:[E&&m==="left"&&jsx(rt,{items:q,position:"left",onToggle:Z}),jsx("div",{ref:M,className:"flex-1 min-w-0 overflow-hidden",children:Nt?Rt:jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:H},children:G})}),E&&m==="right"&&jsx(rt,{items:q,position:"right",onToggle:Z})]}),E&&m==="bottom"&&jsx(rt,{items:q,position:"bottom",onToggle:Z}),S&&jsx("div",{className:mt(),style:{left:S.x,top:S.y},role:"tooltip",children:S.items.map((t,o)=>jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:t.color}}),jsxs("span",{className:"font-medium",children:[t.label,":"]}),jsx("span",{children:t.value}),jsxs("span",{className:"text-primary-300",children:["(",t.percent,")"]})]},o))})]})}export{ce as PieChart};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime');function M(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var _=classVarianceAuthority.cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),j=classVarianceAuthority.cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),H=classVarianceAuthority.cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function
|
|
1
|
+
'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime');function M(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var _=classVarianceAuthority.cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),j=classVarianceAuthority.cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),H=classVarianceAuthority.cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function nt(t){let[n,e]=react.useState(()=>new Set(t)),o=react.useCallback(l=>{e(b=>{let h=new Set(b);return h.has(l)?h.delete(l):h.add(l),h});},[]),s=react.useCallback(l=>n.has(l),[n]),m=react.useCallback(()=>{e(new Set(t));},[t]);return {visible:n,toggle:o,isVisible:s,showAll:m}}function ot(t){let n=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(e,o)=>n[o%n.length])}function G(t,n,e=.1){if(t===n)return [t-1,n+1];let s=(n-t)*e;return [Math.floor(t-s),Math.ceil(n+s)]}function at(t,n,e){if(e<=1)return [t];let o=(n-t)/(e-1);return Array.from({length:e},(s,m)=>+(t+m*o).toFixed(10))}function v(t,n){return n?n(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function J(t,n,e){return {top:20,right:e?65:20,bottom:t?52:36,left:n?65:52}}function K(t,n,e){let o=Math.max(t,120);return {width:o,height:n,margins:e,plotLeft:e.left,plotTop:e.top,plotRight:o-e.right,plotBottom:n-e.bottom,plotWidth:Math.max(o-e.left-e.right,10),plotHeight:Math.max(n-e.top-e.bottom,10)}}function it(t,n,e){let o=1/0,s=-1/0;for(let b of t)if(n.has(b.id))for(let h of b.data){let k=Number(h.x);k<o&&(o=k),k>s&&(s=k);}if(!isFinite(o))return [0,1];let[m,l]=G(o,s);return [e?.min??m,e?.max??l]}function st(t,n,e){let o=1/0,s=-1/0;for(let b of t)if(n.has(b.id))for(let h of b.data)h.y<o&&(o=h.y),h.y>s&&(s=h.y);if(!isFinite(o))return [0,1];let[m,l]=G(o,s);return [e?.min??m,e?.max??l]}function Z(t,n){let[e,o]=t,[s,m]=n;return o===e?()=>(s+m)/2:l=>s+(l-e)/(o-e)*(m-s)}function q(t,n=5){return at(t[0],t[1],n)}function ct(t,n,e){let o=1.618033988749895,s=t*137+n,m=s*o%1*2-1,l=s*o*o%1*2-1;return [m*e,l*e]}function lt(t,n,e=12){if(t.length<2)return null;let o=Math.min(...t),s=Math.max(...t),m=Math.min(...n),l=Math.max(...n);return {cx:(o+s)/2,cy:(m+l)/2,rx:(s-o)/2+e,ry:(l-m)/2+e}}function W({items:t,position:n,onToggle:e}){return jsxRuntime.jsx("div",{className:j({position:n}),children:t.map(o=>jsxRuntime.jsxs("button",{onClick:()=>e(o.id),className:M("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!o.visible&&"opacity-40"),"aria-pressed":o.visible,children:[jsxRuntime.jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:o.color}}),o.label]},o.id))})}function Ut({series:t,xAxis:n,yAxis:e,dotRadius:o=5,dotOpacity:s=.75,clusters:m=false,jitter:l=false,jitterAmount:b=12,linkedLines:h=false,title:k,height:E=300,className:dt,legend:F=true,legendPosition:V="bottom",animateOnMount:Q=true,emptyText:ft="No data to display"}){let P=react.useRef(null),U=react.useRef(null),[A,tt]=react.useState(600),[C,T]=react.useState(null);react.useEffect(()=>{let r=U.current;if(!r)return;let c=r.getBoundingClientRect().width;c>0&&tt(c);let d=new ResizeObserver(f=>{let u=f[0]?.contentRect.width;u&&u>0&&tt(u);});return d.observe(r),()=>d.disconnect()},[]);let ht=react.useMemo(()=>t.map(r=>r.id),[t]),{visible:w,toggle:L,isVisible:N}=nt(ht),$=react.useMemo(()=>ot(t.length),[t.length]),X=react.useMemo(()=>new Map(t.map((r,c)=>[r.id,r.color??$[c]])),[t,$]),et=react.useMemo(()=>J(!!n?.label,!!e?.label,false),[n?.label,e?.label]),a=react.useMemo(()=>K(A,E,et),[A,E,et]),D=react.useMemo(()=>it(t,w,n),[t,w,n]),R=react.useMemo(()=>st(t,w,e),[t,w,e]),B=react.useMemo(()=>Z(D,[a.plotLeft,a.plotRight]),[D,a]),S=react.useMemo(()=>Z(R,[a.plotBottom,a.plotTop]),[R,a]),xt=react.useMemo(()=>q(D,n?.tickCount??6),[D,n?.tickCount]),rt=react.useMemo(()=>q(R,e?.tickCount??5),[R,e?.tickCount]),bt=react.useCallback((r,c,d,f,u)=>{let p=P.current?.getBoundingClientRect();p&&T({x:r.clientX-p.left+12,y:r.clientY-p.top-10,seriesName:c,xVal:v(d,n?.format),yVal:v(f,e?.format),color:u});},[n?.format,e?.format]),gt=react.useCallback((r,c,d,f,u)=>{r.preventDefault();let p=P.current?.getBoundingClientRect();if(!p)return;let g=r.touches[0];g&&T({x:g.clientX-p.left+12,y:g.clientY-p.top-10,seriesName:c,xVal:v(d,n?.format),yVal:v(f,e?.format),color:u});},[n?.format,e?.format]),I=react.useMemo(()=>t.map((r,c)=>({id:r.id,label:r.name,color:r.color??$[c],visible:N(r.id)})),[t,$,N]),yt=t.some(r=>r.data.length>0),kt=V==="left"||V==="right",Ct=jsxRuntime.jsxs("svg",{role:"img","aria-label":k??"Scatter chart",width:a.width,height:a.height,viewBox:`0 0 ${a.width} ${a.height}`,shapeRendering:"geometricPrecision",children:[rt.map(r=>jsxRuntime.jsx("line",{x1:a.plotLeft,x2:a.plotRight,y1:S(r),y2:S(r),stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},r)),m&&t.map((r,c)=>{if(!N(r.id)||r.data.length<2)return null;let d=X.get(r.id)??"var(--color-chart-1)",f=r.data.map(g=>B(Number(g.x))),u=r.data.map(g=>S(g.y)),p=lt(f,u,16);return p?jsxRuntime.jsx("ellipse",{cx:p.cx,cy:p.cy,rx:p.rx,ry:p.ry,fill:d,fillOpacity:.06,stroke:d,strokeOpacity:.3,strokeWidth:1.5,strokeDasharray:"5 3",className:Q?"chart-cluster-ellipse":"",style:{animationDelay:`${c*.1}s`}},`cluster-${r.id}`):null}),h&&t.map(r=>{if(!N(r.id)||r.data.length<2)return null;let c=X.get(r.id)??"var(--color-chart-1)",f=[...r.data].sort((u,p)=>Number(u.x)-Number(p.x)).map(u=>`${B(Number(u.x)).toFixed(2)},${S(u.y).toFixed(2)}`).join(" ");return jsxRuntime.jsx("polyline",{points:f,fill:"none",stroke:c,strokeWidth:1.5,className:"chart-scatter-link"},`link-${r.id}`)}),t.map((r,c)=>{if(!N(r.id))return null;let d=X.get(r.id)??"var(--color-chart-1)";return jsxRuntime.jsx("g",{className:"chart-scatter-group",children:r.data.map((f,u)=>{let[p,g]=l?ct(c,u,b):[0,0],vt=B(Number(f.x))+p,Vt=S(f.y)+g;return jsxRuntime.jsx("circle",{cx:vt,cy:Vt,r:o,fill:d,fillOpacity:s,stroke:d,strokeWidth:1,strokeOpacity:.5,className:M("chart-scatter-dot",Q&&"chart-scatter-dot--animate"),style:{color:d},onMouseMove:Y=>bt(Y,r.name,f.x,f.y,d),onMouseLeave:()=>T(null),onTouchStart:Y=>gt(Y,r.name,f.x,f.y,d),onTouchEnd:()=>T(null)},u)})},r.id)}),jsxRuntime.jsx("line",{x1:a.plotLeft,x2:a.plotLeft,y1:a.plotTop,y2:a.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("line",{x1:a.plotLeft,x2:a.plotRight,y1:a.plotBottom,y2:a.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),rt.map(r=>{let c=S(r);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:a.plotLeft-4,x2:a.plotLeft,y1:c,y2:c,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:a.plotLeft-6,y:c,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:v(r,e?.format)})]},r)}),xt.map(r=>{let c=B(r);return jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx("line",{x1:c,x2:c,y1:a.plotBottom,y2:a.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsxRuntime.jsx("text",{x:c,y:a.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:v(r,n?.format)})]},r)}),e?.label&&jsxRuntime.jsx("text",{x:-(a.plotTop+a.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:e.label}),n?.label&&jsxRuntime.jsx("text",{x:a.plotLeft+a.plotWidth/2,y:a.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:n.label})]});return jsxRuntime.jsxs("div",{ref:P,className:M(_(),dt),children:[k&&jsxRuntime.jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:k}),F&&V==="top"&&jsxRuntime.jsx(W,{items:I,position:"top",onToggle:L}),jsxRuntime.jsxs("div",{className:M("flex items-start",kt&&"gap-0"),children:[F&&V==="left"&&jsxRuntime.jsx(W,{items:I,position:"left",onToggle:L}),jsxRuntime.jsx("div",{ref:U,className:"flex-1 min-w-0 overflow-hidden",children:yt?Ct:jsxRuntime.jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:E},children:ft})}),F&&V==="right"&&jsxRuntime.jsx(W,{items:I,position:"right",onToggle:L})]}),F&&V==="bottom"&&jsxRuntime.jsx(W,{items:I,position:"bottom",onToggle:L}),C&&jsxRuntime.jsxs("div",{className:H(),style:{left:C.x,top:C.y},role:"tooltip",children:[jsxRuntime.jsxs("div",{className:"flex items-center gap-1.5 mb-1",children:[jsxRuntime.jsx("span",{className:"h-2 w-2 rounded-full",style:{background:C.color}}),jsxRuntime.jsx("span",{className:"font-medium",children:C.seriesName})]}),jsxRuntime.jsxs("div",{className:"text-primary-300",children:["X: ",jsxRuntime.jsx("span",{className:"font-medium text-primary-50",children:C.xVal})," ","Y: ",jsxRuntime.jsx("span",{className:"font-medium text-primary-50",children:C.yVal})]})]})]})}exports.ScatterChart=Ut;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import {useRef,useState,useEffect,useMemo,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';function M(...t){return twMerge(clsx(t))}var _=cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),j=cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),H=cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function
|
|
1
|
+
import {useRef,useState,useEffect,useMemo,useCallback}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {cva}from'class-variance-authority';import {jsxs,jsx}from'react/jsx-runtime';function M(...t){return twMerge(clsx(t))}var _=cva("relative w-full font-sans select-none",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),j=cva("flex flex-wrap gap-3 items-center justify-center",{variants:{position:{top:"mb-3",bottom:"mt-3",left:"flex-col mr-4",right:"flex-col ml-4"}},defaultVariants:{position:"bottom"}}),H=cva("absolute z-50 pointer-events-none px-3 py-2 rounded-lg text-xs shadow-lg border transition-opacity duration-150 bg-primary-900 text-primary-50 border-primary-700 dark:bg-primary-950 dark:border-primary-800");function nt(t){let[n,e]=useState(()=>new Set(t)),o=useCallback(l=>{e(b=>{let h=new Set(b);return h.has(l)?h.delete(l):h.add(l),h});},[]),s=useCallback(l=>n.has(l),[n]),m=useCallback(()=>{e(new Set(t));},[t]);return {visible:n,toggle:o,isVisible:s,showAll:m}}function ot(t){let n=["var(--color-chart-1)","var(--color-chart-2)","var(--color-chart-3)","var(--color-chart-4)","var(--color-chart-5)","var(--color-chart-6)","var(--color-chart-7)","var(--color-chart-8)"];return Array.from({length:t},(e,o)=>n[o%n.length])}function G(t,n,e=.1){if(t===n)return [t-1,n+1];let s=(n-t)*e;return [Math.floor(t-s),Math.ceil(n+s)]}function at(t,n,e){if(e<=1)return [t];let o=(n-t)/(e-1);return Array.from({length:e},(s,m)=>+(t+m*o).toFixed(10))}function v(t,n){return n?n(t):typeof t=="number"?Math.abs(t)>=1e6?`${(t/1e6).toFixed(1)}M`:Math.abs(t)>=1e3?`${(t/1e3).toFixed(1)}K`:Number.isInteger(t)?t.toString():t.toFixed(2):String(t)}function J(t,n,e){return {top:20,right:e?65:20,bottom:t?52:36,left:n?65:52}}function K(t,n,e){let o=Math.max(t,120);return {width:o,height:n,margins:e,plotLeft:e.left,plotTop:e.top,plotRight:o-e.right,plotBottom:n-e.bottom,plotWidth:Math.max(o-e.left-e.right,10),plotHeight:Math.max(n-e.top-e.bottom,10)}}function it(t,n,e){let o=1/0,s=-1/0;for(let b of t)if(n.has(b.id))for(let h of b.data){let k=Number(h.x);k<o&&(o=k),k>s&&(s=k);}if(!isFinite(o))return [0,1];let[m,l]=G(o,s);return [e?.min??m,e?.max??l]}function st(t,n,e){let o=1/0,s=-1/0;for(let b of t)if(n.has(b.id))for(let h of b.data)h.y<o&&(o=h.y),h.y>s&&(s=h.y);if(!isFinite(o))return [0,1];let[m,l]=G(o,s);return [e?.min??m,e?.max??l]}function Z(t,n){let[e,o]=t,[s,m]=n;return o===e?()=>(s+m)/2:l=>s+(l-e)/(o-e)*(m-s)}function q(t,n=5){return at(t[0],t[1],n)}function ct(t,n,e){let o=1.618033988749895,s=t*137+n,m=s*o%1*2-1,l=s*o*o%1*2-1;return [m*e,l*e]}function lt(t,n,e=12){if(t.length<2)return null;let o=Math.min(...t),s=Math.max(...t),m=Math.min(...n),l=Math.max(...n);return {cx:(o+s)/2,cy:(m+l)/2,rx:(s-o)/2+e,ry:(l-m)/2+e}}function W({items:t,position:n,onToggle:e}){return jsx("div",{className:j({position:n}),children:t.map(o=>jsxs("button",{onClick:()=>e(o.id),className:M("flex items-center gap-1.5 cursor-pointer rounded px-1.5 py-1 text-xs text-primary-700 transition-opacity hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-800",!o.visible&&"opacity-40"),"aria-pressed":o.visible,children:[jsx("span",{className:"h-2.5 w-2.5 rounded-full shrink-0",style:{background:o.color}}),o.label]},o.id))})}function Ut({series:t,xAxis:n,yAxis:e,dotRadius:o=5,dotOpacity:s=.75,clusters:m=false,jitter:l=false,jitterAmount:b=12,linkedLines:h=false,title:k,height:E=300,className:dt,legend:F=true,legendPosition:V="bottom",animateOnMount:Q=true,emptyText:ft="No data to display"}){let P=useRef(null),U=useRef(null),[A,tt]=useState(600),[C,T]=useState(null);useEffect(()=>{let r=U.current;if(!r)return;let c=r.getBoundingClientRect().width;c>0&&tt(c);let d=new ResizeObserver(f=>{let u=f[0]?.contentRect.width;u&&u>0&&tt(u);});return d.observe(r),()=>d.disconnect()},[]);let ht=useMemo(()=>t.map(r=>r.id),[t]),{visible:w,toggle:L,isVisible:N}=nt(ht),$=useMemo(()=>ot(t.length),[t.length]),X=useMemo(()=>new Map(t.map((r,c)=>[r.id,r.color??$[c]])),[t,$]),et=useMemo(()=>J(!!n?.label,!!e?.label,false),[n?.label,e?.label]),a=useMemo(()=>K(A,E,et),[A,E,et]),D=useMemo(()=>it(t,w,n),[t,w,n]),R=useMemo(()=>st(t,w,e),[t,w,e]),B=useMemo(()=>Z(D,[a.plotLeft,a.plotRight]),[D,a]),S=useMemo(()=>Z(R,[a.plotBottom,a.plotTop]),[R,a]),xt=useMemo(()=>q(D,n?.tickCount??6),[D,n?.tickCount]),rt=useMemo(()=>q(R,e?.tickCount??5),[R,e?.tickCount]),bt=useCallback((r,c,d,f,u)=>{let p=P.current?.getBoundingClientRect();p&&T({x:r.clientX-p.left+12,y:r.clientY-p.top-10,seriesName:c,xVal:v(d,n?.format),yVal:v(f,e?.format),color:u});},[n?.format,e?.format]),gt=useCallback((r,c,d,f,u)=>{r.preventDefault();let p=P.current?.getBoundingClientRect();if(!p)return;let g=r.touches[0];g&&T({x:g.clientX-p.left+12,y:g.clientY-p.top-10,seriesName:c,xVal:v(d,n?.format),yVal:v(f,e?.format),color:u});},[n?.format,e?.format]),I=useMemo(()=>t.map((r,c)=>({id:r.id,label:r.name,color:r.color??$[c],visible:N(r.id)})),[t,$,N]),yt=t.some(r=>r.data.length>0),kt=V==="left"||V==="right",Ct=jsxs("svg",{role:"img","aria-label":k??"Scatter chart",width:a.width,height:a.height,viewBox:`0 0 ${a.width} ${a.height}`,shapeRendering:"geometricPrecision",children:[rt.map(r=>jsx("line",{x1:a.plotLeft,x2:a.plotRight,y1:S(r),y2:S(r),stroke:"currentColor",strokeWidth:.5,strokeDasharray:"4 4",className:"text-secondary-200 dark:text-secondary-700"},r)),m&&t.map((r,c)=>{if(!N(r.id)||r.data.length<2)return null;let d=X.get(r.id)??"var(--color-chart-1)",f=r.data.map(g=>B(Number(g.x))),u=r.data.map(g=>S(g.y)),p=lt(f,u,16);return p?jsx("ellipse",{cx:p.cx,cy:p.cy,rx:p.rx,ry:p.ry,fill:d,fillOpacity:.06,stroke:d,strokeOpacity:.3,strokeWidth:1.5,strokeDasharray:"5 3",className:Q?"chart-cluster-ellipse":"",style:{animationDelay:`${c*.1}s`}},`cluster-${r.id}`):null}),h&&t.map(r=>{if(!N(r.id)||r.data.length<2)return null;let c=X.get(r.id)??"var(--color-chart-1)",f=[...r.data].sort((u,p)=>Number(u.x)-Number(p.x)).map(u=>`${B(Number(u.x)).toFixed(2)},${S(u.y).toFixed(2)}`).join(" ");return jsx("polyline",{points:f,fill:"none",stroke:c,strokeWidth:1.5,className:"chart-scatter-link"},`link-${r.id}`)}),t.map((r,c)=>{if(!N(r.id))return null;let d=X.get(r.id)??"var(--color-chart-1)";return jsx("g",{className:"chart-scatter-group",children:r.data.map((f,u)=>{let[p,g]=l?ct(c,u,b):[0,0],vt=B(Number(f.x))+p,Vt=S(f.y)+g;return jsx("circle",{cx:vt,cy:Vt,r:o,fill:d,fillOpacity:s,stroke:d,strokeWidth:1,strokeOpacity:.5,className:M("chart-scatter-dot",Q&&"chart-scatter-dot--animate"),style:{color:d},onMouseMove:Y=>bt(Y,r.name,f.x,f.y,d),onMouseLeave:()=>T(null),onTouchStart:Y=>gt(Y,r.name,f.x,f.y,d),onTouchEnd:()=>T(null)},u)})},r.id)}),jsx("line",{x1:a.plotLeft,x2:a.plotLeft,y1:a.plotTop,y2:a.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("line",{x1:a.plotLeft,x2:a.plotRight,y1:a.plotBottom,y2:a.plotBottom,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),rt.map(r=>{let c=S(r);return jsxs("g",{children:[jsx("line",{x1:a.plotLeft-4,x2:a.plotLeft,y1:c,y2:c,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:a.plotLeft-6,y:c,textAnchor:"end",dominantBaseline:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:v(r,e?.format)})]},r)}),xt.map(r=>{let c=B(r);return jsxs("g",{children:[jsx("line",{x1:c,x2:c,y1:a.plotBottom,y2:a.plotBottom+4,stroke:"currentColor",strokeWidth:1,className:"text-secondary-300 dark:text-secondary-600"}),jsx("text",{x:c,y:a.plotBottom+14,textAnchor:"middle",fontSize:10,fill:"currentColor",className:"text-secondary-500 dark:text-secondary-400",children:v(r,n?.format)})]},r)}),e?.label&&jsx("text",{x:-(a.plotTop+a.plotHeight/2),y:14,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",transform:"rotate(-90)",children:e.label}),n?.label&&jsx("text",{x:a.plotLeft+a.plotWidth/2,y:a.height-4,textAnchor:"middle",fontSize:11,fill:"currentColor",className:"text-secondary-600 dark:text-secondary-400",children:n.label})]});return jsxs("div",{ref:P,className:M(_(),dt),children:[k&&jsx("h3",{className:"mb-2 text-sm font-semibold text-primary-700 dark:text-primary-200",children:k}),F&&V==="top"&&jsx(W,{items:I,position:"top",onToggle:L}),jsxs("div",{className:M("flex items-start",kt&&"gap-0"),children:[F&&V==="left"&&jsx(W,{items:I,position:"left",onToggle:L}),jsx("div",{ref:U,className:"flex-1 min-w-0 overflow-hidden",children:yt?Ct:jsx("div",{className:"flex items-center justify-center text-secondary-400 dark:text-secondary-500",style:{height:E},children:ft})}),F&&V==="right"&&jsx(W,{items:I,position:"right",onToggle:L})]}),F&&V==="bottom"&&jsx(W,{items:I,position:"bottom",onToggle:L}),C&&jsxs("div",{className:H(),style:{left:C.x,top:C.y},role:"tooltip",children:[jsxs("div",{className:"flex items-center gap-1.5 mb-1",children:[jsx("span",{className:"h-2 w-2 rounded-full",style:{background:C.color}}),jsx("span",{className:"font-medium",children:C.seriesName})]}),jsxs("div",{className:"text-primary-300",children:["X: ",jsx("span",{className:"font-medium text-primary-50",children:C.xVal})," ","Y: ",jsx("span",{className:"font-medium text-primary-50",children:C.yVal})]})]})]})}export{Ut as ScatterChart};
|