@bikdotai/bik-component-library 0.0.64-0.beta.help-attr-2 → 0.0.64-0.beta.help-attr-3

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.640.beta.help-attr-2",
+	"version": "0.0.640.beta.help-attr-3",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",