@bikdotai/bik-component-library 0.0.734-beta.3 → 0.0.735-beta.1

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

@@ -1,21 +1,21 @@
-export interface PieChartInput {
-    name: string;
-    count: number;
-    color?: string;
-    rawValue?: string;
-}
-export interface PieChartInputData {
-    slices: PieChartInput[];
-    title?: string;
-    size?: number;
-    allowChartPopup?: boolean;
-    showConvertToBarChart?: boolean;
-    truncateSlices?: number;
-    barChartXAxisTitle?: string;
-    barChartYAxisTitle?: string;
-    hideTitle?: boolean;
-    currencyProps?: {
-        symbol?: string;
-        isInternationalStore?: boolean;
-    };
-}
+export interface PieChartInput {
+    name: string;
+    count: number;
+    color?: string;
+    rawValue?: string;
+}
+export interface PieChartInputData {
+    slices: PieChartInput[];
+    title?: string;
+    size?: number;
+    allowChartPopup?: boolean;
+    showConvertToBarChart?: boolean;
+    truncateSlices?: number;
+    barChartXAxisTitle?: string;
+    barChartYAxisTitle?: string;
+    hideTitle?: boolean;
+    currencyProps?: {
+        symbol?: string;
+        isInternationalStore?: boolean;
+    };
+}

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

@@ -1,2 +1,2 @@
-import { StackedBarGraphI } from './StackedBarChart.model';
-export declare const StackedBarChart: (props: StackedBarGraphI) => import("react/jsx-runtime").JSX.Element;
+import { StackedBarGraphI } from './StackedBarChart.model';
+export declare const StackedBarChart: (props: StackedBarGraphI) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,92 +1,91 @@
-/// <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;
-    axisSuffix?: string;
-    max?: number;
-}
-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[];
-    customBarColors?: string[] /** Custom colors for individual bars in the stack */;
-    isInternationalStore?: boolean;
-    truncateBars?: number;
-    allowChartPopup?: boolean;
-    hideHeading?: boolean;
-    /** borderRadius - if number passes only the top bar of the stack will be given radius. Send object to apply border in all the bars of the stack */
-    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) => string;
-    legendsAndIconDirection?: 'row-reverse' | 'row';
-    headerIcons?: React.ReactNode[];
-    renderInHeightWiseManner?: boolean /** When true, renders smaller bars on top of larger bars */;
-}
+import { FontSpec, TooltipItem } from 'chart.js';
+export interface AxisDetailsI {
+    title?: string;
+    titleColor?: string;
+    data: XAxisDataI[] | string[];
+    labelColor?: string;
+    stepSize?: number;
+    stacked?: boolean;
+    axisSuffix?: string;
+    max?: number;
+}
+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[];
+    customBarColors?: string[] /** Custom colors for individual bars in the stack */;
+    isInternationalStore?: boolean;
+    truncateBars?: number;
+    allowChartPopup?: boolean;
+    hideHeading?: boolean;
+    /** borderRadius - if number passes only the top bar of the stack will be given radius. Send object to apply border in all the bars of the stack */
+    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) => string;
+    legendsAndIconDirection?: 'row-reverse' | 'row';
+    headerIcons?: React.ReactNode[];
+    renderInHeightWiseManner?: boolean /** When true, renders smaller bars on top of larger bars */;
+}

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

@@ -1,7 +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>;
+export declare const GraphContainerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    padding?: string;
+    chartWrapperHeight?: string;
+    isFunnel?: boolean;
+    customLegend?: boolean;
+}>> & string;
+export declare const HeaderIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,2 +1,2 @@
-import { StackedBarDistributionGraphI } from './StackedBarDistributionChart.model';
-export declare const StackedBarDistributionChart: (props: StackedBarDistributionGraphI) => import("react/jsx-runtime").JSX.Element;
+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"),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}`)))}))]}))]}))};
+"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"),d=require("./StackedBarChart.styles.js"),s=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,v,O,T,g,h,p,A,I,R,b,N,y,C,F,f,S,E,x,H,_,L,j,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===(O=null===(v=l.tooltipConfig)||void 0===v?void 0:v.footerStyles)||void 0===O?void 0:O.footerFont},datalabels:{display:null!==(T=!M&&l.showTotal)&&void 0!==T&&T,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 d=0;for(let e=0;e<n.length;e++)d+=null!==(t=n[e].data[i])&&void 0!==t?t:0;return d?l.isInternationalStore?r.truncateValueForInternationalStore(d):r.truncateValueForIndianStore(d):""},color:i.COLORS.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",layout:{padding:{right:l.showTotal&&l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:l.showTotal&&l.orientation!=s.GRAPH_ORIENTATION.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(g=l.valueTitle)||void 0===g?void 0:g.heading:null===(h=l.labelTitle)||void 0===h?void 0:h.heading),text:l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(p=l.valueTitle)||void 0===p?void 0:p.heading:null===(A=l.labelTitle)||void 0===A?void 0:A.heading,color:null!==(b=l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(I=l.valueTitle)||void 0===I?void 0:I.color:null===(R=l.labelTitle)||void 0===R?void 0:R.color)&&void 0!==b?b:i.COLORS.content.secondary,font:{size:i.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation===s.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===s.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===s.GRAPH_ORIENTATION.HORIZONTAL?M?Y:U:{}),{callback:(e,a)=>{var t,o;return l.orientation!==s.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===s.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===s.GRAPH_ORIENTATION.HORIZONTAL?null===(S=l.labelTitle)||void 0===S?void 0:S.heading:null===(E=l.valueTitle)||void 0===E?void 0:E.heading,color:null!==(_=l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(x=l.labelTitle)||void 0===x?void 0:x.color:null===(H=l.valueTitle)||void 0===H?void 0:H.color)&&void 0!==_?_:i.COLORS.content.secondary,font:{size:i.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation!==s.GRAPH_ORIENTATION.HORIZONTAL,color:i.COLORS.background.base},ticks:Object.assign(Object.assign({fontSize:i.FONTS.caption.fontSize,color:null!==(m=l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(L=l.valueTitle)||void 0===L?void 0:L.color:null===(j=l.labelTitle)||void 0===j?void 0:j.color)&&void 0!==m?m:i.COLORS.content.secondary},l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?{}:M?Y:U),{callback:(e,a)=>{var t,o;return l.orientation===s.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",{style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"},children:le().map((l=>e.jsxs("div",{className:"legend__row",children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:l.color}}),e.jsx(n.BodyTiny,{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(d.GraphContainerWrapper,{style:null!==(k=l.wrapperStyle)&&void 0!==k?k:{},padding:l.outerPadding,chartWrapperHeight:l.chartWrapperHeight,isFunnel:l.isFunnel,children:[l.chartHeading&&e.jsx("div",{style:{marginBottom:24},children:e.jsx(n.TitleRegular,{color:null!==(P=l.chartHeading.color)&&void 0!==P?P:i.COLORS.content.secondary,children:l.chartHeading.heading})}),e.jsxs("div",{className:"graph__wrapper",children:[(null===(B=l.showLegend)||void 0===B||B)&&l.isFunnel&&ee(),e.jsx("div",{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",{style:{overflowY:"scroll",display:"flex",flexDirection:"column"},children:w.map(((l,a)=>e.jsx("div",{className:"legend__set",children:l.map((l=>e.jsxs("div",{className:"legend__row",children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:l.color}}),e.jsx(n.BodyTiny,{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,48 +1,47 @@
-/// <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;
-}
+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/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.d.ts

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

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

@@ -1,7 +1,7 @@
-export declare const GraphContainerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LegendsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LegendMiddleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LegendColorBox: import("styled-components").StyledComponent<"div", any, {
-    color: string;
-}, never>;
-export declare const GraphWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GraphContainerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LegendsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LegendMiddleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LegendColorBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color: string;
+}>> & string;
+export declare const GraphWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,34 +1,34 @@
-export interface AxisDetailsI {
-    title?: string;
-    titleColor?: string;
-    data: number[] | string[];
-    labelColor?: string;
-    graphColor?: string;
-    axisSuffix?: string;
-    max?: number;
-}
-export interface ChartHeadingI {
-    heading: string;
-    color?: string;
-}
-export declare enum GRAPH_ORIENTATION {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal"
-}
-export interface VerticalBarAndLinearGraphI {
-    graphCanvasHeight?: number;
-    tickColor?: string;
-    labelColor?: string;
-    chartHeading?: ChartHeadingI;
-    xAxis: AxisDetailsI & {
-        forceShowXAxis?: boolean;
-    };
-    lineAxis: AxisDetailsI;
-    lineAxis2?: AxisDetailsI;
-    barAxis: AxisDetailsI;
-    isInternationalStore?: boolean;
-    customLegend?: boolean;
-    orientation?: GRAPH_ORIENTATION;
-    noDummyValues?: boolean;
-    pointRadius?: number;
-}
+export interface AxisDetailsI {
+    title?: string;
+    titleColor?: string;
+    data: number[] | string[];
+    labelColor?: string;
+    graphColor?: string;
+    axisSuffix?: string;
+    max?: number;
+}
+export interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+export declare enum GRAPH_ORIENTATION {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export interface VerticalBarAndLinearGraphI {
+    graphCanvasHeight?: number;
+    tickColor?: string;
+    labelColor?: string;
+    chartHeading?: ChartHeadingI;
+    xAxis: AxisDetailsI & {
+        forceShowXAxis?: boolean;
+    };
+    lineAxis: AxisDetailsI;
+    lineAxis2?: AxisDetailsI;
+    barAxis: AxisDetailsI;
+    isInternationalStore?: boolean;
+    customLegend?: boolean;
+    orientation?: GRAPH_ORIENTATION;
+    noDummyValues?: boolean;
+    pointRadius?: number;
+}

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

@@ -1,14 +1,14 @@
-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>;
+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>;