@bikdotai/bik-component-library 0.0.860-beta.2 → 0.0.860-beta.3
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/README.md +0 -9
- package/dist/cjs/components/agent-builder/AgentBuilder.js +1 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.js.map +1 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js +54 -44
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/AgentStateModal.js +2 -0
- package/dist/cjs/components/agent-builder/components/AgentStateModal.js.map +1 -0
- package/dist/cjs/components/agent-builder/components/GoLiveModal.js.map +1 -1
- package/dist/cjs/components/agent-listing/AgentTableRow.js +1 -1
- package/dist/cjs/components/agent-listing/AgentTableRow.js.map +1 -1
- 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/HorizontalBarGraph/HorizontalGraph.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.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/index.js +1 -1
- package/dist/esm/components/agent-builder/AgentBuilder.js +3 -3
- package/dist/esm/components/agent-builder/AgentBuilder.js.map +1 -1
- package/dist/esm/components/agent-builder/AgentBuilder.styled.d.ts +23 -0
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js +99 -86
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/esm/components/agent-builder/components/AgentStateModal.d.ts +47 -0
- package/dist/esm/components/agent-builder/components/AgentStateModal.js +82 -0
- package/dist/esm/components/agent-builder/components/AgentStateModal.js.map +1 -0
- package/dist/esm/components/agent-builder/components/GoLiveModal.js.map +1 -1
- package/dist/esm/components/agent-builder/index.d.ts +2 -0
- package/dist/esm/components/agent-listing/AgentTableRow.js +71 -38
- package/dist/esm/components/agent-listing/AgentTableRow.js.map +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/HorizontalBarGraph/HorizontalGraph.js +15 -16
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.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/index.js +448 -450
- 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/ComparisonBarChart/ComparisonBarChart.styled.js +0 -50
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.styled.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/FunnelChart.styled.js +0 -43
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.styled.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 -110
- 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/ComparisonBarChart/ComparisonBarChart.styled.d.ts +0 -16
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.styled.js +0 -61
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.styled.js.map +0 -1
- 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 -109
- 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/FunnelChart.styled.d.ts +0 -16
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.styled.js +0 -54
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.styled.js.map +0 -1
- 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/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../TypographyStyle.js"),e=require("../../../constants/Theme.js"),n=({title:o,padding:t,gap:i,dataTest:d,wrapperStyle:l,children:s})=>r.jsxs("div",{"data-test":d,style:{display:"flex",flexDirection:"column",gap:i,width:"100%",padding:t,borderRadius:8,border:`1px solid ${e.COLORS.stroke.primary}`,backgroundColor:e.COLORS.surface.standard,...l},children:[o&&r.jsx(a.TitleRegular,{color:e.COLORS.content.primary,children:o}),s]}),c=({value:o,chip:t})=>r.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flexWrap:"wrap"},children:[r.jsx(a.TitleMedium,{color:e.COLORS.content.primary,style:{whiteSpace:"nowrap"},children:o}),t&&r.jsx("div",{style:{display:"inline-flex",alignItems:"center",padding:"4px 8px",borderRadius:4,border:`1px solid ${e.COLORS.stroke.primary}`,backgroundColor:e.COLORS.surface.subdued,whiteSpace:"nowrap"},children:r.jsx(a.BodyCaption,{color:e.COLORS.content.secondary,children:t})})]});exports.ChartCard=n;exports.ChartValueRow=c;
|
|
2
|
-
//# sourceMappingURL=ChartLayout.js.map
|
|
@@ -1 +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":"oMAiBaA,EAAsC,CAAC,CACnD,MAAAC,EACA,QAAAC,EACA,IAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,CACD,IACCC,EAAAA,KAAC,MAAA,CACA,YAAWH,EACX,MAAO,CACN,QAAS,OACT,cAAe,SACf,IAAAD,EACA,MAAO,OACP,QAAAD,EACA,aAAc,EACd,OAAQ,aAAaM,EAAAA,OAAO,OAAO,OAAO,GAC1C,gBAAiBA,EAAAA,OAAO,QAAQ,SAChC,GAAGH,CAAA,EAGH,SAAA,CAAAJ,SACCQ,EAAAA,aAAA,CAAa,MAAOD,SAAO,QAAQ,QAAU,SAAAP,EAAM,EAEpDK,CAAA,CAAA,CACF,EAQYI,EAA8C,CAAC,CAC3D,MAAAC,EACA,KAAAC,CACD,IACCL,EAAAA,KAAC,MAAA,CACA,MAAO,CAAE,QAAS,OAAQ,WAAY,SAAU,IAAK,EAAG,SAAU,MAAA,EAElE,SAAA,CAAAM,EAAAA,IAACC,EAAAA,YAAA,CACA,MAAON,EAAAA,OAAO,QAAQ,QACtB,MAAO,CAAE,WAAY,QAAA,EAEpB,SAAAG,CAAA,CAAA,EAEDC,GACAC,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,QAAS,cACT,WAAY,SACZ,QAAS,UACT,aAAc,EACd,OAAQ,aAAaL,EAAAA,OAAO,OAAO,OAAO,GAC1C,gBAAiBA,EAAAA,OAAO,QAAQ,QAChC,WAAY,QAAA,EAGb,eAACO,EAAAA,YAAA,CAAY,MAAOP,EAAAA,OAAO,QAAQ,UAAY,SAAAI,CAAA,CAAK,CAAA,CAAA,CACrD,CAAA,CAEF"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("react"),j=require("../../../TypographyStyle.js"),x=require("../../../../constants/Theme.js"),L=require("../ChartLayout.js"),R=require("../chartPalette.js"),t=require("../formatChartValue.js"),n=require("./ComparisonBarChart.styled.js"),O=Array.from({length:2},(e,c)=>({key:`placeholder-${c}`,label:"",value:0})),f=({row:{bar:e,fillWidth:c,color:l,percentageLabel:i},labelWidth:u,barHeight:h,showTooltip:d,locale:p})=>{const[m,a]=g.useState(!1);return r.jsxs(n.BarRowLayout,{children:[r.jsxs(n.BarLabelColumn,{$width:u,children:[r.jsx(j.BodyCaption,{color:x.COLORS.content.secondary,children:e.label}),r.jsx(L.ChartValueRow,{value:e.valueLabel??t.formatChartValue(t.toChartValue(e.value),p),chip:i})]}),r.jsxs(n.BarArea,{"data-test":`comparison-bar-chart-bar-${e.key}`,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),$height:h,children:[r.jsx(n.BarTrack,{"data-test":`comparison-bar-chart-track-${e.key}`,children:r.jsx(n.BarFill,{"data-test":`comparison-bar-chart-fill-${e.key}`,$width:c,$color:l})}),d&&m&&r.jsxs(n.BarTooltip,{"data-test":`comparison-bar-chart-tooltip-${e.key}`,$left:t.clamp(c/2,8,92),children:[r.jsx(n.BarTooltipArrow,{}),r.jsx(j.BodyCaption,{color:x.COLORS.content.primaryInverse,children:i})]})]})]})},k=({bars:e=[],title:c,total:l,colors:i=R.COMPARISON_BAR_COLORS,labelWidth:u=180,barHeight:h=52,locale:d,showTooltip:p=!0,wrapperStyle:m})=>{const a=e.some(o=>t.toChartValue(o.value)>0),C=e.length?e:O,$=g.useMemo(()=>{const o=l!==void 0?t.toChartValue(l):C.reduce((s,y)=>s+t.toChartValue(y.value),0);return C.map((s,y)=>{const B=s.percentage??(o>0?t.toChartValue(s.value)/o*100:0),v=Number.isFinite(B)?Math.max(B,0):0;return{bar:s,fillWidth:t.clamp(v,0,100),color:a?s.color??R.pickColor(i,y):void 0,percentageLabel:a?s.percentageLabel??`${t.formatPercent(v)}%`:""}})},[C,l,i,a]);return r.jsx(L.ChartCard,{dataTest:"comparison-bar-chart",title:c,padding:24,gap:24,wrapperStyle:m,children:$.map(o=>r.jsx(f,{row:o,labelWidth:u,barHeight:h,showTooltip:p&&a,locale:d},o.bar.key))})};exports.ComparisonBarChart=k;
|
|
2
|
-
//# sourceMappingURL=ComparisonBarChart.js.map
|
|
@@ -1 +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":"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"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("../../../../constants/Theme.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},o=a(e),i=o.default.div`
|
|
2
|
-
display: flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
gap: 32px;
|
|
5
|
-
`,l=o.default.div`
|
|
6
|
-
width: ${t=>t.$width}px;
|
|
7
|
-
flex-shrink: 0;
|
|
8
|
-
display: flex;
|
|
9
|
-
flex-direction: column;
|
|
10
|
-
gap: 8px;
|
|
11
|
-
`,n=o.default.div`
|
|
12
|
-
position: relative;
|
|
13
|
-
flex: 1;
|
|
14
|
-
height: ${t=>t.$height}px;
|
|
15
|
-
`,d=o.default.div`
|
|
16
|
-
position: absolute;
|
|
17
|
-
inset: 0;
|
|
18
|
-
border-radius: 4px;
|
|
19
|
-
border: 1px solid ${r.COLORS.stroke.primary};
|
|
20
|
-
background-color: ${r.COLORS.surface.standard};
|
|
21
|
-
overflow: hidden;
|
|
22
|
-
`,s=o.default.div`
|
|
23
|
-
position: absolute;
|
|
24
|
-
top: 0;
|
|
25
|
-
left: 0;
|
|
26
|
-
bottom: 0;
|
|
27
|
-
width: ${t=>t.$width}%;
|
|
28
|
-
background-color: ${t=>t.$color??"transparent"};
|
|
29
|
-
`,p=o.default.div`
|
|
30
|
-
position: absolute;
|
|
31
|
-
top: 50%;
|
|
32
|
-
left: ${t=>t.$left}%;
|
|
33
|
-
transform: translate(-50%, -50%);
|
|
34
|
-
padding: 4px 8px;
|
|
35
|
-
border-radius: 4px;
|
|
36
|
-
background-color: ${r.COLORS.content.primary};
|
|
37
|
-
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
|
|
38
|
-
pointer-events: none;
|
|
39
|
-
`,u=o.default.div`
|
|
40
|
-
position: absolute;
|
|
41
|
-
top: -5px;
|
|
42
|
-
left: 50%;
|
|
43
|
-
transform: translateX(-50%);
|
|
44
|
-
width: 0;
|
|
45
|
-
height: 0;
|
|
46
|
-
border-left: 5px solid transparent;
|
|
47
|
-
border-right: 5px solid transparent;
|
|
48
|
-
border-bottom: 5px solid ${r.COLORS.content.primary};
|
|
49
|
-
`;exports.BarArea=n;exports.BarFill=s;exports.BarLabelColumn=l;exports.BarRowLayout=i;exports.BarTooltip=p;exports.BarTooltipArrow=u;exports.BarTrack=d;
|
|
50
|
-
//# sourceMappingURL=ComparisonBarChart.styled.js.map
|
|
@@ -1 +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":"gOAGaA,EAAeC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMtBC,EAAiBD,EAAAA,QAAO;AAAA,UAC1BE,GAAUA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAOpBC,EAAUH,EAAAA,QAAO;AAAA;AAAA;AAAA,WAGlBE,GAAUA,EAAM,OAAO;AAAA,EAGtBE,EAAWJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,qBAIVK,EAAAA,OAAO,OAAO,OAAO;AAAA,qBACrBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAI/BC,EAAUN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKnBE,GAAUA,EAAM,MAAM;AAAA,qBACXA,GAAUA,EAAM,QAAU,aAAa;AAAA,EAGhDK,EAAaP,EAAAA,QAAO;AAAA;AAAA;AAAA,SAGvBE,GAAUA,EAAM,KAAK;AAAA;AAAA;AAAA;AAAA,qBAIVG,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAK9BG,EAAkBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BASVK,EAAAA,OAAO,QAAQ,OAAO;AAAA"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("react"),b=require("../../../TypographyStyle.js"),v=require("../../../../constants/Theme.js"),$=require("../ChartLayout.js"),L=require("../chartPalette.js"),c=require("../formatChartValue.js"),l=require("./FunnelChart.styled.js"),m=require("./funnelGeometry.js"),x=Array.from({length:4},(r,o)=>({key:`placeholder-${o}`,label:"",value:0})),g=(r,o)=>{const t=r[o];if(t.percentageLabel!==void 0)return t.percentageLabel;if(o===0)return c.toChartValue(t.value)>0?"100%":"";const n=t.branchOf?r.find(y=>y.key===t.branchOf):r[o-1],s=c.toChartValue(n?.value);if(!n||s===0)return"";const p=c.toChartValue(t.value)/s*100;return`${c.formatPercent(p)}% of ${n.label}`},O=({stage:r,color:o,chip:t,locale:n})=>a.jsxs(l.StageHeaderColumn,{"data-test":`funnel-chart-header-${r.key}`,children:[r.label&&a.jsxs(l.StageLabelRow,{children:[a.jsx(l.StageColorDot,{$color:o}),a.jsx(b.BodyTiny,{color:v.COLORS.content.secondary,children:r.label})]}),a.jsx($.ChartValueRow,{value:r.valueLabel??c.formatChartValue(c.toChartValue(r.value),n),chip:t})]}),R=({stages:r=[],title:o,plotHeight:t=291,headerHeight:n=83,colors:s=L.FUNNEL_BAND_COLORS,locale:p,wrapperStyle:y})=>{const u=r.length?r:x,i=C.useMemo(()=>m.buildFunnelLayout(u,{plotHeight:t,headerHeight:n}),[u,t,n]),h=!i.isEmpty,S=e=>`${e/m.FUNNEL_VIEW_WIDTH*100}%`,f=C.useMemo(()=>u.map((e,d)=>({stage:e,color:h?e.color??L.pickColor(s,d):v.COLORS.content.inactive,chip:h?g(u,d):""})),[u,s,h]),j=C.useMemo(()=>new Map(f.map(({stage:e,color:d})=>[e.key,d])),[f]);return a.jsx($.ChartCard,{dataTest:"funnel-chart",title:o,padding:"18px 24px",gap:14,wrapperStyle:{overflow:"hidden",...y},children:a.jsxs(l.PlotArea,{$height:t,children:[a.jsx(l.BandsSvg,{width:"100%",height:"100%",viewBox:`0 0 ${m.FUNNEL_VIEW_WIDTH} ${t}`,preserveAspectRatio:"none","aria-hidden":!0,children:i.bands.map(e=>a.jsx("path",{"data-test":`funnel-chart-band-${e.key}`,d:e.d,fill:h?j.get(e.key):"transparent"},e.key))}),i.separators.full.map(e=>a.jsx(l.SeparatorLine,{$left:S(e)},`full-${e}`)),i.separators.header.map(e=>a.jsx(l.SeparatorLine,{$left:S(e),$height:n},`header-${e}`)),a.jsx(l.HeaderRow,{$height:n,children:f.map(e=>a.jsx(O,{...e,locale:p},e.stage.key))})]})})};exports.FunnelChart=R;
|
|
2
|
-
//# sourceMappingURL=FunnelChart.js.map
|
package/dist/cjs/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 {\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/cjs/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.styled.js
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),a=require("../../../../constants/Theme.js"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=i(o),l=e.default.div`
|
|
2
|
-
position: absolute;
|
|
3
|
-
top: 0;
|
|
4
|
-
${t=>t.$height===void 0?"bottom: 0;":`height: ${t.$height}px;`}
|
|
5
|
-
left: ${t=>t.$left};
|
|
6
|
-
width: 1px;
|
|
7
|
-
background-color: ${a.COLORS.stroke.primary};
|
|
8
|
-
`,d=e.default.div`
|
|
9
|
-
position: relative;
|
|
10
|
-
width: 100%;
|
|
11
|
-
height: ${t=>t.$height}px;
|
|
12
|
-
`,n=e.default.svg`
|
|
13
|
-
position: absolute;
|
|
14
|
-
inset: 0;
|
|
15
|
-
`,r=e.default.div`
|
|
16
|
-
position: absolute;
|
|
17
|
-
top: 0;
|
|
18
|
-
left: 0;
|
|
19
|
-
right: 0;
|
|
20
|
-
height: ${t=>t.$height}px;
|
|
21
|
-
display: flex;
|
|
22
|
-
`,s=e.default.div`
|
|
23
|
-
flex: 1;
|
|
24
|
-
min-width: 0;
|
|
25
|
-
display: flex;
|
|
26
|
-
flex-direction: column;
|
|
27
|
-
gap: 8px;
|
|
28
|
-
align-items: flex-start;
|
|
29
|
-
padding: 0 8px 0 12px;
|
|
30
|
-
`,p=e.default.div`
|
|
31
|
-
display: flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
gap: 8px;
|
|
34
|
-
width: 100%;
|
|
35
|
-
opacity: 0.8;
|
|
36
|
-
`,g=e.default.span`
|
|
37
|
-
width: 16px;
|
|
38
|
-
height: 16px;
|
|
39
|
-
border-radius: 2.667px;
|
|
40
|
-
background-color: ${t=>t.$color??"transparent"};
|
|
41
|
-
flex-shrink: 0;
|
|
42
|
-
`;exports.BandsSvg=n;exports.HeaderRow=r;exports.PlotArea=d;exports.SeparatorLine=l;exports.StageColorDot=g;exports.StageHeaderColumn=s;exports.StageLabelRow=p;
|
|
43
|
-
//# sourceMappingURL=FunnelChart.styled.js.map
|
|
@@ -1 +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":"gOAGaA,EAAgBC,EAAAA,QAAO;AAAA;AAAA;AAAA,GAGhCC,GACFA,EAAM,UAAY,OAAY,aAAe,WAAWA,EAAM,OAAO,KAAK;AAAA,SAClEA,GAAUA,EAAM,KAAK;AAAA;AAAA,qBAEVC,EAAAA,OAAO,OAAO,OAAO;AAAA,EAG7BC,EAAWH,EAAAA,QAAO;AAAA;AAAA;AAAA,WAGnBC,GAAUA,EAAM,OAAO;AAAA,EAGtBG,EAAWJ,EAAAA,QAAO;AAAA;AAAA;AAAA,EAKlBK,EAAYL,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKpBC,GAAUA,EAAM,OAAO;AAAA;AAAA,EAItBK,EAAoBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU3BO,EAAgBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQvBQ,EAAgBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,qBAIdC,GAAUA,EAAM,QAAU,aAAa;AAAA;AAAA"}
|
package/dist/cjs/components/analytics-chips-and-dropdowns/chart/FunnelChart/funnelGeometry.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../formatChartValue.js"),v=1e3,l=e=>Math.round(e*100)/100,N=e=>e.reduce((a,c,o)=>{const r=a[a.length-1];return c.branchOf&&r?.branchOf===c.branchOf?r.stageIndexes.push(o):a.push({branchOf:c.branchOf,stageIndexes:[o]}),a},[]),W=(e,{plotHeight:a,headerHeight:c})=>{const o=Math.max(a-c,0),r=c+o/2,g=i.toChartValue(e[0]?.value),x=e.length===0||g===0||o===0,d=t=>l(t/e.length*v),I=t=>x?0:i.clamp(t/g*o,0,o),s=N(e);let p=0;const u=s.map(t=>{const n=d(p);return p+=t.stageIndexes.length,{x0:n,x1:d(p)}}),T=s.map(t=>t.stageIndexes.reduce((n,h)=>n+i.toChartValue(e[h].value),0)),$=[];return s.forEach((t,n)=>{const{x0:h,x1:y}=u[n],f=T[n],F=T[n+1]??f,E=I(f),L=I(F);let b=r-E/2,m=r-L/2;t.stageIndexes.forEach(O=>{const V=f>0?i.toChartValue(e[O].value)/f:0,C=b+E*V,M=m+L*V;$.push({key:e[O].key,d:[`M${h} ${l(b)}`,`L${y} ${l(m)}`,`L${y} ${l(M)}`,`L${h} ${l(C)}`,"Z"].join(" ")}),b=C,m=M})}),{bands:$,separators:{full:u.length?[u[0].x0,...u.map(t=>t.x1)]:[],header:s.flatMap(t=>t.stageIndexes.slice(1).map(n=>d(n)))},isEmpty:x}};exports.FUNNEL_VIEW_WIDTH=v;exports.buildFunnelLayout=W;
|
|
2
|
-
//# sourceMappingURL=funnelGeometry.js.map
|
package/dist/cjs/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\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":"0HAEaA,EAAoB,IAgC3BC,EAASC,GAAkB,KAAK,MAAMA,EAAQ,GAAG,EAAI,IAGrDC,EAAoBC,GACzBA,EAAO,OAAsB,CAACC,EAAQC,EAAOC,IAAU,CACtD,MAAMC,EAAUH,EAAOA,EAAO,OAAS,CAAC,EACxC,OAAIC,EAAM,UAAYE,GAAS,WAAaF,EAAM,SACjDE,EAAQ,aAAa,KAAKD,CAAK,EAE/BF,EAAO,KAAK,CAAE,SAAUC,EAAM,SAAU,aAAc,CAACC,CAAK,EAAG,EAEzDF,CACR,EAAG,EAAE,EAEOI,EAAoB,CAChCL,EACA,CAAE,WAAAM,EAAY,aAAAC,KACI,CAClB,MAAMC,EAAW,KAAK,IAAIF,EAAaC,EAAc,CAAC,EAChDE,EAAUF,EAAeC,EAAW,EAEpCE,EAAYC,EAAAA,aAAaX,EAAO,CAAC,GAAG,KAAK,EACzCY,EAAUZ,EAAO,SAAW,GAAKU,IAAc,GAAKF,IAAa,EAEjEK,EAAOC,GACZjB,EAAOiB,EAAYd,EAAO,OAAUJ,CAAiB,EAChDmB,EAAYjB,GACjBc,EAAU,EAAII,QAAOlB,EAAQY,EAAaF,EAAU,EAAGA,CAAQ,EAE1DP,EAASF,EAAiBC,CAAM,EACtC,IAAIiB,EAAa,EACjB,MAAMC,EAAUjB,EAAO,IAAKkB,GAAU,CACrC,MAAMC,EAAKP,EAAII,CAAU,EACzB,OAAAA,GAAcE,EAAM,aAAa,OAC1B,CAAE,GAAAC,EAAI,GAAIP,EAAII,CAAU,CAAA,CAChC,CAAC,EAEKI,EAAepB,EAAO,IAAKkB,GAChCA,EAAM,aAAa,OAClB,CAACG,EAAOnB,IAAUmB,EAAQX,EAAAA,aAAaX,EAAOG,CAAK,EAAE,KAAK,EAC1D,CAAA,CACD,EAGKoB,EAA4B,CAAA,EAClC,OAAAtB,EAAO,QAAQ,CAACkB,EAAOK,IAAgB,CACtC,KAAM,CAAE,GAAAJ,EAAI,GAAAK,GAAOP,EAAQM,CAAW,EAChCE,EAAYL,EAAaG,CAAW,EACpCG,EAAaN,EAAaG,EAAc,CAAC,GAAKE,EAC9CE,EAAab,EAASW,CAAS,EAC/BG,EAAcd,EAASY,CAAU,EAEvC,IAAIG,EAAUrB,EAAUmB,EAAa,EACjCG,EAAWtB,EAAUoB,EAAc,EAIvCV,EAAM,aAAa,QAASa,GAAe,CAC1C,MAAMC,EACLP,EAAY,EAAIf,EAAAA,aAAaX,EAAOgC,CAAU,EAAE,KAAK,EAAIN,EAAY,EAChEQ,EAAaJ,EAAUF,EAAaK,EACpCE,EAAcJ,EAAWF,EAAcI,EAC7CV,EAAM,KAAK,CACV,IAAKvB,EAAOgC,CAAU,EAAE,IACxB,EAAG,CACF,IAAIZ,CAAE,IAAIvB,EAAMiC,CAAO,CAAC,GACxB,IAAIL,CAAE,IAAI5B,EAAMkC,CAAQ,CAAC,GACzB,IAAIN,CAAE,IAAI5B,EAAMsC,CAAW,CAAC,GAC5B,IAAIf,CAAE,IAAIvB,EAAMqC,CAAU,CAAC,GAC3B,GAAA,EACC,KAAK,GAAG,CAAA,CACV,EACDJ,EAAUI,EACVH,EAAWI,CACZ,CAAC,CACF,CAAC,EAEM,CACN,MAAAZ,EACA,WAAY,CACX,KAAML,EAAQ,OAAS,CAACA,EAAQ,CAAC,EAAE,GAAI,GAAGA,EAAQ,IAAKkB,GAAMA,EAAE,EAAE,CAAC,EAAI,CAAA,EACtE,OAAQnC,EAAO,QAASkB,GACvBA,EAAM,aAAa,MAAM,CAAC,EAAE,IAAKhB,GAAUU,EAAIV,CAAK,CAAC,CAAA,CACtD,EAED,QAAAS,CAAA,CAEF"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("../../../constants/Theme.js"),t=[O.COLORS.stroke.brandLightAlt,O.COLORS.background.brandLight,O.COLORS.background.brandTint,O.COLORS.background.brandVeryLight],d=[O.COLORS.background.brand,O.COLORS.stroke.brandSubdued,O.COLORS.stroke.brandLightAlt,O.COLORS.background.brandTint],e=(n,r)=>n.length?n[r%n.length]:void 0;exports.COMPARISON_BAR_COLORS=d;exports.FUNNEL_BAND_COLORS=t;exports.pickColor=e;
|
|
2
|
-
//# 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":"+HAEaA,EAAqB,CACjCC,EAAAA,OAAO,OAAO,cACdA,EAAAA,OAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,UAClBA,EAAAA,OAAO,WAAW,cACnB,EAEaC,EAAwB,CACpCD,EAAAA,OAAO,WAAW,MAClBA,EAAAA,OAAO,OAAO,aACdA,EAAAA,OAAO,OAAO,cACdA,EAAAA,OAAO,WAAW,SACnB,EAEaE,EAAY,CAACC,EAAkBC,IAC3CD,EAAO,OAASA,EAAOC,EAAQD,EAAO,MAAM,EAAI"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=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",a=t=>{if(!Number.isFinite(t))return"0";const r=Math.round(t*10)/10;return Number.isInteger(r)?`${r}`:r.toFixed(1)},m=(t,r,e)=>Math.min(Math.max(t,r),e);exports.clamp=m;exports.formatChartValue=o;exports.formatPercent=a;exports.toChartValue=n;
|
|
2
|
-
//# 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":"gFAAO,MAAMA,EAAgBC,GAC5B,OAAOA,GAAU,UAAY,OAAO,SAASA,CAAK,GAAKA,EAAQ,EAAIA,EAAQ,EAE/DC,EAAmB,CAACD,EAAeE,EAAS,UACxD,OAAO,SAASF,CAAK,EAAI,IAAI,KAAK,aAAaE,CAAM,EAAE,OAAOF,CAAK,EAAI,IAE3DG,EAAiBH,GAA0B,CACvD,GAAI,CAAC,OAAO,SAASA,CAAK,EACzB,MAAO,IAER,MAAMI,EAAU,KAAK,MAAMJ,EAAQ,EAAE,EAAI,GACzC,OAAO,OAAO,UAAUI,CAAO,EAAI,GAAGA,CAAO,GAAKA,EAAQ,QAAQ,CAAC,CACpE,EAEaC,EAAQ,CAACL,EAAeM,EAAaC,IACjD,KAAK,IAAI,KAAK,IAAIP,EAAOM,CAAG,EAAGC,CAAG"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { default as React, CSSProperties, ReactNode } from 'react';
|
|
2
|
-
interface ChartCardProps {
|
|
3
|
-
title?: string;
|
|
4
|
-
padding: CSSProperties['padding'];
|
|
5
|
-
gap: number;
|
|
6
|
-
dataTest: string;
|
|
7
|
-
wrapperStyle?: CSSProperties;
|
|
8
|
-
children: ReactNode;
|
|
9
|
-
}
|
|
10
|
-
export declare const ChartCard: React.FC<ChartCardProps>;
|
|
11
|
-
interface ChartValueRowProps {
|
|
12
|
-
value: ReactNode;
|
|
13
|
-
chip?: ReactNode;
|
|
14
|
-
}
|
|
15
|
-
export declare const ChartValueRow: React.FC<ChartValueRowProps>;
|
|
16
|
-
export {};
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { jsxs as a, jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import { TitleRegular as s, TitleMedium as c, BodyCaption as p } from "../../TypographyStyle.js";
|
|
3
|
-
import { COLORS as r } from "../../../constants/Theme.js";
|
|
4
|
-
const x = ({
|
|
5
|
-
title: e,
|
|
6
|
-
padding: o,
|
|
7
|
-
gap: d,
|
|
8
|
-
dataTest: t,
|
|
9
|
-
wrapperStyle: l,
|
|
10
|
-
children: n
|
|
11
|
-
}) => /* @__PURE__ */ a(
|
|
12
|
-
"div",
|
|
13
|
-
{
|
|
14
|
-
"data-test": t,
|
|
15
|
-
style: {
|
|
16
|
-
display: "flex",
|
|
17
|
-
flexDirection: "column",
|
|
18
|
-
gap: d,
|
|
19
|
-
width: "100%",
|
|
20
|
-
padding: o,
|
|
21
|
-
borderRadius: 8,
|
|
22
|
-
border: `1px solid ${r.stroke.primary}`,
|
|
23
|
-
backgroundColor: r.surface.standard,
|
|
24
|
-
...l
|
|
25
|
-
},
|
|
26
|
-
children: [
|
|
27
|
-
e && /* @__PURE__ */ i(s, { color: r.content.primary, children: e }),
|
|
28
|
-
n
|
|
29
|
-
]
|
|
30
|
-
}
|
|
31
|
-
), f = ({
|
|
32
|
-
value: e,
|
|
33
|
-
chip: o
|
|
34
|
-
}) => /* @__PURE__ */ a(
|
|
35
|
-
"div",
|
|
36
|
-
{
|
|
37
|
-
style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" },
|
|
38
|
-
children: [
|
|
39
|
-
/* @__PURE__ */ i(
|
|
40
|
-
c,
|
|
41
|
-
{
|
|
42
|
-
color: r.content.primary,
|
|
43
|
-
style: { whiteSpace: "nowrap" },
|
|
44
|
-
children: e
|
|
45
|
-
}
|
|
46
|
-
),
|
|
47
|
-
o && /* @__PURE__ */ i(
|
|
48
|
-
"div",
|
|
49
|
-
{
|
|
50
|
-
style: {
|
|
51
|
-
display: "inline-flex",
|
|
52
|
-
alignItems: "center",
|
|
53
|
-
padding: "4px 8px",
|
|
54
|
-
borderRadius: 4,
|
|
55
|
-
border: `1px solid ${r.stroke.primary}`,
|
|
56
|
-
backgroundColor: r.surface.subdued,
|
|
57
|
-
whiteSpace: "nowrap"
|
|
58
|
-
},
|
|
59
|
-
children: /* @__PURE__ */ i(p, { color: r.content.secondary, children: o })
|
|
60
|
-
}
|
|
61
|
-
)
|
|
62
|
-
]
|
|
63
|
-
}
|
|
64
|
-
);
|
|
65
|
-
export {
|
|
66
|
-
x as ChartCard,
|
|
67
|
-
f as ChartValueRow
|
|
68
|
-
};
|
|
69
|
-
//# sourceMappingURL=ChartLayout.js.map
|
|
@@ -1 +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;"}
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { jsx as e, jsxs as s } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo as R, useState as g } from "react";
|
|
3
|
-
import { BodyCaption as y } from "../../../TypographyStyle.js";
|
|
4
|
-
import { COLORS as $ } from "../../../../constants/Theme.js";
|
|
5
|
-
import { ChartCard as w, ChartValueRow as A } from "../ChartLayout.js";
|
|
6
|
-
import { pickColor as O, COMPARISON_BAR_COLORS as M } from "../chartPalette.js";
|
|
7
|
-
import { toChartValue as i, formatPercent as S, clamp as k, formatChartValue as T } from "../formatChartValue.js";
|
|
8
|
-
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";
|
|
9
|
-
const b = Array.from(
|
|
10
|
-
{ length: 2 },
|
|
11
|
-
(r, n) => ({ key: `placeholder-${n}`, label: "", value: 0 })
|
|
12
|
-
), j = ({
|
|
13
|
-
row: { bar: r, fillWidth: n, color: c, percentageLabel: l },
|
|
14
|
-
labelWidth: m,
|
|
15
|
-
barHeight: p,
|
|
16
|
-
showTooltip: h,
|
|
17
|
-
locale: d
|
|
18
|
-
}) => {
|
|
19
|
-
const [u, o] = g(!1);
|
|
20
|
-
return /* @__PURE__ */ s(x, { children: [
|
|
21
|
-
/* @__PURE__ */ s(_, { $width: m, children: [
|
|
22
|
-
/* @__PURE__ */ e(y, { color: $.content.secondary, children: r.label }),
|
|
23
|
-
/* @__PURE__ */ e(
|
|
24
|
-
A,
|
|
25
|
-
{
|
|
26
|
-
value: r.valueLabel ?? T(i(r.value), d),
|
|
27
|
-
chip: l
|
|
28
|
-
}
|
|
29
|
-
)
|
|
30
|
-
] }),
|
|
31
|
-
/* @__PURE__ */ s(
|
|
32
|
-
E,
|
|
33
|
-
{
|
|
34
|
-
"data-test": `comparison-bar-chart-bar-${r.key}`,
|
|
35
|
-
onMouseEnter: () => o(!0),
|
|
36
|
-
onMouseLeave: () => o(!1),
|
|
37
|
-
$height: p,
|
|
38
|
-
children: [
|
|
39
|
-
/* @__PURE__ */ e(H, { "data-test": `comparison-bar-chart-track-${r.key}`, children: /* @__PURE__ */ e(
|
|
40
|
-
I,
|
|
41
|
-
{
|
|
42
|
-
"data-test": `comparison-bar-chart-fill-${r.key}`,
|
|
43
|
-
$width: n,
|
|
44
|
-
$color: c
|
|
45
|
-
}
|
|
46
|
-
) }),
|
|
47
|
-
h && u && /* @__PURE__ */ s(
|
|
48
|
-
P,
|
|
49
|
-
{
|
|
50
|
-
"data-test": `comparison-bar-chart-tooltip-${r.key}`,
|
|
51
|
-
$left: k(n / 2, 8, 92),
|
|
52
|
-
children: [
|
|
53
|
-
/* @__PURE__ */ e(V, {}),
|
|
54
|
-
/* @__PURE__ */ e(y, { color: $.content.primaryInverse, children: l })
|
|
55
|
-
]
|
|
56
|
-
}
|
|
57
|
-
)
|
|
58
|
-
]
|
|
59
|
-
}
|
|
60
|
-
)
|
|
61
|
-
] });
|
|
62
|
-
}, Q = ({
|
|
63
|
-
bars: r = [],
|
|
64
|
-
title: n,
|
|
65
|
-
total: c,
|
|
66
|
-
colors: l = M,
|
|
67
|
-
labelWidth: m = 180,
|
|
68
|
-
barHeight: p = 52,
|
|
69
|
-
locale: h,
|
|
70
|
-
showTooltip: d = !0,
|
|
71
|
-
wrapperStyle: u
|
|
72
|
-
}) => {
|
|
73
|
-
const o = r.some((t) => i(t.value) > 0), f = r.length ? r : b, L = R(() => {
|
|
74
|
-
const t = c !== void 0 ? i(c) : f.reduce((a, v) => a + i(v.value), 0);
|
|
75
|
-
return f.map((a, v) => {
|
|
76
|
-
const C = a.percentage ?? (t > 0 ? i(a.value) / t * 100 : 0), B = Number.isFinite(C) ? Math.max(C, 0) : 0;
|
|
77
|
-
return {
|
|
78
|
-
bar: a,
|
|
79
|
-
fillWidth: k(B, 0, 100),
|
|
80
|
-
color: o ? a.color ?? O(l, v) : void 0,
|
|
81
|
-
percentageLabel: o ? a.percentageLabel ?? `${S(B)}%` : ""
|
|
82
|
-
};
|
|
83
|
-
});
|
|
84
|
-
}, [f, c, l, o]);
|
|
85
|
-
return /* @__PURE__ */ e(
|
|
86
|
-
w,
|
|
87
|
-
{
|
|
88
|
-
dataTest: "comparison-bar-chart",
|
|
89
|
-
title: n,
|
|
90
|
-
padding: 24,
|
|
91
|
-
gap: 24,
|
|
92
|
-
wrapperStyle: u,
|
|
93
|
-
children: L.map((t) => /* @__PURE__ */ e(
|
|
94
|
-
j,
|
|
95
|
-
{
|
|
96
|
-
row: t,
|
|
97
|
-
labelWidth: m,
|
|
98
|
-
barHeight: p,
|
|
99
|
-
showTooltip: d && o,
|
|
100
|
-
locale: h
|
|
101
|
-
},
|
|
102
|
-
t.bar.key
|
|
103
|
-
))
|
|
104
|
-
}
|
|
105
|
-
);
|
|
106
|
-
};
|
|
107
|
-
export {
|
|
108
|
-
Q as ComparisonBarChart
|
|
109
|
-
};
|
|
110
|
-
//# sourceMappingURL=ComparisonBarChart.js.map
|
|
@@ -1 +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":"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"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
export interface ComparisonBarI {
|
|
3
|
-
key: string;
|
|
4
|
-
label: string;
|
|
5
|
-
value: number;
|
|
6
|
-
valueLabel?: string;
|
|
7
|
-
percentage?: number;
|
|
8
|
-
percentageLabel?: string;
|
|
9
|
-
color?: string;
|
|
10
|
-
}
|
|
11
|
-
export interface ComparisonBarChartI {
|
|
12
|
-
bars: ComparisonBarI[];
|
|
13
|
-
title?: string;
|
|
14
|
-
total?: number;
|
|
15
|
-
colors?: string[];
|
|
16
|
-
labelWidth?: number;
|
|
17
|
-
barHeight?: number;
|
|
18
|
-
locale?: string;
|
|
19
|
-
showTooltip?: boolean;
|
|
20
|
-
wrapperStyle?: CSSProperties;
|
|
21
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export declare const BarRowLayout: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const BarLabelColumn: import('styled-components').StyledComponent<"div", any, {
|
|
3
|
-
$width: number;
|
|
4
|
-
}, never>;
|
|
5
|
-
export declare const BarArea: import('styled-components').StyledComponent<"div", any, {
|
|
6
|
-
$height: number;
|
|
7
|
-
}, never>;
|
|
8
|
-
export declare const BarTrack: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
9
|
-
export declare const BarFill: import('styled-components').StyledComponent<"div", any, {
|
|
10
|
-
$width: number;
|
|
11
|
-
$color?: string | undefined;
|
|
12
|
-
}, never>;
|
|
13
|
-
export declare const BarTooltip: import('styled-components').StyledComponent<"div", any, {
|
|
14
|
-
$left: number;
|
|
15
|
-
}, never>;
|
|
16
|
-
export declare const BarTooltipArrow: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import t from "styled-components";
|
|
2
|
-
import { COLORS as r } from "../../../../constants/Theme.js";
|
|
3
|
-
const a = t.div`
|
|
4
|
-
display: flex;
|
|
5
|
-
align-items: center;
|
|
6
|
-
gap: 32px;
|
|
7
|
-
`, n = t.div`
|
|
8
|
-
width: ${(o) => o.$width}px;
|
|
9
|
-
flex-shrink: 0;
|
|
10
|
-
display: flex;
|
|
11
|
-
flex-direction: column;
|
|
12
|
-
gap: 8px;
|
|
13
|
-
`, p = t.div`
|
|
14
|
-
position: relative;
|
|
15
|
-
flex: 1;
|
|
16
|
-
height: ${(o) => o.$height}px;
|
|
17
|
-
`, s = t.div`
|
|
18
|
-
position: absolute;
|
|
19
|
-
inset: 0;
|
|
20
|
-
border-radius: 4px;
|
|
21
|
-
border: 1px solid ${r.stroke.primary};
|
|
22
|
-
background-color: ${r.surface.standard};
|
|
23
|
-
overflow: hidden;
|
|
24
|
-
`, d = t.div`
|
|
25
|
-
position: absolute;
|
|
26
|
-
top: 0;
|
|
27
|
-
left: 0;
|
|
28
|
-
bottom: 0;
|
|
29
|
-
width: ${(o) => o.$width}%;
|
|
30
|
-
background-color: ${(o) => o.$color ?? "transparent"};
|
|
31
|
-
`, l = t.div`
|
|
32
|
-
position: absolute;
|
|
33
|
-
top: 50%;
|
|
34
|
-
left: ${(o) => o.$left}%;
|
|
35
|
-
transform: translate(-50%, -50%);
|
|
36
|
-
padding: 4px 8px;
|
|
37
|
-
border-radius: 4px;
|
|
38
|
-
background-color: ${r.content.primary};
|
|
39
|
-
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
|
|
40
|
-
pointer-events: none;
|
|
41
|
-
`, x = t.div`
|
|
42
|
-
position: absolute;
|
|
43
|
-
top: -5px;
|
|
44
|
-
left: 50%;
|
|
45
|
-
transform: translateX(-50%);
|
|
46
|
-
width: 0;
|
|
47
|
-
height: 0;
|
|
48
|
-
border-left: 5px solid transparent;
|
|
49
|
-
border-right: 5px solid transparent;
|
|
50
|
-
border-bottom: 5px solid ${r.content.primary};
|
|
51
|
-
`;
|
|
52
|
-
export {
|
|
53
|
-
p as BarArea,
|
|
54
|
-
d as BarFill,
|
|
55
|
-
n as BarLabelColumn,
|
|
56
|
-
a as BarRowLayout,
|
|
57
|
-
l as BarTooltip,
|
|
58
|
-
x as BarTooltipArrow,
|
|
59
|
-
s as BarTrack
|
|
60
|
-
};
|
|
61
|
-
//# sourceMappingURL=ComparisonBarChart.styled.js.map
|
|
@@ -1 +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;"}
|