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

@bikdotai/bik-component-library 0.0.808-beta.0 → 0.0.808

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 (1557) hide show

package/dist/esm/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PieChartAnalytics.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport BarChartIcon from '@src/assets/icons/ChartBar.svg';\nimport MaximizeIcon from '@src/assets/icons/maximize.svg';\nimport { ArcElement, ChartData, Chart as ChartJS, Legend } from 'chart.js';\nimport React, { Suspense, useEffect, useState } from 'react';\nimport { Doughnut } from 'react-chartjs-2';\nimport {\n\tPieChartInput,\n\tPieChartInputData,\n} from '@src/components/analytics-chips-and-dropdowns/chart/Pie/PieChartInputData';\nimport { IconButton } from '@src/components/icon-button';\nimport { StyledModal } from '@src/components/modals';\nimport { TitleMedium } from '@src/components/TypographyStyle';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { LazyVerticalGraph as VerticalGraph } from '../LazyCharts';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { PieChart } from './PieChart';\n\nChartJS.register(ArcElement, Legend);\n\nconst convertToBarChartData = (data, xAxisTitle, yAxisTitle) => {\n\tconst xAxisData = data.map((item) => item.name);\n\tconst yAxisData = data.map((item) => item.count);\n\tconst xAxis = {\n\t\tdata: xAxisData,\n\t\ttitle: xAxisTitle ?? '',\n\t};\n\tconst yAxis = {\n\t\tdata: yAxisData,\n\t\ttitle: yAxisTitle ?? '',\n\t};\n\n\tconst barChartData = {\n\t\txAxis,\n\t\tyAxis,\n\t\tbarColorRGBA: { r: 210, g: 174, b: 255, a: 1 },\n\t};\n\treturn barChartData;\n};\n\nconst options = (currencyProps?: {\n\tsymbol?: string;\n\tisInternationalStore?: boolean;\n}) => ({\n\tplugins: {\n\t\tlegend: {\n\t\t\tdisplay: false,\n\t\t},\n\t\ttooltip: {\n\t\t\tenabled: true,\n\t\t\tcallbacks: {\n\t\t\t\tlabel: (tooltipItem) => {\n\t\t\t\t\tif (!tooltipItem.label) {\n\t\t\t\t\t\treturn ` 0%`;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst total = tooltipItem.dataset.data.reduce(\n\t\t\t\t\t\t(acc, cur) => acc + cur,\n\t\t\t\t\t\t0,\n\t\t\t\t\t);\n\t\t\t\t\tconst percentage = parseFloat(\n\t\t\t\t\t\t((tooltipItem.raw / total) * 100).toFixed(1),\n\t\t\t\t\t);\n\n\t\t\t\t\tconst { label, raw } = tooltipItem;\n\t\t\t\t\tconst symbol = currencyProps?.symbol ?? '';\n\t\t\t\t\tconst isIntl = currencyProps?.isInternationalStore;\n\n\t\t\t\t\tconst value =\n\t\t\t\t\t\tisIntl !== undefined\n\t\t\t\t\t\t\t? isIntl\n\t\t\t\t\t\t\t\t? truncateValueForInternationalStore(raw)\n\t\t\t\t\t\t\t\t: truncateValueForIndianStore(raw)\n\t\t\t\t\t\t\t: raw;\n\n\t\t\t\t\tconst totalValue =\n\t\t\t\t\t\tisIntl !== undefined\n\t\t\t\t\t\t\t? isIntl\n\t\t\t\t\t\t\t\t? truncateValueForInternationalStore(total)\n\t\t\t\t\t\t\t\t: truncateValueForIndianStore(total)\n\t\t\t\t\t\t\t: total;\n\n\t\t\t\t\treturn [\n\t\t\t\t\t\t` ${label}`,\n\t\t\t\t\t\t` ${symbol}${value} (${percentage}% of ${symbol}${totalValue})`,\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n});\n\nconst GRAPH_COLORS = [\n\t'#5E07BB',\n\t'#9E77ED',\n\t'#D2AEFF',\n\t'#CDE1FF',\n\t'#92AFFA',\n\t'#3935E1',\n];\n\nconst CartStyled = styled.div`\n\tbackground: ${(props) => COLORS.surface.standard};\n\tborder: 1px solid ${(props) => COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\nexport const Card = (props: any) => {\n\treturn <CartStyled style={{ padding: 24 }}>{props.children}</CartStyled>;\n};\n\nexport const PieChartAnalytics: React.FC<PieChartInputData> = ({\n\ttitle,\n\tslices,\n\tsize,\n\tallowChartPopup,\n\tshowConvertToBarChart,\n\ttruncateSlices,\n\tbarChartXAxisTitle,\n\tbarChartYAxisTitle,\n\thideTitle = false,\n\tcurrencyProps,\n}) => {\n\tconst [showPopup, setShowPopup] = useState(false);\n\tconst [showBarChart, setShowBarChart] = useState(false);\n\tconst [slicesWithColor, setSlicesWithColor] = useState<PieChartInput[]>([]);\n\tconst [data, setData] = useState<ChartData>();\n\tconst [truncatedData, setTruncatedData] = useState<ChartData>();\n\tconst [truncatedSlicesWithColor, setTruncatedSlicesWithColor] = useState<\n\t\tPieChartInput[]\n\t>([]);\n\tconst [barChartData, setBarChartData] = useState<{\n\t\txAxis: { data: []; title: string };\n\t\tyAxis: { data: []; title: string };\n\t\tbarColorRGBA: { r: number; g: number; b: number; a: number };\n\t} \| null>(null);\n\n\tuseEffect(() => {\n\t\tconst totalSum = slices.reduce((sum, slice) => sum + slice.count, 0);\n\t\tlet updatedSlicesWithColor: PieChartInput[] = [];\n\n\t\tupdatedSlicesWithColor = Object.keys(slices).map((key, index) => ({\n\t\t\tcolor: GRAPH_COLORS[index % GRAPH_COLORS.length],\n\t\t\t...slices[key],\n\t\t}));\n\n\t\tsetSlicesWithColor([...updatedSlicesWithColor]);\n\n\t\tif (totalSum === 0) {\n\t\t\tconst dataSet = {\n\t\t\t\tdatasets: [\n\t\t\t\t\t{\n\t\t\t\t\t\tdata: [100],\n\t\t\t\t\t\tbackgroundColor: ['#F0F0F0'],\n\t\t\t\t\t\tborderWidth: 0,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tlabels: [],\n\t\t\t};\n\t\t\tsetData(dataSet);\n\t\t} else {\n\t\t\tconst dataSet = {\n\t\t\t\tlabels: slices.map((slice) =>\n\t\t\t\t\tStringUtils.capitalizeEachWord(slice.name),\n\t\t\t\t),\n\t\t\t\tdatasets: [\n\t\t\t\t\t{\n\t\t\t\t\t\tdata: slices.map((slice) => slice.count),\n\t\t\t\t\t\tbackgroundColor: slices.map(\n\t\t\t\t\t\t\t(slice, index) =>\n\t\t\t\t\t\t\t\tslice.color ?? GRAPH_COLORS[index % GRAPH_COLORS.length],\n\t\t\t\t\t\t),\n\t\t\t\t\t\tborderColor: ['white', 'white', 'white', 'white', 'white', 'white'],\n\t\t\t\t\t\tborderWidth: 4,\n\t\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t};\n\t\t\tsetData(dataSet);\n\t\t}\n\n\t\tif (truncateSlices && slices.length > truncateSlices) {\n\t\t\tconst truncatedSlices = slices.slice(0, truncateSlices);\n\t\t\tconst otherSlices = slices.slice(truncateSlices);\n\t\t\tconst otherCount = otherSlices.reduce(\n\t\t\t\t(sum, slice) => sum + slice.count,\n\t\t\t\t0,\n\t\t\t);\n\t\t\ttruncatedSlices.push({ name: 'Other', count: otherCount });\n\n\t\t\tconst truncatedDataSet = {\n\t\t\t\tlabels: truncatedSlices.map((slice) =>\n\t\t\t\t\tStringUtils.capitalize(slice.name),\n\t\t\t\t),\n\t\t\t\tdatasets: [\n\t\t\t\t\t{\n\t\t\t\t\t\tdata: truncatedSlices.map((slice) => slice.count),\n\t\t\t\t\t\tbackgroundColor: truncatedSlices.map(\n\t\t\t\t\t\t\t(slice, index) =>\n\t\t\t\t\t\t\t\tslice.color ?? GRAPH_COLORS[index % GRAPH_COLORS.length],\n\t\t\t\t\t\t),\n\t\t\t\t\t\tborderColor: ['white', 'white', 'white', 'white', 'white', 'white'],\n\t\t\t\t\t\tborderWidth: 4,\n\t\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t};\n\t\t\tsetTruncatedData(truncatedDataSet);\n\n\t\t\tconst truncatedSlicesWithColor = truncatedSlices.map((slice, index) => ({\n\t\t\t\tcolor: GRAPH_COLORS[index % GRAPH_COLORS.length],\n\t\t\t\t...slice,\n\t\t\t}));\n\t\t\tsetTruncatedSlicesWithColor(truncatedSlicesWithColor);\n\t\t}\n\n\t\tif (showConvertToBarChart) {\n\t\t\tsetBarChartData(\n\t\t\t\tconvertToBarChartData(slices, barChartXAxisTitle, barChartYAxisTitle),\n\t\t\t);\n\t\t}\n\t}, [slices, truncateSlices]);\n\n\tif (!data) {\n\t\treturn <></>;\n\t}\n\n\treturn (\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\tjustifyContent:\n\t\t\t\t\t\thideTitle \|\| title?.length === 0 ? 'flex-end' : 'space-between',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!hideTitle && title && (\n\t\t\t\t\t<TitleMedium\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginBottom: 16,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t)}\n\n\t\t\t\t<div>\n\t\t\t\t\t{showConvertToBarChart && (\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={BarChartIcon}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetShowBarChart(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{allowChartPopup && (\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={MaximizeIcon}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className={'row'}>\n\t\t\t\t<div\n\t\t\t\t\tclassName={'col-6 '}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\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\twidth: size,\n\t\t\t\t\t\t\theight: size,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Doughnut\n\t\t\t\t\t\t\tdata={(truncateSlices ? truncatedData : data) as any}\n\t\t\t\t\t\t\toptions={{\n\t\t\t\t\t\t\t\t...options(currencyProps),\n\t\t\t\t\t\t\t\tmaintainAspectRatio: size ? false : true,\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</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={'col-6'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpaddingLeft: 48,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tjustifyContent: 'flex-start',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<PieChart\n\t\t\t\t\t\tslices={truncateSlices ? truncatedSlicesWithColor : slicesWithColor}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{showPopup && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showPopup}\n\t\t\t\t\tonClose={() => setShowPopup(false)}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={title}\n\t\t\t\t\twidth=\"75%\"\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\tpadding: 24,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\theight: '80vh',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div style={{ width: '55%', marginLeft: '4%' }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\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<Doughnut\n\t\t\t\t\t\t\t\t\tdata={data as any}\n\t\t\t\t\t\t\t\t\toptions={{\n\t\t\t\t\t\t\t\t\t\t...options(currencyProps),\n\t\t\t\t\t\t\t\t\t\tmaintainAspectRatio: size ? false : true,\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</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '30%',\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\toverflowY: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PieChart slices={slicesWithColor} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\n\t\t\t{showBarChart && barChartData && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showBarChart}\n\t\t\t\t\tonClose={() => setShowBarChart(false)}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={title}\n\t\t\t\t\twidth=\"85%\"\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\tpadding: '24px 0',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Suspense fallback={<div>Loading...</div>}>\n\t\t\t\t\t\t\t<VerticalGraph\n\t\t\t\t\t\t\t\txAxis={barChartData.xAxis}\n\t\t\t\t\t\t\t\tyAxis={barChartData.yAxis}\n\t\t\t\t\t\t\t\tbarColorRGBA={barChartData?.barColorRGBA}\n\t\t\t\t\t\t\t\tPieChartComponent={PieChartAnalytics}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Suspense>\n\t\t\t\t\t</div>\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["ChartJS","register","ArcElement","Legend","options","currencyProps","plugins","legend","display","tooltip","enabled","callbacks","label","tooltipItem","total","dataset","data","reduce","acc","cur","percentage","parseFloat","raw","toFixed","symbol","_a","isIntl","isInternationalStore","undefined","truncateValueForInternationalStore","truncateValueForIndianStore","GRAPH_COLORS","CartStyled","_styled","process","env","NODE_ENV","target","props","COLORS","surface","standard","stroke","primary","Card","_jsx","Object","assign","style","padding","children","PieChartAnalytics","title","slices","size","allowChartPopup","showConvertToBarChart","truncateSlices","barChartXAxisTitle","barChartYAxisTitle","hideTitle","showPopup","setShowPopup","useState","showBarChart","setShowBarChart","slicesWithColor","setSlicesWithColor","setData","truncatedData","setTruncatedData","truncatedSlicesWithColor","setTruncatedSlicesWithColor","barChartData","setBarChartData","useEffect","totalSum","sum","slice","count","updatedSlicesWithColor","keys","map","key","index","color","length","datasets","backgroundColor","borderWidth","labels","dataSet","StringUtils","capitalizeEachWord","name","borderColor","borderRadius","truncatedSlices","otherCount","push","truncatedDataSet","capitalize","convertToBarChartData","xAxisTitle","yAxisTitle","xAxis","item","yAxis","barColorRGBA","r","g","b","a","_jsxs","_Fragment","justifyContent","TitleMedium","marginBottom","IconButton","Icon","BarChartIcon","onClick","MaximizeIcon","className","alignItems","width","height","Doughnut","maintainAspectRatio","paddingLeft","flexDirection","PieChart","StyledModal","open","onClose","closeOnOutsideClick","headingTitle","marginLeft","overflowY","Suspense","fallback","VerticalGraph","PieChartComponent"],"mappings":"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"}
1	+ {"version":3,"file":"PieChartAnalytics.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport BarChartIcon from '@src/assets/icons/ChartBar.svg';\nimport MaximizeIcon from '@src/assets/icons/maximize.svg';\nimport { ArcElement, ChartData, Chart as ChartJS, Legend } from 'chart.js';\nimport React, { Suspense, useEffect, useState } from 'react';\nimport { Doughnut } from 'react-chartjs-2';\nimport {\n\tPieChartInput,\n\tPieChartInputData,\n} from '@src/components/analytics-chips-and-dropdowns/chart/Pie/PieChartInputData';\nimport { IconButton } from '@src/components/icon-button';\nimport { StyledModal } from '@src/components/modals';\nimport { TitleMedium } from '@src/components/TypographyStyle';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { LazyVerticalGraph as VerticalGraph } from '../LazyCharts';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { PieChart } from './PieChart';\n\nChartJS.register(ArcElement, Legend);\n\nconst convertToBarChartData = (data, xAxisTitle, yAxisTitle) => {\n\tconst xAxisData = data.map((item) => item.name);\n\tconst yAxisData = data.map((item) => item.count);\n\tconst xAxis = {\n\t\tdata: xAxisData,\n\t\ttitle: xAxisTitle ?? '',\n\t};\n\tconst yAxis = {\n\t\tdata: yAxisData,\n\t\ttitle: yAxisTitle ?? '',\n\t};\n\n\tconst barChartData = {\n\t\txAxis,\n\t\tyAxis,\n\t\tbarColorRGBA: { r: 210, g: 174, b: 255, a: 1 },\n\t};\n\treturn barChartData;\n};\n\nconst options = (currencyProps?: {\n\tsymbol?: string;\n\tisInternationalStore?: boolean;\n}) => ({\n\tplugins: {\n\t\tlegend: {\n\t\t\tdisplay: false,\n\t\t},\n\t\ttooltip: {\n\t\t\tenabled: true,\n\t\t\tcallbacks: {\n\t\t\t\tlabel: (tooltipItem) => {\n\t\t\t\t\tif (!tooltipItem.label) {\n\t\t\t\t\t\treturn ` 0%`;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst total = tooltipItem.dataset.data.reduce(\n\t\t\t\t\t\t(acc, cur) => acc + cur,\n\t\t\t\t\t\t0,\n\t\t\t\t\t);\n\t\t\t\t\tconst percentage = parseFloat(\n\t\t\t\t\t\t((tooltipItem.raw / total) * 100).toFixed(1),\n\t\t\t\t\t);\n\n\t\t\t\t\tconst { label, raw } = tooltipItem;\n\t\t\t\t\tconst symbol = currencyProps?.symbol ?? '';\n\t\t\t\t\tconst isIntl = currencyProps?.isInternationalStore;\n\n\t\t\t\t\tconst value =\n\t\t\t\t\t\tisIntl !== undefined\n\t\t\t\t\t\t\t? isIntl\n\t\t\t\t\t\t\t\t? truncateValueForInternationalStore(raw)\n\t\t\t\t\t\t\t\t: truncateValueForIndianStore(raw)\n\t\t\t\t\t\t\t: raw;\n\n\t\t\t\t\tconst totalValue =\n\t\t\t\t\t\tisIntl !== undefined\n\t\t\t\t\t\t\t? isIntl\n\t\t\t\t\t\t\t\t? truncateValueForInternationalStore(total)\n\t\t\t\t\t\t\t\t: truncateValueForIndianStore(total)\n\t\t\t\t\t\t\t: total;\n\n\t\t\t\t\treturn [\n\t\t\t\t\t\t` ${label}`,\n\t\t\t\t\t\t` ${symbol}${value} (${percentage}% of ${symbol}${totalValue})`,\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n});\n\nconst GRAPH_COLORS = [\n\t'#5E07BB',\n\t'#9E77ED',\n\t'#D2AEFF',\n\t'#CDE1FF',\n\t'#92AFFA',\n\t'#3935E1',\n];\n\nconst CartStyled = styled.div`\n\tbackground: ${(props) => COLORS.surface.standard};\n\tborder: 1px solid ${(props) => COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\nexport const Card = (props: any) => {\n\treturn <CartStyled style={{ padding: 24 }}>{props.children}</CartStyled>;\n};\n\nexport const PieChartAnalytics: React.FC<PieChartInputData> = ({\n\ttitle,\n\tslices,\n\tsize,\n\tallowChartPopup,\n\tshowConvertToBarChart,\n\ttruncateSlices,\n\tbarChartXAxisTitle,\n\tbarChartYAxisTitle,\n\thideTitle = false,\n\tcurrencyProps,\n}) => {\n\tconst [showPopup, setShowPopup] = useState(false);\n\tconst [showBarChart, setShowBarChart] = useState(false);\n\tconst [slicesWithColor, setSlicesWithColor] = useState<PieChartInput[]>([]);\n\tconst [data, setData] = useState<ChartData>();\n\tconst [truncatedData, setTruncatedData] = useState<ChartData>();\n\tconst [truncatedSlicesWithColor, setTruncatedSlicesWithColor] = useState<\n\t\tPieChartInput[]\n\t>([]);\n\tconst [barChartData, setBarChartData] = useState<{\n\t\txAxis: { data: []; title: string };\n\t\tyAxis: { data: []; title: string };\n\t\tbarColorRGBA: { r: number; g: number; b: number; a: number };\n\t} \| null>(null);\n\n\tuseEffect(() => {\n\t\tconst totalSum = slices.reduce((sum, slice) => sum + slice.count, 0);\n\t\tlet updatedSlicesWithColor: PieChartInput[] = [];\n\n\t\tupdatedSlicesWithColor = Object.keys(slices).map((key, index) => ({\n\t\t\tcolor: GRAPH_COLORS[index % GRAPH_COLORS.length],\n\t\t\t...slices[key],\n\t\t}));\n\n\t\tsetSlicesWithColor([...updatedSlicesWithColor]);\n\n\t\tif (totalSum === 0) {\n\t\t\tconst dataSet = {\n\t\t\t\tdatasets: [\n\t\t\t\t\t{\n\t\t\t\t\t\tdata: [100],\n\t\t\t\t\t\tbackgroundColor: ['#F0F0F0'],\n\t\t\t\t\t\tborderWidth: 0,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\tlabels: [],\n\t\t\t};\n\t\t\tsetData(dataSet);\n\t\t} else {\n\t\t\tconst dataSet = {\n\t\t\t\tlabels: slices.map((slice) =>\n\t\t\t\t\tStringUtils.capitalizeEachWord(slice.name),\n\t\t\t\t),\n\t\t\t\tdatasets: [\n\t\t\t\t\t{\n\t\t\t\t\t\tdata: slices.map((slice) => slice.count),\n\t\t\t\t\t\tbackgroundColor: slices.map(\n\t\t\t\t\t\t\t(slice, index) =>\n\t\t\t\t\t\t\t\tslice.color ?? GRAPH_COLORS[index % GRAPH_COLORS.length],\n\t\t\t\t\t\t),\n\t\t\t\t\t\tborderColor: ['white', 'white', 'white', 'white', 'white', 'white'],\n\t\t\t\t\t\tborderWidth: 4,\n\t\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t};\n\t\t\tsetData(dataSet);\n\t\t}\n\n\t\tif (truncateSlices && slices.length > truncateSlices) {\n\t\t\tconst truncatedSlices = slices.slice(0, truncateSlices);\n\t\t\tconst otherSlices = slices.slice(truncateSlices);\n\t\t\tconst otherCount = otherSlices.reduce(\n\t\t\t\t(sum, slice) => sum + slice.count,\n\t\t\t\t0,\n\t\t\t);\n\t\t\ttruncatedSlices.push({ name: 'Other', count: otherCount });\n\n\t\t\tconst truncatedDataSet = {\n\t\t\t\tlabels: truncatedSlices.map((slice) =>\n\t\t\t\t\tStringUtils.capitalize(slice.name),\n\t\t\t\t),\n\t\t\t\tdatasets: [\n\t\t\t\t\t{\n\t\t\t\t\t\tdata: truncatedSlices.map((slice) => slice.count),\n\t\t\t\t\t\tbackgroundColor: truncatedSlices.map(\n\t\t\t\t\t\t\t(slice, index) =>\n\t\t\t\t\t\t\t\tslice.color ?? GRAPH_COLORS[index % GRAPH_COLORS.length],\n\t\t\t\t\t\t),\n\t\t\t\t\t\tborderColor: ['white', 'white', 'white', 'white', 'white', 'white'],\n\t\t\t\t\t\tborderWidth: 4,\n\t\t\t\t\t\tborderRadius: 8,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t};\n\t\t\tsetTruncatedData(truncatedDataSet);\n\n\t\t\tconst truncatedSlicesWithColor = truncatedSlices.map((slice, index) => ({\n\t\t\t\tcolor: GRAPH_COLORS[index % GRAPH_COLORS.length],\n\t\t\t\t...slice,\n\t\t\t}));\n\t\t\tsetTruncatedSlicesWithColor(truncatedSlicesWithColor);\n\t\t}\n\n\t\tif (showConvertToBarChart) {\n\t\t\tsetBarChartData(\n\t\t\t\tconvertToBarChartData(slices, barChartXAxisTitle, barChartYAxisTitle),\n\t\t\t);\n\t\t}\n\t}, [slices, truncateSlices]);\n\n\tif (!data) {\n\t\treturn <></>;\n\t}\n\n\treturn (\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\tjustifyContent:\n\t\t\t\t\t\thideTitle \|\| title?.length === 0 ? 'flex-end' : 'space-between',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!hideTitle && title && (\n\t\t\t\t\t<TitleMedium\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginBottom: 16,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t)}\n\n\t\t\t\t<div>\n\t\t\t\t\t{showConvertToBarChart && (\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={BarChartIcon}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetShowBarChart(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{allowChartPopup && (\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={MaximizeIcon}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className={'row'}>\n\t\t\t\t<div\n\t\t\t\t\tclassName={'col-6 '}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\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\twidth: size,\n\t\t\t\t\t\t\theight: size,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Doughnut\n\t\t\t\t\t\t\tdata={(truncateSlices ? truncatedData : data) as any}\n\t\t\t\t\t\t\toptions={{\n\t\t\t\t\t\t\t\t...options(currencyProps),\n\t\t\t\t\t\t\t\tmaintainAspectRatio: size ? false : true,\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</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={'col-6'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpaddingLeft: 48,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tjustifyContent: 'flex-start',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<PieChart\n\t\t\t\t\t\tslices={truncateSlices ? truncatedSlicesWithColor : slicesWithColor}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{showPopup && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showPopup}\n\t\t\t\t\tonClose={() => setShowPopup(false)}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={title}\n\t\t\t\t\twidth=\"75%\"\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\tpadding: 24,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\theight: '80vh',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div style={{ width: '55%', marginLeft: '4%' }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\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<Doughnut\n\t\t\t\t\t\t\t\t\tdata={data as any}\n\t\t\t\t\t\t\t\t\toptions={{\n\t\t\t\t\t\t\t\t\t\t...options(currencyProps),\n\t\t\t\t\t\t\t\t\t\tmaintainAspectRatio: size ? false : true,\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</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '30%',\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\toverflowY: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PieChart slices={slicesWithColor} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\n\t\t\t{showBarChart && barChartData && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showBarChart}\n\t\t\t\t\tonClose={() => setShowBarChart(false)}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={title}\n\t\t\t\t\twidth=\"85%\"\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\tpadding: '24px 0',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Suspense fallback={<div>Loading...</div>}>\n\t\t\t\t\t\t\t<VerticalGraph\n\t\t\t\t\t\t\t\txAxis={barChartData.xAxis}\n\t\t\t\t\t\t\t\tyAxis={barChartData.yAxis}\n\t\t\t\t\t\t\t\tbarColorRGBA={barChartData?.barColorRGBA}\n\t\t\t\t\t\t\t\tPieChartComponent={PieChartAnalytics}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Suspense>\n\t\t\t\t\t</div>\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["ChartJS","register","ArcElement","Legend","options","currencyProps","plugins","legend","display","tooltip","enabled","callbacks","label","tooltipItem","total","dataset","data","reduce","acc","cur","percentage","parseFloat","raw","toFixed","symbol","_a","isIntl","isInternationalStore","undefined","truncateValueForInternationalStore","truncateValueForIndianStore","GRAPH_COLORS","CartStyled","_styled","process","env","NODE_ENV","target","props","COLORS","surface","standard","stroke","primary","Card","_jsx","Object","assign","style","padding","children","PieChartAnalytics","_ref","title","slices","size","allowChartPopup","showConvertToBarChart","truncateSlices","barChartXAxisTitle","barChartYAxisTitle","hideTitle","showPopup","setShowPopup","useState","showBarChart","setShowBarChart","slicesWithColor","setSlicesWithColor","setData","truncatedData","setTruncatedData","truncatedSlicesWithColor","setTruncatedSlicesWithColor","barChartData","setBarChartData","useEffect","totalSum","sum","slice","count","updatedSlicesWithColor","keys","map","key","index","color","length","datasets","backgroundColor","borderWidth","labels","dataSet","StringUtils","capitalizeEachWord","name","borderColor","borderRadius","truncatedSlices","otherCount","push","truncatedDataSet","capitalize","convertToBarChartData","xAxisTitle","yAxisTitle","xAxis","item","yAxis","barColorRGBA","r","g","b","a","_jsxs","_Fragment","justifyContent","TitleMedium","marginBottom","IconButton","Icon","BarChartIcon","onClick","MaximizeIcon","className","alignItems","width","height","Doughnut","maintainAspectRatio","paddingLeft","flexDirection","PieChart","StyledModal","open","onClose","closeOnOutsideClick","headingTitle","marginLeft","overflowY","Suspense","fallback","VerticalGraph","PieChartComponent"],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedBarChart.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.tsx"],"sourcesContent":["import MaximizeIcon from '@src/assets/icons/maximize.svg';\nimport {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLegend,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport { useMemo, useState } from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { IconButton } from '@src/components/icon-button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodyTiny, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport {\n\tCOLOR_SCHEMA,\n\tGRAPH_ORIENTATION,\n\tStackedBarGraphI,\n} from './StackedBarChart.model';\nimport {\n\tGraphContainerWrapper,\n\tHeaderIconWrapper,\n} from './StackedBarChart.styles';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tLegend,\n\tChartDataLabels,\n);\n\nconst truncateBars = (data, labels, limit) => {\n\tif (labels.length <= limit)\n\t\treturn {\n\t\t\ttruncatedData: data,\n\t\t\ttruncatedLabels: labels,\n\t\t\toriginalData: data,\n\t\t\toriginalLabels: labels,\n\t\t};\n\tconst truncatedData = data.map((d) => d.slice(0, limit));\n\tconst othersData = data.map((d) =>\n\t\td.slice(limit).reduce((acc, curr) => acc + curr, 0),\n\t);\n\ttruncatedData.forEach((d, i) => d.push(othersData[i]));\n\tconst truncatedLabels = labels.slice(0, limit);\n\ttruncatedLabels.push('Others');\n\treturn {\n\t\ttruncatedData,\n\t\ttruncatedLabels,\n\t\toriginalData: data,\n\t\toriginalLabels: labels,\n\t};\n};\n\nexport const StackedBarChart = (props: StackedBarGraphI) => {\n\tconst { headerIcons = [], legendsAndIconDirection = 'row' } = props;\n\tconst [showPopup, setShowPopup] = useState(false);\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\tconst noDataPresent = props.yAxis.data.length === 0;\n\tconst yAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: 200,\n\t};\n\n\tconst colorScaleBrand = [\n\t\t'#5E07BB',\n\t\t'#9E77ED',\n\t\t'#D2AEFF',\n\t\t'#F7D7FF',\n\t\t'#CDE1FF',\n\t\t'#92AFFA',\n\t\t'#3935E1',\n\t];\n\n\tconst colourScalePastel = [\n\t\t'#E6C7FF',\n\t\t'#FEC6C6',\n\t\t'#FEDEF3',\n\t\t'#DEEFFF',\n\t\t'#FFD8B1',\n\t\t'#C7E5FF',\n\t\t'#FFD3E6',\n\t\t'#C9FFE5',\n\t\t'#FFE3C7',\n\t\t'#D9D9FF',\n\t];\n\n\t// Determine which color scale to use based on props\n\tconst getColorScale = () => {\n\t\t// If custom bar colors are provided, use them\n\t\tif (props.customBarColors) return props.customBarColors;\n\n\t\t// If custom brand or pastel colors are provided\n\t\tif (props.customColourScaleBrand \|\| props.customColourScalePastel) {\n\t\t\tif (props.colorSchema === COLOR_SCHEMA.PASTEL) {\n\t\t\t\treturn props.customColourScalePastel;\n\t\t\t} else {\n\t\t\t\treturn props.customColourScaleBrand;\n\t\t\t}\n\t\t}\n\n\t\t// Use default color scales based on schema\n\t\tif (props.colorSchema === COLOR_SCHEMA.PASTEL) {\n\t\t\treturn colourScalePastel;\n\t\t} else {\n\t\t\treturn colorScaleBrand;\n\t\t}\n\t};\n\n\tconst colourScale = getColorScale();\n\tconst hoverColourScale = props.customHoverColour;\n\n\t// Memoized bar configuration settings\n\tconst barConfig = useMemo(\n\t\t() => ({\n\t\t\tbarPercentage: props?.barPercentage \|\| 0.4,\n\t\t\tcategoryPercentage: 1,\n\t\t\tpointStyle: 'circle',\n\t\t\tbarWidth: props.barWidth,\n\t\t\tborderRadius: props?.borderRadius \|\| undefined,\n\t\t\t// If borderRadius is an object, disable border skipping\n\t\t\t...(typeof props?.borderRadius === 'object'\n\t\t\t\t? { borderSkipped: false }\n\t\t\t\t: {}),\n\t\t\t// If bar gap is enabled, add transparent borders for spacing\n\t\t\t...(props?.addBarGap?.flag\n\t\t\t\t? {\n\t\t\t\t\t\tborderWidth: {\n\t\t\t\t\t\t\ttop: props?.addBarGap?.value \|\| 2,\n\t\t\t\t\t\t\tbottom: props?.addBarGap?.value \|\| 2,\n\t\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tborderColor: 'transparent',\n\t\t\t\t }\n\t\t\t\t: {}),\n\t\t}),\n\t\t[\n\t\t\tprops.barWidth,\n\t\t\tprops?.borderRadius,\n\t\t\tprops?.barPercentage,\n\t\t\tprops?.addBarGap,\n\t\t],\n\t);\n\n\t// Transform y-axis data into a map grouped by dataset name\n\tconst dataSetMap = {};\n\tprops.yAxis.data.map((ele) => {\n\t\tele.map((obj) => {\n\t\t\tif (dataSetMap[obj.name]) {\n\t\t\t\tdataSetMap[obj.name].push(obj.value);\n\t\t\t} else {\n\t\t\t\tdataSetMap[obj.name] = [obj.value];\n\t\t\t}\n\t\t});\n\t});\n\n\t// Create datasets for chart with colors and bar configuration\n\tconst yAxisStackedData = Object.keys(dataSetMap).map((key, ind) => {\n\t\treturn {\n\t\t\tlabel: key,\n\t\t\tdata: dataSetMap[key],\n\t\t\tbackgroundColor: colourScale?.[ind],\n\t\t\thoverBackgroundColor:\n\t\t\t\thoverColourScale === undefined ? undefined : hoverColourScale[ind],\n\t\t\t...barConfig,\n\t\t};\n\t});\n\n\t// Conditionally reorder datasets so smaller values are drawn on top (for overlapping bars)\n\tlet reorderedYAxisData;\n\tif (props.renderInHeightWiseManner) {\n\t\treorderedYAxisData = yAxisStackedData\n\t\t\t.map((dataset, datasetIndex) => {\n\t\t\t\treturn {\n\t\t\t\t\t...dataset,\n\t\t\t\t\t// Add order property: higher values = drawn first (behind)\n\t\t\t\t\torder: dataset.data.reduce((sum, val) => sum + (val \|\| 0), 0),\n\t\t\t\t};\n\t\t\t})\n\t\t\t.sort((a, b) => b.order - a.order);\n\t} else {\n\t\treorderedYAxisData = yAxisStackedData;\n\t}\n\n\t// Extract labels from x-axis data (either string or object with name property)\n\tlet labels = props.xAxis.data.map((data) =>\n\t\ttypeof data === 'string' ? data : data.name,\n\t);\n\n\t// Keep track of original data before any truncation\n\tlet originalData = reorderedYAxisData;\n\t// Truncate bars if limit is specified\n\tif (props.truncateBars) {\n\t\tconst truncated = truncateBars(\n\t\t\treorderedYAxisData.map((d) => d.data),\n\t\t\tlabels,\n\t\t\tprops.truncateBars,\n\t\t);\n\t\treorderedYAxisData.forEach((d, i) => (d.data = truncated.truncatedData[i]));\n\t\tlabels = truncated.truncatedLabels;\n\t\toriginalData = truncated.originalData.map((data, i) => ({\n\t\t\t...reorderedYAxisData[i],\n\t\t\tdata,\n\t\t}));\n\t}\n\n\tconst options = {\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\t// Show legend only if data exists and custom legend is not used\n\t\t\t\tdisplay: !noDataPresent && !props.customLegend,\n\t\t\t\tlabels: {\n\t\t\t\t\tusePointStyle: true,\n\t\t\t\t\tfontSize: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\t// Enable tooltip only when data is present\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.tooltipConfig?.labelCallback,\n\t\t\t\t\ttitle: props.tooltipConfig?.titleCallback,\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: 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\t// Format total value label for stacked bars\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\t// Only show label on the last dataset (top of stack)\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\t// Calculate sum across all datasets for this data point\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\t// Format values under 1000 as-is, others as 'k' format\n\t\t\t\t\tif (sum < 1000) {\n\t\t\t\t\t\treturn sum;\n\t\t\t\t\t}\n\t\t\t\t\treturn (sum / 1000).toString().substring(0, 4) + 'k';\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\t// Add right padding for horizontal orientation when showing totals\n\t\t\t\tright:\n\t\t\t\t\tprops.showTotal && props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? 50\n\t\t\t\t\t\t: 0,\n\t\t\t\t// Add top padding for non-horizontal orientation when showing totals\n\t\t\t\ttop:\n\t\t\t\t\tprops.showTotal && props.orientation != GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? 50\n\t\t\t\t\t\t: 0,\n\t\t\t},\n\t\t},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: false,\n\t\tlegend: {\n\t\t\tdisplay: !props.customLegend,\n\t\t\tlabels: {\n\t\t\t\tusePointStyle: true,\n\t\t\t},\n\t\t},\n\t\t// Set index axis based on orientation (y for horizontal, x for vertical)\n\t\tindexAxis: (props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t? 'y'\n\t\t\t: 'x') as 'y' \| 'x',\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\t// For horizontal orientation, x-axis shows y-axis data and vice versa\n\t\t\t\t\tdisplay: !!(props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? props.yAxis?.title\n\t\t\t\t\t\t: props.xAxis?.title),\n\t\t\t\t\ttext:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.yAxis?.title\n\t\t\t\t\t\t\t: props.xAxis?.title,\n\t\t\t\t\tcolor:\n\t\t\t\t\t\t(props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.yAxis?.titleColor\n\t\t\t\t\t\t\t: props.xAxis?.titleColor) ?? COLORS.content.secondary,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\t// Show grid lines for horizontal orientation (default true unless specified)\n\t\t\t\t\tdisplay:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL &&\n\t\t\t\t\t\t(typeof props?.showGridLines?.x === 'undefined'\n\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t: props?.showGridLines?.x),\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\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\t// Format tick labels based on orientation\n\t\t\t\t\tcallback:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? (value) => {\n\t\t\t\t\t\t\t\t\t// For horizontal, format and truncate based on store type\n\t\t\t\t\t\t\t\t\tlet formattedValue;\n\t\t\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(value);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(value);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst suffix = props.yAxis?.axisSuffix \|\| '';\n\t\t\t\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: props.xAxis?.axisSuffix\n\t\t\t\t\t\t\t? (value) => `${value}${props.xAxis.axisSuffix}`\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t\t// Determine if x-axis should be stacked (default true)\n\t\t\t\tstacked:\n\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? typeof props.yAxis?.stacked === 'boolean'\n\t\t\t\t\t\t\t? props.yAxis?.stacked\n\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t: typeof props.xAxis?.stacked === 'boolean'\n\t\t\t\t\t\t? props.xAxis?.stacked\n\t\t\t\t\t\t: true,\n\t\t\t},\n\t\t\ty: {\n\t\t\t\t// Set equal height if flag is enabled (for symmetric charts)\n\t\t\t\t...(props?.equalHeight?.flag\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tsuggestedMin: -props?.equalHeight.max, // Set negative side\n\t\t\t\t\t\t\tsuggestedMax: props?.equalHeight.max, // Set positive side\n\t\t\t\t\t }\n\t\t\t\t\t: {}),\n\t\t\t\tmax: props?.yAxis?.max,\n\t\t\t\ttitle: {\n\t\t\t\t\t// For horizontal orientation, y-axis shows x-axis data and vice versa\n\t\t\t\t\tdisplay: !!(props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? props.xAxis?.title\n\t\t\t\t\t\t: props.yAxis?.title),\n\t\t\t\t\ttext:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.xAxis?.title\n\t\t\t\t\t\t\t: props.yAxis?.title,\n\t\t\t\t\tcolor:\n\t\t\t\t\t\t(props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.xAxis?.titleColor\n\t\t\t\t\t\t\t: props.yAxis?.titleColor) ?? COLORS.content.secondary,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\t// Show grid lines for non-horizontal orientation (default true unless specified)\n\t\t\t\t\tdisplay:\n\t\t\t\t\t\tprops.orientation !== GRAPH_ORIENTATION.HORIZONTAL &&\n\t\t\t\t\t\t(typeof props?.showGridLines?.y === 'undefined'\n\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t: props?.showGridLines?.y),\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tstepSize:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.xAxis?.stepSize\n\t\t\t\t\t\t\t: props.yAxis?.stepSize,\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// Apply no-data config if no data exists\n\t\t\t\t\t...(noDataPresent ? yAxisConfigForNoData : {}),\n\t\t\t\t\t// Use custom callback if provided, otherwise format based on orientation\n\t\t\t\t\tcallback: props?.ticksCallback\n\t\t\t\t\t\t? props?.ticksCallback\n\t\t\t\t\t\t: props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? (value) => {\n\t\t\t\t\t\t\t\t// For horizontal, format and truncate based on store type\n\t\t\t\t\t\t\t\tlet formattedValue;\n\t\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(value);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst suffix = props.xAxis?.axisSuffix \|\| '';\n\t\t\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: props.yAxis?.axisSuffix\n\t\t\t\t\t\t? (value) => `${value}${props.yAxis.axisSuffix}`\n\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t\t// Determine if y-axis should be stacked (default true)\n\t\t\t\tstacked:\n\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? typeof props.xAxis?.stacked === 'boolean'\n\t\t\t\t\t\t\t? props.xAxis?.stacked\n\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t: typeof props.yAxis?.stacked === 'boolean'\n\t\t\t\t\t\t? props.yAxis?.stacked\n\t\t\t\t\t\t: true,\n\t\t\t},\n\t\t},\n\t\t// Handle bar click events\n\t\tonClick: (e, activeEls) => {\n\t\t\tif (!props.onBarClick) return;\n\t\t\tconst datasetIndex = activeEls[0].datasetIndex;\n\t\t\tconst dataIndex = activeEls[0].index;\n\t\t\tconst yAxisLabel = e.chart.data.datasets[datasetIndex].label;\n\t\t\tconst xAxisLabel = e.chart.data.labels[dataIndex];\n\t\t\tprops.onBarClick(xAxisLabel, yAxisLabel);\n\t\t},\n\t\t// Change cursor to pointer on hover when bar is clickable\n\t\tonHover: (e, activeEls) => {\n\t\t\tif (!props.onBarClick) return;\n\t\t\tif (activeEls.length) e.native.target.style.cursor = 'pointer';\n\t\t},\n\t};\n\n\t// Clean up tick callbacks based on orientation\n\tif (!props.orientation \|\| props.orientation === GRAPH_ORIENTATION.VERTICAL) {\n\t\tdelete options.scales.x.ticks['callback'];\n\t} else {\n\t\tdelete options.scales.y.ticks['callback'];\n\t}\n\n\t// Prepare data for the chart\n\tlet chartDatasets;\n\tif (noDataPresent) {\n\t\tchartDatasets = [{ data: dummyValues, backgroundColor: 'rgba(0,0,0,0)' }];\n\t} else {\n\t\tchartDatasets = reorderedYAxisData;\n\t}\n\n\tconst data = {\n\t\tlabels: labels,\n\t\tdatasets: chartDatasets,\n\t};\n\n\t// Prepare original chart data (used for popup modal)\n\tlet originalChartDatasets;\n\tif (noDataPresent) {\n\t\toriginalChartDatasets = [\n\t\t\t{ data: dummyValues, backgroundColor: 'rgba(0,0,0,0)' },\n\t\t];\n\t} else {\n\t\toriginalChartDatasets = originalData;\n\t}\n\n\tconst originalChartData = {\n\t\tlabels: props.xAxis.data.map((data) =>\n\t\t\ttypeof data === 'string' ? data : data.name,\n\t\t),\n\t\tdatasets: originalChartDatasets,\n\t};\n\n\t// Render custom legend with color boxes\n\tconst renderLegend = (isPopup = false) => {\n\t\t// Determine justification based on whether popup is allowed and current context\n\t\tlet justification;\n\t\tif (props.allowChartPopup && !isPopup) {\n\t\t\tjustification = 'flex-start';\n\t\t} else {\n\t\t\tjustification = 'flex-end';\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: '10px',\n\t\t\t\t\tpadding: '0px 24px 12px 24px',\n\t\t\t\t\tjustifyContent: justification,\n\t\t\t\t\tflexWrap: 'wrap',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{yAxisStackedData.map((_item) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={_item.label.replace(' ', '_')}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\tmarginTop: '4px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: _item.backgroundColor,\n\t\t\t\t\t\t\t\t\twidth: '16px',\n\t\t\t\t\t\t\t\t\theight: '16px',\n\t\t\t\t\t\t\t\t\tborderRadius: '2px',\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<BodyTiny color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t{_item.label}\n\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t};\n\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tstyle={props.wrapperStyle ?? {}}\n\t\t\tpadding={props.outerPadding}\n\t\t\tcustomLegend={props.customLegend}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmarginBottom: 24,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: props.hideHeading ? 'flex-end' : 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.hideHeading !== true && (\n\t\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.allowChartPopup && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={MaximizeIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPopup(true);\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</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.customLegend && (\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: legendsAndIconDirection,\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<HeaderIconWrapper>\n\t\t\t\t\t\t{headerIcons.map((icon, index) => (\n\t\t\t\t\t\t\t<div key={index}>\n\t\t\t\t\t\t\t\t<div>{icon}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</HeaderIconWrapper>\n\t\t\t\t\t{renderLegend()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"graph__wrapper\">\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\twidth: props.graphCanvasWidth ?? 'auto',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Bar options={options} data={data} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{showPopup && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showPopup}\n\t\t\t\t\tonClose={() => setShowPopup(false)}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={props.chartHeading?.heading}\n\t\t\t\t\twidth=\"85%\"\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"graph__wrapper\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpadding: '8px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.customLegend && renderLegend(true)}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: '70vh',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tpadding: '16px',\n\t\t\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Bar options={options} data={originalChartData} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","register","CategoryScale","LinearScale","BarElement","Tooltip","Legend","ChartDataLabels","StackedBarChart","props","headerIcons","legendsAndIconDirection","showPopup","setShowPopup","useState","dummyValues","noDataPresent","yAxis","data","length","colorScaleBrand","colourScalePastel","colourScale","customBarColors","customColourScaleBrand","customColourScalePastel","colorSchema","COLOR_SCHEMA","PASTEL","hoverColourScale","customHoverColour","barConfig","useMemo","Object","assign","barPercentage","categoryPercentage","pointStyle","barWidth","borderRadius","undefined","borderSkipped","_a","addBarGap","flag","borderWidth","top","_b","value","bottom","_c","right","left","borderColor","dataSetMap","map","ele","obj","name","push","yAxisStackedData","keys","key","ind","label","backgroundColor","hoverBackgroundColor","reorderedYAxisData","renderInHeightWiseManner","dataset","datasetIndex","order","reduce","sum","val","sort","a","b","labels","xAxis","originalData","truncateBars","truncated","limit","truncatedData","truncatedLabels","originalLabels","d","slice","othersData","acc","curr","forEach","i","options","plugins","legend","display","customLegend","usePointStyle","fontSize","tooltip","enabled","callbacks","tooltipConfig","labelCallback","title","titleCallback","footer","footerCallback","footerFont","_d","footerStyles","_e","datalabels","_f","showTotal","anchor","align","clamp","formatter","_","context","datasets","chart","dataIndex","toString","substring","color","COLORS","content","secondary","layout","padding","orientation","GRAPH_ORIENTATION","HORIZONTAL","responsive","maintainAspectRatio","indexAxis","scales","x","_g","_h","text","_j","_k","_l","titleColor","_m","_o","font","size","FONTS","caption","grid","_p","showGridLines","_q","background","base","ticks","_r","labelColor","callback","formattedValue","isInternationalStore","truncateValueForInternationalStore","truncateValueForIndianStore","axisSuffix","_s","stacked","_t","_u","_v","_w","y","_x","equalHeight","suggestedMin","max","suggestedMax","_z","_0","_1","_2","_3","_4","_5","_6","_7","stepSize","_8","_9","_10","min","ticksCallback","_11","_12","_13","_14","_15","onClick","e","activeEls","onBarClick","index","yAxisLabel","xAxisLabel","onHover","native","target","style","cursor","chartDatasets","VERTICAL","originalChartDatasets","originalChartData","renderLegend","isPopup","justification","allowChartPopup","_jsx","overflowY","flexDirection","gap","justifyContent","flexWrap","children","_item","_jsxs","alignItems","marginTop","width","height","BodyTiny","replace","GraphContainerWrapper","_16","wrapperStyle","outerPadding","chartHeading","marginBottom","hideHeading","TitleRegular","_17","heading","IconButton","Icon","MaximizeIcon","HeaderIconWrapper","icon","className","_18","graphCanvasHeight","_19","graphCanvasWidth","Bar","StyledModal","open","onClose","closeOnOutsideClick","headingTitle","_20"],"mappings":"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"}
1	+ {"version":3,"file":"StackedBarChart.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.tsx"],"sourcesContent":["import MaximizeIcon from '@src/assets/icons/maximize.svg';\nimport {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLegend,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport { useMemo, useState } from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { IconButton } from '@src/components/icon-button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodyTiny, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport {\n\tCOLOR_SCHEMA,\n\tGRAPH_ORIENTATION,\n\tStackedBarGraphI,\n} from './StackedBarChart.model';\nimport {\n\tGraphContainerWrapper,\n\tHeaderIconWrapper,\n} from './StackedBarChart.styles';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tLegend,\n\tChartDataLabels,\n);\n\nconst truncateBars = (data, labels, limit) => {\n\tif (labels.length <= limit)\n\t\treturn {\n\t\t\ttruncatedData: data,\n\t\t\ttruncatedLabels: labels,\n\t\t\toriginalData: data,\n\t\t\toriginalLabels: labels,\n\t\t};\n\tconst truncatedData = data.map((d) => d.slice(0, limit));\n\tconst othersData = data.map((d) =>\n\t\td.slice(limit).reduce((acc, curr) => acc + curr, 0),\n\t);\n\ttruncatedData.forEach((d, i) => d.push(othersData[i]));\n\tconst truncatedLabels = labels.slice(0, limit);\n\ttruncatedLabels.push('Others');\n\treturn {\n\t\ttruncatedData,\n\t\ttruncatedLabels,\n\t\toriginalData: data,\n\t\toriginalLabels: labels,\n\t};\n};\n\nexport const StackedBarChart = (props: StackedBarGraphI) => {\n\tconst { headerIcons = [], legendsAndIconDirection = 'row' } = props;\n\tconst [showPopup, setShowPopup] = useState(false);\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\tconst noDataPresent = props.yAxis.data.length === 0;\n\tconst yAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: 200,\n\t};\n\n\tconst colorScaleBrand = [\n\t\t'#5E07BB',\n\t\t'#9E77ED',\n\t\t'#D2AEFF',\n\t\t'#F7D7FF',\n\t\t'#CDE1FF',\n\t\t'#92AFFA',\n\t\t'#3935E1',\n\t];\n\n\tconst colourScalePastel = [\n\t\t'#E6C7FF',\n\t\t'#FEC6C6',\n\t\t'#FEDEF3',\n\t\t'#DEEFFF',\n\t\t'#FFD8B1',\n\t\t'#C7E5FF',\n\t\t'#FFD3E6',\n\t\t'#C9FFE5',\n\t\t'#FFE3C7',\n\t\t'#D9D9FF',\n\t];\n\n\t// Determine which color scale to use based on props\n\tconst getColorScale = () => {\n\t\t// If custom bar colors are provided, use them\n\t\tif (props.customBarColors) return props.customBarColors;\n\n\t\t// If custom brand or pastel colors are provided\n\t\tif (props.customColourScaleBrand \|\| props.customColourScalePastel) {\n\t\t\tif (props.colorSchema === COLOR_SCHEMA.PASTEL) {\n\t\t\t\treturn props.customColourScalePastel;\n\t\t\t} else {\n\t\t\t\treturn props.customColourScaleBrand;\n\t\t\t}\n\t\t}\n\n\t\t// Use default color scales based on schema\n\t\tif (props.colorSchema === COLOR_SCHEMA.PASTEL) {\n\t\t\treturn colourScalePastel;\n\t\t} else {\n\t\t\treturn colorScaleBrand;\n\t\t}\n\t};\n\n\tconst colourScale = getColorScale();\n\tconst hoverColourScale = props.customHoverColour;\n\n\t// Memoized bar configuration settings\n\tconst barConfig = useMemo(\n\t\t() => ({\n\t\t\tbarPercentage: props?.barPercentage \|\| 0.4,\n\t\t\tcategoryPercentage: 1,\n\t\t\tpointStyle: 'circle',\n\t\t\tbarWidth: props.barWidth,\n\t\t\tborderRadius: props?.borderRadius \|\| undefined,\n\t\t\t// If borderRadius is an object, disable border skipping\n\t\t\t...(typeof props?.borderRadius === 'object'\n\t\t\t\t? { borderSkipped: false }\n\t\t\t\t: {}),\n\t\t\t// If bar gap is enabled, add transparent borders for spacing\n\t\t\t...(props?.addBarGap?.flag\n\t\t\t\t? {\n\t\t\t\t\t\tborderWidth: {\n\t\t\t\t\t\t\ttop: props?.addBarGap?.value \|\| 2,\n\t\t\t\t\t\t\tbottom: props?.addBarGap?.value \|\| 2,\n\t\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tborderColor: 'transparent',\n\t\t\t\t }\n\t\t\t\t: {}),\n\t\t}),\n\t\t[\n\t\t\tprops.barWidth,\n\t\t\tprops?.borderRadius,\n\t\t\tprops?.barPercentage,\n\t\t\tprops?.addBarGap,\n\t\t],\n\t);\n\n\t// Transform y-axis data into a map grouped by dataset name\n\tconst dataSetMap = {};\n\tprops.yAxis.data.map((ele) => {\n\t\tele.map((obj) => {\n\t\t\tif (dataSetMap[obj.name]) {\n\t\t\t\tdataSetMap[obj.name].push(obj.value);\n\t\t\t} else {\n\t\t\t\tdataSetMap[obj.name] = [obj.value];\n\t\t\t}\n\t\t});\n\t});\n\n\t// Create datasets for chart with colors and bar configuration\n\tconst yAxisStackedData = Object.keys(dataSetMap).map((key, ind) => {\n\t\treturn {\n\t\t\tlabel: key,\n\t\t\tdata: dataSetMap[key],\n\t\t\tbackgroundColor: colourScale?.[ind],\n\t\t\thoverBackgroundColor:\n\t\t\t\thoverColourScale === undefined ? undefined : hoverColourScale[ind],\n\t\t\t...barConfig,\n\t\t};\n\t});\n\n\t// Conditionally reorder datasets so smaller values are drawn on top (for overlapping bars)\n\tlet reorderedYAxisData;\n\tif (props.renderInHeightWiseManner) {\n\t\treorderedYAxisData = yAxisStackedData\n\t\t\t.map((dataset, datasetIndex) => {\n\t\t\t\treturn {\n\t\t\t\t\t...dataset,\n\t\t\t\t\t// Add order property: higher values = drawn first (behind)\n\t\t\t\t\torder: dataset.data.reduce((sum, val) => sum + (val \|\| 0), 0),\n\t\t\t\t};\n\t\t\t})\n\t\t\t.sort((a, b) => b.order - a.order);\n\t} else {\n\t\treorderedYAxisData = yAxisStackedData;\n\t}\n\n\t// Extract labels from x-axis data (either string or object with name property)\n\tlet labels = props.xAxis.data.map((data) =>\n\t\ttypeof data === 'string' ? data : data.name,\n\t);\n\n\t// Keep track of original data before any truncation\n\tlet originalData = reorderedYAxisData;\n\t// Truncate bars if limit is specified\n\tif (props.truncateBars) {\n\t\tconst truncated = truncateBars(\n\t\t\treorderedYAxisData.map((d) => d.data),\n\t\t\tlabels,\n\t\t\tprops.truncateBars,\n\t\t);\n\t\treorderedYAxisData.forEach((d, i) => (d.data = truncated.truncatedData[i]));\n\t\tlabels = truncated.truncatedLabels;\n\t\toriginalData = truncated.originalData.map((data, i) => ({\n\t\t\t...reorderedYAxisData[i],\n\t\t\tdata,\n\t\t}));\n\t}\n\n\tconst options = {\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\t// Show legend only if data exists and custom legend is not used\n\t\t\t\tdisplay: !noDataPresent && !props.customLegend,\n\t\t\t\tlabels: {\n\t\t\t\t\tusePointStyle: true,\n\t\t\t\t\tfontSize: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\t// Enable tooltip only when data is present\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.tooltipConfig?.labelCallback,\n\t\t\t\t\ttitle: props.tooltipConfig?.titleCallback,\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: 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\t// Format total value label for stacked bars\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\t// Only show label on the last dataset (top of stack)\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\t// Calculate sum across all datasets for this data point\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\t// Format values under 1000 as-is, others as 'k' format\n\t\t\t\t\tif (sum < 1000) {\n\t\t\t\t\t\treturn sum;\n\t\t\t\t\t}\n\t\t\t\t\treturn (sum / 1000).toString().substring(0, 4) + 'k';\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\t// Add right padding for horizontal orientation when showing totals\n\t\t\t\tright:\n\t\t\t\t\tprops.showTotal && props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? 50\n\t\t\t\t\t\t: 0,\n\t\t\t\t// Add top padding for non-horizontal orientation when showing totals\n\t\t\t\ttop:\n\t\t\t\t\tprops.showTotal && props.orientation != GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? 50\n\t\t\t\t\t\t: 0,\n\t\t\t},\n\t\t},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: false,\n\t\tlegend: {\n\t\t\tdisplay: !props.customLegend,\n\t\t\tlabels: {\n\t\t\t\tusePointStyle: true,\n\t\t\t},\n\t\t},\n\t\t// Set index axis based on orientation (y for horizontal, x for vertical)\n\t\tindexAxis: (props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t? 'y'\n\t\t\t: 'x') as 'y' \| 'x',\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\t// For horizontal orientation, x-axis shows y-axis data and vice versa\n\t\t\t\t\tdisplay: !!(props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? props.yAxis?.title\n\t\t\t\t\t\t: props.xAxis?.title),\n\t\t\t\t\ttext:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.yAxis?.title\n\t\t\t\t\t\t\t: props.xAxis?.title,\n\t\t\t\t\tcolor:\n\t\t\t\t\t\t(props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.yAxis?.titleColor\n\t\t\t\t\t\t\t: props.xAxis?.titleColor) ?? COLORS.content.secondary,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\t// Show grid lines for horizontal orientation (default true unless specified)\n\t\t\t\t\tdisplay:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL &&\n\t\t\t\t\t\t(typeof props?.showGridLines?.x === 'undefined'\n\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t: props?.showGridLines?.x),\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\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\t// Format tick labels based on orientation\n\t\t\t\t\tcallback:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? (value) => {\n\t\t\t\t\t\t\t\t\t// For horizontal, format and truncate based on store type\n\t\t\t\t\t\t\t\t\tlet formattedValue;\n\t\t\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(value);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(value);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst suffix = props.yAxis?.axisSuffix \|\| '';\n\t\t\t\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: props.xAxis?.axisSuffix\n\t\t\t\t\t\t\t? (value) => `${value}${props.xAxis.axisSuffix}`\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t\t// Determine if x-axis should be stacked (default true)\n\t\t\t\tstacked:\n\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? typeof props.yAxis?.stacked === 'boolean'\n\t\t\t\t\t\t\t? props.yAxis?.stacked\n\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t: typeof props.xAxis?.stacked === 'boolean'\n\t\t\t\t\t\t? props.xAxis?.stacked\n\t\t\t\t\t\t: true,\n\t\t\t},\n\t\t\ty: {\n\t\t\t\t// Set equal height if flag is enabled (for symmetric charts)\n\t\t\t\t...(props?.equalHeight?.flag\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tsuggestedMin: -props?.equalHeight.max, // Set negative side\n\t\t\t\t\t\t\tsuggestedMax: props?.equalHeight.max, // Set positive side\n\t\t\t\t\t }\n\t\t\t\t\t: {}),\n\t\t\t\tmax: props?.yAxis?.max,\n\t\t\t\ttitle: {\n\t\t\t\t\t// For horizontal orientation, y-axis shows x-axis data and vice versa\n\t\t\t\t\tdisplay: !!(props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? props.xAxis?.title\n\t\t\t\t\t\t: props.yAxis?.title),\n\t\t\t\t\ttext:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.xAxis?.title\n\t\t\t\t\t\t\t: props.yAxis?.title,\n\t\t\t\t\tcolor:\n\t\t\t\t\t\t(props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.xAxis?.titleColor\n\t\t\t\t\t\t\t: props.yAxis?.titleColor) ?? COLORS.content.secondary,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\t// Show grid lines for non-horizontal orientation (default true unless specified)\n\t\t\t\t\tdisplay:\n\t\t\t\t\t\tprops.orientation !== GRAPH_ORIENTATION.HORIZONTAL &&\n\t\t\t\t\t\t(typeof props?.showGridLines?.y === 'undefined'\n\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t: props?.showGridLines?.y),\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tstepSize:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? props.xAxis?.stepSize\n\t\t\t\t\t\t\t: props.yAxis?.stepSize,\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// Apply no-data config if no data exists\n\t\t\t\t\t...(noDataPresent ? yAxisConfigForNoData : {}),\n\t\t\t\t\t// Use custom callback if provided, otherwise format based on orientation\n\t\t\t\t\tcallback: props?.ticksCallback\n\t\t\t\t\t\t? props?.ticksCallback\n\t\t\t\t\t\t: props.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? (value) => {\n\t\t\t\t\t\t\t\t// For horizontal, format and truncate based on store type\n\t\t\t\t\t\t\t\tlet formattedValue;\n\t\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(value);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst suffix = props.xAxis?.axisSuffix \|\| '';\n\t\t\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: props.yAxis?.axisSuffix\n\t\t\t\t\t\t? (value) => `${value}${props.yAxis.axisSuffix}`\n\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t\t// Determine if y-axis should be stacked (default true)\n\t\t\t\tstacked:\n\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t? typeof props.xAxis?.stacked === 'boolean'\n\t\t\t\t\t\t\t? props.xAxis?.stacked\n\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t: typeof props.yAxis?.stacked === 'boolean'\n\t\t\t\t\t\t? props.yAxis?.stacked\n\t\t\t\t\t\t: true,\n\t\t\t},\n\t\t},\n\t\t// Handle bar click events\n\t\tonClick: (e, activeEls) => {\n\t\t\tif (!props.onBarClick) return;\n\t\t\tconst datasetIndex = activeEls[0].datasetIndex;\n\t\t\tconst dataIndex = activeEls[0].index;\n\t\t\tconst yAxisLabel = e.chart.data.datasets[datasetIndex].label;\n\t\t\tconst xAxisLabel = e.chart.data.labels[dataIndex];\n\t\t\tprops.onBarClick(xAxisLabel, yAxisLabel);\n\t\t},\n\t\t// Change cursor to pointer on hover when bar is clickable\n\t\tonHover: (e, activeEls) => {\n\t\t\tif (!props.onBarClick) return;\n\t\t\tif (activeEls.length) e.native.target.style.cursor = 'pointer';\n\t\t},\n\t};\n\n\t// Clean up tick callbacks based on orientation\n\tif (!props.orientation \|\| props.orientation === GRAPH_ORIENTATION.VERTICAL) {\n\t\tdelete options.scales.x.ticks['callback'];\n\t} else {\n\t\tdelete options.scales.y.ticks['callback'];\n\t}\n\n\t// Prepare data for the chart\n\tlet chartDatasets;\n\tif (noDataPresent) {\n\t\tchartDatasets = [{ data: dummyValues, backgroundColor: 'rgba(0,0,0,0)' }];\n\t} else {\n\t\tchartDatasets = reorderedYAxisData;\n\t}\n\n\tconst data = {\n\t\tlabels: labels,\n\t\tdatasets: chartDatasets,\n\t};\n\n\t// Prepare original chart data (used for popup modal)\n\tlet originalChartDatasets;\n\tif (noDataPresent) {\n\t\toriginalChartDatasets = [\n\t\t\t{ data: dummyValues, backgroundColor: 'rgba(0,0,0,0)' },\n\t\t];\n\t} else {\n\t\toriginalChartDatasets = originalData;\n\t}\n\n\tconst originalChartData = {\n\t\tlabels: props.xAxis.data.map((data) =>\n\t\t\ttypeof data === 'string' ? data : data.name,\n\t\t),\n\t\tdatasets: originalChartDatasets,\n\t};\n\n\t// Render custom legend with color boxes\n\tconst renderLegend = (isPopup = false) => {\n\t\t// Determine justification based on whether popup is allowed and current context\n\t\tlet justification;\n\t\tif (props.allowChartPopup && !isPopup) {\n\t\t\tjustification = 'flex-start';\n\t\t} else {\n\t\t\tjustification = 'flex-end';\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: '10px',\n\t\t\t\t\tpadding: '0px 24px 12px 24px',\n\t\t\t\t\tjustifyContent: justification,\n\t\t\t\t\tflexWrap: 'wrap',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{yAxisStackedData.map((_item) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={_item.label.replace(' ', '_')}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\tmarginTop: '4px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: _item.backgroundColor,\n\t\t\t\t\t\t\t\t\twidth: '16px',\n\t\t\t\t\t\t\t\t\theight: '16px',\n\t\t\t\t\t\t\t\t\tborderRadius: '2px',\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<BodyTiny color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t{_item.label}\n\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t};\n\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tstyle={props.wrapperStyle ?? {}}\n\t\t\tpadding={props.outerPadding}\n\t\t\tcustomLegend={props.customLegend}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmarginBottom: 24,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: props.hideHeading ? 'flex-end' : 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.hideHeading !== true && (\n\t\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.allowChartPopup && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={MaximizeIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPopup(true);\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</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.customLegend && (\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: legendsAndIconDirection,\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<HeaderIconWrapper>\n\t\t\t\t\t\t{headerIcons.map((icon, index) => (\n\t\t\t\t\t\t\t<div key={index}>\n\t\t\t\t\t\t\t\t<div>{icon}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</HeaderIconWrapper>\n\t\t\t\t\t{renderLegend()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"graph__wrapper\">\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\twidth: props.graphCanvasWidth ?? 'auto',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Bar options={options} data={data} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{showPopup && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showPopup}\n\t\t\t\t\tonClose={() => setShowPopup(false)}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={props.chartHeading?.heading}\n\t\t\t\t\twidth=\"85%\"\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"graph__wrapper\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpadding: '8px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.customLegend && renderLegend(true)}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: '70vh',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tpadding: '16px',\n\t\t\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Bar options={options} data={originalChartData} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","register","CategoryScale","LinearScale","BarElement","Tooltip","Legend","ChartDataLabels","StackedBarChart","props","headerIcons","legendsAndIconDirection","showPopup","setShowPopup","useState","dummyValues","noDataPresent","yAxis","data","length","colorScaleBrand","colourScalePastel","colourScale","customBarColors","customColourScaleBrand","customColourScalePastel","colorSchema","COLOR_SCHEMA","PASTEL","hoverColourScale","customHoverColour","barConfig","useMemo","Object","assign","barPercentage","categoryPercentage","pointStyle","barWidth","borderRadius","undefined","borderSkipped","_a","addBarGap","flag","borderWidth","top","_b","value","bottom","_c","right","left","borderColor","dataSetMap","map","ele","obj","name","push","yAxisStackedData","keys","key","ind","label","backgroundColor","hoverBackgroundColor","reorderedYAxisData","renderInHeightWiseManner","dataset","datasetIndex","order","reduce","sum","val","sort","a","b","labels","xAxis","originalData","truncateBars","truncated","limit","truncatedData","truncatedLabels","originalLabels","d","slice","othersData","acc","curr","forEach","i","options","plugins","legend","display","customLegend","usePointStyle","fontSize","tooltip","enabled","callbacks","tooltipConfig","labelCallback","title","titleCallback","footer","footerCallback","footerFont","_d","footerStyles","_e","datalabels","_f","showTotal","anchor","align","clamp","formatter","_","context","datasets","chart","dataIndex","toString","substring","color","COLORS","content","secondary","layout","padding","orientation","GRAPH_ORIENTATION","HORIZONTAL","responsive","maintainAspectRatio","indexAxis","scales","x","_g","_h","text","_j","_k","_l","titleColor","_m","_o","font","size","FONTS","caption","grid","_p","showGridLines","_q","background","base","ticks","_r","labelColor","callback","formattedValue","isInternationalStore","truncateValueForInternationalStore","truncateValueForIndianStore","axisSuffix","_s","stacked","_t","_u","_v","_w","y","_x","equalHeight","suggestedMin","max","suggestedMax","_z","_0","_1","_2","_3","_4","_5","_6","_7","stepSize","_8","_9","_10","min","ticksCallback","_11","_12","_13","_14","_15","onClick","e","activeEls","onBarClick","index","yAxisLabel","xAxisLabel","onHover","native","target","style","cursor","chartDatasets","VERTICAL","originalChartDatasets","originalChartData","renderLegend","justification","isPopup","arguments","allowChartPopup","_jsx","overflowY","flexDirection","gap","justifyContent","flexWrap","children","_item","_jsxs","alignItems","marginTop","width","height","BodyTiny","replace","GraphContainerWrapper","_16","wrapperStyle","outerPadding","chartHeading","marginBottom","hideHeading","TitleRegular","_17","heading","IconButton","Icon","MaximizeIcon","HeaderIconWrapper","icon","className","_18","graphCanvasHeight","_19","graphCanvasWidth","Bar","StyledModal","open","onClose","closeOnOutsideClick","headingTitle","_20"],"mappings":"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"}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as e,Fragment as o}from"react/jsx-runtime";import{Chart as a,CategoryScale as l,LinearScale as t,BarElement as r,Tooltip as n}from"chart.js";import{Chart as s}from"react-chartjs-2";import{SmallRegular as d,TitleRegular as c,BodyTiny as x}from"../../../TypographyStyle.js";import{FONTS as A,COLORS as b}from"../../../../constants/Theme.js";import{LegendWrapper as p,LegendContainer as g,LegendColor as u}from"../LineChart/LineChart.styled.js";import{truncateValueForInternationalStore as f,truncateValueForIndianStore as h}from"../utils/calcPercentage.js";import{GraphWrapper as m,GraphContainerWrapper as v,LegendsWrapper as y,LegendMiddleWrapper as S,LegendColorBox as C}from"./VerticalBarAndLinearGraph.styles.js";import{GRAPH_ORIENTATION as j}from"./VerticalBarAndLinearGraphModel.js";a.register(l,t,r,n);const k=a=>{var l,t,r,n,k,I,O,z,$,R;const D=[0,0,0,0,0,0],L=["-","-","-","-","-","-"],H=-1===a.barAxis.data.findIndex((i=>0!==i)),T=-1===a.lineAxis.data.findIndex((i=>0!==i)),V=!a.lineAxis2||-1===a.lineAxis2.data.findIndex((i=>0!==i)),w={min:0,max:2e3,stepSize:200},B=[{legend:a.barAxis.title,color:a.barAxis.graphColor},{legend:a.lineAxis.title,color:a.lineAxis.graphColor},...a.lineAxis2?[{legend:a.lineAxis2.title,color:a.lineAxis2.graphColor}]:[]],N={responsive:!0,plugins:{legend:{display:!1},tooltip:{callbacks:{label:i=>{var e;const o=i.raw,l=i.dataset;let t="";"bar"===l.yAxisID?t=a.barAxis.axisSuffix||"":"line"===l.yAxisID?t=a.lineAxis.axisSuffix||"":"line2"===l.yAxisID&&(t=(null===(e=a.lineAxis2)||void 0===e?void 0:e.axisSuffix)||"");let r=o;return a.orientation===j.HORIZONTAL&&(r=a.isInternationalStore?f(o):h(o)),`${r}${t}`}}}},scales:{x:{title:{display:!!a.xAxis.title,text:a.xAxis.title,color:a.xAxis.titleColor,font:{size:A.caption.fontSize}},grid:{display:!1,borderColor:b.background.base},ticks:{fontSize:A.caption.fontSize,color:null!==(l=a.xAxis.labelColor)&&void 0!==l?l:b.content.secondary,callback:(null===(t=a.xAxis)||void 0===t?void 0:t.axisSuffix)?i=>`${i}${a.xAxis.axisSuffix}`:void 0}},bar:{position:"left",title:{display:!!a.barAxis.title,text:a.barAxis.title,color:a.barAxis.titleColor,font:{size:A.caption.fontSize}},grid:{borderColor:"white",color:b.background.base},max:null===(r=null==a?void 0:a.barAxis)||void 0===r?void 0:r.max,ticks:Object.assign(Object.assign({fontSize:A.caption.fontSize,color:null!==(n=a.barAxis.labelColor)&&void 0!==n?n:b.content.secondary},H?w:{}),{callback:a.orientation===j.HORIZONTAL?i=>{var e;let o;o=a.isInternationalStore?f(i):h(i);return`${o}${(null===(e=a.barAxis)||void 0===e?void 0:e.axisSuffix)||""}`}:(null===(k=a.barAxis)||void 0===k?void 0:k.axisSuffix)?i=>`${i}${a.barAxis.axisSuffix}`:void 0})},line:{position:"right",title:{display:!!a.lineAxis.title,text:a.lineAxis.title,color:a.lineAxis.titleColor,font:{size:A.caption.fontSize}},max:null===(I=null==a?void 0:a.lineAxis)||void 0===I?void 0:I.max,grid:{display:!1,borderColor:"white",color:b.background.base},ticks:Object.assign(Object.assign({fontSize:A.caption.fontSize,color:null!==(O=a.lineAxis.labelColor)&&void 0!==O?O:b.content.secondary},T?w:{}),{callback:a.orientation===j.HORIZONTAL?i=>{var e;let o;o=a.isInternationalStore?f(i):h(i);return`${o}${(null===(e=a.lineAxis)||void 0===e?void 0:e.axisSuffix)||""}`}:(null===(z=a.lineAxis)||void 0===z?void 0:z.axisSuffix)?i=>`${i}${a.lineAxis.axisSuffix}`:void 0}),display:!0}},maintainAspectRatio:!1};let P,Z,G,W;a.orientation&&a.orientation!==j.VERTICAL?(delete N.scales.bar.ticks.callback,delete N.scales.line.ticks.callback):delete N.scales.x.ticks.callback,P=a.xAxis.forceShowXAxis?a.xAxis.data.map((i=>i.toString())):H&&T&&V?L:a.xAxis.data.map((i=>i.toString())),Z=a.noDummyValues?a.lineAxis.data:T?D:a.lineAxis.data,a.lineAxis2&&(G=a.noDummyValues?a.lineAxis2.data:V?D:a.lineAxis2.data),W=a.noDummyValues?a.barAxis.data:H?D:a.barAxis.data;const E={labels:P,datasets:[{yAxisID:"line",type:"line",data:Z,borderColor:a.lineAxis.graphColor||"rgba(0,0,0,0)",backgroundColor:a.lineAxis.graphColor,borderWidth:2,fill:!1,pointRadius:a.pointRadius||1},...a.lineAxis2?[{yAxisID:"line",type:"line",data:G,borderColor:a.lineAxis2.graphColor||"rgba(0,0,0,0)",borderWidth:2,fill:!1,pointRadius:a.pointRadius||1,backgroundColor:a.lineAxis2.graphColor}]:[],{yAxisID:"bar",type:"bar",data:W,backgroundColor:a.barAxis.graphColor||"rgba(0,0,0,0)",barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return i(m,{children:[a.customLegend?e(y,{children:B.map((({legend:o,color:a},l)=>o?i(S,{children:[e(C,{color:a}),e(x,Object.assign({color:b.content.secondary},{children:o}))]},l):null))}):e(p,Object.assign({position:"center"},{children:B.map((({legend:a,color:l},t)=>a?i(g,{children:[e(u,{color:l}),e(d,Object.assign({color:"#667085"},{children:a}))]},t):e(o,{})))})),i(v,{children:[a.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(c,Object.assign({color:null!==($=a.chartHeading.color)&&void 0!==$?$:b.content.secondary},{children:a.chartHeading.heading}))})),e("div",Object.assign({style:{height:null!==(R=a.graphCanvasHeight)&&void 0!==R?R:500}},{children:e(s,{type:"bar",data:E,options:N})}))]})]})};export{k as VerticalBarAndLinearGraph};
+import{jsxs as i,jsx as e,Fragment as o}from"react/jsx-runtime";import{Chart as l,CategoryScale as a,LinearScale as t,BarElement as r,Tooltip as n}from"chart.js";import{Chart as s}from"react-chartjs-2";import{SmallRegular as d,TitleRegular as c,BodyTiny as x}from"../../../TypographyStyle.js";import{FONTS as A,COLORS as b}from"../../../../constants/Theme.js";import{LegendWrapper as p,LegendContainer as g,LegendColor as u}from"../LineChart/LineChart.styled.js";import{truncateValueForInternationalStore as f,truncateValueForIndianStore as h}from"../utils/calcPercentage.js";import{GraphWrapper as m,GraphContainerWrapper as v,LegendsWrapper as y,LegendMiddleWrapper as S,LegendColorBox as C}from"./VerticalBarAndLinearGraph.styles.js";import{GRAPH_ORIENTATION as j}from"./VerticalBarAndLinearGraphModel.js";l.register(a,t,r,n);const k=l=>{var a,t,r,n,k,I,O,z,$,R;const D=[0,0,0,0,0,0],L=["-","-","-","-","-","-"],H=-1===l.barAxis.data.findIndex((i=>0!==i)),T=-1===l.lineAxis.data.findIndex((i=>0!==i)),V=!l.lineAxis2||-1===l.lineAxis2.data.findIndex((i=>0!==i)),w={min:0,max:2e3,stepSize:200},B=[{legend:l.barAxis.title,color:l.barAxis.graphColor},{legend:l.lineAxis.title,color:l.lineAxis.graphColor},...l.lineAxis2?[{legend:l.lineAxis2.title,color:l.lineAxis2.graphColor}]:[]],N={responsive:!0,plugins:{legend:{display:!1},tooltip:{callbacks:{label:i=>{var e;const o=i.raw,a=i.dataset;let t="";"bar"===a.yAxisID?t=l.barAxis.axisSuffix||"":"line"===a.yAxisID?t=l.lineAxis.axisSuffix||"":"line2"===a.yAxisID&&(t=(null===(e=l.lineAxis2)||void 0===e?void 0:e.axisSuffix)||"");let r=o;return l.orientation===j.HORIZONTAL&&(r=l.isInternationalStore?f(o):h(o)),`${r}${t}`}}}},scales:{x:{title:{display:!!l.xAxis.title,text:l.xAxis.title,color:l.xAxis.titleColor,font:{size:A.caption.fontSize}},grid:{display:!1,borderColor:b.background.base},ticks:{fontSize:A.caption.fontSize,color:null!==(a=l.xAxis.labelColor)&&void 0!==a?a:b.content.secondary,callback:(null===(t=l.xAxis)||void 0===t?void 0:t.axisSuffix)?i=>`${i}${l.xAxis.axisSuffix}`:void 0}},bar:{position:"left",title:{display:!!l.barAxis.title,text:l.barAxis.title,color:l.barAxis.titleColor,font:{size:A.caption.fontSize}},grid:{borderColor:"white",color:b.background.base},max:null===(r=null==l?void 0:l.barAxis)||void 0===r?void 0:r.max,ticks:Object.assign(Object.assign({fontSize:A.caption.fontSize,color:null!==(n=l.barAxis.labelColor)&&void 0!==n?n:b.content.secondary},H?w:{}),{callback:l.orientation===j.HORIZONTAL?i=>{var e;let o;o=l.isInternationalStore?f(i):h(i);return`${o}${(null===(e=l.barAxis)||void 0===e?void 0:e.axisSuffix)||""}`}:(null===(k=l.barAxis)||void 0===k?void 0:k.axisSuffix)?i=>`${i}${l.barAxis.axisSuffix}`:void 0})},line:{position:"right",title:{display:!!l.lineAxis.title,text:l.lineAxis.title,color:l.lineAxis.titleColor,font:{size:A.caption.fontSize}},max:null===(I=null==l?void 0:l.lineAxis)||void 0===I?void 0:I.max,grid:{display:!1,borderColor:"white",color:b.background.base},ticks:Object.assign(Object.assign({fontSize:A.caption.fontSize,color:null!==(O=l.lineAxis.labelColor)&&void 0!==O?O:b.content.secondary},T?w:{}),{callback:l.orientation===j.HORIZONTAL?i=>{var e;let o;o=l.isInternationalStore?f(i):h(i);return`${o}${(null===(e=l.lineAxis)||void 0===e?void 0:e.axisSuffix)||""}`}:(null===(z=l.lineAxis)||void 0===z?void 0:z.axisSuffix)?i=>`${i}${l.lineAxis.axisSuffix}`:void 0}),display:!0}},maintainAspectRatio:!1};let P,Z,G,W;l.orientation&&l.orientation!==j.VERTICAL?(delete N.scales.bar.ticks.callback,delete N.scales.line.ticks.callback):delete N.scales.x.ticks.callback,P=l.xAxis.forceShowXAxis?l.xAxis.data.map((i=>i.toString())):H&&T&&V?L:l.xAxis.data.map((i=>i.toString())),Z=l.noDummyValues?l.lineAxis.data:T?D:l.lineAxis.data,l.lineAxis2&&(G=l.noDummyValues?l.lineAxis2.data:V?D:l.lineAxis2.data),W=l.noDummyValues?l.barAxis.data:H?D:l.barAxis.data;const E={labels:P,datasets:[{yAxisID:"line",type:"line",data:Z,borderColor:l.lineAxis.graphColor||"rgba(0,0,0,0)",backgroundColor:l.lineAxis.graphColor,borderWidth:2,fill:!1,pointRadius:l.pointRadius||1},...l.lineAxis2?[{yAxisID:"line",type:"line",data:G,borderColor:l.lineAxis2.graphColor||"rgba(0,0,0,0)",borderWidth:2,fill:!1,pointRadius:l.pointRadius||1,backgroundColor:l.lineAxis2.graphColor}]:[],{yAxisID:"bar",type:"bar",data:W,backgroundColor:l.barAxis.graphColor||"rgba(0,0,0,0)",barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return i(m,{children:[l.customLegend?e(y,{children:B.map(((o,l)=>{let{legend:a,color:t}=o;return a?i(S,{children:[e(C,{color:t}),e(x,Object.assign({color:b.content.secondary},{children:a}))]},l):null}))}):e(p,Object.assign({position:"center"},{children:B.map(((l,a)=>{let{legend:t,color:r}=l;return t?i(g,{children:[e(u,{color:r}),e(d,Object.assign({color:"#667085"},{children:t}))]},a):e(o,{})}))})),i(v,{children:[l.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(c,Object.assign({color:null!==($=l.chartHeading.color)&&void 0!==$?$:b.content.secondary},{children:l.chartHeading.heading}))})),e("div",Object.assign({style:{height:null!==(R=l.graphCanvasHeight)&&void 0!==R?R:500}},{children:e(s,{type:"bar",data:E,options:N})}))]})]})};export{k as VerticalBarAndLinearGraph};
 //# sourceMappingURL=VerticalBarAndLinearGraph.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalBarAndLinearGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport React from 'react';\nimport { Chart } from 'react-chartjs-2';\nimport {\n\tBodyTiny,\n\tSmallRegular,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\tLegendColor,\n\tLegendContainer,\n\tLegendWrapper,\n} from '../LineChart/LineChart.styled';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport {\n\tGraphContainerWrapper,\n\tGraphWrapper,\n\tLegendColorBox,\n\tLegendMiddleWrapper,\n\tLegendsWrapper,\n} from './VerticalBarAndLinearGraph.styles';\nimport {\n\tGRAPH_ORIENTATION,\n\tVerticalBarAndLinearGraphI,\n} from './VerticalBarAndLinearGraphModel';\n\nChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);\n\nexport const VerticalBarAndLinearGraph: React.FC<VerticalBarAndLinearGraphI> = (\n\tprops,\n) => {\n\tconst dummyValues = [0, 0, 0, 0, 0, 0];\n\tconst dummyLabels = ['-', '-', '-', '-', '-', '-'];\n\n\t// Check if any non-zero data exists for each axis\n\tconst noDataPresentForY1 =\n\t\tprops.barAxis.data.findIndex((ele) => ele !== 0) === -1;\n\n\tconst noDataPresentForY2 =\n\t\tprops.lineAxis.data.findIndex((ele) => ele !== 0) === -1;\n\n\tconst noDataPresentForY3 = props.lineAxis2\n\t\t? props.lineAxis2.data.findIndex((ele) => ele !== 0) === -1\n\t\t: true;\n\n\tconst yAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: 200,\n\t};\n\n\t// Build legends array with bar and line axis data\n\tconst legends = [\n\t\t{ legend: props.barAxis.title, color: props.barAxis.graphColor },\n\t\t{ legend: props.lineAxis.title, color: props.lineAxis.graphColor },\n\t\t...(props.lineAxis2\n\t\t\t? [{ legend: props.lineAxis2.title, color: props.lineAxis2.graphColor }]\n\t\t\t: []),\n\t];\n\n\tconst options = {\n\t\tresponsive: true,\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\tcallbacks: {\n\t\t\t\t\tlabel: (ctx) => {\n\t\t\t\t\t\tconst rawValue = ctx.raw;\n\t\t\t\t\t\tconst dataset = ctx.dataset;\n\n\t\t\t\t\t\t// Determine which axis suffix to apply based on yAxisID\n\t\t\t\t\t\tlet suffix = '';\n\t\t\t\t\t\tif (dataset.yAxisID === 'bar') {\n\t\t\t\t\t\t\tsuffix = props.barAxis.axisSuffix \|\| '';\n\t\t\t\t\t\t} else if (dataset.yAxisID === 'line') {\n\t\t\t\t\t\t\tsuffix = props.lineAxis.axisSuffix \|\| '';\n\t\t\t\t\t\t} else if (dataset.yAxisID === 'line2') {\n\t\t\t\t\t\t\tsuffix = props.lineAxis2?.axisSuffix \|\| '';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Format value based on orientation\n\t\t\t\t\t\tlet formattedValue = rawValue;\n\t\t\t\t\t\tif (props.orientation === GRAPH_ORIENTATION.HORIZONTAL) {\n\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(rawValue);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(rawValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\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},\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.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t// Add suffix to x-axis tick labels if provided\n\t\t\t\t\tcallback: props.xAxis?.axisSuffix\n\t\t\t\t\t\t? (value) => `${value}${props.xAxis.axisSuffix}`\n\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t\tbar: {\n\t\t\t\tposition: 'left' as any,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.barAxis.title,\n\t\t\t\t\ttext: props.barAxis.title,\n\t\t\t\t\tcolor: props.barAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\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\tmax: props?.barAxis?.max,\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.barAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t// Apply no-data config if no data exists\n\t\t\t\t\t...(noDataPresentForY1 ? yAxisConfigForNoData : {}),\n\t\t\t\t\t// Format bar axis tick labels based on orientation\n\t\t\t\t\tcallback:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? (value) => {\n\t\t\t\t\t\t\t\t\t// For horizontal orientation, truncate values based on store type\n\t\t\t\t\t\t\t\t\tlet formattedValue;\n\t\t\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(\n\t\t\t\t\t\t\t\t\t\t\tvalue as number,\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(\n\t\t\t\t\t\t\t\t\t\t\tvalue as number,\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst suffix = props.barAxis?.axisSuffix \|\| '';\n\t\t\t\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: props.barAxis?.axisSuffix\n\t\t\t\t\t\t\t? (value) => `${value}${props.barAxis.axisSuffix}`\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t\tline: {\n\t\t\t\tposition: 'right' as any,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.lineAxis.title,\n\t\t\t\t\ttext: props.lineAxis.title,\n\t\t\t\t\tcolor: props.lineAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tmax: props?.lineAxis?.max,\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\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\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.lineAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t// Apply no-data config if no data exists\n\t\t\t\t\t...(noDataPresentForY2 ? yAxisConfigForNoData : {}),\n\t\t\t\t\t// Format line axis tick labels based on orientation\n\t\t\t\t\tcallback:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? (value) => {\n\t\t\t\t\t\t\t\t\t// For horizontal orientation, truncate values based on store type\n\t\t\t\t\t\t\t\t\tlet formattedValue;\n\t\t\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(\n\t\t\t\t\t\t\t\t\t\t\tvalue as number,\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(\n\t\t\t\t\t\t\t\t\t\t\tvalue as number,\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst suffix = props.lineAxis?.axisSuffix \|\| '';\n\t\t\t\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: props.lineAxis?.axisSuffix\n\t\t\t\t\t\t\t? (value) => `${value}${props.lineAxis.axisSuffix}`\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t\tdisplay: true,\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t};\n\n\t// Clean up tick callbacks based on orientation\n\tif (!props.orientation \|\| props.orientation === GRAPH_ORIENTATION.VERTICAL) {\n\t\tdelete options.scales.x.ticks['callback'];\n\t} else {\n\t\tdelete options.scales.bar.ticks['callback'];\n\t\tdelete options.scales.line.ticks['callback'];\n\t}\n\n\t// Determine which labels to show on x-axis\n\tlet xAxisLabels;\n\tif (props.xAxis.forceShowXAxis) {\n\t\txAxisLabels = props.xAxis.data.map((d) => d.toString());\n\t} else {\n\t\t// Show dummy labels if all axes have no data\n\t\tif (noDataPresentForY1 && noDataPresentForY2 && noDataPresentForY3) {\n\t\t\txAxisLabels = dummyLabels;\n\t\t} else {\n\t\t\txAxisLabels = props.xAxis.data.map((d) => d.toString());\n\t\t}\n\t}\n\n\t// Determine data for first line dataset\n\tlet lineAxisData;\n\tif (props.noDummyValues) {\n\t\tlineAxisData = props.lineAxis.data;\n\t} else {\n\t\tif (noDataPresentForY2) {\n\t\t\tlineAxisData = dummyValues;\n\t\t} else {\n\t\t\tlineAxisData = props.lineAxis.data;\n\t\t}\n\t}\n\n\t// Determine data for second line dataset (if exists)\n\tlet lineAxis2Data;\n\tif (props.lineAxis2) {\n\t\tif (props.noDummyValues) {\n\t\t\tlineAxis2Data = props.lineAxis2.data;\n\t\t} else {\n\t\t\tif (noDataPresentForY3) {\n\t\t\t\tlineAxis2Data = dummyValues;\n\t\t\t} else {\n\t\t\t\tlineAxis2Data = props.lineAxis2.data;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Determine data for bar dataset\n\tlet barAxisData;\n\tif (props.noDummyValues) {\n\t\tbarAxisData = props.barAxis.data;\n\t} else {\n\t\tif (noDataPresentForY1) {\n\t\t\tbarAxisData = dummyValues;\n\t\t} else {\n\t\t\tbarAxisData = props.barAxis.data;\n\t\t}\n\t}\n\n\tconst data = {\n\t\tlabels: xAxisLabels,\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tyAxisID: 'line',\n\t\t\t\ttype: 'line' as const,\n\t\t\t\tdata: lineAxisData,\n\t\t\t\tborderColor: props.lineAxis.graphColor \|\| 'rgba(0,0,0,0)',\n\t\t\t\tbackgroundColor: props.lineAxis.graphColor,\n\t\t\t\tborderWidth: 2,\n\t\t\t\tfill: false,\n\t\t\t\tpointRadius: props.pointRadius \|\| 1,\n\t\t\t},\n\t\t\t...(props.lineAxis2\n\t\t\t\t? [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tyAxisID: 'line' as const,\n\t\t\t\t\t\t\ttype: 'line' as const,\n\t\t\t\t\t\t\tdata: lineAxis2Data,\n\t\t\t\t\t\t\tborderColor: props.lineAxis2.graphColor \|\| 'rgba(0,0,0,0)',\n\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\tpointRadius: props.pointRadius \|\| 1,\n\t\t\t\t\t\t\tbackgroundColor: props.lineAxis2.graphColor,\n\t\t\t\t\t\t},\n\t\t\t\t ]\n\t\t\t\t: []),\n\t\t\t{\n\t\t\t\tyAxisID: 'bar',\n\t\t\t\ttype: 'bar' as const,\n\t\t\t\tdata: barAxisData,\n\t\t\t\tbackgroundColor: props.barAxis.graphColor \|\| 'rgba(0,0,0,0)',\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 renderLegend = () => {\n\t\treturn (\n\t\t\t<LegendsWrapper>\n\t\t\t\t{legends.map(({ legend, color }, i) =>\n\t\t\t\t\tlegend ? (\n\t\t\t\t\t\t<LegendMiddleWrapper key={i}>\n\t\t\t\t\t\t\t<LegendColorBox color={color!} />\n\t\t\t\t\t\t\t<BodyTiny color={COLORS.content.secondary}>{legend}</BodyTiny>\n\t\t\t\t\t\t</LegendMiddleWrapper>\n\t\t\t\t\t) : null,\n\t\t\t\t)}\n\t\t\t</LegendsWrapper>\n\t\t);\n\t};\n\n\treturn (\n\t\t<GraphWrapper>\n\t\t\t{props.customLegend ? (\n\t\t\t\trenderLegend()\n\t\t\t) : (\n\t\t\t\t<LegendWrapper position={'center'}>\n\t\t\t\t\t{legends.map(({ legend, color }, i) =>\n\t\t\t\t\t\tlegend ? (\n\t\t\t\t\t\t\t<LegendContainer key={i}>\n\t\t\t\t\t\t\t\t<LegendColor color={color!} />\n\t\t\t\t\t\t\t\t<SmallRegular color={'#667085'}>{legend}</SmallRegular>\n\t\t\t\t\t\t\t</LegendContainer>\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)}\n\t\t\t\t</LegendWrapper>\n\t\t\t)}\n\t\t\t<GraphContainerWrapper>\n\t\t\t\t{props.chartHeading && (\n\t\t\t\t\t<div style={{ marginBottom: 24 }}>\n\t\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Chart type=\"bar\" data={data} options={options} />\n\t\t\t\t</div>\n\t\t\t</GraphContainerWrapper>\n\t\t</GraphWrapper>\n\t);\n};\n"],"names":["ChartJS","register","CategoryScale","LinearScale","BarElement","Tooltip","VerticalBarAndLinearGraph","props","dummyValues","dummyLabels","noDataPresentForY1","barAxis","data","findIndex","ele","noDataPresentForY2","lineAxis","noDataPresentForY3","lineAxis2","yAxisConfigForNoData","min","max","stepSize","legends","legend","title","color","graphColor","options","responsive","plugins","display","tooltip","callbacks","label","ctx","rawValue","raw","dataset","suffix","yAxisID","axisSuffix","_a","formattedValue","orientation","GRAPH_ORIENTATION","HORIZONTAL","isInternationalStore","truncateValueForInternationalStore","truncateValueForIndianStore","scales","x","xAxis","text","titleColor","font","size","FONTS","caption","fontSize","grid","borderColor","COLORS","background","base","ticks","labelColor","content","secondary","callback","_b","value","undefined","bar","position","_c","Object","assign","_d","_e","line","_f","_g","_h","maintainAspectRatio","xAxisLabels","lineAxisData","lineAxis2Data","barAxisData","VERTICAL","forceShowXAxis","map","d","toString","noDummyValues","labels","datasets","type","backgroundColor","borderWidth","fill","pointRadius","barPercentage","categoryPercentage","borderRadius","_jsxs","GraphWrapper","children","customLegend","_jsx","LegendsWrapper","i","LegendMiddleWrapper","LegendColorBox","BodyTiny","LegendWrapper","LegendContainer","LegendColor","SmallRegular","_Fragment","GraphContainerWrapper","chartHeading","style","marginBottom","TitleRegular","_j","heading","height","_k","graphCanvasHeight","Chart"],"mappings":"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"}
1	+ {"version":3,"file":"VerticalBarAndLinearGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport React from 'react';\nimport { Chart } from 'react-chartjs-2';\nimport {\n\tBodyTiny,\n\tSmallRegular,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\tLegendColor,\n\tLegendContainer,\n\tLegendWrapper,\n} from '../LineChart/LineChart.styled';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport {\n\tGraphContainerWrapper,\n\tGraphWrapper,\n\tLegendColorBox,\n\tLegendMiddleWrapper,\n\tLegendsWrapper,\n} from './VerticalBarAndLinearGraph.styles';\nimport {\n\tGRAPH_ORIENTATION,\n\tVerticalBarAndLinearGraphI,\n} from './VerticalBarAndLinearGraphModel';\n\nChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);\n\nexport const VerticalBarAndLinearGraph: React.FC<VerticalBarAndLinearGraphI> = (\n\tprops,\n) => {\n\tconst dummyValues = [0, 0, 0, 0, 0, 0];\n\tconst dummyLabels = ['-', '-', '-', '-', '-', '-'];\n\n\t// Check if any non-zero data exists for each axis\n\tconst noDataPresentForY1 =\n\t\tprops.barAxis.data.findIndex((ele) => ele !== 0) === -1;\n\n\tconst noDataPresentForY2 =\n\t\tprops.lineAxis.data.findIndex((ele) => ele !== 0) === -1;\n\n\tconst noDataPresentForY3 = props.lineAxis2\n\t\t? props.lineAxis2.data.findIndex((ele) => ele !== 0) === -1\n\t\t: true;\n\n\tconst yAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: 200,\n\t};\n\n\t// Build legends array with bar and line axis data\n\tconst legends = [\n\t\t{ legend: props.barAxis.title, color: props.barAxis.graphColor },\n\t\t{ legend: props.lineAxis.title, color: props.lineAxis.graphColor },\n\t\t...(props.lineAxis2\n\t\t\t? [{ legend: props.lineAxis2.title, color: props.lineAxis2.graphColor }]\n\t\t\t: []),\n\t];\n\n\tconst options = {\n\t\tresponsive: true,\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\tcallbacks: {\n\t\t\t\t\tlabel: (ctx) => {\n\t\t\t\t\t\tconst rawValue = ctx.raw;\n\t\t\t\t\t\tconst dataset = ctx.dataset;\n\n\t\t\t\t\t\t// Determine which axis suffix to apply based on yAxisID\n\t\t\t\t\t\tlet suffix = '';\n\t\t\t\t\t\tif (dataset.yAxisID === 'bar') {\n\t\t\t\t\t\t\tsuffix = props.barAxis.axisSuffix \|\| '';\n\t\t\t\t\t\t} else if (dataset.yAxisID === 'line') {\n\t\t\t\t\t\t\tsuffix = props.lineAxis.axisSuffix \|\| '';\n\t\t\t\t\t\t} else if (dataset.yAxisID === 'line2') {\n\t\t\t\t\t\t\tsuffix = props.lineAxis2?.axisSuffix \|\| '';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Format value based on orientation\n\t\t\t\t\t\tlet formattedValue = rawValue;\n\t\t\t\t\t\tif (props.orientation === GRAPH_ORIENTATION.HORIZONTAL) {\n\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(rawValue);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(rawValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\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},\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.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t// Add suffix to x-axis tick labels if provided\n\t\t\t\t\tcallback: props.xAxis?.axisSuffix\n\t\t\t\t\t\t? (value) => `${value}${props.xAxis.axisSuffix}`\n\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t\tbar: {\n\t\t\t\tposition: 'left' as any,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.barAxis.title,\n\t\t\t\t\ttext: props.barAxis.title,\n\t\t\t\t\tcolor: props.barAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\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\tmax: props?.barAxis?.max,\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.barAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t// Apply no-data config if no data exists\n\t\t\t\t\t...(noDataPresentForY1 ? yAxisConfigForNoData : {}),\n\t\t\t\t\t// Format bar axis tick labels based on orientation\n\t\t\t\t\tcallback:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? (value) => {\n\t\t\t\t\t\t\t\t\t// For horizontal orientation, truncate values based on store type\n\t\t\t\t\t\t\t\t\tlet formattedValue;\n\t\t\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(\n\t\t\t\t\t\t\t\t\t\t\tvalue as number,\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(\n\t\t\t\t\t\t\t\t\t\t\tvalue as number,\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst suffix = props.barAxis?.axisSuffix \|\| '';\n\t\t\t\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: props.barAxis?.axisSuffix\n\t\t\t\t\t\t\t? (value) => `${value}${props.barAxis.axisSuffix}`\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t\tline: {\n\t\t\t\tposition: 'right' as any,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.lineAxis.title,\n\t\t\t\t\ttext: props.lineAxis.title,\n\t\t\t\t\tcolor: props.lineAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tmax: props?.lineAxis?.max,\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\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\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.lineAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t// Apply no-data config if no data exists\n\t\t\t\t\t...(noDataPresentForY2 ? yAxisConfigForNoData : {}),\n\t\t\t\t\t// Format line axis tick labels based on orientation\n\t\t\t\t\tcallback:\n\t\t\t\t\t\tprops.orientation === GRAPH_ORIENTATION.HORIZONTAL\n\t\t\t\t\t\t\t? (value) => {\n\t\t\t\t\t\t\t\t\t// For horizontal orientation, truncate values based on store type\n\t\t\t\t\t\t\t\t\tlet formattedValue;\n\t\t\t\t\t\t\t\t\tif (props.isInternationalStore) {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForInternationalStore(\n\t\t\t\t\t\t\t\t\t\t\tvalue as number,\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tformattedValue = truncateValueForIndianStore(\n\t\t\t\t\t\t\t\t\t\t\tvalue as number,\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst suffix = props.lineAxis?.axisSuffix \|\| '';\n\t\t\t\t\t\t\t\t\treturn `${formattedValue}${suffix}`;\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: props.lineAxis?.axisSuffix\n\t\t\t\t\t\t\t? (value) => `${value}${props.lineAxis.axisSuffix}`\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t},\n\t\t\t\tdisplay: true,\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t};\n\n\t// Clean up tick callbacks based on orientation\n\tif (!props.orientation \|\| props.orientation === GRAPH_ORIENTATION.VERTICAL) {\n\t\tdelete options.scales.x.ticks['callback'];\n\t} else {\n\t\tdelete options.scales.bar.ticks['callback'];\n\t\tdelete options.scales.line.ticks['callback'];\n\t}\n\n\t// Determine which labels to show on x-axis\n\tlet xAxisLabels;\n\tif (props.xAxis.forceShowXAxis) {\n\t\txAxisLabels = props.xAxis.data.map((d) => d.toString());\n\t} else {\n\t\t// Show dummy labels if all axes have no data\n\t\tif (noDataPresentForY1 && noDataPresentForY2 && noDataPresentForY3) {\n\t\t\txAxisLabels = dummyLabels;\n\t\t} else {\n\t\t\txAxisLabels = props.xAxis.data.map((d) => d.toString());\n\t\t}\n\t}\n\n\t// Determine data for first line dataset\n\tlet lineAxisData;\n\tif (props.noDummyValues) {\n\t\tlineAxisData = props.lineAxis.data;\n\t} else {\n\t\tif (noDataPresentForY2) {\n\t\t\tlineAxisData = dummyValues;\n\t\t} else {\n\t\t\tlineAxisData = props.lineAxis.data;\n\t\t}\n\t}\n\n\t// Determine data for second line dataset (if exists)\n\tlet lineAxis2Data;\n\tif (props.lineAxis2) {\n\t\tif (props.noDummyValues) {\n\t\t\tlineAxis2Data = props.lineAxis2.data;\n\t\t} else {\n\t\t\tif (noDataPresentForY3) {\n\t\t\t\tlineAxis2Data = dummyValues;\n\t\t\t} else {\n\t\t\t\tlineAxis2Data = props.lineAxis2.data;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Determine data for bar dataset\n\tlet barAxisData;\n\tif (props.noDummyValues) {\n\t\tbarAxisData = props.barAxis.data;\n\t} else {\n\t\tif (noDataPresentForY1) {\n\t\t\tbarAxisData = dummyValues;\n\t\t} else {\n\t\t\tbarAxisData = props.barAxis.data;\n\t\t}\n\t}\n\n\tconst data = {\n\t\tlabels: xAxisLabels,\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tyAxisID: 'line',\n\t\t\t\ttype: 'line' as const,\n\t\t\t\tdata: lineAxisData,\n\t\t\t\tborderColor: props.lineAxis.graphColor \|\| 'rgba(0,0,0,0)',\n\t\t\t\tbackgroundColor: props.lineAxis.graphColor,\n\t\t\t\tborderWidth: 2,\n\t\t\t\tfill: false,\n\t\t\t\tpointRadius: props.pointRadius \|\| 1,\n\t\t\t},\n\t\t\t...(props.lineAxis2\n\t\t\t\t? [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tyAxisID: 'line' as const,\n\t\t\t\t\t\t\ttype: 'line' as const,\n\t\t\t\t\t\t\tdata: lineAxis2Data,\n\t\t\t\t\t\t\tborderColor: props.lineAxis2.graphColor \|\| 'rgba(0,0,0,0)',\n\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\tpointRadius: props.pointRadius \|\| 1,\n\t\t\t\t\t\t\tbackgroundColor: props.lineAxis2.graphColor,\n\t\t\t\t\t\t},\n\t\t\t\t ]\n\t\t\t\t: []),\n\t\t\t{\n\t\t\t\tyAxisID: 'bar',\n\t\t\t\ttype: 'bar' as const,\n\t\t\t\tdata: barAxisData,\n\t\t\t\tbackgroundColor: props.barAxis.graphColor \|\| 'rgba(0,0,0,0)',\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 renderLegend = () => {\n\t\treturn (\n\t\t\t<LegendsWrapper>\n\t\t\t\t{legends.map(({ legend, color }, i) =>\n\t\t\t\t\tlegend ? (\n\t\t\t\t\t\t<LegendMiddleWrapper key={i}>\n\t\t\t\t\t\t\t<LegendColorBox color={color!} />\n\t\t\t\t\t\t\t<BodyTiny color={COLORS.content.secondary}>{legend}</BodyTiny>\n\t\t\t\t\t\t</LegendMiddleWrapper>\n\t\t\t\t\t) : null,\n\t\t\t\t)}\n\t\t\t</LegendsWrapper>\n\t\t);\n\t};\n\n\treturn (\n\t\t<GraphWrapper>\n\t\t\t{props.customLegend ? (\n\t\t\t\trenderLegend()\n\t\t\t) : (\n\t\t\t\t<LegendWrapper position={'center'}>\n\t\t\t\t\t{legends.map(({ legend, color }, i) =>\n\t\t\t\t\t\tlegend ? (\n\t\t\t\t\t\t\t<LegendContainer key={i}>\n\t\t\t\t\t\t\t\t<LegendColor color={color!} />\n\t\t\t\t\t\t\t\t<SmallRegular color={'#667085'}>{legend}</SmallRegular>\n\t\t\t\t\t\t\t</LegendContainer>\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)}\n\t\t\t\t</LegendWrapper>\n\t\t\t)}\n\t\t\t<GraphContainerWrapper>\n\t\t\t\t{props.chartHeading && (\n\t\t\t\t\t<div style={{ marginBottom: 24 }}>\n\t\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Chart type=\"bar\" data={data} options={options} />\n\t\t\t\t</div>\n\t\t\t</GraphContainerWrapper>\n\t\t</GraphWrapper>\n\t);\n};\n"],"names":["ChartJS","register","CategoryScale","LinearScale","BarElement","Tooltip","VerticalBarAndLinearGraph","props","dummyValues","dummyLabels","noDataPresentForY1","barAxis","data","findIndex","ele","noDataPresentForY2","lineAxis","noDataPresentForY3","lineAxis2","yAxisConfigForNoData","min","max","stepSize","legends","legend","title","color","graphColor","options","responsive","plugins","display","tooltip","callbacks","label","ctx","rawValue","raw","dataset","suffix","yAxisID","axisSuffix","_a","formattedValue","orientation","GRAPH_ORIENTATION","HORIZONTAL","isInternationalStore","truncateValueForInternationalStore","truncateValueForIndianStore","scales","x","xAxis","text","titleColor","font","size","FONTS","caption","fontSize","grid","borderColor","COLORS","background","base","ticks","labelColor","content","secondary","callback","_b","value","undefined","bar","position","_c","Object","assign","_d","_e","line","_f","_g","_h","maintainAspectRatio","xAxisLabels","lineAxisData","lineAxis2Data","barAxisData","VERTICAL","forceShowXAxis","map","d","toString","noDummyValues","labels","datasets","type","backgroundColor","borderWidth","fill","pointRadius","barPercentage","categoryPercentage","borderRadius","_jsxs","GraphWrapper","children","customLegend","_jsx","LegendsWrapper","_ref","i","LegendMiddleWrapper","LegendColorBox","BodyTiny","LegendWrapper","_ref2","LegendContainer","LegendColor","SmallRegular","_Fragment","GraphContainerWrapper","chartHeading","style","marginBottom","TitleRegular","_j","heading","height","_k","graphCanvasHeight","Chart"],"mappings":"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"}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{Chart as a,CategoryScale as l,LinearScale as i,BarElement as o,Tooltip as n}from"chart.js";import{Bar as s}from"react-chartjs-2";import{SmallRegular as c}from"../../../TypographyStyle.js";import{LegendWrapper as d,LegendContainer as p,LegendColor as b}from"../LineChart/LineChart.styled.js";a.register(l,i,o,n);const h=["#DEEFFF","#FEDEF3","#FEC6C6","#DBAFFF","#FEDEBC"],g=({data:a=[],maintainAspectRatio:l=!1,canvasHeight:i=300,barColors:o=h,titleToolTipCallback:n})=>{0===a.length&&(a=[{label:"",current:0,previousLabel:""}]);const g=a.map((e=>e.label)),m=a.map((e=>e.current||0)),u=a.map((e=>e.previous?Math.max((e.previous||0)-e.current,0):0)),y=a.map((e=>e.previousLabel||"")),x=o,C=a.map((e=>({text:e.label,color:x[a.indexOf(e)]}))),f=[{label:"Current Value",data:m,backgroundColor:x.slice(0,a.length),borderColor:"white",borderWidth:1,stack:"combined"},{label:"Previous Value",data:u.map((e=>e||0)),backgroundColor:x.slice(0,a.length).map((e=>((e,t)=>{let r=0,a=0,l=0;return 4===e.length?(r=parseInt(e[1]+e[1],16),a=parseInt(e[2]+e[2],16),l=parseInt(e[3]+e[3],16)):7===e.length&&(r=parseInt(e[1]+e[2],16),a=parseInt(e[3]+e[4],16),l=parseInt(e[5]+e[6],16)),`rgba(${r}, ${a}, ${l}, ${t})`})(e,.3))),borderColor:"white",borderWidth:1,stack:"combined"}],k={labels:g,datasets:f},v={maintainAspectRatio:l,responsive:!0,scales:{x:{stacked:!0,grid:{display:!1},ticks:{display:a.length>0}},y:{stacked:!0,barPercentage:.6,categoryPercentage:.7,ticks:{display:a.length>0},grid:{drawBorder:a.length>0}}},plugins:{legend:{display:!1},tooltip:{callbacks:{title:n||(e=>{const t=e[0].datasetIndex,r=e[0].dataIndex;if(1===t){return`${y[r]} but not ${g[r]}`}return e[0].label}),label:e=>` ${e.raw}`}}}};return e("div",Object.assign({style:{height:l?void 0:i,display:"flex",flexDirection:"column",gap:5,width:"100%"}},{children:[t(d,{children:C.map((({text:a,color:l},i)=>a?e(p,{children:[t(b,{color:l,newStyle:!0}),t(c,Object.assign({color:"#667085"},{children:a}))]},i):t(r,{})))}),t("div",Object.assign({style:{flex:1}},{children:t(s,{data:k,options:v})}))]}))};export{g as FunnelVerticalBarGraph};
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{Chart as a,CategoryScale as l,LinearScale as i,BarElement as o,Tooltip as n}from"chart.js";import{Bar as s}from"react-chartjs-2";import{SmallRegular as c}from"../../../TypographyStyle.js";import{LegendWrapper as d,LegendContainer as p,LegendColor as b}from"../LineChart/LineChart.styled.js";a.register(l,i,o,n);const h=["#DEEFFF","#FEDEF3","#FEC6C6","#DBAFFF","#FEDEBC"],g=a=>{let{data:l=[],maintainAspectRatio:i=!1,canvasHeight:o=300,barColors:n=h,titleToolTipCallback:g}=a;0===l.length&&(l=[{label:"",current:0,previousLabel:""}]);const m=l.map((e=>e.label)),u=l.map((e=>e.current||0)),y=l.map((e=>e.previous?Math.max((e.previous||0)-e.current,0):0)),x=l.map((e=>e.previousLabel||"")),C=n,f=l.map((e=>({text:e.label,color:C[l.indexOf(e)]}))),k=[{label:"Current Value",data:u,backgroundColor:C.slice(0,l.length),borderColor:"white",borderWidth:1,stack:"combined"},{label:"Previous Value",data:y.map((e=>e||0)),backgroundColor:C.slice(0,l.length).map((e=>((e,t)=>{let r=0,a=0,l=0;return 4===e.length?(r=parseInt(e[1]+e[1],16),a=parseInt(e[2]+e[2],16),l=parseInt(e[3]+e[3],16)):7===e.length&&(r=parseInt(e[1]+e[2],16),a=parseInt(e[3]+e[4],16),l=parseInt(e[5]+e[6],16)),`rgba(${r}, ${a}, ${l}, ${t})`})(e,.3))),borderColor:"white",borderWidth:1,stack:"combined"}],v={labels:m,datasets:k},F={maintainAspectRatio:i,responsive:!0,scales:{x:{stacked:!0,grid:{display:!1},ticks:{display:l.length>0}},y:{stacked:!0,barPercentage:.6,categoryPercentage:.7,ticks:{display:l.length>0},grid:{drawBorder:l.length>0}}},plugins:{legend:{display:!1},tooltip:{callbacks:{title:g||(e=>{const t=e[0].datasetIndex,r=e[0].dataIndex;if(1===t){return`${x[r]} but not ${m[r]}`}return e[0].label}),label:e=>` ${e.raw}`}}}};return e("div",Object.assign({style:{height:i?void 0:o,display:"flex",flexDirection:"column",gap:5,width:"100%"}},{children:[t(d,{children:f.map(((a,l)=>{let{text:i,color:o}=a;return i?e(p,{children:[t(b,{color:o,newStyle:!0}),t(c,Object.assign({color:"#667085"},{children:i}))]},l):t(r,{})}))}),t("div",Object.assign({style:{flex:1}},{children:t(s,{data:v,options:F})}))]}))};export{g as FunnelVerticalBarGraph};
 //# sourceMappingURL=FunnelVerticalBarGraph.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FunnelVerticalBarGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { SmallRegular } from '@src/components/TypographyStyle';\nimport {\n\tLegendColor,\n\tLegendContainer,\n\tLegendWrapper,\n} from '../LineChart/LineChart.styled';\n\nChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);\n\nconst STATIC_COLORS = ['#DEEFFF', '#FEDEF3', '#FEC6C6', '#DBAFFF', '#FEDEBC'];\n\nexport interface FunnelBarChartI {\n\tdata?: {\n\t\tlabel: string;\n\t\tcurrent: number;\n\t\tprevious?: number;\n\t\tpreviousLabel?: string;\n\t}[];\n\tmaintainAspectRatio?: boolean;\n\tcanvasHeight?: number;\n\tbarColors?: string[];\n\ttitleToolTipCallback?: (tooltipItems: any) => string;\n}\nconst hexToRGBA = (hex: string \| any[], opacity: number) => {\n\tlet r = 0,\n\t\tg = 0,\n\t\tb = 0;\n\tif (hex.length === 4) {\n\t\tr = parseInt(hex[1] + hex[1], 16);\n\t\tg = parseInt(hex[2] + hex[2], 16);\n\t\tb = parseInt(hex[3] + hex[3], 16);\n\t} else if (hex.length === 7) {\n\t\tr = parseInt(hex[1] + hex[2], 16);\n\t\tg = parseInt(hex[3] + hex[4], 16);\n\t\tb = parseInt(hex[5] + hex[6], 16);\n\t}\n\treturn `rgba(${r}, ${g}, ${b}, ${opacity})`;\n};\n\nexport const FunnelVerticalBarGraph: React.FC<FunnelBarChartI> = ({\n\tdata = [],\n\tmaintainAspectRatio = false,\n\tcanvasHeight = 300,\n\tbarColors = STATIC_COLORS,\n\ttitleToolTipCallback,\n}) => {\n\tif (data.length === 0) {\n\t\tdata = [\n\t\t\t{\n\t\t\t\tlabel: '',\n\t\t\t\tcurrent: 0,\n\t\t\t\tpreviousLabel: '',\n\t\t\t},\n\t\t];\n\t}\n\n\tconst labels = data.map((item) => item.label);\n\tconst currentValues = data.map((item) => item.current \|\| 0);\n\tconst previousValues = data.map((item) =>\n\t\titem.previous ? Math.max((item.previous \|\| 0) - item.current, 0) : 0,\n\t);\n\tconst previousLabels = data.map((item) => item.previousLabel \|\| '');\n\tconst colors = barColors;\n\n\tconst legends = data.map((item) => ({\n\t\ttext: item.label,\n\t\tcolor: colors[data.indexOf(item)],\n\t}));\n\n\tconst datasets = [\n\t\t{\n\t\t\tlabel: 'Current Value',\n\t\t\tdata: currentValues,\n\t\t\tbackgroundColor: colors.slice(0, data.length),\n\t\t\tborderColor: 'white',\n\t\t\tborderWidth: 1,\n\t\t\tstack: 'combined',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Previous Value',\n\t\t\tdata: previousValues.map((val) => val \|\| 0),\n\t\t\tbackgroundColor: colors\n\t\t\t\t.slice(0, data.length)\n\t\t\t\t.map((color) => hexToRGBA(color, 0.3)),\n\t\t\tborderColor: 'white',\n\t\t\tborderWidth: 1,\n\t\t\tstack: 'combined',\n\t\t},\n\t];\n\n\tconst defaultTooltipTitleCallback = (tooltipItems) => {\n\t\tconst datasetIndex = tooltipItems[0].datasetIndex;\n\t\tconst dataIndex = tooltipItems[0].dataIndex;\n\t\tif (datasetIndex === 1) {\n\t\t\tconst prevLabel = previousLabels[dataIndex];\n\t\t\tconst label = labels[dataIndex];\n\t\t\treturn `${prevLabel} but not ${label}`;\n\t\t}\n\t\treturn tooltipItems[0].label;\n\t};\n\tconst chartData = {\n\t\tlabels: labels,\n\t\tdatasets: datasets,\n\t};\n\n\tconst options = {\n\t\tmaintainAspectRatio,\n\t\tresponsive: true,\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\tstacked: true,\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tdisplay: data.length > 0,\n\t\t\t\t},\n\t\t\t},\n\t\t\ty: {\n\t\t\t\tstacked: true,\n\t\t\t\tbarPercentage: 0.6,\n\t\t\t\tcategoryPercentage: 0.7,\n\t\t\t\tticks: {\n\t\t\t\t\tdisplay: data.length > 0,\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdrawBorder: data.length > 0,\n\t\t\t\t},\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\tcallbacks: {\n\t\t\t\t\ttitle: titleToolTipCallback \|\| defaultTooltipTitleCallback,\n\t\t\t\t\tlabel: (tooltipItem) => {\n\t\t\t\t\t\tconst value = tooltipItem.raw;\n\t\t\t\t\t\treturn ` ${value}`;\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\theight: !maintainAspectRatio ? canvasHeight : undefined,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\tgap: 5,\n\t\t\t\twidth: '100%',\n\t\t\t}}\n\t\t>\n\t\t\t<LegendWrapper>\n\t\t\t\t{legends.map(({ text, color }, i) =>\n\t\t\t\t\ttext ? (\n\t\t\t\t\t\t<LegendContainer key={i}>\n\t\t\t\t\t\t\t<LegendColor color={color} newStyle={true} />\n\t\t\t\t\t\t\t<SmallRegular color={'#667085'}>{text}</SmallRegular>\n\t\t\t\t\t\t</LegendContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t),\n\t\t\t\t)}\n\t\t\t</LegendWrapper>\n\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t<Bar data={chartData} options={options} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["ChartJS","register","CategoryScale","LinearScale","BarElement","Tooltip","STATIC_COLORS","FunnelVerticalBarGraph","data","maintainAspectRatio","canvasHeight","barColors","titleToolTipCallback","length","label","current","previousLabel","labels","map","item","currentValues","previousValues","previous","Math","max","previousLabels","colors","legends","text","color","indexOf","datasets","backgroundColor","slice","borderColor","borderWidth","stack","val","hexToRGBA","hex","opacity","r","g","b","parseInt","chartData","options","responsive","scales","x","stacked","grid","display","ticks","y","barPercentage","categoryPercentage","drawBorder","plugins","legend","tooltip","callbacks","title","tooltipItems","datasetIndex","dataIndex","tooltipItem","raw","_jsxs","Object","assign","style","height","undefined","flexDirection","gap","width","children","_jsx","LegendWrapper","i","LegendContainer","LegendColor","newStyle","SmallRegular","_Fragment","flex","Bar"],"mappings":"0WAgBAA,EAAQC,SAASC,EAAeC,EAAaC,EAAYC,GAEzD,MAAMC,EAAgB,CAAC,UAAW,UAAW,UAAW,UAAW,WA8BtDC,~~EAAoDA~~,~~EAChEC~~,~~OAAO~~,~~GACPC~~,~~uBAAsB~~,~~EACtBC~~,~~eAAe~~,~~IACfC~~,~~YAAYL~~,~~EACZM~~,~~2BAEoB~~,~~IAAhBJ~~,EAAKK,SACRL,EAAO,CACN,CACCM,MAAO,GACPC,QAAS,EACTC,cAAe,MAKlB,MAAMC,EAAST,EAAKU,KAAKC,GAASA,EAAKL,QACjCM,EAAgBZ,EAAKU,KAAKC,GAASA,EAAKJ,SAAW,IACnDM,EAAiBb,EAAKU,KAAKC,GAChCA,EAAKG,SAAWC,KAAKC,KAAKL,EAAKG,UAAY,GAAKH,EAAKJ,QAAS,GAAK,IAE9DU,EAAiBjB,EAAKU,KAAKC,GAASA,EAAKH,eAAiB,KAC1DU,EAASf,EAETgB,EAAUnB,EAAKU,KAAKC,IAAU,CACnCS,KAAMT,EAAKL,MACXe,MAAOH,EAAOlB,EAAKsB,QAAQX,QAGtBY,EAAW,CAChB,CACCjB,MAAO,gBACPN,KAAMY,EACNY,gBAAiBN,EAAOO,MAAM,EAAGzB,EAAKK,QACtCqB,YAAa,QACbC,YAAa,EACbC,MAAO,YAER,CACCtB,MAAO,iBACPN,KAAMa,EAAeH,KAAKmB,GAAQA,GAAO,IACzCL,gBAAiBN,EACfO,MAAM,EAAGzB,EAAKK,QACdK,KAAKW,GA5DQS,EAACC,EAAqBC,KACvC,IAAIC,EAAI,EACPC,EAAI,EACJC,EAAI,EAUL,OATmB,IAAfJ,EAAI1B,QACP4B,EAAIG,SAASL,EAAI,GAAKA,EAAI,GAAI,IAC9BG,EAAIE,SAASL,EAAI,GAAKA,EAAI,GAAI,IAC9BI,EAAIC,SAASL,EAAI,GAAKA,EAAI,GAAI,KACL,IAAfA,EAAI1B,SACd4B,EAAIG,SAASL,EAAI,GAAKA,EAAI,GAAI,IAC9BG,EAAIE,SAASL,EAAI,GAAKA,EAAI,GAAI,IAC9BI,EAAIC,SAASL,EAAI,GAAKA,EAAI,GAAI,KAExB,QAAQE,MAAMC,MAAMC,MAAMH,IAAU,EA+CxBF,CAAUT,EAAO,MAClCK,YAAa,QACbC,YAAa,EACbC,MAAO,aAcHS,EAAY,CACjB5B,OAAQA,EACRc,SAAUA,GAGLe,EAAU,CACfrC,sBACAsC,YAAY,EACZC,OAAQ,CACPC,EAAG,CACFC,SAAS,EACTC,KAAM,CACLC,SAAS,GAEVC,MAAO,CACND,QAAS5C,EAAKK,OAAS,IAGzByC,EAAG,CACFJ,SAAS,EACTK,cAAe,GACfC,mBAAoB,GACpBH,MAAO,CACND,QAAS5C,EAAKK,OAAS,GAExBsC,KAAM,CACLM,WAAYjD,EAAKK,OAAS,KAI7B6C,QAAS,CACRC,OAAQ,CACPP,SAAS,GAEVQ,QAAS,CACRC,UAAW,CACVC,MAAOlD,GA9C0BmD,KACpC,MAAMC,EAAeD,EAAa,GAAGC,aAC/BC,EAAYF,EAAa,GAAGE,UAClC,GAAqB,IAAjBD,EAAoB,CAGvB,~~MAAO~~,~~GAFWvC~~,EAAewC,cACnBhD,EAAOgD,IAErB,CACD,OAAOF,EAAa,GAAGjD,KAAK,GAuCzBA,MAAQoD,GAEA,IADOA,EAAYC,UAQ/B,OACCC,EACC,MAAAC,OAAAC,OAAA,CAAAC,MAAO,CACNC,OAAS/D,OAAqCgE,EAAf/D,EAC/B0C,QAAS,OACTsB,cAAe,SACfC,IAAK,EACLC,MAAO,SACP,CAAAC,SAAA,CAEDC,EAACC,EAAa,CAAAF,SACZlD,EAAQT,KAAI,~~EAAGU~~,~~OAAMC~~,~~SAASmD~~,~~IAC9BpD~~,EACCwC,~~EAACa~~,EACA,~~CAAAJ~~,SAAA,CAAAC,~~EAACI~~,EAAY,~~CAAArD~~,MAAOA,~~EAAOsD~~,UAAU,~~IACrCL~~,~~EAACM~~,~~EAAYf~~,OAAAC,OAAA,CAACzC,MAAO,WAAY,CAAAgD,SAAAjD,~~OAFZoD~~,~~GAKtBF~~,~~EAAKO~~,EAAA,CAAA,~~OAIRP~~,uBAAKP,MAAO,~~CAAEe~~,KAAM,~~cACnBR~~,~~EAACS~~,~~GAAI/E~~,KAAMqC,EAAWC,QAASA,UAE3B"}
1	+ {"version":3,"file":"FunnelVerticalBarGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { SmallRegular } from '@src/components/TypographyStyle';\nimport {\n\tLegendColor,\n\tLegendContainer,\n\tLegendWrapper,\n} from '../LineChart/LineChart.styled';\n\nChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);\n\nconst STATIC_COLORS = ['#DEEFFF', '#FEDEF3', '#FEC6C6', '#DBAFFF', '#FEDEBC'];\n\nexport interface FunnelBarChartI {\n\tdata?: {\n\t\tlabel: string;\n\t\tcurrent: number;\n\t\tprevious?: number;\n\t\tpreviousLabel?: string;\n\t}[];\n\tmaintainAspectRatio?: boolean;\n\tcanvasHeight?: number;\n\tbarColors?: string[];\n\ttitleToolTipCallback?: (tooltipItems: any) => string;\n}\nconst hexToRGBA = (hex: string \| any[], opacity: number) => {\n\tlet r = 0,\n\t\tg = 0,\n\t\tb = 0;\n\tif (hex.length === 4) {\n\t\tr = parseInt(hex[1] + hex[1], 16);\n\t\tg = parseInt(hex[2] + hex[2], 16);\n\t\tb = parseInt(hex[3] + hex[3], 16);\n\t} else if (hex.length === 7) {\n\t\tr = parseInt(hex[1] + hex[2], 16);\n\t\tg = parseInt(hex[3] + hex[4], 16);\n\t\tb = parseInt(hex[5] + hex[6], 16);\n\t}\n\treturn `rgba(${r}, ${g}, ${b}, ${opacity})`;\n};\n\nexport const FunnelVerticalBarGraph: React.FC<FunnelBarChartI> = ({\n\tdata = [],\n\tmaintainAspectRatio = false,\n\tcanvasHeight = 300,\n\tbarColors = STATIC_COLORS,\n\ttitleToolTipCallback,\n}) => {\n\tif (data.length === 0) {\n\t\tdata = [\n\t\t\t{\n\t\t\t\tlabel: '',\n\t\t\t\tcurrent: 0,\n\t\t\t\tpreviousLabel: '',\n\t\t\t},\n\t\t];\n\t}\n\n\tconst labels = data.map((item) => item.label);\n\tconst currentValues = data.map((item) => item.current \|\| 0);\n\tconst previousValues = data.map((item) =>\n\t\titem.previous ? Math.max((item.previous \|\| 0) - item.current, 0) : 0,\n\t);\n\tconst previousLabels = data.map((item) => item.previousLabel \|\| '');\n\tconst colors = barColors;\n\n\tconst legends = data.map((item) => ({\n\t\ttext: item.label,\n\t\tcolor: colors[data.indexOf(item)],\n\t}));\n\n\tconst datasets = [\n\t\t{\n\t\t\tlabel: 'Current Value',\n\t\t\tdata: currentValues,\n\t\t\tbackgroundColor: colors.slice(0, data.length),\n\t\t\tborderColor: 'white',\n\t\t\tborderWidth: 1,\n\t\t\tstack: 'combined',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Previous Value',\n\t\t\tdata: previousValues.map((val) => val \|\| 0),\n\t\t\tbackgroundColor: colors\n\t\t\t\t.slice(0, data.length)\n\t\t\t\t.map((color) => hexToRGBA(color, 0.3)),\n\t\t\tborderColor: 'white',\n\t\t\tborderWidth: 1,\n\t\t\tstack: 'combined',\n\t\t},\n\t];\n\n\tconst defaultTooltipTitleCallback = (tooltipItems) => {\n\t\tconst datasetIndex = tooltipItems[0].datasetIndex;\n\t\tconst dataIndex = tooltipItems[0].dataIndex;\n\t\tif (datasetIndex === 1) {\n\t\t\tconst prevLabel = previousLabels[dataIndex];\n\t\t\tconst label = labels[dataIndex];\n\t\t\treturn `${prevLabel} but not ${label}`;\n\t\t}\n\t\treturn tooltipItems[0].label;\n\t};\n\tconst chartData = {\n\t\tlabels: labels,\n\t\tdatasets: datasets,\n\t};\n\n\tconst options = {\n\t\tmaintainAspectRatio,\n\t\tresponsive: true,\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\tstacked: true,\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tdisplay: data.length > 0,\n\t\t\t\t},\n\t\t\t},\n\t\t\ty: {\n\t\t\t\tstacked: true,\n\t\t\t\tbarPercentage: 0.6,\n\t\t\t\tcategoryPercentage: 0.7,\n\t\t\t\tticks: {\n\t\t\t\t\tdisplay: data.length > 0,\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdrawBorder: data.length > 0,\n\t\t\t\t},\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\tcallbacks: {\n\t\t\t\t\ttitle: titleToolTipCallback \|\| defaultTooltipTitleCallback,\n\t\t\t\t\tlabel: (tooltipItem) => {\n\t\t\t\t\t\tconst value = tooltipItem.raw;\n\t\t\t\t\t\treturn ` ${value}`;\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\theight: !maintainAspectRatio ? canvasHeight : undefined,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\tgap: 5,\n\t\t\t\twidth: '100%',\n\t\t\t}}\n\t\t>\n\t\t\t<LegendWrapper>\n\t\t\t\t{legends.map(({ text, color }, i) =>\n\t\t\t\t\ttext ? (\n\t\t\t\t\t\t<LegendContainer key={i}>\n\t\t\t\t\t\t\t<LegendColor color={color} newStyle={true} />\n\t\t\t\t\t\t\t<SmallRegular color={'#667085'}>{text}</SmallRegular>\n\t\t\t\t\t\t</LegendContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t),\n\t\t\t\t)}\n\t\t\t</LegendWrapper>\n\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t<Bar data={chartData} options={options} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["ChartJS","register","CategoryScale","LinearScale","BarElement","Tooltip","STATIC_COLORS","FunnelVerticalBarGraph","_ref","data","maintainAspectRatio","canvasHeight","barColors","titleToolTipCallback","length","label","current","previousLabel","labels","map","item","currentValues","previousValues","previous","Math","max","previousLabels","colors","legends","text","color","indexOf","datasets","backgroundColor","slice","borderColor","borderWidth","stack","val","hexToRGBA","hex","opacity","r","g","b","parseInt","chartData","options","responsive","scales","x","stacked","grid","display","ticks","y","barPercentage","categoryPercentage","drawBorder","plugins","legend","tooltip","callbacks","title","tooltipItems","datasetIndex","dataIndex","tooltipItem","raw","_jsxs","Object","assign","style","height","undefined","flexDirection","gap","width","children","_jsx","LegendWrapper","_ref2","i","LegendContainer","LegendColor","newStyle","SmallRegular","_Fragment","flex","Bar"],"mappings":"0WAgBAA,EAAQC,SAASC,EAAeC,EAAaC,EAAYC,GAEzD,MAAMC,EAAgB,CAAC,UAAW,UAAW,UAAW,UAAW,WA8BtDC,EAAoDC,IAM5D,IAN6DC,KACjEA,EAAO,GAAEC,oBACTA,GAAsB,EAAKC,aAC3BA,EAAe,IAAGC,UAClBA,EAAYN,EAAaO,qBACzBA,GACAL,EACoB,IAAhBC,EAAKK,SACRL,EAAO,CACN,CACCM,MAAO,GACPC,QAAS,EACTC,cAAe,MAKlB,MAAMC,EAAST,EAAKU,KAAKC,GAASA,EAAKL,QACjCM,EAAgBZ,EAAKU,KAAKC,GAASA,EAAKJ,SAAW,IACnDM,EAAiBb,EAAKU,KAAKC,GAChCA,EAAKG,SAAWC,KAAKC,KAAKL,EAAKG,UAAY,GAAKH,EAAKJ,QAAS,GAAK,IAE9DU,EAAiBjB,EAAKU,KAAKC,GAASA,EAAKH,eAAiB,KAC1DU,EAASf,EAETgB,EAAUnB,EAAKU,KAAKC,IAAU,CACnCS,KAAMT,EAAKL,MACXe,MAAOH,EAAOlB,EAAKsB,QAAQX,QAGtBY,EAAW,CAChB,CACCjB,MAAO,gBACPN,KAAMY,EACNY,gBAAiBN,EAAOO,MAAM,EAAGzB,EAAKK,QACtCqB,YAAa,QACbC,YAAa,EACbC,MAAO,YAER,CACCtB,MAAO,iBACPN,KAAMa,EAAeH,KAAKmB,GAAQA,GAAO,IACzCL,gBAAiBN,EACfO,MAAM,EAAGzB,EAAKK,QACdK,KAAKW,GA5DQS,EAACC,EAAqBC,KACvC,IAAIC,EAAI,EACPC,EAAI,EACJC,EAAI,EAUL,OATmB,IAAfJ,EAAI1B,QACP4B,EAAIG,SAASL,EAAI,GAAKA,EAAI,GAAI,IAC9BG,EAAIE,SAASL,EAAI,GAAKA,EAAI,GAAI,IAC9BI,EAAIC,SAASL,EAAI,GAAKA,EAAI,GAAI,KACL,IAAfA,EAAI1B,SACd4B,EAAIG,SAASL,EAAI,GAAKA,EAAI,GAAI,IAC9BG,EAAIE,SAASL,EAAI,GAAKA,EAAI,GAAI,IAC9BI,EAAIC,SAASL,EAAI,GAAKA,EAAI,GAAI,KAExB,QAAQE,MAAMC,MAAMC,MAAMH,IAAU,EA+CxBF,CAAUT,EAAO,MAClCK,YAAa,QACbC,YAAa,EACbC,MAAO,aAcHS,EAAY,CACjB5B,OAAQA,EACRc,SAAUA,GAGLe,EAAU,CACfrC,sBACAsC,YAAY,EACZC,OAAQ,CACPC,EAAG,CACFC,SAAS,EACTC,KAAM,CACLC,SAAS,GAEVC,MAAO,CACND,QAAS5C,EAAKK,OAAS,IAGzByC,EAAG,CACFJ,SAAS,EACTK,cAAe,GACfC,mBAAoB,GACpBH,MAAO,CACND,QAAS5C,EAAKK,OAAS,GAExBsC,KAAM,CACLM,WAAYjD,EAAKK,OAAS,KAI7B6C,QAAS,CACRC,OAAQ,CACPP,SAAS,GAEVQ,QAAS,CACRC,UAAW,CACVC,MAAOlD,GA9C0BmD,KACpC,MAAMC,EAAeD,EAAa,GAAGC,aAC/BC,EAAYF,EAAa,GAAGE,UAClC,GAAqB,IAAjBD,EAAoB,CAGvB,MAAU,GAFQvC,EAAewC,cACnBhD,EAAOgD,IAErB,CACD,OAAOF,EAAa,GAAGjD,KAAK,GAuCzBA,MAAQoD,GAEA,IADOA,EAAYC,UAQ/B,OACCC,EACC,MAAAC,OAAAC,OAAA,CAAAC,MAAO,CACNC,OAAS/D,OAAqCgE,EAAf/D,EAC/B0C,QAAS,OACTsB,cAAe,SACfC,IAAK,EACLC,MAAO,SACP,CAAAC,SAAA,CAEDC,EAACC,EAAa,CAAAF,SACZlD,EAAQT,KAAI,CAAA8D,EAAkBC,KAAC,IAAlBrD,KAAEA,EAAIC,MAAEA,GAAOmD,EAAA,OAC5BpD,EACCwC,EAACc,EACA,CAAAL,SAAA,CAAAC,EAACK,EAAY,CAAAtD,MAAOA,EAAOuD,UAAU,IACrCN,EAACO,EAAYhB,OAAAC,OAAA,CAACzC,MAAO,WAAY,CAAAgD,SAAAjD,OAFZqD,GAKtBH,EAAKQ,EAAA,CAAA,EACL,MAGHR,uBAAKP,MAAO,CAAEgB,KAAM,cACnBT,EAACU,GAAIhF,KAAMqC,EAAWC,QAASA,UAE3B"}