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

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

@@ -1 +1 @@
-{"version":3,"file":"AnalyticsTrend.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsTrend.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ShimmerComponentStyled } from '@src/components/shimmer/ShimmerComponent/ShimmerStyled';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownArrowIcon from '../../assets/icons/arrow_down.svg';\nimport UpArrowIcon from '../../assets/icons/arrow_up.svg';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleMedium,\n} from '../TypographyStyle';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from './chart/utils/calcPercentage';\nimport { AnalyticsTrendContainer, IconContainer } from './CommonStyles';\n\nexport interface AnalyticsTrendInterface {\n\ttitle: string;\n\tvalue?: number | string;\n\ttrendPercent?: number;\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tformatVal?: boolean;\n\ttimeline?: 'today' | 'yesterday' | '7 days' | '30 days' | 'custom';\n\tcustomRange?: Date[];\n\ttype?: 'vertical' | 'horizontal';\n\ttooltip?: string;\n\tcard?: boolean;\n\trightSeparator?: boolean;\n\tsize?: 'big' | 'small';\n\tshare?: boolean;\n\tprefixSymbol?: string;\n\ttrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tonTrailIconClick?: () => void;\n\ticonTooltipBody?: string;\n\tfunnelPercent?: number;\n\tisLoading?: boolean;\n\tsuffixText?: string;\n\ttrendStyle?: React.CSSProperties;\n\ticonContainerStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\tcontainerStyle?: React.CSSProperties;\n\tprevTrendDiff?: number;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n\tIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}\nexport const AnalyticsTrend: React.FC<AnalyticsTrendInterface> = ({\n\ttitle,\n\tvalue,\n\ttrendPercent,\n\ttype = 'horizontal',\n\ttimeline,\n\tcustomRange,\n\ttooltip,\n\tcard = true,\n\trightSeparator = false,\n\tsize = 'big',\n\tshare = false,\n\tformatVal,\n\tprefixSymbol,\n\ttrailingIcon,\n\tonTrailIconClick,\n\ticonTooltipBody,\n\tfunnelPercent,\n\tisLoading,\n\ttrendRaw,\n\ttrendRawString,\n\tsuffixText,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\tcontainerStyle,\n\tprevTrendDiff,\n\trelativePercentageDiff,\n\tisInternationalStore,\n\tIcon,\n\ticonContainerStyle,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst ValueTypo = size === 'big' ? TitleLarge : TitleMedium;\n\tconst trendDirection =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? trendPercent < 0\n\t\t\t\t? 'negative'\n\t\t\t\t: trendPercent === 0\n\t\t\t\t? 'neutral'\n\t\t\t\t: 'positive'\n\t\t\t: undefined;\n\n\tconst percent =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? share\n\t\t\t\t? Math.round(trendPercent)\n\t\t\t\t: Math.abs(Math.round(trendPercent))\n\t\t\t: undefined;\n\n\tconst getDisplayValue = () => {\n\t\tif (typeof value === 'undefined') {\n\t\t\treturn '--';\n\t\t}\n\n\t\tif (typeof value === 'number') {\n\t\t\tif (formatVal) {\n\t\t\t\tif (value > 999) {\n\t\t\t\t\tif (isInternationalStore) {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForInternationalStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForIndianStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\treturn `${prefixSymbol ?? ''}${new Intl.NumberFormat('en-IN', {\n\t\t\t\t\t\tmaximumFractionDigits: 2,\n\t\t\t\t\t}).format(value)} ${suffixText ?? ''}`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn `${prefixSymbol ?? ''}${value} ${suffixText ?? ''}`;\n\t};\n\n\tconst formatTrendDiff = (trendDiff: number) => {\n\t\tconst diff = Math.abs(trendDiff);\n\t\tif (diff % 1 !== 0) {\n\t\t\treturn `${diff.toFixed(1)} %`;\n\t\t}\n\t\treturn `${diff} %`;\n\t};\n\n\treturn (\n\t\t<AnalyticsTrendContainer\n\t\t\tcard={card}\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: Icon ? 12 : 4,\n\t\t\t\t\tborderRightWidth: rightSeparator ? 1 : 0,\n\t\t\t\t\tborderRightColor: COLORS.stroke.primary,\n\t\t\t\t\tborderRightStyle: 'solid',\n\t\t\t\t\tpaddingLeft: !card ? 24 : 0,\n\t\t\t\t\tpaddingRight: !card ? 24 : 0,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tjustifyContent: Icon ? 'flex-start' : 'space-between',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t...(trendContainerStyle ?? {}),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!Icon && (\n\t\t\t\t\t<IconContainer style={{ ...iconContainerStyle }}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</IconContainer>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t...(trendStyle ?? {}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</BodyCaption>\n\n\t\t\t\t\t\t{tooltip && (\n\t\t\t\t\t\t\t<Tooltip body={tooltip} placement={'right'} width={300}>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t...(share ? { justifyContent: 'space-between' } : {}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoading && <ShimmerComponentStyled width={108} height={26} />}\n\t\t\t\t\t\t{!isLoading && (\n\t\t\t\t\t\t\t<ValueTypo\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t\t\t</ValueTypo>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{typeof relativePercentageDiff === 'number' && (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={`${relativePercentageDiff}%`}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'horizontal' && !isLoading && !share && (\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isLoading && !share && type === 'horizontal' && (\n\t\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'vertical' &&\n\t\t\t\t\t\t\t!isLoading &&\n\t\t\t\t\t\t\ttypeof funnelPercent !== 'undefined' && (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={`${funnelPercent} %`}\n\t\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t{share && !isLoading && typeof percent !== 'undefined' && (\n\t\t\t\t\t\t\t<Tag tagText={`${percent} %`} theme=\"light\" type=\"neutral\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!share && !isLoading && prevTrendDiff && prevTrendDiff != 0 ? (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={formatTrendDiff(prevTrendDiff)}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{type === 'vertical' && !isLoading && !share && (\n\t\t\t\t\t\t<div style={{ marginTop: 10 }}>\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{isLoading && type === 'vertical' && (\n\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{iconTooltipBody && !isLoading && (\n\t\t\t\t\t<Tooltip body={iconTooltipBody} placement={'right'}>\n\t\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdata-test=\"analytics-trend-trailing-icon\"\n\t\t\t\t\t\t\t\tclassName={'icon--holder'}\n\t\t\t\t\t\t\t\tonClick={onTrailIconClick}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(trailingIcon, {\n\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</AnalyticsTrendContainer>\n\t);\n};\n\nconst Trend: React.FC<{\n\tpercent?: number;\n\tdirection?: 'positive' | 'negative' | 'neutral';\n\ttimeline?: AnalyticsTrendInterface['timeline'];\n\tcustomRange?: AnalyticsTrendInterface['customRange'];\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tprefixSymbol?: string;\n\ttrendIconStyle?: React.CSSProperties;\n\tisInternationalStore?: boolean;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}> = ({\n\tpercent,\n\tdirection,\n\ttimeline,\n\tcustomRange,\n\ttrendRaw,\n\ttrendRawString,\n\tprefixSymbol,\n\ttrendIconStyle,\n\tisInternationalStore,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst getTrendRawAbs = () => {\n\t\tlet trendRawAbs = '--';\n\t\tif (trendRaw) {\n\t\t\tif (isInternationalStore) {\n\t\t\t\ttrendRawAbs = String(\n\t\t\t\t\ttruncateValueForInternationalStore(Math.abs(trendRaw)),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttrendRawAbs = String(truncateValueForIndianStore(Math.abs(trendRaw)));\n\t\t\t}\n\t\t\tif (trendRaw < 0) {\n\t\t\t\treturn '-' + trendRawAbs;\n\t\t\t} else {\n\t\t\t\treturn trendRawAbs;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst generateTrendRawText = () => {\n\t\tconst prefixWithSign =\n\t\t\t((trendRaw ?? 0) > 0 ? '+' : '') + (prefixSymbol ?? '');\n\t\tconst trendRawTextInitial =\n\t\t\ttypeof trendRaw === 'undefined'\n\t\t\t\t? '--'\n\t\t\t\t: `${prefixWithSign ?? ''}${getTrendRawAbs()}`;\n\t\treturn trendRawTextInitial;\n\t};\n\n\tconst [trendRawText, setTrendRawText] = useState<string>(\n\t\tgenerateTrendRawText(),\n\t);\n\tconst [timeLineText, setTimeLineText] = useState<string>(\n\t\tcustomTimelineText || '',\n\t);\n\n\tuseEffect(() => {\n\t\tif (customTimelineText) {\n\t\t\treturn;\n\t\t}\n\t\tsetTimeLineText(\n\t\t\ttimeline === 'today'\n\t\t\t\t? 'vs yesterday'\n\t\t\t\t: timeline === 'yesterday'\n\t\t\t\t? 'vs 1 day before'\n\t\t\t\t: timeline === '7 days'\n\t\t\t\t? 'vs last 7 days'\n\t\t\t\t: timeline === '30 days'\n\t\t\t\t? 'vs last 30 days'\n\t\t\t\t: timeline === 'custom' && customRange\n\t\t\t\t? DateUtils.getAnalyticsCustomDateTimelineText(customRange)\n\t\t\t\t: '',\n\t\t);\n\t}, [timeline, customRange]);\n\n\tuseEffect(() => {\n\t\tsetTrendRawText(generateTrendRawText());\n\t}, [trendRaw]);\n\n\tconst TrendIcon = direction === 'negative' ? DownArrowIcon : UpArrowIcon;\n\n\tconst color =\n\t\tdirection === 'negative'\n\t\t\t? COLORS.background.negative.vibrant\n\t\t\t: direction === 'positive'\n\t\t\t? COLORS.background.positive.vibrant\n\t\t\t: COLORS.content.placeholder;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tflexDirection: 'row',\n\t\t\t\tflexWrap: 'wrap',\n\t\t\t}}\n\t\t>\n\t\t\t{typeof percent === 'number' && (\n\t\t\t\t<TrendIcon\n\t\t\t\t\tcolor={color}\n\t\t\t\t\theight={16}\n\t\t\t\t\twidth={16}\n\t\t\t\t\tstyle={{ marginRight: 2, ...(trendIconStyle ?? {}) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{typeof percent === 'number' && direction && (\n\t\t\t\t<Caption style={{ color }}>\n\t\t\t\t\t{direction === 'neutral' ? 0 : percent < 1000 ? percent : '>999'}\n\t\t\t\t\t{'%'}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!!trendRaw && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`(${trendRawText})`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!trendRaw && (trendRawString?.length || 0) > 0 && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`${trendRawString}`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\n\t\t\t{timeline &&\n\t\t\t\t(tooltipTimelineText ? (\n\t\t\t\t\t<Tooltip body={tooltipTimelineText} placement=\"bottom\">\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tstyle={{ marginLeft: 4, color: COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customTimelineText || timeLineText}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t{customTimelineText || timeLineText}\n\t\t\t\t\t</Caption>\n\t\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["AnalyticsTrend","title","value","trendPercent","type","timeline","customRange","tooltip","card","rightSeparator","size","share","formatVal","prefixSymbol","trailingIcon","onTrailIconClick","iconTooltipBody","funnelPercent","isLoading","trendRaw","trendRawString","suffixText","trendStyle","trendContainerStyle","trendIconStyle","containerStyle","prevTrendDiff","relativePercentageDiff","isInternationalStore","Icon","iconContainerStyle","tooltipTimelineText","customTimelineText","ValueTypo","TitleLarge","TitleMedium","trendDirection","percent","getDisplayValue","truncateValueForInternationalStore","truncateValueForIndianStore","formatTrendDiff","trendDiff","diff","jsx","AnalyticsTrendContainer","jsxs","COLORS","IconContainer","BodyCaption","Tooltip","InfoIcon","ShimmerComponentStyled","Tag","Trend","Fragment","React","direction","getTrendRawAbs","trendRawAbs","generateTrendRawText","prefixWithSign","trendRawText","setTrendRawText","useState","timeLineText","setTimeLineText","useEffect","DateUtils","TrendIcon","DownArrowIcon","UpArrowIcon","color","Caption"],"mappings":"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"}
+{"version":3,"file":"AnalyticsTrend.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsTrend.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ShimmerComponentStyled } from '@src/components/shimmer/ShimmerComponent/ShimmerStyled';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownArrowIcon from '../../assets/icons/arrow_down.svg';\nimport UpArrowIcon from '../../assets/icons/arrow_up.svg';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Tag } from '../tag';\nimport { Placement, Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleMedium,\n} from '../TypographyStyle';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from './chart/utils/calcPercentage';\nimport { AnalyticsTrendContainer, IconContainer } from './CommonStyles';\n\nexport interface AnalyticsTrendInterface {\n\ttitle: string;\n\tvalue?: number | string;\n\ttrendPercent?: number;\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tformatVal?: boolean;\n\ttimeline?: 'today' | 'yesterday' | '7 days' | '30 days' | 'custom';\n\tcustomRange?: Date[];\n\ttype?: 'vertical' | 'horizontal';\n\ttooltip?: string;\n\ttooltipPlacement?: Placement;\n\ttooltipWidth?: number;\n\tcard?: boolean;\n\trightSeparator?: boolean;\n\tsize?: 'big' | 'small';\n\tshare?: boolean;\n\tprefixSymbol?: string;\n\ttrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tonTrailIconClick?: () => void;\n\ticonTooltipBody?: string;\n\tfunnelPercent?: number;\n\tisLoading?: boolean;\n\tsuffixText?: string;\n\ttrendStyle?: React.CSSProperties;\n\ticonContainerStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\tcontainerStyle?: React.CSSProperties;\n\tprevTrendDiff?: number;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n\tIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}\nexport const AnalyticsTrend: React.FC<AnalyticsTrendInterface> = ({\n\ttitle,\n\tvalue,\n\ttrendPercent,\n\ttype = 'horizontal',\n\ttimeline,\n\tcustomRange,\n\ttooltip,\n\ttooltipPlacement = 'right',\n\ttooltipWidth = 300,\n\tcard = true,\n\trightSeparator = false,\n\tsize = 'big',\n\tshare = false,\n\tformatVal,\n\tprefixSymbol,\n\ttrailingIcon,\n\tonTrailIconClick,\n\ticonTooltipBody,\n\tfunnelPercent,\n\tisLoading,\n\ttrendRaw,\n\ttrendRawString,\n\tsuffixText,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\tcontainerStyle,\n\tprevTrendDiff,\n\trelativePercentageDiff,\n\tisInternationalStore,\n\tIcon,\n\ticonContainerStyle,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst ValueTypo = size === 'big' ? TitleLarge : TitleMedium;\n\tconst trendDirection =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? trendPercent < 0\n\t\t\t\t? 'negative'\n\t\t\t\t: trendPercent === 0\n\t\t\t\t? 'neutral'\n\t\t\t\t: 'positive'\n\t\t\t: undefined;\n\n\tconst percent =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? share\n\t\t\t\t? Math.round(trendPercent)\n\t\t\t\t: Math.abs(Math.round(trendPercent))\n\t\t\t: undefined;\n\n\tconst getDisplayValue = () => {\n\t\tif (typeof value === 'undefined') {\n\t\t\treturn '--';\n\t\t}\n\n\t\tif (typeof value === 'number') {\n\t\t\tif (formatVal) {\n\t\t\t\tif (value > 999) {\n\t\t\t\t\tif (isInternationalStore) {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForInternationalStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForIndianStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\treturn `${prefixSymbol ?? ''}${new Intl.NumberFormat('en-IN', {\n\t\t\t\t\t\tmaximumFractionDigits: 2,\n\t\t\t\t\t}).format(value)} ${suffixText ?? ''}`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn `${prefixSymbol ?? ''}${value} ${suffixText ?? ''}`;\n\t};\n\n\tconst formatTrendDiff = (trendDiff: number) => {\n\t\tconst diff = Math.abs(trendDiff);\n\t\tif (diff % 1 !== 0) {\n\t\t\treturn `${diff.toFixed(1)} %`;\n\t\t}\n\t\treturn `${diff} %`;\n\t};\n\n\treturn (\n\t\t<AnalyticsTrendContainer\n\t\t\tcard={card}\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: Icon ? 12 : 4,\n\t\t\t\t\tborderRightWidth: rightSeparator ? 1 : 0,\n\t\t\t\t\tborderRightColor: COLORS.stroke.primary,\n\t\t\t\t\tborderRightStyle: 'solid',\n\t\t\t\t\tpaddingLeft: !card ? 24 : 0,\n\t\t\t\t\tpaddingRight: !card ? 24 : 0,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tjustifyContent: Icon ? 'flex-start' : 'space-between',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t...(trendContainerStyle ?? {}),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!Icon && (\n\t\t\t\t\t<IconContainer style={{ ...iconContainerStyle }}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</IconContainer>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t...(trendStyle ?? {}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</BodyCaption>\n\n\t\t\t\t\t\t{tooltip && (\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={tooltip}\n\t\t\t\t\t\t\t\tplacement={tooltipPlacement}\n\t\t\t\t\t\t\t\twidth={tooltipWidth}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t...(share ? { justifyContent: 'space-between' } : {}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoading && <ShimmerComponentStyled width={108} height={26} />}\n\t\t\t\t\t\t{!isLoading && (\n\t\t\t\t\t\t\t<ValueTypo\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t\t\t</ValueTypo>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{typeof relativePercentageDiff === 'number' && (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={`${relativePercentageDiff}%`}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'horizontal' && !isLoading && !share && (\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isLoading && !share && type === 'horizontal' && (\n\t\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'vertical' &&\n\t\t\t\t\t\t\t!isLoading &&\n\t\t\t\t\t\t\ttypeof funnelPercent !== 'undefined' && (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={`${funnelPercent} %`}\n\t\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t{share && !isLoading && typeof percent !== 'undefined' && (\n\t\t\t\t\t\t\t<Tag tagText={`${percent} %`} theme=\"light\" type=\"neutral\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!share && !isLoading && prevTrendDiff && prevTrendDiff != 0 ? (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={formatTrendDiff(prevTrendDiff)}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{type === 'vertical' && !isLoading && !share && (\n\t\t\t\t\t\t<div style={{ marginTop: 10 }}>\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{isLoading && type === 'vertical' && (\n\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{iconTooltipBody && !isLoading && (\n\t\t\t\t\t<Tooltip body={iconTooltipBody} placement={'right'}>\n\t\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdata-test=\"analytics-trend-trailing-icon\"\n\t\t\t\t\t\t\t\tclassName={'icon--holder'}\n\t\t\t\t\t\t\t\tonClick={onTrailIconClick}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(trailingIcon, {\n\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</AnalyticsTrendContainer>\n\t);\n};\n\nconst Trend: React.FC<{\n\tpercent?: number;\n\tdirection?: 'positive' | 'negative' | 'neutral';\n\ttimeline?: AnalyticsTrendInterface['timeline'];\n\tcustomRange?: AnalyticsTrendInterface['customRange'];\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tprefixSymbol?: string;\n\ttrendIconStyle?: React.CSSProperties;\n\tisInternationalStore?: boolean;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}> = ({\n\tpercent,\n\tdirection,\n\ttimeline,\n\tcustomRange,\n\ttrendRaw,\n\ttrendRawString,\n\tprefixSymbol,\n\ttrendIconStyle,\n\tisInternationalStore,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst getTrendRawAbs = () => {\n\t\tlet trendRawAbs = '--';\n\t\tif (trendRaw) {\n\t\t\tif (isInternationalStore) {\n\t\t\t\ttrendRawAbs = String(\n\t\t\t\t\ttruncateValueForInternationalStore(Math.abs(trendRaw)),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttrendRawAbs = String(truncateValueForIndianStore(Math.abs(trendRaw)));\n\t\t\t}\n\t\t\tif (trendRaw < 0) {\n\t\t\t\treturn '-' + trendRawAbs;\n\t\t\t} else {\n\t\t\t\treturn trendRawAbs;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst generateTrendRawText = () => {\n\t\tconst prefixWithSign =\n\t\t\t((trendRaw ?? 0) > 0 ? '+' : '') + (prefixSymbol ?? '');\n\t\tconst trendRawTextInitial =\n\t\t\ttypeof trendRaw === 'undefined'\n\t\t\t\t? '--'\n\t\t\t\t: `${prefixWithSign ?? ''}${getTrendRawAbs()}`;\n\t\treturn trendRawTextInitial;\n\t};\n\n\tconst [trendRawText, setTrendRawText] = useState<string>(\n\t\tgenerateTrendRawText(),\n\t);\n\tconst [timeLineText, setTimeLineText] = useState<string>(\n\t\tcustomTimelineText || '',\n\t);\n\n\tuseEffect(() => {\n\t\tif (customTimelineText) {\n\t\t\treturn;\n\t\t}\n\t\tsetTimeLineText(\n\t\t\ttimeline === 'today'\n\t\t\t\t? 'vs yesterday'\n\t\t\t\t: timeline === 'yesterday'\n\t\t\t\t? 'vs 1 day before'\n\t\t\t\t: timeline === '7 days'\n\t\t\t\t? 'vs last 7 days'\n\t\t\t\t: timeline === '30 days'\n\t\t\t\t? 'vs last 30 days'\n\t\t\t\t: timeline === 'custom' && customRange\n\t\t\t\t? DateUtils.getAnalyticsCustomDateTimelineText(customRange)\n\t\t\t\t: '',\n\t\t);\n\t}, [timeline, customRange]);\n\n\tuseEffect(() => {\n\t\tsetTrendRawText(generateTrendRawText());\n\t}, [trendRaw]);\n\n\tconst TrendIcon = direction === 'negative' ? DownArrowIcon : UpArrowIcon;\n\n\tconst color =\n\t\tdirection === 'negative'\n\t\t\t? COLORS.background.negative.vibrant\n\t\t\t: direction === 'positive'\n\t\t\t? COLORS.background.positive.vibrant\n\t\t\t: COLORS.content.placeholder;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tflexDirection: 'row',\n\t\t\t\tflexWrap: 'wrap',\n\t\t\t}}\n\t\t>\n\t\t\t{typeof percent === 'number' && (\n\t\t\t\t<TrendIcon\n\t\t\t\t\tcolor={color}\n\t\t\t\t\theight={16}\n\t\t\t\t\twidth={16}\n\t\t\t\t\tstyle={{ marginRight: 2, ...(trendIconStyle ?? {}) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{typeof percent === 'number' && direction && (\n\t\t\t\t<Caption style={{ color }}>\n\t\t\t\t\t{direction === 'neutral' ? 0 : percent < 1000 ? percent : '>999'}\n\t\t\t\t\t{'%'}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!!trendRaw && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`(${trendRawText})`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!trendRaw && (trendRawString?.length || 0) > 0 && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`${trendRawString}`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\n\t\t\t{timeline &&\n\t\t\t\t(tooltipTimelineText ? (\n\t\t\t\t\t<Tooltip body={tooltipTimelineText} placement=\"bottom\">\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tstyle={{ marginLeft: 4, color: COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customTimelineText || timeLineText}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t{customTimelineText || timeLineText}\n\t\t\t\t\t</Caption>\n\t\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["AnalyticsTrend","title","value","trendPercent","type","timeline","customRange","tooltip","tooltipPlacement","tooltipWidth","card","rightSeparator","size","share","formatVal","prefixSymbol","trailingIcon","onTrailIconClick","iconTooltipBody","funnelPercent","isLoading","trendRaw","trendRawString","suffixText","trendStyle","trendContainerStyle","trendIconStyle","containerStyle","prevTrendDiff","relativePercentageDiff","isInternationalStore","Icon","iconContainerStyle","tooltipTimelineText","customTimelineText","ValueTypo","TitleLarge","TitleMedium","trendDirection","percent","getDisplayValue","truncateValueForInternationalStore","truncateValueForIndianStore","formatTrendDiff","trendDiff","diff","jsx","AnalyticsTrendContainer","jsxs","COLORS","IconContainer","BodyCaption","Tooltip","InfoIcon","ShimmerComponentStyled","Tag","Trend","Fragment","React","direction","getTrendRawAbs","trendRawAbs","generateTrendRawText","prefixWithSign","trendRawText","setTrendRawText","useState","timeLineText","setTimeLineText","useEffect","DateUtils","TrendIcon","DownArrowIcon","UpArrowIcon","color","Caption"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+interface ChartCardProps {
+    title?: string;
+    padding: CSSProperties['padding'];
+    gap: number;
+    dataTest: string;
+    wrapperStyle?: CSSProperties;
+    children: ReactNode;
+}
+export declare const ChartCard: React.FC<ChartCardProps>;
+interface ChartValueRowProps {
+    value: ReactNode;
+    chip?: ReactNode;
+}
+export declare const ChartValueRow: React.FC<ChartValueRowProps>;
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,166 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { useMemo as R, useState as $ } from "react";
+import { BodyCaption as b } from "../../../TypographyStyle.js";
+import { COLORS as n } from "../../../../constants/Theme.js";
+import { ChartCard as w, ChartValueRow as L } from "../ChartLayout.js";
+import { pickColor as B, COMPARISON_BAR_COLORS as O } from "../chartPalette.js";
+import { toChartValue as d, formatPercent as S, clamp as C, formatChartValue as A } from "../formatChartValue.js";
+const M = Array.from(
+  { length: 2 },
+  (e, i) => ({ key: `placeholder-${i}`, label: "", value: 0 })
+), E = ({
+  row: { bar: e, fillWidth: i, color: s, percentageLabel: l },
+  labelWidth: c,
+  barHeight: m,
+  showTooltip: h,
+  locale: u
+}) => {
+  const [f, t] = $(!1);
+  return /* @__PURE__ */ p("div", { style: { display: "flex", alignItems: "center", gap: 32 }, children: [
+    /* @__PURE__ */ p(
+      "div",
+      {
+        style: {
+          width: c,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ o(b, { color: n.content.secondary, children: e.label }),
+          /* @__PURE__ */ o(
+            L,
+            {
+              value: e.valueLabel ?? A(d(e.value), u),
+              chip: l
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ p(
+      "div",
+      {
+        "data-test": `comparison-bar-chart-bar-${e.key}`,
+        onMouseEnter: () => t(!0),
+        onMouseLeave: () => t(!1),
+        style: { position: "relative", flex: 1, height: m },
+        children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              "data-test": `comparison-bar-chart-track-${e.key}`,
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: 4,
+                border: `1px solid ${n.stroke.primary}`,
+                backgroundColor: n.surface.standard,
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ o(
+                "div",
+                {
+                  "data-test": `comparison-bar-chart-fill-${e.key}`,
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    width: `${i}%`,
+                    backgroundColor: s
+                  }
+                }
+              )
+            }
+          ),
+          h && f && /* @__PURE__ */ p(
+            "div",
+            {
+              "data-test": `comparison-bar-chart-tooltip-${e.key}`,
+              style: {
+                position: "absolute",
+                top: "50%",
+                left: `${C(i / 2, 8, 92)}%`,
+                transform: "translate(-50%, -50%)",
+                padding: "4px 8px",
+                borderRadius: 4,
+                backgroundColor: n.content.primary,
+                boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.12)",
+                pointerEvents: "none"
+              },
+              children: [
+                /* @__PURE__ */ o(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: -5,
+                      left: "50%",
+                      transform: "translateX(-50%)",
+                      width: 0,
+                      height: 0,
+                      borderLeft: "5px solid transparent",
+                      borderRight: "5px solid transparent",
+                      borderBottom: `5px solid ${n.content.primary}`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ o(b, { color: n.content.primaryInverse, children: l })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, N = ({
+  bars: e = [],
+  title: i,
+  total: s,
+  colors: l = O,
+  labelWidth: c = 180,
+  barHeight: m = 52,
+  locale: h,
+  showTooltip: u = !0,
+  wrapperStyle: f
+}) => {
+  const t = e.some((r) => d(r.value) > 0), v = e.length ? e : M, k = R(() => {
+    const r = s !== void 0 ? d(s) : v.reduce((a, y) => a + d(y.value), 0);
+    return v.map((a, y) => {
+      const x = a.percentage ?? (r > 0 ? d(a.value) / r * 100 : 0), g = Number.isFinite(x) ? Math.max(x, 0) : 0;
+      return {
+        bar: a,
+        fillWidth: C(g, 0, 100),
+        color: t ? a.color ?? B(l, y) : void 0,
+        percentageLabel: t ? a.percentageLabel ?? `${S(g)}%` : ""
+      };
+    });
+  }, [v, s, l, t]);
+  return /* @__PURE__ */ o(
+    w,
+    {
+      dataTest: "comparison-bar-chart",
+      title: i,
+      padding: 24,
+      gap: 24,
+      wrapperStyle: f,
+      children: k.map((r) => /* @__PURE__ */ o(
+        E,
+        {
+          row: r,
+          labelWidth: c,
+          barHeight: m,
+          showTooltip: u && t,
+          locale: h
+        },
+        r.bar.key
+      ))
+    }
+  );
+};
+export {
+  N as ComparisonBarChart
+};
+//# sourceMappingURL=ComparisonBarChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonBarChart.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ChartCard, ChartValueRow } from '../ChartLayout';\nimport { COMPARISON_BAR_COLORS, pickColor } from '../chartPalette';\nimport {\n\tclamp,\n\tformatChartValue,\n\tformatPercent,\n\ttoChartValue,\n} from '../formatChartValue';\nimport type {\n\tComparisonBarChartI,\n\tComparisonBarI,\n} from './ComparisonBarChart.model';\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<div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: labelWidth,\n\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: 8,\n\t\t\t\t}}\n\t\t\t>\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</div>\n\n\t\t\t<div\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\tstyle={{ position: 'relative', flex: 1, height: barHeight }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-test={`comparison-bar-chart-track-${bar.key}`}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tinset: 0,\n\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\tborder: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-test={`comparison-bar-chart-fill-${bar.key}`}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\tbottom: 0,\n\t\t\t\t\t\t\twidth: `${fillWidth}%`,\n\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{showTooltip && isHovered && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-test={`comparison-bar-chart-tooltip-${bar.key}`}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\t\tleft: `${clamp(fillWidth / 2, 8, 92)}%`,\n\t\t\t\t\t\t\ttransform: 'translate(-50%, -50%)',\n\t\t\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\tbackgroundColor: COLORS.content.primary,\n\t\t\t\t\t\t\tboxShadow: '0px 2px 4px rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: -5,\n\t\t\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\t\t\ttransform: 'translateX(-50%)',\n\t\t\t\t\t\t\t\twidth: 0,\n\t\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\t\tborderLeft: '5px solid transparent',\n\t\t\t\t\t\t\t\tborderRight: '5px solid transparent',\n\t\t\t\t\t\t\t\tborderBottom: `5px solid ${COLORS.content.primary}`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\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</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\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","jsxs","jsx","BodyCaption","COLORS","ChartValueRow","formatChartValue","toChartValue","clamp","ComparisonBarChart","bars","title","total","colors","COMPARISON_BAR_COLORS","wrapperStyle","hasData","visibleBars","rows","useMemo","denominator","sum","percentage","share","pickColor","formatPercent","ChartCard","row"],"mappings":";;;;;;;AAgBA,MAAMA,IAAqC,MAAM;AAAA,EAChD,EAAE,QAAQ,EAAA;AAAA,EACV,CAACC,GAAGC,OAAW,EAAE,KAAK,eAAeA,CAAK,IAAI,OAAO,IAAI,OAAO,EAAA;AACjE,GAiBMC,IAAgC,CAAC;AAAA,EACtC,KAAK,EAAE,KAAAC,GAAK,WAAAC,GAAW,OAAAC,GAAO,iBAAAC,EAAA;AAAA,EAC9B,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAEhD,SACC,gBAAAC,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,GAAA,GACzD,UAAA;AAAA,IAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOP;AAAA,UACP,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,eAAe;AAAA,UACf,KAAK;AAAA,QAAA;AAAA,QAGN,UAAA;AAAA,UAAA,gBAAAQ,EAACC,KAAY,OAAOC,EAAO,QAAQ,WAAY,YAAI,OAAM;AAAA,UACzD,gBAAAF;AAAA,YAACG;AAAA,YAAA;AAAA,cACA,OACCf,EAAI,cAAcgB,EAAiBC,EAAajB,EAAI,KAAK,GAAGO,CAAM;AAAA,cAEnE,MAAMJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,aAAW,4BAA4BX,EAAI,GAAG;AAAA,QAC9C,cAAc,MAAMS,EAAa,EAAI;AAAA,QACrC,cAAc,MAAMA,EAAa,EAAK;AAAA,QACtC,OAAO,EAAE,UAAU,YAAY,MAAM,GAAG,QAAQJ,EAAA;AAAA,QAEhD,UAAA;AAAA,UAAA,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,aAAW,8BAA8BZ,EAAI,GAAG;AAAA,cAChD,OAAO;AAAA,gBACN,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,cAAc;AAAA,gBACd,QAAQ,aAAac,EAAO,OAAO,OAAO;AAAA,gBAC1C,iBAAiBA,EAAO,QAAQ;AAAA,gBAChC,UAAU;AAAA,cAAA;AAAA,cAGX,UAAA,gBAAAF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACA,aAAW,6BAA6BZ,EAAI,GAAG;AAAA,kBAC/C,OAAO;AAAA,oBACN,UAAU;AAAA,oBACV,KAAK;AAAA,oBACL,MAAM;AAAA,oBACN,QAAQ;AAAA,oBACR,OAAO,GAAGC,CAAS;AAAA,oBACnB,iBAAiBC;AAAA,kBAAA;AAAA,gBAClB;AAAA,cAAA;AAAA,YACD;AAAA,UAAA;AAAA,UAEAI,KAAeE,KACf,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,aAAW,gCAAgCX,EAAI,GAAG;AAAA,cAClD,OAAO;AAAA,gBACN,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM,GAAGkB,EAAMjB,IAAY,GAAG,GAAG,EAAE,CAAC;AAAA,gBACpC,WAAW;AAAA,gBACX,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,iBAAiBa,EAAO,QAAQ;AAAA,gBAChC,WAAW;AAAA,gBACX,eAAe;AAAA,cAAA;AAAA,cAGhB,UAAA;AAAA,gBAAA,gBAAAF;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACA,OAAO;AAAA,sBACN,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,WAAW;AAAA,sBACX,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,YAAY;AAAA,sBACZ,aAAa;AAAA,sBACb,cAAc,aAAaE,EAAO,QAAQ,OAAO;AAAA,oBAAA;AAAA,kBAClD;AAAA,gBAAA;AAAA,kCAEAD,GAAA,EAAY,OAAOC,EAAO,QAAQ,gBACjC,UAAAX,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAEF,GACD;AAEF,GAEagB,IAAoD,CAAC;AAAA,EACjE,MAAAC,IAAO,CAAA;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAASC;AAAA,EACT,YAAApB,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,QAAAE;AAAA,EACA,aAAAD,IAAc;AAAA,EACd,cAAAmB;AACD,MAAM;AACL,QAAMC,IAAUN,EAAK,KAAK,CAACpB,MAAQiB,EAAajB,EAAI,KAAK,IAAI,CAAC,GACxD2B,IAAcP,EAAK,SAASA,IAAOxB,GAEnCgC,IAAOC,EAAuB,MAAM;AACzC,UAAMC,IACLR,MAAU,SACPL,EAAaK,CAAK,IAClBK,EAAY,OAAO,CAACI,GAAK/B,MAAQ+B,IAAMd,EAAajB,EAAI,KAAK,GAAG,CAAC;AAErE,WAAO2B,EAAY,IAAI,CAAC3B,GAAKF,MAAU;AACtC,YAAMkC,IACLhC,EAAI,eACH8B,IAAc,IAAKb,EAAajB,EAAI,KAAK,IAAI8B,IAAe,MAAM,IAC9DG,IAAQ,OAAO,SAASD,CAAU,IAAI,KAAK,IAAIA,GAAY,CAAC,IAAI;AACtE,aAAO;AAAA,QACN,KAAAhC;AAAA,QACA,WAAWkB,EAAMe,GAAO,GAAG,GAAG;AAAA,QAC9B,OAAOP,IAAU1B,EAAI,SAASkC,EAAUX,GAAQzB,CAAK,IAAI;AAAA,QACzD,iBAAiB4B,IACd1B,EAAI,mBAAmB,GAAGmC,EAAcF,CAAK,CAAC,MAC9C;AAAA,MAAA;AAAA,IAEL,CAAC;AAAA,EACF,GAAG,CAACN,GAAaL,GAAOC,GAAQG,CAAO,CAAC;AAExC,SACC,gBAAAd;AAAA,IAACwB;AAAA,IAAA;AAAA,MACA,UAAS;AAAA,MACT,OAAAf;AAAA,MACA,SAAS;AAAA,MACT,KAAK;AAAA,MACL,cAAAI;AAAA,MAEC,UAAAG,EAAK,IAAI,CAACS,MACV,gBAAAzB;AAAA,QAACb;AAAA,QAAA;AAAA,UAEA,KAAAsC;AAAA,UACA,YAAAjC;AAAA,UACA,WAAAC;AAAA,UACA,aAAaC,KAAeoB;AAAA,UAC5B,QAAAnB;AAAA,QAAA;AAAA,QALK8B,EAAI,IAAI;AAAA,MAAA,CAOd;AAAA,IAAA;AAAA,EAAA;AAGJ;"}

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

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

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

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

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

@@ -0,0 +1,176 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import { BodyTiny as L } from "../../../TypographyStyle.js";
+import { COLORS as v } from "../../../../constants/Theme.js";
+import { ChartCard as w, ChartValueRow as x } from "../ChartLayout.js";
+import { pickColor as S, FUNNEL_BAND_COLORS as $ } from "../chartPalette.js";
+import { toChartValue as d, formatPercent as E, formatChartValue as O } from "../formatChartValue.js";
+import { buildFunnelLayout as R, FUNNEL_VIEW_WIDTH as k } from "./funnelGeometry.js";
+const _ = Array.from(
+  { length: 4 },
+  (t, a) => ({ key: `placeholder-${a}`, label: "", value: 0 })
+), A = (t, a) => {
+  const r = t[a];
+  if (r.percentageLabel !== void 0)
+    return r.percentageLabel;
+  if (a === 0)
+    return d(r.value) > 0 ? "100%" : "";
+  const l = r.branchOf ? t.find((h) => h.key === r.branchOf) : t[a - 1], n = d(l?.value);
+  if (!l || n === 0)
+    return "";
+  const f = d(r.value) / n * 100;
+  return `${E(f)}% of ${l.label}`;
+}, g = ({
+  left: t,
+  height: a
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      top: 0,
+      bottom: a === void 0 ? 0 : void 0,
+      height: a,
+      left: t,
+      width: 1,
+      backgroundColor: v.stroke.primary
+    }
+  }
+), D = ({
+  stage: t,
+  color: a,
+  chip: r,
+  locale: l
+}) => /* @__PURE__ */ y(
+  "div",
+  {
+    "data-test": `funnel-chart-header-${t.key}`,
+    style: {
+      flex: 1,
+      minWidth: 0,
+      display: "flex",
+      flexDirection: "column",
+      gap: 8,
+      alignItems: "flex-start",
+      padding: "0 8px 0 12px"
+    },
+    children: [
+      t.label && /* @__PURE__ */ y(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            width: "100%",
+            opacity: 0.8
+          },
+          children: [
+            /* @__PURE__ */ o(
+              "span",
+              {
+                style: {
+                  width: 16,
+                  height: 16,
+                  borderRadius: 2.667,
+                  backgroundColor: a,
+                  flexShrink: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ o(L, { color: v.content.secondary, children: t.label })
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(
+        x,
+        {
+          value: t.valueLabel ?? O(d(t.value), l),
+          chip: r
+        }
+      )
+    ]
+  }
+), j = ({
+  stages: t = [],
+  title: a,
+  plotHeight: r = 291,
+  headerHeight: l = 83,
+  colors: n = $,
+  locale: f,
+  wrapperStyle: h
+}) => {
+  const i = t.length ? t : _, s = m(
+    () => R(i, { plotHeight: r, headerHeight: l }),
+    [i, r, l]
+  ), c = !s.isEmpty, b = (e) => `${e / k * 100}%`, u = m(
+    () => i.map((e, p) => ({
+      stage: e,
+      color: c ? e.color ?? S(n, p) : v.content.inactive,
+      chip: c ? A(i, p) : ""
+    })),
+    [i, n, c]
+  ), C = m(
+    () => new Map(u.map(({ stage: e, color: p }) => [e.key, p])),
+    [u]
+  );
+  return /* @__PURE__ */ o(
+    w,
+    {
+      dataTest: "funnel-chart",
+      title: a,
+      padding: "18px 24px",
+      gap: 14,
+      wrapperStyle: { overflow: "hidden", ...h },
+      children: /* @__PURE__ */ y("div", { style: { position: "relative", width: "100%", height: r }, children: [
+        /* @__PURE__ */ o(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${k} ${r}`,
+            preserveAspectRatio: "none",
+            "aria-hidden": !0,
+            style: { position: "absolute", inset: 0 },
+            children: s.bands.map((e) => /* @__PURE__ */ o(
+              "path",
+              {
+                "data-test": `funnel-chart-band-${e.key}`,
+                d: e.d,
+                fill: c ? C.get(e.key) : "transparent"
+              },
+              e.key
+            ))
+          }
+        ),
+        s.separators.full.map((e) => /* @__PURE__ */ o(g, { left: b(e) }, `full-${e}`)),
+        s.separators.header.map((e) => /* @__PURE__ */ o(
+          g,
+          {
+            left: b(e),
+            height: l
+          },
+          `header-${e}`
+        )),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              height: l,
+              display: "flex"
+            },
+            children: u.map((e) => /* @__PURE__ */ o(D, { ...e, locale: f }, e.stage.key))
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  j as FunnelChart
+};
+//# sourceMappingURL=FunnelChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { BodyTiny } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ChartCard, ChartValueRow } from '../ChartLayout';\nimport { FUNNEL_BAND_COLORS, pickColor } from '../chartPalette';\nimport {\n\tformatChartValue,\n\tformatPercent,\n\ttoChartValue,\n} from '../formatChartValue';\nimport type { FunnelChartI, FunnelStageI } from './FunnelChart.model';\nimport { 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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"}