@verifiedinc-public/shared-ui-elements 8.22.0 → 8.22.1

package/dist/components/chart/SynchronizedMetricsChart/SynchronizedMetricsChart.mjs

@@ -1 +1 @@
-"use strict";import{useState as C,useMemo as c,useCallback as w}from"react";import{Stack as g,useTheme as L,Typography as M}from"@mui/material";import{ResponsiveContainer as N,AreaChart as E,CartesianGrid as O,XAxis as B,YAxis as P,Tooltip as I,Area as Y}from"recharts";import{formatDateMMYY as Z,formatExtendedDate as j}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as K}from"../../form/TimezoneInput/timezones.mjs";import{EmptyChartSection as W}from"../EmptyChartSection.mjs";import{LoadingChartSection as $}from"../LoadingChartSection.mjs";import{SimpleLegend as G}from"../SimpleLegend/index.mjs";import{chartDefaultProps as R,xAxisDefaultProps as U,yAxisDefaultProps as X}from"../shared.mjs";import{jsx as t,jsxs as x}from"react/jsx-runtime";const _="synchronized-metrics",H=200;function y(a){const i=new Map;for(const r of a)for(const s of r.chartData){let n=i.get(s.date);n||(n={date:s.date},i.set(s.date,n)),n[r.uuid]=s.value}return Array.from(i.values()).sort((r,s)=>r.date-s.date)}function D({title:a,mergedData:i,brands:r,hiddenBrands:s,timezone:n,tooltipFormatter:l,yAxisTickFormatter:u,yAxisDomain:h}){const m=L(),p=r.filter(e=>!s.has(e.uuid));return x(g,{children:[t(M,{variant:"subtitle2",sx:{mb:.5},children:a}),t(N,{width:"100%",height:H,children:x(E,{data:i,syncId:_,margin:R.margin,children:[t(O,{vertical:!1}),t(B,{dataKey:"date",tickFormatter:e=>Z(e,{timeZone:n,hour12:!1,hour:"numeric"}),...U}),t(P,{tickFormatter:u??(e=>Number(e).toLocaleString()),allowDecimals:!1,domain:h,...X}),t(I,{cursor:{stroke:m.palette.neutral.main,strokeWidth:1},formatter:l??(e=>Number(e).toLocaleString()),labelFormatter:e=>j(e,{timeZone:n,hour12:!1}),itemSorter:e=>-Number(e?.value??0)}),p.map(e=>t(Y,{dataKey:e.uuid,name:e.name,stroke:e.color,fill:e.color,fillOpacity:.1,type:"monotone",strokeWidth:2,isAnimationActive:!1},e.uuid))]})})]})}function q({startedData:a,succeededData:i,percentageData:r,isLoading:s,isSuccess:n,isFetching:l,filter:u,sx:h}){const[m,p]=C(new Set),e=u.timezone??K,S=!a.length&&!i.length&&!r.length,v=c(()=>y(a),[a]),F=c(()=>y(i),[i]),T=c(()=>y(r),[r]),A=a.length,k=w(o=>{p(d=>{const b=d.has(o.name);if(!b&&A-d.size<=1)return d;const f=new Set(d);return b?f.delete(o.name):f.add(o.name),f})},[A]),z=c(()=>a.map(o=>({value:o.name,color:o.color,payload:{name:o.uuid}})),[a]);return S&&s?t($,{}):S||!n?t(W,{}):t(g,{sx:{width:"100%",...h},children:x(g,{sx:{opacity:l?.4:1,gap:2},children:[t(D,{title:"Started Over Time",mergedData:v,brands:a,hiddenBrands:m,timezone:e}),t(D,{title:"Succeeded Over Time",mergedData:F,brands:i,hiddenBrands:m,timezone:e}),t(D,{title:"Success Percentage Over Time",mergedData:T,brands:r,hiddenBrands:m,timezone:e,tooltipFormatter:o=>`${Number(o).toFixed(1)}%`,yAxisTickFormatter:o=>`${Number(o).toFixed(0)}%`,yAxisDomain:["auto","auto"]}),t(G,{payload:z,hiddenItems:m,onToggle:k})]})})}export{q as SynchronizedMetricsChart};
+"use strict";import{useMemo as m}from"react";import{Stack as u,useTheme as b,Typography as v}from"@mui/material";import{ResponsiveContainer as S,AreaChart as F,CartesianGrid as T,XAxis as k,YAxis as z,Tooltip as C,Area as L}from"recharts";import{formatDateMMYY as M,formatExtendedDate as N}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as E}from"../../form/TimezoneInput/timezones.mjs";import{EmptyChartSection as O}from"../EmptyChartSection.mjs";import{LoadingChartSection as P}from"../LoadingChartSection.mjs";import{SeriesPercentageChartLegend as w}from"../SeriesPercentageChartLegend/index.mjs";import{chartDefaultProps as K,xAxisDefaultProps as Y,yAxisDefaultProps as Z}from"../shared.mjs";import{jsx as e,jsxs as p}from"react/jsx-runtime";const I="synchronized-metrics",j=200;function h(o){const i=new Map;for(const a of o)for(const r of a.chartData){let n=i.get(r.date);n||(n={date:r.date},i.set(r.date,n)),n[a.uuid]=r.value}return Array.from(i.values()).sort((a,r)=>a.date-r.date)}function f({title:o,mergedData:i,brands:a,timezone:r,tooltipFormatter:n,yAxisTickFormatter:d,yAxisDomain:c}){const l=b();return p(u,{children:[e(v,{variant:"subtitle2",sx:{mb:.5},children:o}),e(S,{width:"100%",height:j,children:p(F,{data:i,syncId:I,margin:K.margin,children:[e(T,{vertical:!1}),e(k,{dataKey:"date",tickFormatter:t=>M(t,{timeZone:r,hour12:!1,hour:"numeric"}),...Y}),e(z,{tickFormatter:d??(t=>Number(t).toLocaleString()),allowDecimals:!1,domain:c,...Z}),e(C,{cursor:{stroke:l.palette.neutral.main,strokeWidth:1},formatter:n??(t=>Number(t).toLocaleString()),labelFormatter:t=>N(t,{timeZone:r,hour12:!1}),itemSorter:t=>-Number(t?.value??0)}),a.map(t=>e(L,{dataKey:t.uuid,name:t.name,stroke:t.color,fill:t.color,fillOpacity:.1,type:"monotone",strokeWidth:2,isAnimationActive:!1},t.uuid))]})})]})}function W({startedData:o,succeededData:i,percentageData:a,isLoading:r,isSuccess:n,isFetching:d,filter:c,sx:l}){const t=c.timezone??E,g=!o.length&&!i.length&&!a.length,y=m(()=>h(o),[o]),x=m(()=>h(i),[i]),D=m(()=>h(a),[a]),A=m(()=>o.map(s=>({uuid:s.uuid,value:s.name,color:s.color,dataKey:s.uuid,integrationType:s.description})),[o]);return g&&r?e(P,{}):g||!n?e(O,{}):e(u,{sx:{width:"100%",...l},children:p(u,{sx:{opacity:d?.4:1,gap:2},children:[e(f,{title:"Started Over Time",mergedData:y,brands:o,timezone:t}),e(f,{title:"Succeeded Over Time",mergedData:x,brands:i,timezone:t}),e(f,{title:"Success Percentage Over Time",mergedData:D,brands:a,timezone:t,tooltipFormatter:s=>`${Number(s).toFixed(1)}%`,yAxisTickFormatter:s=>`${Number(s).toFixed(0)}%`,yAxisDomain:["auto","auto"]}),e(w,{payload:A})]})})}export{W as SynchronizedMetricsChart};

package/package.json

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