@verifiedinc-public/shared-ui-elements 9.1.5 → 9.2.0

package/dist/components/chart/BillableEventsProductTable/BillableEventsProductTable.mjs

@@ -1 +1 @@
-"use strict";import{TableContainer as u,Paper as x,Table as C,TableHead as k,TableRow as h,TableCell as i,TableBody as B,TableSortLabel as L}from"@mui/material";import{useMemo as m}from"react";import{EmptyChartSection as S}from"../EmptyChartSection.mjs";import{LoadingChartSection as v}from"../LoadingChartSection.mjs";import{BILLABLE_PRODUCTS as D}from"../BillableEventsTable/BillableEventsTable.types.mjs";import{useBillableSort as E}from"../BillableEventsTable/useBillableSort.hook.mjs";import{white as P}from"../../../styles/colors.mjs";import{jsx as a,jsxs as l}from"react/jsx-runtime";const w=["brand","integrationType"],I=({data:r,isLoading:p,isFetching:b,product:s})=>{const{sortKey:d,sortDir:g,handleSort:T,sortedData:y}=E(r,w,"brand"),t=m(()=>D.find(e=>e.product===s),[s]),c=m(()=>t?.columns??[],[t]),n=(e,o,f="left")=>a(L,{active:d===e,direction:d===e?g:"asc",onClick:()=>T(e),sx:f==="right"?{flexDirection:"row"}:void 0,children:o});return!(r!=null&&r.length)&&p?a(v,{}):r!=null&&r.length?a(u,{component:x,sx:{opacity:b?.4:1},children:l(C,{sx:{backgroundColor:P},children:[a(k,{children:l(h,{children:[a(i,{children:n("brand","Brand")}),a(i,{children:n("integrationType","Integration Type")}),c.map(e=>a(i,{align:"right",children:n(e.key,e.label,"right")},e.key))]})}),a(B,{children:y.map(e=>l(h,{children:[a(i,{children:e.brand}),a(i,{children:e.integrationType}),c.map(o=>a(i,{align:"right",children:e.metrics[o.key]??0},o.key))]},e.brandUuid))})]})}):a(S,{})};export{I as BillableEventsProductTable};
+"use strict";import{TableContainer as k,Paper as C,Table as x,TableHead as B,TableRow as h,TableCell as t,TableBody as L,TableSortLabel as S}from"@mui/material";import{useMemo as p}from"react";import{EmptyChartSection as v}from"../EmptyChartSection.mjs";import{LoadingChartSection as D}from"../LoadingChartSection.mjs";import{BILLABLE_PRODUCTS as E}from"../BillableEventsTable/BillableEventsTable.types.mjs";import{useBillableSort as P}from"../BillableEventsTable/useBillableSort.hook.mjs";import{white as j}from"../../../styles/colors.mjs";import{jsx as a,jsxs as s}from"react/jsx-runtime";const w=["brand","integrationType"],I=({data:i,isLoading:b,isFetching:g,product:d,columnSlots:l})=>{const{sortKey:c,sortDir:u,handleSort:y,sortedData:T}=P(i,w,"brand"),n=p(()=>E.find(e=>e.product===d),[d]),m=p(()=>n?.columns??[],[n]),o=(e,r,f="left")=>a(S,{active:c===e,direction:c===e?u:"asc",onClick:()=>y(e),sx:f==="right"?{flexDirection:"row"}:void 0,children:r});return!(i!=null&&i.length)&&b?a(D,{}):i!=null&&i.length?a(k,{component:C,sx:{opacity:g?.4:1},children:s(x,{sx:{backgroundColor:j},children:[a(B,{children:s(h,{children:[a(t,{children:o("brand","Brand")}),a(t,{children:o("integrationType","Integration Type")}),m.map(e=>a(t,{align:"right",children:o(e.key,e.label,"right")},e.key))]})}),a(L,{children:T.map(e=>s(h,{children:[a(t,{children:e.brand}),a(t,{children:e.integrationType}),m.map(r=>a(t,{align:"right",children:l!=null&&l[r.key]?l[r.key](e):e.metrics[r.key]??0},r.key))]},e.brandUuid))})]})}):a(v,{})};export{I as BillableEventsProductTable};

package/dist/components/chart/BillableEventsProductTable/BillableEventsProductTableDataMapper.d.ts

@@ -4,7 +4,7 @@ type Brand = {
     brandName: string;
     integrationType: string;
 };
-type ChartData = {
+export type ChartData = {
     brandUuid: string;
     brandName: string;
     interval?: Array<Record<string, number | string>>;

package/dist/components/chart/BillableEventsProductTable/BillableEventsProductTableDataMapper.mjs

@@ -1 +1 @@
-"use strict";import{BILLABLE_PRODUCTS as f}from"../BillableEventsTable/BillableEventsTable.types.mjs";import{formatIntegrationType as b}from"../BillableEventsTable/BillableEventsTableDataMapper.mjs";const m=({product:s,data:c,brands:u})=>{const d=f.find(r=>r.product===s);if(!d)return[];const n=new Map;for(const r of c){const t=u.find(e=>e.brandUuid===r.brandUuid);if(!t||!r.interval)continue;const o=n.get(r.brandUuid),a=o?.metrics??{};for(const e of r.interval)for(const i of d.columns)a[i.key]=(a[i.key]??0)+(Number(e[i.metricKey])||0);o||n.set(r.brandUuid,{brandUuid:r.brandUuid,brand:t.brandName,integrationType:b(t.integrationType),metrics:a})}return Array.from(n.values())};export{m as mapBillableEventsProductTableData};
+"use strict";import{BILLABLE_PRODUCTS as f}from"../BillableEventsTable/BillableEventsTable.types.mjs";import{formatIntegrationType as b}from"../BillableEventsTable/BillableEventsTableDataMapper.mjs";const m=({product:s,data:c,brands:u})=>{const d=f.find(r=>r.product===s);if(!d)return[];const n=new Map;for(const r of c){const t=u.find(e=>e.brandUuid===r.brandUuid);if(!t||!r.interval)continue;const a=n.get(r.brandUuid),o=a?.metrics??{};for(const e of r.interval)for(const i of d.columns)o[i.key]=(o[i.key]??0)+(Number(e[i.metricKey])||0);a||n.set(r.brandUuid,{brandUuid:r.brandUuid,brand:t.brandName,integrationType:b(t.integrationType),metrics:o,raw:r})}return Array.from(n.values())};export{m as mapBillableEventsProductTableData};

package/dist/components/chart/BillableEventsTable/BillableEventsTable.mjs

@@ -1 +1 @@
-"use strict";import{TableContainer as S,Paper as x,Table as B,TableHead as C,TableRow as d,TableCell as r,TableBody as k,TableSortLabel as L}from"@mui/material";import{useEffect as v,useMemo as b}from"react";import{EmptyChartSection as w}from"../EmptyChartSection.mjs";import{LoadingChartSection as D}from"../LoadingChartSection.mjs";import{BillableProduct as E,BILLABLE_PRODUCTS as P}from"./BillableEventsTable.types.mjs";import{useBillableSort as j}from"./useBillableSort.hook.mjs";import{white as I}from"../../../styles/colors.mjs";import{jsx as a,jsxs as i}from"react/jsx-runtime";const R=["brand","integrationType"],K=({data:n,isLoading:g,isFetching:u,visibleProducts:h,onSortedDataChange:o})=>{const{sortKey:m,sortDir:f,handleSort:T,sortedData:l}=j(n,R,"brand");v(()=>{o?.(l)},[l,o]);const s=b(()=>{const e=h??Object.values(E);return P.filter(t=>e.includes(t.product))},[h]),p=b(()=>s.flatMap(e=>e.columns),[s]),c=(e,t,y="left")=>a(L,{active:m===e,direction:m===e?f:"asc",onClick:()=>T(e),sx:y==="right"?{flexDirection:"row"}:void 0,children:t});return!(n!=null&&n.length)&&g?a(D,{}):n!=null&&n.length?a(S,{component:x,sx:{opacity:u?.4:1},children:i(B,{sx:{backgroundColor:I},children:[i(C,{children:[i(d,{children:[a(r,{rowSpan:2,children:c("brand","Brand")}),a(r,{rowSpan:2,children:c("integrationType","Integration Type")}),s.map(e=>a(r,{colSpan:e.columns.length,align:"center",sx:{fontWeight:"bold",borderBottom:"none"},children:e.label},e.product))]}),a(d,{children:p.map(e=>a(r,{align:"right",children:c(e.key,e.label,"right")},e.key))})]}),a(k,{children:l.map(e=>i(d,{children:[a(r,{children:e.brand}),a(r,{children:e.integrationType}),p.map(t=>a(r,{align:"right",children:e.metrics[t.key]??0},t.key))]},e.brandUuid))})]})}):a(w,{})};export{K as BillableEventsTable};
+"use strict";import{TableContainer as k,Paper as B,Table as C,TableHead as x,TableRow as m,TableCell as l,TableBody as L,TableSortLabel as v}from"@mui/material";import{useEffect as D,useMemo as u}from"react";import{EmptyChartSection as w}from"../EmptyChartSection.mjs";import{LoadingChartSection as E}from"../LoadingChartSection.mjs";import{BillableProduct as P,BILLABLE_PRODUCTS as j}from"./BillableEventsTable.types.mjs";import{useBillableSort as I}from"./useBillableSort.hook.mjs";import{white as M}from"../../../styles/colors.mjs";import{jsx as a,jsxs as t}from"react/jsx-runtime";const O=["brand","integrationType"],R=({data:n,isLoading:g,isFetching:f,visibleProducts:h,onSortedDataChange:o,columnSlots:i})=>{const{sortKey:p,sortDir:y,handleSort:T,sortedData:s}=I(n,O,"brand");D(()=>{o?.(s)},[s,o]);const c=u(()=>{const r=h??Object.values(P);return j.filter(e=>r.includes(e.product))},[h]),b=u(()=>c.flatMap(r=>r.columns),[c]),d=(r,e,S="left")=>a(v,{active:p===r,direction:p===r?y:"asc",onClick:()=>T(r),sx:S==="right"?{flexDirection:"row"}:void 0,children:e});return!(n!=null&&n.length)&&g?a(E,{}):n!=null&&n.length?a(k,{component:B,sx:{opacity:f?.4:1},children:t(C,{sx:{backgroundColor:M},children:[t(x,{children:[t(m,{children:[a(l,{rowSpan:2,children:d("brand","Brand")}),a(l,{rowSpan:2,children:d("integrationType","Integration Type")}),c.map(r=>a(l,{colSpan:r.columns.length,align:"center",sx:{fontWeight:"bold",borderBottom:"none"},children:r.label},r.product))]}),a(m,{children:b.map(r=>a(l,{align:"right",children:d(r.key,r.label,"right")},r.key))})]}),a(L,{children:s.map(r=>t(m,{children:[a(l,{children:r.brand}),a(l,{children:r.integrationType}),b.map(e=>a(l,{align:"right",children:i!=null&&i[e.key]?i[e.key](r):r.metrics[e.key]??0},e.key))]},r.brandUuid))})]})}):a(w,{})};export{R as BillableEventsTable};

package/dist/components/chart/BillableEventsTable/BillableEventsTable.types.d.ts

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
+import { ChartData } from '../BillableEventsProductTable';
 export declare enum BillableProduct {
     TEXT_TO_SIGNUP = "TEXT_TO_SIGNUP",
     ONE_CLICK_VERIFY = "ONE_CLICK_VERIFY",
@@ -20,6 +22,7 @@ export type BillableEventsTableRow = {
     brand: string;
     integrationType: string;
     metrics: Record<string, number>;
+    raw: ChartData;
 };
 export type BillableEventsTableProps = {
     data: BillableEventsTableRow[];
@@ -27,10 +30,12 @@ export type BillableEventsTableProps = {
     isFetching: boolean;
     visibleProducts?: BillableProduct[];
     onSortedDataChange?: (sortedData: BillableEventsTableRow[]) => void;
+    columnSlots?: Record<string, (row: BillableEventsTableRow) => React.ReactNode>;
 };
 export type BillableEventsProductTableProps = {
     data: BillableEventsTableRow[];
     isLoading: boolean;
     isFetching: boolean;
     product: BillableProduct;
+    columnSlots?: Record<string, (row: BillableEventsTableRow) => React.ReactNode>;
 };

package/dist/components/chart/BillableEventsTable/BillableEventsTableDataMapper.mjs

@@ -1 +1 @@
-"use strict";import{BILLABLE_PRODUCTS as b}from"./BillableEventsTable.types.mjs";const y={hosted:"SDK","non-hosted":"API","semi-hosted":"Semi-Hosted",sdk:"SDK",api:"API"};function u(n){return n?y[n.toLowerCase()]??n:""}const g=({productDataSets:n,brands:l})=>{var i;const d=new Map,c=new Set;for(const{product:t,data:r}of n){const o=b.find(e=>e.product===t);if(o)for(const e of r){if(!((i=e.interval)!=null&&i.length))continue;const s=d.get(e.brandUuid)??{};for(const a of o.columns){const f=e.interval.reduce((m,p)=>m+(Number(p[a.metricKey])||0),0);s[a.key]=(s[a.key]??0)+f}o.columns.some(a=>(s[a.key]??0)>0)&&c.add(e.brandUuid),d.set(e.brandUuid,s)}}return Array.from(c).map(t=>{const r=l.find(o=>o.brandUuid===t);return r?{brandUuid:t,brand:r.brandName,integrationType:u(r.integrationType),metrics:d.get(t)??{}}:null}).filter(t=>t!==null)};export{u as formatIntegrationType,g as mapBillableEventsTableData};
+"use strict";import{BILLABLE_PRODUCTS as b}from"./BillableEventsTable.types.mjs";const y={hosted:"SDK","non-hosted":"API","semi-hosted":"Semi-Hosted",sdk:"SDK",api:"API"};function u(r){return r?y[r.toLowerCase()]??r:""}const g=({productDataSets:r,brands:f})=>{var c;const s=new Map,i=new Map;for(const{product:e,data:d}of r){const t=b.find(n=>n.product===e);if(t)for(const n of d){if(!((c=n.interval)!=null&&c.length))continue;const o=s.get(n.brandUuid)??{};for(const a of t.columns){const l=n.interval.reduce((m,p)=>m+(Number(p[a.metricKey])||0),0);o[a.key]=(o[a.key]??0)+l}t.columns.some(a=>(o[a.key]??0)>0)&&!i.has(n.brandUuid)&&i.set(n.brandUuid,n),s.set(n.brandUuid,o)}}return Array.from(i.entries()).map(([e,d])=>{const t=f.find(n=>n.brandUuid===e);return t?{brandUuid:e,brand:t.brandName,integrationType:u(t.integrationType),metrics:s.get(e)??{},raw:d}:null}).filter(e=>e!==null)};export{u as formatIntegrationType,g as mapBillableEventsTableData};

package/package.json

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