@bikdotai/bik-component-library 0.0.718-beta.12 → 0.0.718-beta.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/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraphModel.d.ts +3 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraphModel.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../node_modules/react/jsx-runtime.js"),i=require("chart.js"),t=require("react-chartjs-2"),r=require("../../../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../node_modules/react/jsx-runtime.js"),i=require("chart.js"),t=require("react-chartjs-2"),r=require("../../../TypographyStyle.js"),a=require("../../../../constants/Theme.js"),o=require("../LineChart/LineChart.styled.js"),n=require("../utils/calcPercentage.js"),s=require("./VerticalBarAndLinearGraph.styles.js");i.Chart.register(i.CategoryScale,i.LinearScale,i.BarElement,i.Tooltip);exports.VerticalBarAndLinearGraph=i=>{var l,x,d,c,p,u;const g=[0,0,0,0,0,0],b=-1===i.barAxis.data.findIndex((e=>0!==e)),A=-1===i.lineAxis.data.findIndex((e=>0!==e)),j=!i.lineAxis2||-1===i.lineAxis2.data.findIndex((e=>0!==e)),S={min:0,max:2e3,stepSize:200},h=[{legend:i.barAxis.title,color:i.barAxis.graphColor},{legend:i.lineAxis.title,color:i.lineAxis.graphColor},...i.lineAxis2?[{legend:i.lineAxis2.title,color:i.lineAxis2.graphColor}]:[]],C={responsive:!0,plugins:{legend:{display:!1}},scales:{x:{title:{display:!!i.xAxis.title,text:i.xAxis.title,color:i.xAxis.titleColor,font:{size:a.FONTS.caption.fontSize}},grid:{display:!1,borderColor:a.COLORS.background.base},ticks:{fontSize:a.FONTS.caption.fontSize,color:null!==(l=i.xAxis.labelColor)&&void 0!==l?l:a.COLORS.content.secondary,callback:(null===(x=i.xAxis)||void 0===x?void 0:x.axisSuffix)?e=>`${e}${i.xAxis.axisSuffix}`:void 0}},bar:{position:"left",title:{display:!!i.barAxis.title,text:i.barAxis.title,color:i.barAxis.titleColor,font:{size:a.FONTS.caption.fontSize}},grid:{borderColor:"white",color:a.COLORS.background.base},ticks:Object.assign(Object.assign({fontSize:a.FONTS.caption.fontSize,color:null!==(d=i.barAxis.labelColor)&&void 0!==d?d:a.COLORS.content.secondary},b?S:{}),{callback:e=>{var t;return`${i.isInternationalStore?n.truncateValueForInternationalStore(e):n.truncateValueForIndianStore(e)}${(null===(t=i.barAxis)||void 0===t?void 0:t.axisSuffix)||""}`}})},line:{position:"right",title:{display:!!i.lineAxis.title,text:i.lineAxis.title,color:i.lineAxis.titleColor,font:{size:a.FONTS.caption.fontSize}},grid:{display:!1,borderColor:"white",color:a.COLORS.background.base},ticks:Object.assign(Object.assign({fontSize:a.FONTS.caption.fontSize,color:null!==(c=i.lineAxis.labelColor)&&void 0!==c?c:a.COLORS.content.secondary},A?S:{}),{callback:e=>{var t;return`${i.isInternationalStore?n.truncateValueForInternationalStore(e):n.truncateValueForIndianStore(e)}${(null===(t=i.lineAxis)||void 0===t?void 0:t.axisSuffix)||""}`}}),display:!0}},maintainAspectRatio:!1},O={labels:i.xAxis.forceShowXAxis?i.xAxis.data.map((e=>e.toString())):b&&A&&j?["-","-","-","-","-","-"]:i.xAxis.data.map((e=>e.toString())),datasets:[{yAxisID:"line",type:"line",data:A?g:i.lineAxis.data,borderColor:i.lineAxis.graphColor||"rgba(0,0,0,0)",borderWidth:2,fill:!1,pointRadius:1},...i.lineAxis2?[{yAxisID:"line",type:"line",data:j?g:i.lineAxis2.data,borderColor:i.lineAxis2.graphColor||"rgba(0,0,0,0)",borderWidth:2,fill:!1,pointRadius:1}]:[],{yAxisID:"bar",type:"bar",data:b?g:i.barAxis.data,backgroundColor:i.barAxis.graphColor||"rgba(0,0,0,0)",barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return e.jsxRuntimeExports.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:2}},{children:[e.jsxRuntimeExports.jsx(o.LegendWrapper,Object.assign({position:"center"},{children:h.map(((i,t)=>{let{legend:a,color:n}=i;return a?e.jsxRuntimeExports.jsxs(o.LegendContainer,{children:[e.jsxRuntimeExports.jsx(o.LegendColor,{color:n}),e.jsxRuntimeExports.jsx(r.SmallRegular,Object.assign({color:"#667085"},{children:a}))]},t):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{})}))})),e.jsxRuntimeExports.jsxs(s.GraphContainerWrapper,{children:[i.chartHeading&&e.jsxRuntimeExports.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsxRuntimeExports.jsx(r.TitleRegular,Object.assign({color:null!==(p=i.chartHeading.color)&&void 0!==p?p:a.COLORS.content.secondary},{children:i.chartHeading.heading}))})),e.jsxRuntimeExports.jsx("div",Object.assign({style:{height:null!==(u=i.graphCanvasHeight)&&void 0!==u?u:500}},{children:e.jsxRuntimeExports.jsx(t.Chart,{type:"bar",data:O,options:C})}))]})]}))};
|
|
@@ -4,6 +4,7 @@ export interface AxisDetailsI {
|
|
|
4
4
|
data: number[] | string[];
|
|
5
5
|
labelColor?: string;
|
|
6
6
|
graphColor?: string;
|
|
7
|
+
axisSuffix?: string;
|
|
7
8
|
}
|
|
8
9
|
export interface ChartHeadingI {
|
|
9
10
|
heading: string;
|
|
@@ -18,5 +19,7 @@ export interface VerticalBarAndLinearGraphI {
|
|
|
18
19
|
forceShowXAxis?: boolean;
|
|
19
20
|
};
|
|
20
21
|
lineAxis: AxisDetailsI;
|
|
22
|
+
lineAxis2?: AxisDetailsI;
|
|
21
23
|
barAxis: AxisDetailsI;
|
|
24
|
+
isInternationalStore?: boolean;
|
|
22
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as i}from"../../../../node_modules/react/jsx-runtime.js";import{Chart as
|
|
1
|
+
import{j as i}from"../../../../node_modules/react/jsx-runtime.js";import{Chart as e,CategoryScale as t,LinearScale as o,BarElement as r,Tooltip as a}from"chart.js";import{Chart as l}from"react-chartjs-2";import{SmallRegular as s,TitleRegular as n}from"../../../TypographyStyle.js";import{FONTS as d,COLORS as c}from"../../../../constants/Theme.js";import{LegendWrapper as x,LegendContainer as g,LegendColor as p}from"../LineChart/LineChart.styled.js";import{truncateValueForInternationalStore as b,truncateValueForIndianStore as A}from"../utils/calcPercentage.js";import{GraphContainerWrapper as f}from"./VerticalBarAndLinearGraph.styles.js";e.register(t,o,r,a);const h=e=>{var t,o,r,a,h,j;const m=[0,0,0,0,0,0],u=-1===e.barAxis.data.findIndex((i=>0!==i)),y=-1===e.lineAxis.data.findIndex((i=>0!==i)),C=!e.lineAxis2||-1===e.lineAxis2.data.findIndex((i=>0!==i)),v={min:0,max:2e3,stepSize:200},S=[{legend:e.barAxis.title,color:e.barAxis.graphColor},{legend:e.lineAxis.title,color:e.lineAxis.graphColor},...e.lineAxis2?[{legend:e.lineAxis2.title,color:e.lineAxis2.graphColor}]:[]],z={responsive:!0,plugins:{legend:{display:!1}},scales:{x:{title:{display:!!e.xAxis.title,text:e.xAxis.title,color:e.xAxis.titleColor,font:{size:d.caption.fontSize}},grid:{display:!1,borderColor:c.background.base},ticks:{fontSize:d.caption.fontSize,color:null!==(t=e.xAxis.labelColor)&&void 0!==t?t:c.content.secondary,callback:(null===(o=e.xAxis)||void 0===o?void 0:o.axisSuffix)?i=>`${i}${e.xAxis.axisSuffix}`:void 0}},bar:{position:"left",title:{display:!!e.barAxis.title,text:e.barAxis.title,color:e.barAxis.titleColor,font:{size:d.caption.fontSize}},grid:{borderColor:"white",color:c.background.base},ticks:Object.assign(Object.assign({fontSize:d.caption.fontSize,color:null!==(r=e.barAxis.labelColor)&&void 0!==r?r:c.content.secondary},u?v:{}),{callback:i=>{var t;return`${e.isInternationalStore?b(i):A(i)}${(null===(t=e.barAxis)||void 0===t?void 0:t.axisSuffix)||""}`}})},line:{position:"right",title:{display:!!e.lineAxis.title,text:e.lineAxis.title,color:e.lineAxis.titleColor,font:{size:d.caption.fontSize}},grid:{display:!1,borderColor:"white",color:c.background.base},ticks:Object.assign(Object.assign({fontSize:d.caption.fontSize,color:null!==(a=e.lineAxis.labelColor)&&void 0!==a?a:c.content.secondary},y?v:{}),{callback:i=>{var t;return`${e.isInternationalStore?b(i):A(i)}${(null===(t=e.lineAxis)||void 0===t?void 0:t.axisSuffix)||""}`}}),display:!0}},maintainAspectRatio:!1},k={labels:e.xAxis.forceShowXAxis?e.xAxis.data.map((i=>i.toString())):u&&y&&C?["-","-","-","-","-","-"]:e.xAxis.data.map((i=>i.toString())),datasets:[{yAxisID:"line",type:"line",data:y?m:e.lineAxis.data,borderColor:e.lineAxis.graphColor||"rgba(0,0,0,0)",borderWidth:2,fill:!1,pointRadius:1},...e.lineAxis2?[{yAxisID:"line",type:"line",data:C?m:e.lineAxis2.data,borderColor:e.lineAxis2.graphColor||"rgba(0,0,0,0)",borderWidth:2,fill:!1,pointRadius:1}]:[],{yAxisID:"bar",type:"bar",data:u?m:e.barAxis.data,backgroundColor:e.barAxis.graphColor||"rgba(0,0,0,0)",barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return i.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:2}},{children:[i.jsx(x,Object.assign({position:"center"},{children:S.map(((e,t)=>{let{legend:o,color:r}=e;return o?i.jsxs(g,{children:[i.jsx(p,{color:r}),i.jsx(s,Object.assign({color:"#667085"},{children:o}))]},t):i.jsx(i.Fragment,{})}))})),i.jsxs(f,{children:[e.chartHeading&&i.jsx("div",Object.assign({style:{marginBottom:24}},{children:i.jsx(n,Object.assign({color:null!==(h=e.chartHeading.color)&&void 0!==h?h:c.content.secondary},{children:e.chartHeading.heading}))})),i.jsx("div",Object.assign({style:{height:null!==(j=e.graphCanvasHeight)&&void 0!==j?j:500}},{children:i.jsx(l,{type:"bar",data:k,options:z})}))]})]}))};export{h as VerticalBarAndLinearGraph};
|
|
@@ -4,6 +4,7 @@ export interface AxisDetailsI {
|
|
|
4
4
|
data: number[] | string[];
|
|
5
5
|
labelColor?: string;
|
|
6
6
|
graphColor?: string;
|
|
7
|
+
axisSuffix?: string;
|
|
7
8
|
}
|
|
8
9
|
export interface ChartHeadingI {
|
|
9
10
|
heading: string;
|
|
@@ -18,5 +19,7 @@ export interface VerticalBarAndLinearGraphI {
|
|
|
18
19
|
forceShowXAxis?: boolean;
|
|
19
20
|
};
|
|
20
21
|
lineAxis: AxisDetailsI;
|
|
22
|
+
lineAxis2?: AxisDetailsI;
|
|
21
23
|
barAxis: AxisDetailsI;
|
|
24
|
+
isInternationalStore?: boolean;
|
|
22
25
|
}
|