@bikdotai/bik-component-library 0.0.859 → 0.0.860-beta.0

package/dist/esm/components/analytics-chips-and-dropdowns/chart/ChartLayout.js

@@ -0,0 +1,69 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { TitleRegular as s, TitleMedium as c, BodyCaption as p } from "../../TypographyStyle.js";
+import { COLORS as r } from "../../../constants/Theme.js";
+const x = ({
+  title: e,
+  padding: o,
+  gap: d,
+  dataTest: t,
+  wrapperStyle: l,
+  children: n
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    "data-test": t,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: d,
+      width: "100%",
+      padding: o,
+      borderRadius: 8,
+      border: `1px solid ${r.stroke.primary}`,
+      backgroundColor: r.surface.standard,
+      ...l
+    },
+    children: [
+      e && /* @__PURE__ */ i(s, { color: r.content.primary, children: e }),
+      n
+    ]
+  }
+), f = ({
+  value: e,
+  chip: o
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" },
+    children: [
+      /* @__PURE__ */ i(
+        c,
+        {
+          color: r.content.primary,
+          style: { whiteSpace: "nowrap" },
+          children: e
+        }
+      ),
+      o && /* @__PURE__ */ i(
+        "div",
+        {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            padding: "4px 8px",
+            borderRadius: 4,
+            border: `1px solid ${r.stroke.primary}`,
+            backgroundColor: r.surface.subdued,
+            whiteSpace: "nowrap"
+          },
+          children: /* @__PURE__ */ i(p, { color: r.content.secondary, children: o })
+        }
+      )
+    ]
+  }
+);
+export {
+  x as ChartCard,
+  f as ChartValueRow
+};
+//# sourceMappingURL=ChartLayout.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/chart/ChartLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLayout.js","sources":["../../../../../src/components/analytics-chips-and-dropdowns/chart/ChartLayout.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from 'react';\nimport {\n\tBodyCaption,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ninterface ChartCardProps {\n\ttitle?: string;\n\tpadding: CSSProperties['padding'];\n\tgap: number;\n\tdataTest: string;\n\twrapperStyle?: CSSProperties;\n\tchildren: ReactNode;\n}\n\nexport const ChartCard: React.FC<ChartCardProps> = ({\n\ttitle,\n\tpadding,\n\tgap,\n\tdataTest,\n\twrapperStyle,\n\tchildren,\n}) => (\n\t<div\n\t\tdata-test={dataTest}\n\t\tstyle={{\n\t\t\tdisplay: 'flex',\n\t\t\tflexDirection: 'column',\n\t\t\tgap,\n\t\t\twidth: '100%',\n\t\t\tpadding,\n\t\t\tborderRadius: 8,\n\t\t\tborder: `1px solid ${COLORS.stroke.primary}`,\n\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t...wrapperStyle,\n\t\t}}\n\t>\n\t\t{title && (\n\t\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t)}\n\t\t{children}\n\t</div>\n);\n\ninterface ChartValueRowProps {\n\tvalue: ReactNode;\n\tchip?: ReactNode;\n}\n\nexport const ChartValueRow: React.FC<ChartValueRowProps> = ({\n\tvalue,\n\tchip,\n}) => (\n\t<div\n\t\tstyle={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}\n\t>\n\t\t<TitleMedium\n\t\t\tcolor={COLORS.content.primary}\n\t\t\tstyle={{ whiteSpace: 'nowrap' }}\n\t\t>\n\t\t\t{value}\n\t\t</TitleMedium>\n\t\t{chip && (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\tborder: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\tbackgroundColor: COLORS.surface.subdued,\n\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{chip}</BodyCaption>\n\t\t\t</div>\n\t\t)}\n\t</div>\n);\n"],"names":["ChartCard","title","padding","gap","dataTest","wrapperStyle","children","jsxs","COLORS","TitleRegular","ChartValueRow","value","chip","jsx","TitleMedium","BodyCaption"],"mappings":";;;AAiBO,MAAMA,IAAsC,CAAC;AAAA,EACnD,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACD,MACC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,aAAWH;AAAA,IACX,OAAO;AAAA,MACN,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAAD;AAAA,MACA,OAAO;AAAA,MACP,SAAAD;AAAA,MACA,cAAc;AAAA,MACd,QAAQ,aAAaM,EAAO,OAAO,OAAO;AAAA,MAC1C,iBAAiBA,EAAO,QAAQ;AAAA,MAChC,GAAGH;AAAA,IAAA;AAAA,IAGH,UAAA;AAAA,MAAAJ,uBACCQ,GAAA,EAAa,OAAOD,EAAO,QAAQ,SAAU,UAAAP,GAAM;AAAA,MAEpDK;AAAA,IAAA;AAAA,EAAA;AACF,GAQYI,IAA8C,CAAC;AAAA,EAC3D,OAAAC;AAAA,EACA,MAAAC;AACD,MACC,gBAAAL;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,GAAG,UAAU,OAAA;AAAA,IAElE,UAAA;AAAA,MAAA,gBAAAM;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,OAAON,EAAO,QAAQ;AAAA,UACtB,OAAO,EAAE,YAAY,SAAA;AAAA,UAEpB,UAAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDC,KACA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,cAAc;AAAA,YACd,QAAQ,aAAaL,EAAO,OAAO,OAAO;AAAA,YAC1C,iBAAiBA,EAAO,QAAQ;AAAA,YAChC,YAAY;AAAA,UAAA;AAAA,UAGb,4BAACO,GAAA,EAAY,OAAOP,EAAO,QAAQ,WAAY,UAAAI,EAAA,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACrD;AAAA,EAAA;AAEF;"}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ComparisonBarChartI } from './ComparisonBarChart.model';
+export declare const ComparisonBarChart: React.FC<ComparisonBarChartI>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.js

@@ -0,0 +1,110 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { useMemo as R, useState as g } from "react";
+import { BodyCaption as y } from "../../../TypographyStyle.js";
+import { COLORS as $ } from "../../../../constants/Theme.js";
+import { ChartCard as w, ChartValueRow as A } from "../ChartLayout.js";
+import { pickColor as O, COMPARISON_BAR_COLORS as M } from "../chartPalette.js";
+import { toChartValue as i, formatPercent as S, clamp as k, formatChartValue as T } from "../formatChartValue.js";
+import { BarRowLayout as x, BarLabelColumn as _, BarArea as E, BarTrack as H, BarFill as I, BarTooltip as P, BarTooltipArrow as V } from "./ComparisonBarChart.styled.js";
+const b = Array.from(
+  { length: 2 },
+  (r, n) => ({ key: `placeholder-${n}`, label: "", value: 0 })
+), j = ({
+  row: { bar: r, fillWidth: n, color: c, percentageLabel: l },
+  labelWidth: m,
+  barHeight: p,
+  showTooltip: h,
+  locale: d
+}) => {
+  const [u, o] = g(!1);
+  return /* @__PURE__ */ s(x, { children: [
+    /* @__PURE__ */ s(_, { $width: m, children: [
+      /* @__PURE__ */ e(y, { color: $.content.secondary, children: r.label }),
+      /* @__PURE__ */ e(
+        A,
+        {
+          value: r.valueLabel ?? T(i(r.value), d),
+          chip: l
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s(
+      E,
+      {
+        "data-test": `comparison-bar-chart-bar-${r.key}`,
+        onMouseEnter: () => o(!0),
+        onMouseLeave: () => o(!1),
+        $height: p,
+        children: [
+          /* @__PURE__ */ e(H, { "data-test": `comparison-bar-chart-track-${r.key}`, children: /* @__PURE__ */ e(
+            I,
+            {
+              "data-test": `comparison-bar-chart-fill-${r.key}`,
+              $width: n,
+              $color: c
+            }
+          ) }),
+          h && u && /* @__PURE__ */ s(
+            P,
+            {
+              "data-test": `comparison-bar-chart-tooltip-${r.key}`,
+              $left: k(n / 2, 8, 92),
+              children: [
+                /* @__PURE__ */ e(V, {}),
+                /* @__PURE__ */ e(y, { color: $.content.primaryInverse, children: l })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, Q = ({
+  bars: r = [],
+  title: n,
+  total: c,
+  colors: l = M,
+  labelWidth: m = 180,
+  barHeight: p = 52,
+  locale: h,
+  showTooltip: d = !0,
+  wrapperStyle: u
+}) => {
+  const o = r.some((t) => i(t.value) > 0), f = r.length ? r : b, L = R(() => {
+    const t = c !== void 0 ? i(c) : f.reduce((a, v) => a + i(v.value), 0);
+    return f.map((a, v) => {
+      const C = a.percentage ?? (t > 0 ? i(a.value) / t * 100 : 0), B = Number.isFinite(C) ? Math.max(C, 0) : 0;
+      return {
+        bar: a,
+        fillWidth: k(B, 0, 100),
+        color: o ? a.color ?? O(l, v) : void 0,
+        percentageLabel: o ? a.percentageLabel ?? `${S(B)}%` : ""
+      };
+    });
+  }, [f, c, l, o]);
+  return /* @__PURE__ */ e(
+    w,
+    {
+      dataTest: "comparison-bar-chart",
+      title: n,
+      padding: 24,
+      gap: 24,
+      wrapperStyle: u,
+      children: L.map((t) => /* @__PURE__ */ e(
+        j,
+        {
+          row: t,
+          labelWidth: m,
+          barHeight: p,
+          showTooltip: d && o,
+          locale: h
+        },
+        t.bar.key
+      ))
+    }
+  );
+};
+export {
+  Q as ComparisonBarChart
+};
+//# sourceMappingURL=ComparisonBarChart.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonBarChart.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ChartCard, ChartValueRow } from '../ChartLayout';\nimport { COMPARISON_BAR_COLORS, pickColor } from '../chartPalette';\nimport {\n\tclamp,\n\tformatChartValue,\n\tformatPercent,\n\ttoChartValue,\n} from '../formatChartValue';\nimport type {\n\tComparisonBarChartI,\n\tComparisonBarI,\n} from './ComparisonBarChart.model';\nimport {\n\tBarArea,\n\tBarFill,\n\tBarLabelColumn,\n\tBarRowLayout,\n\tBarTooltip,\n\tBarTooltipArrow,\n\tBarTrack,\n} from './ComparisonBarChart.styled';\n\nconst PLACEHOLDER_BARS: ComparisonBarI[] = Array.from(\n\t{ length: 2 },\n\t(_, index) => ({ key: `placeholder-${index}`, label: '', value: 0 }),\n);\n\ninterface PreparedBar {\n\tbar: ComparisonBarI;\n\tfillWidth: number;\n\tcolor?: string;\n\tpercentageLabel: string;\n}\n\ninterface BarRowProps {\n\trow: PreparedBar;\n\tlabelWidth: number;\n\tbarHeight: number;\n\tshowTooltip: boolean;\n\tlocale?: string;\n}\n\nconst BarRow: React.FC<BarRowProps> = ({\n\trow: { bar, fillWidth, color, percentageLabel },\n\tlabelWidth,\n\tbarHeight,\n\tshowTooltip,\n\tlocale,\n}) => {\n\tconst [isHovered, setIsHovered] = useState(false);\n\n\treturn (\n\t\t<BarRowLayout>\n\t\t\t<BarLabelColumn $width={labelWidth}>\n\t\t\t\t<BodyCaption color={COLORS.content.secondary}>{bar.label}</BodyCaption>\n\t\t\t\t<ChartValueRow\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tbar.valueLabel ?? formatChartValue(toChartValue(bar.value), locale)\n\t\t\t\t\t}\n\t\t\t\t\tchip={percentageLabel}\n\t\t\t\t/>\n\t\t\t</BarLabelColumn>\n\n\t\t\t<BarArea\n\t\t\t\tdata-test={`comparison-bar-chart-bar-${bar.key}`}\n\t\t\t\tonMouseEnter={() => setIsHovered(true)}\n\t\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\t\t$height={barHeight}\n\t\t\t>\n\t\t\t\t<BarTrack data-test={`comparison-bar-chart-track-${bar.key}`}>\n\t\t\t\t\t<BarFill\n\t\t\t\t\t\tdata-test={`comparison-bar-chart-fill-${bar.key}`}\n\t\t\t\t\t\t$width={fillWidth}\n\t\t\t\t\t\t$color={color}\n\t\t\t\t\t/>\n\t\t\t\t</BarTrack>\n\t\t\t\t{showTooltip && isHovered && (\n\t\t\t\t\t<BarTooltip\n\t\t\t\t\t\tdata-test={`comparison-bar-chart-tooltip-${bar.key}`}\n\t\t\t\t\t\t$left={clamp(fillWidth / 2, 8, 92)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BarTooltipArrow />\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.primaryInverse}>\n\t\t\t\t\t\t\t{percentageLabel}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</BarTooltip>\n\t\t\t\t)}\n\t\t\t</BarArea>\n\t\t</BarRowLayout>\n\t);\n};\n\nexport const ComparisonBarChart: React.FC<ComparisonBarChartI> = ({\n\tbars = [],\n\ttitle,\n\ttotal,\n\tcolors = COMPARISON_BAR_COLORS,\n\tlabelWidth = 180,\n\tbarHeight = 52,\n\tlocale,\n\tshowTooltip = true,\n\twrapperStyle,\n}) => {\n\tconst hasData = bars.some((bar) => toChartValue(bar.value) > 0);\n\tconst visibleBars = bars.length ? bars : PLACEHOLDER_BARS;\n\n\tconst rows = useMemo<PreparedBar[]>(() => {\n\t\tconst denominator =\n\t\t\ttotal !== undefined\n\t\t\t\t? toChartValue(total)\n\t\t\t\t: visibleBars.reduce((sum, bar) => sum + toChartValue(bar.value), 0);\n\n\t\treturn visibleBars.map((bar, index) => {\n\t\t\tconst percentage =\n\t\t\t\tbar.percentage ??\n\t\t\t\t(denominator > 0 ? (toChartValue(bar.value) / denominator) * 100 : 0);\n\t\t\tconst share = Number.isFinite(percentage) ? Math.max(percentage, 0) : 0;\n\t\t\treturn {\n\t\t\t\tbar,\n\t\t\t\tfillWidth: clamp(share, 0, 100),\n\t\t\t\tcolor: hasData ? bar.color ?? pickColor(colors, index) : undefined,\n\t\t\t\tpercentageLabel: hasData\n\t\t\t\t\t? bar.percentageLabel ?? `${formatPercent(share)}%`\n\t\t\t\t\t: '',\n\t\t\t};\n\t\t});\n\t}, [visibleBars, total, colors, hasData]);\n\n\treturn (\n\t\t<ChartCard\n\t\t\tdataTest=\"comparison-bar-chart\"\n\t\t\ttitle={title}\n\t\t\tpadding={24}\n\t\t\tgap={24}\n\t\t\twrapperStyle={wrapperStyle}\n\t\t>\n\t\t\t{rows.map((row) => (\n\t\t\t\t<BarRow\n\t\t\t\t\tkey={row.bar.key}\n\t\t\t\t\trow={row}\n\t\t\t\t\tlabelWidth={labelWidth}\n\t\t\t\t\tbarHeight={barHeight}\n\t\t\t\t\tshowTooltip={showTooltip && hasData}\n\t\t\t\t\tlocale={locale}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ChartCard>\n\t);\n};\n"],"names":["PLACEHOLDER_BARS","_","index","BarRow","bar","fillWidth","color","percentageLabel","labelWidth","barHeight","showTooltip","locale","isHovered","setIsHovered","useState","BarRowLayout","jsxs","BarLabelColumn","jsx","BodyCaption","COLORS","ChartValueRow","formatChartValue","toChartValue","BarArea","BarTrack","BarFill","BarTooltip","clamp","BarTooltipArrow","ComparisonBarChart","bars","title","total","colors","COMPARISON_BAR_COLORS","wrapperStyle","hasData","visibleBars","rows","useMemo","denominator","sum","percentage","share","pickColor","formatPercent","ChartCard","row"],"mappings":";;;;;;;;AAyBA,MAAMA,IAAqC,MAAM;AAAA,EAChD,EAAE,QAAQ,EAAA;AAAA,EACV,CAACC,GAAGC,OAAW,EAAE,KAAK,eAAeA,CAAK,IAAI,OAAO,IAAI,OAAO,EAAA;AACjE,GAiBMC,IAAgC,CAAC;AAAA,EACtC,KAAK,EAAE,KAAAC,GAAK,WAAAC,GAAW,OAAAC,GAAO,iBAAAC,EAAA;AAAA,EAC9B,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAEhD,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAe,QAAQT,GACvB,UAAA;AAAA,MAAA,gBAAAU,EAACC,KAAY,OAAOC,EAAO,QAAQ,WAAY,YAAI,OAAM;AAAA,MACzD,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,OACCjB,EAAI,cAAckB,EAAiBC,EAAanB,EAAI,KAAK,GAAGO,CAAM;AAAA,UAEnE,MAAMJ;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,GACD;AAAA,IAEA,gBAAAS;AAAA,MAACQ;AAAA,MAAA;AAAA,QACA,aAAW,4BAA4BpB,EAAI,GAAG;AAAA,QAC9C,cAAc,MAAMS,EAAa,EAAI;AAAA,QACrC,cAAc,MAAMA,EAAa,EAAK;AAAA,QACtC,SAASJ;AAAA,QAET,UAAA;AAAA,UAAA,gBAAAS,EAACO,GAAA,EAAS,aAAW,8BAA8BrB,EAAI,GAAG,IACzD,UAAA,gBAAAc;AAAA,YAACQ;AAAA,YAAA;AAAA,cACA,aAAW,6BAA6BtB,EAAI,GAAG;AAAA,cAC/C,QAAQC;AAAA,cACR,QAAQC;AAAA,YAAA;AAAA,UAAA,GAEV;AAAA,UACCI,KAAeE,KACf,gBAAAI;AAAA,YAACW;AAAA,YAAA;AAAA,cACA,aAAW,gCAAgCvB,EAAI,GAAG;AAAA,cAClD,OAAOwB,EAAMvB,IAAY,GAAG,GAAG,EAAE;AAAA,cAEjC,UAAA;AAAA,gBAAA,gBAAAa,EAACW,GAAA,EAAgB;AAAA,kCAChBV,GAAA,EAAY,OAAOC,EAAO,QAAQ,gBACjC,UAAAb,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAEF,GACD;AAEF,GAEauB,IAAoD,CAAC;AAAA,EACjE,MAAAC,IAAO,CAAA;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAASC;AAAA,EACT,YAAA3B,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,QAAAE;AAAA,EACA,aAAAD,IAAc;AAAA,EACd,cAAA0B;AACD,MAAM;AACL,QAAMC,IAAUN,EAAK,KAAK,CAAC3B,MAAQmB,EAAanB,EAAI,KAAK,IAAI,CAAC,GACxDkC,IAAcP,EAAK,SAASA,IAAO/B,GAEnCuC,IAAOC,EAAuB,MAAM;AACzC,UAAMC,IACLR,MAAU,SACPV,EAAaU,CAAK,IAClBK,EAAY,OAAO,CAACI,GAAKtC,MAAQsC,IAAMnB,EAAanB,EAAI,KAAK,GAAG,CAAC;AAErE,WAAOkC,EAAY,IAAI,CAAClC,GAAKF,MAAU;AACtC,YAAMyC,IACLvC,EAAI,eACHqC,IAAc,IAAKlB,EAAanB,EAAI,KAAK,IAAIqC,IAAe,MAAM,IAC9DG,IAAQ,OAAO,SAASD,CAAU,IAAI,KAAK,IAAIA,GAAY,CAAC,IAAI;AACtE,aAAO;AAAA,QACN,KAAAvC;AAAA,QACA,WAAWwB,EAAMgB,GAAO,GAAG,GAAG;AAAA,QAC9B,OAAOP,IAAUjC,EAAI,SAASyC,EAAUX,GAAQhC,CAAK,IAAI;AAAA,QACzD,iBAAiBmC,IACdjC,EAAI,mBAAmB,GAAG0C,EAAcF,CAAK,CAAC,MAC9C;AAAA,MAAA;AAAA,IAEL,CAAC;AAAA,EACF,GAAG,CAACN,GAAaL,GAAOC,GAAQG,CAAO,CAAC;AAExC,SACC,gBAAAnB;AAAA,IAAC6B;AAAA,IAAA;AAAA,MACA,UAAS;AAAA,MACT,OAAAf;AAAA,MACA,SAAS;AAAA,MACT,KAAK;AAAA,MACL,cAAAI;AAAA,MAEC,UAAAG,EAAK,IAAI,CAACS,MACV,gBAAA9B;AAAA,QAACf;AAAA,QAAA;AAAA,UAEA,KAAA6C;AAAA,UACA,YAAAxC;AAAA,UACA,WAAAC;AAAA,UACA,aAAaC,KAAe2B;AAAA,UAC5B,QAAA1B;AAAA,QAAA;AAAA,QALKqC,EAAI,IAAI;AAAA,MAAA,CAOd;AAAA,IAAA;AAAA,EAAA;AAGJ;"}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.model.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+export interface ComparisonBarI {
+    key: string;
+    label: string;
+    value: number;
+    valueLabel?: string;
+    percentage?: number;
+    percentageLabel?: string;
+    color?: string;
+}
+export interface ComparisonBarChartI {
+    bars: ComparisonBarI[];
+    title?: string;
+    total?: number;
+    colors?: string[];
+    labelWidth?: number;
+    barHeight?: number;
+    locale?: string;
+    showTooltip?: boolean;
+    wrapperStyle?: CSSProperties;
+}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.styled.d.ts

@@ -0,0 +1,16 @@
+export declare const BarRowLayout: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const BarLabelColumn: import('styled-components').StyledComponent<"div", any, {
+    $width: number;
+}, never>;
+export declare const BarArea: import('styled-components').StyledComponent<"div", any, {
+    $height: number;
+}, never>;
+export declare const BarTrack: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const BarFill: import('styled-components').StyledComponent<"div", any, {
+    $width: number;
+    $color?: string | undefined;
+}, never>;
+export declare const BarTooltip: import('styled-components').StyledComponent<"div", any, {
+    $left: number;
+}, never>;
+export declare const BarTooltipArrow: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.styled.js

@@ -0,0 +1,61 @@
+import t from "styled-components";
+import { COLORS as r } from "../../../../constants/Theme.js";
+const a = t.div`
+	display: flex;
+	align-items: center;
+	gap: 32px;
+`, n = t.div`
+	width: ${(o) => o.$width}px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`, p = t.div`
+	position: relative;
+	flex: 1;
+	height: ${(o) => o.$height}px;
+`, s = t.div`
+	position: absolute;
+	inset: 0;
+	border-radius: 4px;
+	border: 1px solid ${r.stroke.primary};
+	background-color: ${r.surface.standard};
+	overflow: hidden;
+`, d = t.div`
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: ${(o) => o.$width}%;
+	background-color: ${(o) => o.$color ?? "transparent"};
+`, l = t.div`
+	position: absolute;
+	top: 50%;
+	left: ${(o) => o.$left}%;
+	transform: translate(-50%, -50%);
+	padding: 4px 8px;
+	border-radius: 4px;
+	background-color: ${r.content.primary};
+	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
+	pointer-events: none;
+`, x = t.div`
+	position: absolute;
+	top: -5px;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 5px solid ${r.content.primary};
+`;
+export {
+  p as BarArea,
+  d as BarFill,
+  n as BarLabelColumn,
+  a as BarRowLayout,
+  l as BarTooltip,
+  x as BarTooltipArrow,
+  s as BarTrack
+};
+//# sourceMappingURL=ComparisonBarChart.styled.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonBarChart.styled.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const BarRowLayout = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 32px;\n`;\n\nexport const BarLabelColumn = styled.div<{ $width: number }>`\n\twidth: ${(props) => props.$width}px;\n\tflex-shrink: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const BarArea = styled.div<{ $height: number }>`\n\tposition: relative;\n\tflex: 1;\n\theight: ${(props) => props.$height}px;\n`;\n\nexport const BarTrack = styled.div`\n\tposition: absolute;\n\tinset: 0;\n\tborder-radius: 4px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tbackground-color: ${COLORS.surface.standard};\n\toverflow: hidden;\n`;\n\nexport const BarFill = styled.div<{ $width: number; $color?: string }>`\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\twidth: ${(props) => props.$width}%;\n\tbackground-color: ${(props) => props.$color ?? 'transparent'};\n`;\n\nexport const BarTooltip = styled.div<{ $left: number }>`\n\tposition: absolute;\n\ttop: 50%;\n\tleft: ${(props) => props.$left}%;\n\ttransform: translate(-50%, -50%);\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tbackground-color: ${COLORS.content.primary};\n\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);\n\tpointer-events: none;\n`;\n\nexport const BarTooltipArrow = styled.div`\n\tposition: absolute;\n\ttop: -5px;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\twidth: 0;\n\theight: 0;\n\tborder-left: 5px solid transparent;\n\tborder-right: 5px solid transparent;\n\tborder-bottom: 5px solid ${COLORS.content.primary};\n`;\n"],"names":["BarRowLayout","styled","BarLabelColumn","props","BarArea","BarTrack","COLORS","BarFill","BarTooltip","BarTooltipArrow"],"mappings":";;AAGO,MAAMA,IAAeC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMtBC,IAAiBD,EAAO;AAAA,UAC3B,CAACE,MAAUA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,GAOpBC,IAAUH,EAAO;AAAA;AAAA;AAAA,WAGnB,CAACE,MAAUA,EAAM,OAAO;AAAA,GAGtBE,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA,qBAIVK,EAAO,OAAO,OAAO;AAAA,qBACrBA,EAAO,QAAQ,QAAQ;AAAA;AAAA,GAI/BC,IAAUN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpB,CAACE,MAAUA,EAAM,MAAM;AAAA,qBACZ,CAACA,MAAUA,EAAM,UAAU,aAAa;AAAA,GAGhDK,IAAaP,EAAO;AAAA;AAAA;AAAA,SAGxB,CAACE,MAAUA,EAAM,KAAK;AAAA;AAAA;AAAA;AAAA,qBAIVG,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,GAK9BG,IAAkBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BASVK,EAAO,QAAQ,OAAO;AAAA;"}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { FunnelChartI } from './FunnelChart.model';
+export declare const FunnelChart: React.FC<FunnelChartI>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.js

@@ -0,0 +1,109 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { useMemo as s } from "react";
+import { BodyTiny as C } from "../../../TypographyStyle.js";
+import { COLORS as S } from "../../../../constants/Theme.js";
+import { ChartCard as k, ChartValueRow as w } from "../ChartLayout.js";
+import { pickColor as g, FUNNEL_BAND_COLORS as E } from "../chartPalette.js";
+import { toChartValue as m, formatPercent as O, formatChartValue as R } from "../formatChartValue.js";
+import { PlotArea as A, BandsSvg as _, SeparatorLine as v, HeaderRow as B, StageHeaderColumn as D, StageLabelRow as N, StageColorDot as P } from "./FunnelChart.styled.js";
+import { buildFunnelLayout as V, FUNNEL_VIEW_WIDTH as L } from "./funnelGeometry.js";
+const F = Array.from(
+  { length: 4 },
+  (r, n) => ({ key: `placeholder-${n}`, label: "", value: 0 })
+), T = (r, n) => {
+  const a = r[n];
+  if (a.percentageLabel !== void 0)
+    return a.percentageLabel;
+  if (n === 0)
+    return m(a.value) > 0 ? "100%" : "";
+  const t = a.branchOf ? r.find((u) => u.key === a.branchOf) : r[n - 1], l = m(t?.value);
+  if (!t || l === 0)
+    return "";
+  const h = m(a.value) / l * 100;
+  return `${O(h)}% of ${t.label}`;
+}, j = ({
+  stage: r,
+  color: n,
+  chip: a,
+  locale: t
+}) => /* @__PURE__ */ y(D, { "data-test": `funnel-chart-header-${r.key}`, children: [
+  r.label && /* @__PURE__ */ y(N, { children: [
+    /* @__PURE__ */ o(P, { $color: n }),
+    /* @__PURE__ */ o(C, { color: S.content.secondary, children: r.label })
+  ] }),
+  /* @__PURE__ */ o(
+    w,
+    {
+      value: r.valueLabel ?? R(m(r.value), t),
+      chip: a
+    }
+  )
+] }), K = ({
+  stages: r = [],
+  title: n,
+  plotHeight: a = 291,
+  headerHeight: t = 83,
+  colors: l = E,
+  locale: h,
+  wrapperStyle: u
+}) => {
+  const c = r.length ? r : F, i = s(
+    () => V(c, { plotHeight: a, headerHeight: t }),
+    [c, a, t]
+  ), p = !i.isEmpty, $ = (e) => `${e / L * 100}%`, d = s(
+    () => c.map((e, f) => ({
+      stage: e,
+      color: p ? e.color ?? g(l, f) : S.content.inactive,
+      chip: p ? T(c, f) : ""
+    })),
+    [c, l, p]
+  ), b = s(
+    () => new Map(d.map(({ stage: e, color: f }) => [e.key, f])),
+    [d]
+  );
+  return /* @__PURE__ */ o(
+    k,
+    {
+      dataTest: "funnel-chart",
+      title: n,
+      padding: "18px 24px",
+      gap: 14,
+      wrapperStyle: { overflow: "hidden", ...u },
+      children: /* @__PURE__ */ y(A, { $height: a, children: [
+        /* @__PURE__ */ o(
+          _,
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${L} ${a}`,
+            preserveAspectRatio: "none",
+            "aria-hidden": !0,
+            children: i.bands.map((e) => /* @__PURE__ */ o(
+              "path",
+              {
+                "data-test": `funnel-chart-band-${e.key}`,
+                d: e.d,
+                fill: p ? b.get(e.key) : "transparent"
+              },
+              e.key
+            ))
+          }
+        ),
+        i.separators.full.map((e) => /* @__PURE__ */ o(v, { $left: $(e) }, `full-${e}`)),
+        i.separators.header.map((e) => /* @__PURE__ */ o(
+          v,
+          {
+            $left: $(e),
+            $height: t
+          },
+          `header-${e}`
+        )),
+        /* @__PURE__ */ o(B, { $height: t, children: d.map((e) => /* @__PURE__ */ o(j, { ...e, locale: h }, e.stage.key)) })
+      ] })
+    }
+  );
+};
+export {
+  K as FunnelChart
+};
+//# sourceMappingURL=FunnelChart.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { BodyTiny } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ChartCard, ChartValueRow } from '../ChartLayout';\nimport { FUNNEL_BAND_COLORS, pickColor } from '../chartPalette';\nimport {\n\tformatChartValue,\n\tformatPercent,\n\ttoChartValue,\n} from '../formatChartValue';\nimport type { FunnelChartI, FunnelStageI } from './FunnelChart.model';\nimport {\n\tBandsSvg,\n\tHeaderRow,\n\tPlotArea,\n\tSeparatorLine,\n\tStageColorDot,\n\tStageHeaderColumn,\n\tStageLabelRow,\n} from './FunnelChart.styled';\nimport { buildFunnelLayout, FUNNEL_VIEW_WIDTH } from './funnelGeometry';\n\nconst PLACEHOLDER_STAGES: FunnelStageI[] = Array.from(\n\t{ length: 4 },\n\t(_, index) => ({ key: `placeholder-${index}`, label: '', value: 0 }),\n);\n\nconst derivePercentageLabel = (\n\tstages: FunnelStageI[],\n\tindex: number,\n): string => {\n\tconst stage = stages[index];\n\tif (stage.percentageLabel !== undefined) {\n\t\treturn stage.percentageLabel;\n\t}\n\tif (index === 0) {\n\t\treturn toChartValue(stage.value) > 0 ? '100%' : '';\n\t}\n\tconst reference = stage.branchOf\n\t\t? stages.find((candidate) => candidate.key === stage.branchOf)\n\t\t: stages[index - 1];\n\tconst referenceValue = toChartValue(reference?.value);\n\tif (!reference || referenceValue === 0) {\n\t\treturn '';\n\t}\n\tconst share = (toChartValue(stage.value) / referenceValue) * 100;\n\treturn `${formatPercent(share)}% of ${reference.label}`;\n};\n\ninterface StageHeaderProps {\n\tstage: FunnelStageI;\n\tcolor?: string;\n\tchip: string;\n\tlocale?: string;\n}\n\nconst StageHeader: React.FC<StageHeaderProps> = ({\n\tstage,\n\tcolor,\n\tchip,\n\tlocale,\n}) => (\n\t<StageHeaderColumn data-test={`funnel-chart-header-${stage.key}`}>\n\t\t{stage.label && (\n\t\t\t<StageLabelRow>\n\t\t\t\t<StageColorDot $color={color} />\n\t\t\t\t<BodyTiny color={COLORS.content.secondary}>{stage.label}</BodyTiny>\n\t\t\t</StageLabelRow>\n\t\t)}\n\t\t<ChartValueRow\n\t\t\tvalue={\n\t\t\t\tstage.valueLabel ?? formatChartValue(toChartValue(stage.value), locale)\n\t\t\t}\n\t\t\tchip={chip}\n\t\t/>\n\t</StageHeaderColumn>\n);\n\nexport const FunnelChart: React.FC<FunnelChartI> = ({\n\tstages = [],\n\ttitle,\n\tplotHeight = 291,\n\theaderHeight = 83,\n\tcolors = FUNNEL_BAND_COLORS,\n\tlocale,\n\twrapperStyle,\n}) => {\n\tconst visibleStages = stages.length ? stages : PLACEHOLDER_STAGES;\n\n\tconst layout = useMemo(\n\t\t() => buildFunnelLayout(visibleStages, { plotHeight, headerHeight }),\n\t\t[visibleStages, plotHeight, headerHeight],\n\t);\n\n\tconst hasData = !layout.isEmpty;\n\tconst toPercent = (x: number) => `${(x / FUNNEL_VIEW_WIDTH) * 100}%`;\n\n\tconst headers = useMemo(\n\t\t() =>\n\t\t\tvisibleStages.map((stage, index) => ({\n\t\t\t\tstage,\n\t\t\t\tcolor: hasData\n\t\t\t\t\t? stage.color ?? pickColor(colors, index)\n\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\tchip: hasData ? derivePercentageLabel(visibleStages, index) : '',\n\t\t\t})),\n\t\t[visibleStages, colors, hasData],\n\t);\n\n\tconst colorByStage = useMemo(\n\t\t() => new Map(headers.map(({ stage, color }) => [stage.key, color])),\n\t\t[headers],\n\t);\n\n\treturn (\n\t\t<ChartCard\n\t\t\tdataTest=\"funnel-chart\"\n\t\t\ttitle={title}\n\t\t\tpadding=\"18px 24px\"\n\t\t\tgap={14}\n\t\t\twrapperStyle={{ overflow: 'hidden', ...wrapperStyle }}\n\t\t>\n\t\t\t<PlotArea $height={plotHeight}>\n\t\t\t\t<BandsSvg\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\theight=\"100%\"\n\t\t\t\t\tviewBox={`0 0 ${FUNNEL_VIEW_WIDTH} ${plotHeight}`}\n\t\t\t\t\tpreserveAspectRatio=\"none\"\n\t\t\t\t\taria-hidden\n\t\t\t\t>\n\t\t\t\t\t{layout.bands.map((band) => (\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\tkey={band.key}\n\t\t\t\t\t\t\tdata-test={`funnel-chart-band-${band.key}`}\n\t\t\t\t\t\t\td={band.d}\n\t\t\t\t\t\t\tfill={hasData ? colorByStage.get(band.key) : 'transparent'}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</BandsSvg>\n\n\t\t\t\t{layout.separators.full.map((x) => (\n\t\t\t\t\t<SeparatorLine key={`full-${x}`} $left={toPercent(x)} />\n\t\t\t\t))}\n\t\t\t\t{layout.separators.header.map((x) => (\n\t\t\t\t\t<SeparatorLine\n\t\t\t\t\t\tkey={`header-${x}`}\n\t\t\t\t\t\t$left={toPercent(x)}\n\t\t\t\t\t\t$height={headerHeight}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\n\t\t\t\t<HeaderRow $height={headerHeight}>\n\t\t\t\t\t{headers.map((header) => (\n\t\t\t\t\t\t<StageHeader key={header.stage.key} {...header} locale={locale} />\n\t\t\t\t\t))}\n\t\t\t\t</HeaderRow>\n\t\t\t</PlotArea>\n\t\t</ChartCard>\n\t);\n};\n"],"names":["PLACEHOLDER_STAGES","_","index","derivePercentageLabel","stages","stage","toChartValue","reference","candidate","referenceValue","share","formatPercent","StageHeader","color","chip","locale","StageHeaderColumn","StageLabelRow","jsx","StageColorDot","BodyTiny","COLORS","ChartValueRow","formatChartValue","FunnelChart","title","plotHeight","headerHeight","colors","FUNNEL_BAND_COLORS","wrapperStyle","visibleStages","layout","useMemo","buildFunnelLayout","hasData","toPercent","x","FUNNEL_VIEW_WIDTH","headers","pickColor","colorByStage","ChartCard","jsxs","PlotArea","BandsSvg","band","SeparatorLine","HeaderRow","header"],"mappings":"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"}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.model.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+export interface FunnelStageI {
+    key: string;
+    label: string;
+    value: number;
+    valueLabel?: string;
+    percentageLabel?: string;
+    color?: string;
+    branchOf?: string;
+}
+export interface FunnelChartI {
+    stages: FunnelStageI[];
+    title?: string;
+    plotHeight?: number;
+    headerHeight?: number;
+    colors?: string[];
+    locale?: string;
+    wrapperStyle?: CSSProperties;
+}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.styled.d.ts

@@ -0,0 +1,16 @@
+export declare const SeparatorLine: import('styled-components').StyledComponent<"div", any, {
+    $left: string;
+    $height?: number | undefined;
+}, never>;
+export declare const PlotArea: import('styled-components').StyledComponent<"div", any, {
+    $height: number;
+}, never>;
+export declare const BandsSvg: import('styled-components').StyledComponent<"svg", any, {}, never>;
+export declare const HeaderRow: import('styled-components').StyledComponent<"div", any, {
+    $height: number;
+}, never>;
+export declare const StageHeaderColumn: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StageLabelRow: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StageColorDot: import('styled-components').StyledComponent<"span", any, {
+    $color?: string | undefined;
+}, never>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.styled.js

@@ -0,0 +1,54 @@
+import i from "styled-components";
+import { COLORS as o } from "../../../../constants/Theme.js";
+const p = i.div`
+	position: absolute;
+	top: 0;
+	${(t) => t.$height === void 0 ? "bottom: 0;" : `height: ${t.$height}px;`}
+	left: ${(t) => t.$left};
+	width: 1px;
+	background-color: ${o.stroke.primary};
+`, r = i.div`
+	position: relative;
+	width: 100%;
+	height: ${(t) => t.$height}px;
+`, l = i.svg`
+	position: absolute;
+	inset: 0;
+`, n = i.div`
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: ${(t) => t.$height}px;
+	display: flex;
+`, s = i.div`
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	align-items: flex-start;
+	padding: 0 8px 0 12px;
+`, d = i.div`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	opacity: 0.8;
+`, h = i.span`
+	width: 16px;
+	height: 16px;
+	border-radius: 2.667px;
+	background-color: ${(t) => t.$color ?? "transparent"};
+	flex-shrink: 0;
+`;
+export {
+  l as BandsSvg,
+  n as HeaderRow,
+  r as PlotArea,
+  p as SeparatorLine,
+  h as StageColorDot,
+  s as StageHeaderColumn,
+  d as StageLabelRow
+};
+//# sourceMappingURL=FunnelChart.styled.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.styled.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const SeparatorLine = styled.div<{ $left: string; $height?: number }>`\n\tposition: absolute;\n\ttop: 0;\n\t${(props) =>\n\t\tprops.$height === undefined ? 'bottom: 0;' : `height: ${props.$height}px;`}\n\tleft: ${(props) => props.$left};\n\twidth: 1px;\n\tbackground-color: ${COLORS.stroke.primary};\n`;\n\nexport const PlotArea = styled.div<{ $height: number }>`\n\tposition: relative;\n\twidth: 100%;\n\theight: ${(props) => props.$height}px;\n`;\n\nexport const BandsSvg = styled.svg`\n\tposition: absolute;\n\tinset: 0;\n`;\n\nexport const HeaderRow = styled.div<{ $height: number }>`\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\theight: ${(props) => props.$height}px;\n\tdisplay: flex;\n`;\n\nexport const StageHeaderColumn = styled.div`\n\tflex: 1;\n\tmin-width: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\talign-items: flex-start;\n\tpadding: 0 8px 0 12px;\n`;\n\nexport const StageLabelRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\twidth: 100%;\n\topacity: 0.8;\n`;\n\nexport const StageColorDot = styled.span<{ $color?: string }>`\n\twidth: 16px;\n\theight: 16px;\n\tborder-radius: 2.667px;\n\tbackground-color: ${(props) => props.$color ?? 'transparent'};\n\tflex-shrink: 0;\n`;\n"],"names":["SeparatorLine","styled","props","COLORS","PlotArea","BandsSvg","HeaderRow","StageHeaderColumn","StageLabelRow","StageColorDot"],"mappings":";;AAGO,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA,GAGjC,CAACC,MACFA,EAAM,YAAY,SAAY,eAAe,WAAWA,EAAM,OAAO,KAAK;AAAA,SACnE,CAACA,MAAUA,EAAM,KAAK;AAAA;AAAA,qBAEVC,EAAO,OAAO,OAAO;AAAA,GAG7BC,IAAWH,EAAO;AAAA;AAAA;AAAA,WAGpB,CAACC,MAAUA,EAAM,OAAO;AAAA,GAGtBG,IAAWJ,EAAO;AAAA;AAAA;AAAA,GAKlBK,IAAYL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKrB,CAACC,MAAUA,EAAM,OAAO;AAAA;AAAA,GAItBK,IAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU3BO,IAAgBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQvBQ,IAAgBR,EAAO;AAAA;AAAA;AAAA;AAAA,qBAIf,CAACC,MAAUA,EAAM,UAAU,aAAa;AAAA;AAAA;"}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.d.ts

@@ -0,0 +1,23 @@
+export declare const FUNNEL_VIEW_WIDTH = 1000;
+export interface FunnelGeometryStage {
+    key: string;
+    value: number;
+    branchOf?: string;
+}
+export interface FunnelGeometryOptions {
+    plotHeight: number;
+    headerHeight: number;
+}
+export interface FunnelBandLayout {
+    key: string;
+    d: string;
+}
+export interface FunnelLayout {
+    bands: FunnelBandLayout[];
+    separators: {
+        full: number[];
+        header: number[];
+    };
+    isEmpty: boolean;
+}
+export declare const buildFunnelLayout: (stages: FunnelGeometryStage[], { plotHeight, headerHeight }: FunnelGeometryOptions) => FunnelLayout;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.js

@@ -0,0 +1,48 @@
+import { toChartValue as x, clamp as k } from "../formatChartValue.js";
+const B = 1e3, a = (n) => Math.round(n * 100) / 100, F = (n) => n.reduce((c, s, o) => {
+  const r = c[c.length - 1];
+  return s.branchOf && r?.branchOf === s.branchOf ? r.stageIndexes.push(o) : c.push({ branchOf: s.branchOf, stageIndexes: [o] }), c;
+}, []), N = (n, { plotHeight: c, headerHeight: s }) => {
+  const o = Math.max(c - s, 0), r = s + o / 2, b = x(n[0]?.value), $ = n.length === 0 || b === 0 || o === 0, p = (t) => a(t / n.length * B), g = (t) => $ ? 0 : k(t / b * o, 0, o), l = F(n);
+  let m = 0;
+  const h = l.map((t) => {
+    const e = p(m);
+    return m += t.stageIndexes.length, { x0: e, x1: p(m) };
+  }), I = l.map(
+    (t) => t.stageIndexes.reduce(
+      (e, u) => e + x(n[u].value),
+      0
+    )
+  ), O = [];
+  return l.forEach((t, e) => {
+    const { x0: u, x1: T } = h[e], f = I[e], V = I[e + 1] ?? f, E = g(f), L = g(V);
+    let i = r - E / 2, d = r - L / 2;
+    t.stageIndexes.forEach((y) => {
+      const M = f > 0 ? x(n[y].value) / f : 0, v = i + E * M, C = d + L * M;
+      O.push({
+        key: n[y].key,
+        d: [
+          `M${u} ${a(i)}`,
+          `L${T} ${a(d)}`,
+          `L${T} ${a(C)}`,
+          `L${u} ${a(v)}`,
+          "Z"
+        ].join(" ")
+      }), i = v, d = C;
+    });
+  }), {
+    bands: O,
+    separators: {
+      full: h.length ? [h[0].x0, ...h.map((t) => t.x1)] : [],
+      header: l.flatMap(
+        (t) => t.stageIndexes.slice(1).map((e) => p(e))
+      )
+    },
+    isEmpty: $
+  };
+};
+export {
+  B as FUNNEL_VIEW_WIDTH,
+  N as buildFunnelLayout
+};
+//# sourceMappingURL=funnelGeometry.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnelGeometry.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.ts"],"sourcesContent":["import { clamp, toChartValue } from '../formatChartValue';\n\nexport const FUNNEL_VIEW_WIDTH = 1000;\n\nexport interface FunnelGeometryStage {\n\tkey: string;\n\tvalue: number;\n\tbranchOf?: string;\n}\n\nexport interface FunnelGeometryOptions {\n\tplotHeight: number;\n\theaderHeight: number;\n}\n\nexport interface FunnelBandLayout {\n\tkey: string;\n\td: string;\n}\n\nexport interface FunnelLayout {\n\tbands: FunnelBandLayout[];\n\tseparators: {\n\t\tfull: number[];\n\t\theader: number[];\n\t};\n\tisEmpty: boolean;\n}\n\ninterface ColumnGroup {\n\tbranchOf?: string;\n\tstageIndexes: number[];\n}\n\nconst round = (value: number) => Math.round(value * 100) / 100;\n\n// Consecutive stages sharing a `branchOf` share one column, stacked vertically within it.\nconst groupIntoColumns = (stages: FunnelGeometryStage[]): ColumnGroup[] =>\n\tstages.reduce<ColumnGroup[]>((groups, stage, index) => {\n\t\tconst current = groups[groups.length - 1];\n\t\tif (stage.branchOf && current?.branchOf === stage.branchOf) {\n\t\t\tcurrent.stageIndexes.push(index);\n\t\t} else {\n\t\t\tgroups.push({ branchOf: stage.branchOf, stageIndexes: [index] });\n\t\t}\n\t\treturn groups;\n\t}, []);\n\nexport const buildFunnelLayout = (\n\tstages: FunnelGeometryStage[],\n\t{ plotHeight, headerHeight }: FunnelGeometryOptions,\n): FunnelLayout => {\n\tconst bandArea = Math.max(plotHeight - headerHeight, 0);\n\tconst centerY = headerHeight + bandArea / 2;\n\t// Every height is a fraction of the first stage, so it always fills the full band area.\n\tconst baseValue = toChartValue(stages[0]?.value);\n\tconst isEmpty = stages.length === 0 || baseValue === 0 || bandArea === 0;\n\n\tconst toX = (cellIndex: number) =>\n\t\tround((cellIndex / stages.length) * FUNNEL_VIEW_WIDTH);\n\tconst heightOf = (value: number) =>\n\t\tisEmpty ? 0 : clamp((value / baseValue) * bandArea, 0, bandArea);\n\n\tconst groups = groupIntoColumns(stages);\n\tlet cellCursor = 0;\n\tconst columns = groups.map((group) => {\n\t\tconst x0 = toX(cellCursor);\n\t\tcellCursor += group.stageIndexes.length;\n\t\treturn { x0, x1: toX(cellCursor) };\n\t});\n\n\tconst columnTotals = groups.map((group) =>\n\t\tgroup.stageIndexes.reduce(\n\t\t\t(total, index) => total + toChartValue(stages[index].value),\n\t\t\t0,\n\t\t),\n\t);\n\n\tconst bands: FunnelBandLayout[] = [];\n\tgroups.forEach((group, columnIndex) => {\n\t\tconst { x0, x1 } = columns[columnIndex];\n\t\tconst leftTotal = columnTotals[columnIndex];\n\t\tconst rightTotal = columnTotals[columnIndex + 1] ?? leftTotal;\n\t\tconst leftHeight = heightOf(leftTotal);\n\t\tconst rightHeight = heightOf(rightTotal);\n\n\t\tlet leftTop = centerY - leftHeight / 2;\n\t\tlet rightTop = centerY - rightHeight / 2;\n\n\t\t// Each stage takes its share of the column edge, stacking downward from the previous one,\n\t\t// so a band's left and right edges line up with its neighbours in adjacent columns.\n\t\tgroup.stageIndexes.forEach((stageIndex) => {\n\t\t\tconst share =\n\t\t\t\tleftTotal > 0 ? toChartValue(stages[stageIndex].value) / leftTotal : 0;\n\t\t\tconst leftBottom = leftTop + leftHeight * share;\n\t\t\tconst rightBottom = rightTop + rightHeight * share;\n\t\t\tbands.push({\n\t\t\t\tkey: stages[stageIndex].key,\n\t\t\t\td: [\n\t\t\t\t\t`M${x0} ${round(leftTop)}`,\n\t\t\t\t\t`L${x1} ${round(rightTop)}`,\n\t\t\t\t\t`L${x1} ${round(rightBottom)}`,\n\t\t\t\t\t`L${x0} ${round(leftBottom)}`,\n\t\t\t\t\t'Z',\n\t\t\t\t].join(' '),\n\t\t\t});\n\t\t\tleftTop = leftBottom;\n\t\t\trightTop = rightBottom;\n\t\t});\n\t});\n\n\treturn {\n\t\tbands,\n\t\tseparators: {\n\t\t\tfull: columns.length ? [columns[0].x0, ...columns.map((c) => c.x1)] : [],\n\t\t\theader: groups.flatMap((group) =>\n\t\t\t\tgroup.stageIndexes.slice(1).map((index) => toX(index)),\n\t\t\t),\n\t\t},\n\t\tisEmpty,\n\t};\n};\n"],"names":["FUNNEL_VIEW_WIDTH","round","value","groupIntoColumns","stages","groups","stage","index","current","buildFunnelLayout","plotHeight","headerHeight","bandArea","centerY","baseValue","toChartValue","isEmpty","toX","cellIndex","heightOf","clamp","cellCursor","columns","group","x0","columnTotals","total","bands","columnIndex","x1","leftTotal","rightTotal","leftHeight","rightHeight","leftTop","rightTop","stageIndex","share","leftBottom","rightBottom","c"],"mappings":"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"}