@verifiedinc-public/shared-ui-elements 8.21.1 → 8.21.2

package/dist/components/chart/OneClickVerificationFunnelChart/OneClickVerificationFunnelChart.mjs

@@ -1 +1 @@
-"use strict";import{useRef as S}from"react";import{useTheme as b}from"@mui/material";import{lighten as B,contrastColor as W}from"../../../utils/color/index.mjs";import{EmptyChartSection as x}from"../EmptyChartSection.mjs";import{LoadingChartSection as j}from"../LoadingChartSection.mjs";import{FunnelChart as k}from"../FunnelChart/index.mjs";import{useStyle as w}from"../styles.mjs";import{jsx as i,jsxs as D}from"react/jsx-runtime";const I=[40,25,10,0];function N({data:c,isLoading:C,isFetching:L,isSuccess:O,sx:F}){const P=w(),u=b();if(!c.length&&C)return i(j,{});if(!c.length||!O)return i(x,{});if(c.every(t=>t.value===0))return i(x,{});const m=c.map((t,e)=>({step:t,originalIndex:e})).filter(({step:t})=>t.value>0);if(m.length<2)return i(x,{});const g=u.palette.primary.main,v=S(0),y=S(0),p=m.map(({step:t,originalIndex:e},a)=>{const n=a>0?m[a-1].step:null;let l=null;if(n!==null&&n.value>0){const o=(n.value-t.value)/n.value*100;l=o>0?o:null}return{name:t.name,value:t.value,dropOffPercent:l,fill:B(g,I[e])}});function z(t){var e;const{x:a,y:n,width:l,height:o,value:s,index:r}=t;if(s==null)return null;r===0&&(v.current=a+l/2);const f=((e=p[r])==null?void 0:e.fill)??g,d=l>=60?W(f):u.palette.text.primary;return i("text",{x:v.current,y:n+o/2,textAnchor:"middle",dominantBaseline:"middle",fontSize:14,fontWeight:600,fill:d,children:Number(s).toLocaleString()})}function A(t){var e;const{x:a,y:n,width:l,height:o,index:s}=t,r=p[s];if(!r)return null;s===0&&(y.current=a+l);const f=y.current+8,d=r.dropOffPercent!==null&&r.dropOffPercent>0,h=n+o/2;return D("g",{children:[i("text",{x:f,y:d?h-8:h,textAnchor:"start",dominantBaseline:"middle",fontSize:16,fill:u.palette.text.primary,children:r.name}),d&&i("text",{x:f,y:h+10,textAnchor:"start",dominantBaseline:"middle",fontSize:11,fill:u.palette.text.secondary,children:`Drop-off ${(e=r.dropOffPercent)==null?void 0:e.toFixed(1)}%`})]})}return i(k,{data:p,insideLabel:{content:z,dataKey:"value"},outsideLabel:{content:A},sx:{...P.regularChartWrapper,opacity:L?.4:1,...F}})}export{N as OneClickVerificationFunnelChart};
+"use strict";import{useState as L,useRef as F,useEffect as I}from"react";import{useTheme as N}from"@mui/material";import{lighten as R,contrastColor as T}from"../../../utils/color/index.mjs";import{EmptyChartSection as x}from"../EmptyChartSection.mjs";import{LoadingChartSection as k}from"../LoadingChartSection.mjs";import{FunnelChart as D}from"../FunnelChart/index.mjs";import{useStyle as H}from"../styles.mjs";import{jsx as a,jsxs as J}from"react/jsx-runtime";const K=[40,25,10,0];function M({data:u,isLoading:O,isFetching:P,isSuccess:b,sx:z}){const A=H(),c=N(),[v,B]=L(0),[g,j]=L(0),y=F(0),S=F(0);if(I(()=>{const t=y.current,e=S.current;t!==0&&t!==v&&B(t),e!==0&&e!==g&&j(e)}),!u.length&&O)return a(k,{});if(!u.length||!b)return a(x,{});if(u.every(t=>t.value===0))return a(x,{});const p=u.map((t,e)=>({step:t,originalIndex:e})).filter(({step:t})=>t.value>0);if(p.length<2)return a(x,{});const C=c.palette.primary.main,s=p.map(({step:t,originalIndex:e},n)=>{const i=n>0?p[n-1].step:null;let r=null;if(i!==null&&i.value>0){const o=(i.value-t.value)/i.value*100;r=o>0?o:null}return{name:t.name,value:t.value,dropOffPercent:r,fill:R(C,K[e])}}),w=s.reduce((t,e,n)=>e.value>s[t].value?n:t,0);function E(t){var e;const{x:n,y:i,width:r,height:o,value:f,index:l}=t;if(f==null)return null;l===w&&(y.current=n+r/2,S.current=n+r);const d=((e=s[l])==null?void 0:e.fill)??C,m=r>=60?T(d):c.palette.text.primary;return a("text",{x:v||n+r/2,y:i+o/2,textAnchor:"middle",dominantBaseline:"middle",fontSize:14,fontWeight:600,fill:m,children:Number(f).toLocaleString()})}function W(t){var e;const{x:n,y:i,width:r,height:o,index:f}=t,l=s[f];if(!l)return null;const d=(g||n+r)+8,m=l.dropOffPercent!==null&&l.dropOffPercent>0,h=i+o/2;return J("g",{children:[a("text",{x:d,y:m?h-8:h,textAnchor:"start",dominantBaseline:"middle",fontSize:16,fill:c.palette.text.primary,children:l.name}),m&&a("text",{x:d,y:h+10,textAnchor:"start",dominantBaseline:"middle",fontSize:11,fill:c.palette.text.secondary,children:`Drop-off ${(e=l.dropOffPercent)==null?void 0:e.toFixed(1)}%`})]})}return a(D,{data:s,insideLabel:{content:E,dataKey:"value"},outsideLabel:{content:W},sx:{...A.regularChartWrapper,opacity:P?.4:1,...z}})}export{M as OneClickVerificationFunnelChart};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "8.21.1",
+  "version": "8.21.2",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,