@bikdotai/bik-component-library 0.0.687-beta.4 → 0.0.687-beta.6

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

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

package/dist/esm/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/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.styles.js

@@ -1,6 +1,6 @@
-import e from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const n=e.div`
-	background-color: ${r.surface.standard};
-	padding: ${e=>{var r;return null!=(r=e.padding)?r:"24px"}};
+import e from"styled-components";import{COLORS as p}from"../../../../constants/Theme.js";const r=e.div`
+	background-color: ${p.surface.standard};
+	padding: ${e=>e.padding??"24px"};
 	border: none;
 	width: 100%;
 
@@ -8,7 +8,7 @@ import e from"styled-components";import{COLORS as r}from"../../../../constants/T
 		width: 100%;
 		display: flex;
 		gap: 24px;
-		height: ${e=>{var r;return null!=(r=e.chartWrapperHeight)?r:"100%"}};
+		height: ${e=>e.chartWrapperHeight??"100%"};
 		flex-direction: ${e=>e.isFunnel||e.customLegend?"column":"row"};
 	}
 
@@ -28,8 +28,8 @@ import e from"styled-components";import{COLORS as r}from"../../../../constants/T
 	.legend__set {
 		margin-top: 16px;
 	}
-`,p=e.div`
+`,t=e.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`;export{n as GraphContainerWrapper,p as HeaderIconWrapper};
+`;export{r as GraphContainerWrapper,t as HeaderIconWrapper};

package/dist/esm/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/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js

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

package/dist/esm/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/esm/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/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js

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

package/dist/esm/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/esm/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/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.js

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

package/dist/esm/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/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js

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

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

@@ -1,4 +1,4 @@
-import o from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const n=o.div`
-	background-color: ${r.surface.standard};
-	padding: ${o=>{var r;return null!=(r=o.padding)?r:"24px"}};
+import o from"styled-components";import{COLORS as d}from"../../../../constants/Theme.js";const n=o.div`
+	background-color: ${d.surface.standard};
+	padding: ${o=>o.padding??"24px"};
 `;export{n as GraphContainerWrapper};

package/dist/esm/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/esm/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js

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

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

@@ -1 +1,38 @@
-import c from"@emotion/styled/base";const d=c("div","production"===process.env.NODE_ENV?{target:"e1p0nfj71"}:{target:"e1p0nfj71",label:"HeatBoxStyled"})("width:",(c=>c.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:",(c=>c.color),";}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYXRNYXBTdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV1QyIsImZpbGUiOiJIZWF0TWFwU3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5leHBvcnQgY29uc3QgSGVhdEJveFN0eWxlZCA9IHN0eWxlZC5kaXZgXG5cdHdpZHRoOiAkeyhwcm9wcykgPT4gcHJvcHMuaXNMb29zZUZpdCA/IFwiMTAwJVwiIDogXCJmaXQtY29udGVudFwifTtcblx0LnRvcC1jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdFx0bWFyZ2luLWJvdHRvbTogMTZweDtcblxuXHRcdCZfX2hlYWRpbmcge1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0XHRnYXA6IDhweDtcblx0XHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdFx0XHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0XHR9XG5cblx0XHQmX19sZWdlbmQge1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0XHRnYXA6IDZweDtcblx0XHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdFx0fVxuXHR9XG5cblx0LmJveCB7XG5cdFx0d2lkdGg6IDc0cHg7XG5cdFx0aGVpZ2h0OiAxNHB4O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRtYXJnaW46IDJweDtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyhwcm9wcykgPT4gcHJvcHMuY29sb3J9O1xuXHR9XG5gO1xuZXhwb3J0IGNvbnN0IEhlYXRCb3ggPSBzdHlsZWQuZGl2YFxuXHR3aWR0aDogJHsocHJvcHMpID0+IHByb3BzLmhlYXRCb3hXaWR0aCA/IHByb3BzLmhlYXRCb3hXaWR0aCA6IDI0fXB4O1xuXHRoZWlnaHQ6ICR7KHByb3BzKSA9PiBwcm9wcy5oZWF0Qm94SGVpZ2h0ID8gcHJvcHMuaGVhdEJveEhlaWdodCA6IDI0fXB4O1xuXHRib3JkZXItcmFkaXVzOiAycHg7XG5cdG1hcmdpbjogMnB4O1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyhwcm9wcykgPT4gcHJvcHMuY29sb3J9O1xuYDtcbiJdfQ== */")),X=c("div","production"===process.env.NODE_ENV?{target:"e1p0nfj70"}:{target:"e1p0nfj70",label:"HeatBox"})("width:",(c=>c.heatBoxWidth?c.heatBoxWidth:24),"px;height:",(c=>c.heatBoxHeight?c.heatBoxHeight:24),"px;border-radius:2px;margin:2px;background-color:",(c=>c.color),";"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYXRNYXBTdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDaUMiLCJmaWxlIjoiSGVhdE1hcFN0eWxlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IGNvbnN0IEhlYXRCb3hTdHlsZWQgPSBzdHlsZWQuZGl2YFxuXHR3aWR0aDogJHsocHJvcHMpID0+IHByb3BzLmlzTG9vc2VGaXQgPyBcIjEwMCVcIiA6IFwiZml0LWNvbnRlbnRcIn07XG5cdC50b3AtY29udGFpbmVyIHtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0anVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuXHRcdG1hcmdpbi1ib3R0b206IDE2cHg7XG5cblx0XHQmX19oZWFkaW5nIHtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHRcdFx0Z2FwOiA4cHg7XG5cdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdFx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdFx0fVxuXG5cdFx0Jl9fbGVnZW5kIHtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHRcdFx0Z2FwOiA2cHg7XG5cdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdH1cblx0fVxuXG5cdC5ib3gge1xuXHRcdHdpZHRoOiA3NHB4O1xuXHRcdGhlaWdodDogMTRweDtcblx0XHRib3JkZXItcmFkaXVzOiAycHg7XG5cdFx0bWFyZ2luOiAycHg7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IHByb3BzLmNvbG9yfTtcblx0fVxuYDtcbmV4cG9ydCBjb25zdCBIZWF0Qm94ID0gc3R5bGVkLmRpdmBcblx0d2lkdGg6ICR7KHByb3BzKSA9PiBwcm9wcy5oZWF0Qm94V2lkdGggPyBwcm9wcy5oZWF0Qm94V2lkdGggOiAyNH1weDtcblx0aGVpZ2h0OiAkeyhwcm9wcykgPT4gcHJvcHMuaGVhdEJveEhlaWdodCA/IHByb3BzLmhlYXRCb3hIZWlnaHQgOiAyNH1weDtcblx0Ym9yZGVyLXJhZGl1czogMnB4O1xuXHRtYXJnaW46IDJweDtcblx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IHByb3BzLmNvbG9yfTtcbmA7XG4iXX0= */"));export{X as HeatBox,d as HeatBoxStyled};
+import e from"@emotion/styled";const t=e.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=e.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};
+`;export{i as HeatBox,t as HeatBoxStyled};

package/dist/esm/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 };