@bikdotai/bik-component-library 0.0.578-beta.pp-1 → 0.0.578-beta.pp-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/StackedBarDistributionChart.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("chart.js"),a=require("chartjs-plugin-datalabels"),t=require("react"),o=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),r=require("../utils/calcPercentage.js"),s=require("./StackedBarChart.styles.js"),d=require("./StackedBarDistributionChart.model.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(a);l.Chart.register(l.CategoryScale,l.LinearScale,l.BarElement,l.Tooltip,l.Legend,u.default),l.Chart.defaults.plugins.datalabels.display=!1;exports.StackedBarDistributionChart=l=>{var a,c,u,O,v,g,T,h,b,p,A,R,N,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("chart.js"),a=require("chartjs-plugin-datalabels"),t=require("react"),o=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),r=require("../utils/calcPercentage.js"),s=require("./StackedBarChart.styles.js"),d=require("./StackedBarDistributionChart.model.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(a);l.Chart.register(l.CategoryScale,l.LinearScale,l.BarElement,l.Tooltip,l.Legend,u.default),l.Chart.defaults.plugins.datalabels.display=!1;exports.StackedBarDistributionChart=l=>{var a,c,u,O,v,g,T,h,b,p,A,R,N,I,y,C,f,j,F,E,x,H,S,_,L,m,k,P,B,D,G,Z;const[w,z]=t.useState([]),[q,V]=t.useState(),M=!l.data.filter((e=>!!e.value)).length,W=l.colorMatrix&&l.colorMatrix.length?l.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],K={min:0,max:200,stepSize:20},Y={min:l.minValue,max:l.maxValue,stepSize:l.valuesStepSize},U={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:M?0:null!==(a=l.barThickness)&&void 0!==a?a:100},$={plugins:{legend:{display:!1},tooltip:{enabled:!M,callbacks:{label:null===(c=l.tooltipConfig)||void 0===c?void 0:c.labelCallback,footer:null===(u=l.tooltipConfig)||void 0===u?void 0:u.footerCallback},footerFont:null===(v=null===(O=l.tooltipConfig)||void 0===O?void 0:O.footerStyles)||void 0===v?void 0:v.footerFont},datalabels:{display:null!==(g=!M&&l.showTotal)&&void 0!==g&&g,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var a;const t=l.datasetIndex,o=l.chart.data.datasets;if(t!==o.length-1)return"";const i=l.dataIndex;let n=0;for(let e=0;e<o.length;e++)n+=null!==(a=o[e].data[i])&&void 0!==a?a:0;return n?r.truncateValueToK(n):""},color:n.COLORS.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",layout:{padding:{right:l.showTotal&&l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:l.showTotal&&l.orientation!=d.GRAPH_ORIENTATION.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(T=l.valueTitle)||void 0===T?void 0:T.heading:null===(h=l.labelTitle)||void 0===h?void 0:h.heading),text:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(b=l.valueTitle)||void 0===b?void 0:b.heading:null===(p=l.labelTitle)||void 0===p?void 0:p.heading,color:null!==(N=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(A=l.valueTitle)||void 0===A?void 0:A.color:null===(R=l.labelTitle)||void 0===R?void 0:R.color)&&void 0!==N?N:n.COLORS.content.secondary,font:{size:n.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL,color:n.COLORS.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:n.FONTS.caption.fontSize,color:null!==(C=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(I=l.labelTitle)||void 0===I?void 0:I.color:null===(y=l.valueTitle)||void 0===y?void 0:y.color)&&void 0!==C?C:n.COLORS.content.secondary},l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?M?K:Y:{}),{callback:(e,a)=>{var t,o;return l.orientation!==d.GRAPH_ORIENTATION.HORIZONTAL?null!==(o=null===(t=null==q?void 0:q.labels)||void 0===t?void 0:t[a])&&void 0!==o?o:"":"number"!=typeof e?e:r.truncateValueToK(e)}}),stacked:!0},y:{title:{display:!!(l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(f=l.labelTitle)||void 0===f?void 0:f.heading:null===(j=l.valueTitle)||void 0===j?void 0:j.heading),text:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(F=l.labelTitle)||void 0===F?void 0:F.heading:null===(E=l.valueTitle)||void 0===E?void 0:E.heading,color:null!==(S=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(x=l.labelTitle)||void 0===x?void 0:x.color:null===(H=l.valueTitle)||void 0===H?void 0:H.color)&&void 0!==S?S:n.COLORS.content.secondary,font:{size:n.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation!==d.GRAPH_ORIENTATION.HORIZONTAL,color:n.COLORS.background.base},ticks:Object.assign(Object.assign({fontSize:n.FONTS.caption.fontSize,color:null!==(m=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(_=l.valueTitle)||void 0===_?void 0:_.color:null===(L=l.labelTitle)||void 0===L?void 0:L.color)&&void 0!==m?m:n.COLORS.content.secondary},l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?{}:M?K:Y),{callback:(e,a)=>{var t,o;return l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null!==(o=null===(t=null==q?void 0:q.labels)||void 0===t?void 0:t[a])&&void 0!==o?o:"":"number"!=typeof e?e:r.truncateValueToK(e)}}),stacked:!0}},onClick:(e,a)=>{if(!l.onBarClick)return;const t=a[0].datasetIndex,o=a[0].index,i=e.chart.data.datasets[t].label,n=e.chart.data.labels[o];l.onBarClick(n,i)},onHover:(e,a)=>{l.onBarClick&&a.length&&(e.native.target.style.cursor="pointer")}},J=Array.from(new Set(l.data.map((e=>e.label)))),Q={labels:(X=J,X.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:M?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var X;t.useEffect((()=>{const e=[];J.forEach(((a,t)=>{const o=[],i=l.data.filter((e=>e.label===a));l.isFunnel||i.sort(((e,l)=>l.value-e.value)),i.forEach(((e,l)=>{const a=((e,l,a)=>W[e].slice(-a)[l])(t,l,i.length);o.push({color:a,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:a,data:Array(J.length).fill(0)},U);n.data[t]=e.value,Q.datasets.push(n)})),e.push(o)})),z(e),V(Q)}),[l.data]);const ee=t.useCallback((()=>e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:le().map((l=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:l.color}}),e.jsx(i.BodyTiny,Object.assign({color:n.COLORS.content.secondary},{children:l.label}))]}),l.label.replace(" ","_"))))}))),[w]),le=()=>{const e=[];return w.forEach(((l,a)=>{e.push({color:l[0].color,label:J[a]})})),e};if(!q)return e.jsx(e.Fragment,{});return e.jsxs(s.GraphContainerWrapper,Object.assign({style:null!==(k=l.wrapperStyle)&&void 0!==k?k:{},padding:l.outerPadding,chartWrapperHeight:l.chartWrapperHeight,isFunnel:l.isFunnel},{children:[l.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(i.TitleRegular,Object.assign({color:null!==(P=l.chartHeading.color)&&void 0!==P?P:n.COLORS.content.secondary},{children:l.chartHeading.heading}))})),e.jsxs("div",Object.assign({className:"graph__wrapper"},{children:[(null===(B=l.showLegend)||void 0===B||B)&&l.isFunnel&&ee(),e.jsx("div",Object.assign({style:{height:null!==(D=l.graphCanvasHeight)&&void 0!==D?D:500,width:null!==(G=l.graphCanvasWidth)&&void 0!==G?G:"100%",flex:1}},{children:e.jsx(o.Bar,{options:$,data:q})})),(null===(Z=l.showLegend)||void 0===Z||Z)&&!l.isFunnel&&e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:w.map(((l,a)=>e.jsx("div",Object.assign({className:"legend__set"},{children:l.map((l=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:l.color}}),e.jsx(i.BodyTiny,Object.assign({color:n.COLORS.content.secondary},{children:l.label}))]}),l.label.replace(" ","_"))))}),`Legend_set_${a}`)))}))]}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{Chart as t,CategoryScale as a,LinearScale as i,BarElement as n,Tooltip as r,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{useState as c,useEffect as v,useCallback as u}from"react";import{Bar as g}from"react-chartjs-2";import{BodyTiny as p,TitleRegular as h}from"../../../TypographyStyle.js";import{COLORS as b,FONTS as
|
|
1
|
+
import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{Chart as t,CategoryScale as a,LinearScale as i,BarElement as n,Tooltip as r,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{useState as c,useEffect as v,useCallback as u}from"react";import{Bar as g}from"react-chartjs-2";import{BodyTiny as p,TitleRegular as h}from"../../../TypographyStyle.js";import{COLORS as b,FONTS as O}from"../../../../constants/Theme.js";import{truncateValueToK as f}from"../utils/calcPercentage.js";import{GraphContainerWrapper as m}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as y}from"./StackedBarDistributionChart.model.js";t.register(a,i,n,r,d,s),t.defaults.plugins.datalabels.display=!1;const F=t=>{var a,i,n,r,d,s,F,T,A,C,j,k,x,E,H,N,L,I,S,D,R,Z,B,_,w,z,P,M,W,V,Y,U;const[$,q]=c([]),[G,J]=c(),K=!t.data.filter((e=>!!e.value)).length,Q=t.colorMatrix&&t.colorMatrix.length?t.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],X={min:0,max:200,stepSize:20},ee={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},le={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:K?0:null!==(a=t.barThickness)&&void 0!==a?a:100},oe={plugins:{legend:{display:!1},tooltip:{enabled:!K,callbacks:{label:null===(i=t.tooltipConfig)||void 0===i?void 0:i.labelCallback,footer:null===(n=t.tooltipConfig)||void 0===n?void 0:n.footerCallback},footerFont:null===(d=null===(r=t.tooltipConfig)||void 0===r?void 0:r.footerStyles)||void 0===d?void 0:d.footerFont},datalabels:{display:null!==(s=!K&&t.showTotal)&&void 0!==s&&s,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var o;const t=l.datasetIndex,a=l.chart.data.datasets;if(t!==a.length-1)return"";const i=l.dataIndex;let n=0;for(let e=0;e<a.length;e++)n+=null!==(o=a[e].data[i])&&void 0!==o?o:0;return n?f(n):""},color:b.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===y.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===y.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=y.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===y.HORIZONTAL?null===(F=t.valueTitle)||void 0===F?void 0:F.heading:null===(T=t.labelTitle)||void 0===T?void 0:T.heading),text:t.orientation===y.HORIZONTAL?null===(A=t.valueTitle)||void 0===A?void 0:A.heading:null===(C=t.labelTitle)||void 0===C?void 0:C.heading,color:null!==(x=t.orientation===y.HORIZONTAL?null===(j=t.valueTitle)||void 0===j?void 0:j.color:null===(k=t.labelTitle)||void 0===k?void 0:k.color)&&void 0!==x?x:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation===y.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:O.caption.fontSize,color:null!==(N=t.orientation===y.HORIZONTAL?null===(E=t.labelTitle)||void 0===E?void 0:E.color:null===(H=t.valueTitle)||void 0===H?void 0:H.color)&&void 0!==N?N:b.content.secondary},t.orientation===y.HORIZONTAL?K?X:ee:{}),{callback:(e,l)=>{var o,a;return t.orientation!==y.HORIZONTAL?null!==(a=null===(o=null==G?void 0:G.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:f(e)}}),stacked:!0},y:{title:{display:!!(t.orientation===y.HORIZONTAL?null===(L=t.labelTitle)||void 0===L?void 0:L.heading:null===(I=t.valueTitle)||void 0===I?void 0:I.heading),text:t.orientation===y.HORIZONTAL?null===(S=t.labelTitle)||void 0===S?void 0:S.heading:null===(D=t.valueTitle)||void 0===D?void 0:D.heading,color:null!==(B=t.orientation===y.HORIZONTAL?null===(R=t.labelTitle)||void 0===R?void 0:R.color:null===(Z=t.valueTitle)||void 0===Z?void 0:Z.color)&&void 0!==B?B:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation!==y.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({fontSize:O.caption.fontSize,color:null!==(z=t.orientation===y.HORIZONTAL?null===(_=t.valueTitle)||void 0===_?void 0:_.color:null===(w=t.labelTitle)||void 0===w?void 0:w.color)&&void 0!==z?z:b.content.secondary},t.orientation===y.HORIZONTAL?{}:K?X:ee),{callback:(e,l)=>{var o,a;return t.orientation===y.HORIZONTAL?null!==(a=null===(o=null==G?void 0:G.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:f(e)}}),stacked:!0}},onClick:(e,l)=>{if(!t.onBarClick)return;const o=l[0].datasetIndex,a=l[0].index,i=e.chart.data.datasets[o].label,n=e.chart.data.labels[a];t.onBarClick(n,i)},onHover:(e,l)=>{t.onBarClick&&l.length&&(e.native.target.style.cursor="pointer")}},te=Array.from(new Set(t.data.map((e=>e.label)))),ae={labels:(ie=te,ie.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:K?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var ie;v((()=>{const e=[];te.forEach(((l,o)=>{const a=[],i=t.data.filter((e=>e.label===l));t.isFunnel||i.sort(((e,l)=>l.value-e.value)),i.forEach(((e,l)=>{const t=((e,l,o)=>Q[e].slice(-o)[l])(o,l,i.length);a.push({color:t,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:t,data:Array(te.length).fill(0)},le);n.data[o]=e.value,ae.datasets.push(n)})),e.push(a)})),q(e),J(ae)}),[t.data]);const ne=u((()=>e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:re().map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}))),[$]),re=()=>{const e=[];return $.forEach(((l,o)=>{e.push({color:l[0].color,label:te[o]})})),e};if(!G)return e(o,{});return l(m,Object.assign({style:null!==(P=t.wrapperStyle)&&void 0!==P?P:{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel},{children:[t.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(h,Object.assign({color:null!==(M=t.chartHeading.color)&&void 0!==M?M:b.content.secondary},{children:t.chartHeading.heading}))})),l("div",Object.assign({className:"graph__wrapper"},{children:[(null===(W=t.showLegend)||void 0===W||W)&&t.isFunnel&&ne(),e("div",Object.assign({style:{height:null!==(V=t.graphCanvasHeight)&&void 0!==V?V:500,width:null!==(Y=t.graphCanvasWidth)&&void 0!==Y?Y:"100%",flex:1}},{children:e(g,{options:oe,data:G})})),(null===(U=t.showLegend)||void 0===U||U)&&!t.isFunnel&&e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:$.map(((o,t)=>e("div",Object.assign({className:"legend__set"},{children:o.map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}),`Legend_set_${t}`)))}))]}))]}))};export{F as StackedBarDistributionChart};
|