@bikdotai/bik-component-library 0.0.503-beta.analytics-1 → 0.0.503-beta.analytics-2
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/StackedBarChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.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/StackedBarDistributionChart.js +1 -1
- 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("react"),i=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),n=require("../../utils/DateUtils.js"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/arrow_down.svg.js"),l=require("../../assets/icons/arrow_up.svg.js"),o=require("../../assets/icons/info.svg.js"),a=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),d=require("../TypographyStyle.js"),g=require("./chart/utils/calcPercentage.js"),u=require("./CommonStyles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=h(t);const m=i=>{let{percent:o,direction:a,timeline:c,customRange:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),n=require("../../utils/DateUtils.js"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/arrow_down.svg.js"),l=require("../../assets/icons/arrow_up.svg.js"),o=require("../../assets/icons/info.svg.js"),a=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),d=require("../TypographyStyle.js"),g=require("./chart/utils/calcPercentage.js"),u=require("./CommonStyles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=h(t);const m=i=>{let{percent:o,direction:a,timeline:c,customRange:u,trendRaw:h,prefixSymbol:y,trendIconStyle:m}=i;const p="negative"===a?s.default:l.default,j="negative"===a?r.COLORS.background.negative.vibrant:"positive"===a?r.COLORS.background.positive.vibrant:r.COLORS.content.placeholder,x=t.useRef("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&&u?n.default.getAnalyticsCustomDateTimelineText(u):""),b=t.useRef((()=>{const e=((null!=h?h:0)>0?"+":"")+(null!=y?y:"");return void 0===h?"--":`${null!=e?e:""}${g.truncateValueTo10K(h)}`})());return e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof o&&e.jsx(p,{color:j,height:20,width:20,style:Object.assign({marginRight:2},null!=m?m:{})}),"number"==typeof o&&a&&e.jsxs(d.TitleSmall,Object.assign({style:{color:j}},{children:["neutral"===a?0:o<1e3?o:">999","%"]})),!!h&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:`(${b.current})`})),c&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:x.current}))]}))};exports.AnalyticsTrend=t=>{let{title:n,value:s,trendPercent:l,type:h="horizontal",timeline:p,customRange:j,tooltip:x,card:b=!0,rightSeparator:f=!1,size:O="big",share:v=!1,formatVal:S,prefixSymbol:C,trailingIcon:R,onTrailIconClick:T,iconTooltipBody:w,funnelPercent:L,isLoading:$,trendRaw:q,suffixText:I,trendStyle:D,trendContainerStyle:k,trendIconStyle:M}=t;const z="big"===O?d.TitleLarge:d.TitleMedium,P=void 0!==l?l<0?"negative":0===l?"neutral":"positive":void 0,_=void 0!==l?v?Math.round(l):Math.abs(Math.round(l)):void 0;return e.jsx(u.AnalyticsTrendContainer,Object.assign({card:b},{children:e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:4,borderRightWidth:f?1:0,borderRightColor:r.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:b?0:24,paddingRight:b?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"},null!=k?k:{})},{children:[e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=D?D:{})},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsx(d.BodySecondary,Object.assign({style:{color:r.COLORS.content.secondary}},{children:n})),x&&e.jsx(c.Tooltip,Object.assign({body:x,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e.jsx(o.default,{color:r.COLORS.content.inactive,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},v?{justifyContent:"space-between"}:{})},{children:[$&&e.jsx(i.ShimmerComponentStyled,{width:108,height:26}),!$&&e.jsx(z,Object.assign({style:{color:r.COLORS.content.primary}},{children:void 0===s?"--":"number"==typeof s&&S?s>9999?`${null!=C?C:""}${g.truncateValueTo10K(s)} ${null!=I?I:""}`:`${null!=C?C:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(s)} ${null!=I?I:""}`:`${null!=C?C:""}${s} ${null!=I?I:""}`})),"horizontal"===h&&!$&&!v&&e.jsx(m,{timeline:p,customRange:j,percent:_,direction:P,trendRaw:q,prefixSymbol:C,trendIconStyle:M}),$&&!v&&"horizontal"===h&&e.jsx(i.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),"vertical"===h&&!$&&void 0!==L&&e.jsx(a.Tag,{tagText:`${L} %`,theme:"light",type:"neutral"}),v&&!$&&void 0!==_&&e.jsx(a.Tag,{tagText:`${_} %`,theme:"light",type:"neutral"})]})),"vertical"===h&&!$&&!v&&e.jsx("div",Object.assign({style:{marginTop:10}},{children:e.jsx(m,{timeline:p,customRange:j,percent:_,direction:P,trendRaw:q,prefixSymbol:C,trendIconStyle:M})})),$&&"vertical"===h&&e.jsx(i.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]})),w&&!$&&e.jsx(c.Tooltip,Object.assign({body:w,placement:"right"},{children:R&&e.jsx("div",Object.assign({className:"icon--holder",onClick:T},{children:y.default.createElement(R,{height:20,width:20,color:r.COLORS.content.secondary})}))}))]}))}))};
|
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 e=require("react/jsx-runtime"),t=require("chart.js"),o=require("chartjs-plugin-datalabels"),i=require("react-chartjs-2"),a=require("../../../TypographyStyle.js"),l=require("../../../../constants/Theme.js"),n=require("../utils/calcPercentage.js"),s=require("./StackedBarChart.model.js"),r=require("./StackedBarChart.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(o);t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip,t.Legend,c.default);exports.StackedBarChart=t=>{var o,d,c,O,u,A,v,x,g,p,T,R,y,N,I,b,C,h,S,E,H,k,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),o=require("chartjs-plugin-datalabels"),i=require("react-chartjs-2"),a=require("../../../TypographyStyle.js"),l=require("../../../../constants/Theme.js"),n=require("../utils/calcPercentage.js"),s=require("./StackedBarChart.model.js"),r=require("./StackedBarChart.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(o);t.Chart.register(t.CategoryScale,t.LinearScale,t.BarElement,t.Tooltip,t.Legend,c.default);exports.StackedBarChart=t=>{var o,d,c,O,u,A,v,x,g,p,T,R,y,N,I,b,C,h,S,E,H,f,k,F,L,j,m,_,P,G,Z,z,B,D,q;const w=0===t.yAxis.data.length,V=t.colorSchema===s.COLOR_SCHEMA.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],W={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barWidth:t.barWidth},K={};t.yAxis.data.map((e=>{e.map((e=>{K[e.name]?K[e.name].push(e.value):K[e.name]=[e.value]}))}));const M=Object.keys(K).map(((e,t)=>Object.assign({label:e,data:K[e],backgroundColor:V[t]},W))),Y={plugins:{legend:{display:!w&&!t.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!w,callbacks:{label:null===(o=t.tooltipConfig)||void 0===o?void 0:o.labelCallback,footer:null===(d=t.tooltipConfig)||void 0===d?void 0:d.footerCallback},footerFont:null===(O=null===(c=t.tooltipConfig)||void 0===c?void 0:c.footerStyles)||void 0===O?void 0:O.footerFont},datalabels:{display:null!==(u=t.showTotal)&&void 0!==u&&u,anchor:"end",align:"end",clamp:!0,formatter:(e,t)=>{var o;const i=t.datasetIndex,a=t.chart.data.datasets;if(i!==a.length-1)return"";const l=t.dataIndex;let n=0;for(let e=0;e<a.length;e++)n+=null!==(o=a[e].data[l])&&void 0!==o?o:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:l.COLORS.content.secondary}},layout:{padding:{right:t.showTotal&&t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=s.GRAPH_ORIENTATION.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!t.customLegend,labels:{usePointStyle:!0}},indexAxis:t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(A=t.yAxis)||void 0===A?void 0:A.title:null===(v=t.xAxis)||void 0===v?void 0:v.title),text:t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(x=t.yAxis)||void 0===x?void 0:x.title:null===(g=t.xAxis)||void 0===g?void 0:g.title,color:null!==(R=t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(p=t.yAxis)||void 0===p?void 0:p.titleColor:null===(T=t.xAxis)||void 0===T?void 0:T.titleColor)&&void 0!==R?R:l.COLORS.content.secondary,font:{size:l.FONTS.caption.fontSize}},grid:{display:t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL,color:l.COLORS.background.base},ticks:{fontSize:l.FONTS.caption.fontSize,color:null!==(y=t.yAxis.labelColor)&&void 0!==y?y:l.COLORS.content.secondary,callback:t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?n.truncateValueToK:void 0},stacked:t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(N=t.yAxis)||void 0===N?void 0:N.stacked)||(null===(I=t.yAxis)||void 0===I?void 0:I.stacked):"boolean"!=typeof(null===(b=t.xAxis)||void 0===b?void 0:b.stacked)||(null===(C=t.xAxis)||void 0===C?void 0:C.stacked)},y:{title:{display:!!(t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(h=t.xAxis)||void 0===h?void 0:h.title:null===(S=t.yAxis)||void 0===S?void 0:S.title),text:t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(E=t.xAxis)||void 0===E?void 0:E.title:null===(H=t.yAxis)||void 0===H?void 0:H.title,color:null!==(F=t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(f=t.xAxis)||void 0===f?void 0:f.titleColor:null===(k=t.yAxis)||void 0===k?void 0:k.titleColor)&&void 0!==F?F:l.COLORS.content.secondary,font:{size:l.FONTS.caption.fontSize}},grid:{display:t.orientation!==s.GRAPH_ORIENTATION.HORIZONTAL,color:l.COLORS.background.base},ticks:Object.assign(Object.assign({stepSize:t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(L=t.xAxis)||void 0===L?void 0:L.stepSize:null===(j=t.yAxis)||void 0===j?void 0:j.stepSize,fontSize:l.FONTS.caption.fontSize,color:null!==(m=t.xAxis.labelColor)&&void 0!==m?m:l.COLORS.content.secondary},w?{min:0,max:2e3,stepSize:200}:{}),{callback:t.orientation!==s.GRAPH_ORIENTATION.VERTICAL?n.truncateValueToK:void 0}),stacked:t.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(_=t.xAxis)||void 0===_?void 0:_.stacked)||(null===(P=t.xAxis)||void 0===P?void 0:P.stacked):"boolean"!=typeof(null===(G=t.yAxis)||void 0===G?void 0:G.stacked)||(null===(Z=t.yAxis)||void 0===Z?void 0:Z.stacked)}},onClick:(e,o)=>{if(!t.onBarClick)return;const i=o[0].datasetIndex,a=o[0].index,l=e.chart.data.datasets[i].label,n=e.chart.data.labels[a];t.onBarClick(n,l)},onHover:(e,o)=>{t.onBarClick&&o.length&&(e.native.target.style.cursor="pointer")}};t.orientation&&t.orientation!==s.GRAPH_ORIENTATION.VERTICAL?delete Y.scales.y.ticks.callback:delete Y.scales.x.ticks.callback;const J={labels:t.xAxis.data.map((e=>"string"==typeof e?e:e.name)),datasets:w?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:M};return e.jsxs(r.GraphContainerWrapper,Object.assign({style:null!==(z=t.wrapperStyle)&&void 0!==z?z:{},padding:t.outerPadding,customLegend:t.customLegend},{children:[t.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(a.TitleRegular,Object.assign({color:null!==(B=t.chartHeading.color)&&void 0!==B?B:l.COLORS.content.secondary},{children:t.chartHeading.heading}))})),t.customLegend&&e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",padding:"0px 24px 12px 24px",justifyContent:"flex-end"}},{children:M.map((t=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:t.backgroundColor}}),e.jsx(a.BodyTiny,Object.assign({color:l.COLORS.content.secondary},{children:t.label}))]}),t.label.replace(" ","_"))))})),e.jsx("div",Object.assign({className:"graph__wrapper"},{children:e.jsx("div",Object.assign({style:{height:null!==(D=t.graphCanvasHeight)&&void 0!==D?D:500,width:null!==(q=t.graphCanvasWidth)&&void 0!==q?q:"auto"}},{children:e.jsx(i.Bar,{options:Y,data:J})}))}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("chart.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("chart.js"),t=require("chartjs-plugin-datalabels"),a=require("react"),o=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),r=require("./StackedBarChart.styles.js"),s=require("./StackedBarDistributionChart.model.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t);l.Chart.register(l.CategoryScale,l.LinearScale,l.BarElement,l.Tooltip,l.Legend,c.default),l.Chart.defaults.plugins.datalabels.display=!1;exports.StackedBarDistributionChart=l=>{var t,d,c,u,O,v,g,T,b,h,p,A,R,N,I,y,C,f,j,x,S,H,F,E,_,L,m,k,P,G,Z,D;const[w,B]=a.useState([]),[z,q]=a.useState(),M=!l.data.filter((e=>!!e.value)).length,W=l.colorMatrix&&l.colorMatrix.length?l.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"]],V={min:0,max:200,stepSize:20},Y={min:l.minValue,max:l.maxValue,stepSize:l.valuesStepSize},U={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:M?0:null!==(t=l.barThickness)&&void 0!==t?t:100},$={plugins:{legend:{display:!1},tooltip:{enabled:!M,callbacks:{label:null===(d=l.tooltipConfig)||void 0===d?void 0:d.labelCallback,footer:null===(c=l.tooltipConfig)||void 0===c?void 0:c.footerCallback},footerFont:null===(O=null===(u=l.tooltipConfig)||void 0===u?void 0:u.footerStyles)||void 0===O?void 0:O.footerFont},datalabels:{display:null!==(v=!M&&l.showTotal)&&void 0!==v&&v,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var t;const a=l.datasetIndex,o=l.chart.data.datasets;if(a!==o.length-1)return"";const i=l.dataIndex;let n=0;for(let e=0;e<o.length;e++)n+=null!==(t=o[e].data[i])&&void 0!==t?t:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:n.COLORS.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",layout:{padding:{right:l.showTotal&&l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:l.showTotal&&l.orientation!=s.GRAPH_ORIENTATION.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(g=l.valueTitle)||void 0===g?void 0:g.heading:null===(T=l.labelTitle)||void 0===T?void 0:T.heading),text:l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(b=l.valueTitle)||void 0===b?void 0:b.heading:null===(h=l.labelTitle)||void 0===h?void 0:h.heading,color:null!==(R=l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(p=l.valueTitle)||void 0===p?void 0:p.color:null===(A=l.labelTitle)||void 0===A?void 0:A.color)&&void 0!==R?R:n.COLORS.content.secondary,font:{size:n.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL,color:n.COLORS.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:n.FONTS.caption.fontSize,color:null!==(y=l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(N=l.labelTitle)||void 0===N?void 0:N.color:null===(I=l.valueTitle)||void 0===I?void 0:I.color)&&void 0!==y?y:n.COLORS.content.secondary},l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?M?V:Y:{}),{callback:(e,t)=>{var a,o;return l.orientation!==s.GRAPH_ORIENTATION.HORIZONTAL?null!==(o=null===(a=null==z?void 0:z.labels)||void 0===a?void 0:a[t])&&void 0!==o?o:"":"number"!=typeof e||e<1e3?e:(e/1e3).toString().substring(0,4)+"k"}}),stacked:!0},y:{title:{display:!!(l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(C=l.labelTitle)||void 0===C?void 0:C.heading:null===(f=l.valueTitle)||void 0===f?void 0:f.heading),text:l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(j=l.labelTitle)||void 0===j?void 0:j.heading:null===(x=l.valueTitle)||void 0===x?void 0:x.heading,color:null!==(F=l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(S=l.labelTitle)||void 0===S?void 0:S.color:null===(H=l.valueTitle)||void 0===H?void 0:H.color)&&void 0!==F?F:n.COLORS.content.secondary,font:{size:n.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation!==s.GRAPH_ORIENTATION.HORIZONTAL,color:n.COLORS.background.base},ticks:Object.assign(Object.assign({fontSize:n.FONTS.caption.fontSize,color:null!==(L=l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null===(E=l.valueTitle)||void 0===E?void 0:E.color:null===(_=l.labelTitle)||void 0===_?void 0:_.color)&&void 0!==L?L:n.COLORS.content.secondary},l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?{}:M?V:Y),{callback:(e,t)=>{var a,o;return l.orientation===s.GRAPH_ORIENTATION.HORIZONTAL?null!==(o=null===(a=null==z?void 0:z.labels)||void 0===a?void 0:a[t])&&void 0!==o?o:"":"number"!=typeof e||e<1e3?e:(e/1e3).toString().substring(0,2)+"k"}}),stacked:!0}},onClick:(e,t)=>{if(!l.onBarClick)return;const a=t[0].datasetIndex,o=t[0].index,i=e.chart.data.datasets[a].label,n=e.chart.data.labels[o];l.onBarClick(n,i)},onHover:(e,t)=>{l.onBarClick&&t.length&&(e.native.target.style.cursor="pointer")}},J=Array.from(new Set(l.data.map((e=>e.label)))),K={labels:(Q=J,Q.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:M?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var Q;a.useEffect((()=>{const e=[];J.forEach(((t,a)=>{const o=[],i=l.data.filter((e=>e.label===t));l.isFunnel||i.sort(((e,l)=>l.value-e.value)),i.forEach(((e,l)=>{const t=((e,l,t)=>W[e].slice(-t)[l])(a,l,i.length);o.push({color:t,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:t,data:Array(J.length).fill(0)},U);n.data[a]=e.value,K.datasets.push(n)})),e.push(o)})),B(e),q(K)}),[l.data]);const X=a.useCallback((()=>e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:ee().map((l=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:l.color}}),e.jsx(i.BodyTiny,Object.assign({color:n.COLORS.content.secondary},{children:l.label}))]}),l.label.replace(" ","_"))))}))),[w]),ee=()=>{const e=[];return w.forEach(((l,t)=>{e.push({color:l[0].color,label:J[t]})})),e};if(!z)return e.jsx(e.Fragment,{});return e.jsxs(r.GraphContainerWrapper,Object.assign({style:null!==(m=l.wrapperStyle)&&void 0!==m?m:{},padding:l.outerPadding,chartWrapperHeight:l.chartWrapperHeight,isFunnel:l.isFunnel},{children:[l.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(i.TitleRegular,Object.assign({color:null!==(k=l.chartHeading.color)&&void 0!==k?k:n.COLORS.content.secondary},{children:l.chartHeading.heading}))})),e.jsxs("div",Object.assign({className:"graph__wrapper"},{children:[(null===(P=l.showLegend)||void 0===P||P)&&l.isFunnel&&X(),e.jsx("div",Object.assign({style:{height:null!==(G=l.graphCanvasHeight)&&void 0!==G?G:500,width:null!==(Z=l.graphCanvasWidth)&&void 0!==Z?Z:"100%",flex:1}},{children:e.jsx(o.Bar,{options:$,data:z})})),(null===(D=l.showLegend)||void 0===D||D)&&!l.isFunnel&&e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:w.map(((l,t)=>e.jsx("div",Object.assign({className:"legend__set"},{children:l.map((l=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:l.color}}),e.jsx(i.BodyTiny,Object.assign({color:n.COLORS.content.secondary},{children:l.label}))]}),l.label.replace(" ","_"))))}),`Legend_set_${t}`)))}))]}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{useRef as n}from"react";import{ShimmerComponentStyled as r}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import o from"../../utils/DateUtils.js";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/arrow_down.svg.js";import a from"../../assets/icons/arrow_up.svg.js";import c from"../../assets/icons/info.svg.js";import{Tag as d}from"../tag/Tag.js";import{Tooltip as m}from"../tooltips/Tooltip.js";import{BodySecondary as g,TitleSmall as h,Caption as p,TitleLarge as y,TitleMedium as u}from"../TypographyStyle.js";import{truncateValueTo10K as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{useRef as n}from"react";import{ShimmerComponentStyled as r}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import o from"../../utils/DateUtils.js";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/arrow_down.svg.js";import a from"../../assets/icons/arrow_up.svg.js";import c from"../../assets/icons/info.svg.js";import{Tag as d}from"../tag/Tag.js";import{Tooltip as m}from"../tooltips/Tooltip.js";import{BodySecondary as g,TitleSmall as h,Caption as p,TitleLarge as y,TitleMedium as u}from"../TypographyStyle.js";import{truncateValueTo10K as f}from"./chart/utils/calcPercentage.js";import{AnalyticsTrendContainer as b}from"./CommonStyles.js";const v=n=>{let{title:o,value:s,trendPercent:a,type:h="horizontal",timeline:p,customRange:v,tooltip:x,card:w=!0,rightSeparator:O=!1,size:S="big",share:T=!1,formatVal:$,prefixSymbol:I,trailingIcon:R,onTrailIconClick:C,iconTooltipBody:D,funnelPercent:k,isLoading:z,trendRaw:L,suffixText:M,trendStyle:N,trendContainerStyle:P,trendIconStyle:F}=n;const W="big"===S?y:u,_=void 0!==a?a<0?"negative":0===a?"neutral":"positive":void 0,A=void 0!==a?T?Math.round(a):Math.abs(Math.round(a)):void 0;return e(b,Object.assign({card:w},{children:t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:4,borderRightWidth:O?1:0,borderRightColor:l.stroke.primary,borderRightStyle:"solid",paddingLeft:w?0:24,paddingRight:w?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"},null!=P?P:{})},{children:[t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=N?N:{})},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e(g,Object.assign({style:{color:l.content.secondary}},{children:o})),x&&e(m,Object.assign({body:x,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e(c,{color:l.content.inactive,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},T?{justifyContent:"space-between"}:{})},{children:[z&&e(r,{width:108,height:26}),!z&&e(W,Object.assign({style:{color:l.content.primary}},{children:void 0===s?"--":"number"==typeof s&&$?s>9999?`${null!=I?I:""}${f(s)} ${null!=M?M:""}`:`${null!=I?I:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(s)} ${null!=M?M:""}`:`${null!=I?I:""}${s} ${null!=M?M:""}`})),"horizontal"===h&&!z&&!T&&e(j,{timeline:p,customRange:v,percent:A,direction:_,trendRaw:L,prefixSymbol:I,trendIconStyle:F}),z&&!T&&"horizontal"===h&&e(r,{height:20,width:141,marginTop:6}),"vertical"===h&&!z&&void 0!==k&&e(d,{tagText:`${k} %`,theme:"light",type:"neutral"}),T&&!z&&void 0!==A&&e(d,{tagText:`${A} %`,theme:"light",type:"neutral"})]})),"vertical"===h&&!z&&!T&&e("div",Object.assign({style:{marginTop:10}},{children:e(j,{timeline:p,customRange:v,percent:A,direction:_,trendRaw:L,prefixSymbol:I,trendIconStyle:F})})),z&&"vertical"===h&&e(r,{height:20,width:141,marginTop:6})]})),D&&!z&&e(m,Object.assign({body:D,placement:"right"},{children:R&&e("div",Object.assign({className:"icon--holder",onClick:C},{children:i.createElement(R,{height:20,width:20,color:l.content.secondary})}))}))]}))}))},j=i=>{let{percent:r,direction:c,timeline:d,customRange:m,trendRaw:g,prefixSymbol:y,trendIconStyle:u}=i;const b="negative"===c?s:a,v="negative"===c?l.background.negative.vibrant:"positive"===c?l.background.positive.vibrant:l.content.placeholder,j=n("today"===d?"vs yesterday":"yesterday"===d?"vs 1 day before":"7 days"===d?"vs last 7 days":"30 days"===d?"vs last 30 days":"custom"===d&&m?o.getAnalyticsCustomDateTimelineText(m):""),x=n((()=>{const e=((null!=g?g:0)>0?"+":"")+(null!=y?y:"");return void 0===g?"--":`${null!=e?e:""}${f(g)}`})());return t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof r&&e(b,{color:v,height:20,width:20,style:Object.assign({marginRight:2},null!=u?u:{})}),"number"==typeof r&&c&&t(h,Object.assign({style:{color:v}},{children:["neutral"===c?0:r<1e3?r:">999","%"]})),!!g&&e(p,Object.assign({style:{marginLeft:4,color:l.content.placeholder}},{children:`(${x.current})`})),d&&e(p,Object.assign({style:{marginLeft:4,color:l.content.placeholder}},{children:j.current}))]}))};export{v as AnalyticsTrend};
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as o,jsx as t}from"react/jsx-runtime";import{Chart as i,CategoryScale as e,LinearScale as l,BarElement as a,Tooltip as n,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{Bar as r}from"react-chartjs-2";import{TitleRegular as c,BodyTiny as v}from"../../../TypographyStyle.js";import{COLORS as p,FONTS as
|
|
1
|
+
import{jsxs as o,jsx as t}from"react/jsx-runtime";import{Chart as i,CategoryScale as e,LinearScale as l,BarElement as a,Tooltip as n,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{Bar as r}from"react-chartjs-2";import{TitleRegular as c,BodyTiny as v}from"../../../TypographyStyle.js";import{COLORS as p,FONTS as u}from"../../../../constants/Theme.js";import{truncateValueToK as g}from"../utils/calcPercentage.js";import{COLOR_SCHEMA as x,GRAPH_ORIENTATION as y}from"./StackedBarChart.model.js";import{GraphContainerWrapper as b}from"./StackedBarChart.styles.js";i.register(e,l,a,n,d,s);const A=i=>{var e,l,a,n,d,s,A,m,h,O,f,k,C,F,L,T,j,S,H,I,E,N,R,Z,z,D,w,B,P,_,W,V,Y,q,G;const J=0===i.yAxis.data.length,K=i.colorSchema===x.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"],M={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barWidth:i.barWidth},Q={};i.yAxis.data.map((o=>{o.map((o=>{Q[o.name]?Q[o.name].push(o.value):Q[o.name]=[o.value]}))}));const U=Object.keys(Q).map(((o,t)=>Object.assign({label:o,data:Q[o],backgroundColor:K[t]},M))),X={plugins:{legend:{display:!J&&!i.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!J,callbacks:{label:null===(e=i.tooltipConfig)||void 0===e?void 0:e.labelCallback,footer:null===(l=i.tooltipConfig)||void 0===l?void 0:l.footerCallback},footerFont:null===(n=null===(a=i.tooltipConfig)||void 0===a?void 0:a.footerStyles)||void 0===n?void 0:n.footerFont},datalabels:{display:null!==(d=i.showTotal)&&void 0!==d&&d,anchor:"end",align:"end",clamp:!0,formatter:(o,t)=>{var i;const e=t.datasetIndex,l=t.chart.data.datasets;if(e!==l.length-1)return"";const a=t.dataIndex;let n=0;for(let o=0;o<l.length;o++)n+=null!==(i=l[o].data[a])&&void 0!==i?i:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:p.content.secondary}},layout:{padding:{right:i.showTotal&&i.orientation===y.HORIZONTAL?50:0,top:i.showTotal&&i.orientation!=y.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!i.customLegend,labels:{usePointStyle:!0}},indexAxis:i.orientation===y.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(i.orientation===y.HORIZONTAL?null===(s=i.yAxis)||void 0===s?void 0:s.title:null===(A=i.xAxis)||void 0===A?void 0:A.title),text:i.orientation===y.HORIZONTAL?null===(m=i.yAxis)||void 0===m?void 0:m.title:null===(h=i.xAxis)||void 0===h?void 0:h.title,color:null!==(k=i.orientation===y.HORIZONTAL?null===(O=i.yAxis)||void 0===O?void 0:O.titleColor:null===(f=i.xAxis)||void 0===f?void 0:f.titleColor)&&void 0!==k?k:p.content.secondary,font:{size:u.caption.fontSize}},grid:{display:i.orientation===y.HORIZONTAL,color:p.background.base},ticks:{fontSize:u.caption.fontSize,color:null!==(C=i.yAxis.labelColor)&&void 0!==C?C:p.content.secondary,callback:i.orientation===y.HORIZONTAL?g:void 0},stacked:i.orientation===y.HORIZONTAL?"boolean"!=typeof(null===(F=i.yAxis)||void 0===F?void 0:F.stacked)||(null===(L=i.yAxis)||void 0===L?void 0:L.stacked):"boolean"!=typeof(null===(T=i.xAxis)||void 0===T?void 0:T.stacked)||(null===(j=i.xAxis)||void 0===j?void 0:j.stacked)},y:{title:{display:!!(i.orientation===y.HORIZONTAL?null===(S=i.xAxis)||void 0===S?void 0:S.title:null===(H=i.yAxis)||void 0===H?void 0:H.title),text:i.orientation===y.HORIZONTAL?null===(I=i.xAxis)||void 0===I?void 0:I.title:null===(E=i.yAxis)||void 0===E?void 0:E.title,color:null!==(Z=i.orientation===y.HORIZONTAL?null===(N=i.xAxis)||void 0===N?void 0:N.titleColor:null===(R=i.yAxis)||void 0===R?void 0:R.titleColor)&&void 0!==Z?Z:p.content.secondary,font:{size:u.caption.fontSize}},grid:{display:i.orientation!==y.HORIZONTAL,color:p.background.base},ticks:Object.assign(Object.assign({stepSize:i.orientation===y.HORIZONTAL?null===(z=i.xAxis)||void 0===z?void 0:z.stepSize:null===(D=i.yAxis)||void 0===D?void 0:D.stepSize,fontSize:u.caption.fontSize,color:null!==(w=i.xAxis.labelColor)&&void 0!==w?w:p.content.secondary},J?{min:0,max:2e3,stepSize:200}:{}),{callback:i.orientation!==y.VERTICAL?g:void 0}),stacked:i.orientation===y.HORIZONTAL?"boolean"!=typeof(null===(B=i.xAxis)||void 0===B?void 0:B.stacked)||(null===(P=i.xAxis)||void 0===P?void 0:P.stacked):"boolean"!=typeof(null===(_=i.yAxis)||void 0===_?void 0:_.stacked)||(null===(W=i.yAxis)||void 0===W?void 0:W.stacked)}},onClick:(o,t)=>{if(!i.onBarClick)return;const e=t[0].datasetIndex,l=t[0].index,a=o.chart.data.datasets[e].label,n=o.chart.data.labels[l];i.onBarClick(n,a)},onHover:(o,t)=>{i.onBarClick&&t.length&&(o.native.target.style.cursor="pointer")}};i.orientation&&i.orientation!==y.VERTICAL?delete X.scales.y.ticks.callback:delete X.scales.x.ticks.callback;const $={labels:i.xAxis.data.map((o=>"string"==typeof o?o:o.name)),datasets:J?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:U};return o(b,Object.assign({style:null!==(V=i.wrapperStyle)&&void 0!==V?V:{},padding:i.outerPadding,customLegend:i.customLegend},{children:[i.chartHeading&&t("div",Object.assign({style:{marginBottom:24}},{children:t(c,Object.assign({color:null!==(Y=i.chartHeading.color)&&void 0!==Y?Y:p.content.secondary},{children:i.chartHeading.heading}))})),i.customLegend&&t("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",padding:"0px 24px 12px 24px",justifyContent:"flex-end"}},{children:U.map((i=>o("div",Object.assign({className:"legend__row"},{children:[t("div",{className:"legend__palette",style:{backgroundColor:i.backgroundColor}}),t(v,Object.assign({color:p.content.secondary},{children:i.label}))]}),i.label.replace(" ","_"))))})),t("div",Object.assign({className:"graph__wrapper"},{children:t("div",Object.assign({style:{height:null!==(q=i.graphCanvasHeight)&&void 0!==q?q:500,width:null!==(G=i.graphCanvasWidth)&&void 0!==G?G:"auto"}},{children:t(r,{options:X,data:$})}))}))]}))};export{A as StackedBarChart};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{Chart as t,CategoryScale as a,LinearScale as i,BarElement as n,Tooltip as r,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{useState as c,useEffect as v,useCallback as u}from"react";import{Bar as g}from"react-chartjs-2";import{BodyTiny as p,TitleRegular as b}from"../../../TypographyStyle.js";import{COLORS as h,FONTS as O}from"../../../../constants/Theme.js";import{GraphContainerWrapper as f}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as m}from"./StackedBarDistributionChart.model.js";t.register(a,i,n,r,d,s),t.defaults.plugins.datalabels.display=!1;const y=t=>{var a,i,n,r,d,s,y,T,F,A,C,k,j,x,H,N,S,L,I,E,R,Z,_,D,w,z,B,M,P,W,V,Y;const[U,$]=c([]),[q,G]=c(),J=!t.data.filter((e=>!!e.value)).length,K=t.colorMatrix&&t.colorMatrix.length?t.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"]],Q={min:0,max:200,stepSize:20},X={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},ee={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:J?0:null!==(a=t.barThickness)&&void 0!==a?a:100},le={plugins:{legend:{display:!1},tooltip:{enabled:!J,callbacks:{label:null===(i=t.tooltipConfig)||void 0===i?void 0:i.labelCallback,footer:null===(n=t.tooltipConfig)||void 0===n?void 0:n.footerCallback},footerFont:null===(d=null===(r=t.tooltipConfig)||void 0===r?void 0:r.footerStyles)||void 0===d?void 0:d.footerFont},datalabels:{display:null!==(s=!J&&t.showTotal)&&void 0!==s&&s,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var o;const t=l.datasetIndex,a=l.chart.data.datasets;if(t!==a.length-1)return"";const i=l.dataIndex;let n=0;for(let e=0;e<a.length;e++)n+=null!==(o=a[e].data[i])&&void 0!==o?o:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:h.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===m.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===m.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=m.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===m.HORIZONTAL?null===(y=t.valueTitle)||void 0===y?void 0:y.heading:null===(T=t.labelTitle)||void 0===T?void 0:T.heading),text:t.orientation===m.HORIZONTAL?null===(F=t.valueTitle)||void 0===F?void 0:F.heading:null===(A=t.labelTitle)||void 0===A?void 0:A.heading,color:null!==(j=t.orientation===m.HORIZONTAL?null===(C=t.valueTitle)||void 0===C?void 0:C.color:null===(k=t.labelTitle)||void 0===k?void 0:k.color)&&void 0!==j?j:h.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation===m.HORIZONTAL,color:h.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:O.caption.fontSize,color:null!==(N=t.orientation===m.HORIZONTAL?null===(x=t.labelTitle)||void 0===x?void 0:x.color:null===(H=t.valueTitle)||void 0===H?void 0:H.color)&&void 0!==N?N:h.content.secondary},t.orientation===m.HORIZONTAL?J?Q:X:{}),{callback:(e,l)=>{var o,a;return t.orientation!==m.HORIZONTAL?null!==(a=null===(o=null==q?void 0:q.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e||e<1e3?e:(e/1e3).toString().substring(0,4)+"k"}}),stacked:!0},y:{title:{display:!!(t.orientation===m.HORIZONTAL?null===(S=t.labelTitle)||void 0===S?void 0:S.heading:null===(L=t.valueTitle)||void 0===L?void 0:L.heading),text:t.orientation===m.HORIZONTAL?null===(I=t.labelTitle)||void 0===I?void 0:I.heading:null===(E=t.valueTitle)||void 0===E?void 0:E.heading,color:null!==(_=t.orientation===m.HORIZONTAL?null===(R=t.labelTitle)||void 0===R?void 0:R.color:null===(Z=t.valueTitle)||void 0===Z?void 0:Z.color)&&void 0!==_?_:h.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation!==m.HORIZONTAL,color:h.background.base},ticks:Object.assign(Object.assign({fontSize:O.caption.fontSize,color:null!==(z=t.orientation===m.HORIZONTAL?null===(D=t.valueTitle)||void 0===D?void 0:D.color:null===(w=t.labelTitle)||void 0===w?void 0:w.color)&&void 0!==z?z:h.content.secondary},t.orientation===m.HORIZONTAL?{}:J?Q:X),{callback:(e,l)=>{var o,a;return t.orientation===m.HORIZONTAL?null!==(a=null===(o=null==q?void 0:q.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e||e<1e3?e:(e/1e3).toString().substring(0,2)+"k"}}),stacked:!0}},onClick:(e,l)=>{if(!t.onBarClick)return;const o=l[0].datasetIndex,a=l[0].index,i=e.chart.data.datasets[o].label,n=e.chart.data.labels[a];t.onBarClick(n,i)},onHover:(e,l)=>{t.onBarClick&&l.length&&(e.native.target.style.cursor="pointer")}},oe=Array.from(new Set(t.data.map((e=>e.label)))),te={labels:(ae=oe,ae.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:J?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var ae;v((()=>{const e=[];oe.forEach(((l,o)=>{const a=[],i=t.data.filter((e=>e.label===l));t.isFunnel||i.sort(((e,l)=>l.value-e.value)),i.forEach(((e,l)=>{const t=((e,l,o)=>K[e].slice(-o)[l])(o,l,i.length);a.push({color:t,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:t,data:Array(oe.length).fill(0)},ee);n.data[o]=e.value,te.datasets.push(n)})),e.push(a)})),$(e),G(te)}),[t.data]);const ie=u((()=>e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px"}},{children:ne().map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:h.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}))),[U]),ne=()=>{const e=[];return U.forEach(((l,o)=>{e.push({color:l[0].color,label:oe[o]})})),e};if(!q)return e(o,{});return l(f,Object.assign({style:null!==(B=t.wrapperStyle)&&void 0!==B?B:{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel},{children:[t.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(b,Object.assign({color:null!==(M=t.chartHeading.color)&&void 0!==M?M:h.content.secondary},{children:t.chartHeading.heading}))})),l("div",Object.assign({className:"graph__wrapper"},{children:[(null===(P=t.showLegend)||void 0===P||P)&&t.isFunnel&&ie(),e("div",Object.assign({style:{height:null!==(W=t.graphCanvasHeight)&&void 0!==W?W:500,width:null!==(V=t.graphCanvasWidth)&&void 0!==V?V:"100%",flex:1}},{children:e(g,{options:le,data:q})})),(null===(Y=t.showLegend)||void 0===Y||Y)&&!t.isFunnel&&e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:U.map(((o,t)=>e("div",Object.assign({className:"legend__set"},{children:o.map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:h.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}),`Legend_set_${t}`)))}))]}))]}))};export{y as StackedBarDistributionChart};
|
|
1
|
+
import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{Chart as t,CategoryScale as a,LinearScale as i,BarElement as n,Tooltip as r,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{useState as c,useEffect as v,useCallback as u}from"react";import{Bar as g}from"react-chartjs-2";import{BodyTiny as p,TitleRegular as b}from"../../../TypographyStyle.js";import{COLORS as h,FONTS as O}from"../../../../constants/Theme.js";import{GraphContainerWrapper as f}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as m}from"./StackedBarDistributionChart.model.js";t.register(a,i,n,r,d,s),t.defaults.plugins.datalabels.display=!1;const y=t=>{var a,i,n,r,d,s,y,T,F,A,C,k,j,x,H,N,S,L,I,E,R,Z,_,D,w,z,B,M,P,W,V,Y;const[U,$]=c([]),[q,G]=c(),J=!t.data.filter((e=>!!e.value)).length,K=t.colorMatrix&&t.colorMatrix.length?t.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"]],Q={min:0,max:200,stepSize:20},X={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},ee={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:J?0:null!==(a=t.barThickness)&&void 0!==a?a:100},le={plugins:{legend:{display:!1},tooltip:{enabled:!J,callbacks:{label:null===(i=t.tooltipConfig)||void 0===i?void 0:i.labelCallback,footer:null===(n=t.tooltipConfig)||void 0===n?void 0:n.footerCallback},footerFont:null===(d=null===(r=t.tooltipConfig)||void 0===r?void 0:r.footerStyles)||void 0===d?void 0:d.footerFont},datalabels:{display:null!==(s=!J&&t.showTotal)&&void 0!==s&&s,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var o;const t=l.datasetIndex,a=l.chart.data.datasets;if(t!==a.length-1)return"";const i=l.dataIndex;let n=0;for(let e=0;e<a.length;e++)n+=null!==(o=a[e].data[i])&&void 0!==o?o:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:h.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===m.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===m.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=m.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===m.HORIZONTAL?null===(y=t.valueTitle)||void 0===y?void 0:y.heading:null===(T=t.labelTitle)||void 0===T?void 0:T.heading),text:t.orientation===m.HORIZONTAL?null===(F=t.valueTitle)||void 0===F?void 0:F.heading:null===(A=t.labelTitle)||void 0===A?void 0:A.heading,color:null!==(j=t.orientation===m.HORIZONTAL?null===(C=t.valueTitle)||void 0===C?void 0:C.color:null===(k=t.labelTitle)||void 0===k?void 0:k.color)&&void 0!==j?j:h.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation===m.HORIZONTAL,color:h.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:O.caption.fontSize,color:null!==(N=t.orientation===m.HORIZONTAL?null===(x=t.labelTitle)||void 0===x?void 0:x.color:null===(H=t.valueTitle)||void 0===H?void 0:H.color)&&void 0!==N?N:h.content.secondary},t.orientation===m.HORIZONTAL?J?Q:X:{}),{callback:(e,l)=>{var o,a;return t.orientation!==m.HORIZONTAL?null!==(a=null===(o=null==q?void 0:q.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e||e<1e3?e:(e/1e3).toString().substring(0,4)+"k"}}),stacked:!0},y:{title:{display:!!(t.orientation===m.HORIZONTAL?null===(S=t.labelTitle)||void 0===S?void 0:S.heading:null===(L=t.valueTitle)||void 0===L?void 0:L.heading),text:t.orientation===m.HORIZONTAL?null===(I=t.labelTitle)||void 0===I?void 0:I.heading:null===(E=t.valueTitle)||void 0===E?void 0:E.heading,color:null!==(_=t.orientation===m.HORIZONTAL?null===(R=t.labelTitle)||void 0===R?void 0:R.color:null===(Z=t.valueTitle)||void 0===Z?void 0:Z.color)&&void 0!==_?_:h.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation!==m.HORIZONTAL,color:h.background.base},ticks:Object.assign(Object.assign({fontSize:O.caption.fontSize,color:null!==(z=t.orientation===m.HORIZONTAL?null===(D=t.valueTitle)||void 0===D?void 0:D.color:null===(w=t.labelTitle)||void 0===w?void 0:w.color)&&void 0!==z?z:h.content.secondary},t.orientation===m.HORIZONTAL?{}:J?Q:X),{callback:(e,l)=>{var o,a;return t.orientation===m.HORIZONTAL?null!==(a=null===(o=null==q?void 0:q.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e||e<1e3?e:(e/1e3).toString().substring(0,2)+"k"}}),stacked:!0}},onClick:(e,l)=>{if(!t.onBarClick)return;const o=l[0].datasetIndex,a=l[0].index,i=e.chart.data.datasets[o].label,n=e.chart.data.labels[a];t.onBarClick(n,i)},onHover:(e,l)=>{t.onBarClick&&l.length&&(e.native.target.style.cursor="pointer")}},oe=Array.from(new Set(t.data.map((e=>e.label)))),te={labels:(ae=oe,ae.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:J?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var ae;v((()=>{const e=[];oe.forEach(((l,o)=>{const a=[],i=t.data.filter((e=>e.label===l));t.isFunnel||i.sort(((e,l)=>l.value-e.value)),i.forEach(((e,l)=>{const t=((e,l,o)=>K[e].slice(-o)[l])(o,l,i.length);a.push({color:t,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:t,data:Array(oe.length).fill(0)},ee);n.data[o]=e.value,te.datasets.push(n)})),e.push(a)})),$(e),G(te)}),[t.data]);const ie=u((()=>e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:ne().map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:h.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}))),[U]),ne=()=>{const e=[];return U.forEach(((l,o)=>{e.push({color:l[0].color,label:oe[o]})})),e};if(!q)return e(o,{});return l(f,Object.assign({style:null!==(B=t.wrapperStyle)&&void 0!==B?B:{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel},{children:[t.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(b,Object.assign({color:null!==(M=t.chartHeading.color)&&void 0!==M?M:h.content.secondary},{children:t.chartHeading.heading}))})),l("div",Object.assign({className:"graph__wrapper"},{children:[(null===(P=t.showLegend)||void 0===P||P)&&t.isFunnel&&ie(),e("div",Object.assign({style:{height:null!==(W=t.graphCanvasHeight)&&void 0!==W?W:500,width:null!==(V=t.graphCanvasWidth)&&void 0!==V?V:"100%",flex:1}},{children:e(g,{options:le,data:q})})),(null===(Y=t.showLegend)||void 0===Y||Y)&&!t.isFunnel&&e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:U.map(((o,t)=>e("div",Object.assign({className:"legend__set"},{children:o.map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:h.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}),`Legend_set_${t}`)))}))]}))]}))};export{y as StackedBarDistributionChart};
|