@bikdotai/bik-component-library 0.0.640-beta.1 → 0.0.640-beta.2

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

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

@@ -62,4 +62,19 @@ export interface StackedBarGraphI {
     truncateBars?: number;
     allowChartPopup?: boolean;
     hideHeading?: boolean;
+    borderRadius?: number | {
+        topLeft?: number;
+        topRight?: number;
+        bottomLeft?: number;
+        bottomRight?: number;
+    };
+    showGridLines?: {
+        x?: boolean;
+        y?: boolean;
+    };
+    equalHeight?: {
+        flag: boolean;
+        max: number;
+    };
+    barPercentage?: number;
 }

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

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

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

@@ -62,4 +62,19 @@ export interface StackedBarGraphI {
     truncateBars?: number;
     allowChartPopup?: boolean;
     hideHeading?: boolean;
+    borderRadius?: number | {
+        topLeft?: number;
+        topRight?: number;
+        bottomLeft?: number;
+        bottomRight?: number;
+    };
+    showGridLines?: {
+        x?: boolean;
+        y?: boolean;
+    };
+    equalHeight?: {
+        flag: boolean;
+        max: number;
+    };
+    barPercentage?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.640-beta.1",
+	"version": "0.0.640-beta.2",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",