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

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

@@ -1,90 +1,87 @@
-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 };
+/// <reference types="react" />
+import { FontSpec, TooltipItem } from 'chart.js';
+export interface AxisDetailsI {
+    title?: string;
+    titleColor?: string;
+    data: XAxisDataI[] | string[];
+    labelColor?: string;
+    stepSize?: number;
+    stacked?: boolean;
+}
+export interface XAxisDataI {
+    name: string;
+    value: number;
+}
+export interface RGBColorI {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+export interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+export declare enum COLOR_SCHEMA {
+    BRAND = "brand",
+    PASTEL = "pastel"
+}
+export declare enum GRAPH_ORIENTATION {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export 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[];
+}

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

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

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

@@ -0,0 +1,7 @@
+export declare const GraphContainerWrapper: import("styled-components").StyledComponent<"div", any, {
+    padding?: string | undefined;
+    chartWrapperHeight?: string | undefined;
+    isFunnel?: boolean | undefined;
+    customLegend?: boolean | undefined;
+}, never>;
+export declare const HeaderIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,6 +1,6 @@
-"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`
+"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 a=t(e);const n=a.default.div`
 	background-color: ${r.COLORS.surface.standard};
-	padding: ${e=>e.padding??"24px"};
+	padding: ${e=>{var r;return null!==(r=e.padding)&&void 0!==r?r:"24px"}};
 	border: none;
 	width: 100%;
 
@@ -8,7 +8,7 @@
 		width: 100%;
 		display: flex;
 		gap: 24px;
-		height: ${e=>e.chartWrapperHeight??"100%"};
+		height: ${e=>{var r;return null!==(r=e.chartWrapperHeight)&&void 0!==r?r:"100%"}};
 		flex-direction: ${e=>e.isFunnel||e.customLegend?"column":"row"};
 	}
 
@@ -28,8 +28,8 @@
 	.legend__set {
 		margin-top: 16px;
 	}
-`,n=p.default.div`
+`,p=a.default.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`;exports.GraphContainerWrapper=a,exports.HeaderIconWrapper=n;
+`;exports.GraphContainerWrapper=n,exports.HeaderIconWrapper=p;

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

@@ -1,6 +1,2 @@
-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 };
+import { StackedBarDistributionGraphI } from './StackedBarDistributionChart.model';
+export declare const StackedBarDistributionChart: (props: StackedBarDistributionGraphI) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +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}`)))})]})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("chart.js"),a=require("chartjs-plugin-datalabels"),t=require("react"),o=require("react-chartjs-2"),n=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),r=require("../utils/calcPercentage.js"),s=require("./StackedBarChart.styles.js"),d=require("./StackedBarDistributionChart.model.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(a);l.Chart.register(l.CategoryScale,l.LinearScale,l.BarElement,l.Tooltip,l.Legend,u.default),l.Chart.defaults.plugins.datalabels.display=!1;exports.StackedBarDistributionChart=l=>{var a,c,u,O,v,g,T,h,b,p,A,I,R,N,y,C,F,f,S,j,E,x,H,_,L,m,k,P,B,D,G,Z;const[w,z]=t.useState([]),[q,V]=t.useState(),M=!l.data.filter((e=>!!e.value)).length,W=l.colorMatrix&&l.colorMatrix.length?l.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"]],Y={min:0,max:200,stepSize:20},U={min:l.minValue,max:l.maxValue,stepSize:l.valuesStepSize},$={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:M?0:null!==(a=l.barThickness)&&void 0!==a?a:100},J={plugins:{legend:{display:!1},tooltip:{enabled:!M,callbacks:{label:null===(c=l.tooltipConfig)||void 0===c?void 0:c.labelCallback,footer:null===(u=l.tooltipConfig)||void 0===u?void 0:u.footerCallback},footerFont:null===(v=null===(O=l.tooltipConfig)||void 0===O?void 0:O.footerStyles)||void 0===v?void 0:v.footerFont},datalabels:{display:null!==(g=!M&&l.showTotal)&&void 0!==g&&g,anchor:"end",align:"end",clamp:!0,formatter:(e,a)=>{var t;const o=a.datasetIndex,n=a.chart.data.datasets;if(o!==n.length-1)return"";const i=a.dataIndex;let s=0;for(let e=0;e<n.length;e++)s+=null!==(t=n[e].data[i])&&void 0!==t?t:0;return s?l.isInternationalStore?r.truncateValueForInternationalStore(s):r.truncateValueForIndianStore(s):""},color:i.COLORS.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",layout:{padding:{right:l.showTotal&&l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:l.showTotal&&l.orientation!=d.GRAPH_ORIENTATION.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(T=l.valueTitle)||void 0===T?void 0:T.heading:null===(h=l.labelTitle)||void 0===h?void 0:h.heading),text:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(b=l.valueTitle)||void 0===b?void 0:b.heading:null===(p=l.labelTitle)||void 0===p?void 0:p.heading,color:null!==(R=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(A=l.valueTitle)||void 0===A?void 0:A.color:null===(I=l.labelTitle)||void 0===I?void 0:I.color)&&void 0!==R?R:i.COLORS.content.secondary,font:{size:i.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL,color:i.COLORS.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:i.FONTS.caption.fontSize,color:null!==(C=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(N=l.labelTitle)||void 0===N?void 0:N.color:null===(y=l.valueTitle)||void 0===y?void 0:y.color)&&void 0!==C?C:i.COLORS.content.secondary},l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?M?Y:U:{}),{callback:(e,a)=>{var t,o;return l.orientation!==d.GRAPH_ORIENTATION.HORIZONTAL?null!==(o=null===(t=null==q?void 0:q.labels)||void 0===t?void 0:t[a])&&void 0!==o?o:"":"number"!=typeof e?e:l.isInternationalStore?r.truncateValueForInternationalStore(e):r.truncateValueForIndianStore(e)}}),stacked:!0},y:{title:{display:!!(l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(F=l.labelTitle)||void 0===F?void 0:F.heading:null===(f=l.valueTitle)||void 0===f?void 0:f.heading),text:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(S=l.labelTitle)||void 0===S?void 0:S.heading:null===(j=l.valueTitle)||void 0===j?void 0:j.heading,color:null!==(H=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(E=l.labelTitle)||void 0===E?void 0:E.color:null===(x=l.valueTitle)||void 0===x?void 0:x.color)&&void 0!==H?H:i.COLORS.content.secondary,font:{size:i.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation!==d.GRAPH_ORIENTATION.HORIZONTAL,color:i.COLORS.background.base},ticks:Object.assign(Object.assign({fontSize:i.FONTS.caption.fontSize,color:null!==(m=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(_=l.valueTitle)||void 0===_?void 0:_.color:null===(L=l.labelTitle)||void 0===L?void 0:L.color)&&void 0!==m?m:i.COLORS.content.secondary},l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?{}:M?Y:U),{callback:(e,a)=>{var t,o;return l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null!==(o=null===(t=null==q?void 0:q.labels)||void 0===t?void 0:t[a])&&void 0!==o?o:"":"number"!=typeof e?e:l.isInternationalStore?r.truncateValueForInternationalStore(e):r.truncateValueForIndianStore(e)}}),stacked:!0}},onClick:(e,a)=>{if(!l.onBarClick)return;const t=a[0].datasetIndex,o=a[0].index,n=e.chart.data.datasets[t].label,i=e.chart.data.labels[o];l.onBarClick(i,n)},onHover:(e,a)=>{l.onBarClick&&a.length&&(e.native.target.style.cursor="pointer")}},K=Array.from(new Set(l.data.map((e=>e.label)))),Q={labels:(X=K,X.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:M?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var X;t.useEffect((()=>{const e=[];K.forEach(((a,t)=>{const o=[],n=l.data.filter((e=>e.label===a));l.isFunnel||n.sort(((e,l)=>l.value-e.value)),n.forEach(((e,l)=>{const a=((e,l,a)=>W[e].slice(-a)[l])(t,l,n.length);o.push({color:a,label:e.stackLabel});const i=Object.assign({label:e.stackLabel,backgroundColor:a,data:Array(K.length).fill(0)},$);i.data[t]=e.value,Q.datasets.push(i)})),e.push(o)})),z(e),V(Q)}),[l.data]);const ee=t.useCallback((()=>e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:le().map((l=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:l.color}}),e.jsx(n.BodyTiny,Object.assign({color:i.COLORS.content.secondary},{children:l.label}))]}),l.label.replace(" ","_"))))}))),[w]),le=()=>{const e=[];return w.forEach(((l,a)=>{e.push({color:l[0].color,label:K[a]})})),e};if(!q)return e.jsx(e.Fragment,{});return e.jsxs(s.GraphContainerWrapper,Object.assign({style:null!==(k=l.wrapperStyle)&&void 0!==k?k:{},padding:l.outerPadding,chartWrapperHeight:l.chartWrapperHeight,isFunnel:l.isFunnel},{children:[l.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(n.TitleRegular,Object.assign({color:null!==(P=l.chartHeading.color)&&void 0!==P?P:i.COLORS.content.secondary},{children:l.chartHeading.heading}))})),e.jsxs("div",Object.assign({className:"graph__wrapper"},{children:[(null===(B=l.showLegend)||void 0===B||B)&&l.isFunnel&&ee(),e.jsx("div",Object.assign({style:{height:null!==(D=l.graphCanvasHeight)&&void 0!==D?D:500,width:null!==(G=l.graphCanvasWidth)&&void 0!==G?G:"100%",flex:1}},{children:e.jsx(o.Bar,{options:J,data:q})})),(null===(Z=l.showLegend)||void 0===Z||Z)&&!l.isFunnel&&e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:w.map(((l,a)=>e.jsx("div",Object.assign({className:"legend__set"},{children:l.map((l=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:l.color}}),e.jsx(n.BodyTiny,Object.assign({color:i.COLORS.content.secondary},{children:l.label}))]}),l.label.replace(" ","_"))))}),`Legend_set_${a}`)))}))]}))]}))};

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

@@ -1,51 +1,48 @@
-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 };
+/// <reference types="react" />
+import { FontSpec, TooltipItem } from 'chart.js';
+export interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+export declare enum GRAPH_ORIENTATION {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export interface StackedBarDistributionGraphDataI {
+    label: string;
+    value: number;
+    stackLabel: string;
+}
+export 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;
+}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const GraphContainerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

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

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

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

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

@@ -1,49 +1,3 @@
-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 };
+import React from 'react';
+import { VerticalGraphI } from './VerticalGraph.d';
+export declare const VerticalGraph: React.FC<VerticalGraphI>;

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

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

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

@@ -0,0 +1,3 @@
+export declare const GraphContainerWrapper: import("styled-components").StyledComponent<"div", any, {
+    padding?: string | undefined;
+}, never>;

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

@@ -1,4 +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"};
+	padding: ${e=>{var r;return null!==(r=e.padding)&&void 0!==r?r:"24px"}};
 `;exports.GraphContainerWrapper=n;