npm - @bikdotai/bik-component-library - Versions diffs - 0.0.859 → 0.0.860-beta.0 - Mend

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

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.

Files changed (65) hide show

package/README.md CHANGED Viewed

@@ -2,6 +2,15 @@
 [![Deploy Prod](https://github.com/BikDotAiDev/bik-component-library/actions/workflows/publish-prod.yaml/badge.svg)](https://github.com/BikDotAiDev/bik-component-library/actions/workflows/publish-prod.yaml)
+## Documentation
+- [Integration](docs/INTEGRATION.md) — consuming the package in an app
+- [Icons](docs/ICONS.md) — adding an SVG and using it through the icon exports
+- [Sanitization](docs/sanitization.md) — the HTML/CSS sanitisation layer and what it strips
+- [Editor](docs/editor/01-overview.md) — the rich-text editor: props, ref API, toolbar, email mode, customisation
+- [FunnelChart & ComparisonBarChart](docs/charts/funnel-and-comparison-charts.md) — the analytics charts behind the Helpdesk AI Impact tab: branching funnel geometry, the shared chart card/palette/format helpers, and the zero states
+- [Frontend Testing Guide](docs/testing/writing-tests.md) — test authoring, linting, mandate exceptions, required status checks
 ## Testing (Jest + SWC)
 Tests use **Jest** with **`@swc/jest`** instead of `ts-jest` for faster TypeScript and JSX transforms.

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),F=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),Q=require("../../utils/DateUtils.js"),l=require("../../constants/Theme.js"),X=require("../../assets/icons/arrow_down.svg.js"),Y=require("../../assets/icons/arrow_up.svg.js"),Z=require("../../assets/icons/info.svg.js"),h=require("../TypographyStyle.js"),$=require("./chart/utils/calcPercentage.js"),z=require("./CommonStyles.js"),M=require("../tooltips/Tooltip.js"),T=require("../tag/Tag.js"),P=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},ee=P(x),te=({title:n,value:r,trendPercent:t,type:a="horizontal",timeline:o,customRange:u,tooltip:j,card:y=!0,rightSeparator:v=!1,size:m="big",share:i=!1,formatVal:w,prefixSymbol:c,trailingIcon:C,onTrailIconClick:q,iconTooltipBody:g,funnelPercent:b,isLoading:s,trendRaw:f,trendRawString:d,suffixText:p,trendStyle:N,trendContainerStyle:W,trendIconStyle:I,containerStyle:U,prevTrendDiff:R,relativePercentageDiff:A,isInternationalStore:L,Icon:O,iconContainerStyle:B,tooltipTimelineText:V,customTimelineText:_})=>{const G=m==="big"?h.TitleLarge:h.TitleMedium,k=typeof t<"u"?t<0?"negative":t===0?"neutral":"positive":void 0,S=typeof t<"u"?i?Math.round(t):Math.abs(Math.round(t)):void 0,H=()=>typeof r>"u"?"--":typeof r=="number"&&w?r>999?L?`${c??""}${$.truncateValueForInternationalStore(r)} ${p??""}`:`${c??""}${$.truncateValueForIndianStore(r)} ${p??""}`:`${c??""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(r)} ${p??""}`:`${c??""}${r} ${p??""}`,J=K=>{const D=Math.abs(K);return D%1!==0?`${D.toFixed(1)} %`:`${D} %`};return e.jsx(z.AnalyticsTrendContainer,{card:y,style:{...U},children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:O?12:4,borderRightWidth:v?1:0,borderRightColor:l.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:y?0:24,paddingRight:y?0:24,height:"100%",justifyContent:O?"flex-start":"space-between",alignItems:"center",...W??{}},children:[!!O&&e.jsx(z.IconContainer,{style:{...B},children:e.jsx(O,{})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,height:"100%",...N??{}},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[e.jsx(h.BodyCaption,{style:{color:l.COLORS.content.secondary},children:n}),j&&e.jsx(M.Tooltip,{body:j,placement:"right",width:300,children:e.jsx("div",{style:{display:"flex",cursor:"pointer",height:"100%"},children:e.jsx(Z.default,{color:l.COLORS.content.primary,height:16,width:16})})})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:12,alignItems:"center",...i?{justifyContent:"space-between"}:{}},children:[s&&e.jsx(F.ShimmerComponentStyled,{width:108,height:26}),!s&&e.jsx(G,{style:{color:l.COLORS.content.primary},children:H()}),typeof A=="number"&&e.jsx(T.Tag,{tagText:`${A}%`,theme:"light",type:"neutral"}),a==="horizontal"&&!s&&!i&&e.jsx(E,{timeline:o,customRange:u,percent:S,direction:k,trendRaw:f,trendRawString:d,prefixSymbol:c,trendIconStyle:I,isInternationalStore:L,tooltipTimelineText:V,customTimelineText:_}),s&&!i&&a==="horizontal"&&e.jsx(F.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),a==="vertical"&&!s&&typeof b<"u"&&e.jsx(T.Tag,{tagText:`${b} %`,theme:"light",type:"neutral"}),i&&!s&&typeof S<"u"&&e.jsx(T.Tag,{tagText:`${S} %`,theme:"light",type:"neutral"}),!i&&!s&&R&&R!=0?e.jsx(T.Tag,{tagText:J(R),theme:"light",type:"neutral"}):e.jsx(e.Fragment,{})]}),a==="vertical"&&!s&&!i&&e.jsx("div",{style:{marginTop:10},children:e.jsx(E,{timeline:o,customRange:u,percent:S,direction:k,trendRaw:f,trendRawString:d,prefixSymbol:c,trendIconStyle:I,isInternationalStore:L,tooltipTimelineText:V,customTimelineText:_})}),s&&a==="vertical"&&e.jsx(F.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]}),g&&!s&&e.jsx(M.Tooltip,{body:g,placement:"right",children:C&&e.jsx("div",{"data-test":"analytics-trend-trailing-icon",className:"icon--holder",onClick:q,children:ee.default.createElement(C,{height:20,width:20,color:l.COLORS.content.secondary})})})]})})},E=({percent:n,direction:r,timeline:t,customRange:a,trendRaw:o,trendRawString:u,prefixSymbol:j,trendIconStyle:y,isInternationalStore:v,tooltipTimelineText:m,customTimelineText:i})=>{const w=()=>{let d="--";if(o)return v?d=String($.truncateValueForInternationalStore(Math.abs(o))):d=String($.truncateValueForIndianStore(Math.abs(o))),o<0?"-"+d:d},c=()=>{const d=((o??0)>0?"+":"")+(j??"");return typeof o>"u"?"--":`${d??""}${w()}`},[C,q]=x.useState(c()),[g,b]=x.useState(i||"");x.useEffect(()=>{i||b(t==="today"?"vs yesterday":t==="yesterday"?"vs 1 day before":t==="7 days"?"vs last 7 days":t==="30 days"?"vs last 30 days":t==="custom"&&a?Q.default.getAnalyticsCustomDateTimelineText(a):"")},[t,a]),x.useEffect(()=>{q(c())},[o]);const s=r==="negative"?X.default:Y.default,f=r==="negative"?l.COLORS.background.negative.vibrant:r==="positive"?l.COLORS.background.positive.vibrant:l.COLORS.content.placeholder;return e.jsxs("div",{style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"},children:[typeof n=="number"&&e.jsx(s,{color:f,height:16,width:16,style:{marginRight:2,...y??{}}}),typeof n=="number"&&r&&e.jsxs(h.Caption,{style:{color:f},children:[r==="neutral"?0:n<1e3?n:">999","%"]}),!!o&&e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:`(${C})`}),!o&&(u?.length||0)>0&&e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:`${u}`}),t&&(m?e.jsx(M.Tooltip,{body:m,placement:"bottom",children:e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:i||g})}):e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:i||g}))]})};exports.AnalyticsTrend=te;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),M=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),Y=require("../../utils/DateUtils.js"),s=require("../../constants/Theme.js"),Z=require("../../assets/icons/arrow_down.svg.js"),P=require("../../assets/icons/arrow_up.svg.js"),ee=require("../../assets/icons/info.svg.js"),d=require("../TypographyStyle.js"),S=require("./chart/utils/calcPercentage.js"),N=require("./CommonStyles.js"),I=require("../tooltips/Tooltip.js"),O=require("../tag/Tag.js"),te=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},re=te(p),ne=({title:o,value:n,trendPercent:r,type:a="horizontal",timeline:i,customRange:y,tooltip:x,tooltipPlacement:T="right",tooltipWidth:$=300,card:h=!0,rightSeparator:u=!1,size:v="big",share:l=!1,formatVal:w,prefixSymbol:c,trailingIcon:g,onTrailIconClick:q,iconTooltipBody:j,funnelPercent:f,isLoading:t,trendRaw:R,trendRawString:A,suffixText:m,trendStyle:U,trendContainerStyle:B,trendIconStyle:V,containerStyle:G,prevTrendDiff:L,relativePercentageDiff:_,isInternationalStore:D,Icon:C,iconContainerStyle:H,tooltipTimelineText:k,customTimelineText:z})=>{const J=v==="big"?d.TitleLarge:d.TitleMedium,E=typeof r<"u"?r<0?"negative":r===0?"neutral":"positive":void 0,b=typeof r<"u"?l?Math.round(r):Math.abs(Math.round(r)):void 0,K=()=>typeof n>"u"?"--":typeof n=="number"&&w?n>999?D?`${c??""}${S.truncateValueForInternationalStore(n)} ${m??""}`:`${c??""}${S.truncateValueForIndianStore(n)} ${m??""}`:`${c??""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(n)} ${m??""}`:`${c??""}${n} ${m??""}`,Q=X=>{const F=Math.abs(X);return F%1!==0?`${F.toFixed(1)} %`:`${F} %`};return e.jsx(N.AnalyticsTrendContainer,{card:h,style:{...G},children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:C?12:4,borderRightWidth:u?1:0,borderRightColor:s.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:h?0:24,paddingRight:h?0:24,height:"100%",justifyContent:C?"flex-start":"space-between",alignItems:"center",...B??{}},children:[!!C&&e.jsx(N.IconContainer,{style:{...H},children:e.jsx(C,{})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,height:"100%",...U??{}},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[e.jsx(d.BodyCaption,{style:{color:s.COLORS.content.secondary},children:o}),x&&e.jsx(I.Tooltip,{body:x,placement:T,width:$,children:e.jsx("div",{style:{display:"flex",cursor:"pointer",height:"100%"},children:e.jsx(ee.default,{color:s.COLORS.content.primary,height:16,width:16})})})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:12,alignItems:"center",...l?{justifyContent:"space-between"}:{}},children:[t&&e.jsx(M.ShimmerComponentStyled,{width:108,height:26}),!t&&e.jsx(J,{style:{color:s.COLORS.content.primary},children:K()}),typeof _=="number"&&e.jsx(O.Tag,{tagText:`${_}%`,theme:"light",type:"neutral"}),a==="horizontal"&&!t&&!l&&e.jsx(W,{timeline:i,customRange:y,percent:b,direction:E,trendRaw:R,trendRawString:A,prefixSymbol:c,trendIconStyle:V,isInternationalStore:D,tooltipTimelineText:k,customTimelineText:z}),t&&!l&&a==="horizontal"&&e.jsx(M.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),a==="vertical"&&!t&&typeof f<"u"&&e.jsx(O.Tag,{tagText:`${f} %`,theme:"light",type:"neutral"}),l&&!t&&typeof b<"u"&&e.jsx(O.Tag,{tagText:`${b} %`,theme:"light",type:"neutral"}),!l&&!t&&L&&L!=0?e.jsx(O.Tag,{tagText:Q(L),theme:"light",type:"neutral"}):e.jsx(e.Fragment,{})]}),a==="vertical"&&!t&&!l&&e.jsx("div",{style:{marginTop:10},children:e.jsx(W,{timeline:i,customRange:y,percent:b,direction:E,trendRaw:R,trendRawString:A,prefixSymbol:c,trendIconStyle:V,isInternationalStore:D,tooltipTimelineText:k,customTimelineText:z})}),t&&a==="vertical"&&e.jsx(M.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]}),j&&!t&&e.jsx(I.Tooltip,{body:j,placement:"right",children:g&&e.jsx("div",{"data-test":"analytics-trend-trailing-icon",className:"icon--holder",onClick:q,children:re.default.createElement(g,{height:20,width:20,color:s.COLORS.content.secondary})})})]})})},W=({percent:o,direction:n,timeline:r,customRange:a,trendRaw:i,trendRawString:y,prefixSymbol:x,trendIconStyle:T,isInternationalStore:$,tooltipTimelineText:h,customTimelineText:u})=>{const v=()=>{let t="--";if(i)return $?t=String(S.truncateValueForInternationalStore(Math.abs(i))):t=String(S.truncateValueForIndianStore(Math.abs(i))),i<0?"-"+t:t},l=()=>{const t=((i??0)>0?"+":"")+(x??"");return typeof i>"u"?"--":`${t??""}${v()}`},[w,c]=p.useState(l()),[g,q]=p.useState(u||"");p.useEffect(()=>{u||q(r==="today"?"vs yesterday":r==="yesterday"?"vs 1 day before":r==="7 days"?"vs last 7 days":r==="30 days"?"vs last 30 days":r==="custom"&&a?Y.default.getAnalyticsCustomDateTimelineText(a):"")},[r,a]),p.useEffect(()=>{c(l())},[i]);const j=n==="negative"?Z.default:P.default,f=n==="negative"?s.COLORS.background.negative.vibrant:n==="positive"?s.COLORS.background.positive.vibrant:s.COLORS.content.placeholder;return e.jsxs("div",{style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"},children:[typeof o=="number"&&e.jsx(j,{color:f,height:16,width:16,style:{marginRight:2,...T??{}}}),typeof o=="number"&&n&&e.jsxs(d.Caption,{style:{color:f},children:[n==="neutral"?0:o<1e3?o:">999","%"]}),!!i&&e.jsx(d.Caption,{style:{marginLeft:4,color:s.COLORS.content.placeholder},children:`(${w})`}),!i&&(y?.length||0)>0&&e.jsx(d.Caption,{style:{marginLeft:4,color:s.COLORS.content.placeholder},children:`${y}`}),r&&(h?e.jsx(I.Tooltip,{body:h,placement:"bottom",children:e.jsx(d.Caption,{style:{marginLeft:4,color:s.COLORS.content.placeholder},children:u||g})}):e.jsx(d.Caption,{style:{marginLeft:4,color:s.COLORS.content.placeholder},children:u||g}))]})};exports.AnalyticsTrend=ne;
 //# sourceMappingURL=AnalyticsTrend.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js.map CHANGED Viewed

	@@ -1 +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":"0oBAuDaA,GAAoD,CAAC,CACjE,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,aACP,SAAAC,EACA,YAAAC,EACA,QAAAC,EACA,KAAAC,EAAO,GACP,eAAAC,EAAiB,GACjB,KAAAC,EAAO,MACP,MAAAC,EAAQ,GACR,UAAAC,EACA,aAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,UAAAC,EACA,SAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,cAAAC,EACA,uBAAAC,EACA,qBAAAC,EACA,KAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,mBAAAC,CACD,IAAM,CACL,MAAMC,EAAYvB,IAAS,MAAQwB,EAAAA,WAAaC,EAAAA,YAC1CC,EACL,OAAOjC,EAAiB,IACrBA,EAAe,EACd,WACAA,IAAiB,EACjB,UACA,WACD,OAEEkC,EACL,OAAOlC,EAAiB,IACrBQ,EACC,KAAK,MAAMR,CAAY,EACvB,KAAK,IAAI,KAAK,MAAMA,CAAY,CAAC,EAClC,OAEEmC,EAAkB,IACnB,OAAOpC,EAAU,IACb,KAGJ,OAAOA,GAAU,UAChBU,EACCV,EAAQ,IACP0B,EACI,GAAGf,GAAgB,EAAE,GAAG0B,EAAAA,mCAC9BrC,CAAA,CACA,IAAImB,GAAc,EAAE,GAEd,GAAGR,GAAgB,EAAE,GAAG2B,EAAAA,4BAC9BtC,CAAA,CACA,IAAImB,GAAc,EAAE,GAGf,GAAGR,GAAgB,EAAE,GAAG,IAAI,KAAK,aAAa,QAAS,CAC7D,sBAAuB,CAAA,CACvB,EAAE,OAAOX,CAAK,CAAC,IAAImB,GAAc,EAAE,GAKhC,GAAGR,GAAgB,EAAE,GAAGX,CAAK,IAAImB,GAAc,EAAE,GAGnDoB,EAAmBC,GAAsB,CAC9C,MAAMC,EAAO,KAAK,IAAID,CAAS,EAC/B,OAAIC,EAAO,IAAM,EACT,GAAGA,EAAK,QAAQ,CAAC,CAAC,KAEnB,GAAGA,CAAI,IACf,EAEA,OACCC,EAAAA,IAACC,EAAAA,wBAAA,CACA,KAAArC,EACA,MAAO,CACN,GAAGiB,CAAA,EAGJ,SAAAqB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,IAAKjB,EAAO,GAAK,EACjB,iBAAkBpB,EAAiB,EAAI,EACvC,iBAAkBsC,EAAAA,OAAO,OAAO,QAChC,iBAAkB,QAClB,YAAcvC,EAAY,EAAL,GACrB,aAAeA,EAAY,EAAL,GACtB,OAAQ,OACR,eAAgBqB,EAAO,aAAe,gBACtC,WAAY,SACZ,GAAIN,GAAuB,CAAA,CAAC,EAG5B,SAAA,CAAA,CAAC,CAACM,GACFe,EAAAA,IAACI,EAAAA,cAAA,CAAc,MAAO,CAAE,GAAGlB,CAAA,EAC1B,SAAAc,EAAAA,IAACf,EAAA,CAAA,CAAK,CAAA,CACP,EAEDiB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,SACf,IAAK,EACL,OAAQ,OACR,GAAIxB,GAAc,CAAA,CAAC,EAGpB,SAAA,CAAAwB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,IAAK,EACL,WAAY,QAAA,EAGb,SAAA,CAAAF,EAAAA,IAACK,EAAAA,YAAA,CACA,MAAO,CACN,MAAOF,EAAAA,OAAO,QAAQ,SAAA,EAGtB,SAAA9C,CAAA,CAAA,EAGDM,SACC2C,UAAA,CAAQ,KAAM3C,EAAS,UAAW,QAAS,MAAO,IAClD,SAAAqC,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,OAAQ,UACR,OAAQ,MAAA,EAGT,SAAAA,EAAAA,IAACO,EAAAA,QAAA,CACA,MAAOJ,EAAAA,OAAO,QAAQ,QACtB,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,CACD,CACD,CAAA,CAAA,CAAA,EAIFD,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,IAAK,GACL,WAAY,SACZ,GAAInC,EAAQ,CAAE,eAAgB,iBAAoB,CAAA,CAAC,EAGnD,SAAA,CAAAO,GAAa0B,EAAAA,IAACQ,yBAAA,CAAuB,MAAO,IAAK,OAAQ,GAAI,EAC7D,CAAClC,GACD0B,EAAAA,IAACX,EAAA,CACA,MAAO,CACN,MAAOc,EAAAA,OAAO,QAAQ,OAAA,EAGtB,SAAAT,EAAA,CAAgB,CAAA,EAGlB,OAAOX,GAA2B,UAClCiB,EAAAA,IAACS,EAAAA,IAAA,CACA,QAAS,GAAG1B,CAAsB,IAClC,MAAM,QACN,KAAK,SAAA,CAAA,EAGNvB,IAAS,cAAgB,CAACc,GAAa,CAACP,GACxCiC,EAAAA,IAACU,EAAA,CACA,SAAAjD,EACA,YAAAC,EACA,QAAA+B,EACA,UAAWD,EACX,SAAAjB,EACA,eAAAC,EACA,aAAAP,EACA,eAAAW,EACA,qBAAAI,EACA,oBAAAG,EACA,mBAAAC,CAAA,CAAA,EAGDd,GAAa,CAACP,GAASP,IAAS,cAChCwC,EAAAA,IAACQ,EAAAA,uBAAA,CAAuB,OAAQ,GAAI,MAAO,IAAK,UAAW,CAAA,CAAG,EAE9DhD,IAAS,YACT,CAACc,GACD,OAAOD,EAAkB,KACxB2B,EAAAA,IAACS,EAAAA,IAAA,CACA,QAAS,GAAGpC,CAAa,KACzB,MAAM,QACN,KAAK,SAAA,CAAA,EAGPN,GAAS,CAACO,GAAa,OAAOmB,EAAY,KAC1CO,EAAAA,IAACS,EAAAA,IAAA,CAAI,QAAS,GAAGhB,CAAO,KAAM,MAAM,QAAQ,KAAK,UAAU,EAE3D,CAAC1B,GAAS,CAACO,GAAaQ,GAAiBA,GAAiB,EAC1DkB,EAAAA,IAACS,EAAAA,IAAA,CACA,QAASZ,EAAgBf,CAAa,EACtC,MAAM,QACN,KAAK,SAAA,CAAA,EAGNkB,EAAAA,IAAAW,EAAAA,SAAA,CAAA,CAAE,CAAA,CAAA,CAAA,EAGHnD,IAAS,YAAc,CAACc,GAAa,CAACP,GACtCiC,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,UAAW,EAAA,EACxB,SAAAA,EAAAA,IAACU,EAAA,CACA,SAAAjD,EACA,YAAAC,EACA,QAAA+B,EACA,UAAWD,EACX,SAAAjB,EACA,eAAAC,EACA,aAAAP,EACA,eAAAW,EACA,qBAAAI,EACA,oBAAAG,EACA,mBAAAC,CAAA,CAAA,EAEF,EAEAd,GAAad,IAAS,YACtBwC,EAAAA,IAACQ,EAAAA,uBAAA,CAAuB,OAAQ,GAAI,MAAO,IAAK,UAAW,CAAA,CAAG,CAAA,CAAA,CAAA,EAG/DpC,GAAmB,CAACE,GACpB0B,EAAAA,IAACM,EAAAA,SAAQ,KAAMlC,EAAiB,UAAW,QACzC,SAAAF,GACA8B,EAAAA,IAAC,MAAA,CACA,YAAU,gCACV,UAAW,eACX,QAAS7B,EAER,SAAAyC,GAAAA,QAAM,cAAc1C,EAAc,CAClC,OAAQ,GACR,MAAO,GACP,MAAOiC,EAAAA,OAAO,QAAQ,SAAA,CACtB,CAAA,CAAA,CACF,CAEF,CAAA,CAAA,CAAA,CAEF,CAAA,CAGH,EAEMO,EAYD,CAAC,CACL,QAAAjB,EACA,UAAAoB,EACA,SAAApD,EACA,YAAAC,EACA,SAAAa,EACA,eAAAC,EACA,aAAAP,EACA,eAAAW,EACA,qBAAAI,EACA,oBAAAG,EACA,mBAAAC,CACD,IAAM,CACL,MAAM0B,EAAiB,IAAM,CAC5B,IAAIC,EAAc,KAClB,GAAIxC,EAQH,OAPIS,EACH+B,EAAc,OACbpB,qCAAmC,KAAK,IAAIpB,CAAQ,CAAC,CAAA,EAGtDwC,EAAc,OAAOnB,EAAAA,4BAA4B,KAAK,IAAIrB,CAAQ,CAAC,CAAC,EAEjEA,EAAW,EACP,IAAMwC,EAENA,CAGV,EAEMC,EAAuB,IAAM,CAClC,MAAMC,IACH1C,GAAY,GAAK,EAAI,IAAM,KAAON,GAAgB,IAKrD,OAHC,OAAOM,EAAa,IACjB,KACA,GAAG0C,GAAkB,EAAE,GAAGH,EAAA,CAAgB,EAE/C,EAEM,CAACI,EAAcC,CAAe,EAAIC,EAAAA,SACvCJ,EAAA,CAAqB,EAEhB,CAACK,EAAcC,CAAe,EAAIF,EAAAA,SACvChC,GAAsB,EAAA,EAGvBmC,EAAAA,UAAU,IAAM,CACXnC,GAGJkC,EACC7D,IAAa,QACV,eACAA,IAAa,YACb,kBACAA,IAAa,SACb,iBACAA,IAAa,UACb,kBACAA,IAAa,UAAYC,EACzB8D,UAAU,mCAAmC9D,CAAW,EACxD,EAAA,CAEL,EAAG,CAACD,EAAUC,CAAW,CAAC,EAE1B6D,EAAAA,UAAU,IAAM,CACfJ,EAAgBH,GAAsB,CACvC,EAAG,CAACzC,CAAQ,CAAC,EAEb,MAAMkD,EAAYZ,IAAc,WAAaa,EAAAA,QAAgBC,EAAAA,QAEvDC,EACLf,IAAc,WACXV,EAAAA,OAAO,WAAW,SAAS,QAC3BU,IAAc,WACdV,EAAAA,OAAO,WAAW,SAAS,QAC3BA,EAAAA,OAAO,QAAQ,YAEnB,OACCD,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,WAAY,SACZ,cAAe,MACf,SAAU,MAAA,EAGV,SAAA,CAAA,OAAOT,GAAY,UACnBO,EAAAA,IAACyB,EAAA,CACA,MAAAG,EACA,OAAQ,GACR,MAAO,GACP,MAAO,CAAE,YAAa,EAAG,GAAIhD,GAAkB,CAAA,CAAC,CAAG,CAAA,EAGpD,OAAOa,GAAY,UAAYoB,UAC9BgB,UAAA,CAAQ,MAAO,CAAE,MAAAD,CAAA,EAChB,SAAA,CAAAf,IAAc,UAAY,EAAIpB,EAAU,IAAOA,EAAU,OACzD,GAAA,EACF,EAEA,CAAC,CAAClB,GACFyB,MAAC6B,EAAAA,QAAA,CAAQ,MAAO,CAAE,WAAY,EAAG,MAAO1B,EAAAA,OAAO,QAAQ,WAAA,EACrD,SAAA,IAAIe,CAAY,IAClB,EAEA,CAAC3C,IAAaC,GAAgB,QAAU,GAAK,SAC5CqD,UAAA,CAAQ,MAAO,CAAE,WAAY,EAAG,MAAO1B,EAAAA,OAAO,QAAQ,aACrD,SAAA,GAAG3B,CAAc,GACnB,EAGAf,IACC0B,EACAa,EAAAA,IAACM,WAAQ,KAAMnB,EAAqB,UAAU,SAC7C,SAAAa,EAAAA,IAAC6B,EAAAA,QAAA,CACA,MAAO,CAAE,WAAY,EAAG,MAAO1B,EAAAA,OAAO,QAAQ,WAAA,EAE7C,SAAAf,GAAsBiC,CAAA,CAAA,CACxB,CACD,EAEArB,EAAAA,IAAC6B,EAAAA,QAAA,CAAQ,MAAO,CAAE,WAAY,EAAG,MAAO1B,EAAAA,OAAO,QAAQ,WAAA,EACrD,YAAsBkB,EACxB,EAAA,CAAA,CAAA,CAIL"}
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 { 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/cjs/components/analytics-chips-and-dropdowns/chart/ChartLayout.js ADDED Viewed

	@@ -0,0 +1,2 @@
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

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ChartLayout.js.map ADDED Viewed

@@ -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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.js ADDED Viewed

	@@ -0,0 +1,2 @@
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

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.js.map ADDED Viewed

@@ -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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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.styled.js ADDED Viewed

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

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/ComparisonBarChart/ComparisonBarChart.styled.js.map ADDED Viewed

@@ -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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.js ADDED Viewed

	@@ -0,0 +1,2 @@
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)/s100;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_WIDTH100}%`,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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,43 @@
+"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`
+	position: absolute;
+	top: 0;
+	${t=>t.$height===void 0?"bottom: 0;":`height: ${t.$height}px;`}
+	left: ${t=>t.$left};
+	width: 1px;
+	background-color: ${a.COLORS.stroke.primary};
+`,d=e.default.div`
+	position: relative;
+	width: 100%;
+	height: ${t=>t.$height}px;
+`,n=e.default.svg`
+	position: absolute;
+	inset: 0;
+`,r=e.default.div`
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: ${t=>t.$height}px;
+	display: flex;
+`,s=e.default.div`
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	align-items: flex-start;
+	padding: 0 8px 0 12px;
+`,p=e.default.div`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	opacity: 0.8;
+`,g=e.default.span`
+	width: 16px;
+	height: 16px;
+	border-radius: 2.667px;
+	background-color: ${t=>t.$color??"transparent"};
+	flex-shrink: 0;
+`;exports.BandsSvg=n;exports.HeaderRow=r;exports.PlotArea=d;exports.SeparatorLine=l;exports.StageColorDot=g;exports.StageHeaderColumn=s;exports.StageLabelRow=p;
+//# sourceMappingURL=FunnelChart.styled.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/FunnelChart/FunnelChart.styled.js.map ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../formatChartValue.js"),v=1e3,l=e=>Math.round(e100)/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.lengthv),I=t=>x?0:i.clamp(t/go,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+EV,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 ADDED Viewed

@@ -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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),c=require("chart.js"),m=require("chartjs-plugin-datalabels"),O=require("react-chartjs-2"),z=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),x=require("../utils/calcPercentage.js"),R=require("./HorizontalGraph.styles.js"),D=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},L=D(m);c.Chart.register(c.CategoryScale,c.LinearScale,c.BarElement,c.Tooltip,L.default);const T=t=>{const u=[250,1e3,800,1500,300,600],b=t.stacked&&t.stackedDatasets&&t.stackedDatasets.length>0&&t.stackedDatasets.some(a=>a.data.some(o=>o!==0)),C=t.xAxis.data.findIndex(a=>a!==0)!==-1,i=!b&&!C,f={min:0,max:2e3,stepSize:t.xAxis.stepSize??200},h={indexAxis:"y",elements:{},responsive:!0,maintainAspectRatio:t.maintainAspectRatio,layout:{padding:{right:t.showTotal?50:0}},plugins:{legend:{display:!1},tooltip:{enabled:!i,callbacks:{label:t.xAxis.toolTipCallback,footer:t.tooltipConfig?.footerCallback},footerFont:t.tooltipConfig?.footerStyles?.footerFont},datalabels:{display:(!i&&t.showTotal)??!1,anchor:"end",align:"end",clamp:!0,formatter:(a,o)=>{const r=o.datasetIndex,e=o.chart.data.datasets;if(r!==e.length-1)return"";const l=o.dataIndex;let s=0;for(let g=0;g<e.length;g++)s+=e[g].data[l]??0;return s?t.isInternationalStore?x.truncateValueForInternationalStore(s):x.truncateValueForIndianStore(s):""},color:n.COLORS.content.secondary}},scales:{y:{stacked:t.stacked??!1,title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:n.FONTS.caption.fontSize,color:t.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:n.COLORS.background.base},ticks:{fontSize:n.FONTS.caption.fontSize,color:t.yAxis.labelColor??n.COLORS.content.secondary}},x:{stacked:t.stacked??!1,title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:n.FONTS.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:n.COLORS.background.base},ticks:{callback:t.xAxis.ticksCallback,fontSize:n.FONTS.caption.fontSize,color:t.xAxis.labelColor??n.COLORS.content.secondary,...i?f:{max:t.xAxis.max,stepSize:t.xAxis.stepSize}}}},onClick:(a,o)=>{if(o.length>0&&t.onBarClick){const r=o[0].index;t.onBarClick(r)}}},S=a=>{const r=a.chart.ctx.createLinearGradient(0,0,0,200);let e="";if(i)e="rgba(0,0,0,0)";else if(t.barColorRGBA){const l=t.barColorRGBA;e=`rgba(${l.r}, ${l.g}, ${l.b}, ${l.a??"0.3"})`}return r.addColorStop(0,e||"rgba(146, 96, 237, 0.3)"),r.addColorStop(1,e||"rgba(146, 96, 237, 0.3)"),r},y=()=>i?"rgba(0,0,0,0)":t.barColors&&t.barColors.length>0?t.barColors:a=>S(a),k=()=>t.stacked&&t.stackedDatasets&&t.stackedDatasets.length>0?t.stackedDatasets.map(a=>({label:a.label||"",data:i?u:a.data,backgroundColor:a.backgroundColor,barPercentage:.4,categoryPercentage:1,borderRadius:4})):[{data:i?u:t.xAxis.data,backgroundColor:y(),barPercentage:.4,categoryPercentage:1,borderRadius:4}],A={labels:t.yAxis.data.map(a=>a.toString()),datasets:k()};return d.jsxs(R.GraphContainerWrapper,{padding:t.outerPadding,skipOuterLayout:t.skipOuterLayout,children:[t.chartHeading&&d.jsx(z.TitleRegular,{color:t.chartHeading.color??n.COLORS.content.secondary,children:t.chartHeading.heading}),d.jsx("div",{style:{height:t.maintainAspectRatio?void 0:t.graphCanvasHeight??500},children:d.jsx(O.Bar,{options:h,data:A})})]})};exports.HorizontalGraph=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),c=require("chart.js"),m=require("chartjs-plugin-datalabels"),O=require("react-chartjs-2"),z=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),x=require("../utils/calcPercentage.js"),R=require("./HorizontalGraph.styles.js"),D=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},L=D(m);c.Chart.register(c.CategoryScale,c.LinearScale,c.BarElement,c.Tooltip,L.default);const T=t=>{const u=[250,1e3,800,1500,300,600],b=t.stacked&&t.stackedDatasets&&t.stackedDatasets.length>0&&t.stackedDatasets.some(a=>a.data.some(o=>o!==0)),C=t.xAxis.data.findIndex(a=>a!==0)!==-1,i=!b&&!C,f={min:0,max:2e3,stepSize:t.xAxis.stepSize??200},h={indexAxis:"y",elements:{},responsive:!0,maintainAspectRatio:t.maintainAspectRatio,layout:{padding:{right:t.showTotal?50:0}},plugins:{legend:{display:!1},tooltip:{enabled:!i,callbacks:{title:t.tooltipConfig?.titleCallback,label:t.xAxis.toolTipCallback,footer:t.tooltipConfig?.footerCallback},footerFont:t.tooltipConfig?.footerStyles?.footerFont},datalabels:{display:(!i&&t.showTotal)??!1,anchor:"end",align:"end",clamp:!0,formatter:(a,o)=>{const l=o.datasetIndex,e=o.chart.data.datasets;if(l!==e.length-1)return"";const r=o.dataIndex;let s=0;for(let g=0;g<e.length;g++)s+=e[g].data[r]??0;return s?t.isInternationalStore?x.truncateValueForInternationalStore(s):x.truncateValueForIndianStore(s):""},color:n.COLORS.content.secondary}},scales:{y:{stacked:t.stacked??!1,title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:n.FONTS.caption.fontSize,color:t.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:n.COLORS.background.base},ticks:{fontSize:n.FONTS.caption.fontSize,color:t.yAxis.labelColor??n.COLORS.content.secondary}},x:{stacked:t.stacked??!1,title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:n.FONTS.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:n.COLORS.background.base},ticks:{callback:t.xAxis.ticksCallback,fontSize:n.FONTS.caption.fontSize,color:t.xAxis.labelColor??n.COLORS.content.secondary,...i?f:{max:t.xAxis.max,stepSize:t.xAxis.stepSize}}}},onClick:(a,o)=>{if(o.length>0&&t.onBarClick){const l=o[0].index;t.onBarClick(l)}}},S=a=>{const l=a.chart.ctx.createLinearGradient(0,0,0,200);let e="";if(i)e="rgba(0,0,0,0)";else if(t.barColorRGBA){const r=t.barColorRGBA;e=`rgba(${r.r}, ${r.g}, ${r.b}, ${r.a??"0.3"})`}return l.addColorStop(0,e||"rgba(146, 96, 237, 0.3)"),l.addColorStop(1,e||"rgba(146, 96, 237, 0.3)"),l},k=()=>i?"rgba(0,0,0,0)":t.barColors&&t.barColors.length>0?t.barColors:a=>S(a),y=()=>t.stacked&&t.stackedDatasets&&t.stackedDatasets.length>0?t.stackedDatasets.map(a=>({label:a.label||"",data:i?u:a.data,backgroundColor:a.backgroundColor,barPercentage:.4,categoryPercentage:1,borderRadius:4})):[{data:i?u:t.xAxis.data,backgroundColor:k(),barPercentage:.4,categoryPercentage:1,borderRadius:4}],A={labels:t.yAxis.data.map(a=>a.toString()),datasets:y()};return d.jsxs(R.GraphContainerWrapper,{padding:t.outerPadding,skipOuterLayout:t.skipOuterLayout,children:[t.chartHeading&&d.jsx(z.TitleRegular,{color:t.chartHeading.color??n.COLORS.content.secondary,children:t.chartHeading.heading}),d.jsx("div",{style:{height:t.maintainAspectRatio?void 0:t.graphCanvasHeight??500},children:d.jsx(O.Bar,{options:h,data:A})})]})};exports.HorizontalGraph=T;
 //# sourceMappingURL=HorizontalGraph.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { GraphContainerWrapper } from './HorizontalGraph.styles';\nimport { HorizontalGraphI } from './HorizontalGraph.type';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const HorizontalGraph: React.FC<HorizontalGraphI> = (props) => {\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\n\t// Check if data is present - consider both regular xAxis data and stacked datasets\n\tconst hasStackedData =\n\t\tprops.stacked &&\n\t\tprops.stackedDatasets &&\n\t\tprops.stackedDatasets.length > 0 &&\n\t\tprops.stackedDatasets.some((ds) => ds.data.some((val) => val !== 0));\n\n\tconst hasXAxisData = props.xAxis.data.findIndex((ele) => ele !== 0) !== -1;\n\n\tconst noDataPresent = !hasStackedData && !hasXAxisData;\n\tconst xAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: props.xAxis.stepSize ?? 200,\n\t};\n\tconst options = {\n\t\tindexAxis: 'y' as const,\n\t\telements: {},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: props.maintainAspectRatio,\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\tright: props.showTotal ? 50 : 0,\n\t\t\t},\n\t\t},\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.xAxis.toolTipCallback,\n\t\t\t\t\tfooter: props.tooltipConfig?.footerCallback,\n\t\t\t\t},\n\t\t\t\tfooterFont: props.tooltipConfig?.footerStyles?.footerFont,\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: (!noDataPresent && props.showTotal) ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tformatter: (_, context) => {\n\t\t\t\t\tconst datasetIndex = context.datasetIndex;\n\t\t\t\t\tconst datasets = context.chart.data.datasets;\n\t\t\t\t\tif (datasetIndex !== datasets.length - 1) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\tlet sum = 0;\n\t\t\t\t\tfor (let i = 0; i < datasets.length; i++) {\n\t\t\t\t\t\tsum += datasets[i].data[dataIndex] ?? 0;\n\t\t\t\t\t}\n\t\t\t\t\tif (!sum) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\treturn props.isInternationalStore\n\t\t\t\t\t\t? truncateValueForInternationalStore(sum)\n\t\t\t\t\t\t: truncateValueForIndianStore(sum);\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\ty: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize, color: props.yAxis.titleColor },\n\t\t\t\t\tpadding: { bottom: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\tx: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t\tpadding: { top: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.xAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent\n\t\t\t\t\t\t? xAxisConfigForNoData\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmax: props.xAxis.max,\n\t\t\t\t\t\t\t\tstepSize: props.xAxis.stepSize,\n\t\t\t\t\t\t }),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonClick: (_event: any, elements: any[]) => {\n\t\t\tif (elements.length > 0 && props.onBarClick) {\n\t\t\t\tconst index = elements[0].index;\n\t\t\t\tprops.onBarClick(index);\n\t\t\t}\n\t\t},\n\t} as any;\n\n\tconst getColorSpectrum = (context) => {\n\t\tconst ctx = context.chart.ctx;\n\t\tconst gradient = ctx.createLinearGradient(0, 0, 0, 200);\n\t\tlet rgbaColor = '';\n\t\tif (noDataPresent) {\n\t\t\trgbaColor = 'rgba(0,0,0,0)';\n\t\t} else if (props.barColorRGBA) {\n\t\t\tconst rgb = props.barColorRGBA;\n\t\t\trgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a ?? '0.3'})`;\n\t\t}\n\n\t\tgradient.addColorStop(0, rgbaColor ? rgbaColor : 'rgba(146, 96, 237, 0.3)');\n\t\tgradient.addColorStop(1, rgbaColor ? rgbaColor : `rgba(146, 96, 237, 0.3)`);\n\n\t\treturn gradient;\n\t};\n\n\t// Get background color - supports per-bar colors via barColors array\n\tconst getBackgroundColor = () => {\n\t\tif (noDataPresent) {\n\t\t\treturn 'rgba(0,0,0,0)';\n\t\t}\n\t\t// If barColors array is provided, use it for per-bar coloring\n\t\tif (props.barColors && props.barColors.length > 0) {\n\t\t\treturn props.barColors;\n\t\t}\n\t\t// Fallback to single color via getColorSpectrum\n\t\treturn (context) => getColorSpectrum(context);\n\t};\n\n\t// Build datasets - support stacked datasets if provided\n\tconst buildDatasets = () => {\n\t\tif (\n\t\t\tprops.stacked &&\n\t\t\tprops.stackedDatasets &&\n\t\t\tprops.stackedDatasets.length > 0\n\t\t) {\n\t\t\treturn props.stackedDatasets.map((dataset) => ({\n\t\t\t\tlabel: dataset.label \|\| '',\n\t\t\t\tdata: noDataPresent ? dummyValues : dataset.data,\n\t\t\t\tbackgroundColor: dataset.backgroundColor,\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t}));\n\t\t}\n\t\t// Default single dataset\n\t\treturn [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.xAxis.data,\n\t\t\t\tbackgroundColor: getBackgroundColor(),\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t];\n\t};\n\n\tconst data = {\n\t\tlabels: props.yAxis.data.map((d) => d.toString()),\n\t\tdatasets: buildDatasets(),\n\t};\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tpadding={props.outerPadding}\n\t\t\tskipOuterLayout={props.skipOuterLayout}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<TitleRegular\n\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t</TitleRegular>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.maintainAspectRatio\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","HorizontalGraph","props","dummyValues","hasStackedData","ds","val","hasXAxisData","ele","noDataPresent","xAxisConfigForNoData","options","_","context","datasetIndex","datasets","dataIndex","sum","i","truncateValueForInternationalStore","truncateValueForIndianStore","COLORS","FONTS","_event","elements","index","getColorSpectrum","gradient","rgbaColor","rgb","getBackgroundColor","buildDatasets","dataset","data","d","jsxs","GraphContainerWrapper","jsx","TitleRegular","Bar"],"mappings":"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"}
1	+ {"version":3,"file":"HorizontalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { GraphContainerWrapper } from './HorizontalGraph.styles';\nimport { HorizontalGraphI } from './HorizontalGraph.type';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const HorizontalGraph: React.FC<HorizontalGraphI> = (props) => {\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\n\t// Check if data is present - consider both regular xAxis data and stacked datasets\n\tconst hasStackedData =\n\t\tprops.stacked &&\n\t\tprops.stackedDatasets &&\n\t\tprops.stackedDatasets.length > 0 &&\n\t\tprops.stackedDatasets.some((ds) => ds.data.some((val) => val !== 0));\n\n\tconst hasXAxisData = props.xAxis.data.findIndex((ele) => ele !== 0) !== -1;\n\n\tconst noDataPresent = !hasStackedData && !hasXAxisData;\n\tconst xAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: props.xAxis.stepSize ?? 200,\n\t};\n\tconst options = {\n\t\tindexAxis: 'y' as const,\n\t\telements: {},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: props.maintainAspectRatio,\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\tright: props.showTotal ? 50 : 0,\n\t\t\t},\n\t\t},\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\ttitle: props.tooltipConfig?.titleCallback,\n\t\t\t\t\tlabel: props.xAxis.toolTipCallback,\n\t\t\t\t\tfooter: props.tooltipConfig?.footerCallback,\n\t\t\t\t},\n\t\t\t\tfooterFont: props.tooltipConfig?.footerStyles?.footerFont,\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: (!noDataPresent && props.showTotal) ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tformatter: (_, context) => {\n\t\t\t\t\tconst datasetIndex = context.datasetIndex;\n\t\t\t\t\tconst datasets = context.chart.data.datasets;\n\t\t\t\t\tif (datasetIndex !== datasets.length - 1) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\tlet sum = 0;\n\t\t\t\t\tfor (let i = 0; i < datasets.length; i++) {\n\t\t\t\t\t\tsum += datasets[i].data[dataIndex] ?? 0;\n\t\t\t\t\t}\n\t\t\t\t\tif (!sum) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\treturn props.isInternationalStore\n\t\t\t\t\t\t? truncateValueForInternationalStore(sum)\n\t\t\t\t\t\t: truncateValueForIndianStore(sum);\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\ty: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize, color: props.yAxis.titleColor },\n\t\t\t\t\tpadding: { bottom: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\tx: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t\tpadding: { top: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.xAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent\n\t\t\t\t\t\t? xAxisConfigForNoData\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmax: props.xAxis.max,\n\t\t\t\t\t\t\t\tstepSize: props.xAxis.stepSize,\n\t\t\t\t\t\t }),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonClick: (_event: any, elements: any[]) => {\n\t\t\tif (elements.length > 0 && props.onBarClick) {\n\t\t\t\tconst index = elements[0].index;\n\t\t\t\tprops.onBarClick(index);\n\t\t\t}\n\t\t},\n\t} as any;\n\n\tconst getColorSpectrum = (context) => {\n\t\tconst ctx = context.chart.ctx;\n\t\tconst gradient = ctx.createLinearGradient(0, 0, 0, 200);\n\t\tlet rgbaColor = '';\n\t\tif (noDataPresent) {\n\t\t\trgbaColor = 'rgba(0,0,0,0)';\n\t\t} else if (props.barColorRGBA) {\n\t\t\tconst rgb = props.barColorRGBA;\n\t\t\trgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a ?? '0.3'})`;\n\t\t}\n\n\t\tgradient.addColorStop(0, rgbaColor ? rgbaColor : 'rgba(146, 96, 237, 0.3)');\n\t\tgradient.addColorStop(1, rgbaColor ? rgbaColor : `rgba(146, 96, 237, 0.3)`);\n\n\t\treturn gradient;\n\t};\n\n\t// Get background color - supports per-bar colors via barColors array\n\tconst getBackgroundColor = () => {\n\t\tif (noDataPresent) {\n\t\t\treturn 'rgba(0,0,0,0)';\n\t\t}\n\t\t// If barColors array is provided, use it for per-bar coloring\n\t\tif (props.barColors && props.barColors.length > 0) {\n\t\t\treturn props.barColors;\n\t\t}\n\t\t// Fallback to single color via getColorSpectrum\n\t\treturn (context) => getColorSpectrum(context);\n\t};\n\n\t// Build datasets - support stacked datasets if provided\n\tconst buildDatasets = () => {\n\t\tif (\n\t\t\tprops.stacked &&\n\t\t\tprops.stackedDatasets &&\n\t\t\tprops.stackedDatasets.length > 0\n\t\t) {\n\t\t\treturn props.stackedDatasets.map((dataset) => ({\n\t\t\t\tlabel: dataset.label \|\| '',\n\t\t\t\tdata: noDataPresent ? dummyValues : dataset.data,\n\t\t\t\tbackgroundColor: dataset.backgroundColor,\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t}));\n\t\t}\n\t\t// Default single dataset\n\t\treturn [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.xAxis.data,\n\t\t\t\tbackgroundColor: getBackgroundColor(),\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t];\n\t};\n\n\tconst data = {\n\t\tlabels: props.yAxis.data.map((d) => d.toString()),\n\t\tdatasets: buildDatasets(),\n\t};\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tpadding={props.outerPadding}\n\t\t\tskipOuterLayout={props.skipOuterLayout}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<TitleRegular\n\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t</TitleRegular>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.maintainAspectRatio\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","HorizontalGraph","props","dummyValues","hasStackedData","ds","val","hasXAxisData","ele","noDataPresent","xAxisConfigForNoData","options","_","context","datasetIndex","datasets","dataIndex","sum","i","truncateValueForInternationalStore","truncateValueForIndianStore","COLORS","FONTS","_event","elements","index","getColorSpectrum","gradient","rgbaColor","rgb","getBackgroundColor","buildDatasets","dataset","data","d","jsxs","GraphContainerWrapper","jsx","TitleRegular","Bar"],"mappings":"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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),q=require("../../../../assets/icons/maximize.svg.js"),f=require("chart.js"),Z=require("chartjs-plugin-datalabels"),F=require("react"),P=require("react-chartjs-2"),D=require("../../../TypographyStyle.js"),o=require("../../../../constants/Theme.js"),I=require("../utils/calcPercentage.js"),n=require("./StackedBarChart.model.js"),v=require("./StackedBarChart.styles.js"),z=require("../../../icon-button/IconButton.js"),M=require("../../../modals/styledModal.js"),W=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},V=W(Z);f.Chart.register(f.CategoryScale,f.LinearScale,f.BarElement,f.Tooltip,f.Legend,V.default);const $=(e,c,x)=>{if(c.length<=x)return{truncatedData:e,truncatedLabels:c,originalData:e,originalLabels:c};const g=e.map(r=>r.slice(0,x)),y=e.map(r=>r.slice(x).reduce((h,S)=>h+S,0));g.forEach((r,h)=>r.push(y[h]));const A=c.slice(0,x);return A.push("Others"),{truncatedData:g,truncatedLabels:A,originalData:e,originalLabels:c}},Y=e=>{const{headerIcons:c=[],legendsAndIconDirection:x="row"}=e,[g,y]=F.useState(!1),A=[250,1e3,800,1500,300,600],r=e.yAxis.data.length===0,h={min:0,max:2e3,stepSize:200},S=["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],B=["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"],j=e.customBarColors?e.customBarColors:e.customColourScaleBrand||e.customColourScalePastel?e.colorSchema===n.COLOR_SCHEMA.PASTEL?e.customColourScalePastel:e.customColourScaleBrand:e.colorSchema===n.COLOR_SCHEMA.PASTEL?B:S,H=e.customHoverColour,_=F.useMemo(()=>({barPercentage:e?.barPercentage||.4,categoryPercentage:1,pointStyle:"circle",barWidth:e.barWidth,borderRadius:e?.borderRadius||void 0,...typeof e?.borderRadius=="object"?{borderSkipped:!1}:{},...e?.addBarGap?.flag?{borderWidth:{top:e?.addBarGap?.value||2,bottom:e?.addBarGap?.value||2,right:0,left:0},borderColor:"transparent"}:{}}),[e.barWidth,e?.borderRadius,e?.barPercentage,e?.addBarGap]),O={};e.yAxis.data.map(t=>{t.map(a=>{O[a.name]?O[a.name].push(a.value):O[a.name]=[a.value]})});const R=Object.keys(O).map((t,a)=>({label:t,data:O[t],backgroundColor:j?.[a],hoverBackgroundColor:H===void 0?void 0:H[a],..._}));let d;e.renderInHeightWiseManner?d=R.map((t,a)=>({...t,order:t.data.reduce((l,s)=>l+(s||0),0)})).sort((t,a)=>a.order-t.order):d=R;let T=e.xAxis.data.map(t=>typeof t=="string"?t:t.name),k=d;if(e.truncateBars){const t=$(d.map(a=>a.data),T,e.truncateBars);d.forEach((a,l)=>a.data=t.truncatedData[l]),T=t.truncatedLabels,k=t.originalData.map((a,l)=>({...d[l],data:a}))}const C={plugins:{legend:{display:!r&&!e.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!r,callbacks:{label:e.tooltipConfig?.labelCallback,title:e.tooltipConfig?.titleCallback,footer:e.tooltipConfig?.footerCallback},footerFont:e.tooltipConfig?.footerStyles?.footerFont},datalabels:{display:e.showTotal??!1,anchor:"end",align:"end",clamp:!0,formatter:(t,a)=>{const l=a.datasetIndex,s=a.chart.data.datasets;if(l!==s.length-1)return"";const N=a.dataIndex;let u=0;for(let L=0;L<s.length;L++)u+=s[L].data[N]??0;return u?u<1e3?u:(u/1e3).toString().substring(0,4)+"k":""},color:o.COLORS.content.secondary}},layout:{padding:{right:e.showTotal&&e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:e.showTotal&&e.orientation!=n.GRAPH_ORIENTATION.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!e.customLegend,labels:{usePointStyle:!0}},indexAxis:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.yAxis?.title:e.xAxis?.title),text:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.yAxis?.title:e.xAxis?.title,color:(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.yAxis?.titleColor:e.xAxis?.titleColor)??o.COLORS.content.secondary,font:{size:o.FONTS.caption.fontSize}},grid:{display:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL&&(typeof e?.showGridLines?.x>"u"?!0:e?.showGridLines?.x),color:o.COLORS.background.base},ticks:{fontSize:o.FONTS.caption.fontSize,color:e.yAxis.labelColor??o.COLORS.content.secondary,callback:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?t=>{let a;e.isInternationalStore?a=I.truncateValueForInternationalStore(t):a=I.truncateValueForIndianStore(t);const l=e.yAxis?.axisSuffix||"";return`${a}${l}`}:e.xAxis?.axisSuffix?t=>`${t}${e.xAxis.axisSuffix}`:void 0},stacked:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?typeof e.yAxis?.stacked=="boolean"?e.yAxis?.stacked:!0:typeof e.xAxis?.stacked=="boolean"?e.xAxis?.stacked:!0},y:{...e?.equalHeight?.flag?{suggestedMin:-e?.equalHeight.max,suggestedMax:e?.equalHeight.max}:{},max:e?.yAxis?.max,title:{display:!!(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.xAxis?.title:e.yAxis?.title),text:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.xAxis?.title:e.yAxis?.title,color:(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.xAxis?.titleColor:e.yAxis?.titleColor)??o.COLORS.content.secondary,font:{size:o.FONTS.caption.fontSize}},grid:{display:e.orientation!==n.GRAPH_ORIENTATION.HORIZONTAL&&(typeof e?.showGridLines?.y>"u"?!0:e?.showGridLines?.y),color:o.COLORS.background.base},ticks:{stepSize:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.xAxis?.stepSize:e.yAxis?.stepSize,fontSize:o.FONTS.caption.fontSize,color:e.xAxis.labelColor??o.COLORS.content.secondary,...r?h:{},callback:e?.ticksCallback?e?.ticksCallback:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?t=>{let a;e.isInternationalStore?a=I.truncateValueForInternationalStore(t):a=I.truncateValueForIndianStore(t);const l=e.xAxis?.axisSuffix||"";return`${a}${l}`}:e.yAxis?.axisSuffix?t=>`${t}${e.yAxis.axisSuffix}`:void 0},stacked:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?typeof e.xAxis?.stacked=="boolean"?e.xAxis?.stacked:!0:typeof e.yAxis?.stacked=="boolean"?e.yAxis?.stacked:!0}},onClick:(t,a)=>{if(!e.onBarClick)return;const l=a[0].datasetIndex,s=a[0].index,N=t.chart.data.datasets[l].label,u=t.chart.data.labels[s];e.onBarClick(u,N)},onHover:(t,a)=>{e.onBarClick&&a.length&&(t.native.target.style.cursor="pointer")}};!e.orientation||e.orientation===n.GRAPH_ORIENTATION.VERTICAL?delete C.scales.x.ticks.callback:delete C.scales.y.ticks.callback;let b;r?b=[{data:A,backgroundColor:"rgba(0,0,0,0)"}]:b=d;const G={labels:T,datasets:b};let m;r?m=[{data:A,backgroundColor:"rgba(0,0,0,0)"}]:m=k;const w={labels:e.xAxis.data.map(t=>typeof t=="string"?t:t.name),datasets:m},E=(t=!1)=>{let a;return e.allowChartPopup&&!t?a="flex-start":a="flex-end",i.jsx("div",{style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",padding:"0px 24px 12px 24px",justifyContent:a,flexWrap:"wrap"},children:R.map(l=>i.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginTop:"4px"},children:[i.jsx("div",{style:{backgroundColor:l.backgroundColor,width:"16px",height:"16px",borderRadius:"2px"}}),i.jsx(D.BodyTiny,{color:o.COLORS.content.secondary,children:l.label})]},l.label.replace(" ","_")))})};return i.jsxs(v.GraphContainerWrapper,{style:e.wrapperStyle??{},padding:e.outerPadding,customLegend:e.customLegend,children:[e.chartHeading&&i.jsxs("div",{style:{marginBottom:24,display:"flex",justifyContent:e.hideHeading?"flex-end":"space-between"},children:[e.hideHeading!==!0&&i.jsx(D.TitleRegular,{color:e.chartHeading.color??o.COLORS.content.secondary,children:e.chartHeading.heading}),e.allowChartPopup&&i.jsx("div",{style:{display:"flex",justifyContent:"flex-end"},children:i.jsx("div",{children:i.jsx(z.IconButton,{Icon:q.default,onClick:()=>{y(!0)}})})})]}),e.customLegend&&i.jsxs("div",{style:{display:"flex",flexDirection:x,justifyContent:"space-between"},children:[i.jsx(v.HeaderIconWrapper,{children:c.map((t,a)=>i.jsx("div",{children:i.jsx("div",{children:t})},a))}),E()]}),i.jsx("div",{className:"graph__wrapper",children:i.jsx("div",{style:{height:e.graphCanvasHeight??500,width:e.graphCanvasWidth??"auto"},children:i.jsx(P.Bar,{options:C,data:G})})}),g&&i.jsx(M.StyledModal,{open:g,onClose:()=>y(!1),closeOnOutsideClick:!0,headingTitle:e.chartHeading?.heading,width:"85%",children:i.jsxs("div",{className:"graph__wrapper",style:{padding:"8px"},children:[e.customLegend&&E(!0),i.jsx("div",{style:{height:"70vh",width:"100%",padding:"16px",borderRadius:"8px"},children:i.jsx(P.Bar,{options:C,data:w})})]})})]})};exports.StackedBarChart=Y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),q=require("../../../../assets/icons/maximize.svg.js"),f=require("chart.js"),Z=require("chartjs-plugin-datalabels"),F=require("react"),P=require("react-chartjs-2"),D=require("../../../TypographyStyle.js"),o=require("../../../../constants/Theme.js"),I=require("../utils/calcPercentage.js"),n=require("./StackedBarChart.model.js"),v=require("./StackedBarChart.styles.js"),z=require("../../../icon-button/IconButton.js"),M=require("../../../modals/styledModal.js"),W=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},V=W(Z);f.Chart.register(f.CategoryScale,f.LinearScale,f.BarElement,f.Tooltip,f.Legend,V.default);const $=(e,c,x)=>{if(c.length<=x)return{truncatedData:e,truncatedLabels:c,originalData:e,originalLabels:c};const g=e.map(r=>r.slice(0,x)),y=e.map(r=>r.slice(x).reduce((h,S)=>h+S,0));g.forEach((r,h)=>r.push(y[h]));const A=c.slice(0,x);return A.push("Others"),{truncatedData:g,truncatedLabels:A,originalData:e,originalLabels:c}},Y=e=>{const{headerIcons:c=[],legendsAndIconDirection:x="row"}=e,[g,y]=F.useState(!1),A=[250,1e3,800,1500,300,600],r=e.yAxis.data.length===0,h={min:0,max:2e3,stepSize:200},S=["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],B=["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"],j=e.customBarColors?e.customBarColors:e.customColourScaleBrand||e.customColourScalePastel?e.colorSchema===n.COLOR_SCHEMA.PASTEL?e.customColourScalePastel:e.customColourScaleBrand:e.colorSchema===n.COLOR_SCHEMA.PASTEL?B:S,H=e.customHoverColour,_=F.useMemo(()=>({barPercentage:e?.barPercentage||.4,categoryPercentage:e?.categoryPercentage??1,pointStyle:"circle",barWidth:e.barWidth,borderRadius:e?.borderRadius||void 0,...typeof e?.borderRadius=="object"?{borderSkipped:!1}:{},...e?.addBarGap?.flag?{borderWidth:{top:e?.addBarGap?.value||2,bottom:e?.addBarGap?.value||2,right:0,left:0},borderColor:"transparent"}:{}}),[e.barWidth,e?.borderRadius,e?.barPercentage,e?.addBarGap]),O={};e.yAxis.data.map(t=>{t.map(a=>{O[a.name]?O[a.name].push(a.value):O[a.name]=[a.value]})});const R=Object.keys(O).map((t,a)=>({label:t,data:O[t],backgroundColor:j?.[a],hoverBackgroundColor:H===void 0?void 0:H[a],..._}));let d;e.renderInHeightWiseManner?d=R.map((t,a)=>({...t,order:t.data.reduce((l,s)=>l+(s||0),0)})).sort((t,a)=>a.order-t.order):d=R;let T=e.xAxis.data.map(t=>typeof t=="string"?t:t.name),k=d;if(e.truncateBars){const t=$(d.map(a=>a.data),T,e.truncateBars);d.forEach((a,l)=>a.data=t.truncatedData[l]),T=t.truncatedLabels,k=t.originalData.map((a,l)=>({...d[l],data:a}))}const C={plugins:{legend:{display:!r&&!e.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!r,callbacks:{label:e.tooltipConfig?.labelCallback,title:e.tooltipConfig?.titleCallback,footer:e.tooltipConfig?.footerCallback},footerFont:e.tooltipConfig?.footerStyles?.footerFont},datalabels:{display:e.showTotal??!1,anchor:"end",align:"end",clamp:!0,formatter:(t,a)=>{const l=a.datasetIndex,s=a.chart.data.datasets;if(l!==s.length-1)return"";const N=a.dataIndex;let u=0;for(let L=0;L<s.length;L++)u+=s[L].data[N]??0;return u?u<1e3?u:(u/1e3).toString().substring(0,4)+"k":""},color:o.COLORS.content.secondary}},layout:{padding:{right:e.showTotal&&e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:e.showTotal&&e.orientation!=n.GRAPH_ORIENTATION.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!e.customLegend,labels:{usePointStyle:!0}},indexAxis:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.yAxis?.title:e.xAxis?.title),text:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.yAxis?.title:e.xAxis?.title,color:(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.yAxis?.titleColor:e.xAxis?.titleColor)??o.COLORS.content.secondary,font:{size:o.FONTS.caption.fontSize}},grid:{display:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL&&(typeof e?.showGridLines?.x>"u"?!0:e?.showGridLines?.x),color:o.COLORS.background.base},ticks:{fontSize:o.FONTS.caption.fontSize,color:e.yAxis.labelColor??o.COLORS.content.secondary,callback:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?t=>{let a;e.isInternationalStore?a=I.truncateValueForInternationalStore(t):a=I.truncateValueForIndianStore(t);const l=e.yAxis?.axisSuffix||"";return`${a}${l}`}:e.xAxis?.axisSuffix?t=>`${t}${e.xAxis.axisSuffix}`:void 0},stacked:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?typeof e.yAxis?.stacked=="boolean"?e.yAxis?.stacked:!0:typeof e.xAxis?.stacked=="boolean"?e.xAxis?.stacked:!0},y:{...e?.equalHeight?.flag?{suggestedMin:-e?.equalHeight.max,suggestedMax:e?.equalHeight.max}:{},max:e?.yAxis?.max,title:{display:!!(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.xAxis?.title:e.yAxis?.title),text:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.xAxis?.title:e.yAxis?.title,color:(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.xAxis?.titleColor:e.yAxis?.titleColor)??o.COLORS.content.secondary,font:{size:o.FONTS.caption.fontSize}},grid:{display:e.orientation!==n.GRAPH_ORIENTATION.HORIZONTAL&&(typeof e?.showGridLines?.y>"u"?!0:e?.showGridLines?.y),color:o.COLORS.background.base},ticks:{stepSize:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?e.xAxis?.stepSize:e.yAxis?.stepSize,fontSize:o.FONTS.caption.fontSize,color:e.xAxis.labelColor??o.COLORS.content.secondary,...r?h:{},callback:e?.ticksCallback?e?.ticksCallback:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?t=>{let a;e.isInternationalStore?a=I.truncateValueForInternationalStore(t):a=I.truncateValueForIndianStore(t);const l=e.xAxis?.axisSuffix||"";return`${a}${l}`}:e.yAxis?.axisSuffix?t=>`${t}${e.yAxis.axisSuffix}`:void 0},stacked:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?typeof e.xAxis?.stacked=="boolean"?e.xAxis?.stacked:!0:typeof e.yAxis?.stacked=="boolean"?e.yAxis?.stacked:!0}},onClick:(t,a)=>{if(!e.onBarClick)return;const l=a[0].datasetIndex,s=a[0].index,N=t.chart.data.datasets[l].label,u=t.chart.data.labels[s];e.onBarClick(u,N)},onHover:(t,a)=>{e.onBarClick&&a.length&&(t.native.target.style.cursor="pointer")}};!e.orientation||e.orientation===n.GRAPH_ORIENTATION.VERTICAL?delete C.scales.x.ticks.callback:delete C.scales.y.ticks.callback;let b;r?b=[{data:A,backgroundColor:"rgba(0,0,0,0)"}]:b=d;const G={labels:T,datasets:b};let m;r?m=[{data:A,backgroundColor:"rgba(0,0,0,0)"}]:m=k;const w={labels:e.xAxis.data.map(t=>typeof t=="string"?t:t.name),datasets:m},E=(t=!1)=>{let a;return e.allowChartPopup&&!t?a="flex-start":a="flex-end",i.jsx("div",{style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",padding:"0px 24px 12px 24px",justifyContent:a,flexWrap:"wrap"},children:R.map(l=>i.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginTop:"4px"},children:[i.jsx("div",{style:{backgroundColor:l.backgroundColor,width:"16px",height:"16px",borderRadius:"2px"}}),i.jsx(D.BodyTiny,{color:o.COLORS.content.secondary,children:l.label})]},l.label.replace(" ","_")))})};return i.jsxs(v.GraphContainerWrapper,{style:e.wrapperStyle??{},padding:e.outerPadding,customLegend:e.customLegend,children:[e.chartHeading&&i.jsxs("div",{style:{marginBottom:24,display:"flex",justifyContent:e.hideHeading?"flex-end":"space-between"},children:[e.hideHeading!==!0&&i.jsx(D.TitleRegular,{color:e.chartHeading.color??o.COLORS.content.secondary,children:e.chartHeading.heading}),e.allowChartPopup&&i.jsx("div",{style:{display:"flex",justifyContent:"flex-end"},children:i.jsx("div",{children:i.jsx(z.IconButton,{Icon:q.default,onClick:()=>{y(!0)}})})})]}),e.customLegend&&i.jsxs("div",{style:{display:"flex",flexDirection:x,justifyContent:"space-between"},children:[i.jsx(v.HeaderIconWrapper,{children:c.map((t,a)=>i.jsx("div",{children:i.jsx("div",{children:t})},a))}),E()]}),i.jsx("div",{className:"graph__wrapper",children:i.jsx("div",{style:{height:e.graphCanvasHeight??500,width:e.graphCanvasWidth??"auto"},children:i.jsx(P.Bar,{options:C,data:G})})}),g&&i.jsx(M.StyledModal,{open:g,onClose:()=>y(!1),closeOnOutsideClick:!0,headingTitle:e.chartHeading?.heading,width:"85%",children:i.jsxs("div",{className:"graph__wrapper",style:{padding:"8px"},children:[e.customLegend&&E(!0),i.jsx("div",{style:{height:"70vh",width:"100%",padding:"16px",borderRadius:"8px"},children:i.jsx(P.Bar,{options:C,data:w})})]})})]})};exports.StackedBarChart=Y;
 //# sourceMappingURL=StackedBarChart.js.map