@bikdotai/bik-component-library 0.0.455-analyticsv3-13 → 0.0.455-analyticsv3-15
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/AnalyticsTrend.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.d.ts +3 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.d.ts +3 -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("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&&
|
|
1
|
+
"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&&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})}))}))]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),a=require("react"),i=require("react-chartjs-2"),l=require("../../../TypographyStyle.js"),o=require("../../../../constants/Theme.js"),n=require("./StackedBarChart.styles.js"),r=require("./StackedBarDistributionChart.model.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip,t.Legend);const s=[["#
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),a=require("react"),i=require("react-chartjs-2"),l=require("../../../TypographyStyle.js"),o=require("../../../../constants/Theme.js"),n=require("./StackedBarChart.styles.js"),r=require("./StackedBarDistributionChart.model.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip,t.Legend);const s=[["#075E54","#128C7E","#25D366","#DCF8C6"],["#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF0012","#FF797D","#FFC4C5","#F9DFDF"]];exports.StackedBarDistributionChart=t=>{var d,c,O,u,v,T,g,h,R,b,A,N,p,I,S,y,C,j,H,L,x,E,_;const[m,f]=a.useState([]),[F,k]=a.useState(),P=!t.data.filter((e=>!!e.value)).length,G={min:0,max:200,stepSize:20},Z={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},z={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barThickness:null!==(d=t.barThickness)&&void 0!==d?d:100},B={plugins:{legend:{display:!1},tooltip:{enabled:!P}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(c=t.valueTitle)||void 0===c?void 0:c.heading:null===(O=t.labelTitle)||void 0===O?void 0:O.heading),text:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(u=t.valueTitle)||void 0===u?void 0:u.heading:null===(v=t.labelTitle)||void 0===v?void 0:v.heading,color:null!==(h=t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(T=t.valueTitle)||void 0===T?void 0:T.color:null===(g=t.labelTitle)||void 0===g?void 0:g.color)&&void 0!==h?h:o.COLORS.content.secondary,font:{size:o.FONTS.bodySecondary.fontSize}},grid:{display:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL,color:o.COLORS.background.base},ticks:Object.assign({stepSize:30,fontSize:o.FONTS.caption.fontSize,color:null!==(A=t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(R=t.labelTitle)||void 0===R?void 0:R.color:null===(b=t.valueTitle)||void 0===b?void 0:b.color)&&void 0!==A?A:o.COLORS.content.secondary},t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?P?G:Z:{}),stacked:!0},y:{title:{display:!!(t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(N=t.labelTitle)||void 0===N?void 0:N.heading:null===(p=t.valueTitle)||void 0===p?void 0:p.heading),text:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(I=t.labelTitle)||void 0===I?void 0:I.heading:null===(S=t.valueTitle)||void 0===S?void 0:S.heading,color:null!==(j=t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(y=t.labelTitle)||void 0===y?void 0:y.color:null===(C=t.valueTitle)||void 0===C?void 0:C.color)&&void 0!==j?j:o.COLORS.content.secondary,font:{size:o.FONTS.bodySecondary.fontSize}},grid:{display:t.orientation!==r.GRAPH_ORIENTATION.HORIZONTAL,color:o.COLORS.background.base},ticks:Object.assign({fontSize:o.FONTS.caption.fontSize,color:null!==(x=t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(H=t.valueTitle)||void 0===H?void 0:H.color:null===(L=t.labelTitle)||void 0===L?void 0:L.color)&&void 0!==x?x:o.COLORS.content.secondary},t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?{}:P?G:Z),stacked:!0}},onClick:(e,a)=>{if(!t.onBarClick)return;const i=a[0].datasetIndex,l=a[0].index,o=e.chart.data.datasets[i].label,n=e.chart.data.labels[l];t.onBarClick(n,o)},onHover:(e,a)=>{t.onBarClick&&a.length&&(e.native.target.style.cursor="pointer")}},D=Array.from(new Set(t.data.map((e=>e.label)))),q={labels:(w=D,w.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:[]};var w;return a.useEffect((()=>{const e=[];D.forEach(((a,i)=>{const l=[],o=t.data.filter((e=>e.label===a));o.sort(((e,t)=>t.value-e.value)),o.forEach(((e,t)=>{const a=((e,t,a)=>s[e].slice(-a)[t])(i,t,o.length);l.push({color:a,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:a,data:Array(D.length).fill(0)},z);n.data[i]=e.value,q.datasets.push(n)})),e.push(l)})),f(e),k(q)}),[]),F?e.jsxs(n.GraphContainerWrapper,Object.assign({padding:t.outerPadding},{children:[t.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(l.TitleRegular,Object.assign({color:null!==(E=t.chartHeading.color)&&void 0!==E?E:o.COLORS.content.secondary},{children:t.chartHeading.heading}))})),e.jsxs("div",Object.assign({className:"graph__wrapper"},{children:[e.jsx("div",Object.assign({style:{height:null!==(_=t.graphCanvasHeight)&&void 0!==_?_:500,flex:1}},{children:e.jsx(i.Bar,{options:B,data:F})})),e.jsx("div",{children:m.map(((t,a)=>e.jsx("div",Object.assign({className:"legend__set"},{children:t.map((t=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:t.color}}),e.jsx(l.BodyTiny,Object.assign({color:o.COLORS.content.secondary},{children:t.label}))]}),t.label.replace(" ","_"))))}),`Legend_set_${a}`)))})]}))]})):e.jsx(e.Fragment,{})};
|
|
@@ -1 +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 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&&
|
|
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 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&&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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{Chart as i,CategoryScale as l,LinearScale as a,BarElement as n,Tooltip as r,Legend as d}from"chart.js";import{useState as s,useEffect as c}from"react";import{Bar as v}from"react-chartjs-2";import{TitleRegular as g,BodyTiny as u}from"../../../TypographyStyle.js";import{COLORS as h,FONTS as p}from"../../../../constants/Theme.js";import{GraphContainerWrapper as b}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as m}from"./StackedBarDistributionChart.model.js";i.register(l,a,n,r,d);const O=[["#075E54","#128C7E","#25D366","#DCF8C6"],["#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF0012","#FF797D","#FFC4C5","#F9DFDF"]];const T=i=>{var l,a,n,r,d,T,y,f,A,C,j,k,H,L,S,N,R,F,x,I,Z,z,E;const[_,D]=s([]),[B,w]=s(),P=!i.data.filter((e=>!!e.value)).length,V={min:0,max:200,stepSize:20},U={min:i.minValue,max:i.maxValue,stepSize:i.valuesStepSize},$={barPercentage:.4,categoryPercentage:1,borderRadius:{topLeft:4,topRight:4,bottomLeft:4,bottomRight:4},pointStyle:"circle",barThickness:null!==(l=i.barThickness)&&void 0!==l?l:100},q={plugins:{legend:{display:!1},tooltip:{enabled:!P}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:i.orientation===m.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(i.orientation===m.HORIZONTAL?null===(a=i.valueTitle)||void 0===a?void 0:a.heading:null===(n=i.labelTitle)||void 0===n?void 0:n.heading),text:i.orientation===m.HORIZONTAL?null===(r=i.valueTitle)||void 0===r?void 0:r.heading:null===(d=i.labelTitle)||void 0===d?void 0:d.heading,color:null!==(f=i.orientation===m.HORIZONTAL?null===(T=i.valueTitle)||void 0===T?void 0:T.color:null===(y=i.labelTitle)||void 0===y?void 0:y.color)&&void 0!==f?f:h.content.secondary,font:{size:p.bodySecondary.fontSize}},grid:{display:i.orientation===m.HORIZONTAL,color:h.background.base},ticks:Object.assign({stepSize:30,fontSize:p.caption.fontSize,color:null!==(j=i.orientation===m.HORIZONTAL?null===(A=i.labelTitle)||void 0===A?void 0:A.color:null===(C=i.valueTitle)||void 0===C?void 0:C.color)&&void 0!==j?j:h.content.secondary},i.orientation===m.HORIZONTAL?P?V:U:{}),stacked:!0},y:{title:{display:!!(i.orientation===m.HORIZONTAL?null===(k=i.labelTitle)||void 0===k?void 0:k.heading:null===(H=i.valueTitle)||void 0===H?void 0:H.heading),text:i.orientation===m.HORIZONTAL?null===(L=i.labelTitle)||void 0===L?void 0:L.heading:null===(S=i.valueTitle)||void 0===S?void 0:S.heading,color:null!==(F=i.orientation===m.HORIZONTAL?null===(N=i.labelTitle)||void 0===N?void 0:N.color:null===(R=i.valueTitle)||void 0===R?void 0:R.color)&&void 0!==F?F:h.content.secondary,font:{size:p.bodySecondary.fontSize}},grid:{display:i.orientation!==m.HORIZONTAL,color:h.background.base},ticks:Object.assign({fontSize:p.caption.fontSize,color:null!==(Z=i.orientation===m.HORIZONTAL?null===(x=i.valueTitle)||void 0===x?void 0:x.color:null===(I=i.labelTitle)||void 0===I?void 0:I.color)&&void 0!==Z?Z:h.content.secondary},i.orientation===m.HORIZONTAL?{}:P?V:U),stacked:!0}},onClick:(e,t)=>{if(!i.onBarClick)return;const o=t[0].datasetIndex,l=t[0].index,a=e.chart.data.datasets[o].label,n=e.chart.data.labels[l];i.onBarClick(n,a)},onHover:(e,t)=>{i.onBarClick&&t.length&&(e.native.target.style.cursor="pointer")}},G=Array.from(new Set(i.data.map((e=>e.label)))),J={labels:(K=G,K.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:[]};var K;return c((()=>{const e=[];G.forEach(((t,o)=>{const l=[],a=i.data.filter((e=>e.label===t));a.sort(((e,t)=>t.value-e.value)),a.forEach(((e,t)=>{const i=((e,t,o)=>O[e].slice(-o)[t])(o,t,a.length);l.push({color:i,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:i,data:Array(G.length).fill(0)},$);n.data[o]=e.value,J.datasets.push(n)})),e.push(l)})),D(e),w(J)}),[]),B?o(b,Object.assign({padding:i.outerPadding},{children:[i.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(g,Object.assign({color:null!==(z=i.chartHeading.color)&&void 0!==z?z:h.content.secondary},{children:i.chartHeading.heading}))})),o("div",Object.assign({className:"graph__wrapper"},{children:[e("div",Object.assign({style:{height:null!==(E=i.graphCanvasHeight)&&void 0!==E?E:500,flex:1}},{children:e(v,{options:q,data:B})})),e("div",{children:_.map(((t,i)=>e("div",Object.assign({className:"legend__set"},{children:t.map((t=>o("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:t.color}}),e(u,Object.assign({color:h.content.secondary},{children:t.label}))]}),t.label.replace(" ","_"))))}),`Legend_set_${i}`)))})]}))]})):e(t,{})};export{T as StackedBarDistributionChart};
|