@bikdotai/bik-component-library 0.0.455-analyticsv3-07 → 0.0.455-analyticsv3-09
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 +1 -0
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.d.ts +1 -0
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.d.ts +1 -0
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/package.json +1 -1
|
@@ -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[
|
|
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"}}))}})]}))};
|
package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime"),e=require("chart.js"),t=require("react-chartjs-2"),o=require("../../../TypographyStyle.js"),a=require("../../../../constants/Theme.js"),n=require("./StackedBarChart.model.js"),l=require("./StackedBarChart.styles.js");e.Chart.register(e.CategoryScale,e.LinearScale,e.BarElement,e.Tooltip,e.Legend);exports.StackedBarChart=e=>{var s,r,d,c,O,A,v,x,u,R,y,T,p,g,N,I,C,b,S,F,h,E,H,L,k,j,m,P;const f=0===e.yAxis.data.length,_=e.colorSchema===n.COLOR_SCHEMA.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],z={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barWidth:e.barWidth},G={};e.yAxis.data.map((i=>{i.map((i=>{G[i.name]?G[i.name].push(i.value):G[i.name]=[i.value]}))}));const B=Object.keys(G).map(((i,e)=>Object.assign({label:i,data:G[i],backgroundColor:_[e]},z))),Z={plugins:{legend:{display:!f,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!f}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},indexAxis:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(s=e.yAxis)||void 0===s?void 0:s.title:null===(r=e.xAxis)||void 0===r?void 0:r.title),text:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(d=e.yAxis)||void 0===d?void 0:d.title:null===(c=e.xAxis)||void 0===c?void 0:c.title,color:null!==(v=e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(O=e.yAxis)||void 0===O?void 0:O.titleColor:null===(A=e.xAxis)||void 0===A?void 0:A.titleColor)&&void 0!==v?v:a.COLORS.content.secondary,font:{size:a.FONTS.caption.fontSize}},grid:{display:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL,color:a.COLORS.background.base},ticks:{fontSize:a.FONTS.caption.fontSize,color:null!==(x=e.yAxis.labelColor)&&void 0!==x?x:a.COLORS.content.secondary},stacked:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(u=e.yAxis)||void 0===u?void 0:u.stacked)||(null===(R=e.yAxis)||void 0===R?void 0:R.stacked):"boolean"!=typeof(null===(y=e.xAxis)||void 0===y?void 0:y.stacked)||(null===(T=e.xAxis)||void 0===T?void 0:T.stacked)},y:{title:{display:!!(e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(p=e.xAxis)||void 0===p?void 0:p.title:null===(g=e.yAxis)||void 0===g?void 0:g.title),text:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(N=e.xAxis)||void 0===N?void 0:N.title:null===(I=e.yAxis)||void 0===I?void 0:I.title,color:null!==(S=e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(C=e.xAxis)||void 0===C?void 0:C.titleColor:null===(b=e.yAxis)||void 0===b?void 0:b.titleColor)&&void 0!==S?S:a.COLORS.content.secondary,font:{size:a.FONTS.caption.fontSize}},grid:{display:e.orientation!==n.GRAPH_ORIENTATION.HORIZONTAL,color:a.COLORS.background.base},ticks:Object.assign({stepSize:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?null===(F=e.xAxis)||void 0===F?void 0:F.stepSize:null===(h=e.yAxis)||void 0===h?void 0:h.stepSize,fontSize:a.FONTS.caption.fontSize,color:null!==(E=e.xAxis.labelColor)&&void 0!==E?E:a.COLORS.content.secondary},f?{min:0,max:2e3,stepSize:200}:{}),stacked:e.orientation===n.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(H=e.xAxis)||void 0===H?void 0:H.stacked)||(null===(L=e.xAxis)||void 0===L?void 0:L.stacked):"boolean"!=typeof(null===(k=e.yAxis)||void 0===k?void 0:k.stacked)||(null===(j=e.yAxis)||void 0===j?void 0:j.stacked)}},onClick:(i,t)=>{if(!e.onBarClick)return;const o=t[0].datasetIndex,a=t[0].index,n=i.chart.data.datasets[o].label,l=i.chart.data.labels[a];e.onBarClick(l,n)},onHover:(i,t)=>{e.onBarClick&&t.length&&(i.native.target.style.cursor="pointer")}},D={labels:e.xAxis.data.map((i=>"string"==typeof i?i:i.name)),datasets:f?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:B};return i.jsxs(l.GraphContainerWrapper,Object.assign({padding:e.outerPadding},{children:[e.chartHeading&&i.jsx("div",Object.assign({style:{marginBottom:24}},{children:i.jsx(o.TitleRegular,Object.assign({color:null!==(m=e.chartHeading.color)&&void 0!==m?m:a.COLORS.content.secondary},{children:e.chartHeading.heading}))})),i.jsx("div",Object.assign({style:{height:null!==(P=e.graphCanvasHeight)&&void 0!==P?P:500}},{children:i.jsx(t.Bar,{options:Z,data:D})}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import{Chart as r,CategoryScale as
|
|
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};
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as i,jsx as o}from"react/jsx-runtime";import{Chart as t,CategoryScale as e,LinearScale as n,BarElement as a,Tooltip as l,Legend as d}from"chart.js";import{Bar as s}from"react-chartjs-2";import{TitleRegular as r}from"../../../TypographyStyle.js";import{COLORS as c,FONTS as v}from"../../../../constants/Theme.js";import{COLOR_SCHEMA as x,GRAPH_ORIENTATION as p}from"./StackedBarChart.model.js";import{GraphContainerWrapper as A}from"./StackedBarChart.styles.js";t.register(e,n,a,l,d);const u=t=>{var e,n,a,l,d,u,y,g,b,m,O,F,h,f,k,C,S,E,H,R,L,T,j,z,I,N,Z,D;const B=0===t.yAxis.data.length,P=t.colorSchema===x.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],W={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barWidth:t.barWidth},q={};t.yAxis.data.map((i=>{i.map((i=>{q[i.name]?q[i.name].push(i.value):q[i.name]=[i.value]}))}));const w=Object.keys(q).map(((i,o)=>Object.assign({label:i,data:q[i],backgroundColor:P[o]},W))),G={plugins:{legend:{display:!B,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!B}},responsive:!0,maintainAspectRatio:!1,legend:{display:!0,labels:{usePointStyle:!0}},indexAxis:t.orientation===p.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(t.orientation===p.HORIZONTAL?null===(e=t.yAxis)||void 0===e?void 0:e.title:null===(n=t.xAxis)||void 0===n?void 0:n.title),text:t.orientation===p.HORIZONTAL?null===(a=t.yAxis)||void 0===a?void 0:a.title:null===(l=t.xAxis)||void 0===l?void 0:l.title,color:null!==(y=t.orientation===p.HORIZONTAL?null===(d=t.yAxis)||void 0===d?void 0:d.titleColor:null===(u=t.xAxis)||void 0===u?void 0:u.titleColor)&&void 0!==y?y:c.content.secondary,font:{size:v.caption.fontSize}},grid:{display:t.orientation===p.HORIZONTAL,color:c.background.base},ticks:{fontSize:v.caption.fontSize,color:null!==(g=t.yAxis.labelColor)&&void 0!==g?g:c.content.secondary},stacked:t.orientation===p.HORIZONTAL?"boolean"!=typeof(null===(b=t.yAxis)||void 0===b?void 0:b.stacked)||(null===(m=t.yAxis)||void 0===m?void 0:m.stacked):"boolean"!=typeof(null===(O=t.xAxis)||void 0===O?void 0:O.stacked)||(null===(F=t.xAxis)||void 0===F?void 0:F.stacked)},y:{title:{display:!!(t.orientation===p.HORIZONTAL?null===(h=t.xAxis)||void 0===h?void 0:h.title:null===(f=t.yAxis)||void 0===f?void 0:f.title),text:t.orientation===p.HORIZONTAL?null===(k=t.xAxis)||void 0===k?void 0:k.title:null===(C=t.yAxis)||void 0===C?void 0:C.title,color:null!==(H=t.orientation===p.HORIZONTAL?null===(S=t.xAxis)||void 0===S?void 0:S.titleColor:null===(E=t.yAxis)||void 0===E?void 0:E.titleColor)&&void 0!==H?H:c.content.secondary,font:{size:v.caption.fontSize}},grid:{display:t.orientation!==p.HORIZONTAL,color:c.background.base},ticks:Object.assign({stepSize:t.orientation===p.HORIZONTAL?null===(R=t.xAxis)||void 0===R?void 0:R.stepSize:null===(L=t.yAxis)||void 0===L?void 0:L.stepSize,fontSize:v.caption.fontSize,color:null!==(T=t.xAxis.labelColor)&&void 0!==T?T:c.content.secondary},B?{min:0,max:2e3,stepSize:200}:{}),stacked:t.orientation===p.HORIZONTAL?"boolean"!=typeof(null===(j=t.xAxis)||void 0===j?void 0:j.stacked)||(null===(z=t.xAxis)||void 0===z?void 0:z.stacked):"boolean"!=typeof(null===(I=t.yAxis)||void 0===I?void 0:I.stacked)||(null===(N=t.yAxis)||void 0===N?void 0:N.stacked)}},onClick:(i,o)=>{if(!t.onBarClick)return;const e=o[0].datasetIndex,n=o[0].index,a=i.chart.data.datasets[e].label,l=i.chart.data.labels[n];t.onBarClick(l,a)},onHover:(i,o)=>{t.onBarClick&&o.length&&(i.native.target.style.cursor="pointer")}},J={labels:t.xAxis.data.map((i=>"string"==typeof i?i:i.name)),datasets:B?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:w};return i(A,Object.assign({padding:t.outerPadding},{children:[t.chartHeading&&o("div",Object.assign({style:{marginBottom:24}},{children:o(r,Object.assign({color:null!==(Z=t.chartHeading.color)&&void 0!==Z?Z:c.content.secondary},{children:t.chartHeading.heading}))})),o("div",Object.assign({style:{height:null!==(D=t.graphCanvasHeight)&&void 0!==D?D:500}},{children:o(s,{options:G,data:J})}))]}))};export{u as StackedBarChart};
|