@bikdotai/bik-component-library 0.0.455-analyticsv3-13 → 0.0.455-analyticsv3-14
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/StackedBarDistributionChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.d.ts +3 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),i=require("react"),a=require("react-chartjs-2"),l=require("../../../TypographyStyle.js"),o=require("../../../../constants/Theme.js"),n=require("./StackedBarChart.styles.js"),r=require("./StackedBarDistributionChart.model.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip,t.Legend);const s=[["#075E54","#128C7E","#25D366","#DCF8C6"],["#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF0012","#FF797D","#FFC4C5","#F9DFDF"]];exports.StackedBarDistributionChart=t=>{var d,c,O,u,v,T,g,h,R,b,A,N,p,I,S,y,C,j,H,L,x,E,_,m;const[F,f]=i.useState([]),[k,P]=i.useState(),G=!(null===(d=null==k?void 0:k.datasets)||void 0===d?void 0:d.length),Z={min:0,max:200,stepSize:20},z={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},B={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barThickness:null!==(c=t.barThickness)&&void 0!==c?c:100},D={plugins:{legend:{display:!1},tooltip:{enabled:!G}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(O=t.valueTitle)||void 0===O?void 0:O.heading:null===(u=t.labelTitle)||void 0===u?void 0:u.heading),text:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(v=t.valueTitle)||void 0===v?void 0:v.heading:null===(T=t.labelTitle)||void 0===T?void 0:T.heading,color:null!==(R=t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(g=t.valueTitle)||void 0===g?void 0:g.color:null===(h=t.labelTitle)||void 0===h?void 0:h.color)&&void 0!==R?R:o.COLORS.content.secondary,font:{size:o.FONTS.bodySecondary.fontSize}},grid:{display:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL,color:o.COLORS.background.base},ticks:Object.assign({stepSize:30,fontSize:o.FONTS.caption.fontSize,color:null!==(N=t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(b=t.labelTitle)||void 0===b?void 0:b.color:null===(A=t.valueTitle)||void 0===A?void 0:A.color)&&void 0!==N?N:o.COLORS.content.secondary},t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?G?Z:z:{}),stacked:!0},y:{title:{display:!!(t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(p=t.labelTitle)||void 0===p?void 0:p.heading:null===(I=t.valueTitle)||void 0===I?void 0:I.heading),text:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(S=t.labelTitle)||void 0===S?void 0:S.heading:null===(y=t.valueTitle)||void 0===y?void 0:y.heading,color:null!==(H=t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(C=t.labelTitle)||void 0===C?void 0:C.color:null===(j=t.valueTitle)||void 0===j?void 0:j.color)&&void 0!==H?H:o.COLORS.content.secondary,font:{size:o.FONTS.bodySecondary.fontSize}},grid:{display:t.orientation!==r.GRAPH_ORIENTATION.HORIZONTAL,color:o.COLORS.background.base},ticks:Object.assign({fontSize:o.FONTS.caption.fontSize,color:null!==(E=t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(L=t.valueTitle)||void 0===L?void 0:L.color:null===(x=t.labelTitle)||void 0===x?void 0:x.color)&&void 0!==E?E:o.COLORS.content.secondary},t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?{}:G?Z:z),stacked:!0}},onClick:(e,i)=>{if(!t.onBarClick)return;const a=i[0].datasetIndex,l=i[0].index,o=e.chart.data.datasets[a].label,n=e.chart.data.labels[l];t.onBarClick(n,o)},onHover:(e,i)=>{t.onBarClick&&i.length&&(e.native.target.style.cursor="pointer")}},q=Array.from(new Set(t.data.map((e=>e.label)))),w={labels:(V=q,V.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:[]};var V;return i.useEffect((()=>{const e=[];q.forEach(((i,a)=>{const l=[],o=t.data.filter((e=>e.label===i));o.sort(((e,t)=>t.value-e.value)),o.forEach(((e,t)=>{const i=((e,t,i)=>s[e].slice(-i)[t])(a,t,o.length);l.push({color:i,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:i,data:Array(q.length).fill(0)},B);n.data[a]=e.value,w.datasets.push(n)})),e.push(l)})),f(e),P(w)}),[]),k?e.jsxs(n.GraphContainerWrapper,Object.assign({padding:t.outerPadding},{children:[t.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(l.TitleRegular,Object.assign({color:null!==(_=t.chartHeading.color)&&void 0!==_?_:o.COLORS.content.secondary},{children:t.chartHeading.heading}))})),e.jsxs("div",Object.assign({className:"graph__wrapper"},{children:[e.jsx("div",Object.assign({style:{height:null!==(m=t.graphCanvasHeight)&&void 0!==m?m:500,flex:1}},{children:e.jsx(a.Bar,{options:D,data:k})})),e.jsx("div",{children:F.map(((t,i)=>e.jsx("div",Object.assign({className:"legend__set"},{children:t.map((t=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:t.color}}),e.jsx(l.BodyTiny,Object.assign({color:o.COLORS.content.secondary},{children:t.label}))]}),t.label.replace(" ","_"))))}),`Legend_set_${i}`)))})]}))]})):e.jsx(e.Fragment,{})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{Chart as
|
|
1
|
+
import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{Chart as i,CategoryScale as l,LinearScale as a,BarElement as n,Tooltip as r,Legend as d}from"chart.js";import{useState as s,useEffect as c}from"react";import{Bar as v}from"react-chartjs-2";import{TitleRegular as g,BodyTiny as u}from"../../../TypographyStyle.js";import{COLORS as h,FONTS as p}from"../../../../constants/Theme.js";import{GraphContainerWrapper as b}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as m}from"./StackedBarDistributionChart.model.js";i.register(l,a,n,r,d);const O=[["#075E54","#128C7E","#25D366","#DCF8C6"],["#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF0012","#FF797D","#FFC4C5","#F9DFDF"]];const T=i=>{var l,a,n,r,d,T,y,f,A,C,j,k,H,L,S,N,R,F,x,I,Z,z,E,_;const[D,B]=s([]),[w,P]=s(),V=!(null===(l=null==w?void 0:w.datasets)||void 0===l?void 0:l.length),U={min:0,max:200,stepSize:20},$={min:i.minValue,max:i.maxValue,stepSize:i.valuesStepSize},q={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barThickness:null!==(a=i.barThickness)&&void 0!==a?a:100},G={plugins:{legend:{display:!1},tooltip:{enabled:!V}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:i.orientation===m.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(i.orientation===m.HORIZONTAL?null===(n=i.valueTitle)||void 0===n?void 0:n.heading:null===(r=i.labelTitle)||void 0===r?void 0:r.heading),text:i.orientation===m.HORIZONTAL?null===(d=i.valueTitle)||void 0===d?void 0:d.heading:null===(T=i.labelTitle)||void 0===T?void 0:T.heading,color:null!==(A=i.orientation===m.HORIZONTAL?null===(y=i.valueTitle)||void 0===y?void 0:y.color:null===(f=i.labelTitle)||void 0===f?void 0:f.color)&&void 0!==A?A:h.content.secondary,font:{size:p.bodySecondary.fontSize}},grid:{display:i.orientation===m.HORIZONTAL,color:h.background.base},ticks:Object.assign({stepSize:30,fontSize:p.caption.fontSize,color:null!==(k=i.orientation===m.HORIZONTAL?null===(C=i.labelTitle)||void 0===C?void 0:C.color:null===(j=i.valueTitle)||void 0===j?void 0:j.color)&&void 0!==k?k:h.content.secondary},i.orientation===m.HORIZONTAL?V?U:$:{}),stacked:!0},y:{title:{display:!!(i.orientation===m.HORIZONTAL?null===(H=i.labelTitle)||void 0===H?void 0:H.heading:null===(L=i.valueTitle)||void 0===L?void 0:L.heading),text:i.orientation===m.HORIZONTAL?null===(S=i.labelTitle)||void 0===S?void 0:S.heading:null===(N=i.valueTitle)||void 0===N?void 0:N.heading,color:null!==(x=i.orientation===m.HORIZONTAL?null===(R=i.labelTitle)||void 0===R?void 0:R.color:null===(F=i.valueTitle)||void 0===F?void 0:F.color)&&void 0!==x?x:h.content.secondary,font:{size:p.bodySecondary.fontSize}},grid:{display:i.orientation!==m.HORIZONTAL,color:h.background.base},ticks:Object.assign({fontSize:p.caption.fontSize,color:null!==(z=i.orientation===m.HORIZONTAL?null===(I=i.valueTitle)||void 0===I?void 0:I.color:null===(Z=i.labelTitle)||void 0===Z?void 0:Z.color)&&void 0!==z?z:h.content.secondary},i.orientation===m.HORIZONTAL?{}:V?U:$),stacked:!0}},onClick:(e,o)=>{if(!i.onBarClick)return;const t=o[0].datasetIndex,l=o[0].index,a=e.chart.data.datasets[t].label,n=e.chart.data.labels[l];i.onBarClick(n,a)},onHover:(e,o)=>{i.onBarClick&&o.length&&(e.native.target.style.cursor="pointer")}},J=Array.from(new Set(i.data.map((e=>e.label)))),K={labels:(M=J,M.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:[]};var M;return c((()=>{const e=[];J.forEach(((o,t)=>{const l=[],a=i.data.filter((e=>e.label===o));a.sort(((e,o)=>o.value-e.value)),a.forEach(((e,o)=>{const i=((e,o,t)=>O[e].slice(-t)[o])(t,o,a.length);l.push({color:i,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:i,data:Array(J.length).fill(0)},q);n.data[t]=e.value,K.datasets.push(n)})),e.push(l)})),B(e),P(K)}),[]),w?t(b,Object.assign({padding:i.outerPadding},{children:[i.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(g,Object.assign({color:null!==(E=i.chartHeading.color)&&void 0!==E?E:h.content.secondary},{children:i.chartHeading.heading}))})),t("div",Object.assign({className:"graph__wrapper"},{children:[e("div",Object.assign({style:{height:null!==(_=i.graphCanvasHeight)&&void 0!==_?_:500,flex:1}},{children:e(v,{options:G,data:w})})),e("div",{children:D.map(((o,i)=>e("div",Object.assign({className:"legend__set"},{children:o.map((o=>t("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(u,Object.assign({color:h.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}),`Legend_set_${i}`)))})]}))]})):e(o,{})};export{T as StackedBarDistributionChart};
|