@verifiedinc-public/shared-ui-elements 3.18.2-beta.6 → 3.18.2-beta.7

package/dist/components/chart/index.mjs

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

package/dist/components/chart/monthly-billable-signups/MonthlyBillableSignupsTable.d.ts

@@ -1,44 +1,13 @@
 import { default as React } from 'react';
+export type BillableSignupData = {
+    month: string;
+    brand: string;
+    integrationType: string;
+    total: number;
+    finished: number;
+    totalCost: string;
+};
 export type MonthlyBillableSignupsTableProps = {
-    data?: Array<{
-        month: string;
-        brand: string;
-        integrationType: string;
-        total: number;
-        finished: number;
-        totalCost: string;
-    }>;
-    isLoading: boolean;
-    isFetching: boolean;
-    isSuccess: boolean;
-    selectedBrands: Array<{
-        label: string;
-        value: string;
-    }>;
-    onBrandChange: (brands: Array<{
-        label: string;
-        value: string;
-    }>) => void;
-    onRefresh: () => void;
-    LoadingComponent: React.ComponentType;
-    EmptyStateComponent: React.ComponentType;
-    LastUpdatedComponent: React.ComponentType;
-    ContentLoaderComponent: React.ComponentType<{
-        isLoading: boolean;
-        children: React.ReactNode;
-    }>;
-    RefreshIconComponent: React.ComponentType;
-    BrandFilterComponent: React.ComponentType<{
-        label: string;
-        multiple: boolean;
-        value: Array<{
-            label: string;
-            value: string;
-        }>;
-        onChange: (value: Array<{
-            label: string;
-            value: string;
-        }>) => void;
-    }>;
+    data: BillableSignupData[];
 };
 export declare const MonthlyBillableSignupsTable: React.FC<MonthlyBillableSignupsTableProps>;

package/package.json

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