@cleen/ui 0.1.68 → 0.1.70

package/dist/charts/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import react__default, { CSSProperties } from 'react';
 import { ApexOptions } from 'apexcharts';
 import ReactApexChart from 'react-apexcharts';
-import { ApexSankeyProps, ApexSankeyRef } from 'react-apexsankey';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ChartProps {
     /**
@@ -118,10 +118,53 @@ interface ScatterChartProps extends Omit<ChartProps, 'type'> {
  */
 declare const ScatterChart: react.ForwardRefExoticComponent<ScatterChartProps & react.RefAttributes<ReactApexChart>>;
 
-interface SankeyChartProps extends Omit<ApexSankeyProps, 'options'> {
-    options?: ApexSankeyProps['options'];
+type SankeyChartAlign = 'justify' | 'left';
+interface SankeyChartNode {
+    id: string;
+    title: string;
+    color?: string;
 }
-declare const SankeyChart: react.ForwardRefExoticComponent<SankeyChartProps & react.RefAttributes<ApexSankeyRef>>;
+interface SankeyChartEdge {
+    source: string;
+    target: string;
+    value: number;
+    type?: string;
+    color?: string;
+    label?: string;
+}
+interface SankeyChartData {
+    nodes: SankeyChartNode[];
+    edges: SankeyChartEdge[];
+}
+interface SankeyChartOptions {
+    width?: number | string;
+    height?: number | string;
+    nodeWidth?: number;
+    nodePadding?: number;
+    nodeBorderWidth?: number;
+    nodeBorderColor?: string | null;
+    edgeOpacity?: number;
+    edgeGradientFill?: boolean;
+    enableToolbar?: boolean;
+    enableTooltip?: boolean;
+    highlightOnHover?: boolean;
+    dimOnHover?: boolean;
+    dimOpacity?: number;
+    fontColor?: string;
+    tooltipBGColor?: string;
+    tooltipBorderColor?: string;
+    align?: SankeyChartAlign;
+    valueFormatter?: (value: number, edge?: SankeyChartEdge) => string;
+}
+
+interface SankeyChartProps {
+    data: SankeyChartData;
+    options?: SankeyChartOptions;
+    className?: string;
+    style?: CSSProperties;
+    onNodeClick?: (node: SankeyChartNode) => void;
+}
+declare function SankeyChart({ data, options, className, style, onNodeClick, }: SankeyChartProps): react_jsx_runtime.JSX.Element;
 
 declare const TreemapChart: react.ForwardRefExoticComponent<Omit<ChartProps, "type"> & react.RefAttributes<ReactApexChart>>;
 
@@ -134,4 +177,4 @@ type SimpleChartProps = {
 };
 declare const SimpleChart: react__default.FC<SimpleChartProps>;
 
-export { BellCurve, type BellCurveProps, Chart, type ChartProps, RadarChart, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, type ScatterChartVariant, SimpleChart, type SimpleChartProps, TreemapChart };
+export { BellCurve, type BellCurveProps, Chart, type ChartProps, RadarChart, SankeyChart, type SankeyChartAlign, type SankeyChartData, type SankeyChartEdge, type SankeyChartNode, type SankeyChartOptions, type SankeyChartProps, ScatterChart, type ScatterChartProps, type ScatterChartVariant, SimpleChart, type SimpleChartProps, TreemapChart };

package/dist/charts/index.js

@@ -1 +1,4 @@
-import{cn as q}from"@cleen/ui-core";import{forwardRef as J}from"react";import Q from"react-apexcharts";var T={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 v}from"react/jsx-runtime";var N=J(function({type:e="line",series:r,options:o={},width:p="100%",height:l=350,className:f,style:x},A){let c={...T,...o,chart:{...T.chart,...o.chart,type:e}};return v("div",{className:q("cleen",f),style:x,children:v(Q,{options:c,series:r,type:e,width:p,height:l,ref:A})})}),g=N;import{applyDefaults as C}from"@cleen/ui-core";import{forwardRef as Z,useMemo as b}from"react";import{ColorHelpers as d}from"@cleen/ui-core";var R={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"}}},w={label:{borderColor:"transparent",style:{color:"rgba(var(--cleen-white))",background:"rgba(var(--cleen-primary))"}},fillColor:"rgba(var(--cleen-primary))"},_={label:{borderWidth:0,offsetY:-15,orientation:"horizontal",style:{color:"rgba(var(--cleen-primary))",background:"transparent",fontSize:"16px",fontWeight:700}},borderColor:"rgba(var(--cleen-primary))"},I={marker:{size:8,fillColor:"rgba(var(--cleen-primary))",strokeColor:"rgba(var(--cleen-white))"}},H={chart:{zoom:{enabled:!1},toolbar:{show:!1},animations:{enabled:!1}},stroke:{curve:"monotoneCubic",width:2.5},colors:[d.getComputedColor("var(--cleen-error)"),d.getComputedColor("var(--cleen-primary)"),d.getComputedColor("var(--cleen-success)")],fill:{type:"gradient",gradient:{shade:"light",type:"vertical",shadeIntensity:.6,gradientToColors:[d.getComputedColor("var(--cleen-error)")||"",d.getComputedColor("var(--cleen-primary)")||"",d.getComputedColor("var(--cleen-success)")||""],inverseColors:!1,opacityFrom:.95,opacityTo:.6}},yaxis:{show:!1},tooltip:{enabled:!0,x:{formatter:function(t){return`Score: ${typeof t=="string"?Number(t):t}`}},y:{formatter:function(t){return`${Number(t).toFixed(4)}`}}},grid:{show:!1},legend:{show:!1}};var L=(t,e)=>({middle:t,leftSigma:t-e,left2Sigma:t-2*e,left:t-3*e,rightSigma:t+2*e,right2Sigma:t+2*e,right:t+3*e}),z=(t,e,r,o)=>({middle:t,leftSigma:t-e,left2Sigma:t-2*e,left:r,rightSigma:t+e,right2Sigma:t+2*e,right:o}),B=(t,e)=>{let r={};switch(t.type){case"range":r={x:e[t.x],x2:e[t.x2]};break;case"offset":r={x:t.x-t.offset,x2:t.x+t.offset};break;case"region":t.x>=e.left&&t.x<e.left2Sigma?r={x:e.left,x2:e.left2Sigma}:t.x>=e.left2Sigma&&t.x<e.leftSigma?r={x:e.left2Sigma,x2:e.leftSigma}:t.x>=e.leftSigma&&t.x<e.middle?r={x:e.leftSigma,x2:e.middle}:t.x>=e.middle&&t.x<e.rightSigma?r={x:e.middle,x2:e.rightSigma}:t.x>=e.rightSigma&&t.x<e.right2Sigma?r={x:e.rightSigma,x2:e.right2Sigma}:t.x>=e.right2Sigma&&t.x<e.right&&(r={x:e.right2Sigma,x2:e.right});break;default:r={x:t.x,x2:t.x2};break}return r};import{jsx as ee}from"react/jsx-runtime";var j=Z(function({serie:e,labels:r,sigma:o,pointAnnotations:p,rangeAnnotations:l,highlightAnnotations:f,options:x,height:A=360,...c},O){let h=b(()=>e.sort((s,i)=>s.x-i.x),[e]),u=b(()=>{let s=new Map;return e.forEach(i=>s.set(i.x,i.y)),s},[e]),a=h[Math.floor(h.length/2)],G=b(()=>{let{below:s,middle:i,above:y}=e.reduce((m,n)=>(n.x<a.x-2*o?m.below.push(n):n.x>=a.x+2*o?(n.x===a.x+2*o&&m.middle.push(n),m.above.push(n)):(n.x===a.x-2*o&&m.below.push(n),m.middle.push(n)),m),{below:[],middle:[],above:[]});return[{name:r?.below||"Below threshold",data:s},{name:r?.middle||"Middle grounds",data:i},{name:r?.above||"Above threshold",data:y}]},[o,e,r,a]),U=b(()=>{if(!p)return[];let s=L(a.x,o);return Object.entries(p).map(([i,y])=>{let m=s[i];return{x:m,y:u.get(m)||0,...C(R,y)}})},[p,o,u]),W=b(()=>{if(!l)return[];let s=z(a.x,o,h[0].x,h[h.length-1].x);return l.map(i=>{let y=B(i,s);return{...C(w,i),...y}})},[l,o,h]),{highlightPointAnnotations:V,highlightLineAnnotations:Y}=b(()=>{if(!f)return{highlightLineAnnotations:[],highlightPointAnnotations:[]};let s=[],i=[],y=({x:n,line:P})=>{i.push(C(_,{x:n,...P}))},m=({x:n,y:P,point:K})=>{s.push(C(I,{x:n,y:P,...K}))};return f?.forEach(n=>{switch(n.show){case"line":y(n);break;case"point":m(n);break;case"both":y(n),m(n);break;default:break}}),{highlightPointAnnotations:s,highlightLineAnnotations:i}},[f]);return ee(g,{series:G,options:{...C(H,x),annotations:{...x?.annotations,points:[...U,...V,...x?.annotations?.points||[]],xaxis:[...W,...Y,...x?.annotations?.xaxis||[]]}},height:A,ref:O,type:"area",...c})});import{applyDefaults as te}from"@cleen/ui-core";import{forwardRef as re}from"react";var D={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 ae}from"react/jsx-runtime";var oe=re(function({options:e,...r},o){return ae(g,{type:"radar",ref:o,options:te(D,e),...r})});import{applyDefaults as ne,cn as ie}from"@cleen/ui-core";import{forwardRef as se}from"react";var E={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))"}}},X={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(t){let e=Number(t);return Number.isNaN(e)?`${t}`:`$${Math.round(e)}k`}}},tooltip:{enabled:!0,theme:"light",x:{formatter(t){let e=Number(t);return Number.isNaN(e)?`${t}`:`$${Math.round(e)}k`}}}};import{jsx as S,jsxs as $}from"react/jsx-runtime";var pe=se(function({options:e,variant:r="default",rows:o,className:p,style:l,...f},x){let c=ne(r==="matrix"?X:E,e);if(r==="matrix"&&o?.length){let O=Math.min(...o.map(a=>a.y)),h=Math.max(...o.map(a=>a.y)),u=Array.isArray(c.yaxis)?{}:c.yaxis??{};return $("div",{className:ie("cleen",p),style:{display:"grid",gridTemplateColumns:"156px minmax(0, 1fr)",alignItems:"stretch",gap:"12px",width:"100%",...l},children:[S("div",{style:{display:"grid",gridTemplateRows:`repeat(${o.length}, minmax(0, 1fr))`,padding:"18px 0 54px"},children:o.map(a=>$("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-end",gap:"4px",paddingRight:"8px"},children:[S("span",{style:{fontSize:"18px",fontWeight:700,lineHeight:1.1,color:"rgba(var(--cleen-black))"},children:a.label}),a.gapsLabel?S("span",{style:{fontSize:"14px",lineHeight:1.2,color:"rgba(var(--cleen-gray), 0.8)"},children:a.gapsLabel}):null]},`${a.label}-${a.y}`))}),S(g,{type:"scatter",ref:x,className:"cleen-w-full",style:{height:"100%"},options:{...c,yaxis:{...u,min:O-.5,max:h+.5,tickAmount:Math.max(h-O,1),axisBorder:{...u.axisBorder,show:!1},axisTicks:{...u.axisTicks,show:!1},labels:{...u.labels,show:!1}},annotations:{...c.annotations,yaxis:[...o.map(a=>({y:a.y,borderColor:a.lineColor||"rgba(var(--cleen-gray), 0.12)",strokeDashArray:0})),...c.annotations?.yaxis||[]]}},...f})]})}return S(g,{type:"scatter",ref:x,className:p,style:l,options:c,...f})});import"apexsankey";import{applyDefaults as le,cn as me}from"@cleen/ui-core";import{forwardRef as fe}from"react";import{ApexSankey as xe}from"react-apexsankey";var M={width:"100%",height:420,enableToolbar:!1,enableTooltip:!0,highlightOnHover:!0,dimOnHover:!0,edgeOpacity:.4,nodeWidth:20,fontColor:"rgba(var(--cleen-gray), 0.8)",tooltipBGColor:"rgba(var(--cleen-white))",tooltipBorderColor:"rgba(var(--cleen-gray), 0.2)"};import{jsx as he}from"react/jsx-runtime";var ce=fe(function({options:e,className:r,style:o,...p},l){return he(xe,{ref:l,className:me("cleen",r),style:o,options:le(M,e),...p})});import{applyDefaults as ge}from"@cleen/ui-core";import{forwardRef as ye}from"react";var F={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 Ae}from"react/jsx-runtime";var ue=ye(function({options:e,...r},o){return Ae(g,{type:"treemap",ref:o,options:ge(F,e),...r})});import"react";import{jsx as k,jsxs as be}from"react/jsx-runtime";var de=({width:t=240,height:e=80,data:r=[12,28,18,30,24,36],className:o="",style:p})=>{let l=Math.max(...r,1),f=r.map((x,A)=>`${A/(r.length-1)*t},${e-x/l*e}`).join(" ");return be("svg",{width:t,height:e,viewBox:`0 0 ${t} ${e}`,className:o,style:p,role:"img","aria-label":"Simple line chart",children:[k("rect",{width:"100%",height:"100%",fill:"transparent"}),k("polyline",{fill:"none",stroke:"rgba(59,130,246,0.9)",strokeWidth:2,points:f,strokeLinecap:"round",strokeLinejoin:"round"}),k("polygon",{points:`${f} ${t},${e} 0,${e}`,fill:"rgba(59,130,246,0.08)"})]})};export{j as BellCurve,N as Chart,oe as RadarChart,ce as SankeyChart,pe as ScatterChart,de as SimpleChart,ue as TreemapChart};
+import{cn as Ce}from"@cleen/ui-core";import{forwardRef as ve}from"react";import ke from"react-apexcharts";var G={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 K}from"react/jsx-runtime";var V=ve(function({type:t="line",series:r,options:o={},width:u="100%",height:g=350,className:c,style:h},p){let S={...G,...o,chart:{...G.chart,...o.chart,type:t}};return K("div",{className:Ce("cleen",c),style:h,children:K(ke,{options:S,series:r,type:t,width:u,height:g,ref:p})})}),P=V;import{applyDefaults as B}from"@cleen/ui-core";import{forwardRef as Ae,useMemo as I}from"react";import{ColorHelpers as H}from"@cleen/ui-core";var j={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"}}},Y={label:{borderColor:"transparent",style:{color:"rgba(var(--cleen-white))",background:"rgba(var(--cleen-primary))"}},fillColor:"rgba(var(--cleen-primary))"},q={label:{borderWidth:0,offsetY:-15,orientation:"horizontal",style:{color:"rgba(var(--cleen-primary))",background:"transparent",fontSize:"16px",fontWeight:700}},borderColor:"rgba(var(--cleen-primary))"},Z={marker:{size:8,fillColor:"rgba(var(--cleen-primary))",strokeColor:"rgba(var(--cleen-white))"}},J={chart:{zoom:{enabled:!1},toolbar:{show:!1},animations:{enabled:!1}},stroke:{curve:"monotoneCubic",width:2.5},colors:[H.getComputedColor("var(--cleen-error)"),H.getComputedColor("var(--cleen-primary)"),H.getComputedColor("var(--cleen-success)")],fill:{type:"gradient",gradient:{shade:"light",type:"vertical",shadeIntensity:.6,gradientToColors:[H.getComputedColor("var(--cleen-error)")||"",H.getComputedColor("var(--cleen-primary)")||"",H.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 Q=(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}),ee=(e,t,r,o)=>({middle:e,leftSigma:e-t,left2Sigma:e-2*t,left:r,rightSigma:e+t,right2Sigma:e+2*t,right:o}),te=(e,t)=>{let r={};switch(e.type){case"range":r={x:t[e.x],x2:t[e.x2]};break;case"offset":r={x:e.x-e.offset,x2:e.x+e.offset};break;case"region":e.x>=t.left&&e.x<t.left2Sigma?r={x:t.left,x2:t.left2Sigma}:e.x>=t.left2Sigma&&e.x<t.leftSigma?r={x:t.left2Sigma,x2:t.leftSigma}:e.x>=t.leftSigma&&e.x<t.middle?r={x:t.leftSigma,x2:t.middle}:e.x>=t.middle&&e.x<t.rightSigma?r={x:t.middle,x2:t.rightSigma}:e.x>=t.rightSigma&&e.x<t.right2Sigma?r={x:t.rightSigma,x2:t.right2Sigma}:e.x>=t.right2Sigma&&e.x<t.right&&(r={x:t.right2Sigma,x2:t.right});break;default:r={x:e.x,x2:e.x2};break}return r};import{jsx as Ne}from"react/jsx-runtime";var Oe=Ae(function({serie:t,labels:r,sigma:o,pointAnnotations:u,rangeAnnotations:g,highlightAnnotations:c,options:h,height:p=360,...S},n){let y=I(()=>t.sort((d,m)=>d.x-m.x),[t]),v=I(()=>{let d=new Map;return t.forEach(m=>d.set(m.x,m.y)),d},[t]),l=y[Math.floor(y.length/2)],A=I(()=>{let{below:d,middle:m,above:C}=t.reduce((s,a)=>(a.x<l.x-2*o?s.below.push(a):a.x>=l.x+2*o?(a.x===l.x+2*o&&s.middle.push(a),s.above.push(a)):(a.x===l.x-2*o&&s.below.push(a),s.middle.push(a)),s),{below:[],middle:[],above:[]});return[{name:r?.below||"Below threshold",data:d},{name:r?.middle||"Middle grounds",data:m},{name:r?.above||"Above threshold",data:C}]},[o,t,r,l]),O=I(()=>{if(!u)return[];let d=Q(l.x,o);return Object.entries(u).map(([m,C])=>{let s=d[m];return{x:s,y:v.get(s)||0,...B(j,C)}})},[u,o,v]),N=I(()=>{if(!g)return[];let d=ee(l.x,o,y[0].x,y[y.length-1].x);return g.map(m=>{let C=te(m,d);return{...B(Y,m),...C}})},[g,o,y]),{highlightPointAnnotations:R,highlightLineAnnotations:T}=I(()=>{if(!c)return{highlightLineAnnotations:[],highlightPointAnnotations:[]};let d=[],m=[],C=({x:a,line:i})=>{m.push(B(q,{x:a,...i}))},s=({x:a,y:i,point:f})=>{d.push(B(Z,{x:a,y:i,...f}))};return c?.forEach(a=>{switch(a.show){case"line":C(a);break;case"point":s(a);break;case"both":C(a),s(a);break;default:break}}),{highlightPointAnnotations:d,highlightLineAnnotations:m}},[c]);return Ne(P,{series:A,options:{...B(J,h),annotations:{...h?.annotations,points:[...O,...R,...h?.annotations?.points||[]],xaxis:[...N,...T,...h?.annotations?.xaxis||[]]}},height:p,ref:n,type:"area",...S})});import{applyDefaults as Te}from"@cleen/ui-core";import{forwardRef as Re}from"react";var re={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 we}from"react/jsx-runtime";var Pe=Re(function({options:t,...r},o){return we(P,{type:"radar",ref:o,options:Te(re,t),...r})});import{applyDefaults as Le,cn as He}from"@cleen/ui-core";import{forwardRef as Ie}from"react";var oe={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))"}}},ne={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 z,jsxs as ae}from"react/jsx-runtime";var _e=Ie(function({options:t,variant:r="default",rows:o,className:u,style:g,...c},h){let S=Le(r==="matrix"?ne:oe,t);if(r==="matrix"&&o?.length){let n=Math.min(...o.map(l=>l.y)),y=Math.max(...o.map(l=>l.y)),v=Array.isArray(S.yaxis)?{}:S.yaxis??{};return ae("div",{className:He("cleen",u),style:{display:"grid",gridTemplateColumns:"156px minmax(0, 1fr)",alignItems:"stretch",gap:"12px",width:"100%",...g},children:[z("div",{style:{display:"grid",gridTemplateRows:`repeat(${o.length}, minmax(0, 1fr))`,padding:"18px 0 54px"},children:o.map(l=>ae("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-end",gap:"4px",paddingRight:"8px"},children:[z("span",{style:{fontSize:"18px",fontWeight:700,lineHeight:1.1,color:"rgba(var(--cleen-black))"},children:l.label}),l.gapsLabel?z("span",{style:{fontSize:"14px",lineHeight:1.2,color:"rgba(var(--cleen-gray), 0.8)"},children:l.gapsLabel}):null]},`${l.label}-${l.y}`))}),z(P,{type:"scatter",ref:h,className:"cleen-w-full",style:{height:"100%"},options:{...S,yaxis:{...v,min:n-.5,max:y+.5,tickAmount:Math.max(y-n,1),axisBorder:{...v.axisBorder,show:!1},axisTicks:{...v.axisTicks,show:!1},labels:{...v.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||[]]}},...c})]})}return z(P,{type:"scatter",ref:h,className:u,style:g,options:S,...c})});import{applyDefaults as Ee,cn as $e}from"@cleen/ui-core";import{useId as Be,useMemo as D,useRef as ze,useState as Me}from"react";import{Layer as me,Rectangle as ie,ResponsiveContainer as De,Sankey as Fe,Tooltip as Ge}from"recharts";var L={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{jsx as x,jsxs as E}from"react/jsx-runtime";var We=typeof L.height=="number"?L.height:420,se=40,le=60,ce=8,Xe=8;function Ue(e){if(typeof e=="number"&&Number.isFinite(e))return e;if(typeof e=="string"){let t=e.trim();if(!t.endsWith("%")&&t!=="auto"){let r=Number.parseFloat(t);if(Number.isFinite(r))return r}}return We}function pe(e){return typeof e=="object"&&e!==null&&"id"in e&&"title"in e}var de=["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 he(e){return e!=null}function Ke(e,t){return[e.source,e.target,e.type??"",e.label??"",e.value,t].join("-").replace(/\s+/g,"_")}function F(e,t){return typeof e=="object"&&e!==null?e.id:t}function ue(e,t){return typeof e=="object"&&e!==null?e.title:t}function ge(e){return typeof e=="object"&&e!==null&&"edgeKey"in e&&"sourceId"in e&&"targetId"in e}function ye(e){return e.replace(/[^a-zA-Z0-9_-]/g,"_")}function _(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 r=e.match(/^rgba\((var\(.+\))\)$/i);if(r)return{color:`rgb(${r[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 W(e,t){return _(t??de[e%de.length])}function fe(e){return e.length*Xe}function Ve(e){let t=new Set,r=new Set([e.id]);for(let o of[...e.sourceLinks??[],...e.targetLinks??[]])t.add(o.edgeKey),r.add(F(o.source,o.sourceId)),r.add(F(o.target,o.targetId));return{activeLinkKeys:t,activeNodeIds:r}}function je(e){return{activeLinkKeys:new Set([e.edgeKey]),activeNodeIds:new Set([F(e.source,e.sourceId),F(e.target,e.targetId)])}}function Ye(e,t,r,o,u){return!e||e.activeNodeIds.has(t)?1:o?u??L.dimOpacity??.2:r?.55:1}function qe(e,t,r,o,u,g){return e?e.activeLinkKeys.has(t)?o?Math.max(r,.9):r:u?g??L.dimOpacity??.2:o?Math.min(r,.3):r:r}var Ze=({dimOnHover:e,dimOpacity:t,fontColor:r,x:o,y:u,width:g,height:c,highlightOnHover:h,hoverState:p,index:S,outgoingEdgesById:n,payload:y,stroke:v,strokeWidth:l})=>{if(y===void 0||o===void 0||u===void 0||g===void 0||c===void 0||S===void 0)return null;let A=n?.get(y.id)??[],O=A.length>0,N=W(S,y.color),R=_(r),T=Ye(p,y.id,h,e,t),d=new Set(A.map(i=>i.color).filter(he)),m=Array.from(d)[0],C=O&&A.length>1&&d.size>1&&d.size===A.length,s=C?A:[],a=s.reduce((i,f)=>i+(f.value??0),0);return E(me,{children:[C&&a>0?s.map((i,f)=>{let b=s.slice(0,f).reduce((xe,Se)=>xe+(Se.value??0),0),k=u+b/a*c,w=(i.value??0)/a*c,M=_(i.color??N.color),$=f===0,U=f===s.length-1;return x(ie,{x:o,y:k,width:g,height:w,fill:M.color,fillOpacity:M.opacity*T,stroke:v,strokeWidth:l,radius:[$?2:0,$?2:0,U?2:0,U?2:0]},`${i.source}-${i.target}-${f}`)}):x(ie,{x:o,y:u,width:g,height:c,fill:O&&d.size===1?_(m??N.color).color:N.color,fillOpacity:(O&&d.size===1?_(m??N.color).opacity:N.opacity)*T,stroke:v,strokeWidth:l,radius:[2,2,2,2]}),x("text",{textAnchor:O?"end":"start",x:O?o-8:o+g+8,y:u+c/2,dy:"0.35em",fontSize:"14",fill:R.color,fillOpacity:R.opacity*T,fontWeight:600,children:y.name})]},`CustomNode${S}`)},Je=({sourceX:e,targetX:t,sourceY:r,targetY:o,sourceControlX:u,targetControlX:g,linkWidth:c,index:h,payload:p,opacity:S,chartId:n,dimOnHover:y,dimOpacity:v,edgeGradientFill:l,highlightOnHover:A,hoverState:O})=>{if(p===void 0||e===void 0||t===void 0||r===void 0||o===void 0||u===void 0||g===void 0||c===void 0)return null;let N=S??L.edgeOpacity??.4,R=qe(O,p.edgeKey,N,A,y,v),T=p.color?_(p.color):null,d=T??W(typeof p.source=="object"?p.source.index:0,typeof p.source=="object"?p.source.color:void 0),m=T??W(typeof p.target=="object"?p.target.index:1,typeof p.target=="object"?p.target.color:void 0),C=ye(`linkGradient-${n}-${p.edgeKey}-${h??p.value}`),s=l!==!1&&T===null;return E(me,{children:[s?x("defs",{children:E("linearGradient",{id:C,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[x("stop",{offset:"0%",stopColor:d.color,stopOpacity:d.opacity*R}),x("stop",{offset:"100%",stopColor:m.color,stopOpacity:m.opacity*R})]})}):null,x("path",{d:`
+          M${e},${r}
+          C${u},${r} ${g},${o} ${t},${o}
+        `,stroke:s?`url(#${C})`:d.color,strokeWidth:Math.max(1,c),fill:"none",strokeOpacity:s?1:d.opacity*R,className:"cleen-transition-opacity cleen-duration-300 hover:cleen-opacity-100"})]},`CustomLink${p.edgeKey}`)};function Qe({data:e,options:t,className:r,style:o,onNodeClick:u}){let g=ze(null),[c,h]=Me(null),p=Be(),S=ye(p),n=Ee(L,t),y=Ue(n.height),v=n.highlightOnHover||n.dimOnHover,l=D(()=>{let s=e.nodes.map((i,f)=>({...i,index:f,name:i.title})),a=e.edges.map((i,f)=>{let b=e.nodes.findIndex(w=>w.id===i.source),k=e.nodes.findIndex(w=>w.id===i.target);return b<0||k<0?null:{...i,edgeKey:Ke(i,f),originalEdge:i,source:b,sourceId:i.source,target:k,targetId:i.target,value:i.value}}).filter(he);return{nodes:s,links:a}},[e]),A=D(()=>{let s=new Map;for(let a of e.edges){let i=s.get(a.source)??[];i.push(a),s.set(a.source,i)}return s},[e]),O=D(()=>({backgroundColor:n.tooltipBGColor,border:`1px solid ${n.tooltipBorderColor}`,borderRadius:8,boxShadow:"0 12px 32px rgba(15, 23, 42, 0.12)",color:n.fontColor,padding:"10px 12px"}),[n.fontColor,n.tooltipBGColor,n.tooltipBorderColor]),N=D(()=>{let s=new Set(e.edges.map(b=>b.source)),a=new Set(e.edges.map(b=>b.target)),i=e.nodes.reduce((b,k)=>a.has(k.id)?b:Math.max(b,fe(k.title)),0),f=e.nodes.reduce((b,k)=>s.has(k.id)?b:Math.max(b,fe(k.title)),0);return{top:se,right:Math.max(le,f+ce+16),bottom:se,left:Math.max(le,i+ce+16)}},[e]),R=(s,a)=>{if(v){if(a==="node"&&pe(s.payload)){h(Ve(s.payload));return}a==="link"&&ge(s.payload)&&h(je(s.payload))}},T=()=>{v&&h(null)},d=()=>{if(typeof window>"u")return;let s=g.current?.querySelector("svg");if(!s)return;let a=new XMLSerializer().serializeToString(s),i=new Blob([a],{type:"image/svg+xml;charset=utf-8"}),f=URL.createObjectURL(i),b=document.createElement("a");b.href=f,b.download="sankey-chart.svg",b.click(),window.setTimeout(()=>URL.revokeObjectURL(f),0)},m=({active:s,payload:a})=>{if(!s||!a?.length)return null;let i=a[0]?.payload;if(!i)return null;let f=ge(i),b=n.valueFormatter?n.valueFormatter(Number(i.value??a[0]?.value??0),f?i.originalEdge:void 0):`${i.value??a[0]?.value??""}`,k=f?ue(i.source,i.sourceId):"",w=f?ue(i.target,i.targetId):"",M=f?i.label??`${k} \u2192 ${w}`:i.title,$=f?`${k} \u2192 ${w}`:"";return E("div",{style:O,children:[x("div",{style:{color:n.fontColor,fontWeight:600},children:M}),$?x("div",{style:{color:n.fontColor,fontSize:13,marginTop:4,opacity:.72},children:$}):null,x("div",{style:{color:n.fontColor,fontSize:13,marginTop:6},children:b})]})},C={display:"flex",flexDirection:"column",gap:n.enableToolbar?12:0,width:n.width??"100%",height:y,minHeight:y,...o};return E("div",{className:$e("cleen cleen-w-full",r),ref:g,style:C,children:[n.enableToolbar?E("div",{className:"cleen-flex cleen-items-center cleen-justify-end cleen-gap-2",children:[x("button",{type:"button",onClick:()=>h(null),disabled:!c,style:{backgroundColor:"rgba(var(--cleen-white))",border:"1px solid rgba(var(--cleen-gray), 0.2)",borderRadius:8,color:n.fontColor,cursor:c?"pointer":"not-allowed",fontSize:13,fontWeight:600,opacity:c?1:.5,padding:"6px 10px"},children:"Reset focus"}),x("button",{type:"button",onClick:d,style:{backgroundColor:"rgba(var(--cleen-white))",border:"1px solid rgba(var(--cleen-gray), 0.2)",borderRadius:8,color:n.fontColor,cursor:"pointer",fontSize:13,fontWeight:600,padding:"6px 10px"},children:"Download SVG"})]}):null,x("div",{style:{flex:1,minHeight:0},children:x(De,{width:"100%",height:"100%",children:x(Fe,{data:l,align:n.align,margin:N,node:x(Ze,{dimOnHover:n.dimOnHover,dimOpacity:n.dimOpacity,fontColor:n.fontColor??L.fontColor??"rgba(var(--cleen-neutral-800, 38, 38, 38))",highlightOnHover:n.highlightOnHover,hoverState:c,outgoingEdgesById:A,stroke:n.nodeBorderColor??"transparent",strokeWidth:n.nodeBorderWidth}),nodePadding:n.nodePadding,nodeWidth:n.nodeWidth,link:x(Je,{chartId:S,dimOnHover:n.dimOnHover,dimOpacity:n.dimOpacity,edgeGradientFill:n.edgeGradientFill,highlightOnHover:n.highlightOnHover,hoverState:c,opacity:n.edgeOpacity}),onClick:(s,a)=>{a==="node"&&u&&pe(s.payload)&&u(s.payload)},onMouseEnter:R,onMouseLeave:T,children:n.enableTooltip?x(Ge,{content:x(m,{}),cursor:!1}):null})})})]})}import{applyDefaults as et}from"@cleen/ui-core";import{forwardRef as tt}from"react";var be={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 ot}from"react/jsx-runtime";var rt=tt(function({options:t,...r},o){return ot(P,{type:"treemap",ref:o,options:et(be,t),...r})});import"react";import{jsx as X,jsxs as at}from"react/jsx-runtime";var nt=({width:e=240,height:t=80,data:r=[12,28,18,30,24,36],className:o="",style:u})=>{let g=Math.max(...r,1),c=r.map((h,p)=>`${p/(r.length-1)*e},${t-h/g*t}`).join(" ");return at("svg",{width:e,height:t,viewBox:`0 0 ${e} ${t}`,className:o,style:u,role:"img","aria-label":"Simple line chart",children:[X("rect",{width:"100%",height:"100%",fill:"transparent"}),X("polyline",{fill:"none",stroke:"rgba(59,130,246,0.9)",strokeWidth:2,points:c,strokeLinecap:"round",strokeLinejoin:"round"}),X("polygon",{points:`${c} ${e},${t} 0,${t}`,fill:"rgba(59,130,246,0.08)"})]})};export{Oe as BellCurve,V as Chart,Pe as RadarChart,Qe as SankeyChart,_e as ScatterChart,nt as SimpleChart,rt as TreemapChart};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleen/ui",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -32,16 +32,15 @@
     "@cleen/ui-core": "*",
     "@wavesurfer/react": "^1.0.12",
     "apexcharts": "^5.10.1",
-    "apexsankey": "^1.7.1",
     "embla-carousel-auto-scroll": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "react-apexcharts": "^2.1.0",
-    "react-apexsankey": "^1.0.0",
     "react-day-picker": "^9.11.1",
     "react-icons": "^5.3.0",
     "react-select": "^5.10.2",
     "react-toastify": "^11.0.5",
+    "recharts": "^3.8.1",
     "wavesurfer.js": "^7.12.1"
   },
   "peerDependencies": {