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

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

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

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

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{Chart as t,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,useEffect as v,useCallback as u}from"react";import{Bar as g}from"react-chartjs-2";import{BodyTiny as p,TitleRegular as h}from"../../../TypographyStyle.js";import{COLORS as b,FONTS as O}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as f,truncateValueForIndianStore as m}from"../utils/calcPercentage.js";import{GraphContainerWrapper as y}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as F}from"./StackedBarDistributionChart.model.js";t.register(a,i,n,r,d,s),t.defaults.plugins.datalabels.display=!1;const T=t=>{var a,i,n,r,d,s,T,A,C,j,k,x,E,H,I,N,S,L,D,R,Z,B,_,w,z,P,M,W,V,Y,U,$;const[q,G]=c([]),[J,K]=c(),Q=!t.data.filter((e=>!!e.value)).length,X=t.colorMatrix&&t.colorMatrix.length?t.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],ee={min:0,max:200,stepSize:20},le={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},oe={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:Q?0:null!==(a=t.barThickness)&&void 0!==a?a:100},te={plugins:{legend:{display:!1},tooltip:{enabled:!Q,callbacks:{label:null===(i=t.tooltipConfig)||void 0===i?void 0:i.labelCallback,footer:null===(n=t.tooltipConfig)||void 0===n?void 0:n.footerCallback},footerFont:null===(d=null===(r=t.tooltipConfig)||void 0===r?void 0:r.footerStyles)||void 0===d?void 0:d.footerFont},datalabels:{display:null!==(s=!Q&&t.showTotal)&&void 0!==s&&s,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var o;const a=l.datasetIndex,i=l.chart.data.datasets;if(a!==i.length-1)return"";const n=l.dataIndex;let r=0;for(let e=0;e<i.length;e++)r+=null!==(o=i[e].data[n])&&void 0!==o?o:0;return r?t.isInternationalStore?f(r):m(r):""},color:b.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===F.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===F.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=F.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===F.HORIZONTAL?null===(T=t.valueTitle)||void 0===T?void 0:T.heading:null===(A=t.labelTitle)||void 0===A?void 0:A.heading),text:t.orientation===F.HORIZONTAL?null===(C=t.valueTitle)||void 0===C?void 0:C.heading:null===(j=t.labelTitle)||void 0===j?void 0:j.heading,color:null!==(E=t.orientation===F.HORIZONTAL?null===(k=t.valueTitle)||void 0===k?void 0:k.color:null===(x=t.labelTitle)||void 0===x?void 0:x.color)&&void 0!==E?E:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation===F.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:O.caption.fontSize,color:null!==(N=t.orientation===F.HORIZONTAL?null===(H=t.labelTitle)||void 0===H?void 0:H.color:null===(I=t.valueTitle)||void 0===I?void 0:I.color)&&void 0!==N?N:b.content.secondary},t.orientation===F.HORIZONTAL?Q?ee:le:{}),{callback:(e,l)=>{var o,a;return t.orientation!==F.HORIZONTAL?null!==(a=null===(o=null==J?void 0:J.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:t.isInternationalStore?f(e):m(e)}}),stacked:!0},y:{title:{display:!!(t.orientation===F.HORIZONTAL?null===(S=t.labelTitle)||void 0===S?void 0:S.heading:null===(L=t.valueTitle)||void 0===L?void 0:L.heading),text:t.orientation===F.HORIZONTAL?null===(D=t.labelTitle)||void 0===D?void 0:D.heading:null===(R=t.valueTitle)||void 0===R?void 0:R.heading,color:null!==(_=t.orientation===F.HORIZONTAL?null===(Z=t.labelTitle)||void 0===Z?void 0:Z.color:null===(B=t.valueTitle)||void 0===B?void 0:B.color)&&void 0!==_?_:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation!==F.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({fontSize:O.caption.fontSize,color:null!==(P=t.orientation===F.HORIZONTAL?null===(w=t.valueTitle)||void 0===w?void 0:w.color:null===(z=t.labelTitle)||void 0===z?void 0:z.color)&&void 0!==P?P:b.content.secondary},t.orientation===F.HORIZONTAL?{}:Q?ee:le),{callback:(e,l)=>{var o,a;return t.orientation===F.HORIZONTAL?null!==(a=null===(o=null==J?void 0:J.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:t.isInternationalStore?f(e):m(e)}}),stacked:!0}},onClick:(e,l)=>{if(!t.onBarClick)return;const o=l[0].datasetIndex,a=l[0].index,i=e.chart.data.datasets[o].label,n=e.chart.data.labels[a];t.onBarClick(n,i)},onHover:(e,l)=>{t.onBarClick&&l.length&&(e.native.target.style.cursor="pointer")}},ae=Array.from(new Set(t.data.map((e=>e.label)))),ie={labels:(ne=ae,ne.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:Q?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var ne;v((()=>{const e=[];ae.forEach(((l,o)=>{const a=[],i=t.data.filter((e=>e.label===l));t.isFunnel||i.sort(((e,l)=>l.value-e.value)),i.forEach(((e,l)=>{const t=((e,l,o)=>X[e].slice(-o)[l])(o,l,i.length);a.push({color:t,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:t,data:Array(ae.length).fill(0)},oe);n.data[o]=e.value,ie.datasets.push(n)})),e.push(a)})),G(e),K(ie)}),[t.data]);const re=u((()=>e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:de().map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}))),[q]),de=()=>{const e=[];return q.forEach(((l,o)=>{e.push({color:l[0].color,label:ae[o]})})),e};if(!J)return e(o,{});return l(y,Object.assign({style:null!==(M=t.wrapperStyle)&&void 0!==M?M:{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel},{children:[t.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(h,Object.assign({color:null!==(W=t.chartHeading.color)&&void 0!==W?W:b.content.secondary},{children:t.chartHeading.heading}))})),l("div",Object.assign({className:"graph__wrapper"},{children:[(null===(V=t.showLegend)||void 0===V||V)&&t.isFunnel&&re(),e("div",Object.assign({style:{height:null!==(Y=t.graphCanvasHeight)&&void 0!==Y?Y:500,width:null!==(U=t.graphCanvasWidth)&&void 0!==U?U:"100%",flex:1}},{children:e(g,{options:te,data:J})})),(null===($=t.showLegend)||void 0===$||$)&&!t.isFunnel&&e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:q.map(((o,t)=>e("div",Object.assign({className:"legend__set"},{children:o.map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}),`Legend_set_${t}`)))}))]}))]}))};export{T as StackedBarDistributionChart};
+import{jsx as l,jsxs as e,Fragment as o}from"react/jsx-runtime";import{Chart as t,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,useEffect as v,useCallback as u}from"react";import{Bar as p}from"react-chartjs-2";import{BodyTiny as g,TitleRegular as h}from"../../../TypographyStyle.js";import{COLORS as b,FONTS as f}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as m,truncateValueForIndianStore as y}from"../utils/calcPercentage.js";import{GraphContainerWrapper as F}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as T}from"./StackedBarDistributionChart.model.js";t.register(a,i,n,r,d,s),t.defaults.plugins.datalabels.display=!1;const O=t=>{var a,i,n,r,d,s,O,A,C,k,x,E,H,I,N,S,L,D,R,Z,B,_,j,w,z,P,M,W,V,Y,U,$;const[q,G]=c([]),[J,K]=c(),Q=!t.data.filter((l=>!!l.value)).length,X=t.colorMatrix&&t.colorMatrix.length?t.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],ll={min:0,max:200,stepSize:20},el={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},ol={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:Q?0:null!==(a=t.barThickness)&&void 0!==a?a:100},tl={plugins:{legend:{display:!1},tooltip:{enabled:!Q,callbacks:{label:null===(i=t.tooltipConfig)||void 0===i?void 0:i.labelCallback,footer:null===(n=t.tooltipConfig)||void 0===n?void 0:n.footerCallback},footerFont:null===(d=null===(r=t.tooltipConfig)||void 0===r?void 0:r.footerStyles)||void 0===d?void 0:d.footerFont},datalabels:{display:null!==(s=!Q&&t.showTotal)&&void 0!==s&&s,anchor:"end",align:"end",clamp:!0,formatter:(l,e)=>{var o;const a=e.datasetIndex,i=e.chart.data.datasets;if(a!==i.length-1)return"";const n=e.dataIndex;let r=0;for(let l=0;l<i.length;l++)r+=null!==(o=i[l].data[n])&&void 0!==o?o:0;return r?t.isInternationalStore?m(r):y(r):""},color:b.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===T.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===T.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=T.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===T.HORIZONTAL?null===(O=t.valueTitle)||void 0===O?void 0:O.heading:null===(A=t.labelTitle)||void 0===A?void 0:A.heading),text:t.orientation===T.HORIZONTAL?null===(C=t.valueTitle)||void 0===C?void 0:C.heading:null===(k=t.labelTitle)||void 0===k?void 0:k.heading,color:null!==(H=t.orientation===T.HORIZONTAL?null===(x=t.valueTitle)||void 0===x?void 0:x.color:null===(E=t.labelTitle)||void 0===E?void 0:E.color)&&void 0!==H?H:b.content.secondary,font:{size:f.bodySecondary.fontSize}},grid:{display:t.orientation===T.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:f.caption.fontSize,color:null!==(S=t.orientation===T.HORIZONTAL?null===(I=t.labelTitle)||void 0===I?void 0:I.color:null===(N=t.valueTitle)||void 0===N?void 0:N.color)&&void 0!==S?S:b.content.secondary},t.orientation===T.HORIZONTAL?Q?ll:el:{}),{callback:(l,e)=>{var o,a;return t.orientation!==T.HORIZONTAL?null!==(a=null===(o=null==J?void 0:J.labels)||void 0===o?void 0:o[e])&&void 0!==a?a:"":"number"!=typeof l?l:t.isInternationalStore?m(l):y(l)}}),stacked:!0},y:{title:{display:!!(t.orientation===T.HORIZONTAL?null===(L=t.labelTitle)||void 0===L?void 0:L.heading:null===(D=t.valueTitle)||void 0===D?void 0:D.heading),text:t.orientation===T.HORIZONTAL?null===(R=t.labelTitle)||void 0===R?void 0:R.heading:null===(Z=t.valueTitle)||void 0===Z?void 0:Z.heading,color:null!==(j=t.orientation===T.HORIZONTAL?null===(B=t.labelTitle)||void 0===B?void 0:B.color:null===(_=t.valueTitle)||void 0===_?void 0:_.color)&&void 0!==j?j:b.content.secondary,font:{size:f.bodySecondary.fontSize}},grid:{display:t.orientation!==T.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({fontSize:f.caption.fontSize,color:null!==(P=t.orientation===T.HORIZONTAL?null===(w=t.valueTitle)||void 0===w?void 0:w.color:null===(z=t.labelTitle)||void 0===z?void 0:z.color)&&void 0!==P?P:b.content.secondary},t.orientation===T.HORIZONTAL?{}:Q?ll:el),{callback:(l,e)=>{var o,a;return t.orientation===T.HORIZONTAL?null!==(a=null===(o=null==J?void 0:J.labels)||void 0===o?void 0:o[e])&&void 0!==a?a:"":"number"!=typeof l?l:t.isInternationalStore?m(l):y(l)}}),stacked:!0}},onClick:(l,e)=>{if(!t.onBarClick)return;const o=e[0].datasetIndex,a=e[0].index,i=l.chart.data.datasets[o].label,n=l.chart.data.labels[a];t.onBarClick(n,i)},onHover:(l,e)=>{t.onBarClick&&e.length&&(l.native.target.style.cursor="pointer")}},al=Array.from(new Set(t.data.map((l=>l.label)))),il={labels:(nl=al,nl.map((l=>l.length>0?l.charAt(0).toUpperCase()+l.slice(1):l))),datasets:Q?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var nl;v((()=>{const l=[];al.forEach(((e,o)=>{const a=[],i=t.data.filter((l=>l.label===e));t.isFunnel||i.sort(((l,e)=>e.value-l.value)),i.forEach(((l,e)=>{const t=((l,e,o)=>X[l].slice(-o)[e])(o,e,i.length);a.push({color:t,label:l.stackLabel});const n=Object.assign({label:l.stackLabel,backgroundColor:t,data:Array(al.length).fill(0)},ol);n.data[o]=l.value,il.datasets.push(n)})),l.push(a)})),G(l),K(il)}),[t.data]);const rl=u((()=>l("div",{style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"},children:dl().map((o=>e("div",{className:"legend__row",children:[l("div",{className:"legend__palette",style:{backgroundColor:o.color}}),l(g,{color:b.content.secondary,children:o.label})]},o.label.replace(" ","_"))))})),[q]),dl=()=>{const l=[];return q.forEach(((e,o)=>{l.push({color:e[0].color,label:al[o]})})),l};if(!J)return l(o,{});return e(F,{style:null!==(M=t.wrapperStyle)&&void 0!==M?M:{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel,children:[t.chartHeading&&l("div",{style:{marginBottom:24},children:l(h,{color:null!==(W=t.chartHeading.color)&&void 0!==W?W:b.content.secondary,children:t.chartHeading.heading})}),e("div",{className:"graph__wrapper",children:[(null===(V=t.showLegend)||void 0===V||V)&&t.isFunnel&&rl(),l("div",{style:{height:null!==(Y=t.graphCanvasHeight)&&void 0!==Y?Y:500,width:null!==(U=t.graphCanvasWidth)&&void 0!==U?U:"100%",flex:1},children:l(p,{options:tl,data:J})}),(null===($=t.showLegend)||void 0===$||$)&&!t.isFunnel&&l("div",{style:{overflowY:"scroll",display:"flex",flexDirection:"column"},children:q.map(((o,t)=>l("div",{className:"legend__set",children:o.map((o=>e("div",{className:"legend__row",children:[l("div",{className:"legend__palette",style:{backgroundColor:o.color}}),l(g,{color:b.content.secondary,children:o.label})]},o.label.replace(" ","_"))))},`Legend_set_${t}`)))})]})]})};export{O as StackedBarDistributionChart};

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

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

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