@bikdotai/bik-component-library 0.0.687-beta.8 → 0.0.687-beta.9

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

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

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.d.ts

@@ -0,0 +1,90 @@
+import { TooltipItem, FontSpec } from 'chart.js';
+
+interface AxisDetailsI {
+    title?: string;
+    titleColor?: string;
+    data: XAxisDataI[] | string[];
+    labelColor?: string;
+    stepSize?: number;
+    stacked?: boolean;
+}
+interface XAxisDataI {
+    name: string;
+    value: number;
+}
+interface RGBColorI {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+declare enum COLOR_SCHEMA {
+    BRAND = "brand",
+    PASTEL = "pastel"
+}
+declare enum GRAPH_ORIENTATION {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+interface StackedBarGraphI {
+    graphCanvasHeight?: number | string;
+    graphCanvasWidth?: string;
+    tickColor?: string;
+    labelColor?: string;
+    chartHeading?: ChartHeadingI;
+    xAxis: AxisDetailsI;
+    yAxis: AxisDetailsI;
+    barColorRGBA: RGBColorI;
+    outerPadding?: string;
+    onBarClick?: (xAxisLabel: string, yAxisLabel: string) => void;
+    colorSchema?: COLOR_SCHEMA;
+    orientation?: GRAPH_ORIENTATION;
+    barWidth?: number;
+    wrapperStyle?: React.CSSProperties;
+    customLegend?: boolean;
+    showTotal?: boolean;
+    tooltipConfig?: {
+        titleCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
+        labelCallback?: (toolTipItem: TooltipItem<'bar'>) => string | string[];
+        footerCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
+        footerStyles?: {
+            footerFont?: Partial<FontSpec>;
+        };
+    };
+    customColourScaleBrand?: string[];
+    customColourScalePastel?: string[];
+    customHoverColour?: string[];
+    isInternationalStore?: boolean;
+    truncateBars?: number;
+    allowChartPopup?: boolean;
+    hideHeading?: boolean;
+    borderRadius?: number | {
+        topLeft?: number;
+        topRight?: number;
+        bottomLeft?: number;
+        bottomRight?: number;
+    };
+    showGridLines?: {
+        x?: boolean;
+        y?: boolean;
+    };
+    equalHeight?: {
+        flag: boolean;
+        max: number;
+    };
+    barPercentage?: number;
+    addBarGap?: {
+        flag: boolean;
+        value: number;
+    };
+    ticksCallback?: (value: number) => string;
+    legendsAndIconDirection?: 'row-reverse' | 'row';
+    headerIcons?: React.ReactNode[];
+}
+
+export { COLOR_SCHEMA, GRAPH_ORIENTATION };
+export type { AxisDetailsI, ChartHeadingI, RGBColorI, StackedBarGraphI, XAxisDataI };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=(e=>(e.BRAND="brand",e.PASTEL="pastel",e))(e||{}),r=(e=>(e.VERTICAL="vertical",e.HORIZONTAL="horizontal",e))(r||{});exports.COLOR_SCHEMA=e,exports.GRAPH_ORIENTATION=r;

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

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=t(e);const a=p.default.div`
+	background-color: ${r.COLORS.surface.standard};
+	padding: ${e=>e.padding??"24px"};
+	border: none;
+	width: 100%;
+
+	.graph__wrapper {
+		width: 100%;
+		display: flex;
+		gap: 24px;
+		height: ${e=>e.chartWrapperHeight??"100%"};
+		flex-direction: ${e=>e.isFunnel||e.customLegend?"column":"row"};
+	}
+
+	.legend__palette {
+		height: 16px;
+		width: 16px;
+		border-radius: 2px;
+	}
+
+	.legend__row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-top: 4px;
+	}
+
+	.legend__set {
+		margin-top: 16px;
+	}
+`,n=p.default.div`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+`;exports.GraphContainerWrapper=a,exports.HeaderIconWrapper=n;

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StackedBarDistributionGraphI } from './StackedBarDistributionChart.model.js';
+
+declare const StackedBarDistributionChart: (props: StackedBarDistributionGraphI) => react_jsx_runtime.JSX.Element;
+
+export { StackedBarDistributionChart };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),a=require("chartjs-plugin-datalabels"),l=require("react"),o=require("react-chartjs-2"),r=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),i=require("../utils/calcPercentage.js"),s=require("./StackedBarChart.styles.js"),c=require("./StackedBarDistributionChart.model.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var O=d(a);t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip,t.Legend,O.default),t.Chart.defaults.plugins.datalabels.display=!1;exports.StackedBarDistributionChart=t=>{const[a,d]=l.useState([]),[O,u]=l.useState(),T=!t.data.filter((e=>!!e.value)).length,h=t.colorMatrix&&t.colorMatrix.length?t.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],p={min:0,max:200,stepSize:20},A={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},g={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:T?0:t.barThickness??100},I={plugins:{legend:{display:!1},tooltip:{enabled:!T,callbacks:{label:t.tooltipConfig?.labelCallback,footer:t.tooltipConfig?.footerCallback},footerFont:t.tooltipConfig?.footerStyles?.footerFont},datalabels:{display:(!T&&t.showTotal)??!1,anchor:"end",align:"end",clamp:!0,formatter:(e,a)=>{const l=a.datasetIndex,o=a.chart.data.datasets;if(l!==o.length-1)return"";const r=a.dataIndex;let n=0;for(let e=0;e<o.length;e++)n+=o[e].data[r]??0;return n?t.isInternationalStore?i.truncateValueForInternationalStore(n):i.truncateValueForIndianStore(n):""},color:n.COLORS.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=c.GRAPH_ORIENTATION.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?t.valueTitle?.heading:t.labelTitle?.heading),text:t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?t.valueTitle?.heading:t.labelTitle?.heading,color:(t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?t.valueTitle?.color:t.labelTitle?.color)??n.COLORS.content.secondary,font:{size:n.FONTS.bodySecondary.fontSize}},grid:{display:t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL,color:n.COLORS.background.base},ticks:{stepSize:30,fontSize:n.FONTS.caption.fontSize,color:(t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?t.labelTitle?.color:t.valueTitle?.color)??n.COLORS.content.secondary,...t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?T?p:A:{},callback:(e,a)=>t.orientation!==c.GRAPH_ORIENTATION.HORIZONTAL?O?.labels?.[a]??"":"number"!=typeof e?e:t.isInternationalStore?i.truncateValueForInternationalStore(e):i.truncateValueForIndianStore(e)},stacked:!0},y:{title:{display:!!(t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?t.labelTitle?.heading:t.valueTitle?.heading),text:t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?t.labelTitle?.heading:t.valueTitle?.heading,color:(t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?t.labelTitle?.color:t.valueTitle?.color)??n.COLORS.content.secondary,font:{size:n.FONTS.bodySecondary.fontSize}},grid:{display:t.orientation!==c.GRAPH_ORIENTATION.HORIZONTAL,color:n.COLORS.background.base},ticks:{fontSize:n.FONTS.caption.fontSize,color:(t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?t.valueTitle?.color:t.labelTitle?.color)??n.COLORS.content.secondary,...t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?{}:T?p:A,callback:(e,a)=>t.orientation===c.GRAPH_ORIENTATION.HORIZONTAL?O?.labels?.[a]??"":"number"!=typeof e?e:t.isInternationalStore?i.truncateValueForInternationalStore(e):i.truncateValueForIndianStore(e)},stacked:!0}},onClick:(e,a)=>{if(!t.onBarClick)return;const l=a[0].datasetIndex,o=a[0].index,r=e.chart.data.datasets[l].label,n=e.chart.data.labels[o];t.onBarClick(n,r)},onHover:(e,a)=>{t.onBarClick&&a.length&&(e.native.target.style.cursor="pointer")}},R=Array.from(new Set(t.data.map((e=>e.label)))),N={labels:(b=R,b.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:T?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var b;l.useEffect((()=>{const e=[];R.forEach(((a,l)=>{const o=[],r=t.data.filter((e=>e.label===a));t.isFunnel||r.sort(((e,t)=>t.value-e.value)),r.forEach(((e,t)=>{const a=((e,t,a)=>h[e].slice(-a)[t])(l,t,r.length);o.push({color:a,label:e.stackLabel});const n={label:e.stackLabel,backgroundColor:a,data:Array(R.length).fill(0),...g};n.data[l]=e.value,N.datasets.push(n)})),e.push(o)})),d(e),u(N)}),[t.data]);const y=l.useCallback((()=>e.jsx("div",{style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"},children:C().map((t=>e.jsxs("div",{className:"legend__row",children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:t.color}}),e.jsx(r.BodyTiny,{color:n.COLORS.content.secondary,children:t.label})]},t.label.replace(" ","_"))))})),[a]),C=()=>{const e=[];return a.forEach(((t,a)=>{e.push({color:t[0].color,label:R[a]})})),e};if(!O)return e.jsx(e.Fragment,{});return e.jsxs(s.GraphContainerWrapper,{style:t.wrapperStyle??{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel,children:[t.chartHeading&&e.jsx("div",{style:{marginBottom:24},children:e.jsx(r.TitleRegular,{color:t.chartHeading.color??n.COLORS.content.secondary,children:t.chartHeading.heading})}),e.jsxs("div",{className:"graph__wrapper",children:[(t.showLegend??!0)&&t.isFunnel&&y(),e.jsx("div",{style:{height:t.graphCanvasHeight??500,width:t.graphCanvasWidth??"100%",flex:1},children:e.jsx(o.Bar,{options:I,data:O})}),(t.showLegend??!0)&&!t.isFunnel&&e.jsx("div",{style:{overflowY:"scroll",display:"flex",flexDirection:"column"},children:a.map(((t,a)=>e.jsx("div",{className:"legend__set",children:t.map((t=>e.jsxs("div",{className:"legend__row",children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:t.color}}),e.jsx(r.BodyTiny,{color:n.COLORS.content.secondary,children:t.label})]},t.label.replace(" ","_"))))},`Legend_set_${a}`)))})]})]})};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.d.ts

@@ -0,0 +1,51 @@
+import { TooltipItem, FontSpec } from 'chart.js';
+
+interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+declare enum GRAPH_ORIENTATION {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+interface StackedBarDistributionGraphDataI {
+    label: string;
+    value: number;
+    stackLabel: string;
+}
+interface StackedBarDistributionGraphI {
+    graphCanvasHeight?: number | string;
+    graphCanvasWidth?: string;
+    tickColor?: string;
+    labelColor?: string;
+    chartHeading?: ChartHeadingI;
+    data: StackedBarDistributionGraphDataI[];
+    outerPadding?: string;
+    onBarClick?: (xAxisLabel: string, yAxisLabel: string) => void;
+    labelTitle?: ChartHeadingI;
+    valueTitle?: ChartHeadingI;
+    orientation?: GRAPH_ORIENTATION;
+    barThickness?: number;
+    valuesStepSize?: number;
+    minValue?: number;
+    maxValue?: number;
+    chartWrapperHeight?: string;
+    showLegend?: boolean;
+    isFunnel?: boolean;
+    colorMatrix?: string[][];
+    wrapperStyle?: React.CSSProperties;
+    showTotal?: boolean;
+    skipSortingByLabels?: boolean;
+    tooltipConfig?: {
+        titleCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
+        labelCallback?: (toolTipItem: TooltipItem<'bar'>) => string | string[];
+        footerCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
+        footerStyles?: {
+            footerFont?: Partial<FontSpec>;
+        };
+    };
+    isInternationalStore?: boolean;
+}
+
+export { GRAPH_ORIENTATION };
+export type { ChartHeadingI, StackedBarDistributionGraphDataI, StackedBarDistributionGraphI };

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=(e=>(e.VERTICAL="vertical",e.HORIZONTAL="horizontal",e))(e||{});exports.GRAPH_ORIENTATION=e;

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.d.ts

@@ -0,0 +1,6 @@
+import React__default from 'react';
+import { VerticalBarAndLinearGraphI } from './VerticalBarAndLinearGraphModel.js';
+
+declare const VerticalBarAndLinearGraph: React__default.FC<VerticalBarAndLinearGraphI>;
+
+export { VerticalBarAndLinearGraph };

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("chart.js"),r=require("react-chartjs-2"),t=require("../../../TypographyStyle.js"),o=require("../../../../constants/Theme.js"),a=require("../LineChart/LineChart.styled.js"),l=require("./VerticalBarAndLinearGraph.styles.js");i.Chart.register(i.CategoryScale,i.LinearScale,i.BarElement,i.Tooltip);exports.VerticalBarAndLinearGraph=i=>{const n=[0,0,0,0,0,0],s=-1===i.barAxis.data.findIndex((e=>0!==e)),d=-1===i.lineAxis.data.findIndex((e=>0!==e)),c={min:0,max:2e3,stepSize:200},x=[{legend:i.barAxis.title,color:i.barAxis.graphColor},{legend:i.lineAxis.title,color:i.lineAxis.graphColor}],p={responsive:!0,plugins:{legend:{display:!1}},scales:{x:{title:{display:!!i.xAxis.title,text:i.xAxis.title,color:i.xAxis.titleColor,font:{size:o.FONTS.caption.fontSize}},grid:{display:!1,borderColor:o.COLORS.background.base},ticks:{fontSize:o.FONTS.caption.fontSize,color:i.xAxis.labelColor??o.COLORS.content.secondary}},bar:{position:"left",title:{display:!!i.barAxis.title,text:i.barAxis.title,color:i.barAxis.titleColor,font:{size:o.FONTS.caption.fontSize}},grid:{borderColor:"white",color:o.COLORS.background.base},ticks:{fontSize:o.FONTS.caption.fontSize,color:i.barAxis.labelColor??o.COLORS.content.secondary,...s?c:{}}},line:{position:"right",title:{display:!!i.lineAxis.title,text:i.lineAxis.title,color:i.lineAxis.titleColor,font:{size:o.FONTS.caption.fontSize}},grid:{display:!1,borderColor:"white",color:o.COLORS.background.base},ticks:{fontSize:o.FONTS.caption.fontSize,color:i.lineAxis.labelColor??o.COLORS.content.secondary,...d?c:{}},display:!0}},maintainAspectRatio:!1},g={labels:i.xAxis.forceShowXAxis?i.xAxis.data.map((e=>e.toString())):s&&d?["-","-","-","-","-","-"]:i.xAxis.data.map((e=>e.toString())),datasets:[{yAxisID:"line",type:"line",data:d?n:i.lineAxis.data,borderColor:i.lineAxis.graphColor||"rgba(0,0,0,0)",borderWidth:2,fill:!1,pointRadius:1},{yAxisID:"bar",type:"bar",data:s?n:i.barAxis.data,backgroundColor:i.barAxis.graphColor||"rgba(0,0,0,0)",barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:2},children:[e.jsx(a.LegendWrapper,{position:"center",children:x.map((({legend:i,color:r},o)=>i?e.jsxs(a.LegendContainer,{children:[e.jsx(a.LegendColor,{color:r}),e.jsx(t.SmallRegular,{color:"#667085",children:i})]},o):e.jsx(e.Fragment,{})))}),e.jsxs(l.GraphContainerWrapper,{children:[i.chartHeading&&e.jsx("div",{style:{marginBottom:24},children:e.jsx(t.TitleRegular,{color:i.chartHeading.color??o.COLORS.content.secondary,children:i.chartHeading.heading})}),e.jsx("div",{style:{height:i.graphCanvasHeight??500},children:e.jsx(r.Chart,{type:"bar",data:g,options:p})})]})]})};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.styles.js

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=t(e).default.div`
+	background-color: ${r.COLORS.surface.standard};
+	padding: 0;
+`;exports.GraphContainerWrapper=n;

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraphModel.d.ts

@@ -0,0 +1,24 @@
+interface AxisDetailsI {
+    title?: string;
+    titleColor?: string;
+    data: number[] | string[];
+    labelColor?: string;
+    graphColor?: string;
+}
+interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+interface VerticalBarAndLinearGraphI {
+    graphCanvasHeight?: number;
+    tickColor?: string;
+    labelColor?: string;
+    chartHeading?: ChartHeadingI;
+    xAxis: AxisDetailsI & {
+        forceShowXAxis?: boolean;
+    };
+    lineAxis: AxisDetailsI;
+    barAxis: AxisDetailsI;
+}
+
+export type { AxisDetailsI, ChartHeadingI, VerticalBarAndLinearGraphI };

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.d.ts

@@ -0,0 +1,18 @@
+import React__default from 'react';
+
+interface FunnelBarChartI {
+    data?: {
+        label: string;
+        current: number;
+        previous?: number;
+        previousLabel?: string;
+    }[];
+    maintainAspectRatio?: boolean;
+    canvasHeight?: number;
+    barColors?: string[];
+    titleToolTipCallback?: (tooltipItems: any) => string;
+}
+declare const FunnelVerticalBarGraph: React__default.FC<FunnelBarChartI>;
+
+export { FunnelVerticalBarGraph };
+export type { FunnelBarChartI };

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.js

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

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.d.ts

@@ -0,0 +1,49 @@
+interface AxisDetailsI {
+	title?: string;
+	titleColor?: string;
+	data: (string | number)[];
+	labelColor?: string;
+	ticksCallback?: (value: string) => string;
+	toolTipCallback?: (value: string) => string;
+}
+
+interface RGBColorI {
+	r: number;
+	g: number;
+	b: number;
+	a?: number;
+}
+
+interface ChartHeadingI {
+	heading: string;
+	color?: string;
+}
+
+interface VerticalGraphI {
+	graphCanvasHeight?: number;
+	tickColor?: string;
+	labelColor?: string;
+	chartHeading?: ChartHeadingI;
+	xAxis: AxisDetailsI;
+	yAxis: AxisDetailsI;
+	barColorRGBA: RGBColorI;
+	isFunnel?: boolean;
+	outerPadding?: string;
+	allowChartPopup?: boolean;
+	showConvertToPieChart?: boolean;
+	pieChartSize?: number;
+	popupData?: {
+		xAxis: AxisDetailsI;
+		yAxis: AxisDetailsI;
+		barColorRGBA: RGBColorI;
+		chartHeading?: string;
+		headerLeftCustomElement?: React.ReactNode;
+	};
+	currencyProps?: {
+		symbol?: string;
+		isInternationalStore?: boolean;
+	};
+	showTotal?: boolean;
+}
+
+export type { AxisDetailsI, ChartHeadingI, RGBColorI, VerticalGraphI };

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../assets/icons/ChartBar.svg.js"),a=require("../../../../assets/icons/ChartPie.svg.js"),o=require("../../../../assets/icons/maximize.svg.js"),i=require("chart.js"),r=require("chartjs-plugin-datalabels"),s=require("react"),l=require("react-chartjs-2"),n=require("../../../icon-button/IconButton.js"),c=require("../../../modals/styledModal.js"),d=require("../../../TypographyStyle.js"),p=require("../../../../constants/Theme.js"),u=require("./VerticalGraph.styles.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=x(r),g=x(s);i.Chart.register(i.CategoryScale,i.LinearScale,i.BarElement,i.Tooltip,h.default);const y=g.default.lazy((()=>Promise.resolve().then((function(){return require("../Pie/PieChartAnalytics.js")})).then((e=>({default:e.PieChartAnalytics})))));exports.VerticalGraph=i=>{const[r,x]=s.useState(!1),[h,g]=s.useState(!1),[C,b]=s.useState();s.useEffect((()=>{const e=[];h&&(i.popupData?.xAxis.data.forEach(((t,a)=>{e.push({name:t.toString(),count:Number(i.popupData?.yAxis.data[a])||0})})),b(e))}),[h,i.popupData?.xAxis.data,i.popupData?.yAxis.data]);const f=[250,1e3,800,1500,300,600],S=-1===i.yAxis.data.findIndex((e=>0!==e)),A=-1===i.popupData?.yAxis.data.findIndex((e=>0!==e)),j={min:0,max:2e3,stepSize:200},O={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!S,callbacks:{label:i.yAxis.toolTipCallback}},datalabels:{display:i.showTotal??!1,anchor:"end",align:"end",clamp:!0,color:p.COLORS.content.secondary}},scales:{x:{title:{display:!!i.xAxis.title,text:i.xAxis.title,color:i.xAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{display:!1,borderColor:p.COLORS.background.base},ticks:{fontSize:p.FONTS.caption.fontSize,color:i.yAxis.labelColor??p.COLORS.content.secondary}},y:{title:{display:!!i.yAxis.title,text:i.yAxis.title,color:i.yAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{borderColor:"white",color:p.COLORS.background.base},ticks:{callback:i.yAxis.ticksCallback,fontSize:p.FONTS.caption.fontSize,color:i.xAxis.labelColor??p.COLORS.content.secondary,...S?j:{}}}},maintainAspectRatio:!1},k={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!A,callbacks:{label:i.yAxis.toolTipCallback}},datalabels:{display:i.showTotal??!1,anchor:"end",align:"end",clamp:!0,color:p.COLORS.content.secondary}},scales:{x:{title:{display:!!i.popupData?.xAxis.title,text:i.popupData?.xAxis.title,color:i.popupData?.xAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{display:!1,borderColor:p.COLORS.background.base},ticks:{fontSize:p.FONTS.caption.fontSize,color:i.popupData?.yAxis.labelColor??p.COLORS.content.secondary}},y:{title:{display:!!i.popupData?.yAxis.title,text:i.popupData?.yAxis.title,color:i.popupData?.yAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{borderColor:"white",color:p.COLORS.background.base},ticks:{callback:i.popupData?.yAxis.ticksCallback,fontSize:p.FONTS.caption.fontSize,color:i.popupData?.xAxis.labelColor??p.COLORS.content.secondary,...A?j:{}}}},maintainAspectRatio:!1},m={labels:i.xAxis.data.map((e=>e.toString())),datasets:[{data:S?f:i.yAxis.data,backgroundColor:e=>{const t=i.barColorRGBA;let a=[];const o=i.xAxis.data.length;if(S)return"rgba(0,0,0,0)";if(i.isFunnel){let e=+(o>10?.1:(1/o).toFixed(2));const i=`rgba(${t.r}, ${t.g}, ${t.b}`;for(let t=1;t<o+1;t++){let o="";t>10?o=`${i},1)`:(o=`${i},${e})`,e+=.1),a.push(o)}}else{const e=`rgba(${t.r}, ${t.g}, ${t.b}, ${t.a??"1"})`;a=Array(o).fill(e)}return a},barPercentage:.4,categoryPercentage:1,borderRadius:4}]},z={labels:i.popupData?.xAxis.data.map((e=>e.toString())),datasets:[{data:A?f:i.popupData?.yAxis.data,backgroundColor:e=>{const t=i.barColorRGBA;let a=[];const o=i.popupData?.xAxis.data.length||0;if(S)return"rgba(0,0,0,0)";if(i.isFunnel){let e=+(o>10?.1:(1/o).toFixed(2));const i=`rgba(${t.r}, ${t.g}, ${t.b}`;for(let t=1;t<o+1;t++){let o="";t>10?o=`${i},1)`:(o=`${i},${e})`,e+=.1),a.push(o)}}else{const e=`rgba(${t.r}, ${t.g}, ${t.b}, ${t.a??"1"})`;a=Array(o).fill(e)}return a},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return e.jsxs(u.GraphContainerWrapper,{padding:i.outerPadding,children:[i.chartHeading&&e.jsx("div",{style:{marginBottom:24},children:e.jsx(d.TitleMedium,{color:i.chartHeading.color??p.COLORS.content.secondary,children:i.chartHeading.heading})}),e.jsxs("div",{style:{display:"flex",justifyContent:"flex-end"},children:[i.showConvertToPieChart&&e.jsx(n.IconButton,{Icon:a.default,onClick:()=>{g(!0),x(!0)}}),i.allowChartPopup&&e.jsx(n.IconButton,{Icon:o.default,onClick:()=>{x(!0)}})]}),e.jsx("div",{style:{height:i.graphCanvasHeight??500},children:e.jsx(l.Bar,{options:O,data:m})}),r&&e.jsxs(c.StyledModal,{open:r,onClose:()=>{x(!1),g(!1)},closeOnOutsideClick:!0,headingTitle:i.popupData?.chartHeading,width:"75%",headerRightCustomElement:i.showConvertToPieChart?h?e.jsx(n.IconButton,{Icon:t.default,onClick:()=>{g(!1)}}):e.jsx(n.IconButton,{Icon:a.default,onClick:()=>{g(!0)}}):null,headerLeftCustomElement:i.popupData?.headerLeftCustomElement,children:[h&&C&&e.jsx("div",{style:{height:i.graphCanvasHeight??500,padding:"24px"},children:e.jsx(s.Suspense,{fallback:e.jsx("div",{children:"Loading..."}),children:e.jsx(y,{slices:C,size:i.pieChartSize,hideTitle:!0,currencyProps:i.currencyProps})})}),!h&&e.jsx("div",{style:{height:i.graphCanvasHeight??500},children:e.jsx(l.Bar,{options:k,data:z})})]})]})};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.styles.js

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=t(e).default.div`
+	background-color: ${r.COLORS.surface.standard};
+	padding: ${e=>e.padding??"24px"};
+`;exports.GraphContainerWrapper=n;

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.d.ts

@@ -0,0 +1,35 @@
+import React__default, { ReactNode } from 'react';
+
+declare enum HEAT_GRADING_TYPE {
+    ABSOLUTE = 0,
+    RELATIVE = 1
+}
+interface HeatMapInputInterface {
+    title: string;
+    xLabels: string[];
+    yLabels: string[];
+    values: number[][];
+    heatType: HEAT_GRADING_TYPE;
+    absolutHeatValues?: number[];
+    hideXLabels?: boolean;
+    customComponent?: ReactNode;
+    heatBoxWidth?: number;
+    heatBoxHeight?: number;
+    isLooseFit?: boolean;
+}
+declare enum HEAT {
+    LOW = 0,
+    MEDIUM = 1,
+    HIGH = 2,
+    HIGHEST = 3
+}
+declare const HEAT_COLORS: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+};
+declare const HeatMap: React__default.FC<HeatMapInputInterface>;
+
+export { HEAT, HEAT_COLORS, HEAT_GRADING_TYPE, HeatMap };
+export type { HeatMapInputInterface };

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("../../../tooltips/Tooltip.js"),s=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),a=require("./HeatMapStyled.js"),i=(e=>(e[e.ABSOLUTE=0]="ABSOLUTE",e[e.RELATIVE=1]="RELATIVE",e))(i||{}),l=(e=>(e[e.LOW=0]="LOW",e[e.MEDIUM=1]="MEDIUM",e[e.HIGH=2]="HIGH",e[e.HIGHEST=3]="HIGHEST",e))(l||{});const n={0:"#EBDBFF",1:"#D2AEFF",2:"#9E77ED",3:"#5E07BB"};exports.HEAT=l,exports.HEAT_COLORS=n,exports.HEAT_GRADING_TYPE=i,exports.HeatMap=({title:i,xLabels:l,yLabels:c,values:h,heatType:x,absolutHeatValues:d,hideXLabels:j,customComponent:p,heatBoxWidth:B,heatBoxHeight:H,isLooseFit:y})=>{const[u,m]=t.useState(),E=y?{display:"flex",justifyContent:"center",alignItems:"center"}:{};return t.useEffect((()=>{const e=Math.max(...h.flat()),t=Math.min(...h.flat());m(h.map((o=>o.map((o=>((e,t,o,s,r)=>{if(0===t)return e<=o[0]?0:e<=o[1]?1:e<=o[2]?2:3;{const t=(r-s)/4;return e<=s+t?0:e<=s+2*t?1:e<=s+3*t?2:3}})(o,x,d||[],t,e))))))}),[h,d]),u?e.jsxs(a.HeatBoxStyled,{isLooseFit:y,children:[e.jsxs("div",{className:"top-container",children:[e.jsxs("div",{className:"top-container__heading",children:[e.jsx(s.TitleMedium,{style:{color:r.COLORS.content.primary},children:i}),p]}),e.jsxs("div",{className:"top-container__legend",children:[e.jsx(s.Caption,{style:{color:r.COLORS.content.secondary},children:"Less"}),e.jsx(a.HeatBox,{heatBoxWidth:B,heatBoxHeight:H,color:n[0]}),e.jsx(a.HeatBox,{heatBoxWidth:B,heatBoxHeight:H,color:n[1]}),e.jsx(a.HeatBox,{heatBoxWidth:B,heatBoxHeight:H,color:n[2]}),e.jsx(a.HeatBox,{heatBoxWidth:B,heatBoxHeight:H,color:n[3]}),e.jsx(s.Caption,{style:{color:r.COLORS.content.secondary},children:"More"})]})]}),e.jsx("table",{style:E,children:e.jsxs("tbody",{children:[c.map(((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx(s.BodyTiny,{style:{color:r.COLORS.content.placeholder},children:t})}),l.map(((t,s)=>e.jsx("td",{children:e.jsx(o.Tooltip,{body:h[i][s].toString(),placement:"bottom",children:e.jsx(a.HeatBox,{color:n[u[i][s]],heatBoxWidth:B,heatBoxHeight:H})})},t)))]},t))),!j&&e.jsxs("tr",{children:[e.jsx("th",{}),l.map(((t,o)=>e.jsx("th",{children:e.jsx(s.BodyTiny,{style:{color:r.COLORS.content.placeholder},children:t})},t)))]})]})})]}):e.jsx(e.Fragment,{})};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMapStyled.js

@@ -0,0 +1,38 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@emotion/styled"));const o=t.default.div`
+	width: ${e=>e.isLooseFit?"100%":"fit-content"};
+	.top-container {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-bottom: 16px;
+
+		&__heading {
+			display: flex;
+			flex-direction: row;
+			gap: 8px;
+			align-items: center;
+			justify-content: center;
+		}
+
+		&__legend {
+			display: flex;
+			flex-direction: row;
+			gap: 6px;
+			align-items: center;
+		}
+	}
+
+	.box {
+		width: 74px;
+		height: 14px;
+		border-radius: 2px;
+		margin: 2px;
+		background-color: ${e=>e.color};
+	}
+`,i=t.default.div`
+	width: ${e=>e.heatBoxWidth?e.heatBoxWidth:24}px;
+	height: ${e=>e.heatBoxHeight?e.heatBoxHeight:24}px;
+	border-radius: 2px;
+	margin: 2px;
+	background-color: ${e=>e.color};
+`;exports.HeatBox=i,exports.HeatBoxStyled=o;

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMapVertical.d.ts

@@ -0,0 +1,20 @@
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
+import React__default from 'react';
+
+interface HeatMapVerticalInputInterface {
+    title: string;
+    xLabels: string[];
+    yLabels: string[];
+    values: number[][];
+    absolutHeatValues: number[];
+    hideXLabels?: boolean;
+}
+declare const HeatMapVertical: React__default.FC<HeatMapVerticalInputInterface>;
+declare const HeatBoxStyled: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React__default.ElementType<any> | undefined;
+}, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+export { HeatBoxStyled, HeatMapVertical };
+export type { HeatMapVerticalInputInterface };

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMapVertical.js

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@emotion/styled"),r=require("react"),i=require("../../../tooltips/Tooltip.js"),o=require("../../../TypographyStyle.js"),l=require("../../../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(t);const d={0:"#EBDBFF",1:"#D2AEFF",2:"#9E77ED",3:"#5E07BB"},a=s.default.div`
+	height: 7px;
+	border-radius: 1px;
+	background-color: ${e=>e.color};
+`,c=s.default.div`
+	width: 58px;
+	height: 12px;
+	border-radius: 2px;
+	background-color: ${e=>e.color};
+`,x=s.default.div`
+	width: 100%;
+	.top-container {
+		display: flex;
+		flex-direction: row;
+		justify-content: end;
+		margin-bottom: 16px;
+
+		&__legend {
+			display: flex;
+			flex-direction: row;
+			gap: 4px;
+			align-items: center;
+		}
+	}
+
+	.heat-row {
+		display: flex;
+		height: 9px;
+		gap: 4px;
+		align-items: center;
+	}
+`;exports.HeatBoxStyled=x,exports.HeatMapVertical=({xLabels:t,yLabels:n,values:s,absolutHeatValues:h})=>{const[p,y]=r.useState();return r.useEffect((()=>{y(s.map((e=>e.map((e=>((e,t)=>e<=t[0]?0:e<=t[1]?1:e<=t[2]?2:3)(e,h||[]))))))}),[s,h]),p?e.jsxs(x,{children:[e.jsx("div",{className:"top-container",children:e.jsxs("div",{children:[e.jsxs("div",{className:"top-container__legend",children:[e.jsx(c,{color:d[0]}),e.jsx(c,{color:d[1]}),e.jsx(c,{color:d[2]}),e.jsx(c,{color:d[3]})]}),e.jsxs("div",{className:"top-container__legend",children:[e.jsx(o.BodyCaption,{color:l.COLORS.content.secondary,style:{width:56,margin:3,textAlign:"right"},children:h[0]}),e.jsx(o.BodyCaption,{color:l.COLORS.content.secondary,style:{width:56,margin:3,textAlign:"right"},children:h[1]}),e.jsx(o.BodyCaption,{color:l.COLORS.content.secondary,style:{width:56,margin:3,textAlign:"right"},children:h[2]}),e.jsx(o.BodyCaption,{color:l.COLORS.content.secondary,style:{width:56,margin:3,textAlign:"right"},children:`${h[2]}+`})]})]})}),e.jsxs("div",{style:{width:"100%"},children:[n.map(((r,n)=>e.jsxs("div",{className:"heat-row",children:[e.jsx("div",{style:{flex:.5},children:e.jsx(o.BodyTiny,{style:{color:l.COLORS.content.secondary,textAlign:"right",marginRight:8},children:r})}),t.map(((t,r)=>e.jsx("div",{style:{flex:1},children:e.jsx(i.Tooltip,{body:s[n][r].toString(),placement:"bottom",children:e.jsx(a,{color:d[p[n][r]]})})},t)))]},r))),e.jsxs("div",{className:"heat-row",style:{marginTop:12},children:[e.jsx("div",{style:{flex:.5}}),t.map((t=>e.jsx("div",{style:{flex:1},children:e.jsx(o.BodyTiny,{style:{color:l.COLORS.content.secondary,textAlign:"center"},children:t})},t)))]})]})]}):e.jsx(e.Fragment,{})};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/linearChipGroupedChart/Chip.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),i=require("./LinearChipGroupedChart.styled.js");exports.Chip=({type:n,text:o,value:s,formatVal:a})=>{const l="positive"===n?r.COLORS.content.positive:"negative"===n?r.COLORS.content.negative:r.COLORS.content.warning;return e.jsxs(i.StyledChip,{type:n,children:[e.jsx(t.BodyPrimary,{color:l,children:o}),e.jsx(t.TitleMedium,{color:l,children:a?new Intl.NumberFormat("en-IN",{}).format(s):s})]})};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/linearChipGroupedChart/HorinzontalBar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../constants/Theme.js"),t=require("../utils/calcPercentage.js"),i=require("./LinearChipGroupedChart.styled.js");exports.HorinzontalBar=({positive:a,negative:n,neutral:o})=>{const[s,u,c]=t.calculatePercentage(a,o,n);return e.jsxs(i.StyledBarContainer,{children:[e.jsx("div",{style:{height:"100%",width:`${s}%`,backgroundColor:r.COLORS.background.positive.vibrant}}),e.jsx("div",{style:{height:"100%",width:`${u}%`,backgroundColor:r.COLORS.background.warning.vibrant}}),e.jsx("div",{style:{height:"100%",width:`${c}%`,backgroundColor:r.COLORS.background.negative.vibrant}})]})};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.d.ts

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { LineChartProps } from '../LineChart/LineChart.js';
+
+type LinearChipGroupedChartProps = {
+    lineChartOption: LineChartProps;
+    overallValue: number;
+    requestSent: number;
+    responses: number;
+    chipValues: {
+        positive: {
+            text: string;
+            val: number;
+        };
+        neutral: {
+            text: string;
+            val: number;
+        };
+        negative: {
+            text: string;
+            val: number;
+        };
+    };
+    name: string;
+    separator?: boolean;
+    formatVal?: boolean;
+};
+declare const LinearChipGroupedChart: React__default.FC<LinearChipGroupedChartProps>;
+
+export { LinearChipGroupedChart };
+export type { LinearChipGroupedChartProps };

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react-bootstrap");var t=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),n=require("../LineChart/LineChart.js"),a=require("./Chip.js"),i=require("./HorinzontalBar.js"),s=require("./LinearChipGroupedChart.styled.js");exports.LinearChipGroupedChart=({separator:o,name:l,overallValue:c,requestSent:p,responses:d,chipValues:u,lineChartOption:v,formatVal:h})=>e.jsxs(s.Container,{separator:o,children:[e.jsxs(s.Row,{style:{alignItems:"center",justifyContent:"space-between"},children:[e.jsxs("div",{children:[e.jsx(t.TitleRegular,{color:r.COLORS.content.secondary,children:l}),e.jsx(t.TitleLarge,{color:void 0===c||0===c?r.COLORS.content.secondary:c<0?r.COLORS.content.negative:r.COLORS.content.positive,children:h?new Intl.NumberFormat("en-IN",{}).format(c):c})]}),e.jsxs(s.Column,{style:{alignItems:"flex-end"},children:[e.jsxs(t.BodySecondary,{color:r.COLORS.content.secondary,style:{marginBottom:2},children:["Requests sent: ",p]}),e.jsxs(t.BodySecondary,{color:r.COLORS.content.secondary,children:["Responses: ",d]})]})]}),e.jsxs(s.Row,{style:{marginTop:8,gap:16},children:[e.jsx(a.Chip,{formatVal:h,type:"positive",text:u.positive.text,value:u.positive.val}),e.jsx(a.Chip,{formatVal:h,type:"neutral",text:u.neutral.text,value:u.neutral.val}),e.jsx(a.Chip,{formatVal:h,type:"negative",text:u.negative.text,value:u.negative.val})]}),e.jsx("div",{style:{marginTop:16,width:"100%"},children:e.jsx(i.HorinzontalBar,{positive:u.positive.val,neutral:u.neutral.val,negative:u.negative.val})}),e.jsx("div",{style:{marginTop:28,width:"100%"},children:e.jsx(n.LineChart,{...v,maintainAspectRatio:!0})})]});

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.styled.js

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled"),t=require("../../../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e);const o=r.default.div`
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 16px 24px;
+	border-right: ${e=>e.separator?1:0}px solid
+		${t.COLORS.stroke.primary};
+`,d=r.default.div`
+	display: flex;
+	flex-direction: row;
+`,l=r.default.div`
+	display: flex;
+	flex-direction: column;
+`,a=r.default.div`
+	padding-top: 8px;
+	padding-bottom: 8px;
+	border-radius: 4px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	flex: 1;
+	background: ${e=>"positive"===e.type?t.COLORS.background.positive.light:"negative"===e.type?t.COLORS.background.negative.light:t.COLORS.background.warning.light};
+`,n=r.default.div`
+	border-radius: 4px;
+	width: 100%;
+	height: 8px;
+	background-color: ${t.COLORS.surface.hovered};
+	display: flex;
+	flex-direction: row;
+	overflow: hidden;
+`;exports.Column=l,exports.Container=o,exports.Row=d,exports.StyledBarContainer=n,exports.StyledChip=a;

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/utils/calcPercentage.d.ts

@@ -0,0 +1,22 @@
+declare function calculatePercentage(a: number, b: number, c: number): number[];
+declare const truncateValueToK: (value: number) => string;
+declare const truncateValueTo10K: (value: number) => string;
+declare const truncateValueToL: (value: number) => string;
+declare const truncateValueToC: (value: number) => string;
+declare const truncateValueToA: (value: number) => string;
+declare const truncateValueToM: (value: number) => string;
+declare const truncateValueToB: (value: number) => string;
+declare const truncateValueToT: (value: number) => string;
+declare const roundNumber: (value: number, noOfDigits?: number) => number;
+declare const truncateValueForInternationalStore: (value: number) => string | number;
+declare const truncateValueForIndianStore: (value: number) => string | number;
+declare enum TruncateValue {
+    ONE_LAKH = 100000,
+    ONE_CRORE = 10000000,
+    ONE_ARAB = 1000000000,
+    ONE_MILLION = 1000000,
+    ONE_BILLION = 1000000000,
+    ONE_TRILLION = 1000000000000
+}
+
+export { TruncateValue, calculatePercentage, roundNumber, truncateValueForIndianStore, truncateValueForInternationalStore, truncateValueTo10K, truncateValueToA, truncateValueToB, truncateValueToC, truncateValueToK, truncateValueToL, truncateValueToM, truncateValueToT };

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/utils/calcPercentage.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=e=>{if(Math.abs(e)<1e3)return N(e).toString();return N(e/1e3)+"K"},t=e=>N(Number(e)/1e5)+"L",r=e=>N(Number(e)/1e7)+"C",u=e=>N(Number(e)/1e9)+"A",o=e=>N(Number(e)/1e6)+"M",a=e=>N(Number(e)/1e9)+"B",n=e=>N(Number(e)/1e12)+"T",N=(e,t=2)=>{const r=10*t;return Math.round((e+Number.EPSILON)*r)/r};var s=(e=>(e[e.ONE_LAKH=1e5]="ONE_LAKH",e[e.ONE_CRORE=1e7]="ONE_CRORE",e[e.ONE_ARAB=1e9]="ONE_ARAB",e[e.ONE_MILLION=1e6]="ONE_MILLION",e[e.ONE_BILLION=1e9]="ONE_BILLION",e[e.ONE_TRILLION=1e12]="ONE_TRILLION",e))(s||{});exports.TruncateValue=s,exports.calculatePercentage=function(e,t,r){const u=e+t+r;return[e/u*100||0,t/u*100||0,r/u*100||0]},exports.roundNumber=N,exports.truncateValueForIndianStore=o=>o<1e3?N(o):o>999&&o<1e5?e(o):o>99999&&o<1e7?t(o):o>9999999&&o<1e9?r(o):u(o),exports.truncateValueForInternationalStore=t=>t<1e3?N(t):t>999&&t<1e6?e(t):t>999999&&t<1e9?o(t):t>999999999&&t<1e12?a(t):n(t),exports.truncateValueTo10K=e=>{if(Math.abs(e)<1e4)return N(e).toString();return N(Number(e)/1e3)+"K"},exports.truncateValueToA=u,exports.truncateValueToB=a,exports.truncateValueToC=r,exports.truncateValueToK=e,exports.truncateValueToL=t,exports.truncateValueToM=o,exports.truncateValueToT=n;