@bikdotai/bik-component-library 0.0.669-beta.0 → 0.0.670-beta.1
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/LineChart/LineChart.d.ts +11 -0
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.d.ts +11 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/package.json +1 -1
|
@@ -11,14 +11,18 @@ export type LineChartProps = {
|
|
|
11
11
|
legend?: string;
|
|
12
12
|
lineWidth?: number;
|
|
13
13
|
squareLegends?: boolean;
|
|
14
|
+
useSecondYAxis?: boolean;
|
|
14
15
|
}[];
|
|
15
16
|
labels: Array<string>;
|
|
16
17
|
scaleText?: {
|
|
17
18
|
x?: string;
|
|
18
19
|
y?: string;
|
|
19
20
|
yPrefix?: string;
|
|
21
|
+
y2?: string;
|
|
22
|
+
y2Prefix?: string;
|
|
20
23
|
xDrawBorder?: boolean;
|
|
21
24
|
yDrawBorder?: boolean;
|
|
25
|
+
y2DrawBorder?: boolean;
|
|
22
26
|
};
|
|
23
27
|
legends: Array<string>;
|
|
24
28
|
stepSize?: number;
|
|
@@ -39,5 +43,12 @@ export type LineChartProps = {
|
|
|
39
43
|
customYHeaders?: any;
|
|
40
44
|
legendsAndIconDirection?: 'row-reverse' | 'row';
|
|
41
45
|
headerIcons?: React.ReactNode[];
|
|
46
|
+
hasSecondYAxis?: boolean;
|
|
47
|
+
min2?: number;
|
|
48
|
+
max2?: number;
|
|
49
|
+
stepSize2?: number;
|
|
50
|
+
prefixCurrencyInY2Axis?: string;
|
|
51
|
+
useKFormat2?: boolean;
|
|
52
|
+
customY2Headers?: any;
|
|
42
53
|
};
|
|
43
54
|
export declare const LineChart: React.FC<LineChartProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),n=require("react"),l=require("react-chartjs-2"),r=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),o=require("../utils/calcPercentage.js"),a=require("./LineChart.styled.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.PointElement,t.BarElement,t.LineElement,t.ArcElement,t.Filler,t.Title,t.Tooltip,t.Legend);exports.LineChart=t=>{let{scaleText:s,labels:d,canvasHeight:c,datas:u,maintainAspectRatio:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),n=require("react"),l=require("react-chartjs-2"),r=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),o=require("../utils/calcPercentage.js"),a=require("./LineChart.styled.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.PointElement,t.BarElement,t.LineElement,t.ArcElement,t.Filler,t.Title,t.Tooltip,t.Legend);exports.LineChart=t=>{let{scaleText:s,labels:d,canvasHeight:c,datas:u,maintainAspectRatio:y=!1,stepSize:g,min:p,max:v,isZeroState:x,tension:b,isNewStyles:h,prefixCurrencyInYAxis:C,pointRadius:O,useKFormat:m,lineThickness:S,ticksLabelCallback:j,labelCallback:f,afterBodyCallBack:L,titleTooltipCallback:k,isInternationalStore:R,customYHeaders:w,headerIcons:B=[],legendsAndIconDirection:q="row",hasSecondYAxis:F=!1,min2:I,max2:$,stepSize2:A,prefixCurrencyInY2Axis:z,useKFormat2:T,customY2Headers:D}=t;var E,P,Y,V;const[W,H]=n.useState(null),Z=n.useRef();n.useEffect((()=>{var e,t,n,l;if(null===(l=null===(n=null===(t=null===(e=Z.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===n?void 0:n.ticks)||void 0===l?void 0:l.length){const e=38*Z.current.scales.y.ticks.length;H(e)}}),[Z]);const K=u.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?i.COLORS.content.placeholder:i.COLORS.background.brand,square:e.squareLegends}))),_={labels:d,datasets:u.map(((e,t)=>{var n,l,r;return Object.assign(Object.assign({tension:null!=b?b:.4,fill:e.gradient?"start":0},((e,t)=>{const n={borderColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)};return h?Object.assign({pointStyle:"circle",pointRadius:O||(d&&d.length>10?2.5:4),pointBorderColor:"transparent",pointBackgroundColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)},n):Object.assign({pointRadius:null!=O?O:1},n)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(l=null!==(n=e.lineWidth)&&void 0!==n?n:S)&&void 0!==l?l:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,W?W-75:150);return t.addColorStop(0,"#F1EEFB"),t.addColorStop(1,"rgba(127, 86, 217, 0)"),t}:null!==(r=e.backgroundColor)&&void 0!==r?r:"transparent",legend:e.legend,yAxisID:e.useSecondYAxis?"y1":"y"})}))},G={maintainAspectRatio:y,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=h&&h,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>i.COLORS.content.primaryInverse,backgroundColor:i.COLORS.content.primary,callbacks:{labelTextColor:()=>i.COLORS.content.primaryInverse,title:k,label:f,afterBody:L},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:x?0:p,max:x?10:v,position:"left",id:"y",ticks:{color:i.COLORS.content.secondary,callback:e=>{var t,n;return m?`${null!==(t=null==s?void 0:s.yPrefix)&&void 0!==t?t:""}${R?o.truncateValueForInternationalStore(e):o.truncateValueForIndianStore(e)}${null!=C?C:""}`:w&&Object.keys(w).length>0?w[e]:`${null!==(n=null==s?void 0:s.yPrefix)&&void 0!==n?n:""}${e}${null!=C?C:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:x?1:g,padding:h?24:0},title:{display:!!(null==s?void 0:s.y),text:null==s?void 0:s.y},grid:{color:i.COLORS.background.base,drawBorder:null===(E=null==s?void 0:s.yDrawBorder)||void 0===E||E}},y1:{beginAtZero:!0,min:x?0:I,max:x?10:$,position:"right",id:"y1",display:F,ticks:{color:i.COLORS.content.secondary,callback:e=>{var t,n;return T?`${null!==(t=null==s?void 0:s.y2Prefix)&&void 0!==t?t:""}${R?o.truncateValueForInternationalStore(e):o.truncateValueForIndianStore(e)}${null!=z?z:""}`:D&&Object.keys(D).length>0?D[e]:`${null!==(n=null==s?void 0:s.y2Prefix)&&void 0!==n?n:""}${e}${null!=z?z:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:x?1:A,padding:h?24:0},title:{display:!!(null==s?void 0:s.y2),text:null==s?void 0:s.y2},grid:{color:"transparent",drawBorder:null===(P=null==s?void 0:s.y2DrawBorder)||void 0===P||P}},x:{ticks:{callback:j,color:i.COLORS.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==s?void 0:s.x),text:null==s?void 0:s.x},grid:{display:!1,drawBorder:null!==(Y=null==s?void 0:s.xDrawBorder)&&void 0!==Y&&Y}}}};return e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},y?{}:{height:null!==(V=null!=c?c:W)&&void 0!==V?V:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",flexDirection:q}},{children:[e.jsx(a.LegendWrapper,{children:B.map(((t,n)=>e.jsx(a.LegendContainer,{children:t},n)))}),e.jsx(a.LegendWrapper,{children:K.map(((t,n)=>{let{text:l,color:i,square:o}=t;return l?e.jsxs(a.LegendContainer,{children:[e.jsx(a.LegendColor,{color:i,square:o,newStyle:h}),e.jsx(r.BodyTiny,Object.assign({color:"#667085"},{children:l}))]},n):e.jsx(e.Fragment,{})}))})]})),e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(l.Line,{ref:Z,options:G,data:_})}))]}))};
|
|
@@ -11,14 +11,18 @@ export type LineChartProps = {
|
|
|
11
11
|
legend?: string;
|
|
12
12
|
lineWidth?: number;
|
|
13
13
|
squareLegends?: boolean;
|
|
14
|
+
useSecondYAxis?: boolean;
|
|
14
15
|
}[];
|
|
15
16
|
labels: Array<string>;
|
|
16
17
|
scaleText?: {
|
|
17
18
|
x?: string;
|
|
18
19
|
y?: string;
|
|
19
20
|
yPrefix?: string;
|
|
21
|
+
y2?: string;
|
|
22
|
+
y2Prefix?: string;
|
|
20
23
|
xDrawBorder?: boolean;
|
|
21
24
|
yDrawBorder?: boolean;
|
|
25
|
+
y2DrawBorder?: boolean;
|
|
22
26
|
};
|
|
23
27
|
legends: Array<string>;
|
|
24
28
|
stepSize?: number;
|
|
@@ -39,5 +43,12 @@ export type LineChartProps = {
|
|
|
39
43
|
customYHeaders?: any;
|
|
40
44
|
legendsAndIconDirection?: 'row-reverse' | 'row';
|
|
41
45
|
headerIcons?: React.ReactNode[];
|
|
46
|
+
hasSecondYAxis?: boolean;
|
|
47
|
+
min2?: number;
|
|
48
|
+
max2?: number;
|
|
49
|
+
stepSize2?: number;
|
|
50
|
+
prefixCurrencyInY2Axis?: string;
|
|
51
|
+
useKFormat2?: boolean;
|
|
52
|
+
customY2Headers?: any;
|
|
42
53
|
};
|
|
43
54
|
export declare const LineChart: React.FC<LineChartProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{Chart as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{Chart as i,CategoryScale as n,LinearScale as o,PointElement as r,BarElement as a,LineElement as s,ArcElement as d,Filler as c,Title as u,Tooltip as p,Legend as y}from"chart.js";import{useState as g,useRef as m,useEffect as v}from"react";import{Line as b}from"react-chartjs-2";import{BodyTiny as h}from"../../../TypographyStyle.js";import{COLORS as f}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as x,truncateValueForIndianStore as k}from"../utils/calcPercentage.js";import{LegendWrapper as C,LegendContainer as j,LegendColor as w}from"./LineChart.styled.js";i.register(n,o,r,a,s,d,c,u,p,y);const S=i=>{let{scaleText:n,labels:o,canvasHeight:r,datas:a,maintainAspectRatio:s=!1,stepSize:d,min:c,max:u,isZeroState:p,tension:y,isNewStyles:S,prefixCurrencyInYAxis:B,pointRadius:O,useKFormat:$,lineThickness:A,ticksLabelCallback:z,labelCallback:D,afterBodyCallBack:I,titleTooltipCallback:F,isInternationalStore:T,customYHeaders:Y,headerIcons:P=[],legendsAndIconDirection:R="row",hasSecondYAxis:q=!1,min2:L,max2:H,stepSize2:Z,prefixCurrencyInY2Axis:E,useKFormat2:K,customY2Headers:W}=i;var G,N,J,M;const[Q,U]=g(null),V=m();v((()=>{var e,t,l,i;if(null===(i=null===(l=null===(t=null===(e=V.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===l?void 0:l.ticks)||void 0===i?void 0:i.length){const e=38*V.current.scales.y.ticks.length;U(e)}}),[V]);const X=a.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?f.content.placeholder:f.background.brand,square:e.squareLegends}))),_={labels:o,datasets:a.map(((e,t)=>{var l,i,n;return Object.assign(Object.assign({tension:null!=y?y:.4,fill:e.gradient?"start":0},((e,t)=>{const l={borderColor:e||(t?f.content.placeholder:f.background.brand)};return S?Object.assign({pointStyle:"circle",pointRadius:O||(o&&o.length>10?2.5:4),pointBorderColor:"transparent",pointBackgroundColor:e||(t?f.content.placeholder:f.background.brand)},l):Object.assign({pointRadius:null!=O?O:1},l)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(i=null!==(l=e.lineWidth)&&void 0!==l?l:A)&&void 0!==i?i:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,Q?Q-75:150);return t.addColorStop(0,"#F1EEFB"),t.addColorStop(1,"rgba(127, 86, 217, 0)"),t}:null!==(n=e.backgroundColor)&&void 0!==n?n:"transparent",legend:e.legend,yAxisID:e.useSecondYAxis?"y1":"y"})}))},ee={maintainAspectRatio:s,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=S&&S,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>f.content.primaryInverse,backgroundColor:f.content.primary,callbacks:{labelTextColor:()=>f.content.primaryInverse,title:F,label:D,afterBody:I},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:p?0:c,max:p?10:u,position:"left",id:"y",ticks:{color:f.content.secondary,callback:e=>{var t,l;return $?`${null!==(t=null==n?void 0:n.yPrefix)&&void 0!==t?t:""}${T?x(e):k(e)}${null!=B?B:""}`:Y&&Object.keys(Y).length>0?Y[e]:`${null!==(l=null==n?void 0:n.yPrefix)&&void 0!==l?l:""}${e}${null!=B?B:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:p?1:d,padding:S?24:0},title:{display:!!(null==n?void 0:n.y),text:null==n?void 0:n.y},grid:{color:f.background.base,drawBorder:null===(G=null==n?void 0:n.yDrawBorder)||void 0===G||G}},y1:{beginAtZero:!0,min:p?0:L,max:p?10:H,position:"right",id:"y1",display:q,ticks:{color:f.content.secondary,callback:e=>{var t,l;return K?`${null!==(t=null==n?void 0:n.y2Prefix)&&void 0!==t?t:""}${T?x(e):k(e)}${null!=E?E:""}`:W&&Object.keys(W).length>0?W[e]:`${null!==(l=null==n?void 0:n.y2Prefix)&&void 0!==l?l:""}${e}${null!=E?E:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:p?1:Z,padding:S?24:0},title:{display:!!(null==n?void 0:n.y2),text:null==n?void 0:n.y2},grid:{color:"transparent",drawBorder:null===(N=null==n?void 0:n.y2DrawBorder)||void 0===N||N}},x:{ticks:{callback:z,color:f.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==n?void 0:n.x),text:null==n?void 0:n.x},grid:{display:!1,drawBorder:null!==(J=null==n?void 0:n.xDrawBorder)&&void 0!==J&&J}}}};return e("div",Object.assign({style:Object.assign(Object.assign({},s?{}:{height:null!==(M=null!=r?r:Q)&&void 0!==M?M:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",flexDirection:R}},{children:[t(C,{children:P.map(((e,l)=>t(j,{children:e},l)))}),t(C,{children:X.map(((i,n)=>{let{text:o,color:r,square:a}=i;return o?e(j,{children:[t(w,{color:r,square:a,newStyle:S}),t(h,Object.assign({color:"#667085"},{children:o}))]},n):t(l,{})}))})]})),t("div",Object.assign({style:{flex:1}},{children:t(b,{ref:V,options:ee,data:_})}))]}))};export{S as LineChart};
|