@bikdotai/bik-component-library 0.0.859-beta.0 → 0.0.859
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.
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js.map +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js.map +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.js.map +1 -1
- package/dist/cjs/icons/Informational/Communication/At.js +2 -0
- package/dist/cjs/icons/Informational/Communication/At.js.map +1 -0
- package/dist/cjs/icons/index.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.d.ts +0 -3
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +172 -182
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js.map +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js.map +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.d.ts +0 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.js.map +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/index.d.ts +0 -4
- package/dist/esm/icons/Informational/Communication/At.d.ts +7 -0
- package/dist/esm/icons/Informational/Communication/At.js +47 -0
- package/dist/esm/icons/Informational/Communication/At.js.map +1 -0
- package/dist/esm/icons/Informational/Communication/index.d.ts +1 -0
- package/dist/esm/icons/index.d.ts +24 -24
- package/dist/esm/icons/index.js +592 -590
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/index.js +379 -383
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ChartLayout.js +0 -2
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ChartLayout.js.map +0 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.js +0 -2
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.js.map +0 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.js +0 -2
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.js.map +0 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.js +0 -2
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.js.map +0 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/chartPalette.js +0 -2
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/chartPalette.js.map +0 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/formatChartValue.js +0 -2
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/formatChartValue.js.map +0 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/ChartLayout.d.ts +0 -16
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/ChartLayout.js +0 -69
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/ChartLayout.js.map +0 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.d.ts +0 -3
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.js +0 -166
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.js.map +0 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.model.d.ts +0 -21
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.d.ts +0 -3
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.js +0 -176
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.js.map +0 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.model.d.ts +0 -19
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.d.ts +0 -23
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.js +0 -48
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.js.map +0 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/chartPalette.d.ts +0 -3
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/chartPalette.js +0 -18
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/chartPalette.js.map +0 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/formatChartValue.d.ts +0 -4
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/formatChartValue.js +0 -13
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/formatChartValue.js.map +0 -1
package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.js.map
DELETED
|
@@ -1 +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 { 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\nconst Separator: React.FC<{ left: string; height?: number }> = ({\n\tleft,\n\theight,\n}) => (\n\t<div\n\t\tstyle={{\n\t\t\tposition: 'absolute',\n\t\t\ttop: 0,\n\t\t\tbottom: height === undefined ? 0 : undefined,\n\t\t\theight,\n\t\t\tleft,\n\t\t\twidth: 1,\n\t\t\tbackgroundColor: COLORS.stroke.primary,\n\t\t}}\n\t/>\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<div\n\t\tdata-test={`funnel-chart-header-${stage.key}`}\n\t\tstyle={{\n\t\t\tflex: 1,\n\t\t\tminWidth: 0,\n\t\t\tdisplay: 'flex',\n\t\t\tflexDirection: 'column',\n\t\t\tgap: 8,\n\t\t\talignItems: 'flex-start',\n\t\t\tpadding: '0 8px 0 12px',\n\t\t}}\n\t>\n\t\t{stage.label && (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tgap: 8,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\topacity: 0.8,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborderRadius: 2.667,\n\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<BodyTiny color={COLORS.content.secondary}>{stage.label}</BodyTiny>\n\t\t\t</div>\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</div>\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<div style={{ position: 'relative', width: '100%', height: plotHeight }}>\n\t\t\t\t<svg\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\tstyle={{ position: 'absolute', inset: 0 }}\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</svg>\n\n\t\t\t\t{layout.separators.full.map((x) => (\n\t\t\t\t\t<Separator 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<Separator\n\t\t\t\t\t\tkey={`header-${x}`}\n\t\t\t\t\t\tleft={toPercent(x)}\n\t\t\t\t\t\theight={headerHeight}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\theight: headerHeight,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t}}\n\t\t\t\t>\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</div>\n\t\t\t</div>\n\t\t</ChartCard>\n\t);\n};\n"],"names":["PLACEHOLDER_STAGES","_","index","derivePercentageLabel","stages","stage","toChartValue","reference","candidate","referenceValue","share","formatPercent","Separator","left","height","jsx","COLORS","StageHeader","color","chip","locale","jsxs","BodyTiny","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","band","header"],"mappings":"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"}
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.model.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
export interface FunnelStageI {
|
|
3
|
-
key: string;
|
|
4
|
-
label: string;
|
|
5
|
-
value: number;
|
|
6
|
-
valueLabel?: string;
|
|
7
|
-
percentageLabel?: string;
|
|
8
|
-
color?: string;
|
|
9
|
-
branchOf?: string;
|
|
10
|
-
}
|
|
11
|
-
export interface FunnelChartI {
|
|
12
|
-
stages: FunnelStageI[];
|
|
13
|
-
title?: string;
|
|
14
|
-
plotHeight?: number;
|
|
15
|
-
headerHeight?: number;
|
|
16
|
-
colors?: string[];
|
|
17
|
-
locale?: string;
|
|
18
|
-
wrapperStyle?: CSSProperties;
|
|
19
|
-
}
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
export declare const FUNNEL_VIEW_WIDTH = 1000;
|
|
2
|
-
export interface FunnelGeometryStage {
|
|
3
|
-
key: string;
|
|
4
|
-
value: number;
|
|
5
|
-
branchOf?: string;
|
|
6
|
-
}
|
|
7
|
-
export interface FunnelGeometryOptions {
|
|
8
|
-
plotHeight: number;
|
|
9
|
-
headerHeight: number;
|
|
10
|
-
}
|
|
11
|
-
export interface FunnelBandLayout {
|
|
12
|
-
key: string;
|
|
13
|
-
d: string;
|
|
14
|
-
}
|
|
15
|
-
export interface FunnelLayout {
|
|
16
|
-
bands: FunnelBandLayout[];
|
|
17
|
-
separators: {
|
|
18
|
-
full: number[];
|
|
19
|
-
header: number[];
|
|
20
|
-
};
|
|
21
|
-
isEmpty: boolean;
|
|
22
|
-
}
|
|
23
|
-
export declare const buildFunnelLayout: (stages: FunnelGeometryStage[], { plotHeight, headerHeight }: FunnelGeometryOptions) => FunnelLayout;
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { toChartValue as x, clamp as k } from "../formatChartValue.js";
|
|
2
|
-
const B = 1e3, a = (n) => Math.round(n * 100) / 100, F = (n) => n.reduce((c, s, o) => {
|
|
3
|
-
const r = c[c.length - 1];
|
|
4
|
-
return s.branchOf && r?.branchOf === s.branchOf ? r.stageIndexes.push(o) : c.push({ branchOf: s.branchOf, stageIndexes: [o] }), c;
|
|
5
|
-
}, []), N = (n, { plotHeight: c, headerHeight: s }) => {
|
|
6
|
-
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);
|
|
7
|
-
let m = 0;
|
|
8
|
-
const h = l.map((t) => {
|
|
9
|
-
const e = p(m);
|
|
10
|
-
return m += t.stageIndexes.length, { x0: e, x1: p(m) };
|
|
11
|
-
}), I = l.map(
|
|
12
|
-
(t) => t.stageIndexes.reduce(
|
|
13
|
-
(e, u) => e + x(n[u].value),
|
|
14
|
-
0
|
|
15
|
-
)
|
|
16
|
-
), O = [];
|
|
17
|
-
return l.forEach((t, e) => {
|
|
18
|
-
const { x0: u, x1: T } = h[e], f = I[e], V = I[e + 1] ?? f, E = g(f), L = g(V);
|
|
19
|
-
let i = r - E / 2, d = r - L / 2;
|
|
20
|
-
t.stageIndexes.forEach((y) => {
|
|
21
|
-
const M = f > 0 ? x(n[y].value) / f : 0, v = i + E * M, C = d + L * M;
|
|
22
|
-
O.push({
|
|
23
|
-
key: n[y].key,
|
|
24
|
-
d: [
|
|
25
|
-
`M${u} ${a(i)}`,
|
|
26
|
-
`L${T} ${a(d)}`,
|
|
27
|
-
`L${T} ${a(C)}`,
|
|
28
|
-
`L${u} ${a(v)}`,
|
|
29
|
-
"Z"
|
|
30
|
-
].join(" ")
|
|
31
|
-
}), i = v, d = C;
|
|
32
|
-
});
|
|
33
|
-
}), {
|
|
34
|
-
bands: O,
|
|
35
|
-
separators: {
|
|
36
|
-
full: h.length ? [h[0].x0, ...h.map((t) => t.x1)] : [],
|
|
37
|
-
header: l.flatMap(
|
|
38
|
-
(t) => t.stageIndexes.slice(1).map((e) => p(e))
|
|
39
|
-
)
|
|
40
|
-
},
|
|
41
|
-
isEmpty: $
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
export {
|
|
45
|
-
B as FUNNEL_VIEW_WIDTH,
|
|
46
|
-
N as buildFunnelLayout
|
|
47
|
-
};
|
|
48
|
-
//# sourceMappingURL=funnelGeometry.js.map
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.js.map
DELETED
|
@@ -1 +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\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\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\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":";AAEO,MAAMA,IAAoB,KAgC3BC,IAAQ,CAACC,MAAkB,KAAK,MAAMA,IAAQ,GAAG,IAAI,KAErDC,IAAmB,CAACC,MACzBA,EAAO,OAAsB,CAACC,GAAQC,GAAOC,MAAU;AACtD,QAAMC,IAAUH,EAAOA,EAAO,SAAS,CAAC;AACxC,SAAIC,EAAM,YAAYE,GAAS,aAAaF,EAAM,WACjDE,EAAQ,aAAa,KAAKD,CAAK,IAE/BF,EAAO,KAAK,EAAE,UAAUC,EAAM,UAAU,cAAc,CAACC,CAAK,GAAG,GAEzDF;AACR,GAAG,EAAE,GAEOI,IAAoB,CAChCL,GACA,EAAE,YAAAM,GAAY,cAAAC,QACI;AAClB,QAAMC,IAAW,KAAK,IAAIF,IAAaC,GAAc,CAAC,GAChDE,IAAUF,IAAeC,IAAW,GACpCE,IAAYC,EAAaX,EAAO,CAAC,GAAG,KAAK,GACzCY,IAAUZ,EAAO,WAAW,KAAKU,MAAc,KAAKF,MAAa,GAEjEK,IAAM,CAACC,MACZjB,EAAOiB,IAAYd,EAAO,SAAUJ,CAAiB,GAChDmB,IAAW,CAACjB,MACjBc,IAAU,IAAII,EAAOlB,IAAQY,IAAaF,GAAU,GAAGA,CAAQ,GAE1DP,IAASF,EAAiBC,CAAM;AACtC,MAAIiB,IAAa;AACjB,QAAMC,IAAUjB,EAAO,IAAI,CAACkB,MAAU;AACrC,UAAMC,IAAKP,EAAII,CAAU;AACzB,WAAAA,KAAcE,EAAM,aAAa,QAC1B,EAAE,IAAAC,GAAI,IAAIP,EAAII,CAAU,EAAA;AAAA,EAChC,CAAC,GAEKI,IAAepB,EAAO;AAAA,IAAI,CAACkB,MAChCA,EAAM,aAAa;AAAA,MAClB,CAACG,GAAOnB,MAAUmB,IAAQX,EAAaX,EAAOG,CAAK,EAAE,KAAK;AAAA,MAC1D;AAAA,IAAA;AAAA,EACD,GAGKoB,IAA4B,CAAA;AAClC,SAAAtB,EAAO,QAAQ,CAACkB,GAAOK,MAAgB;AACtC,UAAM,EAAE,IAAAJ,GAAI,IAAAK,MAAOP,EAAQM,CAAW,GAChCE,IAAYL,EAAaG,CAAW,GACpCG,IAAaN,EAAaG,IAAc,CAAC,KAAKE,GAC9CE,IAAab,EAASW,CAAS,GAC/BG,IAAcd,EAASY,CAAU;AAEvC,QAAIG,IAAUrB,IAAUmB,IAAa,GACjCG,IAAWtB,IAAUoB,IAAc;AAEvC,IAAAV,EAAM,aAAa,QAAQ,CAACa,MAAe;AAC1C,YAAMC,IACLP,IAAY,IAAIf,EAAaX,EAAOgC,CAAU,EAAE,KAAK,IAAIN,IAAY,GAChEQ,IAAaJ,IAAUF,IAAaK,GACpCE,IAAcJ,IAAWF,IAAcI;AAC7C,MAAAV,EAAM,KAAK;AAAA,QACV,KAAKvB,EAAOgC,CAAU,EAAE;AAAA,QACxB,GAAG;AAAA,UACF,IAAIZ,CAAE,IAAIvB,EAAMiC,CAAO,CAAC;AAAA,UACxB,IAAIL,CAAE,IAAI5B,EAAMkC,CAAQ,CAAC;AAAA,UACzB,IAAIN,CAAE,IAAI5B,EAAMsC,CAAW,CAAC;AAAA,UAC5B,IAAIf,CAAE,IAAIvB,EAAMqC,CAAU,CAAC;AAAA,UAC3B;AAAA,QAAA,EACC,KAAK,GAAG;AAAA,MAAA,CACV,GACDJ,IAAUI,GACVH,IAAWI;AAAA,IACZ,CAAC;AAAA,EACF,CAAC,GAEM;AAAA,IACN,OAAAZ;AAAA,IACA,YAAY;AAAA,MACX,MAAML,EAAQ,SAAS,CAACA,EAAQ,CAAC,EAAE,IAAI,GAAGA,EAAQ,IAAI,CAACkB,MAAMA,EAAE,EAAE,CAAC,IAAI,CAAA;AAAA,MACtE,QAAQnC,EAAO;AAAA,QAAQ,CAACkB,MACvBA,EAAM,aAAa,MAAM,CAAC,EAAE,IAAI,CAAChB,MAAUU,EAAIV,CAAK,CAAC;AAAA,MAAA;AAAA,IACtD;AAAA,IAED,SAAAS;AAAA,EAAA;AAEF;"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { COLORS as n } from "../../../constants/Theme.js";
|
|
2
|
-
const b = [
|
|
3
|
-
n.stroke.brandLightAlt,
|
|
4
|
-
n.background.brandLight,
|
|
5
|
-
n.background.brandTint,
|
|
6
|
-
n.background.brandVeryLight
|
|
7
|
-
], a = [
|
|
8
|
-
n.background.brand,
|
|
9
|
-
n.stroke.brandSubdued,
|
|
10
|
-
n.stroke.brandLightAlt,
|
|
11
|
-
n.background.brandTint
|
|
12
|
-
], o = (r, t) => r.length ? r[t % r.length] : void 0;
|
|
13
|
-
export {
|
|
14
|
-
a as COMPARISON_BAR_COLORS,
|
|
15
|
-
b as FUNNEL_BAND_COLORS,
|
|
16
|
-
o as pickColor
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=chartPalette.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chartPalette.js","sources":["../../../../../src/components/analytics-chips-and-dropdowns/chart/chartPalette.ts"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\n\nexport const FUNNEL_BAND_COLORS = [\n\tCOLORS.stroke.brandLightAlt,\n\tCOLORS.background.brandLight,\n\tCOLORS.background.brandTint,\n\tCOLORS.background.brandVeryLight,\n];\n\nexport const COMPARISON_BAR_COLORS = [\n\tCOLORS.background.brand,\n\tCOLORS.stroke.brandSubdued,\n\tCOLORS.stroke.brandLightAlt,\n\tCOLORS.background.brandTint,\n];\n\nexport const pickColor = (colors: string[], index: number) =>\n\tcolors.length ? colors[index % colors.length] : undefined;\n"],"names":["FUNNEL_BAND_COLORS","COLORS","COMPARISON_BAR_COLORS","pickColor","colors","index"],"mappings":";AAEO,MAAMA,IAAqB;AAAA,EACjCC,EAAO,OAAO;AAAA,EACdA,EAAO,WAAW;AAAA,EAClBA,EAAO,WAAW;AAAA,EAClBA,EAAO,WAAW;AACnB,GAEaC,IAAwB;AAAA,EACpCD,EAAO,WAAW;AAAA,EAClBA,EAAO,OAAO;AAAA,EACdA,EAAO,OAAO;AAAA,EACdA,EAAO,WAAW;AACnB,GAEaE,IAAY,CAACC,GAAkBC,MAC3CD,EAAO,SAASA,EAAOC,IAAQD,EAAO,MAAM,IAAI;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export declare const toChartValue: (value: number | undefined) => number;
|
|
2
|
-
export declare const formatChartValue: (value: number, locale?: string) => string;
|
|
3
|
-
export declare const formatPercent: (value: number) => string;
|
|
4
|
-
export declare const clamp: (value: number, min: number, max: number) => number;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
const e = (t) => typeof t == "number" && Number.isFinite(t) && t > 0 ? t : 0, o = (t, r = "en-IN") => Number.isFinite(t) ? new Intl.NumberFormat(r).format(t) : "0", i = (t) => {
|
|
2
|
-
if (!Number.isFinite(t))
|
|
3
|
-
return "0";
|
|
4
|
-
const r = Math.round(t * 10) / 10;
|
|
5
|
-
return Number.isInteger(r) ? `${r}` : r.toFixed(1);
|
|
6
|
-
}, m = (t, r, n) => Math.min(Math.max(t, r), n);
|
|
7
|
-
export {
|
|
8
|
-
m as clamp,
|
|
9
|
-
o as formatChartValue,
|
|
10
|
-
i as formatPercent,
|
|
11
|
-
e as toChartValue
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=formatChartValue.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"formatChartValue.js","sources":["../../../../../src/components/analytics-chips-and-dropdowns/chart/formatChartValue.ts"],"sourcesContent":["export const toChartValue = (value: number | undefined): number =>\n\ttypeof value === 'number' && Number.isFinite(value) && value > 0 ? value : 0;\n\nexport const formatChartValue = (value: number, locale = 'en-IN'): string =>\n\tNumber.isFinite(value) ? new Intl.NumberFormat(locale).format(value) : '0';\n\nexport const formatPercent = (value: number): string => {\n\tif (!Number.isFinite(value)) {\n\t\treturn '0';\n\t}\n\tconst rounded = Math.round(value * 10) / 10;\n\treturn Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(1);\n};\n\nexport const clamp = (value: number, min: number, max: number): number =>\n\tMath.min(Math.max(value, min), max);\n"],"names":["toChartValue","value","formatChartValue","locale","formatPercent","rounded","clamp","min","max"],"mappings":"AAAO,MAAMA,IAAe,CAACC,MAC5B,OAAOA,KAAU,YAAY,OAAO,SAASA,CAAK,KAAKA,IAAQ,IAAIA,IAAQ,GAE/DC,IAAmB,CAACD,GAAeE,IAAS,YACxD,OAAO,SAASF,CAAK,IAAI,IAAI,KAAK,aAAaE,CAAM,EAAE,OAAOF,CAAK,IAAI,KAE3DG,IAAgB,CAACH,MAA0B;AACvD,MAAI,CAAC,OAAO,SAASA,CAAK;AACzB,WAAO;AAER,QAAMI,IAAU,KAAK,MAAMJ,IAAQ,EAAE,IAAI;AACzC,SAAO,OAAO,UAAUI,CAAO,IAAI,GAAGA,CAAO,KAAKA,EAAQ,QAAQ,CAAC;AACpE,GAEaC,IAAQ,CAACL,GAAeM,GAAaC,MACjD,KAAK,IAAI,KAAK,IAAIP,GAAOM,CAAG,GAAGC,CAAG;"}
|