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