@verifiedinc-public/shared-ui-elements 3.9.0 → 3.11.0

package/dist/components/chart/ErrorCodesChart/index.d.ts

@@ -0,0 +1,37 @@
+import { ReactElement } from 'react';
+import { SxProps } from '@mui/material';
+/**
+ * Props for the ErrorCodesChart component
+ */
+interface ErrorCodesChartProps {
+    /**
+     * Data object containing error codes and their occurrence counts.
+     * The data should follow the structure: Record<string, number>
+     * Example: { OCE000: 150, OCE001: 75 }
+     */
+    data: Record<string, number> | undefined;
+    /**
+     * MUI System props object for custom styling of the chart container
+     */
+    sx?: SxProps;
+}
+/**
+ * A bar chart component that visualizes error code occurrences.
+ *
+ * The chart displays error codes on the x-axis and their counts on the y-axis.
+ * It includes a reference line at y=100 to indicate an unhealthy threshold.
+ * Each error code is represented by a bar with a light error color from the theme.
+ *
+ * @example
+ * ```tsx
+ * <ErrorCodesChart
+ *   data={{
+ *     OCE000: 150,
+ *     OCE001: 75
+ *   }}
+ *   sx={{ width: 800, height: 400 }}
+ * />
+ * ```
+ */
+export declare function ErrorCodesChart({ data, sx, }: ErrorCodesChartProps): ReactElement;
+export {};

package/dist/components/chart/PieChart/index.d.ts

@@ -0,0 +1,87 @@
+import { ReactElement } from 'react';
+import { SxProps } from '@mui/material';
+import { PieProps } from 'recharts';
+/**
+ * Data point structure for the PieChart component
+ */
+export interface DataPoint {
+    /** Label for the data point */
+    name: string;
+    /** Numeric value for the data point */
+    value: number;
+    /** Optional color for the slice */
+    color?: string;
+}
+/**
+ * Props for the PieChart component
+ */
+interface PieChartProps {
+    /**
+     * Array of data points to display in the pie chart
+     * Each point should have a name and value, and optionally a color
+     */
+    data: DataPoint[];
+    /**
+     * MUI System props object for custom styling of the chart container
+     */
+    sx?: SxProps;
+    /**
+     * Optional label for the chart's legend
+     */
+    legendLabel?: string;
+    /**
+     * Optional visibility for the legend
+     * @default false
+     */
+    legendToggle?: boolean;
+    /**
+     * Optional prefix for the value label
+     * @default ''
+     */
+    valueText?: string;
+    /**
+     * Optional visibility for the value percentage
+     * @default true
+     */
+    valuePercentage?: boolean;
+    /**
+     * Optional visibility for the needle
+     * @default false
+     */
+    needleVisible?: boolean;
+    /**
+     * Optional needle value to display on the chart
+     */
+    needleValue?: number;
+    /**
+     * Optional color for the needle
+     * @default '#d0d000'
+     */
+    needleColor?: string;
+    /**
+     * Optional props object for the Pie component
+     */
+    pie?: Partial<PieProps>;
+}
+/**
+ * A pie chart component that visualizes proportional data.
+ *
+ * The chart displays data points as slices of a pie, with optional donut style.
+ * It includes a legend and tooltips for better data visualization.
+ * Colors can be provided in the data points or will default to theme-based colors.
+ * Hovering over a slice shows detailed information about that segment.
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   data={[
+ *     { name: 'Group A', value: 400, color: '#ff0000' },
+ *     { name: 'Group B', value: 300, color: '#00ff00' },
+ *   ]}
+ *   sx={{ width: 400, height: 400 }}
+ *   legendLabel="Distribution"
+ * />
+ * ```
+ */
+export declare function PieChart({ data, sx, legendLabel, legendToggle, valueText, valuePercentage, pie, needleVisible, needleValue, needleColor, }: PieChartProps): ReactElement;
+export {};

package/dist/components/chart/PieChart/renderActiveShape.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export declare const renderActiveShape: (props: any) => ReactElement;

package/dist/components/chart/PieChart/renderNeedle.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+interface DataPoint {
+    value: number;
+}
+interface NeedleOptions {
+    value: number;
+    data: DataPoint[];
+    color: string;
+    innerRadius: string | number;
+    outerRadius: string | number;
+    boxDimensions?: DOMRectReadOnly;
+    legendDimensions: DOMRectReadOnly;
+    valueText?: string;
+}
+export declare const renderNeedle: (options: NeedleOptions) => ReactElement;
+export {};

package/dist/components/chart/RiskScoreBarChart/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { SxProps } from '@mui/material';
+interface RiskScoreBarChartProps {
+    data: Array<Record<number, number>>;
+    sx?: SxProps;
+}
+export declare function RiskScoreBarChart({ data, sx, }: RiskScoreBarChartProps): ReactElement;
+export {};

package/dist/components/chart/RiskScorePieChart/index.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { SxProps } from '@mui/material';
+import { DataPoint } from '../PieChart';
+export interface RiskScorePieChartProps {
+    data: Array<Pick<DataPoint, 'value'>>;
+    /** Optional style overrides */
+    sx?: SxProps;
+    /** The current risk score value (0-1000) */
+    score?: number;
+    /** Optional label for the legend */
+    legendLabel?: string;
+}
+/**
+ * A specialized pie chart for displaying risk scores.
+ * Displays a semi-circular gauge with three segments (Allow, Flag, Block)
+ * and a needle indicating the current score.
+ */
+export declare function RiskScorePieChart({ sx, data, score, legendLabel, }: RiskScorePieChartProps): ReactElement;

package/dist/components/chart/SimpleBarChart/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, ReactElement } from 'react';
 import { SxProps } from '@mui/material';
-import { Bar, ReferenceLine, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, ReferenceArea, ReferenceLine, Tooltip, XAxis, YAxis } from 'recharts';
 interface Series {
     key: string;
     dataKey: string;
@@ -14,7 +14,8 @@ interface SimpleBarChartProps {
     tooltip?: ComponentProps<typeof Tooltip>;
     bar?: ComponentProps<typeof Bar>;
     referenceLines?: Array<ComponentProps<typeof ReferenceLine>>;
+    referenceAreas?: Array<ComponentProps<typeof ReferenceArea>>;
     sx?: SxProps;
 }
-export declare function SimpleBarChart({ data, series, xAxis, yAxis, tooltip, bar, referenceLines, sx, }: SimpleBarChartProps): ReactElement;
+export declare function SimpleBarChart({ data, series, xAxis, yAxis, tooltip, bar, referenceLines, referenceAreas, sx, }: SimpleBarChartProps): ReactElement;
 export {};

package/dist/components/chart/SimpleLegend/index.d.ts

@@ -0,0 +1,59 @@
+import { ReactElement } from 'react';
+/**
+ * Generic payload interface for legend items.
+ * Represents the data structure of each legend entry's payload.
+ */
+export interface Payload {
+    /** Unique identifier for the legend item */
+    name: string;
+    /** Additional dynamic properties */
+    [key: string]: any;
+}
+/**
+ * Represents a single entry in the legend.
+ */
+interface LegendEntry {
+    /** Display value for the legend item */
+    value: string;
+    /** Data payload associated with the legend item */
+    payload: Payload;
+    /** Color to be used for the legend item's marker and text */
+    color: string;
+}
+/**
+ * Props for the SimpleLegend component
+ */
+interface CustomLegendProps {
+    /** Array of legend entries to be displayed */
+    payload?: LegendEntry[];
+    /** Set of item names that are currently hidden */
+    hiddenItems: Set<string>;
+    /** Optional callback function triggered when a legend item is clicked */
+    onToggle?: (payload: Payload) => void;
+    /** Optional label prefix for legend items */
+    legendLabel?: string;
+}
+/**
+ * A reusable legend component for charts that supports item toggling and custom styling.
+ *
+ * This component renders a horizontal list of legend items, each with a colored square marker
+ * and associated text. Items can be clicked to toggle their visibility in the associated chart.
+ *
+ * Features:
+ * - Customizable colors for markers and text
+ * - Click to toggle visibility
+ * - Visual feedback for hidden items (reduced opacity)
+ * - Optional label prefix for all items
+ * - Centered layout with consistent spacing
+ *
+ * @example
+ * ```tsx
+ * <SimpleLegend
+ *   hiddenItems={new Set(["A"])}
+ *   onToggle={(payload) => console.log("Toggled:", payload.name)}
+ *   legendLabel="Type"
+ * />
+ * ```
+ */
+export declare function SimpleLegend({ payload, hiddenItems, onToggle, legendLabel, }: CustomLegendProps): ReactElement;
+export {};

package/dist/components/chart/index.d.ts

@@ -3,3 +3,7 @@ export * from './SeriesChartLegend';
 export * from './SeriesPercentageChart';
 export * from './BigNumber';
 export * from './SimpleBarChart';
+export * from './ErrorCodesChart';
+export * from './PieChart';
+export * from './RiskScorePieChart';
+export * from './SimpleLegend';

package/dist/components/chart/index.mjs

@@ -1 +1 @@
-"use strict";import{j as s}from"../../shared/jsx-runtime-jmtevAuS.mjs";import*as D from"react";import{useCallback as J,useMemo as Q,createElement as _e}from"react";import{Box as z,Stack as P,Typography as R,useTheme as Y,Paper as Te}from"@mui/material";import{ResponsiveContainer as ee,LineChart as Ee,CartesianGrid as ne,XAxis as te,YAxis as oe,Label as Ae,Tooltip as re,Legend as Ce,Line as De,AreaChart as Le,Area as Ge,ComposedChart as Me,ReferenceLine as fe,Bar as Re}from"recharts";import{b as he,c as ye}from"../../shared/date-Cq0LS2Mr.mjs";import q,{Decimal as ae}from"decimal.js";import{AnimatePresence as Fe}from"framer-motion";import{u as We}from"../../shared/useCopyToClipboard-BALOSYVW.mjs";import"qrcode";import{u as ie}from"../../shared/usePrevious-DyvR1iCQ.mjs";import{a as Ie,C as xe}from"../../shared/motions-CpxgbzKX.mjs";import{i as Ve,_ as B,s as Ke,a as f,c as be,d as ze,e as Pe,f as qe,h as Be,j as Ue,k as Ze,l as Xe,m as He,n as Je,o as Qe,p as Ye,u as en}from"../../shared/index-CDq4CkLc.mjs";import{u as nn}from"../../shared/useCounter-BV32zXDQ.mjs";const tn=["ownerState"],on=["variants"],rn=["name","slot","skipVariantsResolver","skipSx","overridesResolver"];function an(e){return Object.keys(e).length===0}function sn(e){return typeof e=="string"&&e.charCodeAt(0)>96}function se(e){return e!=="ownerState"&&e!=="theme"&&e!=="sx"&&e!=="as"}const ln=be(),cn=e=>e&&e.charAt(0).toLowerCase()+e.slice(1);function U({defaultTheme:e,theme:n,themeId:t}){return an(n)?e:n[t]||n}function un(e){return e?(n,t)=>t[e]:null}function Z(e,n){let{ownerState:t}=n,o=B(n,tn);const r=typeof e=="function"?e(f({ownerState:t},o)):e;if(Array.isArray(r))return r.flatMap(a=>Z(a,f({ownerState:t},o)));if(r&&typeof r=="object"&&Array.isArray(r.variants)){const{variants:a=[]}=r;let i=B(r,on);return a.forEach(c=>{let l=!0;typeof c.props=="function"?l=c.props(f({ownerState:t},o,t)):Object.keys(c.props).forEach(u=>{t?.[u]!==c.props[u]&&o[u]!==c.props[u]&&(l=!1)}),l&&(Array.isArray(i)||(i=[i]),i.push(typeof c.style=="function"?c.style(f({ownerState:t},o,t)):c.style))}),i}return r}function pn(e={}){const{themeId:n,defaultTheme:t=ln,rootShouldForwardProp:o=se,slotShouldForwardProp:r=se}=e,a=i=>ze(f({},i,{theme:U(f({},i,{defaultTheme:t,themeId:n}))}));return a.__mui_systemSx=!0,(i,c={})=>{Ve(i,m=>m.filter(w=>!(w!=null&&w.__mui_systemSx)));const{name:l,slot:u,skipVariantsResolver:d,skipSx:p,overridesResolver:h=un(cn(u))}=c,y=B(c,rn),v=d!==void 0?d:u&&u!=="Root"&&u!=="root"||!1,x=p||!1;let j,k=se;u==="Root"||u==="root"?k=o:u?k=r:sn(i)&&(k=void 0);const N=Ke(i,f({shouldForwardProp:k,label:j},y)),W=m=>typeof m=="function"&&m.__emotion_real!==m||Pe(m)?w=>Z(m,f({},w,{theme:U({theme:w.theme,defaultTheme:t,themeId:n})})):m,E=(m,...w)=>{let G=W(m);const _=w?w.map(W):[];l&&h&&_.push(b=>{const g=U(f({},b,{defaultTheme:t,themeId:n}));if(!g.components||!g.components[l]||!g.components[l].styleOverrides)return null;const S=g.components[l].styleOverrides,A={};return Object.entries(S).forEach(([X,K])=>{A[X]=Z(K,f({},b,{theme:g}))}),h(b,A)}),l&&!v&&_.push(b=>{var g;const S=U(f({},b,{defaultTheme:t,themeId:n})),A=S==null||(g=S.components)==null||(g=g[l])==null?void 0:g.variants;return Z({variants:A},f({},b,{theme:S}))}),x||_.push(a);const I=_.length-w.length;if(Array.isArray(m)&&I>0){const b=new Array(I).fill("");G=[...m,...b],G.raw=[...m.raw,...b]}const V=N(G,..._);return i.muiName&&(V.muiName=i.muiName),V};return N.withConfig&&(E.withConfig=N.withConfig),E}}const dn=pn(),mn=(e,n)=>e.filter(t=>n.includes(t)),L=(e,n,t)=>{const o=e.keys[0];Array.isArray(n)?n.forEach((r,a)=>{t((i,c)=>{a<=e.keys.length-1&&(a===0?Object.assign(i,c):i[e.up(e.keys[a])]=c)},r)}):n&&typeof n=="object"?(Object.keys(n).length>e.keys.length?e.keys:mn(e.keys,Object.keys(n))).forEach(r=>{if(e.keys.indexOf(r)!==-1){const a=n[r];a!==void 0&&t((i,c)=>{o===r?Object.assign(i,c):i[e.up(r)]=c},a)}}):(typeof n=="number"||typeof n=="string")&&t((r,a)=>{Object.assign(r,a)},n)};function $(e){return e?`Level${e}`:""}function F(e){return e.unstable_level>0&&e.container}function ge(e){return function(n){return`var(--Grid-${n}Spacing${$(e.unstable_level)})`}}function le(e){return function(n){return e.unstable_level===0?`var(--Grid-${n}Spacing)`:`var(--Grid-${n}Spacing${$(e.unstable_level-1)})`}}function ce(e){return e.unstable_level===0?"var(--Grid-columns)":`var(--Grid-columns${$(e.unstable_level-1)})`}const fn=({theme:e,ownerState:n})=>{const t=ge(n),o={};return L(e.breakpoints,n.gridSize,(r,a)=>{let i={};a===!0&&(i={flexBasis:0,flexGrow:1,maxWidth:"100%"}),a==="auto"&&(i={flexBasis:"auto",flexGrow:0,flexShrink:0,maxWidth:"none",width:"auto"}),typeof a=="number"&&(i={flexGrow:0,flexBasis:"auto",width:`calc(100% * ${a} / ${ce(n)}${F(n)?` + ${t("column")}`:""})`}),r(o,i)}),o},hn=({theme:e,ownerState:n})=>{const t={};return L(e.breakpoints,n.gridOffset,(o,r)=>{let a={};r==="auto"&&(a={marginLeft:"auto"}),typeof r=="number"&&(a={marginLeft:r===0?"0px":`calc(100% * ${r} / ${ce(n)})`}),o(t,a)}),t},yn=({theme:e,ownerState:n})=>{if(!n.container)return{};const t=F(n)?{[`--Grid-columns${$(n.unstable_level)}`]:ce(n)}:{"--Grid-columns":12};return L(e.breakpoints,n.columns,(o,r)=>{o(t,{[`--Grid-columns${$(n.unstable_level)}`]:r})}),t},xn=({theme:e,ownerState:n})=>{if(!n.container)return{};const t=le(n),o=F(n)?{[`--Grid-rowSpacing${$(n.unstable_level)}`]:t("row")}:{};return L(e.breakpoints,n.rowSpacing,(r,a)=>{var i;r(o,{[`--Grid-rowSpacing${$(n.unstable_level)}`]:typeof a=="string"?a:(i=e.spacing)==null?void 0:i.call(e,a)})}),o},bn=({theme:e,ownerState:n})=>{if(!n.container)return{};const t=le(n),o=F(n)?{[`--Grid-columnSpacing${$(n.unstable_level)}`]:t("column")}:{};return L(e.breakpoints,n.columnSpacing,(r,a)=>{var i;r(o,{[`--Grid-columnSpacing${$(n.unstable_level)}`]:typeof a=="string"?a:(i=e.spacing)==null?void 0:i.call(e,a)})}),o},gn=({theme:e,ownerState:n})=>{if(!n.container)return{};const t={};return L(e.breakpoints,n.direction,(o,r)=>{o(t,{flexDirection:r})}),t},vn=({ownerState:e})=>{const n=ge(e),t=le(e);return f({minWidth:0,boxSizing:"border-box"},e.container&&f({display:"flex",flexWrap:"wrap"},e.wrap&&e.wrap!=="wrap"&&{flexWrap:e.wrap},{margin:`calc(${n("row")} / -2) calc(${n("column")} / -2)`},e.disableEqualOverflow&&{margin:`calc(${n("row")} * -1) 0px 0px calc(${n("column")} * -1)`}),(!e.container||F(e))&&f({padding:`calc(${t("row")} / 2) calc(${t("column")} / 2)`},(e.disableEqualOverflow||e.parentDisableEqualOverflow)&&{padding:`${t("row")} 0px 0px ${t("column")}`}))},wn=e=>{const n=[];return Object.entries(e).forEach(([t,o])=>{o!==!1&&o!==void 0&&n.push(`grid-${t}-${String(o)}`)}),n},On=(e,n="xs")=>{function t(o){return o===void 0?!1:typeof o=="string"&&!Number.isNaN(Number(o))||typeof o=="number"&&o>0}if(t(e))return[`spacing-${n}-${String(e)}`];if(typeof e=="object"&&!Array.isArray(e)){const o=[];return Object.entries(e).forEach(([r,a])=>{t(a)&&o.push(`spacing-${r}-${String(a)}`)}),o}return[]},jn=e=>e===void 0?[]:typeof e=="object"?Object.entries(e).map(([n,t])=>`direction-${n}-${t}`):[`direction-xs-${String(e)}`],kn=["className","children","columns","container","component","direction","wrap","spacing","rowSpacing","columnSpacing","disableEqualOverflow","unstable_level"],Sn=be(),$n=dn("div",{name:"MuiGrid",slot:"Root",overridesResolver:(e,n)=>n.root});function Nn(e){return Xe({props:e,name:"MuiGrid",defaultTheme:Sn})}function _n(e={}){const{createStyledComponent:n=$n,useThemeProps:t=Nn,componentName:o="MuiGrid"}=e,r=D.createContext(void 0),a=(l,u)=>{const{container:d,direction:p,spacing:h,wrap:y,gridSize:v}=l,x={root:["root",d&&"container",y!=="wrap"&&`wrap-xs-${String(y)}`,...jn(p),...wn(v),...d?On(h,u.breakpoints.keys[0]):[]]};return He(x,j=>Je(o,j),{})},i=n(yn,bn,xn,fn,gn,vn,hn),c=D.forwardRef(function(l,u){var d,p,h,y,v,x,j,k;const N=qe(),W=t(l),E=Be(W),m=D.useContext(r),{className:w,children:G,columns:_=12,container:I=!1,component:V="div",direction:b="row",wrap:g="wrap",spacing:S=0,rowSpacing:A=S,columnSpacing:X=S,disableEqualOverflow:K,unstable_level:T=0}=E,Oe=B(E,kn);let M=K;T&&K!==void 0&&(M=l.disableEqualOverflow);const ue={},pe={},de={};Object.entries(Oe).forEach(([O,C])=>{N.breakpoints.values[O]!==void 0?ue[O]=C:N.breakpoints.values[O.replace("Offset","")]!==void 0?pe[O.replace("Offset","")]=C:de[O]=C});const je=(d=l.columns)!=null?d:T?void 0:_,ke=(p=l.spacing)!=null?p:T?void 0:S,Se=(h=(y=l.rowSpacing)!=null?y:l.spacing)!=null?h:T?void 0:A,$e=(v=(x=l.columnSpacing)!=null?x:l.spacing)!=null?v:T?void 0:X,me=f({},E,{level:T,columns:je,container:I,direction:b,wrap:g,spacing:ke,rowSpacing:Se,columnSpacing:$e,gridSize:ue,gridOffset:pe,disableEqualOverflow:(j=(k=M)!=null?k:m)!=null?j:!1,parentDisableEqualOverflow:m}),Ne=a(me,N);let H=s.jsx(i,f({ref:u,as:V,ownerState:me,className:Ue(Ne.root,w)},de,{children:D.Children.map(G,O=>{if(D.isValidElement(O)&&Ze(O,["Grid"])){var C;return D.cloneElement(O,{unstable_level:(C=O.props.unstable_level)!=null?C:T+1})}return O})}));return M!==void 0&&M!==(m??!1)&&(H=s.jsx(r.Provider,{value:M,children:H})),H});return c.muiName="Grid",c}const ve=_n({createStyledComponent:Qe("div",{name:"MuiGrid2",slot:"Root",overridesResolver:(e,n)=>n.root}),componentName:"MuiGrid2",useThemeProps:e=>Ye({props:e,name:"MuiGrid2"})});function Tn({entry:e,payload:n}){const t=J(p=>{var h,y,v;return(v=(y=(h=p.payload)==null?void 0:h.data)==null?void 0:y.reduce)==null?void 0:v.call(y,(x,j)=>x+j.value,0)},[]),o=J(p=>{const h=new ae(t(p)||0),y=n?.reduce((j,k)=>j+t(k),0)||0,v=new ae(y),x=Number(h.div(v).times(100).toFixed(2,ae.ROUND_DOWN));return isNaN(x)||!isFinite(x)?0:x},[t,n]),r=Q(()=>t(e),[e,t]),a=ie(r),i=Q(()=>Number(o(e)),[e,o]),c=ie(i),l=J(p=>Math.floor(p).toLocaleString(),[]),u=We({type:"text/plain"}),d=en();return s.jsxs(Ie,{component:"li",direction:"row",spacing:1,sx:{color:e.color},layout:"position",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},children:[s.jsx(z,{sx:{width:"3px",height:"100%",backgroundColor:e.color,borderRadius:3}}),s.jsxs(P,{children:[s.jsxs(R,{component:"p",variant:"caption",children:[s.jsx(P,{component:"span",display:"inline-flex",mr:.5,children:s.jsx(xe,{from:a??0,to:r,map:l,children:"0"})}),s.jsxs(P,{component:"span",direction:"row",display:"inline-flex",children:["(",s.jsx(xe,{from:c??0,to:i,map:l,children:"0"}),"%)"]})]}),s.jsx(R,{variant:"body1",children:e.value}),e.payload.uuid&&s.jsxs(R,{variant:"body2",sx:{cursor:"pointer","&:hover":{textDecoration:"underline"}},onClick:()=>{u.copy(e.payload.uuid).catch(()=>{}),d.enqueueSnackbar("UUID copied to clipboard","success")},children:[e.payload.uuid.slice(0,5),"..."]})]})]})}function we(e){const{payload:n}=e;return s.jsx(ve,{container:!0,direction:"row",component:"ul",gap:2,sx:{mt:2,justifyContent:"flex-start",alignItem:"center",flexWrap:"wrap"},children:s.jsx(Fe,{children:n?.map(t=>s.jsx(ve,{children:s.jsx(Tn,{entry:t,payload:n})},`item-${t.value}`))})})}function En(e){const n=Y();return s.jsx(z,{sx:{width:"100%",height:"100%",...e.sx},children:s.jsx(ee,{children:s.jsxs(Ee,{width:500,height:300,margin:{top:5,right:60,left:20,bottom:5},children:[s.jsx(ne,{vertical:!1}),s.jsx(te,{dataKey:"date",type:"number",domain:["dataMin","dataMax"],tickFormatter:t=>he(t,{timeZone:e.filter.timezone,hour12:!1,hour:"numeric"}),allowDuplicatedCategory:!1,tickLine:!1,fontSize:12,tickMargin:12}),s.jsx(oe,{textAnchor:"end",dataKey:"value",tickLine:!1,tickFormatter:t=>Number(t).toLocaleString(),allowDecimals:!1,domain:[1,"dataMax"],children:e.label&&s.jsx(Ae,{value:e.label,angle:-90,position:"insideLeft",style:{textAnchor:"middle"}})}),s.jsx(re,{cursor:{stroke:n.palette.neutral.main,strokeWidth:1},formatter:t=>Number(t).toLocaleString(),labelFormatter:t=>ye(t,{timeZone:e.filter.timezone,hour12:!1})}),s.jsx(Ce,{content:s.jsx(we,{})}),e.data.map(t=>_e(De,{uuid:t.uuid,key:t.uuid,name:t.name,dataKey:"value",data:t.chartData,type:"monotone",stroke:t.color,strokeWidth:2}))]})})})}const An=(e,n)=>{const t=new Map;return e.forEach(o=>{o.chartData.forEach(r=>{const a=new Date(r.date).getTime().toString();if(!t.has(a)){const i={date:a,total:0,diff:0,totalKey:"",originalTotal:0};n.forEach(({key:c})=>{i[c]=0,i[`${c}_absolute`]=0}),t.set(a,i)}n.forEach(({key:i})=>{const c=t.get(a),l=r[i],u=typeof l=="string"?l.trim()===""?0:parseInt(l,10):typeof l=="number"?l:0;c[`${i}_absolute`]=u,c[i]=0})})}),Array.from(t.values()).map(o=>{var r;const a=(r=n.find(l=>l.isTotal))==null?void 0:r.key,i=n.filter(l=>!l.isTotal).map(l=>l.key);if(!a||i.length===0)return o;const c=o[`${a}_absolute`];return o.originalTotal=c,o.total=c,o[a]=100,i.forEach(l=>{const u=o[`${l}_absolute`],d=c>0?new q(u.toString()).div(c).mul(100).toFixed(2,q.ROUND_DOWN):"0.00";o[l]=parseFloat(d)}),{...o,totalKey:a}}).sort((o,r)=>parseInt(o.date)-parseInt(r.date))};function Cn(e){const n=Y(),t=Q(()=>e.data?An(e.data,e.keyValues):[],[e.data,e.keyValues]);return s.jsx(z,{sx:{width:"100%",height:"100%",...e.sx},children:s.jsx(ee,{width:"100%",height:"100%",children:s.jsxs(Le,{data:t,width:500,height:300,margin:{top:5,right:60,left:20,bottom:5},children:[s.jsx(ne,{strokeDasharray:"3 3"}),s.jsx(te,{dataKey:"date",type:"number",domain:["dataMin","dataMax"],tickFormatter:o=>he(o,{timeZone:e.filter.timezone,hour12:!1,hour:"numeric"}),allowDuplicatedCategory:!1,tickLine:!1,fontSize:12,tickMargin:12}),s.jsx(oe,{textAnchor:"end",tickLine:!1,tickFormatter:o=>`${o.toFixed(2)}%`}),s.jsx(re,{cursor:{stroke:n.palette.neutral.main,strokeWidth:1},labelFormatter:o=>ye(o,{timeZone:e.filter.timezone,hour12:!1}),formatter:(o,r,a)=>{const i=a.payload.totalKey,c=a.dataKey,l=c===i,u=a.payload[`${c}_absolute`],d=a.payload.originalTotal,p=l?null:d===0?"0.00":new q(u.toString()).div(d).mul(100).toFixed(2,q.ROUND_DOWN);return[p?`${u.toLocaleString()} (${p}%)`:`${u.toLocaleString()} (TOTAL)`,r]}}),e.keyValues.sort((o,r)=>o.isTotal?-1:r.isTotal?1:0).map(o=>s.jsx(Ge,{type:"monotone",dataKey:o.key,name:o.name,stroke:o.color,fill:o.color,strokeWidth:2,fillOpacity:.6},o.key))]})})})}function Dn(e){const n=ie(e.value),{ref:t}=nn({from:n??0,to:e.value,duration:1,map:e.map});return s.jsx(Te,{sx:{p:3,flex:1,...e.sx},children:s.jsxs(P,{spacing:1,alignItems:"center",children:[s.jsx(R,{ref:t,variant:"h4",fontWeight:"bold",children:e.initialValue}),s.jsx(R,{color:"text.secondary",children:e.label})]})})}const Ln={margin:{top:5,right:30,left:20,bottom:5}},Gn={tickLine:!1,fontSize:12,tickMargin:12},Mn={textAnchor:"end",tickLine:!1};function Rn({data:e,series:n,xAxis:t,yAxis:o,tooltip:r,bar:a,referenceLines:i,sx:c}){const l=Y(),u=p=>!p.isFront,d=p=>!!p.isFront;return s.jsx(z,{sx:{width:"100%",height:"100%",...c},children:s.jsx(ee,{children:s.jsxs(Me,{data:e,...Ln,children:[s.jsx(ne,{strokeDasharray:"3 3",vertical:!1}),s.jsx(te,{...Gn,...t}),s.jsx(oe,{...Mn,...o}),s.jsx(re,{cursor:{stroke:l.palette.neutral.main,strokeWidth:1},...r}),i?.filter(u).map((p,h)=>s.jsx(fe,{...p},h)),n.map(p=>s.jsx(Re,{name:p.key,dataKey:p.dataKey,fill:p.color,stackId:"stack",isAnimationActive:!1,...a},p.key)),i?.filter(d).map((p,h)=>s.jsx(fe,{...p},h))]})})})}export{Dn as BigNumber,En as SeriesChart,we as SeriesChartLegend,Cn as SeriesPercentageChart,Rn as SimpleBarChart};
+"use strict";import{j as a}from"../../shared/jsx-runtime-jmtevAuS.mjs";import*as P from"react";import{useCallback as ee,useMemo as te,createElement as Ie,useState as q,useRef as Pe,useEffect as he}from"react";import{Box as z,Stack as U,Typography as W,useTheme as V,Paper as ze}from"@mui/material";import{ResponsiveContainer as J,LineChart as Ve,CartesianGrid as ne,XAxis as oe,YAxis as re,Label as xe,Tooltip as ae,Legend as ye,Line as Ge,AreaChart as Ke,Area as We,ComposedChart as Be,ReferenceLine as ge,ReferenceArea as ve,Bar as qe,Sector as be,PieChart as Ue,Pie as Je,Cell as Ze}from"recharts";import{b as we,c as je}from"../../shared/date-Cq0LS2Mr.mjs";import Z,{Decimal as ie}from"decimal.js";import{AnimatePresence as He}from"framer-motion";import{u as Xe}from"../../shared/useCopyToClipboard-BALOSYVW.mjs";import"qrcode";import{u as se}from"../../shared/usePrevious-DyvR1iCQ.mjs";import{a as Ye,C as Oe}from"../../shared/motions-CpxgbzKX.mjs";import{i as Qe,_ as H,s as et,a as k,c as Se,d as tt,e as nt,f as ot,h as rt,j as at,k as it,l as st,m as lt,n as ct,o as ut,p as dt,u as pt}from"../../shared/index-CDq4CkLc.mjs";import{u as mt}from"../../shared/useCounter-BV32zXDQ.mjs";const ft=["ownerState"],ht=["variants"],xt=["name","slot","skipVariantsResolver","skipSx","overridesResolver"];function yt(e){return Object.keys(e).length===0}function gt(e){return typeof e=="string"&&e.charCodeAt(0)>96}function le(e){return e!=="ownerState"&&e!=="theme"&&e!=="sx"&&e!=="as"}const vt=Se(),bt=e=>e&&e.charAt(0).toLowerCase()+e.slice(1);function X({defaultTheme:e,theme:t,themeId:n}){return yt(t)?e:t[n]||t}function wt(e){return e?(t,n)=>n[e]:null}function Y(e,t){let{ownerState:n}=t,o=H(t,ft);const r=typeof e=="function"?e(k({ownerState:n},o)):e;if(Array.isArray(r))return r.flatMap(s=>Y(s,k({ownerState:n},o)));if(r&&typeof r=="object"&&Array.isArray(r.variants)){const{variants:s=[]}=r;let i=H(r,ht);return s.forEach(c=>{let l=!0;typeof c.props=="function"?l=c.props(k({ownerState:n},o,n)):Object.keys(c.props).forEach(d=>{n?.[d]!==c.props[d]&&o[d]!==c.props[d]&&(l=!1)}),l&&(Array.isArray(i)||(i=[i]),i.push(typeof c.style=="function"?c.style(k({ownerState:n},o,n)):c.style))}),i}return r}function jt(e={}){const{themeId:t,defaultTheme:n=vt,rootShouldForwardProp:o=le,slotShouldForwardProp:r=le}=e,s=i=>tt(k({},i,{theme:X(k({},i,{defaultTheme:n,themeId:t}))}));return s.__mui_systemSx=!0,(i,c={})=>{Qe(i,m=>m.filter(S=>!(S!=null&&S.__mui_systemSx)));const{name:l,slot:d,skipVariantsResolver:f,skipSx:h,overridesResolver:u=wt(bt(d))}=c,w=H(c,xt),j=f!==void 0?f:d&&d!=="Root"&&d!=="root"||!1,b=h||!1;let O,x=le;d==="Root"||d==="root"?x=o:d?x=r:gt(i)&&(x=void 0);const v=et(i,k({shouldForwardProp:x,label:O},w)),T=m=>typeof m=="function"&&m.__emotion_real!==m||nt(m)?S=>Y(m,k({},S,{theme:X({theme:S.theme,defaultTheme:n,themeId:t})})):m,N=(m,...S)=>{let R=T(m);const $=S?S.map(T):[];l&&u&&$.push(y=>{const g=X(k({},y,{defaultTheme:n,themeId:t}));if(!g.components||!g.components[l]||!g.components[l].styleOverrides)return null;const E=g.components[l].styleOverrides,A={};return Object.entries(E).forEach(([_,L])=>{A[_]=Y(L,k({},y,{theme:g}))}),u(y,A)}),l&&!j&&$.push(y=>{var g;const E=X(k({},y,{defaultTheme:n,themeId:t})),A=E==null||(g=E.components)==null||(g=g[l])==null?void 0:g.variants;return Y({variants:A},k({},y,{theme:E}))}),b||$.push(s);const C=$.length-S.length;if(Array.isArray(m)&&C>0){const y=new Array(C).fill("");R=[...m,...y],R.raw=[...m.raw,...y]}const p=v(R,...$);return i.muiName&&(p.muiName=i.muiName),p};return v.withConfig&&(N.withConfig=v.withConfig),N}}const Ot=jt(),St=(e,t)=>e.filter(n=>t.includes(n)),G=(e,t,n)=>{const o=e.keys[0];Array.isArray(t)?t.forEach((r,s)=>{n((i,c)=>{s<=e.keys.length-1&&(s===0?Object.assign(i,c):i[e.up(e.keys[s])]=c)},r)}):t&&typeof t=="object"?(Object.keys(t).length>e.keys.length?e.keys:St(e.keys,Object.keys(t))).forEach(r=>{if(e.keys.indexOf(r)!==-1){const s=t[r];s!==void 0&&n((i,c)=>{o===r?Object.assign(i,c):i[e.up(r)]=c},s)}}):(typeof t=="number"||typeof t=="string")&&n((r,s)=>{Object.assign(r,s)},t)};function F(e){return e?`Level${e}`:""}function B(e){return e.unstable_level>0&&e.container}function ke(e){return function(t){return`var(--Grid-${t}Spacing${F(e.unstable_level)})`}}function ce(e){return function(t){return e.unstable_level===0?`var(--Grid-${t}Spacing)`:`var(--Grid-${t}Spacing${F(e.unstable_level-1)})`}}function ue(e){return e.unstable_level===0?"var(--Grid-columns)":`var(--Grid-columns${F(e.unstable_level-1)})`}const kt=({theme:e,ownerState:t})=>{const n=ke(t),o={};return G(e.breakpoints,t.gridSize,(r,s)=>{let i={};s===!0&&(i={flexBasis:0,flexGrow:1,maxWidth:"100%"}),s==="auto"&&(i={flexBasis:"auto",flexGrow:0,flexShrink:0,maxWidth:"none",width:"auto"}),typeof s=="number"&&(i={flexGrow:0,flexBasis:"auto",width:`calc(100% * ${s} / ${ue(t)}${B(t)?` + ${n("column")}`:""})`}),r(o,i)}),o},$t=({theme:e,ownerState:t})=>{const n={};return G(e.breakpoints,t.gridOffset,(o,r)=>{let s={};r==="auto"&&(s={marginLeft:"auto"}),typeof r=="number"&&(s={marginLeft:r===0?"0px":`calc(100% * ${r} / ${ue(t)})`}),o(n,s)}),n},Tt=({theme:e,ownerState:t})=>{if(!t.container)return{};const n=B(t)?{[`--Grid-columns${F(t.unstable_level)}`]:ue(t)}:{"--Grid-columns":12};return G(e.breakpoints,t.columns,(o,r)=>{o(n,{[`--Grid-columns${F(t.unstable_level)}`]:r})}),n},Nt=({theme:e,ownerState:t})=>{if(!t.container)return{};const n=ce(t),o=B(t)?{[`--Grid-rowSpacing${F(t.unstable_level)}`]:n("row")}:{};return G(e.breakpoints,t.rowSpacing,(r,s)=>{var i;r(o,{[`--Grid-rowSpacing${F(t.unstable_level)}`]:typeof s=="string"?s:(i=e.spacing)==null?void 0:i.call(e,s)})}),o},Rt=({theme:e,ownerState:t})=>{if(!t.container)return{};const n=ce(t),o=B(t)?{[`--Grid-columnSpacing${F(t.unstable_level)}`]:n("column")}:{};return G(e.breakpoints,t.columnSpacing,(r,s)=>{var i;r(o,{[`--Grid-columnSpacing${F(t.unstable_level)}`]:typeof s=="string"?s:(i=e.spacing)==null?void 0:i.call(e,s)})}),o},At=({theme:e,ownerState:t})=>{if(!t.container)return{};const n={};return G(e.breakpoints,t.direction,(o,r)=>{o(n,{flexDirection:r})}),n},Ct=({ownerState:e})=>{const t=ke(e),n=ce(e);return k({minWidth:0,boxSizing:"border-box"},e.container&&k({display:"flex",flexWrap:"wrap"},e.wrap&&e.wrap!=="wrap"&&{flexWrap:e.wrap},{margin:`calc(${t("row")} / -2) calc(${t("column")} / -2)`},e.disableEqualOverflow&&{margin:`calc(${t("row")} * -1) 0px 0px calc(${t("column")} * -1)`}),(!e.container||B(e))&&k({padding:`calc(${n("row")} / 2) calc(${n("column")} / 2)`},(e.disableEqualOverflow||e.parentDisableEqualOverflow)&&{padding:`${n("row")} 0px 0px ${n("column")}`}))},Et=e=>{const t=[];return Object.entries(e).forEach(([n,o])=>{o!==!1&&o!==void 0&&t.push(`grid-${n}-${String(o)}`)}),t},_t=(e,t="xs")=>{function n(o){return o===void 0?!1:typeof o=="string"&&!Number.isNaN(Number(o))||typeof o=="number"&&o>0}if(n(e))return[`spacing-${t}-${String(e)}`];if(typeof e=="object"&&!Array.isArray(e)){const o=[];return Object.entries(e).forEach(([r,s])=>{n(s)&&o.push(`spacing-${r}-${String(s)}`)}),o}return[]},Dt=e=>e===void 0?[]:typeof e=="object"?Object.entries(e).map(([t,n])=>`direction-${t}-${n}`):[`direction-xs-${String(e)}`],Lt=["className","children","columns","container","component","direction","wrap","spacing","rowSpacing","columnSpacing","disableEqualOverflow","unstable_level"],Mt=Se(),Ft=Ot("div",{name:"MuiGrid",slot:"Root",overridesResolver:(e,t)=>t.root});function It(e){return st({props:e,name:"MuiGrid",defaultTheme:Mt})}function Pt(e={}){const{createStyledComponent:t=Ft,useThemeProps:n=It,componentName:o="MuiGrid"}=e,r=P.createContext(void 0),s=(l,d)=>{const{container:f,direction:h,spacing:u,wrap:w,gridSize:j}=l,b={root:["root",f&&"container",w!=="wrap"&&`wrap-xs-${String(w)}`,...Dt(h),...Et(j),...f?_t(u,d.breakpoints.keys[0]):[]]};return lt(b,O=>ct(o,O),{})},i=t(Tt,Rt,Nt,kt,At,Ct,$t),c=P.forwardRef(function(l,d){var f,h,u,w,j,b,O,x;const v=ot(),T=n(l),N=rt(T),m=P.useContext(r),{className:S,children:R,columns:$=12,container:C=!1,component:p="div",direction:y="row",wrap:g="wrap",spacing:E=0,rowSpacing:A=E,columnSpacing:_=E,disableEqualOverflow:L,unstable_level:M=0}=N,Ee=H(N,Lt);let K=L;M&&L!==void 0&&(K=l.disableEqualOverflow);const de={},pe={},me={};Object.entries(Ee).forEach(([D,I])=>{v.breakpoints.values[D]!==void 0?de[D]=I:v.breakpoints.values[D.replace("Offset","")]!==void 0?pe[D.replace("Offset","")]=I:me[D]=I});const _e=(f=l.columns)!=null?f:M?void 0:$,De=(h=l.spacing)!=null?h:M?void 0:E,Le=(u=(w=l.rowSpacing)!=null?w:l.spacing)!=null?u:M?void 0:A,Me=(j=(b=l.columnSpacing)!=null?b:l.spacing)!=null?j:M?void 0:_,fe=k({},N,{level:M,columns:_e,container:C,direction:y,wrap:g,spacing:De,rowSpacing:Le,columnSpacing:Me,gridSize:de,gridOffset:pe,disableEqualOverflow:(O=(x=K)!=null?x:m)!=null?O:!1,parentDisableEqualOverflow:m}),Fe=s(fe,v);let Q=a.jsx(i,k({ref:d,as:p,ownerState:fe,className:at(Fe.root,S)},me,{children:P.Children.map(R,D=>{if(P.isValidElement(D)&&it(D,["Grid"])){var I;return P.cloneElement(D,{unstable_level:(I=D.props.unstable_level)!=null?I:M+1})}return D})}));return K!==void 0&&K!==(m??!1)&&(Q=a.jsx(r.Provider,{value:K,children:Q})),Q});return c.muiName="Grid",c}const $e=Pt({createStyledComponent:ut("div",{name:"MuiGrid2",slot:"Root",overridesResolver:(e,t)=>t.root}),componentName:"MuiGrid2",useThemeProps:e=>dt({props:e,name:"MuiGrid2"})});function zt({entry:e,payload:t}){const n=ee(h=>{var u,w,j;return(j=(w=(u=h.payload)==null?void 0:u.data)==null?void 0:w.reduce)==null?void 0:j.call(w,(b,O)=>b+O.value,0)},[]),o=ee(h=>{const u=new ie(n(h)||0),w=t?.reduce((O,x)=>O+n(x),0)||0,j=new ie(w),b=Number(u.div(j).times(100).toFixed(2,ie.ROUND_DOWN));return isNaN(b)||!isFinite(b)?0:b},[n,t]),r=te(()=>n(e),[e,n]),s=se(r),i=te(()=>Number(o(e)),[e,o]),c=se(i),l=ee(h=>Math.floor(h).toLocaleString(),[]),d=Xe({type:"text/plain"}),f=pt();return a.jsxs(Ye,{component:"li",direction:"row",spacing:1,sx:{color:e.color},layout:"position",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},children:[a.jsx(z,{sx:{width:"3px",height:"100%",backgroundColor:e.color,borderRadius:3}}),a.jsxs(U,{children:[a.jsxs(W,{component:"p",variant:"caption",children:[a.jsx(U,{component:"span",display:"inline-flex",mr:.5,children:a.jsx(Oe,{from:s??0,to:r,map:l,children:"0"})}),a.jsxs(U,{component:"span",direction:"row",display:"inline-flex",children:["(",a.jsx(Oe,{from:c??0,to:i,map:l,children:"0"}),"%)"]})]}),a.jsx(W,{variant:"body1",children:e.value}),e.payload.uuid&&a.jsxs(W,{variant:"body2",sx:{cursor:"pointer","&:hover":{textDecoration:"underline"}},onClick:()=>{d.copy(e.payload.uuid).catch(()=>{}),f.enqueueSnackbar("UUID copied to clipboard","success")},children:[e.payload.uuid.slice(0,5),"..."]})]})]})}function Te(e){const{payload:t}=e;return a.jsx($e,{container:!0,direction:"row",component:"ul",gap:2,sx:{mt:2,justifyContent:"flex-start",alignItem:"center",flexWrap:"wrap"},children:a.jsx(He,{children:t?.map(n=>a.jsx($e,{children:a.jsx(zt,{entry:n,payload:t})},`item-${n.value}`))})})}function Vt(e){const t=V();return a.jsx(z,{sx:{width:"100%",height:"100%",...e.sx},children:a.jsx(J,{children:a.jsxs(Ve,{width:500,height:300,margin:{top:5,right:60,left:20,bottom:5},children:[a.jsx(ne,{vertical:!1}),a.jsx(oe,{dataKey:"date",type:"number",domain:["dataMin","dataMax"],tickFormatter:n=>we(n,{timeZone:e.filter.timezone,hour12:!1,hour:"numeric"}),allowDuplicatedCategory:!1,tickLine:!1,fontSize:12,tickMargin:12}),a.jsx(re,{textAnchor:"end",dataKey:"value",tickLine:!1,tickFormatter:n=>Number(n).toLocaleString(),allowDecimals:!1,domain:[1,"dataMax"],children:e.label&&a.jsx(xe,{value:e.label,angle:-90,position:"insideLeft",style:{textAnchor:"middle"}})}),a.jsx(ae,{cursor:{stroke:t.palette.neutral.main,strokeWidth:1},formatter:n=>Number(n).toLocaleString(),labelFormatter:n=>je(n,{timeZone:e.filter.timezone,hour12:!1})}),a.jsx(ye,{content:a.jsx(Te,{})}),e.data.map(n=>Ie(Ge,{uuid:n.uuid,key:n.uuid,name:n.name,dataKey:"value",data:n.chartData,type:"monotone",stroke:n.color,strokeWidth:2}))]})})})}const Gt=(e,t)=>{const n=new Map;return e.forEach(o=>{o.chartData.forEach(r=>{const s=new Date(r.date).getTime().toString();if(!n.has(s)){const i={date:s,total:0,diff:0,totalKey:"",originalTotal:0};t.forEach(({key:c})=>{i[c]=0,i[`${c}_absolute`]=0}),n.set(s,i)}t.forEach(({key:i})=>{const c=n.get(s),l=r[i],d=typeof l=="string"?l.trim()===""?0:parseInt(l,10):typeof l=="number"?l:0;c[`${i}_absolute`]=d,c[i]=0})})}),Array.from(n.values()).map(o=>{var r;const s=(r=t.find(l=>l.isTotal))==null?void 0:r.key,i=t.filter(l=>!l.isTotal).map(l=>l.key);if(!s||i.length===0)return o;const c=o[`${s}_absolute`];return o.originalTotal=c,o.total=c,o[s]=100,i.forEach(l=>{const d=o[`${l}_absolute`],f=c>0?new Z(d.toString()).div(c).mul(100).toFixed(2,Z.ROUND_DOWN):"0.00";o[l]=parseFloat(f)}),{...o,totalKey:s}}).sort((o,r)=>parseInt(o.date)-parseInt(r.date))};function Kt(e){const t=V(),n=te(()=>e.data?Gt(e.data,e.keyValues):[],[e.data,e.keyValues]);return a.jsx(z,{sx:{width:"100%",height:"100%",...e.sx},children:a.jsx(J,{width:"100%",height:"100%",children:a.jsxs(Ke,{data:n,width:500,height:300,margin:{top:5,right:60,left:20,bottom:5},children:[a.jsx(ne,{strokeDasharray:"3 3"}),a.jsx(oe,{dataKey:"date",type:"number",domain:["dataMin","dataMax"],tickFormatter:o=>we(o,{timeZone:e.filter.timezone,hour12:!1,hour:"numeric"}),allowDuplicatedCategory:!1,tickLine:!1,fontSize:12,tickMargin:12}),a.jsx(re,{textAnchor:"end",tickLine:!1,tickFormatter:o=>`${o.toFixed(2)}%`}),a.jsx(ae,{cursor:{stroke:t.palette.neutral.main,strokeWidth:1},labelFormatter:o=>je(o,{timeZone:e.filter.timezone,hour12:!1}),formatter:(o,r,s)=>{const i=s.payload.totalKey,c=s.dataKey,l=c===i,d=s.payload[`${c}_absolute`],f=s.payload.originalTotal,h=l?null:f===0?"0.00":new Z(d.toString()).div(f).mul(100).toFixed(2,Z.ROUND_DOWN);return[h?`${d.toLocaleString()} (${h}%)`:`${d.toLocaleString()} (TOTAL)`,r]}}),e.keyValues.sort((o,r)=>o.isTotal?-1:r.isTotal?1:0).map(o=>a.jsx(We,{type:"monotone",dataKey:o.key,name:o.name,stroke:o.color,fill:o.color,strokeWidth:2,fillOpacity:.6},o.key))]})})})}function Wt(e){const t=se(e.value),{ref:n}=mt({from:t??0,to:e.value,duration:1,map:e.map});return a.jsx(ze,{sx:{p:3,flex:1,...e.sx},children:a.jsxs(U,{spacing:1,alignItems:"center",children:[a.jsx(W,{ref:n,variant:"h4",fontWeight:"bold",children:e.initialValue}),a.jsx(W,{color:"text.secondary",children:e.label})]})})}const Ne={margin:{top:5,right:30,left:20,bottom:5}},Bt={tickLine:!1,fontSize:12,tickMargin:12},qt={textAnchor:"end",tickLine:!1};function Re({data:e,series:t,xAxis:n,yAxis:o,tooltip:r,bar:s,referenceLines:i,referenceAreas:c,sx:l}){const d=V(),f=u=>!u.isFront,h=u=>!!u.isFront;return a.jsx(z,{sx:{width:"100%",height:"100%",...l},children:a.jsx(J,{children:a.jsxs(Be,{data:e,...Ne,children:[a.jsx(ne,{strokeDasharray:"3 3",vertical:!1}),a.jsx(oe,{...Bt,...n}),a.jsx(re,{...qt,...o}),a.jsx(ae,{cursor:{stroke:d.palette.neutral.main,strokeWidth:1},...r}),i?.filter(f).map(u=>a.jsx(ge,{...u},JSON.stringify(u))),c?.filter(f).map(u=>a.jsx(ve,{...u},JSON.stringify(u))),t.map(u=>a.jsx(qe,{name:u.key,dataKey:u.dataKey,fill:u.color,stackId:"stack",isAnimationActive:!1,...s},u.key)),i?.filter(h).map(u=>a.jsx(ge,{...u},JSON.stringify(u))),c?.filter(h).map(u=>a.jsx(ve,{...u},JSON.stringify(u)))]})})})}function Ut({data:e,sx:t}){const n=V(),o=Object.entries(e??{}).map(([s,i])=>({key:s,[s]:i})),r=o.map(({key:s})=>({key:s,dataKey:s,color:n.palette.error.light}));return a.jsx(Re,{sx:t,data:o,series:r,xAxis:{tickLine:!1,dataKey:"key"},yAxis:{tickLine:!1,domain:[0,"dataMax + 100"]},tooltip:{labelFormatter:s=>"Total"},referenceLines:[{y:100,stroke:n.palette.error.dark,strokeDasharray:"3 3",label:a.jsx(xe,{value:"Unhealthy threshold",position:"insideBottomRight"}),isFront:!0}]})}function Ae({payload:e=[],hiddenItems:t,onToggle:n,legendLabel:o}){return a.jsx(z,{sx:{display:"flex",justifyContent:"center",gap:"20px",paddingTop:"20px"},children:e.map((r,s)=>{const i=t.has(r.payload.name);return a.jsxs("div",{style:{display:"flex",alignItems:"center",cursor:"pointer",opacity:i?.4:1},onClick:()=>{n?.(r.payload)},children:[a.jsx("div",{style:{width:"12px",height:"12px",backgroundColor:r.color,marginRight:"8px",borderRadius:"2px"}}),a.jsx("span",{style:{color:r.color},children:o?`${o}: ${r.value}`:r.value})]},`legend-${s}`)})})}const Jt=e=>{const t=Math.PI/180,{cx:n,cy:o,midAngle:r,innerRadius:s,outerRadius:i,startAngle:c,endAngle:l,fill:d,payload:f,percent:h,value:u,valueText:w,valuePercentage:j,needleVisible:b,customText:O}=e,x=Math.sin(-t*r),v=Math.cos(-t*r),T=n+(i+5)*v,N=o+(i+5)*x,m=n+(i+15)*v,S=o+(i+15)*x,R=m+(v>=0?1:-1)*15,$=S,C=v>=0?"start":"end",p=u.toLocaleString(void 0,{minimumFractionDigits:0,maximumFractionDigits:0});return a.jsxs("g",{children:[!b&&a.jsx("text",{x:n,y:o,dy:8,textAnchor:"middle",fill:"#333",fontSize:14,children:f.name}),a.jsx(be,{cx:n,cy:o,innerRadius:s,outerRadius:i,startAngle:c,endAngle:l,fill:d}),a.jsx(be,{cx:n,cy:o,startAngle:c,endAngle:l,innerRadius:i+2,outerRadius:i+6,fill:d}),a.jsx("path",{d:`M${T},${N}L${m},${S}L${R},${$}`,stroke:d,fill:"none"}),a.jsx("circle",{cx:R,cy:$,r:2,fill:d,stroke:"none"}),a.jsx("text",{x:R+(v>=0?1:-1)*8,y:$,textAnchor:C,fill:"#333",fontSize:12,children:O||(w?`${w} ${p}`:p)}),j&&a.jsxs("text",{x:R+(v>=0?1:-1)*8,y:$,dy:16,textAnchor:C,fill:"#999",fontSize:11,children:[`${(h*100).toFixed(2)}%`," (",p,")"]})]})},Zt=e=>{const{value:t,data:n,color:o,innerRadius:r,outerRadius:s,boxDimensions:i,legendDimensions:c,valueText:l}=e,d=Math.PI/180;let f=0;n.forEach(g=>{f+=g.value});const h=i?i.width/2:150,u=(i?i.height/2:200)-c.height/2,w=180*(1-Math.max(0,Math.min(1,t/f))),j=(Number(r)+2*Number(s))/3,b=Math.sin(-d*w),O=Math.cos(-d*w),x=5,v=h-x,T=u,N=v+x*b,m=T-x*O,S=v-x*b,R=T+x*O,$=v+j*O,C=T+j*b,p=t.toLocaleString(void 0,{minimumFractionDigits:0,maximumFractionDigits:0}),y=l??p;return a.jsxs(a.Fragment,{children:[a.jsx("circle",{cx:v,cy:T,r:x,fill:o,stroke:"none",style:{pointerEvents:"none"}},"needle-circle"),a.jsx("path",{d:`M${N} ${m}L${S} ${R} L${$} ${C} L${N} ${m}`,stroke:"none",fill:o,style:{pointerEvents:"none"}},"needle-path"),a.jsx("text",{x:v+x,y:T+26,textAnchor:"middle",fill:"#333",fontSize:12,children:y},"needle-value")]})},Ht=(e,t)=>({Allow:t.palette.success.main,Flag:t.palette.warning.main,Block:t.palette.error.main})[e]??t.palette.primary.main;function Ce({data:e,sx:t,legendLabel:n,legendToggle:o=!1,valueText:r="",valuePercentage:s=!0,pie:i,needleVisible:c=!1,needleValue:l,needleColor:d="#aaa"}){const{innerRadius:f=60,outerRadius:h=100}=i??{},u=V(),[w,j]=q(),[b,O]=q(new Set),x=Pe(null),[v,T]=q(null),[N,m]=q(null),S=(p,y)=>{j(y)},R=()=>{j(void 0)},$=p=>{o&&p&&O(y=>{const g=new Set(y);return g.has(p.name)?g.delete(p.name):g.size<e.length-1&&g.add(p.name),g})},C=e.map(p=>({...p,value:b.has(p.name)?0:p.value}));return he(()=>{const p=x.current;if(!p)return;const y=new ResizeObserver(E=>{var A;const _=(A=E[0])==null?void 0:A.contentRect;_&&T(_)});y.observe(p);const g=p.getBoundingClientRect();return T(g),()=>{y.disconnect()}},[]),he(()=>{var p;const y=(p=x.current)==null?void 0:p.querySelector(".recharts-legend-wrapper");if(!y){const A=setInterval(()=>{var _;const L=(_=x.current)==null?void 0:_.querySelector(".recharts-legend-wrapper");if(L){const M=L.getBoundingClientRect();m(M),clearInterval(A)}},100);return()=>{clearInterval(A)}}const g=new ResizeObserver(A=>{var _;const L=(_=A[0])==null?void 0:_.contentRect;L&&m(L)});g.observe(y);const E=y.getBoundingClientRect();return m(E),()=>{g.disconnect()}},[]),a.jsx(z,{ref:x,sx:{width:"100%",height:"100%","& g":{outline:"none"},...t},children:a.jsx(J,{children:a.jsxs(Ue,{...Ne,children:[a.jsx(Je,{data:C,nameKey:"name",dataKey:"value",innerRadius:f,outerRadius:h,activeIndex:w,activeShape:p=>Jt({...p,valueText:r,valuePercentage:s,needleVisible:c}),paddingAngle:0,onMouseEnter:S,onMouseLeave:R,...i,children:C.map(p=>a.jsx(Ze,{fill:p.color??Ht(p.name,u),opacity:b.has(p.name)?.5:1,stroke:"none"},p.name))}),a.jsx(ye,{content:a.jsx(Ae,{legendLabel:n,hiddenItems:b,onToggle:$})}),c&&l!==void 0&&v&&N&&Zt({data:C,value:l,color:d,innerRadius:f,outerRadius:h,boxDimensions:v,legendDimensions:N,valueText:r})]})})})}function Xt({sx:e,data:t,score:n=200,legendLabel:o}){const r=V(),s=[{name:"Allow",customText:"0-299",value:t[0].value,color:r.palette.primary.main},{name:"Flag",customText:"300-599",value:t[1].value,color:r.palette.warning.main},{name:"Block",customText:"Over 600",value:t[2].value,color:r.palette.error.main}];return a.jsx(Ce,{data:s,legendToggle:!0,needleValue:n,legendLabel:o,sx:e})}export{Wt as BigNumber,Ut as ErrorCodesChart,Ce as PieChart,Xt as RiskScorePieChart,Vt as SeriesChart,Te as SeriesChartLegend,Kt as SeriesPercentageChart,Re as SimpleBarChart,Ae as SimpleLegend};

package/package.json

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