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

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.
@@ -21,5 +21,6 @@ export type LineChartProps = {
21
21
  min?: number;
22
22
  max?: number;
23
23
  isZeroState?: boolean;
24
+ ticksLabelCallback?: (val: string, index: number) => void;
24
25
  };
25
26
  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"),r=require("react"),l=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),o=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:a,labels:s,canvasHeight:d,datas:c,maintainAspectRatio:u=!1,stepSize:g,min:p,max:y,isZeroState:C}=t;var v;const[b,h]=r.useState(null),m=r.useRef();r.useEffect((()=>{var e,t,r,l;if(null===(l=null===(r=null===(t=null===(e=m.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===r?void 0:r.ticks)||void 0===l?void 0:l.length){const e=38*m.current.scales.y.ticks.length;h(e)}}),[m]);const x=c.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?n.COLORS.content.placeholder:n.COLORS.background.brand})));return e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},u?{}:{height:null!==(v=null!=d?d:b)&&void 0!==v?v:204}),{display:"flex",flexDirection:"column",gap:2})},{children:[e.jsx(o.LegendWrapper,{children:x.map(((t,r)=>{let{text:l,color:n}=t;return l?e.jsxs(o.LegendContainer,{children:[e.jsx(o.LegendColor,{color:n}),e.jsx(i.SmallRegular,Object.assign({color:"#667085"},{children:l}))]},r):e.jsx(e.Fragment,{})}))}),e.jsx(l.Line,{ref:m,options:{maintainAspectRatio:u,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:!1,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>n.COLORS.content.primaryInverse,backgroundColor:n.COLORS.content.primary,callbacks:{labelTextColor:()=>n.COLORS.content.primaryInverse},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:C?0:p,max:C?10:y,ticks:{color:n.COLORS.content.secondary,callback:e=>{var t;return`${null!==(t=null==a?void 0:a.yPrefix)&&void 0!==t?t:""}${e}`},font:{family:"inter",size:12,weight:"400"},stepSize:C?1:g},title:{display:!!(null==a?void 0:a.y),text:null==a?void 0:a.y},grid:{color:n.COLORS.background.base}},x:{ticks:{color:n.COLORS.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==a?void 0:a.x),text:null==a?void 0:a.x},grid:{display:!1,drawBorder:!1}}}},data:{labels:s,datasets:c.map(((e,t)=>{var r;return{tension:.4,fill:e.gradient?"start":0,pointRadius:1,borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:2,borderColor:e.lineColor?e.lineColor:e.dotted?n.COLORS.content.placeholder:n.COLORS.background.brand,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,b?b-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"}}))}})]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),r=require("react"),l=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),o=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:a,labels:s,canvasHeight:d,datas:c,maintainAspectRatio:u=!1,stepSize:g,min:p,max:y,isZeroState:C,ticksLabelCallback:b}=t;var v;const[h,m]=r.useState(null),x=r.useRef();r.useEffect((()=>{var e,t,r,l;if(null===(l=null===(r=null===(t=null===(e=x.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===r?void 0:r.ticks)||void 0===l?void 0:l.length){const e=38*x.current.scales.y.ticks.length;m(e)}}),[x]);const O=c.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?n.COLORS.content.placeholder:n.COLORS.background.brand})));return e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},u?{}:{height:null!==(v=null!=d?d:h)&&void 0!==v?v:204}),{display:"flex",flexDirection:"column",gap:2})},{children:[e.jsx(o.LegendWrapper,{children:O.map(((t,r)=>{let{text:l,color:n}=t;return l?e.jsxs(o.LegendContainer,{children:[e.jsx(o.LegendColor,{color:n}),e.jsx(i.SmallRegular,Object.assign({color:"#667085"},{children:l}))]},r):e.jsx(e.Fragment,{})}))}),e.jsx(l.Line,{ref:x,options:{maintainAspectRatio:u,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:!1,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>n.COLORS.content.primaryInverse,backgroundColor:n.COLORS.content.primary,callbacks:{labelTextColor:()=>n.COLORS.content.primaryInverse},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:C?0:p,max:C?10:y,ticks:{color:n.COLORS.content.secondary,callback:e=>{var t;return`${null!==(t=null==a?void 0:a.yPrefix)&&void 0!==t?t:""}${e}`},font:{family:"inter",size:12,weight:"400"},stepSize:C?1:g},title:{display:!!(null==a?void 0:a.y),text:null==a?void 0:a.y},grid:{color:n.COLORS.background.base}},x:{ticks:{callback:b,color:n.COLORS.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==a?void 0:a.x),text:null==a?void 0:a.x},grid:{display:!1,drawBorder:!1}}}},data:{labels:s,datasets:c.map(((e,t)=>{var r;return{tension:.4,fill:e.gradient?"start":0,pointRadius:1,borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:2,borderColor:e.lineColor?e.lineColor:e.dotted?n.COLORS.content.placeholder:n.COLORS.background.brand,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,h?h-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"}}))}})]}))};
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
@@ -21,5 +21,6 @@ export type LineChartProps = {
21
21
  min?: number;
22
22
  max?: number;
23
23
  isZeroState?: boolean;
24
+ ticksLabelCallback?: (val: string, index: number) => void;
24
25
  };
25
26
  export declare const LineChart: React.FC<LineChartProps>;
@@ -1 +1 @@
1
- import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import{Chart as r,CategoryScale as i,LinearScale as l,PointElement as n,BarElement as a,LineElement as s,ArcElement as d,Filler as c,Title as p,Tooltip as m,Legend as u}from"chart.js";import{useState as g,useRef as y,useEffect as v}from"react";import{Line as b}from"react-chartjs-2";import{SmallRegular as h}from"../../../TypographyStyle.js";import{COLORS as f}from"../../../../constants/Theme.js";import{LegendWrapper as x,LegendContainer as C,LegendColor as k}from"./LineChart.styled.js";r.register(i,l,n,a,s,d,c,p,m,u);const j=r=>{let{scaleText:i,labels:l,canvasHeight:n,datas:a,maintainAspectRatio:s=!1,stepSize:d,min:c,max:p,isZeroState:m}=r;var u;const[j,z]=g(null),S=y();v((()=>{var t,e,o,r;if(null===(r=null===(o=null===(e=null===(t=S.current)||void 0===t?void 0:t.scales)||void 0===e?void 0:e.y)||void 0===o?void 0:o.ticks)||void 0===r?void 0:r.length){const t=38*S.current.scales.y.ticks.length;z(t)}}),[S]);const w=a.map((t=>({text:t.legend,color:t.lineColor?t.lineColor:t.dotted?f.content.placeholder:f.background.brand})));return t("div",Object.assign({style:Object.assign(Object.assign({},s?{}:{height:null!==(u=null!=n?n:j)&&void 0!==u?u:204}),{display:"flex",flexDirection:"column",gap:2})},{children:[e(x,{children:w.map(((r,i)=>{let{text:l,color:n}=r;return l?t(C,{children:[e(k,{color:n}),e(h,Object.assign({color:"#667085"},{children:l}))]},i):e(o,{})}))}),e(b,{ref:S,options:{maintainAspectRatio:s,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:!1,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>f.content.primaryInverse,backgroundColor:f.content.primary,callbacks:{labelTextColor:()=>f.content.primaryInverse},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:m?0:c,max:m?10:p,ticks:{color:f.content.secondary,callback:t=>{var e;return`${null!==(e=null==i?void 0:i.yPrefix)&&void 0!==e?e:""}${t}`},font:{family:"inter",size:12,weight:"400"},stepSize:m?1:d},title:{display:!!(null==i?void 0:i.y),text:null==i?void 0:i.y},grid:{color:f.background.base}},x:{ticks:{color:f.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==i?void 0:i.x),text:null==i?void 0:i.x},grid:{display:!1,drawBorder:!1}}}},data:{labels:l,datasets:a.map(((t,e)=>{var o;return{tension:.4,fill:t.gradient?"start":0,pointRadius:1,borderDash:t.dotted?[8,3]:void 0,data:t.data,borderWidth:2,borderColor:t.lineColor?t.lineColor:t.dotted?f.content.placeholder:f.background.brand,backgroundColor:t.gradient?t=>{const e=t.chart.ctx.createLinearGradient(0,0,0,j?j-75:150);return e.addColorStop(0,"#F1EEFB"),e.addColorStop(1,"rgba(127, 86, 217, 0)"),e}:null!==(o=t.backgroundColor)&&void 0!==o?o:"transparent"}}))}})]}))};export{j as LineChart};
1
+ import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import{Chart as r,CategoryScale as l,LinearScale as i,PointElement as n,BarElement as a,LineElement as s,ArcElement as d,Filler as c,Title as p,Tooltip as m,Legend as u}from"chart.js";import{useState as g,useRef as y,useEffect as b}from"react";import{Line as v}from"react-chartjs-2";import{SmallRegular as h}from"../../../TypographyStyle.js";import{COLORS as f}from"../../../../constants/Theme.js";import{LegendWrapper as x,LegendContainer as k,LegendColor as C}from"./LineChart.styled.js";r.register(l,i,n,a,s,d,c,p,m,u);const j=r=>{let{scaleText:l,labels:i,canvasHeight:n,datas:a,maintainAspectRatio:s=!1,stepSize:d,min:c,max:p,isZeroState:m,ticksLabelCallback:u}=r;var j;const[z,S]=g(null),w=y();b((()=>{var t,e,o,r;if(null===(r=null===(o=null===(e=null===(t=w.current)||void 0===t?void 0:t.scales)||void 0===e?void 0:e.y)||void 0===o?void 0:o.ticks)||void 0===r?void 0:r.length){const t=38*w.current.scales.y.ticks.length;S(t)}}),[w]);const F=a.map((t=>({text:t.legend,color:t.lineColor?t.lineColor:t.dotted?f.content.placeholder:f.background.brand})));return t("div",Object.assign({style:Object.assign(Object.assign({},s?{}:{height:null!==(j=null!=n?n:z)&&void 0!==j?j:204}),{display:"flex",flexDirection:"column",gap:2})},{children:[e(x,{children:F.map(((r,l)=>{let{text:i,color:n}=r;return i?t(k,{children:[e(C,{color:n}),e(h,Object.assign({color:"#667085"},{children:i}))]},l):e(o,{})}))}),e(v,{ref:w,options:{maintainAspectRatio:s,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:!1,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>f.content.primaryInverse,backgroundColor:f.content.primary,callbacks:{labelTextColor:()=>f.content.primaryInverse},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:m?0:c,max:m?10:p,ticks:{color:f.content.secondary,callback:t=>{var e;return`${null!==(e=null==l?void 0:l.yPrefix)&&void 0!==e?e:""}${t}`},font:{family:"inter",size:12,weight:"400"},stepSize:m?1:d},title:{display:!!(null==l?void 0:l.y),text:null==l?void 0:l.y},grid:{color:f.background.base}},x:{ticks:{callback:u,color:f.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==l?void 0:l.x),text:null==l?void 0:l.x},grid:{display:!1,drawBorder:!1}}}},data:{labels:i,datasets:a.map(((t,e)=>{var o;return{tension:.4,fill:t.gradient?"start":0,pointRadius:1,borderDash:t.dotted?[8,3]:void 0,data:t.data,borderWidth:2,borderColor:t.lineColor?t.lineColor:t.dotted?f.content.placeholder:f.background.brand,backgroundColor:t.gradient?t=>{const e=t.chart.ctx.createLinearGradient(0,0,0,z?z-75:150);return e.addColorStop(0,"#F1EEFB"),e.addColorStop(1,"rgba(127, 86, 217, 0)"),e}:null!==(o=t.backgroundColor)&&void 0!==o?o:"transparent"}}))}})]}))};export{j as LineChart};
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.455-analyticsv3-07",
3
+ "version": "0.0.455-analyticsv3-08",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",