@verifiedinc-public/shared-ui-elements 11.0.0 → 11.0.1
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.
|
@@ -29,6 +29,18 @@ export interface ConversionOverTimeChartView {
|
|
|
29
29
|
/** Stacking mode for this view. Defaults to the top-level `stackMode`. */
|
|
30
30
|
stackMode?: 'stack' | 'none';
|
|
31
31
|
}
|
|
32
|
+
/**
|
|
33
|
+
* Auxiliary boolean toggle rendered to the left of the built-in
|
|
34
|
+
* Numbers / Percentages group. Consumer owns the selected state so the toggle
|
|
35
|
+
* can drive consumer-side data or rendering decisions.
|
|
36
|
+
*/
|
|
37
|
+
export interface ConversionOverTimeChartToggle {
|
|
38
|
+
id: string;
|
|
39
|
+
label: string;
|
|
40
|
+
selected: boolean;
|
|
41
|
+
onChange: (selected: boolean) => void;
|
|
42
|
+
ariaLabel?: string;
|
|
43
|
+
}
|
|
32
44
|
export interface ConversionOverTimeChartLegendBrand {
|
|
33
45
|
uuid: string;
|
|
34
46
|
value: string;
|
|
@@ -70,5 +82,10 @@ export interface ConversionOverTimeChartProps {
|
|
|
70
82
|
views?: ConversionOverTimeChartView[];
|
|
71
83
|
/** Key of the initially selected view. Defaults to the first view. */
|
|
72
84
|
defaultViewKey?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Optional auxiliary toggles rendered left of the Numbers / Percentages
|
|
87
|
+
* group. Each toggle is independent and controlled by the consumer.
|
|
88
|
+
*/
|
|
89
|
+
extraToggles?: ConversionOverTimeChartToggle[];
|
|
73
90
|
}
|
|
74
|
-
export declare function ConversionOverTimeChart({ data, series, chartData, seriesConfig, stackMode: stackModeProp, isLoading, isFetching, isSuccess, filter, sx, legendBrand, showLegendUuid, views, defaultViewKey, }: Readonly<ConversionOverTimeChartProps>): React.ReactNode;
|
|
91
|
+
export declare function ConversionOverTimeChart({ data, series, chartData, seriesConfig, stackMode: stackModeProp, isLoading, isFetching, isSuccess, filter, sx, legendBrand, showLegendUuid, views, defaultViewKey, extraToggles, }: Readonly<ConversionOverTimeChartProps>): React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useState as
|
|
1
|
+
"use strict";import{useState as V}from"react";import{Stack as D,Box as H,ToggleButton as T,ToggleButtonGroup as J}from"@mui/material";import{EmptyChartSection as E}from"../EmptyChartSection.mjs";import{LoadingChartSection as U}from"../LoadingChartSection.mjs";import{AreaChart as Q}from"../AreaChart/index.mjs";import{SeriesPercentageChartLegend as R}from"../SeriesPercentageChartLegend/index.mjs";import{useStyle as X}from"../styles.mjs";import{formatExtendedDate as q,formatDateMMYY as ee}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as ae}from"../../form/TimezoneInput/timezones.mjs";import{jsx as o,jsxs as k}from"react/jsx-runtime";function te({brands:g,data:v,seriesConfig:m}){const c=new Map,p=g?new Set(g.map(t=>t._raw.brandUuid)):null;for(const t of v)if(!(p&&!p.has(t.brandUuid)))for(const l of t.interval??[]){const f=+new Date(l.date);let r=c.get(f);if(!r){r={date:f};for(const s of m)r[s.dataKey]=0;c.set(f,r)}for(const s of m)r[s.dataKey]=r[s.dataKey]+Number(l[s.dataKey]||0)}return{series:m,data:Array.from(c.values()).sort((t,l)=>t.date-l.date)}}function re({data:g,series:v,chartData:m,seriesConfig:c,stackMode:p="stack",isLoading:t,isFetching:l,isSuccess:f,filter:r,sx:s,legendBrand:i,showLegendUuid:B=!0,views:C,defaultViewKey:j,extraToggles:K}){var N;const w=X(),M=r.timezone??ae,h=C??[{key:"absolute",label:"Numbers",mode:"absolute"},{key:"percent",label:"Percentages",mode:"percent"}],[S,z]=V(j??((N=h[0])==null?void 0:N.key)??"absolute"),a=h.find(e=>e.key===S)??h[0],b=a?.mode??"absolute",x=a?.stackMode??p,F=a?.chartData??m,$=a?.seriesConfig??c,O=a?.data??g,P=a?.series??v,n=F!==void 0?t?{series:[],data:[]}:te({brands:r.brands,data:F,seriesConfig:$??[]}):{series:P??[],data:O??[]},L=!n.data.length||!f,A=!n.data.length&&t;if(!C){if(A)return o(U,{});if(L)return o(E,{})}const W=x==="none"&&b==="percent"?n.data.map(e=>{const u=Math.max(0,...n.series.map(d=>Number(e[d.dataKey])||0)),y={date:e.date};for(const d of n.series)y[d.dataKey]=u===0?0:(Number(e[d.dataKey])||0)/u;return y}):null,Y=x==="stack"?b==="absolute"?"stack":"expand":"none",Z=b==="absolute"?{tickFormatter:e=>Number(e).toLocaleString(),allowDecimals:!1}:{tickFormatter:e=>`${(e*100).toFixed(0)}%`,domain:[0,1]},_=b==="absolute"?e=>Number(e).toLocaleString():x==="stack"?(e,u,y)=>{const d=n.series.reduce((G,I)=>G+(Number(y.payload[I.dataKey])||0),0);return d===0?"0.0%":`${(Number(e)/d*100).toFixed(1)}%`}:e=>`${(Number(e)*100).toFixed(1)}%`;return k(D,{children:[k(H,{sx:{display:"flex",flexDirection:"column",gap:1,height:w.regularChartWrapper.height},children:[k(D,{direction:"row",spacing:1,justifyContent:"flex-end",children:[K?.map(e=>o(T,{value:e.id,selected:e.selected,onChange:()=>e.onChange(!e.selected),size:"small","aria-label":e.ariaLabel??e.label,"aria-pressed":e.selected,children:e.label},e.id)),o(J,{value:S,exclusive:!0,onChange:(e,u)=>{u!==null&&z(u)},size:"small",children:h.map(e=>o(T,{value:e.key,children:e.label},e.key))})]}),A?o(U,{}):L?o(E,{}):o(Q,{data:W??n.data,series:n.series,stackMode:Y,isAnimationActive:!0,xAxis:{dataKey:"date",type:"number",domain:["dataMin","dataMax"],tickFormatter:e=>ee(e,{timeZone:M,hour12:!1,hour:"numeric"}),allowDuplicatedCategory:!1},yAxis:Z,tooltip:{formatter:_,labelFormatter:e=>q(e,{timeZone:M,hour12:!1})},sx:{...w.regularChartWrapper,height:"unset",flex:1,minHeight:0,opacity:l?.4:1,...s}})]}),i&&o(R,{payload:[{uuid:i.uuid,value:i.value,color:i.color,dataKey:i.dataKey??i.uuid,brandName:i.brandName,integrationType:i.integrationType}],showUuid:B})]})}export{re as ConversionOverTimeChart};
|