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

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

@@ -16,5 +16,6 @@ export interface AnalyticsTrendInterface {
     trailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     onTrailIconClick?: () => void;
     iconTooltipBody?: string;
+    funnelPercent?: number;
 }
 export declare const AnalyticsTrend: React.FC<AnalyticsTrendInterface>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../constants/Theme.js"),s=require("../../assets/icons/arrow_down.svg.js"),n=require("../../assets/icons/arrow_up.svg.js"),r=require("../../assets/icons/info.svg.js"),o=require("../tag/Tag.js"),a=require("../template-context-mapper/utils/getFormattedMonthDate.js"),l=require("../tooltips/Tooltip.js"),c=require("../TypographyStyle.js"),d=require("./CommonStyles.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=g(t);const y=t=>{let{percent:r,direction:o,timeline:l,customRange:d}=t;const g="negative"===o?s.default:n.default,h="negative"===o?i.COLORS.background.negative.vibrant:"positive"===o?i.COLORS.background.positive.vibrant:i.COLORS.content.placeholder,y="today"===l?"vs yesterday":"yesterday"===l?"vs 1 day before":"7 days"===l?"vs last 7 days":"30 days"===l?"vs last 30 days":"custom"===l&&d?`vs ${a.getFormattedMonthDate(d[0])} - ${a.getFormattedMonthDate(d[1])}`:"";return e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof r&&e.jsx(g,{color:h,height:20,width:20,style:{marginRight:2}}),"number"==typeof r&&o&&e.jsxs(c.TitleSmall,Object.assign({style:{color:h}},{children:["neutral"===o?0:r,"%"]})),l&&e.jsx(c.Caption,Object.assign({style:{marginLeft:4,color:i.COLORS.content.placeholder}},{children:y}))]}))};exports.AnalyticsTrend=t=>{let{title:s,value:n,trendPercent:a,type:g="horizontal",timeline:p,customRange:u,tooltip:j,card:m=!0,rightSeparator:b=!1,size:v="big",share:x=!1,formatVal:O,prefixSymbol:f,trailingIcon:R,onTrailIconClick:C,iconTooltipBody:S}=t;const T="big"===v?c.TitleLarge:c.TitleMedium,w=void 0!==a?a<0?"negative":0===a?"neutral":"positive":void 0,L=void 0!==a?x?Math.round(a):Math.abs(Math.round(a)):void 0;return e.jsx(d.AnalyticsTrendContainer,Object.assign({card:m},{children:e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:b?1:0,borderRightColor:i.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:m?0:24,paddingRight:m?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:4,height:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsx(c.BodySecondary,Object.assign({style:{color:i.COLORS.content.secondary}},{children:s})),j&&e.jsx(l.Tooltip,Object.assign({body:j,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e.jsx(r.default,{color:i.COLORS.content.inactive,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},x?{justifyContent:"space-between"}:{})},{children:[e.jsx(T,Object.assign({style:{color:i.COLORS.content.primary}},{children:void 0===n?"--":"number"==typeof n&&O?`${null!=f?f:""}${new Intl.NumberFormat("en-IN",{}).format(n)}`:`${null!=f?f:""}${n}`})),"horizontal"===g&&!x&&e.jsx(y,{timeline:p,customRange:u,percent:L,direction:w}),x&&void 0!==L&&e.jsx(o.Tag,{tagText:`${L} %`,theme:"light",type:"neutral"})]})),"vertical"===g&&!x&&e.jsx("div",Object.assign({style:{marginTop:6}},{children:e.jsx(y,{timeline:p,customRange:u,percent:L,direction:w})}))]})),S&&e.jsx(l.Tooltip,Object.assign({body:S,placement:"right"},{children:R&&e.jsx("div",Object.assign({className:"icon--holder",onClick:C},{children:h.default.createElement(R,{height:20,width:20,color:i.COLORS.content.secondary})}))}))]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../constants/Theme.js"),n=require("../../assets/icons/arrow_down.svg.js"),s=require("../../assets/icons/arrow_up.svg.js"),r=require("../../assets/icons/info.svg.js"),o=require("../tag/Tag.js"),a=require("../template-context-mapper/utils/getFormattedMonthDate.js"),l=require("../tooltips/Tooltip.js"),c=require("../TypographyStyle.js"),d=require("./CommonStyles.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=g(t);const y=t=>{let{percent:r,direction:o,timeline:l,customRange:d}=t;const g="negative"===o?n.default:s.default,h="negative"===o?i.COLORS.background.negative.vibrant:"positive"===o?i.COLORS.background.positive.vibrant:i.COLORS.content.placeholder,y="today"===l?"vs yesterday":"yesterday"===l?"vs 1 day before":"7 days"===l?"vs last 7 days":"30 days"===l?"vs last 30 days":"custom"===l&&d?`vs ${a.getFormattedMonthDate(d[0])} - ${a.getFormattedMonthDate(d[1])}`:"";return e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof r&&e.jsx(g,{color:h,height:20,width:20,style:{marginRight:2}}),"number"==typeof r&&o&&e.jsxs(c.TitleSmall,Object.assign({style:{color:h}},{children:["neutral"===o?0:r,"%"]})),l&&e.jsx(c.Caption,Object.assign({style:{marginLeft:4,color:i.COLORS.content.placeholder}},{children:y}))]}))};exports.AnalyticsTrend=t=>{let{title:n,value:s,trendPercent:a,type:g="horizontal",timeline:p,customRange:u,tooltip:j,card:m=!0,rightSeparator:v=!1,size:x="big",share:b=!1,formatVal:O,prefixSymbol:f,trailingIcon:R,onTrailIconClick:T,iconTooltipBody:C,funnelPercent:S}=t;const w="big"===x?c.TitleLarge:c.TitleMedium,L=void 0!==a?a<0?"negative":0===a?"neutral":"positive":void 0,q=void 0!==a?b?Math.round(a):Math.abs(Math.round(a)):void 0;return e.jsx(d.AnalyticsTrendContainer,Object.assign({card:m},{children:e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:v?1:0,borderRightColor:i.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:m?0:24,paddingRight:m?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:4,height:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsx(c.BodySecondary,Object.assign({style:{color:i.COLORS.content.secondary}},{children:n})),j&&e.jsx(l.Tooltip,Object.assign({body:j,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e.jsx(r.default,{color:i.COLORS.content.inactive,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},b?{justifyContent:"space-between"}:{})},{children:[e.jsx(w,Object.assign({style:{color:i.COLORS.content.primary}},{children:void 0===s?"--":"number"==typeof s&&O?`${null!=f?f:""}${new Intl.NumberFormat("en-IN",{}).format(s)}`:`${null!=f?f:""}${s}`})),"horizontal"===g&&!b&&e.jsx(y,{timeline:p,customRange:u,percent:q,direction:L}),"vertical"===g&&S&&void 0!==S&&e.jsx(o.Tag,{tagText:`${S} %`,theme:"light",type:"neutral"}),b&&void 0!==q&&e.jsx(o.Tag,{tagText:`${q} %`,theme:"light",type:"neutral"})]})),"vertical"===g&&!b&&e.jsx("div",Object.assign({style:{marginTop:6}},{children:e.jsx(y,{timeline:p,customRange:u,percent:q,direction:L})}))]})),C&&e.jsx(l.Tooltip,Object.assign({body:C,placement:"right"},{children:R&&e.jsx("div",Object.assign({className:"icon--holder",onClick:T},{children:h.default.createElement(R,{height:20,width:20,color:i.COLORS.content.secondary})}))}))]}))}))};

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

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

@@ -4,6 +4,7 @@ export interface AxisDetailsI {
     data: XAxisDataI[] | string[];
     labelColor?: string;
     stepSize?: number;
+    stacked?: boolean;
 }
 export interface XAxisDataI {
     name: string;

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

@@ -16,5 +16,6 @@ export interface AnalyticsTrendInterface {
     trailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     onTrailIconClick?: () => void;
     iconTooltipBody?: string;
+    funnelPercent?: number;
 }
 export declare const AnalyticsTrend: React.FC<AnalyticsTrendInterface>;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{COLORS as n}from"../../constants/Theme.js";import o from"../../assets/icons/arrow_down.svg.js";import r from"../../assets/icons/arrow_up.svg.js";import s from"../../assets/icons/info.svg.js";import{Tag as a}from"../tag/Tag.js";import{getFormattedMonthDate as l}from"../template-context-mapper/utils/getFormattedMonthDate.js";import{Tooltip as c}from"../tooltips/Tooltip.js";import{BodySecondary as d,TitleSmall as g,Caption as m,TitleLarge as p,TitleMedium as h}from"../TypographyStyle.js";import{AnalyticsTrendContainer as y}from"./CommonStyles.js";const b=o=>{let{title:r,value:l,trendPercent:g,type:m="horizontal",timeline:b,customRange:v,tooltip:j,card:u=!0,rightSeparator:x=!1,size:O="big",share:w=!1,formatVal:I,prefixSymbol:R,trailingIcon:T,onTrailIconClick:$,iconTooltipBody:C}=o;const D="big"===O?p:h,k=void 0!==g?g<0?"negative":0===g?"neutral":"positive":void 0,S=void 0!==g?w?Math.round(g):Math.abs(Math.round(g)):void 0;return e(y,Object.assign({card:u},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:x?1:0,borderRightColor:n.stroke.primary,borderRightStyle:"solid",paddingLeft:u?0:24,paddingRight:u?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:4,height:"100%"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e(d,Object.assign({style:{color:n.content.secondary}},{children:r})),j&&e(c,Object.assign({body:j,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e(s,{color:n.content.inactive,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},w?{justifyContent:"space-between"}:{})},{children:[e(D,Object.assign({style:{color:n.content.primary}},{children:void 0===l?"--":"number"==typeof l&&I?`${null!=R?R:""}${new Intl.NumberFormat("en-IN",{}).format(l)}`:`${null!=R?R:""}${l}`})),"horizontal"===m&&!w&&e(f,{timeline:b,customRange:v,percent:S,direction:k}),w&&void 0!==S&&e(a,{tagText:`${S} %`,theme:"light",type:"neutral"})]})),"vertical"===m&&!w&&e("div",Object.assign({style:{marginTop:6}},{children:e(f,{timeline:b,customRange:v,percent:S,direction:k})}))]})),C&&e(c,Object.assign({body:C,placement:"right"},{children:T&&e("div",Object.assign({className:"icon--holder",onClick:$},{children:i.createElement(T,{height:20,width:20,color:n.content.secondary})}))}))]}))}))},f=i=>{let{percent:s,direction:a,timeline:c,customRange:d}=i;const p="negative"===a?o:r,h="negative"===a?n.background.negative.vibrant:"positive"===a?n.background.positive.vibrant:n.content.placeholder,y="today"===c?"vs yesterday":"yesterday"===c?"vs 1 day before":"7 days"===c?"vs last 7 days":"30 days"===c?"vs last 30 days":"custom"===c&&d?`vs ${l(d[0])} - ${l(d[1])}`:"";return t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof s&&e(p,{color:h,height:20,width:20,style:{marginRight:2}}),"number"==typeof s&&a&&t(g,Object.assign({style:{color:h}},{children:["neutral"===a?0:s,"%"]})),c&&e(m,Object.assign({style:{marginLeft:4,color:n.content.placeholder}},{children:y}))]}))};export{b as AnalyticsTrend};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{COLORS as n}from"../../constants/Theme.js";import r from"../../assets/icons/arrow_down.svg.js";import o from"../../assets/icons/arrow_up.svg.js";import s from"../../assets/icons/info.svg.js";import{Tag as a}from"../tag/Tag.js";import{getFormattedMonthDate as l}from"../template-context-mapper/utils/getFormattedMonthDate.js";import{Tooltip as c}from"../tooltips/Tooltip.js";import{BodySecondary as d,TitleSmall as g,Caption as m,TitleLarge as p,TitleMedium as h}from"../TypographyStyle.js";import{AnalyticsTrendContainer as y}from"./CommonStyles.js";const b=r=>{let{title:o,value:l,trendPercent:g,type:m="horizontal",timeline:b,customRange:f,tooltip:u,card:j=!0,rightSeparator:x=!1,size:O="big",share:w=!1,formatVal:I,prefixSymbol:R,trailingIcon:T,onTrailIconClick:$,iconTooltipBody:C,funnelPercent:D}=r;const k="big"===O?p:h,S=void 0!==g?g<0?"negative":0===g?"neutral":"positive":void 0,M=void 0!==g?w?Math.round(g):Math.abs(Math.round(g)):void 0;return e(y,Object.assign({card:j},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:x?1:0,borderRightColor:n.stroke.primary,borderRightStyle:"solid",paddingLeft:j?0:24,paddingRight:j?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:4,height:"100%"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e(d,Object.assign({style:{color:n.content.secondary}},{children:o})),u&&e(c,Object.assign({body:u,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e(s,{color:n.content.inactive,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},w?{justifyContent:"space-between"}:{})},{children:[e(k,Object.assign({style:{color:n.content.primary}},{children:void 0===l?"--":"number"==typeof l&&I?`${null!=R?R:""}${new Intl.NumberFormat("en-IN",{}).format(l)}`:`${null!=R?R:""}${l}`})),"horizontal"===m&&!w&&e(v,{timeline:b,customRange:f,percent:M,direction:S}),"vertical"===m&&D&&void 0!==D&&e(a,{tagText:`${D} %`,theme:"light",type:"neutral"}),w&&void 0!==M&&e(a,{tagText:`${M} %`,theme:"light",type:"neutral"})]})),"vertical"===m&&!w&&e("div",Object.assign({style:{marginTop:6}},{children:e(v,{timeline:b,customRange:f,percent:M,direction:S})}))]})),C&&e(c,Object.assign({body:C,placement:"right"},{children:T&&e("div",Object.assign({className:"icon--holder",onClick:$},{children:i.createElement(T,{height:20,width:20,color:n.content.secondary})}))}))]}))}))},v=i=>{let{percent:s,direction:a,timeline:c,customRange:d}=i;const p="negative"===a?r:o,h="negative"===a?n.background.negative.vibrant:"positive"===a?n.background.positive.vibrant:n.content.placeholder,y="today"===c?"vs yesterday":"yesterday"===c?"vs 1 day before":"7 days"===c?"vs last 7 days":"30 days"===c?"vs last 30 days":"custom"===c&&d?`vs ${l(d[0])} - ${l(d[1])}`:"";return t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof s&&e(p,{color:h,height:20,width:20,style:{marginRight:2}}),"number"==typeof s&&a&&t(g,Object.assign({style:{color:h}},{children:["neutral"===a?0:s,"%"]})),c&&e(m,Object.assign({style:{marginLeft:4,color:n.content.placeholder}},{children:y}))]}))};export{b as AnalyticsTrend};

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

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

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

@@ -4,6 +4,7 @@ export interface AxisDetailsI {
     data: XAxisDataI[] | string[];
     labelColor?: string;
     stepSize?: number;
+    stacked?: boolean;
 }
 export interface XAxisDataI {
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.455-analyticsv3-08",
+	"version": "0.0.455-analyticsv3-10",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",