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