@bikdotai/bik-component-library 0.0.542 → 0.0.543
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 +3 -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 +3 -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"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("chart.js"),t=require("chartjs-plugin-datalabels"),i=require("react-chartjs-2"),a=require("../../../TypographyStyle.js"),l=require("../../../../constants/Theme.js"),n=require("../utils/calcPercentage.js"),s=require("./StackedBarChart.model.js"),r=require("./StackedBarChart.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t);o.Chart.register(o.CategoryScale,o.LinearScale,o.BarElement,o.Tooltip,o.Legend,c.default);exports.StackedBarChart=o=>{var t,d,c,O,u,v,A,x,g,p,T,R,y,C,N,I,b,h,S,E,H,f,k,L,m,F,j,P,_,G,B,Z,z,D,q;const w=0===o.yAxis.data.length,V=void 0===o.customColourScaleBrand||void 0===o.customColourScalePastel?o.colorSchema===s.COLOR_SCHEMA.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"]:o.colorSchema===s.COLOR_SCHEMA.PASTEL?o.customColourScalePastel:o.customColourScaleBrand,W=o.customHoverColour,M={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barWidth:o.barWidth},K={};o.yAxis.data.map((e=>{e.map((e=>{K[e.name]?K[e.name].push(e.value):K[e.name]=[e.value]}))}));const Y=Object.keys(K).map(((e,o)=>Object.assign({label:e,data:K[e],backgroundColor:V[o],hoverBackgroundColor:void 0===W?void 0:W[o]},M))),J={plugins:{legend:{display:!w&&!o.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!w,callbacks:{label:null===(t=o.tooltipConfig)||void 0===t?void 0:t.labelCallback,footer:null===(d=o.tooltipConfig)||void 0===d?void 0:d.footerCallback},footerFont:null===(O=null===(c=o.tooltipConfig)||void 0===c?void 0:c.footerStyles)||void 0===O?void 0:O.footerFont},datalabels:{display:null!==(u=o.showTotal)&&void 0!==u&&u,anchor:"end",align:"end",clamp:!0,formatter:(e,o)=>{var t;const i=o.datasetIndex,a=o.chart.data.datasets;if(i!==a.length-1)return"";const l=o.dataIndex;let n=0;for(let e=0;e<a.length;e++)n+=null!==(t=a[e].data[l])&&void 0!==t?t:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:l.COLORS.content.secondary}},layout:{padding:{right:o.showTotal&&o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:o.showTotal&&o.orientation!=s.GRAPH_ORIENTATION.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!o.customLegend,labels:{usePointStyle:!0}},indexAxis:o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(v=o.yAxis)||void 0===v?void 0:v.title:null===(A=o.xAxis)||void 0===A?void 0:A.title),text:o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(x=o.yAxis)||void 0===x?void 0:x.title:null===(g=o.xAxis)||void 0===g?void 0:g.title,color:null!==(R=o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(p=o.yAxis)||void 0===p?void 0:p.titleColor:null===(T=o.xAxis)||void 0===T?void 0:T.titleColor)&&void 0!==R?R:l.COLORS.content.secondary,font:{size:l.FONTS.caption.fontSize}},grid:{display:o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL,color:l.COLORS.background.base},ticks:{fontSize:l.FONTS.caption.fontSize,color:null!==(y=o.yAxis.labelColor)&&void 0!==y?y:l.COLORS.content.secondary,callback:o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?n.truncateValueToK:void 0},stacked:o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(C=o.yAxis)||void 0===C?void 0:C.stacked)||(null===(N=o.yAxis)||void 0===N?void 0:N.stacked):"boolean"!=typeof(null===(I=o.xAxis)||void 0===I?void 0:I.stacked)||(null===(b=o.xAxis)||void 0===b?void 0:b.stacked)},y:{title:{display:!!(o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(h=o.xAxis)||void 0===h?void 0:h.title:null===(S=o.yAxis)||void 0===S?void 0:S.title),text:o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(E=o.xAxis)||void 0===E?void 0:E.title:null===(H=o.yAxis)||void 0===H?void 0:H.title,color:null!==(L=o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(f=o.xAxis)||void 0===f?void 0:f.titleColor:null===(k=o.yAxis)||void 0===k?void 0:k.titleColor)&&void 0!==L?L:l.COLORS.content.secondary,font:{size:l.FONTS.caption.fontSize}},grid:{display:o.orientation!==s.GRAPH_ORIENTATION.HORIZONTAL,color:l.COLORS.background.base},ticks:Object.assign(Object.assign({stepSize:o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(m=o.xAxis)||void 0===m?void 0:m.stepSize:null===(F=o.yAxis)||void 0===F?void 0:F.stepSize,fontSize:l.FONTS.caption.fontSize,color:null!==(j=o.xAxis.labelColor)&&void 0!==j?j:l.COLORS.content.secondary},w?{min:0,max:2e3,stepSize:200}:{}),{callback:o.orientation!==s.GRAPH_ORIENTATION.VERTICAL?n.truncateValueToK:void 0}),stacked:o.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(P=o.xAxis)||void 0===P?void 0:P.stacked)||(null===(_=o.xAxis)||void 0===_?void 0:_.stacked):"boolean"!=typeof(null===(G=o.yAxis)||void 0===G?void 0:G.stacked)||(null===(B=o.yAxis)||void 0===B?void 0:B.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!==s.GRAPH_ORIENTATION.VERTICAL?delete J.scales.y.ticks.callback:delete J.scales.x.ticks.callback;const Q={labels:o.xAxis.data.map((e=>"string"==typeof e?e:e.name)),datasets:w?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:Y};return e.jsxs(r.GraphContainerWrapper,Object.assign({style:null!==(Z=o.wrapperStyle)&&void 0!==Z?Z:{},padding:o.outerPadding,customLegend:o.customLegend},{children:[o.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(a.TitleRegular,Object.assign({color:null!==(z=o.chartHeading.color)&&void 0!==z?z:l.COLORS.content.secondary},{children:o.chartHeading.heading}))})),o.customLegend&&e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",padding:"0px 24px 12px 24px",justifyContent:"flex-end"}},{children:Y.map((o=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:o.backgroundColor}}),e.jsx(a.BodyTiny,Object.assign({color:l.COLORS.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))})),e.jsx("div",Object.assign({className:"graph__wrapper"},{children:e.jsx("div",Object.assign({style:{height:null!==(D=o.graphCanvasHeight)&&void 0!==D?D:500,width:null!==(q=o.graphCanvasWidth)&&void 0!==q?q:"auto"}},{children:e.jsx(i.Bar,{options:J,data:Q})}))}))]}))};
|
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{Chart as i,CategoryScale as e,LinearScale as l,BarElement as a,Tooltip as n,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{Bar as r}from"react-chartjs-2";import{TitleRegular as c,BodyTiny as v}from"../../../TypographyStyle.js";import{COLORS as
|
|
1
|
+
import{jsxs as o,jsx as t}from"react/jsx-runtime";import{Chart as i,CategoryScale as e,LinearScale as l,BarElement as a,Tooltip as n,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{Bar as r}from"react-chartjs-2";import{TitleRegular as c,BodyTiny as v}from"../../../TypographyStyle.js";import{COLORS as u,FONTS as p}from"../../../../constants/Theme.js";import{truncateValueToK as g}from"../utils/calcPercentage.js";import{COLOR_SCHEMA as x,GRAPH_ORIENTATION as y}from"./StackedBarChart.model.js";import{GraphContainerWrapper as m}from"./StackedBarChart.styles.js";i.register(e,l,a,n,d,s);const b=i=>{var e,l,a,n,d,s,b,A,h,O,f,C,k,F,S,L,T,j,H,E,I,N,R,Z,z,B,D,P,w,_,W,V,Y,q,G;const J=0===i.yAxis.data.length,K=void 0===i.customColourScaleBrand||void 0===i.customColourScalePastel?i.colorSchema===x.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"]:i.colorSchema===x.PASTEL?i.customColourScalePastel:i.customColourScaleBrand,M=i.customHoverColour,Q={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barWidth:i.barWidth},U={};i.yAxis.data.map((o=>{o.map((o=>{U[o.name]?U[o.name].push(o.value):U[o.name]=[o.value]}))}));const X=Object.keys(U).map(((o,t)=>Object.assign({label:o,data:U[o],backgroundColor:K[t],hoverBackgroundColor:void 0===M?void 0:M[t]},Q))),$={plugins:{legend:{display:!J&&!i.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!J,callbacks:{label:null===(e=i.tooltipConfig)||void 0===e?void 0:e.labelCallback,footer:null===(l=i.tooltipConfig)||void 0===l?void 0:l.footerCallback},footerFont:null===(n=null===(a=i.tooltipConfig)||void 0===a?void 0:a.footerStyles)||void 0===n?void 0:n.footerFont},datalabels:{display:null!==(d=i.showTotal)&&void 0!==d&&d,anchor:"end",align:"end",clamp:!0,formatter:(o,t)=>{var i;const e=t.datasetIndex,l=t.chart.data.datasets;if(e!==l.length-1)return"";const a=t.dataIndex;let n=0;for(let o=0;o<l.length;o++)n+=null!==(i=l[o].data[a])&&void 0!==i?i:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:u.content.secondary}},layout:{padding:{right:i.showTotal&&i.orientation===y.HORIZONTAL?50:0,top:i.showTotal&&i.orientation!=y.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!i.customLegend,labels:{usePointStyle:!0}},indexAxis:i.orientation===y.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(i.orientation===y.HORIZONTAL?null===(s=i.yAxis)||void 0===s?void 0:s.title:null===(b=i.xAxis)||void 0===b?void 0:b.title),text:i.orientation===y.HORIZONTAL?null===(A=i.yAxis)||void 0===A?void 0:A.title:null===(h=i.xAxis)||void 0===h?void 0:h.title,color:null!==(C=i.orientation===y.HORIZONTAL?null===(O=i.yAxis)||void 0===O?void 0:O.titleColor:null===(f=i.xAxis)||void 0===f?void 0:f.titleColor)&&void 0!==C?C:u.content.secondary,font:{size:p.caption.fontSize}},grid:{display:i.orientation===y.HORIZONTAL,color:u.background.base},ticks:{fontSize:p.caption.fontSize,color:null!==(k=i.yAxis.labelColor)&&void 0!==k?k:u.content.secondary,callback:i.orientation===y.HORIZONTAL?g:void 0},stacked:i.orientation===y.HORIZONTAL?"boolean"!=typeof(null===(F=i.yAxis)||void 0===F?void 0:F.stacked)||(null===(S=i.yAxis)||void 0===S?void 0:S.stacked):"boolean"!=typeof(null===(L=i.xAxis)||void 0===L?void 0:L.stacked)||(null===(T=i.xAxis)||void 0===T?void 0:T.stacked)},y:{title:{display:!!(i.orientation===y.HORIZONTAL?null===(j=i.xAxis)||void 0===j?void 0:j.title:null===(H=i.yAxis)||void 0===H?void 0:H.title),text:i.orientation===y.HORIZONTAL?null===(E=i.xAxis)||void 0===E?void 0:E.title:null===(I=i.yAxis)||void 0===I?void 0:I.title,color:null!==(Z=i.orientation===y.HORIZONTAL?null===(N=i.xAxis)||void 0===N?void 0:N.titleColor:null===(R=i.yAxis)||void 0===R?void 0:R.titleColor)&&void 0!==Z?Z:u.content.secondary,font:{size:p.caption.fontSize}},grid:{display:i.orientation!==y.HORIZONTAL,color:u.background.base},ticks:Object.assign(Object.assign({stepSize:i.orientation===y.HORIZONTAL?null===(z=i.xAxis)||void 0===z?void 0:z.stepSize:null===(B=i.yAxis)||void 0===B?void 0:B.stepSize,fontSize:p.caption.fontSize,color:null!==(D=i.xAxis.labelColor)&&void 0!==D?D:u.content.secondary},J?{min:0,max:2e3,stepSize:200}:{}),{callback:i.orientation!==y.VERTICAL?g:void 0}),stacked:i.orientation===y.HORIZONTAL?"boolean"!=typeof(null===(P=i.xAxis)||void 0===P?void 0:P.stacked)||(null===(w=i.xAxis)||void 0===w?void 0:w.stacked):"boolean"!=typeof(null===(_=i.yAxis)||void 0===_?void 0:_.stacked)||(null===(W=i.yAxis)||void 0===W?void 0:W.stacked)}},onClick:(o,t)=>{if(!i.onBarClick)return;const e=t[0].datasetIndex,l=t[0].index,a=o.chart.data.datasets[e].label,n=o.chart.data.labels[l];i.onBarClick(n,a)},onHover:(o,t)=>{i.onBarClick&&t.length&&(o.native.target.style.cursor="pointer")}};i.orientation&&i.orientation!==y.VERTICAL?delete $.scales.y.ticks.callback:delete $.scales.x.ticks.callback;const oo={labels:i.xAxis.data.map((o=>"string"==typeof o?o:o.name)),datasets:J?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:X};return o(m,Object.assign({style:null!==(V=i.wrapperStyle)&&void 0!==V?V:{},padding:i.outerPadding,customLegend:i.customLegend},{children:[i.chartHeading&&t("div",Object.assign({style:{marginBottom:24}},{children:t(c,Object.assign({color:null!==(Y=i.chartHeading.color)&&void 0!==Y?Y:u.content.secondary},{children:i.chartHeading.heading}))})),i.customLegend&&t("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",padding:"0px 24px 12px 24px",justifyContent:"flex-end"}},{children:X.map((i=>o("div",Object.assign({className:"legend__row"},{children:[t("div",{className:"legend__palette",style:{backgroundColor:i.backgroundColor}}),t(v,Object.assign({color:u.content.secondary},{children:i.label}))]}),i.label.replace(" ","_"))))})),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!==(G=i.graphCanvasWidth)&&void 0!==G?G:"auto"}},{children:t(r,{options:$,data:oo})}))}))]}))};export{b as StackedBarChart};
|