@bikdotai/bik-component-library 0.0.515-beta-dropdwon-0.2 → 0.0.515-beta-dropdwon-0.3

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.d.ts

@@ -29,6 +29,7 @@ export type LineChartProps = {
     isNewStyles?: boolean;
     prefixCurrencyInYAxis?: string;
     pointRadius?: number;
+    paddingYAxisBetweenTicks?: number;
     labelCallback?: (context: any) => void;
     afterBodyCallBack?: (context: any) => void;
     titleTooltipCallback?: (context: any) => void;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),l=require("react"),r=require("react-chartjs-2"),n=require("../../../TypographyStyle.js"),i=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:b,isZeroState:y,tension:C,isNewStyles:v,ticksLabelCallback:O,prefixCurrencyInYAxis:x,pointRadius:h,labelCallback:m,afterBodyCallBack:S,titleTooltipCallback:j}=t;var L,f,k;const[R,w]=l.useState(null),B=l.useRef();l.useEffect((()=>{var e,t,l,r;if(null===(r=null===(l=null===(t=null===(e=B.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===l?void 0:l.ticks)||void 0===r?void 0:r.length){const e=38*B.current.scales.y.ticks.length;w(e)}}),[B]);const q=c.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?i.COLORS.content.placeholder:i.COLORS.background.brand}))),E={labels:s,datasets:c.map(((e,t)=>{var l,r;return Object.assign(Object.assign({tension:null!=C?C:.4,fill:e.gradient?"start":0},((e,t)=>{const l={borderColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)};return v?Object.assign({pointStyle:"circle",pointRadius:null!=h?h:5,pointBorderColor:"transparent",pointBackgroundColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)},l):Object.assign({pointRadius:null!=h?h:1},l)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(l=e.lineWidth)&&void 0!==l?l:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,R?R-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})}))},T={maintainAspectRatio:u,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=v&&v,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>i.COLORS.content.primaryInverse,backgroundColor:i.COLORS.content.primary,callbacks:{labelTextColor:()=>i.COLORS.content.primaryInverse,title:j,label:m,afterBody:S},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:y?0:p,max:y?10:b,ticks:{color:i.COLORS.content.secondary,callback:e=>{var t;return`${null!==(t=null==a?void 0:a.yPrefix)&&void 0!==t?t:""}${e}${null!=x?x:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:y?1:g},title:{display:!!(null==a?void 0:a.y),text:null==a?void 0:a.y},grid:{color:i.COLORS.background.base,drawBorder:null===(L=null==a?void 0:a.yDrawBorder)||void 0===L||L}},x:{ticks:{callback:O,color:i.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:null!==(f=null==a?void 0:a.xDrawBorder)&&void 0!==f&&f}}}};return e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},u?{}:{height:null!==(k=null!=d?d:R)&&void 0!==k?k:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e.jsx(o.LegendWrapper,{children:q.map(((t,l)=>{let{text:r,color:i}=t;return r?e.jsxs(o.LegendContainer,{children:[e.jsx(o.LegendColor,{color:i,newStyle:v}),e.jsx(n.SmallRegular,Object.assign({color:"#667085"},{children:r}))]},l):e.jsx(e.Fragment,{})}))}),e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(r.Line,{ref:B,options:T,data:E})}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),l=require("react"),r=require("react-chartjs-2"),n=require("../../../TypographyStyle.js"),i=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:b,isZeroState:y,tension:C,isNewStyles:v,prefixCurrencyInYAxis:O,pointRadius:x,paddingYAxisBetweenTicks:h,ticksLabelCallback:m,labelCallback:S,afterBodyCallBack:j,titleTooltipCallback:L}=t;var k,f,R;const[w,B]=l.useState(null),T=l.useRef();l.useEffect((()=>{var e,t,l,r;if(null===(r=null===(l=null===(t=null===(e=T.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===l?void 0:l.ticks)||void 0===r?void 0:r.length){const e=38*T.current.scales.y.ticks.length;B(e)}}),[T]);const q=c.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?i.COLORS.content.placeholder:i.COLORS.background.brand}))),E={labels:s,datasets:c.map(((e,t)=>{var l,r;return Object.assign(Object.assign({tension:null!=C?C:.4,fill:e.gradient?"start":0},((e,t)=>{const l={borderColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)};return v?Object.assign({pointStyle:"circle",pointRadius:null!=x?x:5,pointBorderColor:"transparent",pointBackgroundColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)},l):Object.assign({pointRadius:null!=x?x:1},l)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(l=e.lineWidth)&&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})}))},z={maintainAspectRatio:u,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=v&&v,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>i.COLORS.content.primaryInverse,backgroundColor:i.COLORS.content.primary,callbacks:{labelTextColor:()=>i.COLORS.content.primaryInverse,title:L,label:S,afterBody:j},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:y?0:p,max:y?10:b,ticks:{color:i.COLORS.content.secondary,callback:e=>{var t;return`${null!==(t=null==a?void 0:a.yPrefix)&&void 0!==t?t:""}${e}${null!=O?O:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:y?1:g,padding:v?24:0},title:{display:!!(null==a?void 0:a.y),text:null==a?void 0:a.y},grid:{color:i.COLORS.background.base,drawBorder:null===(k=null==a?void 0:a.yDrawBorder)||void 0===k||k}},x:{ticks:{callback:m,color:i.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:null!==(f=null==a?void 0:a.xDrawBorder)&&void 0!==f&&f}}}};return e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},u?{}:{height:null!==(R=null!=d?d:w)&&void 0!==R?R:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e.jsx(o.LegendWrapper,{children:q.map(((t,l)=>{let{text:r,color:i}=t;return r?e.jsxs(o.LegendContainer,{children:[e.jsx(o.LegendColor,{color:i,newStyle:v}),e.jsx(n.SmallRegular,Object.assign({color:"#667085"},{children:r}))]},l):e.jsx(e.Fragment,{})}))}),e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(r.Line,{ref:T,options:z,data:E})}))]}))};

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("chart.js"),i=require("react-chartjs-2"),a=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),o=require("./VerticalGraph.styles.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip);exports.VerticalGraph=t=>{var l,s,n,c;const d=-1===t.yAxis.data.findIndex((e=>0!==e)),g={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!d,callbacks:{label:t.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:r.FONTS.caption.fontSize}},grid:{display:!1,borderColor:r.COLORS.background.base},ticks:{fontSize:r.FONTS.caption.fontSize,color:null!==(l=t.yAxis.labelColor)&&void 0!==l?l:r.COLORS.content.secondary}},y:{title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:r.FONTS.caption.fontSize}},grid:{borderColor:"white",color:r.COLORS.background.base},ticks:Object.assign({callback:t.yAxis.ticksCallback,fontSize:r.FONTS.caption.fontSize,color:null!==(s=t.xAxis.labelColor)&&void 0!==s?s:r.COLORS.content.secondary},d?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},x={labels:t.xAxis.data.map((e=>e.toString())),datasets:[{data:d?[250,1e3,800,1500,300,600]:t.yAxis.data,backgroundColor:e=>{var i;const a=t.barColorRGBA;let r=[];const o=t.xAxis.data.length;if(d)return"rgba(0,0,0,0)";if(t.isFunnel){let e=+(o>10?.1:(1/o).toFixed(2));const t=`rgba(${a.r}, ${a.g}, ${a.b}`;for(let i=1;i<o+1;i++){let a="";i>10?a=`${t},1)`:(a=`${t},${e})`,e+=.1),r.push(a)}}else{const e=`rgba(${a.r}, ${a.g}, ${a.b}, ${null!==(i=a.a)&&void 0!==i?i:"1"})`;r=Array(o).fill(e)}return r},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return e.jsxs(o.GraphContainerWrapper,Object.assign({padding:t.outerPadding},{children:[t.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(a.TitleMedium,Object.assign({color:null!==(n=t.chartHeading.color)&&void 0!==n?n:r.COLORS.content.secondary},{children:t.chartHeading.heading}))})),e.jsx("div",Object.assign({style:{height:null!==(c=t.graphCanvasHeight)&&void 0!==c?c:500}},{children:e.jsx(i.Bar,{options:g,data:x})}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),i=require("react-chartjs-2"),a=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),o=require("./VerticalGraph.styles.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip);exports.VerticalGraph=t=>{var s,l,n,c;const d=-1===t.yAxis.data.findIndex((e=>0!==e)),g={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!d,callbacks:{label:t.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:r.FONTS.caption.fontSize}},grid:{display:!1,borderColor:r.COLORS.background.base},ticks:{fontSize:r.FONTS.caption.fontSize,color:null!==(s=t.yAxis.labelColor)&&void 0!==s?s:r.COLORS.content.secondary}},y:{title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:r.FONTS.caption.fontSize}},grid:{borderColor:"white",color:r.COLORS.background.base},ticks:Object.assign({callback:t.yAxis.ticksCallback,fontSize:r.FONTS.caption.fontSize,color:null!==(l=t.xAxis.labelColor)&&void 0!==l?l:r.COLORS.content.secondary},d?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},x={labels:t.xAxis.data.map((e=>e.toString())),datasets:[{data:d?[250,1e3,800,1500,300,600]:t.yAxis.data,backgroundColor:e=>{var i;const a=t.barColorRGBA;let r=[];const o=t.xAxis.data.length;if(d)return"rgba(0,0,0,0)";if(t.isFunnel){let e=+(o>10?.1:(1/o).toFixed(2));const t=`rgba(${a.r}, ${a.g}, ${a.b}`;for(let i=1;i<o+1;i++){let a="";i>10?a=`${t},1)`:(a=`${t},${e})`,e+=.1),r.push(a)}}else{const e=`rgba(${a.r}, ${a.g}, ${a.b}, ${null!==(i=a.a)&&void 0!==i?i:"1"})`;r=Array(o).fill(e)}return r},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return e.jsxs(o.GraphContainerWrapper,Object.assign({padding:t.outerPadding,skipOuterLayout:t.skipOuterLayout},{children:[t.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(a.TitleMedium,Object.assign({color:null!==(n=t.chartHeading.color)&&void 0!==n?n:r.COLORS.content.secondary},{children:t.chartHeading.heading}))})),e.jsx("div",Object.assign({style:{height:null!==(c=t.graphCanvasHeight)&&void 0!==c?c:500}},{children:e.jsx(i.Bar,{options:g,data:x})}))]}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.styles.d.ts

@@ -1,3 +1,4 @@
 export declare const GraphContainerWrapper: import("styled-components").StyledComponent<"div", any, {
     padding?: string | undefined;
+    skipOuterLayout?: boolean | undefined;
 }, never>;

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

@@ -1,4 +1,4 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=t(e).default.div`
-	background-color: ${r.COLORS.surface.standard};
+	background-color: ${e=>e.skipOuterLayout?"":r.COLORS.surface.standard}};
 	padding: ${e=>{var r;return null!==(r=e.padding)&&void 0!==r?r:"24px"}};
 `;exports.GraphContainerWrapper=n;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.d.ts

@@ -29,6 +29,7 @@ export type LineChartProps = {
     isNewStyles?: boolean;
     prefixCurrencyInYAxis?: string;
     pointRadius?: number;
+    paddingYAxisBetweenTicks?: number;
     labelCallback?: (context: any) => void;
     afterBodyCallBack?: (context: any) => void;
     titleTooltipCallback?: (context: any) => void;

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

@@ -1 +1 @@
-import{jsxs as t,jsx as e,Fragment as l}from"react/jsx-runtime";import{Chart as o,CategoryScale as r,LinearScale as n,PointElement as i,BarElement as a,LineElement as d,ArcElement as s,Filler as c,Title as p,Tooltip as u,Legend as g}from"chart.js";import{useState as b,useRef as y,useEffect as m}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";o.register(r,n,i,a,d,s,c,p,u,g);const j=o=>{let{scaleText:r,labels:n,canvasHeight:i,datas:a,maintainAspectRatio:d=!1,stepSize:s,min:c,max:p,isZeroState:u,tension:g,isNewStyles:j,ticksLabelCallback:w,prefixCurrencyInYAxis:B,pointRadius:O,labelCallback:S,afterBodyCallBack:z,titleTooltipCallback:R}=o;var T,A,D;const[F,I]=b(null),L=y();m((()=>{var t,e,l,o;if(null===(o=null===(l=null===(e=null===(t=L.current)||void 0===t?void 0:t.scales)||void 0===e?void 0:e.y)||void 0===l?void 0:l.ticks)||void 0===o?void 0:o.length){const t=38*L.current.scales.y.ticks.length;I(t)}}),[L]);const $=a.map((t=>({text:t.legend,color:t.lineColor?t.lineColor:t.dotted?f.content.placeholder:f.background.brand}))),E={labels:n,datasets:a.map(((t,e)=>{var l,o;return Object.assign(Object.assign({tension:null!=g?g:.4,fill:t.gradient?"start":0},((t,e)=>{const l={borderColor:t||(e?f.content.placeholder:f.background.brand)};return j?Object.assign({pointStyle:"circle",pointRadius:null!=O?O:5,pointBorderColor:"transparent",pointBackgroundColor:t||(e?f.content.placeholder:f.background.brand)},l):Object.assign({pointRadius:null!=O?O:1},l)})(t.lineColor,t.dotted)),{borderDash:t.dotted?[8,3]:void 0,data:t.data,borderWidth:null!==(l=t.lineWidth)&&void 0!==l?l:2,backgroundColor:t.gradient?t=>{const e=t.chart.ctx.createLinearGradient(0,0,0,F?F-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",legend:t.legend})}))},W={maintainAspectRatio:d,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=j&&j,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>f.content.primaryInverse,backgroundColor:f.content.primary,callbacks:{labelTextColor:()=>f.content.primaryInverse,title:R,label:S,afterBody:z},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:u?0:c,max:u?10:p,ticks:{color:f.content.secondary,callback:t=>{var e;return`${null!==(e=null==r?void 0:r.yPrefix)&&void 0!==e?e:""}${t}${null!=B?B:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:u?1:s},title:{display:!!(null==r?void 0:r.y),text:null==r?void 0:r.y},grid:{color:f.background.base,drawBorder:null===(T=null==r?void 0:r.yDrawBorder)||void 0===T||T}},x:{ticks:{callback:w,color:f.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==r?void 0:r.x),text:null==r?void 0:r.x},grid:{display:!1,drawBorder:null!==(A=null==r?void 0:r.xDrawBorder)&&void 0!==A&&A}}}};return t("div",Object.assign({style:Object.assign(Object.assign({},d?{}:{height:null!==(D=null!=i?i:F)&&void 0!==D?D:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e(x,{children:$.map(((o,r)=>{let{text:n,color:i}=o;return n?t(k,{children:[e(C,{color:i,newStyle:j}),e(h,Object.assign({color:"#667085"},{children:n}))]},r):e(l,{})}))}),e("div",Object.assign({style:{flex:1}},{children:e(v,{ref:L,options:W,data:E})}))]}))};export{j as LineChart};
+import{jsxs as t,jsx as e,Fragment as l}from"react/jsx-runtime";import{Chart as o,CategoryScale as r,LinearScale as i,PointElement as n,BarElement as a,LineElement as d,ArcElement as s,Filler as c,Title as p,Tooltip as u,Legend as g}from"chart.js";import{useState as b,useRef as y,useEffect as m}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";o.register(r,i,n,a,d,s,c,p,u,g);const j=o=>{let{scaleText:r,labels:i,canvasHeight:n,datas:a,maintainAspectRatio:d=!1,stepSize:s,min:c,max:p,isZeroState:u,tension:g,isNewStyles:j,prefixCurrencyInYAxis:w,pointRadius:B,paddingYAxisBetweenTicks:O,ticksLabelCallback:S,labelCallback:z,afterBodyCallBack:T,titleTooltipCallback:A}=o;var R,D,F;const[I,L]=b(null),$=y();m((()=>{var t,e,l,o;if(null===(o=null===(l=null===(e=null===(t=$.current)||void 0===t?void 0:t.scales)||void 0===e?void 0:e.y)||void 0===l?void 0:l.ticks)||void 0===o?void 0:o.length){const t=38*$.current.scales.y.ticks.length;L(t)}}),[$]);const E=a.map((t=>({text:t.legend,color:t.lineColor?t.lineColor:t.dotted?f.content.placeholder:f.background.brand}))),W={labels:i,datasets:a.map(((t,e)=>{var l,o;return Object.assign(Object.assign({tension:null!=g?g:.4,fill:t.gradient?"start":0},((t,e)=>{const l={borderColor:t||(e?f.content.placeholder:f.background.brand)};return j?Object.assign({pointStyle:"circle",pointRadius:null!=B?B:5,pointBorderColor:"transparent",pointBackgroundColor:t||(e?f.content.placeholder:f.background.brand)},l):Object.assign({pointRadius:null!=B?B:1},l)})(t.lineColor,t.dotted)),{borderDash:t.dotted?[8,3]:void 0,data:t.data,borderWidth:null!==(l=t.lineWidth)&&void 0!==l?l:2,backgroundColor:t.gradient?t=>{const e=t.chart.ctx.createLinearGradient(0,0,0,I?I-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",legend:t.legend})}))},Y={maintainAspectRatio:d,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=j&&j,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>f.content.primaryInverse,backgroundColor:f.content.primary,callbacks:{labelTextColor:()=>f.content.primaryInverse,title:A,label:z,afterBody:T},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:u?0:c,max:u?10:p,ticks:{color:f.content.secondary,callback:t=>{var e;return`${null!==(e=null==r?void 0:r.yPrefix)&&void 0!==e?e:""}${t}${null!=w?w:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:u?1:s,padding:j?24:0},title:{display:!!(null==r?void 0:r.y),text:null==r?void 0:r.y},grid:{color:f.background.base,drawBorder:null===(R=null==r?void 0:r.yDrawBorder)||void 0===R||R}},x:{ticks:{callback:S,color:f.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==r?void 0:r.x),text:null==r?void 0:r.x},grid:{display:!1,drawBorder:null!==(D=null==r?void 0:r.xDrawBorder)&&void 0!==D&&D}}}};return t("div",Object.assign({style:Object.assign(Object.assign({},d?{}:{height:null!==(F=null!=n?n:I)&&void 0!==F?F:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e(x,{children:E.map(((o,r)=>{let{text:i,color:n}=o;return i?t(k,{children:[e(C,{color:n,newStyle:j}),e(h,Object.assign({color:"#667085"},{children:i}))]},r):e(l,{})}))}),e("div",Object.assign({style:{flex:1}},{children:e(v,{ref:$,options:Y,data:W})}))]}))};export{j as LineChart};

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{Chart as i,CategoryScale as o,LinearScale as a,BarElement as r,Tooltip as l}from"chart.js";import{Bar as n}from"react-chartjs-2";import{TitleMedium as s}from"../../../TypographyStyle.js";import{FONTS as c,COLORS as d}from"../../../../constants/Theme.js";import{GraphContainerWrapper as g}from"./VerticalGraph.styles.js";i.register(o,a,r,l);const b=i=>{var o,a,r,l;const b=-1===i.yAxis.data.findIndex((t=>0!==t)),p={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!b,callbacks:{label:i.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!i.xAxis.title,text:i.xAxis.title,color:i.xAxis.titleColor,font:{size:c.caption.fontSize}},grid:{display:!1,borderColor:d.background.base},ticks:{fontSize:c.caption.fontSize,color:null!==(o=i.yAxis.labelColor)&&void 0!==o?o:d.content.secondary}},y:{title:{display:!!i.yAxis.title,text:i.yAxis.title,color:i.yAxis.titleColor,font:{size:c.caption.fontSize}},grid:{borderColor:"white",color:d.background.base},ticks:Object.assign({callback:i.yAxis.ticksCallback,fontSize:c.caption.fontSize,color:null!==(a=i.xAxis.labelColor)&&void 0!==a?a:d.content.secondary},b?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},x={labels:i.xAxis.data.map((t=>t.toString())),datasets:[{data:b?[250,1e3,800,1500,300,600]:i.yAxis.data,backgroundColor:t=>{var e;const o=i.barColorRGBA;let a=[];const r=i.xAxis.data.length;if(b)return"rgba(0,0,0,0)";if(i.isFunnel){let t=+(r>10?.1:(1/r).toFixed(2));const e=`rgba(${o.r}, ${o.g}, ${o.b}`;for(let i=1;i<r+1;i++){let o="";i>10?o=`${e},1)`:(o=`${e},${t})`,t+=.1),a.push(o)}}else{const t=`rgba(${o.r}, ${o.g}, ${o.b}, ${null!==(e=o.a)&&void 0!==e?e:"1"})`;a=Array(r).fill(t)}return a},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t(g,Object.assign({padding:i.outerPadding},{children:[i.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(s,Object.assign({color:null!==(r=i.chartHeading.color)&&void 0!==r?r:d.content.secondary},{children:i.chartHeading.heading}))})),e("div",Object.assign({style:{height:null!==(l=i.graphCanvasHeight)&&void 0!==l?l:500}},{children:e(n,{options:p,data:x})}))]}))};export{b as VerticalGraph};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Chart as i,CategoryScale as o,LinearScale as a,BarElement as r,Tooltip as l}from"chart.js";import{Bar as s}from"react-chartjs-2";import{TitleMedium as n}from"../../../TypographyStyle.js";import{FONTS as c,COLORS as d}from"../../../../constants/Theme.js";import{GraphContainerWrapper as g}from"./VerticalGraph.styles.js";i.register(o,a,r,l);const p=i=>{var o,a,r,l;const p=-1===i.yAxis.data.findIndex((t=>0!==t)),b={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!p,callbacks:{label:i.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!i.xAxis.title,text:i.xAxis.title,color:i.xAxis.titleColor,font:{size:c.caption.fontSize}},grid:{display:!1,borderColor:d.background.base},ticks:{fontSize:c.caption.fontSize,color:null!==(o=i.yAxis.labelColor)&&void 0!==o?o:d.content.secondary}},y:{title:{display:!!i.yAxis.title,text:i.yAxis.title,color:i.yAxis.titleColor,font:{size:c.caption.fontSize}},grid:{borderColor:"white",color:d.background.base},ticks:Object.assign({callback:i.yAxis.ticksCallback,fontSize:c.caption.fontSize,color:null!==(a=i.xAxis.labelColor)&&void 0!==a?a:d.content.secondary},p?{min:0,max:2e3,stepSize:200}:{})}},maintainAspectRatio:!1},x={labels:i.xAxis.data.map((t=>t.toString())),datasets:[{data:p?[250,1e3,800,1500,300,600]:i.yAxis.data,backgroundColor:t=>{var e;const o=i.barColorRGBA;let a=[];const r=i.xAxis.data.length;if(p)return"rgba(0,0,0,0)";if(i.isFunnel){let t=+(r>10?.1:(1/r).toFixed(2));const e=`rgba(${o.r}, ${o.g}, ${o.b}`;for(let i=1;i<r+1;i++){let o="";i>10?o=`${e},1)`:(o=`${e},${t})`,t+=.1),a.push(o)}}else{const t=`rgba(${o.r}, ${o.g}, ${o.b}, ${null!==(e=o.a)&&void 0!==e?e:"1"})`;a=Array(r).fill(t)}return a},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t(g,Object.assign({padding:i.outerPadding,skipOuterLayout:i.skipOuterLayout},{children:[i.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(n,Object.assign({color:null!==(r=i.chartHeading.color)&&void 0!==r?r:d.content.secondary},{children:i.chartHeading.heading}))})),e("div",Object.assign({style:{height:null!==(l=i.graphCanvasHeight)&&void 0!==l?l:500}},{children:e(s,{options:b,data:x})}))]}))};export{p as VerticalGraph};

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.styles.d.ts

@@ -1,3 +1,4 @@
 export declare const GraphContainerWrapper: import("styled-components").StyledComponent<"div", any, {
     padding?: string | undefined;
+    skipOuterLayout?: boolean | undefined;
 }, never>;

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

@@ -1,4 +1,4 @@
-import o from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const n=o.div`
-	background-color: ${r.surface.standard};
+import o from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const t=o.div`
+	background-color: ${o=>o.skipOuterLayout?"":r.surface.standard}};
 	padding: ${o=>{var r;return null!==(r=o.padding)&&void 0!==r?r:"24px"}};
-`;export{n as GraphContainerWrapper};
+`;export{t as GraphContainerWrapper};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.515-beta-dropdwon-0.2",
+	"version": "0.0.515-beta-dropdwon-0.3",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",