@cleen/ui 0.1.132 → 0.1.133
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts/index.js +1 -1
- package/package.json +1 -1
package/dist/charts/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import{cn as He}from"@cleen/ui-core";import{forwardRef as Be}from"react";import{renderToStaticMarkup as $e}from"react-dom/server";import Fe from"react-apexcharts";var q={chart:{toolbar:{show:!0,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}},animations:{enabled:!0}},dataLabels:{enabled:!1},stroke:{curve:"smooth",width:2},xaxis:{labels:{style:{fontSize:"12px"}}},yaxis:{labels:{style:{fontSize:"12px"}}},legend:{position:"top",horizontalAlign:"left"},tooltip:{enabled:!0,theme:"light"}};import{jsx as oe}from"react/jsx-runtime";var Me="[&_.apexcharts-tooltip]:!cleen-bg-transparent [&_.apexcharts-tooltip]:!cleen-border-0 [&_.apexcharts-tooltip]:!cleen-shadow-none [&_.apexcharts-tooltip]:!cleen-p-0 [&_.apexcharts-tooltip]:!cleen-overflow-visible [&_.apexcharts-tooltip]:!cleen-whitespace-normal",ne=Be(function({type:t="line",series:n,options:o={},width:f="100%",height:h=350,className:g,style:b,renderTooltip:p},S){let N=p?{...o.tooltip,custom:(l=>{let O=p({seriesIndex:l.seriesIndex,dataPointIndex:l.dataPointIndex,series:l.series,w:l.w});return O?$e(O):""})}:o.tooltip,r={...q,...o,chart:{...q.chart,...o.chart,type:t},...N?{tooltip:N}:{}},k=!!r.tooltip?.custom;return oe("div",{className:He("cleen",k&&Me,g),style:b,children:oe(Fe,{options:r,series:n,type:t,width:f,height:h,ref:S})})}),P=ne;import{applyDefaults as De}from"@cleen/ui-core";import{forwardRef as ze}from"react";var ae={chart:{type:"bar",zoom:{enabled:!1},toolbar:{show:!1},animations:{enabled:!1},fontFamily:"inherit",background:"transparent",parentHeightOffset:0},dataLabels:{enabled:!1},legend:{show:!1}};import{jsx as We}from"react/jsx-runtime";var Ge=ze(function({options:t,...n},o){return We(P,{type:"bar",ref:o,options:De(ae,t??{}),...n})});import{applyDefaults as z}from"@cleen/ui-core";import{forwardRef as Ue,useMemo as F}from"react";import{ColorHelpers as $}from"@cleen/ui-core";var ie={marker:{size:2,fillColor:"rgba(var(--cleen-gray), 0.8)",strokeColor:"rgba(var(--cleen-gray), 0.8)",offsetY:-16,shape:"triangle"},label:{borderWidth:0,offsetY:-20,style:{color:"rgba(var(--cleen-gray), 0.8)",background:"transparent",fontSize:"11px"}}},le={label:{borderColor:"transparent",style:{color:"rgba(var(--cleen-white))",background:"rgba(var(--cleen-primary))"}},fillColor:"rgba(var(--cleen-primary))"},se={label:{borderWidth:0,offsetY:-15,orientation:"horizontal",style:{color:"rgba(var(--cleen-primary))",background:"transparent",fontSize:"16px",fontWeight:700}},borderColor:"rgba(var(--cleen-primary))"},pe={marker:{size:8,fillColor:"rgba(var(--cleen-primary))",strokeColor:"rgba(var(--cleen-white))"}},ce={chart:{zoom:{enabled:!1},toolbar:{show:!1},animations:{enabled:!1}},stroke:{curve:"monotoneCubic",width:2.5},colors:[$.getComputedColor("var(--cleen-error)"),$.getComputedColor("var(--cleen-primary)"),$.getComputedColor("var(--cleen-success)")],fill:{type:"gradient",gradient:{shade:"light",type:"vertical",shadeIntensity:.6,gradientToColors:[$.getComputedColor("var(--cleen-error)")||"",$.getComputedColor("var(--cleen-primary)")||"",$.getComputedColor("var(--cleen-success)")||""],inverseColors:!1,opacityFrom:.95,opacityTo:.6}},yaxis:{show:!1},tooltip:{enabled:!0,x:{formatter:function(e){return`Score: ${typeof e=="string"?Number(e):e}`}},y:{formatter:function(e){return`${Number(e).toFixed(4)}`}}},grid:{show:!1},legend:{show:!1}};var de=(e,t)=>({middle:e,leftSigma:e-t,left2Sigma:e-2*t,left:e-3*t,rightSigma:e+2*t,right2Sigma:e+2*t,right:e+3*t}),ue=(e,t,n,o)=>({middle:e,leftSigma:e-t,left2Sigma:e-2*t,left:n,rightSigma:e+t,right2Sigma:e+2*t,right:o}),me=(e,t)=>{let n={};switch(e.type){case"range":n={x:t[e.x],x2:t[e.x2]};break;case"offset":n={x:e.x-e.offset,x2:e.x+e.offset};break;case"region":e.x>=t.left&&e.x<t.left2Sigma?n={x:t.left,x2:t.left2Sigma}:e.x>=t.left2Sigma&&e.x<t.leftSigma?n={x:t.left2Sigma,x2:t.leftSigma}:e.x>=t.leftSigma&&e.x<t.middle?n={x:t.leftSigma,x2:t.middle}:e.x>=t.middle&&e.x<t.rightSigma?n={x:t.middle,x2:t.rightSigma}:e.x>=t.rightSigma&&e.x<t.right2Sigma?n={x:t.rightSigma,x2:t.right2Sigma}:e.x>=t.right2Sigma&&e.x<t.right&&(n={x:t.right2Sigma,x2:t.right});break;default:n={x:e.x,x2:e.x2};break}return n};import{jsx as Ve}from"react/jsx-runtime";var Xe=Ue(function({serie:t,labels:n,sigma:o,pointAnnotations:f,rangeAnnotations:h,highlightAnnotations:g,options:b,height:p=360,...S},N){let r=F(()=>t.sort((c,m)=>c.x-m.x),[t]),k=F(()=>{let c=new Map;return t.forEach(m=>c.set(m.x,m.y)),c},[t]),l=r[Math.floor(r.length/2)],O=F(()=>{let{below:c,middle:m,above:C}=t.reduce((y,a)=>(a.x<l.x-2*o?y.below.push(a):a.x>=l.x+2*o?(a.x===l.x+2*o&&y.middle.push(a),y.above.push(a)):(a.x===l.x-2*o&&y.below.push(a),y.middle.push(a)),y),{below:[],middle:[],above:[]});return[{name:n?.below||"Below threshold",data:c},{name:n?.middle||"Middle grounds",data:m},{name:n?.above||"Above threshold",data:C}]},[o,t,n,l]),w=F(()=>{if(!f)return[];let c=de(l.x,o);return Object.entries(f).map(([m,C])=>{let y=c[m];return{x:y,y:k.get(y)||0,...z(ie,C)}})},[f,o,k]),i=F(()=>{if(!h)return[];let c=ue(l.x,o,r[0].x,r[r.length-1].x);return h.map(m=>{let C=me(m,c);return{...z(le,m),...C}})},[h,o,r]),{highlightPointAnnotations:v,highlightLineAnnotations:A}=F(()=>{if(!g)return{highlightLineAnnotations:[],highlightPointAnnotations:[]};let c=[],m=[],C=({x:a,line:s})=>{m.push(z(se,{x:a,...s}))},y=({x:a,y:s,point:u})=>{c.push(z(pe,{x:a,y:s,...u}))};return g?.forEach(a=>{switch(a.show){case"line":C(a);break;case"point":y(a);break;case"both":C(a),y(a);break;default:break}}),{highlightPointAnnotations:c,highlightLineAnnotations:m}},[g]);return Ve(P,{series:O,options:{...z(ce,b),annotations:{...b?.annotations,points:[...w,...v,...b?.annotations?.points||[]],xaxis:[...i,...A,...b?.annotations?.xaxis||[]]}},height:p,ref:N,type:"area",...S})});import{applyDefaults as Ke}from"@cleen/ui-core";import{forwardRef as je}from"react";var fe={chart:{type:"radar",zoom:{enabled:!1},toolbar:{show:!1}},stroke:{width:2},fill:{opacity:.25},markers:{size:4,colors:"transparent",strokeColors:"transparent"},tooltip:{marker:{show:!1}},legend:{show:!1}};import{jsx as Ye}from"react/jsx-runtime";var qe=je(function({options:t,...n},o){return Ye(P,{type:"radar",ref:o,options:Ke(fe,t),...n})});import{applyDefaults as Ze,cn as Je}from"@cleen/ui-core";import{forwardRef as Qe}from"react";var ge={chart:{type:"scatter",zoom:{enabled:!1},toolbar:{show:!1}},markers:{shape:"square",size:8,strokeWidth:0},grid:{strokeDashArray:8},legend:{show:!0,horizontalAlign:"right",position:"top",labels:{colors:"rgba(var(--cleen-gray), 0.8)"}},yaxis:{axisBorder:{show:!0,color:"rgba(var(--cleen-gray), .2)"},labels:{style:{colors:"rgba(var(--cleen-gray), 0.8)"}}},xaxis:{axisBorder:{show:!0,color:"rgba(var(--cleen-gray), .2)"},labels:{style:{colors:"rgba(var(--cleen-gray), 0.8)"}}},title:{align:"left",floating:!0,style:{color:"rgba(var(--cleen-black))"}}},he={chart:{type:"scatter",zoom:{enabled:!1},toolbar:{show:!1}},stroke:{width:0},fill:{opacity:1},markers:{shape:"circle",size:14,strokeWidth:2,hover:{sizeOffset:0}},grid:{strokeDashArray:0,borderColor:"rgba(var(--cleen-gray), 0.12)",padding:{left:0,right:12},xaxis:{lines:{show:!0}},yaxis:{lines:{show:!1}}},legend:{show:!1},xaxis:{min:0,max:210,tickAmount:4,axisBorder:{show:!1},axisTicks:{show:!1},decimalsInFloat:0,title:{text:"Estimated impact \u2192",style:{color:"rgba(var(--cleen-gray), 0.8)",fontSize:"14px",fontWeight:400}},labels:{style:{colors:"rgba(var(--cleen-gray), 0.8)",fontSize:"14px"},formatter(e){let t=Number(e);return Number.isNaN(t)?`${e}`:`$${Math.round(t)}k`}}},tooltip:{enabled:!0,theme:"light",x:{formatter(e){let t=Number(e);return Number.isNaN(t)?`${e}`:`$${Math.round(t)}k`}}}};import{jsx as G,jsxs as ye}from"react/jsx-runtime";var et=Qe(function({options:t,variant:n="default",rows:o,className:f,style:h,...g},b){let S=Ze(n==="matrix"?he:ge,t);if(n==="matrix"&&o?.length){let N=Math.min(...o.map(l=>l.y)),r=Math.max(...o.map(l=>l.y)),k=Array.isArray(S.yaxis)?{}:S.yaxis??{};return ye("div",{className:Je("cleen cleen-grid cleen-grid-cols-[156px_minmax(0,1fr)] cleen-items-stretch cleen-gap-3 cleen-w-full",f),style:h,children:[G("div",{className:"cleen-grid cleen-pt-[18px] cleen-pb-[54px]",style:{gridTemplateRows:`repeat(${o.length}, minmax(0, 1fr))`},children:o.map(l=>ye("div",{className:"cleen-flex cleen-flex-col cleen-justify-center cleen-items-end cleen-gap-1 cleen-pr-2",children:[G("span",{className:"cleen-text-[18px] cleen-font-bold cleen-leading-[1.1] cleen-text-[rgba(var(--cleen-black))]",children:l.label}),l.gapsLabel?G("span",{className:"cleen-text-[14px] cleen-leading-[1.2] cleen-text-[rgba(var(--cleen-gray),0.8)]",children:l.gapsLabel}):null]},`${l.label}-${l.y}`))}),G(P,{type:"scatter",ref:b,className:"cleen-w-full cleen-h-full",options:{...S,yaxis:{...k,min:N-.5,max:r+.5,tickAmount:Math.max(r-N,1),axisBorder:{...k.axisBorder,show:!1},axisTicks:{...k.axisTicks,show:!1},labels:{...k.labels,show:!1}},annotations:{...S.annotations,yaxis:[...o.map(l=>({y:l.y,borderColor:l.lineColor||"rgba(var(--cleen-gray), 0.12)",strokeDashArray:0})),...S.annotations?.yaxis||[]]}},...g})]})}return G(P,{type:"scatter",ref:b,className:f,style:h,options:S,...g})});import{applyDefaults as tt,cn as W}from"@cleen/ui-core";import{useId as rt,useMemo as U,useRef as ot,useState as nt}from"react";import{Layer as Oe,Rectangle as xe,ResponsiveContainer as at,Sankey as it,Tooltip as lt}from"recharts";var E={width:"100%",height:420,nodePadding:24,enableToolbar:!1,enableTooltip:!0,highlightOnHover:!0,dimOnHover:!0,dimOpacity:.2,edgeOpacity:.4,edgeGradientFill:!0,nodeWidth:20,nodeBorderWidth:0,nodeBorderColor:null,align:"justify",fontColor:"rgba(var(--cleen-neutral-800, 38, 38, 38))",tooltipBGColor:"rgba(var(--cleen-white))",tooltipBorderColor:"rgba(var(--cleen-gray), 0.2)"};import{Fragment as At,jsx as T,jsxs as D}from"react/jsx-runtime";var st=typeof E.height=="number"?E.height:420,be=40,Ce=60,Se=8,pt=8,ct="cleen-min-w-[220px] cleen-max-w-[min(360px,90vw)] cleen-flex cleen-flex-col cleen-gap-2",Y="cleen-m-0 cleen-text-xs cleen-leading-[18px] cleen-whitespace-pre-line cleen-break-words",dt="cleen-font-semibold",ut="cleen-font-medium cleen-text-[13px] cleen-mt-1 cleen-opacity-[0.72]",mt="cleen-font-medium cleen-text-[13px] cleen-mt-[6px]";function ft(e){if(typeof e=="number"&&Number.isFinite(e))return e;if(typeof e=="string"){let t=e.trim();if(!t.endsWith("%")&&t!=="auto"){let n=Number.parseFloat(t);if(Number.isFinite(n))return n}}return st}function ke(e){return typeof e=="object"&&e!==null&&"id"in e&&"title"in e}function gt(e){return typeof e=="object"&&e!==null&&"id"in e&&"title"in e&&"index"in e&&"name"in e}var ve=["rgba(var(--cleen-primary, 59, 130, 246))","rgba(var(--cleen-success, 34, 197, 94))","rgba(var(--cleen-warning, 245, 158, 11))","rgba(var(--cleen-error, 239, 68, 68))","rgba(var(--cleen-purple, 147, 51, 234))","rgba(var(--cleen-cyan, 6, 182, 212))","rgba(var(--cleen-orange, 249, 115, 22))","rgba(var(--cleen-pink, 236, 72, 153))","rgba(var(--cleen-teal, 20, 184, 166))","rgba(var(--cleen-indigo, 99, 102, 241))","rgba(var(--cleen-rose, 244, 63, 94))","rgba(var(--cleen-amber, 245, 158, 11))"];function Re(e){return e!=null}function ht(e,t){return[e.source,e.target,e.type??"",e.label??"",e.value,t].join("-").replace(/\s+/g,"_")}function X(e,t){return typeof e=="object"&&e!==null?e.id:t}function Ae(e,t){return typeof e=="object"&&e!==null?e.title:t}function Z(e){return typeof e=="object"&&e!==null&&"edgeKey"in e&&"sourceId"in e&&"targetId"in e}function J(e){return typeof e=="object"&&e!==null&&"payload"in e}function we(e){if(J(e))return we(e.payload);if(Z(e)||gt(e))return e}function Q(...e){return e.map(t=>typeof t=="number"?String(t):t?.trim()??"").find(t=>t.length>0)}function Te(e){let t=Q(e);if(t)return/[\p{L}\p{N}]/u.test(t)?t:void 0}function Pe(e){return e.replace(/[^a-zA-Z0-9_-]/g,"_")}function M(e){let t=e.match(/^rgba\((var\(.+\)),\s*([0-9]*\.?[0-9]+)\)$/i);if(t)return{color:`rgb(${t[1]})`,opacity:Number.parseFloat(t[2])};let n=e.match(/^rgba\((var\(.+\))\)$/i);if(n)return{color:`rgb(${n[1]})`,opacity:1};let o=e.match(/^rgba\(\s*(\d+\s*,\s*\d+\s*,\s*\d+)\s*,\s*([0-9]*\.?[0-9]+)\s*\)$/i);return o?{color:`rgb(${o[1]})`,opacity:Number.parseFloat(o[2])}:{color:e,opacity:1}}function ee(e,t){return M(t??ve[e%ve.length])}function Ne(e){return e.length*pt}function yt(e){let t=new Set,n=new Set([e.id]);for(let o of[...e.sourceLinks??[],...e.targetLinks??[]])t.add(o.edgeKey),n.add(X(o.source,o.sourceId)),n.add(X(o.target,o.targetId));return{activeLinkKeys:t,activeNodeIds:n}}function xt(e){return{activeLinkKeys:new Set([e.edgeKey]),activeNodeIds:new Set([X(e.source,e.sourceId),X(e.target,e.targetId)])}}function bt(e,t,n,o,f){return!e||e.activeNodeIds.has(t)?1:o?f??E.dimOpacity??.2:n?.55:1}function Ct(e,t,n,o,f,h){return e?e.activeLinkKeys.has(t)?o?Math.max(n,.9):n:f?h??E.dimOpacity??.2:o?Math.min(n,.3):n:n}var St=({dimOnHover:e,dimOpacity:t,fontColor:n,x:o,y:f,width:h,height:g,highlightOnHover:b,hoverState:p,index:S,outgoingEdgesById:N,payload:r,stroke:k,strokeWidth:l})=>{if(r===void 0||o===void 0||f===void 0||h===void 0||g===void 0||S===void 0)return null;let O=N?.get(r.id)??[],w=O.length>0,i=ee(S,r.color),v=M(n),A=bt(p,r.id,b,e,t),c=new Set(O.map(s=>s.color).filter(Re)),m=Array.from(c)[0],C=w&&O.length>1&&c.size>1&&c.size===O.length,y=C?O:[],a=y.reduce((s,u)=>s+(u.value??0),0);return D(Oe,{children:[C&&a>0?y.map((s,u)=>{let d=y.slice(0,u).reduce((H,B)=>H+(B.value??0),0),x=f+d/a*g,R=(s.value??0)/a*g,L=M(s.color??i.color),I=u===0,_=u===y.length-1;return T(xe,{x:o,y:x,width:h,height:R,fill:L.color,fillOpacity:L.opacity*A,stroke:k,strokeWidth:l,radius:[I?2:0,I?2:0,_?2:0,_?2:0]},`${s.source}-${s.target}-${u}`)}):T(xe,{x:o,y:f,width:h,height:g,fill:w&&c.size===1?M(m??i.color).color:i.color,fillOpacity:(w&&c.size===1?M(m??i.color).opacity:i.opacity)*A,stroke:k,strokeWidth:l,radius:[2,2,2,2]}),T("text",{textAnchor:w?"end":"start",x:w?o-8:o+h+8,y:f+g/2,dy:"0.35em",fontSize:"14",fill:v.color,fillOpacity:v.opacity*A,fontWeight:600,children:r.name})]},`CustomNode${S}`)},kt=({sourceX:e,targetX:t,sourceY:n,targetY:o,sourceControlX:f,targetControlX:h,linkWidth:g,index:b,payload:p,opacity:S,chartId:N,dimOnHover:r,dimOpacity:k,edgeGradientFill:l,highlightOnHover:O,hoverState:w})=>{if(p===void 0||e===void 0||t===void 0||n===void 0||o===void 0||f===void 0||h===void 0||g===void 0)return null;let i=S??E.edgeOpacity??.4,v=Ct(w,p.edgeKey,i,O,r,k),A=p.color?M(p.color):null,c=A??ee(typeof p.source=="object"?p.source.index:0,typeof p.source=="object"?p.source.color:void 0),m=A??ee(typeof p.target=="object"?p.target.index:1,typeof p.target=="object"?p.target.color:void 0),C=Pe(`linkGradient-${N}-${p.edgeKey}-${b??p.value}`),y=l!==!1&&A===null;return D(Oe,{children:[y?T("defs",{children:D("linearGradient",{id:C,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[T("stop",{offset:"0%",stopColor:c.color,stopOpacity:c.opacity*v}),T("stop",{offset:"100%",stopColor:m.color,stopOpacity:m.opacity*v})]})}):null,T("path",{d:`
|
|
2
2
|
M${e},${n}
|
|
3
3
|
C${f},${n} ${h},${o} ${t},${o}
|
|
4
|
-
`,stroke:y?`url(#${C})`:c.color,strokeWidth:Math.max(1,g),fill:"none",strokeOpacity:y?1:c.opacity*v,className:"cleen-transition-opacity cleen-duration-300 hover:cleen-opacity-100"})]},`CustomLink${p.edgeKey}`)};function vt({data:e,options:t,className:n,style:o,onNodeClick:f,renderTooltip:h}){let g=ot(null),[b,p]=nt(null),S=rt(),N=Pe(S),r=tt(E,t),k=ft(r.height),l=r.highlightOnHover||r.dimOnHover,O=U(()=>{let a=e.nodes.map((u,d)=>({...u,index:d,name:u.title})),s=e.edges.map((u,d)=>{let x=e.nodes.findIndex(L=>L.id===u.source),R=e.nodes.findIndex(L=>L.id===u.target);return x<0||R<0?null:{...u,edgeKey:ht(u,d),originalEdge:u,source:x,sourceId:u.source,target:R,targetId:u.target,value:u.value}}).filter(Re);return{nodes:a,links:s}},[e]),w=U(()=>{let a=new Map;for(let s of e.edges){let u=a.get(s.source)??[];u.push(s),a.set(s.source,u)}return a},[e]),i=U(()=>({backgroundColor:r.tooltipBGColor,border:`1px solid ${r.tooltipBorderColor}`,borderRadius:8,boxShadow:"0 12px 32px rgba(15, 23, 42, 0.12)",color:r.fontColor,padding:"10px 12px"}),[r.fontColor,r.tooltipBGColor,r.tooltipBorderColor]),v=U(()=>{let a=new Set(e.edges.map(x=>x.source)),s=new Set(e.edges.map(x=>x.target)),u=e.nodes.reduce((x,R)=>s.has(R.id)?x:Math.max(x,Ne(R.title)),0),d=e.nodes.reduce((x,R)=>a.has(R.id)?x:Math.max(x,Ne(R.title)),0);return{top:be,right:Math.max(Ce,d+Se+16),bottom:be,left:Math.max(Ce,u+Se+16)}},[e]),A=(a,s)=>{if(l){if(s==="node"&&ke(a.payload)){p(yt(a.payload));return}s==="link"&&Z(a.payload)&&p(xt(a.payload))}},c=()=>{l&&p(null)},m=()=>{if(typeof window>"u")return;let a=g.current?.querySelector("svg");if(!a)return;let s=new XMLSerializer().serializeToString(a),u=new Blob([s],{type:"image/svg+xml;charset=utf-8"}),d=URL.createObjectURL(u),x=document.createElement("a");x.href=d,x.download="sankey-chart.svg",x.click(),window.setTimeout(()=>URL.revokeObjectURL(d),0)},C=({active:a,payload:s})=>{if(!a||!s?.length)return null;let u=s[0]?.payload,d=we(u);if(!d)return null;let x=Z(d),R=J(u)?u.value:s[0]?.value,L=J(u)?u.name:void 0,I=Number(d.value??R??0),_=r.valueFormatter?r.valueFormatter(Number(d.value??R??0),x?d.originalEdge:void 0):`${d.value??R??""}`,H=x?Ae(d.source,d.sourceId):"",B=x?Ae(d.target,d.targetId):"",K=x?Q(d.title,d.label,d.name,d.originalEdge?.title,d.originalEdge?.label,d.originalEdge?.name,Te(L),H&&B?`${H} \u2192 ${B}`:void 0):Q(d.title,Te(L)),j=x?`${H} \u2192 ${B}`:"";if(h){let _e=x?{type:"link",edge:d.originalEdge,sourceNodeId:d.sourceId,sourceNodeTitle:H,targetNodeId:d.targetId,targetNodeTitle:B,value:Number.isFinite(I)?I:0,payload:d.originalEdge}:{type:"node",node:d,value:Number.isFinite(I)?I:0,payload:d},re=h(_e);return re?T(At,{children:re}):null}return!K&&!j&&!_?null:D("div",{className:W(ct),style:i,children:[K?T("p",{className:W(Y,dt),style:{color:r.fontColor,overflowWrap:"anywhere"},children:K}):null,j?T("p",{className:W(Y,ut),style:{color:r.fontColor,overflowWrap:"anywhere"},children:j}):null,_?T("p",{className:W(Y,mt),style:{color:r.fontColor},children:_}):null]})},y={display:"flex",flexDirection:"column",gap:r.enableToolbar?12:0,width:r.width??"100%",height:k,minHeight:k,...o};return D("div",{className:W("cleen cleen-w-full",n),ref:g,style:y,children:[r.enableToolbar?D("div",{className:"cleen-flex cleen-items-center cleen-justify-end cleen-gap-2",children:[T("button",{type:"button",onClick:()=>p(null),disabled:!b,style:{backgroundColor:"rgba(var(--cleen-white))",border:"1px solid rgba(var(--cleen-gray), 0.2)",borderRadius:8,color:r.fontColor,cursor:b?"pointer":"not-allowed",fontSize:13,fontWeight:600,opacity:b?1:.5,padding:"6px 10px"},children:"Reset focus"}),T("button",{type:"button",onClick:m,style:{backgroundColor:"rgba(var(--cleen-white))",border:"1px solid rgba(var(--cleen-gray), 0.2)",borderRadius:8,color:r.fontColor,cursor:"pointer",fontSize:13,fontWeight:600,padding:"6px 10px"},children:"Download SVG"})]}):null,T("div",{style:{flex:1,minHeight:0},children:T(at,{width:"100%",height:"100%",children:T(it,{data:O,align:r.align,margin:v,node:T(St,{dimOnHover:r.dimOnHover,dimOpacity:r.dimOpacity,fontColor:r.fontColor??E.fontColor??"rgba(var(--cleen-neutral-800, 38, 38, 38))",highlightOnHover:r.highlightOnHover,hoverState:b,outgoingEdgesById:w,stroke:r.nodeBorderColor??"transparent",strokeWidth:r.nodeBorderWidth}),nodePadding:r.nodePadding,nodeWidth:r.nodeWidth,link:T(kt,{chartId:N,dimOnHover:r.dimOnHover,dimOpacity:r.dimOpacity,edgeGradientFill:r.edgeGradientFill,highlightOnHover:r.highlightOnHover,hoverState:b,opacity:r.edgeOpacity}),onClick:(a,s)=>{s==="node"&&f&&ke(a.payload)&&f(a.payload)},onMouseEnter:A,onMouseLeave:c,children:r.enableTooltip?T(lt,{content:T(C,{}),cursor:!1}):null})})})]})}import{applyDefaults as Tt}from"@cleen/ui-core";import{forwardRef as Nt,useEffect as Ot,useMemo as Ee,useRef as Ie,useState as Rt}from"react";var Le={chart:{type:"treemap",zoom:{enabled:!1},toolbar:{show:!1}},legend:{show:!1},dataLabels:{enabled:!0,style:{fontSize:"12px",fontWeight:400}},plotOptions:{treemap:{enableShades:!0,distributed:!1}},title:{align:"left",style:{color:"rgba(var(--cleen-black))"}}};import{jsx as V,jsxs as Pt}from"react/jsx-runtime";var wt=Nt(function({options:t,labelLayout:n="apex",renderTileLabel:o,className:f,style:h,...g},b){let p=Ie(null),[S,N]=Rt([]),r=n==="overlay"&&typeof o=="function",k=Ie(()=>{});k.current=()=>{let i=p.current;if(!i)return;let v=i.getBoundingClientRect(),A=i.querySelectorAll(".apexcharts-treemap-rect");A.length&&N(Array.from(A).map((c,m)=>{let C=c.getBoundingClientRect();return{x:C.left-v.left,y:C.top-v.top,width:C.width,height:C.height,dataIndex:m}}))};let l=Ee(()=>{let i=Tt(Le,t??{});if(!r)return i;let v=i.chart?.events??{},A=c=>(...m)=>{requestAnimationFrame(()=>k.current()),c?.(...m)};return{...i,dataLabels:{...i.dataLabels,enabled:!1},chart:{...i.chart,animations:{enabled:!1},events:{...v,mounted:A(v.mounted),updated:A(v.updated)}}}},[t,r]);Ot(()=>{if(!r)return;let i,v=0,A=()=>{let c=p.current;if(!c)return;let m=c.getBoundingClientRect(),C=c.querySelectorAll(".apexcharts-treemap-rect");if(!C.length){v<30&&(v++,i=requestAnimationFrame(A));return}N(Array.from(C).map((y,a)=>{let s=y.getBoundingClientRect();return{x:s.left-m.left,y:s.top-m.top,width:s.width,height:s.height,dataIndex:a}}))};return i=requestAnimationFrame(A),()=>cancelAnimationFrame(i)},[r]);let O=Ee(()=>{let i=g.series;return!Array.isArray(i)||i.length===0?[]:(i[0]??{}).data??[]},[g.series]);if(!r)return V(P,{type:"treemap",ref:b,options:l,className:f,style:h,...g});let w={...h,position:"relative"};return Pt("div",{ref:p,className:f,style:w,children:[V(P,{type:"treemap",ref:b,options:l,...g}),S.length>0&&V("div",{style:{position:"absolute",inset:0,pointerEvents:"none",overflow:"hidden"},children:S.map(i=>V("div",{style:{position:"absolute",left:i.x,top:i.y,width:i.width,height:i.height},children:o({point:O[i.dataIndex],width:i.width,height:i.height})},i.dataIndex))})]})});import"react";import{jsx as te,jsxs as Et}from"react/jsx-runtime";var Lt=({width:e=240,height:t=80,data:n=[12,28,18,30,24,36],className:o="",style:f})=>{let h=Math.max(...n,1),g=n.map((b,p)=>`${p/(n.length-1)*e},${t-b/h*t}`).join(" ");return Et("svg",{width:e,height:t,viewBox:`0 0 ${e} ${t}`,className:o,style:f,role:"img","aria-label":"Simple line chart",children:[te("rect",{width:"100%",height:"100%",fill:"transparent"}),te("polyline",{fill:"none",stroke:"rgba(59,130,246,0.9)",strokeWidth:2,points:g,strokeLinecap:"round",strokeLinejoin:"round"}),te("polygon",{points:`${g} ${e},${t} 0,${t}`,fill:"rgba(59,130,246,0.08)"})]})};export{Ge as BarChart,Xe as BellCurve,ne as Chart,qe as RadarChart,vt as SankeyChart,et as ScatterChart,Lt as SimpleChart,wt as TreemapChart};
|
|
4
|
+
`,stroke:y?`url(#${C})`:c.color,strokeWidth:Math.max(1,g),fill:"none",strokeOpacity:y?1:c.opacity*v,className:"cleen-transition-opacity cleen-duration-300 hover:cleen-opacity-100"})]},`CustomLink${p.edgeKey}`)};function vt({data:e,options:t,className:n,style:o,onNodeClick:f,renderTooltip:h}){let g=ot(null),[b,p]=nt(null),S=rt(),N=Pe(S),r=tt(E,t),k=ft(r.height),l=r.highlightOnHover||r.dimOnHover,O=U(()=>{let a=e.nodes.map((u,d)=>({...u,index:d,name:u.title})),s=e.edges.map((u,d)=>{let x=e.nodes.findIndex(L=>L.id===u.source),R=e.nodes.findIndex(L=>L.id===u.target);return x<0||R<0?null:{...u,edgeKey:ht(u,d),originalEdge:u,source:x,sourceId:u.source,target:R,targetId:u.target,value:u.value}}).filter(Re);return{nodes:a,links:s}},[e]),w=U(()=>{let a=new Map;for(let s of e.edges){let u=a.get(s.source)??[];u.push(s),a.set(s.source,u)}return a},[e]),i=U(()=>({backgroundColor:r.tooltipBGColor,border:`1px solid ${r.tooltipBorderColor}`,borderRadius:8,boxShadow:"0 12px 32px rgba(15, 23, 42, 0.12)",color:r.fontColor,padding:"10px 12px"}),[r.fontColor,r.tooltipBGColor,r.tooltipBorderColor]),v=U(()=>{let a=new Set(e.edges.map(x=>x.source)),s=new Set(e.edges.map(x=>x.target)),u=e.nodes.reduce((x,R)=>s.has(R.id)?x:Math.max(x,Ne(R.title)),0),d=e.nodes.reduce((x,R)=>a.has(R.id)?x:Math.max(x,Ne(R.title)),0);return{top:be,right:Math.max(Ce,d+Se+16),bottom:be,left:Math.max(Ce,u+Se+16)}},[e]),A=(a,s)=>{if(l){if(s==="node"&&ke(a.payload)){p(yt(a.payload));return}s==="link"&&Z(a.payload)&&p(xt(a.payload))}},c=()=>{l&&p(null)},m=()=>{if(typeof window>"u")return;let a=g.current?.querySelector("svg");if(!a)return;let s=new XMLSerializer().serializeToString(a),u=new Blob([s],{type:"image/svg+xml;charset=utf-8"}),d=URL.createObjectURL(u),x=document.createElement("a");x.href=d,x.download="sankey-chart.svg",x.click(),window.setTimeout(()=>URL.revokeObjectURL(d),0)},C=({active:a,payload:s})=>{if(!a||!s?.length)return null;let u=s[0]?.payload,d=we(u);if(!d)return null;let x=Z(d),R=J(u)?u.value:s[0]?.value,L=J(u)?u.name:void 0,I=Number(d.value??R??0),_=r.valueFormatter?r.valueFormatter(Number(d.value??R??0),x?d.originalEdge:void 0):`${d.value??R??""}`,H=x?Ae(d.source,d.sourceId):"",B=x?Ae(d.target,d.targetId):"",K=x?Q(d.title,d.label,d.name,d.originalEdge?.title,d.originalEdge?.label,d.originalEdge?.name,Te(L),H&&B?`${H} \u2192 ${B}`:void 0):Q(d.title,Te(L)),j=x?`${H} \u2192 ${B}`:"";if(h){let _e=x?{type:"link",edge:d.originalEdge,sourceNodeId:d.sourceId,sourceNodeTitle:H,targetNodeId:d.targetId,targetNodeTitle:B,value:Number.isFinite(I)?I:0,payload:d.originalEdge}:{type:"node",node:d,value:Number.isFinite(I)?I:0,payload:d},re=h(_e);return re?T(At,{children:re}):null}return!K&&!j&&!_?null:D("div",{className:W(ct),style:i,children:[K?T("p",{className:W(Y,dt),style:{color:r.fontColor,overflowWrap:"anywhere"},children:K}):null,j?T("p",{className:W(Y,ut),style:{color:r.fontColor,overflowWrap:"anywhere"},children:j}):null,_?T("p",{className:W(Y,mt),style:{color:r.fontColor},children:_}):null]})},y={display:"flex",flexDirection:"column",gap:r.enableToolbar?12:0,width:r.width??"100%",height:k,minHeight:k,...o};return D("div",{className:W("cleen cleen-w-full",n),ref:g,style:y,children:[r.enableToolbar?D("div",{className:"cleen-flex cleen-items-center cleen-justify-end cleen-gap-2",children:[T("button",{type:"button",onClick:()=>p(null),disabled:!b,style:{backgroundColor:"rgba(var(--cleen-white))",border:"1px solid rgba(var(--cleen-gray), 0.2)",borderRadius:8,color:r.fontColor,cursor:b?"pointer":"not-allowed",fontSize:13,fontWeight:600,opacity:b?1:.5,padding:"6px 10px"},children:"Reset focus"}),T("button",{type:"button",onClick:m,style:{backgroundColor:"rgba(var(--cleen-white))",border:"1px solid rgba(var(--cleen-gray), 0.2)",borderRadius:8,color:r.fontColor,cursor:"pointer",fontSize:13,fontWeight:600,padding:"6px 10px"},children:"Download SVG"})]}):null,T("div",{style:{flex:1,minHeight:0},children:T(at,{width:"100%",height:"100%",children:T(it,{data:O,align:r.align,margin:v,node:T(St,{dimOnHover:r.dimOnHover,dimOpacity:r.dimOpacity,fontColor:r.fontColor??E.fontColor??"rgba(var(--cleen-neutral-800, 38, 38, 38))",highlightOnHover:r.highlightOnHover,hoverState:b,outgoingEdgesById:w,stroke:r.nodeBorderColor??"transparent",strokeWidth:r.nodeBorderWidth}),nodePadding:r.nodePadding,nodeWidth:r.nodeWidth,link:T(kt,{chartId:N,dimOnHover:r.dimOnHover,dimOpacity:r.dimOpacity,edgeGradientFill:r.edgeGradientFill,highlightOnHover:r.highlightOnHover,hoverState:b,opacity:r.edgeOpacity}),onClick:(a,s)=>{s==="node"&&f&&ke(a.payload)&&f(a.payload)},onMouseEnter:A,onMouseLeave:c,children:r.enableTooltip?T(lt,{content:T(C,{}),cursor:!1,allowEscapeViewBox:{x:!1,y:!0}}):null})})})]})}import{applyDefaults as Tt}from"@cleen/ui-core";import{forwardRef as Nt,useEffect as Ot,useMemo as Ee,useRef as Ie,useState as Rt}from"react";var Le={chart:{type:"treemap",zoom:{enabled:!1},toolbar:{show:!1}},legend:{show:!1},dataLabels:{enabled:!0,style:{fontSize:"12px",fontWeight:400}},plotOptions:{treemap:{enableShades:!0,distributed:!1}},title:{align:"left",style:{color:"rgba(var(--cleen-black))"}}};import{jsx as V,jsxs as Pt}from"react/jsx-runtime";var wt=Nt(function({options:t,labelLayout:n="apex",renderTileLabel:o,className:f,style:h,...g},b){let p=Ie(null),[S,N]=Rt([]),r=n==="overlay"&&typeof o=="function",k=Ie(()=>{});k.current=()=>{let i=p.current;if(!i)return;let v=i.getBoundingClientRect(),A=i.querySelectorAll(".apexcharts-treemap-rect");A.length&&N(Array.from(A).map((c,m)=>{let C=c.getBoundingClientRect();return{x:C.left-v.left,y:C.top-v.top,width:C.width,height:C.height,dataIndex:m}}))};let l=Ee(()=>{let i=Tt(Le,t??{});if(!r)return i;let v=i.chart?.events??{},A=c=>(...m)=>{requestAnimationFrame(()=>k.current()),c?.(...m)};return{...i,dataLabels:{...i.dataLabels,enabled:!1},chart:{...i.chart,animations:{enabled:!1},events:{...v,mounted:A(v.mounted),updated:A(v.updated)}}}},[t,r]);Ot(()=>{if(!r)return;let i,v=0,A=()=>{let c=p.current;if(!c)return;let m=c.getBoundingClientRect(),C=c.querySelectorAll(".apexcharts-treemap-rect");if(!C.length){v<30&&(v++,i=requestAnimationFrame(A));return}N(Array.from(C).map((y,a)=>{let s=y.getBoundingClientRect();return{x:s.left-m.left,y:s.top-m.top,width:s.width,height:s.height,dataIndex:a}}))};return i=requestAnimationFrame(A),()=>cancelAnimationFrame(i)},[r]);let O=Ee(()=>{let i=g.series;return!Array.isArray(i)||i.length===0?[]:(i[0]??{}).data??[]},[g.series]);if(!r)return V(P,{type:"treemap",ref:b,options:l,className:f,style:h,...g});let w={...h,position:"relative"};return Pt("div",{ref:p,className:f,style:w,children:[V(P,{type:"treemap",ref:b,options:l,...g}),S.length>0&&V("div",{style:{position:"absolute",inset:0,pointerEvents:"none",overflow:"hidden"},children:S.map(i=>V("div",{style:{position:"absolute",left:i.x,top:i.y,width:i.width,height:i.height},children:o({point:O[i.dataIndex],width:i.width,height:i.height})},i.dataIndex))})]})});import"react";import{jsx as te,jsxs as Et}from"react/jsx-runtime";var Lt=({width:e=240,height:t=80,data:n=[12,28,18,30,24,36],className:o="",style:f})=>{let h=Math.max(...n,1),g=n.map((b,p)=>`${p/(n.length-1)*e},${t-b/h*t}`).join(" ");return Et("svg",{width:e,height:t,viewBox:`0 0 ${e} ${t}`,className:o,style:f,role:"img","aria-label":"Simple line chart",children:[te("rect",{width:"100%",height:"100%",fill:"transparent"}),te("polyline",{fill:"none",stroke:"rgba(59,130,246,0.9)",strokeWidth:2,points:g,strokeLinecap:"round",strokeLinejoin:"round"}),te("polygon",{points:`${g} ${e},${t} 0,${t}`,fill:"rgba(59,130,246,0.08)"})]})};export{Ge as BarChart,Xe as BellCurve,ne as Chart,qe as RadarChart,vt as SankeyChart,et as ScatterChart,Lt as SimpleChart,wt as TreemapChart};
|