@verifiedinc-public/shared-ui-elements 12.4.0 → 12.4.1-beta.0

package/dist/components/chart/AreaChart/index.d.ts

@@ -7,6 +7,16 @@ export interface AreaSeriesChartData {
     dataKey: string;
     color?: string;
 }
+/**
+ * A straight best-fit line drawn over the areas. Recharts' `AreaChart` accepts
+ * only `Area` children, which is why this renders a `ComposedChart`.
+ */
+export interface AreaTrendLine {
+    /** Column holding the fitted values. Must not collide with a series dataKey. */
+    dataKey: string;
+    color?: string;
+    name?: string;
+}
 interface AreaChartProps {
     /**
      * Chart data points. Each object should include the x-axis key and one key per series.
@@ -28,6 +38,8 @@ interface AreaChartProps {
     tooltip?: ComponentProps<typeof Tooltip>;
     /** Override props applied to every Area element in the chart. */
     area?: ComponentProps<typeof Area>;
+    /** Straight best-fit overlays, drawn above the areas. */
+    trendLines?: AreaTrendLine[];
     /** Reference lines to highlight specific values or thresholds. */
     referenceLines?: Array<ComponentProps<typeof ReferenceLine>>;
     /** Shaded reference areas to highlight specific ranges. */
@@ -40,5 +52,5 @@ interface AreaChartProps {
     /** Stack mode for areas. 'none' renders independent areas; 'stack' stacks by count; 'expand' normalizes to 100%. @default 'none' */
     stackMode?: 'none' | 'stack' | 'expand';
 }
-export declare function AreaChart({ data, series, color, xAxis, yAxis, tooltip, area, referenceLines, referenceAreas, sx, isAnimationActive, areaType, stackMode, }: AreaChartProps): ReactElement;
+export declare function AreaChart({ data, series, color, xAxis, yAxis, tooltip, area, trendLines, referenceLines, referenceAreas, sx, isAnimationActive, areaType, stackMode, }: Readonly<AreaChartProps>): ReactElement;
 export {};

package/dist/components/chart/AreaChart/index.mjs

@@ -1 +1 @@
-"use strict";import{useTheme as C,Box as D}from"@mui/material";import{ResponsiveContainer as O,AreaChart as g,CartesianGrid as P,XAxis as R,YAxis as T,Tooltip as $,ReferenceLine as b,ReferenceArea as j,Area as G}from"recharts";import{chartDefaultProps as K,xAxisDefaultProps as W,yAxisDefaultProps as I}from"../shared.mjs";import{jsx as a,jsxs as d}from"react/jsx-runtime";function L({data:f,series:i,color:m,xAxis:x,yAxis:A,tooltip:h,area:y,referenceLines:n,referenceAreas:l,sx:u,isAnimationActive:k=!1,areaType:v="monotone",stackMode:o="none"}){const p=C(),c=m??p.palette.primary.main;return a(D,{sx:{width:"100%",height:"100%",...u},children:a(O,{children:d(g,{data:f,stackOffset:o==="expand"?"expand":void 0,...K,children:[a("defs",{children:i.map((e,r)=>{const s=`gradient-${r}`,t=e.color??c;return d("linearGradient",{id:s,x1:"0",y1:"0",x2:"0",y2:"1",children:[a("stop",{offset:"5%",stopColor:t,stopOpacity:.2}),a("stop",{offset:"95%",stopColor:t,stopOpacity:0})]},s)})}),a(P,{strokeDasharray:"3 3",vertical:!1}),a(R,{...W,...x}),a(T,{...I,...A}),a($,{cursor:{stroke:p.palette.neutral.main,strokeWidth:1},...h}),n?.map((e,r)=>a(b,{...e},e.label??r)),l?.map((e,r)=>a(j,{...e},e.label??r)),i.map((e,r)=>{const s=`gradient-${r}`,t=e.color??c;return a(G,{name:e.key,dataKey:e.dataKey,fill:`url(#${s})`,fillOpacity:o!=="none"?1:.6,stroke:t,strokeWidth:2,type:v,isAnimationActive:k,stackId:o!=="none"?"stack":void 0,...y},e.key)})]})})})}export{L as AreaChart};
+"use strict";import{useTheme as D,Box as K}from"@mui/material";import{ResponsiveContainer as g,ComposedChart as O,CartesianGrid as T,XAxis as $,YAxis as L,Tooltip as P,ReferenceLine as R,ReferenceArea as W,Area as b,Line as j}from"recharts";import{chartDefaultProps as G,xAxisDefaultProps as w,yAxisDefaultProps as B}from"../shared.mjs";import{jsx as a,jsxs as y}from"react/jsx-runtime";function I({data:f,series:n,color:x,xAxis:h,yAxis:A,tooltip:k,area:u,trendLines:l,referenceLines:d,referenceAreas:p,sx:v,isAnimationActive:c=!1,areaType:C="monotone",stackMode:s="none"}){const m=D(),i=x??m.palette.primary.main;return a(K,{sx:{width:"100%",height:"100%",...v},children:a(g,{children:y(O,{data:f,stackOffset:s==="expand"?"expand":void 0,...G,children:[a("defs",{children:n.map((e,r)=>{const t=`gradient-${r}`,o=e.color??i;return y("linearGradient",{id:t,x1:"0",y1:"0",x2:"0",y2:"1",children:[a("stop",{offset:"5%",stopColor:o,stopOpacity:.2}),a("stop",{offset:"95%",stopColor:o,stopOpacity:0})]},t)})}),a(T,{strokeDasharray:"3 3",vertical:!1}),a($,{...w,...h}),a(L,{...B,...A}),a(P,{cursor:{stroke:m.palette.neutral.main,strokeWidth:1},...k}),d?.map((e,r)=>a(R,{...e},e.label??r)),p?.map((e,r)=>a(W,{...e},e.label??r)),n.map((e,r)=>{const t=`gradient-${r}`,o=e.color??i;return a(b,{name:e.key,dataKey:e.dataKey,fill:`url(#${t})`,fillOpacity:s!=="none"?1:.6,stroke:o,strokeWidth:2,type:C,isAnimationActive:c,stackId:s!=="none"?"stack":void 0,...u},e.key)}),l?.map(e=>a(j,{dataKey:e.dataKey,name:e.name??e.dataKey,stroke:e.color??i,strokeWidth:2,strokeDasharray:"7 5",type:"linear",dot:!1,activeDot:!1,isAnimationActive:c,legendType:"none"},`trend-${e.dataKey}`))]})})})}export{I as AreaChart};

package/dist/components/chart/ConversionOverTimeChart/ConversionOverTimeChart.tooltip.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { MetricsIntervalType } from '../../../constants/metrics';
+export interface TrendReadout {
+    /** Series label the fit belongs to. */
+    name: string;
+    color?: string;
+    /** Change per interval bucket, already in display units. */
+    slope: number;
+    stepMs: number;
+}
+interface PayloadEntry {
+    dataKey?: string | number;
+    name?: string | number;
+    value?: number | string;
+    color?: string;
+    payload?: Record<string, unknown>;
+}
+interface ConversionChartTooltipProps {
+    /** Keys of the fitted columns, excluded from the value rows. */
+    trendDataKeys: string[];
+    /** One entry per fitted series; empty when the trend is off. */
+    trends: TrendReadout[];
+    interval?: MetricsIntervalType;
+    unit: 'count' | 'percent';
+    sortByValueDesc: boolean;
+    valueFormatter: (value: number | string, name: string | number, entry: PayloadEntry) => string;
+    labelFormatter: (label: number) => string;
+    /** Injected by Recharts. */
+    active?: boolean;
+    payload?: PayloadEntry[];
+    label?: number;
+}
+/**
+ * Tooltip for the funnel charts. Mirrors the stock Recharts layout so nothing
+ * shifts visually, then adds one slope row per fitted stage underneath.
+ */
+export declare function ConversionChartTooltip({ trendDataKeys, trends, interval, unit, sortByValueDesc, valueFormatter, labelFormatter, active, payload, label, }: Readonly<ConversionChartTooltipProps>): React.ReactNode;
+export {};

package/dist/components/chart/ConversionOverTimeChart/ConversionOverTimeChart.tooltip.mjs

@@ -0,0 +1 @@
+"use strict";import{Box as s,Typography as e,Stack as v}from"@mui/material";import{formatSlope as y}from"../trend.mjs";import{jsxs as i,jsx as t}from"react/jsx-runtime";const o={fontSize:"0.875rem",lineHeight:1.5};function S({trendDataKeys:d,trends:a,interval:p,unit:m,sortByValueDesc:c,valueFormatter:u,labelFormatter:h,active:b,payload:n,label:x}){if(!b||!(n!=null&&n.length))return null;const l=n.filter(r=>r.dataKey!=null&&!d.includes(String(r.dataKey))),g=c?[...l].sort((r,f)=>Number(f.value??0)-Number(r.value??0)):l;return i(s,{sx:{bgcolor:"background.paper",border:"1px solid",borderColor:"divider",borderRadius:1,boxShadow:3,px:1.5,py:1.25,maxWidth:360},children:[t(e,{sx:{...o,fontWeight:700,mb:.5},children:h(Number(x))}),g.map(r=>i(e,{sx:{...o,color:r.color??"inherit"},children:[String(r.name??r.dataKey)," :"," ",u(r.value??0,r.name??"",r)]},String(r.dataKey))),a.length>0&&t(s,{sx:{mt:.75,pt:.75,borderTop:"1px solid",borderColor:"divider"},children:a.map(r=>i(v,{direction:"row",spacing:2,sx:{justifyContent:"space-between"},children:[t(e,{sx:{...o,fontWeight:700},children:a.length>1?`Trend (${r.name})`:"Trend"}),t(e,{sx:{...o,fontWeight:700},children:y(r.slope,{unit:m,interval:p,stepMs:r.stepMs})})]},r.name))})]})}export{S as ConversionChartTooltip};

package/dist/components/chart/ConversionOverTimeChart/index.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { SxProps } from '@mui/material';
 import { AreaSeriesChartData } from '../AreaChart';
+import { MetricsIntervalType } from '../../../constants/metrics';
 import { BrandFilter } from '../../BrandFilterInput';
 export type { AreaSeriesChartData } from '../AreaChart';
 type ViewMode = 'absolute' | 'percent';
@@ -79,6 +80,11 @@ export interface ConversionOverTimeChartProps {
     filter: {
         timezone?: string;
         brands?: BrandFilter[];
+        /**
+         * The selected bucket size. The trend readout reports its slope per this
+         * interval; when omitted it is named from the spacing in the data.
+         */
+        interval?: MetricsIntervalType;
     };
     sx?: SxProps;
     stackMode?: 'stack' | 'none';

package/dist/components/chart/ConversionOverTimeChart/index.mjs

@@ -1 +1 @@
-"use strict";import{useState as R}from"react";import{Stack as L,Box as X,ToggleButton as A,ToggleButtonGroup as ee}from"@mui/material";import{EmptyChartSection as B}from"../EmptyChartSection.mjs";import{LoadingChartSection as T}from"../LoadingChartSection.mjs";import{AreaChart as ae}from"../AreaChart/index.mjs";import{SeriesPercentageChartLegend as te}from"../SeriesPercentageChartLegend/index.mjs";import{useStyle as re}from"../styles.mjs";import{formatExtendedDate as oe,formatDateMMYY as ie}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as se}from"../../form/TimezoneInput/timezones.mjs";import{jsx as s,jsxs as v}from"react/jsx-runtime";function E(p,n,l){return p.map(o=>{const d=l==="sum"?n.reduce((t,u)=>t+(Number(o[u.dataKey])||0),0):Math.max(0,...n.map(t=>Number(o[t.dataKey])||0)),r={date:o.date};for(const t of n)r[t.dataKey]=d===0?0:(Number(o[t.dataKey])||0)/d;return r})}function ne({brands:p,data:n,seriesConfig:l}){const o=new Map,d=p?new Set(p.map(r=>r._raw.brandUuid)):null;for(const r of n)if(!(d&&!d.has(r.brandUuid)))for(const t of r.interval??[]){const u=+new Date(t.date);let i=o.get(u);if(!i){i={date:u};for(const m of l)i[m.dataKey]=0;o.set(u,i)}for(const m of l)i[m.dataKey]=i[m.dataKey]+Number(t[m.dataKey]||0)}return{series:l,data:Array.from(o.values()).sort((r,t)=>r.date-t.date)}}function le({data:p,series:n,chartData:l,seriesConfig:o,stackMode:d="stack",isLoading:r,isFetching:t,isSuccess:u,filter:i,sx:m,legendBrand:c,showLegendUuid:U=!0,views:x,defaultViewKey:z,extraToggles:k,percentBasis:$="max",sortTooltipByValueDesc:j=!1}){var C;const N=re(),w=i.timezone??se,g=x??[{key:"absolute",label:"Numbers",mode:"absolute"},{key:"percent",label:"Percentages",mode:"percent"}],[D,O]=R(z??((C=g[0])==null?void 0:C.key)??"absolute"),a=g.find(e=>e.key===D)??g[0],b=a?.mode??"absolute",h=a?.stackMode??d,P=a?.percentBasis??$,K=a?.chartData??l,V=a?.seriesConfig??o,W=a?.data??p,Y=a?.series??n,f=K!==void 0?r?{series:[],data:[]}:ne({brands:i.brands,data:K,seriesConfig:V??[]}):{series:Y??[],data:W??[]},S=!f.data.length||!u,M=!f.data.length&&r;if(!x){if(M)return s(T,{});if(S)return s(B,{})}const Z=h==="none"&&b==="percent"?E(f.data,f.series,P):null,_=h==="stack"?b==="absolute"?"stack":"expand":"none",G=b==="absolute"?{tickFormatter:e=>Number(e).toLocaleString(),allowDecimals:!1}:{tickFormatter:e=>`${(e*100).toFixed(0)}%`,domain:[0,1]},H=b==="absolute"?e=>Number(e).toLocaleString():h==="stack"?(e,y,I)=>{const F=f.series.reduce((J,Q)=>J+(Number(I.payload[Q.dataKey])||0),0);return F===0?"0.0%":`${(Number(e)/F*100).toFixed(1)}%`}:e=>`${(Number(e)*100).toFixed(1)}%`,q=j?e=>-(Number(e?.value)||0):void 0;return v(L,{children:[v(X,{sx:{display:"flex",flexDirection:"column",gap:1,height:N.regularChartWrapper.height},children:[v(L,{direction:"row",spacing:1,justifyContent:"flex-end",children:[k?.map(e=>s(A,{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)),s(ee,{value:D,exclusive:!0,onChange:(e,y)=>{y!==null&&O(y)},size:"small",children:g.map(e=>s(A,{value:e.key,children:e.label},e.key))})]}),M?s(T,{}):S?s(B,{}):s(ae,{data:Z??f.data,series:f.series,stackMode:_,isAnimationActive:!0,xAxis:{dataKey:"date",type:"number",domain:["dataMin","dataMax"],tickFormatter:e=>ie(e,{timeZone:w,hour12:!1,hour:"numeric"}),allowDuplicatedCategory:!1},yAxis:G,tooltip:{formatter:H,itemSorter:q,labelFormatter:e=>oe(e,{timeZone:w,hour12:!1})},sx:{...N.regularChartWrapper,height:"unset",flex:1,minHeight:0,opacity:t?.4:1,...m}})]}),c&&s(te,{payload:[{uuid:c.uuid,value:c.value,color:c.color,dataKey:c.dataKey??c.uuid,brandName:c.brandName}],showUuid:U})]})}export{le as ConversionOverTimeChart,E as normalizePercentData};
+"use strict";import{useState as I}from"react";import{Stack as V,Box as de,ToggleButton as D,ToggleButtonGroup as ue}from"@mui/material";import{EmptyChartSection as O}from"../EmptyChartSection.mjs";import{LoadingChartSection as W}from"../LoadingChartSection.mjs";import{AreaChart as me}from"../AreaChart/index.mjs";import{ConversionChartTooltip as ce}from"./ConversionOverTimeChart.tooltip.mjs";import{trendSeries as pe}from"../trend.mjs";import{SeriesPercentageChartLegend as fe}from"../SeriesPercentageChartLegend/index.mjs";import{useStyle as he}from"../styles.mjs";import{formatExtendedDate as Y,formatDateMMYY as ye}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as ve}from"../../form/TimezoneInput/timezones.mjs";import{jsx as s,jsxs as M}from"react/jsx-runtime";const F="__trend_";function G(h,d,u){return h.map(i=>{const m=u==="sum"?d.reduce((r,c)=>r+(Number(i[c.dataKey])||0),0):Math.max(0,...d.map(r=>Number(i[r.dataKey])||0)),o={date:i.date};for(const r of d)o[r.dataKey]=m===0?0:(Number(i[r.dataKey])||0)/m;return o})}function ge({brands:h,data:d,seriesConfig:u}){const i=new Map,m=h?new Set(h.map(o=>o._raw.brandUuid)):null;for(const o of d)if(!(m&&!m.has(o.brandUuid)))for(const r of o.interval??[]){const c=+new Date(r.date);let n=i.get(c);if(!n){n={date:c};for(const p of u)n[p.dataKey]=0;i.set(c,n)}for(const p of u)n[p.dataKey]=n[p.dataKey]+Number(r[p.dataKey]||0)}return{series:u,data:Array.from(i.values()).sort((o,r)=>o.date-r.date)}}function be({data:h,series:d,chartData:u,seriesConfig:i,stackMode:m="stack",isLoading:o,isFetching:r,isSuccess:c,filter:n,sx:p,legendBrand:f,showLegendUuid:H=!0,views:$,defaultViewKey:J,extraToggles:L,percentBasis:Q="max",sortTooltipByValueDesc:B=!1}){var T;const A=he(),C=n.timezone??ve,x=$??[{key:"absolute",label:"Numbers",mode:"absolute"},{key:"percent",label:"Percentages",mode:"percent"}],[z,R]=I(J??((T=x[0])==null?void 0:T.key)??"absolute"),[v,q]=I(!1),a=x.find(e=>e.key===z)??x[0],g=a?.mode??"absolute",N=a?.stackMode??m,X=a?.percentBasis??Q,E=a?.chartData??u,ee=a?.seriesConfig??i,ae=a?.data??h,te=a?.series??d,l=E!==void 0?o?{series:[],data:[]}:ge({brands:n.brands,data:E,seriesConfig:ee??[]}):{series:te??[],data:ae??[]},P=!l.data.length||!c,U=!l.data.length&&o;if(!$){if(U)return s(W,{});if(P)return s(O,{})}const re=N==="none"&&g==="percent"?G(l.data,l.series,X):null,_=N==="stack"?g==="absolute"?"stack":"expand":"none",oe=g==="absolute"?{tickFormatter:e=>Number(e).toLocaleString(),allowDecimals:!1}:{tickFormatter:e=>`${(e*100).toFixed(0)}%`,domain:[0,1]},Z=g==="absolute"?e=>Number(e).toLocaleString():N==="stack"?(e,t,y)=>{const K=l.series.reduce((w,le)=>w+(Number(y.payload[le.dataKey])||0),0);return K===0?"0.0%":`${(Number(e)/K*100).toFixed(1)}%`}:e=>`${(Number(e)*100).toFixed(1)}%`,ne=B?e=>-(Number(e?.value)||0):void 0,k=re??l.data,S=g==="percent",j=_==="none"&&k.length>1,b=j?l.series.map(e=>{const t=pe(k,e.dataKey,{clampTo:S?[0,1]:void 0,interval:n.interval});return t?{serie:e,fit:t}:null}).filter(e=>e!==null):[],se=b.map(({serie:e})=>`${F}${e.dataKey}`),ie=v&&b.length?k.map((e,t)=>{const y={...e};for(const{serie:K,fit:w}of b)y[`${F}${K.dataKey}`]=w.values[t];return y}):k;return M(V,{children:[M(de,{sx:{display:"flex",flexDirection:"column",gap:1,height:A.regularChartWrapper.height},children:[M(V,{direction:"row",spacing:1,justifyContent:"flex-end",children:[j&&s(D,{value:"trend",selected:v,onChange:()=>q(e=>!e),size:"small","aria-label":"Show trend line","aria-pressed":v,children:"Show Trend"}),L?.map(e=>s(D,{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)),s(ue,{value:z,exclusive:!0,onChange:(e,t)=>{t!==null&&R(t)},size:"small",children:x.map(e=>s(D,{value:e.key,children:e.label},e.key))})]}),U?s(W,{}):P?s(O,{}):s(me,{data:ie,series:l.series,trendLines:v?b.map(({serie:e})=>({dataKey:`${F}${e.dataKey}`,color:e.color,name:`${e.key} trend`})):void 0,stackMode:_,isAnimationActive:!0,xAxis:{dataKey:"date",type:"number",domain:["dataMin","dataMax"],tickFormatter:e=>ye(e,{timeZone:C,hour12:!1,hour:"numeric"}),allowDuplicatedCategory:!1},yAxis:oe,tooltip:{formatter:Z,itemSorter:ne,labelFormatter:e=>Y(e,{timeZone:C,hour12:!1}),content:s(ce,{trendDataKeys:se,trends:v?b.map(({serie:e,fit:t})=>({name:e.key,color:e.color,slope:S?t.slopePerInterval*100:t.slopePerInterval,stepMs:t.stepMs})):[],interval:n.interval,unit:S?"percent":"count",sortByValueDesc:B,valueFormatter:(e,t,y)=>Z(e,t,y),labelFormatter:e=>Y(e,{timeZone:C,hour12:!1})})},sx:{...A.regularChartWrapper,height:"unset",flex:1,minHeight:0,opacity:r?.4:1,...p}})]}),f&&s(fe,{payload:[{uuid:f.uuid,value:f.value,color:f.color,dataKey:f.dataKey??f.uuid,brandName:f.brandName}],showUuid:H})]})}export{be as ConversionOverTimeChart,G as normalizePercentData};

package/dist/components/chart/SynchronizedMetricsChart/SynchronizedMetricsChart.map.d.ts

@@ -1,6 +1,16 @@
 import { BrandFilter } from '../../../components/BrandFilterInput';
 import { BrandIntervalData } from '../ConversionOverTimeChart';
 import { SubChartConfig, SynchronizedSubChartConfig } from './SynchronizedMetricsChart.types';
+/**
+ * Overall rate per timestamp across the visible brands, pooling the raw counts
+ * before dividing. Exported for testing.
+ */
+export declare function pooledPercentageByDate({ chartData, brands, numerator, denominator, }: {
+    chartData: BrandIntervalData[];
+    brands: BrandFilter[];
+    numerator: string;
+    denominator: string;
+}): Record<number, number>;
 export declare function mapSynchronizedSubCharts({ chartData, subChartConfig, brands, colorMap, isLoading, }: {
     chartData: BrandIntervalData[];
     subChartConfig: readonly [

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

@@ -1 +1 @@
-"use strict";import{mapSeriesTimeSeriesData as m}from"../SeriesChart/SeriesChart.map.mjs";function y({chartData:e,subChartConfig:r,brands:s,colorMap:l,isLoading:c}){if(c)return[{title:r[0].title,data:[]}];const i={brands:s,colorMap:l,data:e};return r.map(t=>{if(t.dataKey!=null)return{title:t.title,data:m({...i,keyValue:t.dataKey}),tooltipFormatter:t.tooltipFormatter,yAxisTickFormatter:t.yAxisTickFormatter,yAxisDomain:t.yAxisDomain,isPercentage:!1};const{numerator:p,denominator:o}=t.percentageOf,u=e.map(n=>({...n,interval:(n.interval??[]).map(a=>({...a,percentage:Number(a[o])>0?Math.min(Number(a[p])/Number(a[o])*100,100):0}))}));return{title:t.title,data:m({...i,data:u,keyValue:"percentage"}),tooltipFormatter:t.tooltipFormatter,yAxisTickFormatter:t.yAxisTickFormatter,yAxisDomain:t.yAxisDomain,isPercentage:!0}})}export{y as mapSynchronizedSubCharts};
+"use strict";import{mapSeriesTimeSeriesData as l}from"../SeriesChart/SeriesChart.map.mjs";function p({chartData:o,brands:i,numerator:m,denominator:d}){const u=new Set(i.map(e=>e._raw.brandUuid)),r=new Map;for(const e of o)if(u.has(e.brandUuid))for(const a of e.interval??[]){const s=+new Date(a.date),n=r.get(s)??{numerator:0,denominator:0};n.numerator+=Number(a[m])||0,n.denominator+=Number(a[d])||0,r.set(s,n)}const t={};for(const[e,a]of r)t[e]=a.denominator>0?Math.min(a.numerator/a.denominator*100,100):0;return t}function y({chartData:o,subChartConfig:i,brands:m,colorMap:d,isLoading:u}){if(u)return[{title:i[0].title,data:[]}];const r={brands:m,colorMap:d,data:o};return i.map(t=>{if(t.dataKey!=null)return{title:t.title,data:l({...r,keyValue:t.dataKey}),tooltipFormatter:t.tooltipFormatter,yAxisTickFormatter:t.yAxisTickFormatter,yAxisDomain:t.yAxisDomain,isPercentage:!1};const{numerator:e,denominator:a}=t.percentageOf,s=o.map(n=>({...n,interval:(n.interval??[]).map(c=>({...c,percentage:Number(c[a])>0?Math.min(Number(c[e])/Number(c[a])*100,100):0}))}));return{title:t.title,data:l({...r,data:s,keyValue:"percentage"}),tooltipFormatter:t.tooltipFormatter,yAxisTickFormatter:t.yAxisTickFormatter,yAxisDomain:t.yAxisDomain,isPercentage:!0,totalByDate:p({chartData:o,brands:m,numerator:e,denominator:a})}})}export{y as mapSynchronizedSubCharts,p as pooledPercentageByDate};

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

@@ -1 +1 @@
-"use strict";import{useState as v,useMemo as k}from"react";import{Stack as p,ToggleButton as F,useTheme as I,Typography as K}from"@mui/material";import{ResponsiveContainer as W,LineChart as Y,CartesianGrid as j,XAxis as Z,YAxis as O,Tooltip as U,Line as L}from"recharts";import{formatDateMMYY as B,formatExtendedDate as G}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as R}from"../../form/TimezoneInput/timezones.mjs";import{EmptyChartSection as X}from"../EmptyChartSection.mjs";import{LoadingChartSection as q}from"../LoadingChartSection.mjs";import{SeriesPercentageChartLegend as H}from"../SeriesPercentageChartLegend/index.mjs";import{chartDefaultProps as J,xAxisDefaultProps as Q,yAxisDefaultProps as V}from"../shared.mjs";import{mapSynchronizedSubCharts as $}from"./SynchronizedMetricsChart.map.mjs";import{jsx as e,jsxs as d}from"react/jsx-runtime";import tt from"../../../node_modules/d3-scale/src/symlog.mjs";const at="synchronized-metrics",et=200,g="__total__",rt="Total";function w(n){const i=new Map;for(const o of n)for(const r of o.chartData){let s=i.get(r.date);s||(s={date:r.date},i.set(r.date,s)),s[o.uuid]=r.value}return Array.from(i.values()).sort((o,r)=>o.date-r.date)}const ot=g;function z(n,i){return i.length?n.map(o=>({...o,[g]:i.reduce((r,s)=>r+(Number(o[s])||0),0)})):n}function it({title:n,mergedData:i,brands:o,timezone:r,syncId:s,isPercentage:l,showTotal:f,logScale:y,tooltipFormatter:u,yAxisTickFormatter:x,yAxisDomain:b}){const m=I(),A=y&&!l,c=f&&!l&&o.length>1,T=A?tt():void 0;return d(p,{children:[e(K,{variant:"h5",sx:{mb:.5,fontSize:"1.15rem"},children:n}),e(W,{width:"100%",height:et,children:d(Y,{data:i,syncId:s,margin:J.margin,children:[e(j,{vertical:!1}),e(Z,{dataKey:"date",tickFormatter:a=>B(a,{timeZone:r,hour12:!1,hour:"numeric"}),...Q}),e(O,{tickFormatter:x??(a=>Number(a).toLocaleString()),allowDecimals:!1,domain:b,scale:T,...V}),e(U,{cursor:{stroke:m.palette.neutral.main,strokeWidth:1},formatter:u??(a=>Number(a).toLocaleString()),labelFormatter:a=>G(a,{timeZone:r,hour12:!1}),itemSorter:a=>-Number(a?.value??0)}),o.map(a=>e(L,{dataKey:a.uuid,name:a.name,stroke:a.color,type:"monotone",strokeWidth:2,isAnimationActive:!1,dot:!1},a.uuid)),c&&e(L,{dataKey:g,name:rt,stroke:m.palette.text.primary,strokeWidth:2,strokeDasharray:"4 4",type:"monotone",isAnimationActive:!1,dot:!1},g)]})})]})}function st({subCharts:n,chartData:i,subChartConfig:o,colorMap:r,syncId:s=at,isLoading:l,isSuccess:f,isFetching:y,filter:u,sx:x}){const b=u.timezone??R,[m,A]=v(!1),[c,T]=v(!1),a=i?$({chartData:i,subChartConfig:o,brands:u.brands,colorMap:r,isLoading:l}):n,D=a.every(t=>t.data.length===0),P=k(()=>a.map(t=>{const h=w(t.data);if(t.isPercentage)return h;const _=t.data.map(E=>E.uuid);return z(h,_)}),[a]),S=a.some(t=>!t.isPercentage),C=a.some(t=>!t.isPercentage&&t.data.length>1),M=k(()=>a[0].data.map(t=>({uuid:t.brandUuid??t.uuid,value:t.name,color:t.color,dataKey:t.uuid,brandName:t.brandName})),[a]);if(D&&l)return e(q,{});if(D||!f)return e(X,{});const N=S||C;return d(p,{sx:{width:"100%",...x},children:[N&&d(p,{direction:"row",spacing:1,justifyContent:"flex-end",sx:{mb:1},children:[C&&e(F,{value:"total",selected:m,onChange:()=>A(t=>!t),size:"small","aria-label":"Show Total line","aria-pressed":m,children:"Show Total"}),S&&e(F,{value:"log",selected:c,onChange:()=>T(t=>!t),size:"small","aria-label":"Toggle logarithmic scale","aria-pressed":c,children:"Log Scale"})]}),d(p,{sx:{opacity:y?.4:1,gap:2},children:[a.map((t,h)=>e(it,{title:t.title,mergedData:P[h],brands:t.data,timezone:b,syncId:s,isPercentage:t.isPercentage??!1,showTotal:m,logScale:c,tooltipFormatter:t.tooltipFormatter,yAxisTickFormatter:t.yAxisTickFormatter,yAxisDomain:t.yAxisDomain},t.title)),e(H,{payload:M})]})]})}export{st as SynchronizedMetricsChart,ot as TOTAL_DATA_KEY,z as enrichWithTotal,w as mergeChartData};
+"use strict";import{useState as _,useMemo as b}from"react";import{Stack as C,ToggleButton as P,useTheme as U,Typography as O}from"@mui/material";import{ResponsiveContainer as Z,LineChart as G,CartesianGrid as R,XAxis as X,YAxis as q,Tooltip as H,Line as I}from"recharts";import{formatDateMMYY as J}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as Q}from"../../form/TimezoneInput/timezones.mjs";import{EmptyChartSection as V}from"../EmptyChartSection.mjs";import{LoadingChartSection as $}from"../LoadingChartSection.mjs";import{SeriesPercentageChartLegend as ee}from"../SeriesPercentageChartLegend/index.mjs";import{chartDefaultProps as te,xAxisDefaultProps as ae,yAxisDefaultProps as re}from"../shared.mjs";import{mapSynchronizedSubCharts as oe}from"./SynchronizedMetricsChart.map.mjs";import{SynchronizedChartTooltip as ne}from"./SynchronizedMetricsChart.tooltip.mjs";import{trendSeries as ie}from"../trend.mjs";import{jsx as t,jsxs as x}from"react/jsx-runtime";import se from"../../../node_modules/d3-scale/src/symlog.mjs";const le="synchronized-metrics",de=200,u="__total__",ce="Total",k="__trend__",me="Trend";function ue(o){return!o.isPercentage||o.totalByDate?u:o.data.length===1?o.data[0].uuid:null}function E(o){const a=new Map;for(const i of o)for(const n of i.chartData){let d=a.get(n.date);d||(d={date:n.date},a.set(n.date,d)),d[i.uuid]=n.value}return Array.from(a.values()).sort((i,n)=>i.date-n.date)}const pe=u;function W(o,a){return a.length?o.map(i=>({...i,[u]:a.reduce((n,d)=>n+(Number(i[d])||0),0)})):o}function he({title:o,mergedData:a,brands:i,timezone:n,syncId:d,isPercentage:c,showTotal:z,showTrend:p,trendTarget:m,interval:f,logScale:w,tooltipFormatter:T,yAxisTickFormatter:L,yAxisDomain:v}){const h=U(),S=w&&!c,F=z&&!c&&i.length>1,s=S?se():void 0,l=b(()=>m?ie(a,m,{clampTo:c?[0,100]:void 0,interval:f}):null,[a,m,c,f]),M=b(()=>{if(!p||!l)return a;const r=a.length-1;return a.map((D,g)=>({...D,...g===0||g===r?{[k]:l.values[g]}:{}}))},[a,p,l]);return x(C,{children:[t(O,{variant:"h5",sx:{mb:.5,fontSize:"1.15rem"},children:o}),t(Z,{width:"100%",height:de,children:x(G,{data:M,syncId:d,margin:te.margin,children:[t(R,{vertical:!1}),t(X,{dataKey:"date",tickFormatter:r=>J(r,{timeZone:n,hour12:!1,hour:"numeric"}),...ae}),t(q,{tickFormatter:L??(r=>Number(r).toLocaleString()),allowDecimals:!1,domain:v,scale:s,...re}),t(H,{cursor:{stroke:h.palette.neutral.main,strokeWidth:1},wrapperStyle:{zIndex:h.zIndex.tooltip},content:t(ne,{timezone:n,totalDataKey:u,trendDataKey:k,trendSlope:p?l?.slopePerInterval:void 0,trendStepMs:l?.stepMs,trendInterval:f,trendUnit:c?"percent":"count",valueFormatter:T??(r=>Number(r).toLocaleString())})}),i.map(r=>t(I,{dataKey:r.uuid,name:r.name,stroke:r.color,type:"monotone",strokeWidth:2,isAnimationActive:!1,dot:!1},r.uuid)),F&&t(I,{dataKey:u,name:ce,stroke:h.palette.text.primary,strokeWidth:2,strokeDasharray:"4 4",type:"monotone",isAnimationActive:!1,dot:!1},u),p&&l&&t(I,{dataKey:k,name:me,connectNulls:!0,stroke:h.palette.secondary.main,strokeWidth:2,strokeDasharray:"7 5",type:"linear",isAnimationActive:!1,dot:!1,activeDot:!1,legendType:"none"},k)]})})]})}function ge({subCharts:o,chartData:a,subChartConfig:i,colorMap:n,syncId:d=le,isLoading:c,isSuccess:z,isFetching:p,filter:m,sx:f}){const w=m.timezone??Q,[T,L]=_(!1),[v,h]=_(!1),[S,F]=_(!1),s=a?oe({chartData:a,subChartConfig:i,brands:m.brands,colorMap:n,isLoading:c}):o,l=s.every(e=>e.data.length===0),M=b(()=>s.map(e=>{const y=E(e.data);if(e.isPercentage){const A=e.totalByDate;return A?y.map(N=>({...N,[u]:A[N.date]??0})):y}const B=e.data.map(A=>A.uuid);return W(y,B)}),[s]),r=s.some(e=>!e.isPercentage),D=s.some(e=>!e.isPercentage&&e.data.length>1),g=s.map(e=>ue(e)),K=g.some(e=>e!==null),Y=b(()=>s[0].data.map(e=>({uuid:e.brandUuid??e.uuid,value:e.name,color:e.color,dataKey:e.uuid,brandName:e.brandName})),[s]);if(l&&c)return t($,{});if(l||!z)return t(V,{});const j=r||D||K;return x(C,{sx:{width:"100%",...f},children:[j&&x(C,{direction:"row",spacing:1,justifyContent:"flex-end",sx:{mb:1},children:[D&&t(P,{value:"total",selected:T,onChange:()=>L(e=>!e),size:"small","aria-label":"Show Total line","aria-pressed":T,children:"Show Total"}),K&&t(P,{value:"trend",selected:v,onChange:()=>h(e=>!e),size:"small","aria-label":"Show trend line","aria-pressed":v,children:"Show Trend"}),r&&t(P,{value:"log",selected:S,onChange:()=>F(e=>!e),size:"small","aria-label":"Toggle logarithmic scale","aria-pressed":S,children:"Log Scale"})]}),x(C,{sx:{opacity:p?.4:1,gap:2},children:[s.map((e,y)=>t(he,{title:e.title,mergedData:M[y],brands:e.data,timezone:w,syncId:d,isPercentage:e.isPercentage??!1,showTotal:T,showTrend:v,trendTarget:g[y],interval:m.interval,logScale:S,tooltipFormatter:e.tooltipFormatter,yAxisTickFormatter:e.yAxisTickFormatter,yAxisDomain:e.yAxisDomain},e.title)),t(ee,{payload:Y})]})]})}export{ge as SynchronizedMetricsChart,pe as TOTAL_DATA_KEY,W as enrichWithTotal,E as mergeChartData};

package/dist/components/chart/SynchronizedMetricsChart/SynchronizedMetricsChart.tooltip.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { MetricsIntervalType } from '../../../constants/metrics';
+/**
+ * Brand rows rendered before the remainder is collapsed into a count. Sized so
+ * the tallest column stays within a sub-chart's height.
+ */
+export declare const TOOLTIP_BRAND_CAP = 24;
+interface PayloadEntry {
+    dataKey?: string | number;
+    name?: string | number;
+    value?: number | string;
+    color?: string;
+}
+interface SynchronizedChartTooltipProps {
+    timezone: string;
+    totalDataKey: string;
+    /** Excluded from the ranked rows; reported as a slope instead. */
+    trendDataKey: string;
+    /** Change per interval bucket. Undefined when the trend is off. */
+    trendSlope?: number;
+    /** Measured bucket spacing, used to name the interval if it isn't given. */
+    trendStepMs?: number;
+    trendInterval?: MetricsIntervalType;
+    trendUnit: 'count' | 'percent';
+    valueFormatter: (value: number | string) => string;
+    /** Injected by Recharts. */
+    active?: boolean;
+    payload?: PayloadEntry[];
+    label?: number | string;
+}
+/**
+ * Tooltip for a synchronized sub-chart. Ranks brands by their value at the
+ * hovered point, lays them out in columns and caps the list, so a chart with
+ * every brand selected stays readable inside its own height instead of running
+ * over the charts below it.
+ */
+export declare function SynchronizedChartTooltip({ timezone, totalDataKey, trendDataKey, trendSlope, trendStepMs, trendInterval, trendUnit, valueFormatter, active, payload, label, }: Readonly<SynchronizedChartTooltipProps>): React.ReactNode;
+export {};

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

@@ -0,0 +1 @@
+"use strict";import{Box as m,Typography as o,Stack as g}from"@mui/material";import{formatExtendedDate as W}from"../../../utils/date.mjs";import{formatSlope as K}from"../trend.mjs";import{jsxs as i,jsx as r}from"react/jsx-runtime";const b=24,z=8,j=16;function B(t){return t<=z?1:t<=j?2:3}const a={fontSize:"0.8125rem",lineHeight:1.4};function y({row:t,bold:n,valueFormatter:l}){return i(g,{direction:"row",spacing:1.5,sx:{minWidth:0,alignItems:"baseline",justifyContent:"space-between",color:t.color},children:[r(o,{component:"span",sx:{...a,fontWeight:n?700:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t.name}),r(o,{component:"span",sx:{...a,fontWeight:700,flexShrink:0},children:l(t.value??0)})]})}function D({timezone:t,totalDataKey:n,trendDataKey:l,trendSlope:p,trendStepMs:v,trendInterval:S,trendUnit:w,valueFormatter:c,active:k,payload:d,label:C}){if(!k||!(d!=null&&d.length))return null;const h=d.filter(e=>e.dataKey!=null&&e.dataKey!==l).map(e=>({key:String(e.dataKey),name:String(e.name??e.dataKey),color:e.color??"inherit",value:e.value??0})).sort((e,T)=>Number(T.value)-Number(e.value)),u=h.find(e=>e.key===n),f=h.filter(e=>e.key!==n),s=f.slice(0,b),x=f.length-s.length;return i(m,{sx:{bgcolor:"background.paper",border:"1px solid",borderColor:"divider",borderRadius:1,boxShadow:3,px:1.25,py:1,maxWidth:560},children:[r(o,{sx:{fontSize:"0.8125rem",lineHeight:1.4,fontWeight:700,mb:.5},children:W(C??0,{timeZone:t,hour12:!1})}),u&&r(m,{sx:{pb:.5,mb:.5,borderBottom:"1px solid",borderColor:"divider"},children:r(y,{row:u,bold:!0,valueFormatter:c})}),r(m,{sx:{display:"grid",gridTemplateColumns:`repeat(${B(s.length)}, minmax(0, 1fr))`,columnGap:2},children:s.map(e=>r(y,{row:e,valueFormatter:c},e.key))}),x>0&&i(o,{sx:{fontSize:"0.75rem",lineHeight:1.4,color:"text.secondary",mt:.5},children:["+ ",x," more"]}),p!==void 0&&i(g,{direction:"row",spacing:2,sx:{mt:.75,pt:.75,borderTop:"1px solid",borderColor:"divider",justifyContent:"space-between"},children:[r(o,{sx:{...a,fontWeight:700},children:"Trend"}),r(o,{sx:{...a,fontWeight:700},children:K(p,{unit:w,interval:S,stepMs:v})})]})]})}export{D as SynchronizedChartTooltip,b as TOOLTIP_BRAND_CAP};

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

@@ -2,6 +2,7 @@ import { SxProps } from '@mui/material';
 import { SeriesChartData } from '../SeriesChart';
 import { BrandFilter } from '../../../components/BrandFilterInput';
 import { BrandIntervalData } from '../ConversionOverTimeChart';
+import { MetricsIntervalType } from '../../../constants/metrics';
 export interface SubChartConfig {
     title: string;
     data: SeriesChartData[];
@@ -13,6 +14,16 @@ export interface SubChartConfig {
      * opt out of the Total line and the Log Scale toggle.
      */
     isPercentage?: boolean;
+    /**
+     * Pooled value per timestamp for a percentage sub-chart:
+     * `sum(numerator) / sum(denominator)` across the visible brands, which is the
+     * overall rate. Averaging the per-brand rates instead would weight a brand
+     * with two events the same as one with two thousand.
+     *
+     * Not drawn - percentage sub-charts have no Total line. It exists so the
+     * trend has a series to fit when more than one brand is selected.
+     */
+    totalByDate?: Record<number, number>;
 }
 export type SynchronizedSubChartConfig = {
     title: string;
@@ -40,6 +51,11 @@ type SynchronizedMetricsChartBaseProps = {
     filter: {
         timezone?: string;
         brands: BrandFilter[];
+        /**
+         * The selected bucket size. The trend readout reports its slope per this
+         * interval; when omitted it is named from the spacing in the data.
+         */
+        interval?: MetricsIntervalType;
     };
     sx?: SxProps;
 };

package/dist/components/chart/trend.d.ts

@@ -0,0 +1,65 @@
+import { MetricsIntervalType } from '../../constants/metrics';
+export interface TrendFit {
+    /** Change per data point. */
+    slope: number;
+    intercept: number;
+}
+/**
+ * Ordinary least squares of `values` against `xs`, so the slope is per unit of
+ * x. Pass timestamps for `xs` whenever the samples are not evenly spaced - the
+ * metrics API only returns buckets that contain data, so a series can jump four
+ * days between two "hourly" points. Fitting against the index there would
+ * measure change per *returned row* and report it as change per hour.
+ *
+ * `xs` defaults to the point index, which is only correct for evenly spaced
+ * input.
+ */
+export declare function olsFit(values: number[], xs?: number[]): TrendFit;
+/**
+ * Median gap between consecutive timestamps, used to name the bucket when the
+ * caller doesn't tell us which interval is selected.
+ */
+export declare function medianStepMs(dates: number[]): number;
+/** Average lengths - months and quarters vary, so these are used for matching only. */
+export declare const INTERVAL_MS: Record<MetricsIntervalType, number>;
+/**
+ * Names the bucket from the spacing actually present in the data. Matching is
+ * on the ratio rather than the difference, so a 31-day month doesn't get
+ * mistaken for a quarter.
+ */
+export declare function intervalFromStep(stepMs: number): MetricsIntervalType | null;
+/** Compact label for a bucket that matches no named interval, e.g. `8h`. */
+export declare function formatStepShort(stepMs: number): string;
+export interface TrendSeries {
+    /** Fitted value per point, aligned with the input rows. */
+    values: number[];
+    /**
+     * Change per interval bucket, measured against elapsed time rather than row
+     * count so gaps in the data don't inflate it.
+     */
+    slopePerInterval: number;
+    /** Measured spacing, so the caller can name the bucket. */
+    stepMs: number;
+}
+/**
+ * Fits `dataKey` across `rows` against their timestamps and returns the fitted
+ * column plus its slope per interval. Returns null when there is nothing
+ * meaningful to fit.
+ */
+export declare function trendSeries(rows: Array<Record<string, number>>, dataKey: string, options?: {
+    clampTo?: [number, number];
+    /** Bucket the slope is reported in. Defaults to the measured spacing. */
+    interval?: MetricsIntervalType;
+}): TrendSeries | null;
+export interface FormatSlopeOptions {
+    /** `percent` reports percentage points, since a change in a rate is not a rate. */
+    unit?: 'count' | 'percent';
+    /** The selected interval. Falls back to naming the measured spacing. */
+    interval?: MetricsIntervalType | null;
+    stepMs?: number;
+}
+/**
+ * `+4.2 / day`, `+18 / hour`, `+150 / month` - the slope is always reported per
+ * whichever interval the operator is looking at.
+ */
+export declare function formatSlope(value: number, { unit, interval, stepMs }?: FormatSlopeOptions): string;

package/dist/components/chart/trend.mjs

@@ -0,0 +1 @@
+"use strict";import{MetricsInterval as c}from"../../constants/metrics.mjs";function M(e,o){const n=e.length;if(n<2)return{slope:0,intercept:e[0]??0};const r=o??e.map((s,a)=>a),t=r.reduce((s,a)=>s+a,0)/n,l=e.reduce((s,a)=>s+a,0)/n;let m=0,i=0;for(let s=0;s<n;s+=1)m+=(r[s]-t)*(e[s]-l),i+=(r[s]-t)**2;const u=i===0?0:m/i;return{slope:u,intercept:l-u*t}}function N(e){if(e.length<2)return 0;const o=[];for(let r=1;r<e.length;r+=1)o.push(e[r]-e[r-1]);o.sort((r,t)=>r-t);const n=Math.floor(o.length/2);return o.length%2===0?(o[n-1]+o[n])/2:o[n]}const h=6e4,f=60*h,p=24*f,I={[c.MINUTE]:h,[c.HOUR]:f,[c.DAY]:p,[c.WEEK]:7*p,[c.MONTH]:30.44*p,[c.QUARTER]:91.31*p,[c.YEAR]:365.25*p};function d(e){if(e<=0)return null;let o=null,n=Number.POSITIVE_INFINITY;for(const[r,t]of Object.entries(I)){const l=e>t?e/t:t/e;l<n&&(n=l,o=r)}return n<=1.5?o:null}function S(e){return e<=0?"":e>=p?`${+(e/p).toFixed(1)}d`:e>=f?`${+(e/f).toFixed(1)}h`:`${Math.max(1,Math.round(e/h))}m`}function E(e,o,n={}){if(e.length<2)return null;const r=e.map(a=>Number(a[o])||0),t=e.map(a=>Number(a.date)),l=M(r,t),[m,i]=n.clampTo??[0,Number.POSITIVE_INFINITY],u=N(t),s=n.interval?I[n.interval]:u;return{values:t.map(a=>Math.min(i,Math.max(m,l.intercept+l.slope*a))),slopePerInterval:l.slope*s,stepMs:u}}function T(e,{unit:o="count",interval:n,stepMs:r=0}={}){const t=Math.abs(e),l=e>0?"+":e<0?"-":"",m=t>=10?0:t>=1?1:2,i=`${l}${t.toFixed(m)}${o==="percent"?" pp":""}`,u=n??d(r)??S(r);return u?`${i} / ${u}`:i}export{I as INTERVAL_MS,T as formatSlope,S as formatStepShort,d as intervalFromStep,N as medianStepMs,M as olsFit,E as trendSeries};

package/package.json

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