@bikdotai/bik-component-library 0.0.640-beta.help-attr.12 → 0.0.640-beta.help-attr.13

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../../../assets/icons/ChartBar.svg.js"),i=require("../../../../assets/icons/ChartPie.svg.js"),o=require("../../../../assets/icons/maximize.svg.js"),a=require("chart.js"),l=require("react"),s=require("react-chartjs-2"),n=require("../Pie/PieChartAnalytics.js"),r=require("../../../icon-button/IconButton.js"),d=require("../../../modals/styledModal.js"),c=require("../../../TypographyStyle.js"),p=require("../../../../constants/Theme.js"),u=require("./VerticalGraph.styles.js");a.Chart.register(a.CategoryScale,a.LinearScale,a.BarElement,a.Tooltip);exports.VerticalGraph=a=>{var x,g,v,b,y,h,C,S,A,f,j,O,k,m,z,$,D,T,R,P,q,B,F;const[L,I]=l.useState(!1),[N,w]=l.useState(!1),[E,H]=l.useState();l.useEffect((()=>{var t;const e=[];N&&(null===(t=a.popupData)||void 0===t||t.xAxis.data.forEach(((t,i)=>{var o;e.push({name:t.toString(),count:Number(null===(o=a.popupData)||void 0===o?void 0:o.yAxis.data[i])||0})})),H(e))}),[N,null===(x=a.popupData)||void 0===x?void 0:x.xAxis.data,null===(g=a.popupData)||void 0===g?void 0:g.yAxis.data]);const G=[250,1e3,800,1500,300,600],M=-1===a.yAxis.data.findIndex((t=>0!==t)),V=-1===(null===(v=a.popupData)||void 0===v?void 0:v.yAxis.data.findIndex((t=>0!==t))),_={min:0,max:2e3,stepSize:200},W={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!M,callbacks:{label:a.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!a.xAxis.title,text:a.xAxis.title,color:a.xAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{display:!1,borderColor:p.COLORS.background.base},ticks:{fontSize:p.FONTS.caption.fontSize,color:null!==(b=a.yAxis.labelColor)&&void 0!==b?b:p.COLORS.content.secondary}},y:{title:{display:!!a.yAxis.title,text:a.yAxis.title,color:a.yAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{borderColor:"white",color:p.COLORS.background.base},ticks:Object.assign({callback:a.yAxis.ticksCallback,fontSize:p.FONTS.caption.fontSize,color:null!==(y=a.xAxis.labelColor)&&void 0!==y?y:p.COLORS.content.secondary},M?_:{})}},maintainAspectRatio:!1},J={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!V,callbacks:{label:a.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!(null===(h=a.popupData)||void 0===h?void 0:h.xAxis.title),text:null===(C=a.popupData)||void 0===C?void 0:C.xAxis.title,color:null===(S=a.popupData)||void 0===S?void 0:S.xAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{display:!1,borderColor:p.COLORS.background.base},ticks:{fontSize:p.FONTS.caption.fontSize,color:null!==(f=null===(A=a.popupData)||void 0===A?void 0:A.yAxis.labelColor)&&void 0!==f?f:p.COLORS.content.secondary}},y:{title:{display:!!(null===(j=a.popupData)||void 0===j?void 0:j.yAxis.title),text:null===(O=a.popupData)||void 0===O?void 0:O.yAxis.title,color:null===(k=a.popupData)||void 0===k?void 0:k.yAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{borderColor:"white",color:p.COLORS.background.base},ticks:Object.assign({callback:null===(m=a.popupData)||void 0===m?void 0:m.yAxis.ticksCallback,fontSize:p.FONTS.caption.fontSize,color:null!==($=null===(z=a.popupData)||void 0===z?void 0:z.xAxis.labelColor)&&void 0!==$?$:p.COLORS.content.secondary},V?_:{})}},maintainAspectRatio:!1},K={labels:a.xAxis.data.map((t=>t.toString())),datasets:[{data:M?G:a.yAxis.data,backgroundColor:t=>{var e;const i=a.barColorRGBA;let o=[];const l=a.xAxis.data.length;if(M)return"rgba(0,0,0,0)";if(a.isFunnel){let t=+(l>10?.1:(1/l).toFixed(2));const e=`rgba(${i.r}, ${i.g}, ${i.b}`;for(let i=1;i<l+1;i++){let a="";i>10?a=`${e},1)`:(a=`${e},${t})`,t+=.1),o.push(a)}}else{const t=`rgba(${i.r}, ${i.g}, ${i.b}, ${null!==(e=i.a)&&void 0!==e?e:"1"})`;o=Array(l).fill(t)}return o},barPercentage:.4,categoryPercentage:1,borderRadius:4}]},Q={labels:null===(D=a.popupData)||void 0===D?void 0:D.xAxis.data.map((t=>t.toString())),datasets:[{data:V?G:null===(T=a.popupData)||void 0===T?void 0:T.yAxis.data,backgroundColor:t=>{var e,i;const o=a.barColorRGBA;let l=[];const s=(null===(e=a.popupData)||void 0===e?void 0:e.xAxis.data.length)||0;if(M)return"rgba(0,0,0,0)";if(a.isFunnel){let t=+(s>10?.1:(1/s).toFixed(2));const e=`rgba(${o.r}, ${o.g}, ${o.b}`;for(let i=1;i<s+1;i++){let o="";i>10?o=`${e},1)`:(o=`${e},${t})`,t+=.1),l.push(o)}}else{const t=`rgba(${o.r}, ${o.g}, ${o.b}, ${null!==(i=o.a)&&void 0!==i?i:"1"})`;l=Array(s).fill(t)}return l},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t.jsxs(u.GraphContainerWrapper,Object.assign({padding:a.outerPadding},{children:[a.chartHeading&&t.jsx("div",Object.assign({style:{marginBottom:24}},{children:t.jsx(c.TitleMedium,Object.assign({color:null!==(R=a.chartHeading.color)&&void 0!==R?R:p.COLORS.content.secondary},{children:a.chartHeading.heading}))})),t.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:[a.showConvertToPieChart&&t.jsx(r.IconButton,{Icon:i.default,onClick:()=>{w(!0),I(!0)}}),a.allowChartPopup&&t.jsx(r.IconButton,{Icon:o.default,onClick:()=>{I(!0)}})]})),t.jsx("div",Object.assign({style:{height:null!==(P=a.graphCanvasHeight)&&void 0!==P?P:500}},{children:t.jsx(s.Bar,{options:W,data:K})})),L&&t.jsxs(d.StyledModal,Object.assign({open:L,onClose:()=>{I(!1),w(!1)},closeOnOutsideClick:!0,headingTitle:null===(q=a.popupData)||void 0===q?void 0:q.chartHeading,width:"75%",headerRightCustomElement:a.showConvertToPieChart?N?t.jsx(r.IconButton,{Icon:e.default,onClick:()=>{w(!1)}}):t.jsx(r.IconButton,{Icon:i.default,onClick:()=>{w(!0)}}):null,headerLeftCustomElement:null===(B=a.popupData)||void 0===B?void 0:B.headerLeftCustomElement},{children:[N&&E&&t.jsx("div",Object.assign({style:{padding:"24px"}},{children:t.jsx(n.PieChartAnalytics,{slices:E,size:a.pieChartSize,hideTitle:!0,currencyProps:a.currencyProps})})),!N&&t.jsx("div",Object.assign({style:{height:null!==(F=a.graphCanvasHeight)&&void 0!==F?F:500}},{children:t.jsx(s.Bar,{options:J,data:Q})}))]}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../../../assets/icons/ChartBar.svg.js"),i=require("../../../../assets/icons/ChartPie.svg.js"),o=require("../../../../assets/icons/maximize.svg.js"),a=require("chart.js"),l=require("react"),s=require("react-chartjs-2"),n=require("../Pie/PieChartAnalytics.js"),r=require("../../../icon-button/IconButton.js"),d=require("../../../modals/styledModal.js"),c=require("../../../TypographyStyle.js"),p=require("../../../../constants/Theme.js"),u=require("./VerticalGraph.styles.js");a.Chart.register(a.CategoryScale,a.LinearScale,a.BarElement,a.Tooltip);exports.VerticalGraph=a=>{var x,g,v,b,h,y,C,S,A,f,j,O,k,m,z,$,D,T,R,P,q,B,F,L;const[I,N]=l.useState(!1),[H,w]=l.useState(!1),[E,G]=l.useState();l.useEffect((()=>{var t;const e=[];H&&(null===(t=a.popupData)||void 0===t||t.xAxis.data.forEach(((t,i)=>{var o;e.push({name:t.toString(),count:Number(null===(o=a.popupData)||void 0===o?void 0:o.yAxis.data[i])||0})})),G(e))}),[H,null===(x=a.popupData)||void 0===x?void 0:x.xAxis.data,null===(g=a.popupData)||void 0===g?void 0:g.yAxis.data]);const M=[250,1e3,800,1500,300,600],V=-1===a.yAxis.data.findIndex((t=>0!==t)),_=-1===(null===(v=a.popupData)||void 0===v?void 0:v.yAxis.data.findIndex((t=>0!==t))),W={min:0,max:2e3,stepSize:200},J={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!V,callbacks:{label:a.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!a.xAxis.title,text:a.xAxis.title,color:a.xAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{display:!1,borderColor:p.COLORS.background.base},ticks:{fontSize:p.FONTS.caption.fontSize,color:null!==(b=a.yAxis.labelColor)&&void 0!==b?b:p.COLORS.content.secondary}},y:{title:{display:!!a.yAxis.title,text:a.yAxis.title,color:a.yAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{borderColor:"white",color:p.COLORS.background.base},ticks:Object.assign({callback:a.yAxis.ticksCallback,fontSize:p.FONTS.caption.fontSize,color:null!==(h=a.xAxis.labelColor)&&void 0!==h?h:p.COLORS.content.secondary},V?W:{})}},maintainAspectRatio:!1},K={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!_,callbacks:{label:a.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!(null===(y=a.popupData)||void 0===y?void 0:y.xAxis.title),text:null===(C=a.popupData)||void 0===C?void 0:C.xAxis.title,color:null===(S=a.popupData)||void 0===S?void 0:S.xAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{display:!1,borderColor:p.COLORS.background.base},ticks:{fontSize:p.FONTS.caption.fontSize,color:null!==(f=null===(A=a.popupData)||void 0===A?void 0:A.yAxis.labelColor)&&void 0!==f?f:p.COLORS.content.secondary}},y:{title:{display:!!(null===(j=a.popupData)||void 0===j?void 0:j.yAxis.title),text:null===(O=a.popupData)||void 0===O?void 0:O.yAxis.title,color:null===(k=a.popupData)||void 0===k?void 0:k.yAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{borderColor:"white",color:p.COLORS.background.base},ticks:Object.assign({callback:null===(m=a.popupData)||void 0===m?void 0:m.yAxis.ticksCallback,fontSize:p.FONTS.caption.fontSize,color:null!==($=null===(z=a.popupData)||void 0===z?void 0:z.xAxis.labelColor)&&void 0!==$?$:p.COLORS.content.secondary},_?W:{})}},maintainAspectRatio:!1},Q={labels:a.xAxis.data.map((t=>t.toString())),datasets:[{data:V?M:a.yAxis.data,backgroundColor:t=>{var e;const i=a.barColorRGBA;let o=[];const l=a.xAxis.data.length;if(V)return"rgba(0,0,0,0)";if(a.isFunnel){let t=+(l>10?.1:(1/l).toFixed(2));const e=`rgba(${i.r}, ${i.g}, ${i.b}`;for(let i=1;i<l+1;i++){let a="";i>10?a=`${e},1)`:(a=`${e},${t})`,t+=.1),o.push(a)}}else{const t=`rgba(${i.r}, ${i.g}, ${i.b}, ${null!==(e=i.a)&&void 0!==e?e:"1"})`;o=Array(l).fill(t)}return o},barPercentage:.4,categoryPercentage:1,borderRadius:4}]},U={labels:null===(D=a.popupData)||void 0===D?void 0:D.xAxis.data.map((t=>t.toString())),datasets:[{data:_?M:null===(T=a.popupData)||void 0===T?void 0:T.yAxis.data,backgroundColor:t=>{var e,i;const o=a.barColorRGBA;let l=[];const s=(null===(e=a.popupData)||void 0===e?void 0:e.xAxis.data.length)||0;if(V)return"rgba(0,0,0,0)";if(a.isFunnel){let t=+(s>10?.1:(1/s).toFixed(2));const e=`rgba(${o.r}, ${o.g}, ${o.b}`;for(let i=1;i<s+1;i++){let o="";i>10?o=`${e},1)`:(o=`${e},${t})`,t+=.1),l.push(o)}}else{const t=`rgba(${o.r}, ${o.g}, ${o.b}, ${null!==(i=o.a)&&void 0!==i?i:"1"})`;l=Array(s).fill(t)}return l},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t.jsxs(u.GraphContainerWrapper,Object.assign({padding:a.outerPadding},{children:[a.chartHeading&&t.jsx("div",Object.assign({style:{marginBottom:24}},{children:t.jsx(c.TitleMedium,Object.assign({color:null!==(R=a.chartHeading.color)&&void 0!==R?R:p.COLORS.content.secondary},{children:a.chartHeading.heading}))})),t.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:[a.showConvertToPieChart&&t.jsx(r.IconButton,{Icon:i.default,onClick:()=>{w(!0),N(!0)}}),a.allowChartPopup&&t.jsx(r.IconButton,{Icon:o.default,onClick:()=>{N(!0)}})]})),t.jsx("div",Object.assign({style:{height:null!==(P=a.graphCanvasHeight)&&void 0!==P?P:500}},{children:t.jsx(s.Bar,{options:J,data:Q})})),I&&t.jsxs(d.StyledModal,Object.assign({open:I,onClose:()=>{N(!1),w(!1)},closeOnOutsideClick:!0,headingTitle:null===(q=a.popupData)||void 0===q?void 0:q.chartHeading,width:"75%",headerRightCustomElement:a.showConvertToPieChart?H?t.jsx(r.IconButton,{Icon:e.default,onClick:()=>{w(!1)}}):t.jsx(r.IconButton,{Icon:i.default,onClick:()=>{w(!0)}}):null,headerLeftCustomElement:null===(B=a.popupData)||void 0===B?void 0:B.headerLeftCustomElement},{children:[H&&E&&t.jsx("div",Object.assign({style:{height:null!==(F=a.graphCanvasHeight)&&void 0!==F?F:500,padding:"24px"}},{children:t.jsx(n.PieChartAnalytics,{slices:E,size:a.pieChartSize,hideTitle:!0,currencyProps:a.currencyProps})})),!H&&t.jsx("div",Object.assign({style:{height:null!==(L=a.graphCanvasHeight)&&void 0!==L?L:500}},{children:t.jsx(s.Bar,{options:K,data:U})}))]}))]}))};

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

@@ -1 +1 @@
-import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"../../../../assets/icons/ChartBar.svg.js";import a from"../../../../assets/icons/ChartPie.svg.js";import e from"../../../../assets/icons/maximize.svg.js";import{Chart as l,CategoryScale as n,LinearScale as s,BarElement as r,Tooltip as d}from"chart.js";import{useState as c,useEffect as p}from"react";import{Bar as u}from"react-chartjs-2";import{PieChartAnalytics as g}from"../Pie/PieChartAnalytics.js";import{IconButton as v}from"../../../icon-button/IconButton.js";import{StyledModal as x}from"../../../modals/styledModal.js";import{TitleMedium as b}from"../../../TypographyStyle.js";import{FONTS as y,COLORS as h}from"../../../../constants/Theme.js";import{GraphContainerWrapper as m}from"./VerticalGraph.styles.js";l.register(n,s,r,d);const f=l=>{var n,s,r,d,f,C,A,k,j,z,$,D,S,P,O,T,I,R,w,H,B,E,F;const[G,L]=c(!1),[M,N]=c(!1),[V,q]=c();p((()=>{var o;const t=[];M&&(null===(o=l.popupData)||void 0===o||o.xAxis.data.forEach(((o,i)=>{var a;t.push({name:o.toString(),count:Number(null===(a=l.popupData)||void 0===a?void 0:a.yAxis.data[i])||0})})),q(t))}),[M,null===(n=l.popupData)||void 0===n?void 0:n.xAxis.data,null===(s=l.popupData)||void 0===s?void 0:s.yAxis.data]);const J=[250,1e3,800,1500,300,600],K=-1===l.yAxis.data.findIndex((o=>0!==o)),Q=-1===(null===(r=l.popupData)||void 0===r?void 0:r.yAxis.data.findIndex((o=>0!==o))),U={min:0,max:2e3,stepSize:200},W={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!K,callbacks:{label:l.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!l.xAxis.title,text:l.xAxis.title,color:l.xAxis.titleColor,font:{size:y.caption.fontSize}},grid:{display:!1,borderColor:h.background.base},ticks:{fontSize:y.caption.fontSize,color:null!==(d=l.yAxis.labelColor)&&void 0!==d?d:h.content.secondary}},y:{title:{display:!!l.yAxis.title,text:l.yAxis.title,color:l.yAxis.titleColor,font:{size:y.caption.fontSize}},grid:{borderColor:"white",color:h.background.base},ticks:Object.assign({callback:l.yAxis.ticksCallback,fontSize:y.caption.fontSize,color:null!==(f=l.xAxis.labelColor)&&void 0!==f?f:h.content.secondary},K?U:{})}},maintainAspectRatio:!1},X={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!Q,callbacks:{label:l.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!(null===(C=l.popupData)||void 0===C?void 0:C.xAxis.title),text:null===(A=l.popupData)||void 0===A?void 0:A.xAxis.title,color:null===(k=l.popupData)||void 0===k?void 0:k.xAxis.titleColor,font:{size:y.caption.fontSize}},grid:{display:!1,borderColor:h.background.base},ticks:{fontSize:y.caption.fontSize,color:null!==(z=null===(j=l.popupData)||void 0===j?void 0:j.yAxis.labelColor)&&void 0!==z?z:h.content.secondary}},y:{title:{display:!!(null===($=l.popupData)||void 0===$?void 0:$.yAxis.title),text:null===(D=l.popupData)||void 0===D?void 0:D.yAxis.title,color:null===(S=l.popupData)||void 0===S?void 0:S.yAxis.titleColor,font:{size:y.caption.fontSize}},grid:{borderColor:"white",color:h.background.base},ticks:Object.assign({callback:null===(P=l.popupData)||void 0===P?void 0:P.yAxis.ticksCallback,fontSize:y.caption.fontSize,color:null!==(T=null===(O=l.popupData)||void 0===O?void 0:O.xAxis.labelColor)&&void 0!==T?T:h.content.secondary},Q?U:{})}},maintainAspectRatio:!1},Y={labels:l.xAxis.data.map((o=>o.toString())),datasets:[{data:K?J:l.yAxis.data,backgroundColor:o=>{var t;const i=l.barColorRGBA;let a=[];const e=l.xAxis.data.length;if(K)return"rgba(0,0,0,0)";if(l.isFunnel){let o=+(e>10?.1:(1/e).toFixed(2));const t=`rgba(${i.r}, ${i.g}, ${i.b}`;for(let i=1;i<e+1;i++){let e="";i>10?e=`${t},1)`:(e=`${t},${o})`,o+=.1),a.push(e)}}else{const o=`rgba(${i.r}, ${i.g}, ${i.b}, ${null!==(t=i.a)&&void 0!==t?t:"1"})`;a=Array(e).fill(o)}return a},barPercentage:.4,categoryPercentage:1,borderRadius:4}]},Z={labels:null===(I=l.popupData)||void 0===I?void 0:I.xAxis.data.map((o=>o.toString())),datasets:[{data:Q?J:null===(R=l.popupData)||void 0===R?void 0:R.yAxis.data,backgroundColor:o=>{var t,i;const a=l.barColorRGBA;let e=[];const n=(null===(t=l.popupData)||void 0===t?void 0:t.xAxis.data.length)||0;if(K)return"rgba(0,0,0,0)";if(l.isFunnel){let o=+(n>10?.1:(1/n).toFixed(2));const t=`rgba(${a.r}, ${a.g}, ${a.b}`;for(let i=1;i<n+1;i++){let a="";i>10?a=`${t},1)`:(a=`${t},${o})`,o+=.1),e.push(a)}}else{const o=`rgba(${a.r}, ${a.g}, ${a.b}, ${null!==(i=a.a)&&void 0!==i?i:"1"})`;e=Array(n).fill(o)}return e},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return o(m,Object.assign({padding:l.outerPadding},{children:[l.chartHeading&&t("div",Object.assign({style:{marginBottom:24}},{children:t(b,Object.assign({color:null!==(w=l.chartHeading.color)&&void 0!==w?w:h.content.secondary},{children:l.chartHeading.heading}))})),o("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:[l.showConvertToPieChart&&t(v,{Icon:a,onClick:()=>{N(!0),L(!0)}}),l.allowChartPopup&&t(v,{Icon:e,onClick:()=>{L(!0)}})]})),t("div",Object.assign({style:{height:null!==(H=l.graphCanvasHeight)&&void 0!==H?H:500}},{children:t(u,{options:W,data:Y})})),G&&o(x,Object.assign({open:G,onClose:()=>{L(!1),N(!1)},closeOnOutsideClick:!0,headingTitle:null===(B=l.popupData)||void 0===B?void 0:B.chartHeading,width:"75%",headerRightCustomElement:l.showConvertToPieChart?t(v,M?{Icon:i,onClick:()=>{N(!1)}}:{Icon:a,onClick:()=>{N(!0)}}):null,headerLeftCustomElement:null===(E=l.popupData)||void 0===E?void 0:E.headerLeftCustomElement},{children:[M&&V&&t("div",Object.assign({style:{padding:"24px"}},{children:t(g,{slices:V,size:l.pieChartSize,hideTitle:!0,currencyProps:l.currencyProps})})),!M&&t("div",Object.assign({style:{height:null!==(F=l.graphCanvasHeight)&&void 0!==F?F:500}},{children:t(u,{options:X,data:Z})}))]}))]}))};export{f as VerticalGraph};
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"../../../../assets/icons/ChartBar.svg.js";import a from"../../../../assets/icons/ChartPie.svg.js";import e from"../../../../assets/icons/maximize.svg.js";import{Chart as l,CategoryScale as n,LinearScale as s,BarElement as r,Tooltip as d}from"chart.js";import{useState as c,useEffect as p}from"react";import{Bar as u}from"react-chartjs-2";import{PieChartAnalytics as g}from"../Pie/PieChartAnalytics.js";import{IconButton as v}from"../../../icon-button/IconButton.js";import{StyledModal as x}from"../../../modals/styledModal.js";import{TitleMedium as b}from"../../../TypographyStyle.js";import{FONTS as h,COLORS as y}from"../../../../constants/Theme.js";import{GraphContainerWrapper as m}from"./VerticalGraph.styles.js";l.register(n,s,r,d);const f=l=>{var n,s,r,d,f,C,A,k,j,z,$,D,S,P,O,T,H,I,R,w,B,E,F,G;const[L,M]=c(!1),[N,V]=c(!1),[q,J]=c();p((()=>{var o;const t=[];N&&(null===(o=l.popupData)||void 0===o||o.xAxis.data.forEach(((o,i)=>{var a;t.push({name:o.toString(),count:Number(null===(a=l.popupData)||void 0===a?void 0:a.yAxis.data[i])||0})})),J(t))}),[N,null===(n=l.popupData)||void 0===n?void 0:n.xAxis.data,null===(s=l.popupData)||void 0===s?void 0:s.yAxis.data]);const K=[250,1e3,800,1500,300,600],Q=-1===l.yAxis.data.findIndex((o=>0!==o)),U=-1===(null===(r=l.popupData)||void 0===r?void 0:r.yAxis.data.findIndex((o=>0!==o))),W={min:0,max:2e3,stepSize:200},X={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!Q,callbacks:{label:l.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!l.xAxis.title,text:l.xAxis.title,color:l.xAxis.titleColor,font:{size:h.caption.fontSize}},grid:{display:!1,borderColor:y.background.base},ticks:{fontSize:h.caption.fontSize,color:null!==(d=l.yAxis.labelColor)&&void 0!==d?d:y.content.secondary}},y:{title:{display:!!l.yAxis.title,text:l.yAxis.title,color:l.yAxis.titleColor,font:{size:h.caption.fontSize}},grid:{borderColor:"white",color:y.background.base},ticks:Object.assign({callback:l.yAxis.ticksCallback,fontSize:h.caption.fontSize,color:null!==(f=l.xAxis.labelColor)&&void 0!==f?f:y.content.secondary},Q?W:{})}},maintainAspectRatio:!1},Y={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!U,callbacks:{label:l.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!(null===(C=l.popupData)||void 0===C?void 0:C.xAxis.title),text:null===(A=l.popupData)||void 0===A?void 0:A.xAxis.title,color:null===(k=l.popupData)||void 0===k?void 0:k.xAxis.titleColor,font:{size:h.caption.fontSize}},grid:{display:!1,borderColor:y.background.base},ticks:{fontSize:h.caption.fontSize,color:null!==(z=null===(j=l.popupData)||void 0===j?void 0:j.yAxis.labelColor)&&void 0!==z?z:y.content.secondary}},y:{title:{display:!!(null===($=l.popupData)||void 0===$?void 0:$.yAxis.title),text:null===(D=l.popupData)||void 0===D?void 0:D.yAxis.title,color:null===(S=l.popupData)||void 0===S?void 0:S.yAxis.titleColor,font:{size:h.caption.fontSize}},grid:{borderColor:"white",color:y.background.base},ticks:Object.assign({callback:null===(P=l.popupData)||void 0===P?void 0:P.yAxis.ticksCallback,fontSize:h.caption.fontSize,color:null!==(T=null===(O=l.popupData)||void 0===O?void 0:O.xAxis.labelColor)&&void 0!==T?T:y.content.secondary},U?W:{})}},maintainAspectRatio:!1},Z={labels:l.xAxis.data.map((o=>o.toString())),datasets:[{data:Q?K:l.yAxis.data,backgroundColor:o=>{var t;const i=l.barColorRGBA;let a=[];const e=l.xAxis.data.length;if(Q)return"rgba(0,0,0,0)";if(l.isFunnel){let o=+(e>10?.1:(1/e).toFixed(2));const t=`rgba(${i.r}, ${i.g}, ${i.b}`;for(let i=1;i<e+1;i++){let e="";i>10?e=`${t},1)`:(e=`${t},${o})`,o+=.1),a.push(e)}}else{const o=`rgba(${i.r}, ${i.g}, ${i.b}, ${null!==(t=i.a)&&void 0!==t?t:"1"})`;a=Array(e).fill(o)}return a},barPercentage:.4,categoryPercentage:1,borderRadius:4}]},_={labels:null===(H=l.popupData)||void 0===H?void 0:H.xAxis.data.map((o=>o.toString())),datasets:[{data:U?K:null===(I=l.popupData)||void 0===I?void 0:I.yAxis.data,backgroundColor:o=>{var t,i;const a=l.barColorRGBA;let e=[];const n=(null===(t=l.popupData)||void 0===t?void 0:t.xAxis.data.length)||0;if(Q)return"rgba(0,0,0,0)";if(l.isFunnel){let o=+(n>10?.1:(1/n).toFixed(2));const t=`rgba(${a.r}, ${a.g}, ${a.b}`;for(let i=1;i<n+1;i++){let a="";i>10?a=`${t},1)`:(a=`${t},${o})`,o+=.1),e.push(a)}}else{const o=`rgba(${a.r}, ${a.g}, ${a.b}, ${null!==(i=a.a)&&void 0!==i?i:"1"})`;e=Array(n).fill(o)}return e},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return o(m,Object.assign({padding:l.outerPadding},{children:[l.chartHeading&&t("div",Object.assign({style:{marginBottom:24}},{children:t(b,Object.assign({color:null!==(R=l.chartHeading.color)&&void 0!==R?R:y.content.secondary},{children:l.chartHeading.heading}))})),o("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:[l.showConvertToPieChart&&t(v,{Icon:a,onClick:()=>{V(!0),M(!0)}}),l.allowChartPopup&&t(v,{Icon:e,onClick:()=>{M(!0)}})]})),t("div",Object.assign({style:{height:null!==(w=l.graphCanvasHeight)&&void 0!==w?w:500}},{children:t(u,{options:X,data:Z})})),L&&o(x,Object.assign({open:L,onClose:()=>{M(!1),V(!1)},closeOnOutsideClick:!0,headingTitle:null===(B=l.popupData)||void 0===B?void 0:B.chartHeading,width:"75%",headerRightCustomElement:l.showConvertToPieChart?t(v,N?{Icon:i,onClick:()=>{V(!1)}}:{Icon:a,onClick:()=>{V(!0)}}):null,headerLeftCustomElement:null===(E=l.popupData)||void 0===E?void 0:E.headerLeftCustomElement},{children:[N&&q&&t("div",Object.assign({style:{height:null!==(F=l.graphCanvasHeight)&&void 0!==F?F:500,padding:"24px"}},{children:t(g,{slices:q,size:l.pieChartSize,hideTitle:!0,currencyProps:l.currencyProps})})),!N&&t("div",Object.assign({style:{height:null!==(G=l.graphCanvasHeight)&&void 0!==G?G:500}},{children:t(u,{options:Y,data:_})}))]}))]}))};export{f as VerticalGraph};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.640-beta.help-attr.12",
+	"version": "0.0.640-beta.help-attr.13",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",
@@ -175,4 +175,4 @@
 	"engines": {
 		"node": ">=20"
 	}
-}
+}