@bikdotai/bik-component-library 0.0.455-analyticsv3-08 → 0.0.455-analyticsv3-09

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),i=require("react-chartjs-2"),o=require("../../../TypographyStyle.js"),a=require("../../../../constants/Theme.js"),n=require("./StackedBarChart.model.js"),l=require("./StackedBarChart.styles.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip,t.Legend);exports.StackedBarChart=t=>{var r,s,d,c,O,A,u,v,x,R,g,p,T,y,C,N,S,F,h,I;const b=0===t.yAxis.data.length,E=t.colorSchema===n.COLOR_SCHEMA.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],H={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barWidth:t.barWidth},L={};t.yAxis.data.map((e=>{e.map((e=>{L[e.name]?L[e.name].push(e.value):L[e.name]=[e.value]}))}));const j=Object.keys(L).map(((e,t)=>Object.assign({label:e,data:L[e],backgroundColor:E[t]},H))),m={plugins:{legend:{display:!b,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!b}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},indexAxis:t.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(t.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(r=t.yAxis)||void 0===r?void 0:r.title:null===(s=t.xAxis)||void 0===s?void 0:s.title),text:t.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(d=t.yAxis)||void 0===d?void 0:d.title:null===(c=t.xAxis)||void 0===c?void 0:c.title,color:null!==(u=t.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(O=t.yAxis)||void 0===O?void 0:O.titleColor:null===(A=t.xAxis)||void 0===A?void 0:A.titleColor)&&void 0!==u?u:a.COLORS.content.secondary,font:{size:a.FONTS.caption.fontSize}},grid:{display:t.orientation===n.GRAPH_ORIENTATION.HORIZONTAL,color:a.COLORS.background.base},ticks:{fontSize:a.FONTS.caption.fontSize,color:null!==(v=t.yAxis.labelColor)&&void 0!==v?v:a.COLORS.content.secondary},stacked:!0},y:{title:{display:!!(t.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(x=t.xAxis)||void 0===x?void 0:x.title:null===(R=t.yAxis)||void 0===R?void 0:R.title),text:t.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(g=t.xAxis)||void 0===g?void 0:g.title:null===(p=t.yAxis)||void 0===p?void 0:p.title,color:null!==(C=t.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(T=t.xAxis)||void 0===T?void 0:T.titleColor:null===(y=t.yAxis)||void 0===y?void 0:y.titleColor)&&void 0!==C?C:a.COLORS.content.secondary,font:{size:a.FONTS.caption.fontSize}},grid:{display:t.orientation!==n.GRAPH_ORIENTATION.HORIZONTAL,color:a.COLORS.background.base},ticks:Object.assign({stepSize:t.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(N=t.xAxis)||void 0===N?void 0:N.stepSize:null===(S=t.yAxis)||void 0===S?void 0:S.stepSize,fontSize:a.FONTS.caption.fontSize,color:null!==(F=t.xAxis.labelColor)&&void 0!==F?F:a.COLORS.content.secondary},b?{min:0,max:2e3,stepSize:200}:{}),stacked:!0}},onClick:(e,i)=>{if(!t.onBarClick)return;const o=i[0].datasetIndex,a=i[0].index,n=e.chart.data.datasets[o].label,l=e.chart.data.labels[a];t.onBarClick(l,n)},onHover:(e,i)=>{t.onBarClick&&i.length&&(e.native.target.style.cursor="pointer")}},P={labels:t.xAxis.data.map((e=>"string"==typeof e?e:e.name)),datasets:b?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:j};return e.jsxs(l.GraphContainerWrapper,Object.assign({padding:t.outerPadding},{children:[t.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(o.TitleRegular,Object.assign({color:null!==(h=t.chartHeading.color)&&void 0!==h?h:a.COLORS.content.secondary},{children:t.chartHeading.heading}))})),e.jsx("div",Object.assign({style:{height:null!==(I=t.graphCanvasHeight)&&void 0!==I?I:500}},{children:e.jsx(i.Bar,{options:m,data:P})}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime"),e=require("chart.js"),t=require("react-chartjs-2"),o=require("../../../TypographyStyle.js"),a=require("../../../../constants/Theme.js"),n=require("./StackedBarChart.model.js"),l=require("./StackedBarChart.styles.js");e.Chart.register(e.CategoryScale,e.LinearScale,e.BarElement,e.Tooltip,e.Legend);exports.StackedBarChart=e=>{var s,r,d,c,O,A,v,x,u,R,y,T,p,g,N,I,C,b,S,F,h,E,H,L,k,j,m,P;const f=0===e.yAxis.data.length,_=e.colorSchema===n.COLOR_SCHEMA.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],z={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barWidth:e.barWidth},G={};e.yAxis.data.map((i=>{i.map((i=>{G[i.name]?G[i.name].push(i.value):G[i.name]=[i.value]}))}));const B=Object.keys(G).map(((i,e)=>Object.assign({label:i,data:G[i],backgroundColor:_[e]},z))),Z={plugins:{legend:{display:!f,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!f}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},indexAxis:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(s=e.yAxis)||void 0===s?void 0:s.title:null===(r=e.xAxis)||void 0===r?void 0:r.title),text:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(d=e.yAxis)||void 0===d?void 0:d.title:null===(c=e.xAxis)||void 0===c?void 0:c.title,color:null!==(v=e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(O=e.yAxis)||void 0===O?void 0:O.titleColor:null===(A=e.xAxis)||void 0===A?void 0:A.titleColor)&&void 0!==v?v:a.COLORS.content.secondary,font:{size:a.FONTS.caption.fontSize}},grid:{display:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL,color:a.COLORS.background.base},ticks:{fontSize:a.FONTS.caption.fontSize,color:null!==(x=e.yAxis.labelColor)&&void 0!==x?x:a.COLORS.content.secondary},stacked:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(u=e.yAxis)||void 0===u?void 0:u.stacked)||(null===(R=e.yAxis)||void 0===R?void 0:R.stacked):"boolean"!=typeof(null===(y=e.xAxis)||void 0===y?void 0:y.stacked)||(null===(T=e.xAxis)||void 0===T?void 0:T.stacked)},y:{title:{display:!!(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(p=e.xAxis)||void 0===p?void 0:p.title:null===(g=e.yAxis)||void 0===g?void 0:g.title),text:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(N=e.xAxis)||void 0===N?void 0:N.title:null===(I=e.yAxis)||void 0===I?void 0:I.title,color:null!==(S=e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(C=e.xAxis)||void 0===C?void 0:C.titleColor:null===(b=e.yAxis)||void 0===b?void 0:b.titleColor)&&void 0!==S?S:a.COLORS.content.secondary,font:{size:a.FONTS.caption.fontSize}},grid:{display:e.orientation!==n.GRAPH_ORIENTATION.HORIZONTAL,color:a.COLORS.background.base},ticks:Object.assign({stepSize:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(F=e.xAxis)||void 0===F?void 0:F.stepSize:null===(h=e.yAxis)||void 0===h?void 0:h.stepSize,fontSize:a.FONTS.caption.fontSize,color:null!==(E=e.xAxis.labelColor)&&void 0!==E?E:a.COLORS.content.secondary},f?{min:0,max:2e3,stepSize:200}:{}),stacked:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(H=e.xAxis)||void 0===H?void 0:H.stacked)||(null===(L=e.xAxis)||void 0===L?void 0:L.stacked):"boolean"!=typeof(null===(k=e.yAxis)||void 0===k?void 0:k.stacked)||(null===(j=e.yAxis)||void 0===j?void 0:j.stacked)}},onClick:(i,t)=>{if(!e.onBarClick)return;const o=t[0].datasetIndex,a=t[0].index,n=i.chart.data.datasets[o].label,l=i.chart.data.labels[a];e.onBarClick(l,n)},onHover:(i,t)=>{e.onBarClick&&t.length&&(i.native.target.style.cursor="pointer")}},D={labels:e.xAxis.data.map((i=>"string"==typeof i?i:i.name)),datasets:f?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:B};return i.jsxs(l.GraphContainerWrapper,Object.assign({padding:e.outerPadding},{children:[e.chartHeading&&i.jsx("div",Object.assign({style:{marginBottom:24}},{children:i.jsx(o.TitleRegular,Object.assign({color:null!==(m=e.chartHeading.color)&&void 0!==m?m:a.COLORS.content.secondary},{children:e.chartHeading.heading}))})),i.jsx("div",Object.assign({style:{height:null!==(P=e.graphCanvasHeight)&&void 0!==P?P:500}},{children:i.jsx(t.Bar,{options:Z,data:D})}))]}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.d.ts

@@ -4,6 +4,7 @@ export interface AxisDetailsI {
     data: XAxisDataI[] | string[];
     labelColor?: string;
     stepSize?: number;
+    stacked?: boolean;
 }
 export interface XAxisDataI {
     name: string;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js

@@ -1 +1 @@
-import{jsxs as t,jsx as i}from"react/jsx-runtime";import{Chart as o,CategoryScale as e,LinearScale as n,BarElement as a,Tooltip as l,Legend as r}from"chart.js";import{Bar as s}from"react-chartjs-2";import{TitleRegular as d}from"../../../TypographyStyle.js";import{COLORS as c,FONTS as v}from"../../../../constants/Theme.js";import{COLOR_SCHEMA as p,GRAPH_ORIENTATION as x}from"./StackedBarChart.model.js";import{GraphContainerWrapper as g}from"./StackedBarChart.styles.js";o.register(e,n,a,l,r);const u=o=>{var e,n,a,l,r,u,y,A,m,b,F,h,O,C,f,S,E,k,H,j;const R=0===o.yAxis.data.length,z=o.colorSchema===p.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],L={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barWidth:o.barWidth},T={};o.yAxis.data.map((t=>{t.map((t=>{T[t.name]?T[t.name].push(t.value):T[t.name]=[t.value]}))}));const I=Object.keys(T).map(((t,i)=>Object.assign({label:t,data:T[t],backgroundColor:z[i]},L))),D={plugins:{legend:{display:!R,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!R}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},indexAxis:o.orientation===x.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(o.orientation===x.HORIZONTAL?null===(e=o.yAxis)||void 0===e?void 0:e.title:null===(n=o.xAxis)||void 0===n?void 0:n.title),text:o.orientation===x.HORIZONTAL?null===(a=o.yAxis)||void 0===a?void 0:a.title:null===(l=o.xAxis)||void 0===l?void 0:l.title,color:null!==(y=o.orientation===x.HORIZONTAL?null===(r=o.yAxis)||void 0===r?void 0:r.titleColor:null===(u=o.xAxis)||void 0===u?void 0:u.titleColor)&&void 0!==y?y:c.content.secondary,font:{size:v.caption.fontSize}},grid:{display:o.orientation===x.HORIZONTAL,color:c.background.base},ticks:{fontSize:v.caption.fontSize,color:null!==(A=o.yAxis.labelColor)&&void 0!==A?A:c.content.secondary},stacked:!0},y:{title:{display:!!(o.orientation===x.HORIZONTAL?null===(m=o.xAxis)||void 0===m?void 0:m.title:null===(b=o.yAxis)||void 0===b?void 0:b.title),text:o.orientation===x.HORIZONTAL?null===(F=o.xAxis)||void 0===F?void 0:F.title:null===(h=o.yAxis)||void 0===h?void 0:h.title,color:null!==(f=o.orientation===x.HORIZONTAL?null===(O=o.xAxis)||void 0===O?void 0:O.titleColor:null===(C=o.yAxis)||void 0===C?void 0:C.titleColor)&&void 0!==f?f:c.content.secondary,font:{size:v.caption.fontSize}},grid:{display:o.orientation!==x.HORIZONTAL,color:c.background.base},ticks:Object.assign({stepSize:o.orientation===x.HORIZONTAL?null===(S=o.xAxis)||void 0===S?void 0:S.stepSize:null===(E=o.yAxis)||void 0===E?void 0:E.stepSize,fontSize:v.caption.fontSize,color:null!==(k=o.xAxis.labelColor)&&void 0!==k?k:c.content.secondary},R?{min:0,max:2e3,stepSize:200}:{}),stacked:!0}},onClick:(t,i)=>{if(!o.onBarClick)return;const e=i[0].datasetIndex,n=i[0].index,a=t.chart.data.datasets[e].label,l=t.chart.data.labels[n];o.onBarClick(l,a)},onHover:(t,i)=>{o.onBarClick&&i.length&&(t.native.target.style.cursor="pointer")}},N={labels:o.xAxis.data.map((t=>"string"==typeof t?t:t.name)),datasets:R?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:I};return t(g,Object.assign({padding:o.outerPadding},{children:[o.chartHeading&&i("div",Object.assign({style:{marginBottom:24}},{children:i(d,Object.assign({color:null!==(H=o.chartHeading.color)&&void 0!==H?H:c.content.secondary},{children:o.chartHeading.heading}))})),i("div",Object.assign({style:{height:null!==(j=o.graphCanvasHeight)&&void 0!==j?j:500}},{children:i(s,{options:D,data:N})}))]}))};export{u as StackedBarChart};
+import{jsxs as i,jsx as o}from"react/jsx-runtime";import{Chart as t,CategoryScale as e,LinearScale as n,BarElement as a,Tooltip as l,Legend as d}from"chart.js";import{Bar as s}from"react-chartjs-2";import{TitleRegular as r}from"../../../TypographyStyle.js";import{COLORS as c,FONTS as v}from"../../../../constants/Theme.js";import{COLOR_SCHEMA as x,GRAPH_ORIENTATION as p}from"./StackedBarChart.model.js";import{GraphContainerWrapper as A}from"./StackedBarChart.styles.js";t.register(e,n,a,l,d);const u=t=>{var e,n,a,l,d,u,y,g,b,m,O,F,h,f,k,C,S,E,H,R,L,T,j,z,I,N,Z,D;const B=0===t.yAxis.data.length,P=t.colorSchema===x.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],W={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barWidth:t.barWidth},q={};t.yAxis.data.map((i=>{i.map((i=>{q[i.name]?q[i.name].push(i.value):q[i.name]=[i.value]}))}));const w=Object.keys(q).map(((i,o)=>Object.assign({label:i,data:q[i],backgroundColor:P[o]},W))),G={plugins:{legend:{display:!B,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!B}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},indexAxis:t.orientation===p.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(t.orientation===p.HORIZONTAL?null===(e=t.yAxis)||void 0===e?void 0:e.title:null===(n=t.xAxis)||void 0===n?void 0:n.title),text:t.orientation===p.HORIZONTAL?null===(a=t.yAxis)||void 0===a?void 0:a.title:null===(l=t.xAxis)||void 0===l?void 0:l.title,color:null!==(y=t.orientation===p.HORIZONTAL?null===(d=t.yAxis)||void 0===d?void 0:d.titleColor:null===(u=t.xAxis)||void 0===u?void 0:u.titleColor)&&void 0!==y?y:c.content.secondary,font:{size:v.caption.fontSize}},grid:{display:t.orientation===p.HORIZONTAL,color:c.background.base},ticks:{fontSize:v.caption.fontSize,color:null!==(g=t.yAxis.labelColor)&&void 0!==g?g:c.content.secondary},stacked:t.orientation===p.HORIZONTAL?"boolean"!=typeof(null===(b=t.yAxis)||void 0===b?void 0:b.stacked)||(null===(m=t.yAxis)||void 0===m?void 0:m.stacked):"boolean"!=typeof(null===(O=t.xAxis)||void 0===O?void 0:O.stacked)||(null===(F=t.xAxis)||void 0===F?void 0:F.stacked)},y:{title:{display:!!(t.orientation===p.HORIZONTAL?null===(h=t.xAxis)||void 0===h?void 0:h.title:null===(f=t.yAxis)||void 0===f?void 0:f.title),text:t.orientation===p.HORIZONTAL?null===(k=t.xAxis)||void 0===k?void 0:k.title:null===(C=t.yAxis)||void 0===C?void 0:C.title,color:null!==(H=t.orientation===p.HORIZONTAL?null===(S=t.xAxis)||void 0===S?void 0:S.titleColor:null===(E=t.yAxis)||void 0===E?void 0:E.titleColor)&&void 0!==H?H:c.content.secondary,font:{size:v.caption.fontSize}},grid:{display:t.orientation!==p.HORIZONTAL,color:c.background.base},ticks:Object.assign({stepSize:t.orientation===p.HORIZONTAL?null===(R=t.xAxis)||void 0===R?void 0:R.stepSize:null===(L=t.yAxis)||void 0===L?void 0:L.stepSize,fontSize:v.caption.fontSize,color:null!==(T=t.xAxis.labelColor)&&void 0!==T?T:c.content.secondary},B?{min:0,max:2e3,stepSize:200}:{}),stacked:t.orientation===p.HORIZONTAL?"boolean"!=typeof(null===(j=t.xAxis)||void 0===j?void 0:j.stacked)||(null===(z=t.xAxis)||void 0===z?void 0:z.stacked):"boolean"!=typeof(null===(I=t.yAxis)||void 0===I?void 0:I.stacked)||(null===(N=t.yAxis)||void 0===N?void 0:N.stacked)}},onClick:(i,o)=>{if(!t.onBarClick)return;const e=o[0].datasetIndex,n=o[0].index,a=i.chart.data.datasets[e].label,l=i.chart.data.labels[n];t.onBarClick(l,a)},onHover:(i,o)=>{t.onBarClick&&o.length&&(i.native.target.style.cursor="pointer")}},J={labels:t.xAxis.data.map((i=>"string"==typeof i?i:i.name)),datasets:B?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:w};return i(A,Object.assign({padding:t.outerPadding},{children:[t.chartHeading&&o("div",Object.assign({style:{marginBottom:24}},{children:o(r,Object.assign({color:null!==(Z=t.chartHeading.color)&&void 0!==Z?Z:c.content.secondary},{children:t.chartHeading.heading}))})),o("div",Object.assign({style:{height:null!==(D=t.graphCanvasHeight)&&void 0!==D?D:500}},{children:o(s,{options:G,data:J})}))]}))};export{u as StackedBarChart};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.d.ts

@@ -4,6 +4,7 @@ export interface AxisDetailsI {
     data: XAxisDataI[] | string[];
     labelColor?: string;
     stepSize?: number;
+    stacked?: boolean;
 }
 export interface XAxisDataI {
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.455-analyticsv3-08",
+	"version": "0.0.455-analyticsv3-09",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",