@bikdotai/bik-component-library 0.0.634-aia-beta.2 → 0.0.634-aia-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../assets/icons/maximize.svg.js"),
|
|
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 g=p(o);a.Chart.register(a.CategoryScale,a.LinearScale,a.BarElement,a.Tooltip,a.Legend,g.default);exports.StackedBarChart=a=>{var o,p,g,v,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: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===(v=null===(g=a.tooltipConfig)||void 0===g?void 0:g.footerStyles)||void 0===v?void 0:v.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:"90%"},{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})}))]}))}))]}))};
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
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 g}from"../../../modals/styledModal.js";import{TitleRegular as v,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: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},gt=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(v,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&>(),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(g,Object.assign({open:$,onClose:()=>tt(!1),closeOnOutsideClick:!0,headingTitle:null===(X=i.chartHeading)||void 0===X?void 0:X.heading,width:"90%"},{children:t("div",Object.assign({className:"graph__wrapper",style:{padding:"8px"}},{children:[i.customLegend&>(!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};
|