@bikdotai/bik-component-library 0.0.629-beta.24 → 0.0.629-beta.35
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/HorizontalBarGraph/HorizontalGraph.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.d.ts +1 -0
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.d.ts +1 -0
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.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/HorizontalBarGraph/HorizontalGraph.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/LineChart/LineChart.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.model.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.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"),n=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),i=require("../../utils/DateUtils.js"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/arrow_down.svg.js"),a=require("../../assets/icons/arrow_up.svg.js"),l=require("../../assets/icons/info.svg.js"),o=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=n=>{let{percent:l,direction:o,timeline:c,customRange:u,trendRaw:h,prefixSymbol:y,trendIconStyle:m,isInternationalStore:p}=n;const j="negative"===o?s.default:a.default,x="negative"===o?r.COLORS.background.negative.vibrant:"positive"===o?r.COLORS.background.positive.vibrant:r.COLORS.content.placeholder,[b,f]=t.useState("");t.useEffect((()=>{f("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?i.default.getAnalyticsCustomDateTimelineText(u):"")}),[c,u]);const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),i=require("../../utils/DateUtils.js"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/arrow_down.svg.js"),a=require("../../assets/icons/arrow_up.svg.js"),l=require("../../assets/icons/info.svg.js"),o=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=n=>{let{percent:l,direction:o,timeline:c,customRange:u,trendRaw:h,prefixSymbol:y,trendIconStyle:m,isInternationalStore:p}=n;const j="negative"===o?s.default:a.default,x="negative"===o?r.COLORS.background.negative.vibrant:"positive"===o?r.COLORS.background.positive.vibrant:r.COLORS.content.placeholder,[b,f]=t.useState("");t.useEffect((()=>{f("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?i.default.getAnalyticsCustomDateTimelineText(u):"")}),[c,u]);const S=t.useRef((()=>{const e=((null!=h?h:0)>0?"+":"-")+(null!=y?y:"");return void 0===h?"--":`${null!=e?e:""}${p?g.truncateValueForInternationalStore(Math.abs(h)):g.truncateValueForIndianStore(Math.abs(h))}`})());return e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof l&&e.jsx(j,{color:x,height:16,width:16,style:Object.assign({marginRight:2},null!=m?m:{})}),"number"==typeof l&&o&&e.jsxs(d.Caption,Object.assign({style:{color:x}},{children:["neutral"===o?0:l<1e3?l:">999","%"]})),!!h&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:`(${S.current})`})),c&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:b}))]}))};exports.AnalyticsTrend=t=>{let{title:i,value:s,trendPercent:a,type:h="horizontal",timeline:p,customRange:j,tooltip:x,card:b=!0,rightSeparator:f=!1,size:S="big",share:O=!1,formatVal:v,prefixSymbol:C,trailingIcon:T,onTrailIconClick:R,iconTooltipBody:w,funnelPercent:I,isLoading:$,trendRaw:L,suffixText:q,trendStyle:D,trendContainerStyle:F,trendIconStyle:M,containerStyle:k,prevTrendDiff:P,relativePercentageDiff:V,isInternationalStore:z}=t;const _="big"===S?d.TitleLarge:d.TitleMedium,A=void 0!==a?a<0?"negative":0===a?"neutral":"positive":void 0,N=void 0!==a?O?Math.round(a):Math.abs(Math.round(a)):void 0;return e.jsx(u.AnalyticsTrendContainer,Object.assign({card:b,style:Object.assign({},k)},{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!=F?F:{})},{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.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:i})),x&&e.jsx(c.Tooltip,Object.assign({body:x,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",cursor:"pointer",height:"100%"}},{children:e.jsx(l.default,{color:r.COLORS.content.primary,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},O?{justifyContent:"space-between"}:{})},{children:[$&&e.jsx(n.ShimmerComponentStyled,{width:108,height:26}),!$&&e.jsx(_,Object.assign({style:{color:r.COLORS.content.primary}},{children:void 0===s?"--":"number"==typeof s&&v?s>999?z?`${null!=C?C:""}${g.truncateValueForInternationalStore(s)} ${null!=q?q:""}`:`${null!=C?C:""}${g.truncateValueForIndianStore(s)} ${null!=q?q:""}`:`${null!=C?C:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(s)} ${null!=q?q:""}`:`${null!=C?C:""}${s} ${null!=q?q:""}`})),"number"==typeof V&&e.jsx(o.Tag,{tagText:`${V}%`,theme:"light",type:"neutral"}),"horizontal"===h&&!$&&!O&&e.jsx(m,{timeline:p,customRange:j,percent:N,direction:A,trendRaw:L,prefixSymbol:C,trendIconStyle:M,isInternationalStore:z}),$&&!O&&"horizontal"===h&&e.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),"vertical"===h&&!$&&void 0!==I&&e.jsx(o.Tag,{tagText:`${I} %`,theme:"light",type:"neutral"}),O&&!$&&void 0!==N&&e.jsx(o.Tag,{tagText:`${N} %`,theme:"light",type:"neutral"}),O||$||!P||0==P?e.jsx(e.Fragment,{}):e.jsx(o.Tag,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(P),theme:"light",type:"neutral"})]})),"vertical"===h&&!$&&!O&&e.jsx("div",Object.assign({style:{marginTop:10}},{children:e.jsx(m,{timeline:p,customRange:j,percent:N,direction:A,trendRaw:L,prefixSymbol:C,trendIconStyle:M,isInternationalStore:z})})),$&&"vertical"===h&&e.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]})),w&&!$&&e.jsx(c.Tooltip,Object.assign({body:w,placement:"right"},{children:T&&e.jsx("div",Object.assign({className:"icon--holder",onClick:R},{children:y.default.createElement(T,{height:20,width:20,color:r.COLORS.content.secondary})}))}))]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("chart.js"),a=require("chartjs-plugin-datalabels"),o=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),l=require("../utils/calcPercentage.js"),n=require("./HorizontalGraph.styles.js");function s(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var d=s(a);e.Chart.register(e.CategoryScale,e.LinearScale,e.BarElement,e.Tooltip,d.default);exports.HorizontalGraph=e=>{var a,s,d,c,p,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("chart.js"),a=require("chartjs-plugin-datalabels"),o=require("react-chartjs-2"),i=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),l=require("../utils/calcPercentage.js"),n=require("./HorizontalGraph.styles.js");function s(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var d=s(a);e.Chart.register(e.CategoryScale,e.LinearScale,e.BarElement,e.Tooltip,d.default);exports.HorizontalGraph=e=>{var a,s,d,c,u,p,x,g,b;const y=-1===e.xAxis.data.findIndex((t=>0!==t)),S={min:0,max:2e3,stepSize:null!==(a=e.xAxis.stepSize)&&void 0!==a?a:200},h={indexAxis:"y",elements:{},responsive:!0,maintainAspectRatio:e.maintainAspectRatio,layout:{padding:{right:e.showTotal?50:0}},plugins:{legend:{display:!1},tooltip:{enabled:!y,callbacks:{label:e.xAxis.toolTipCallback,footer:null===(s=e.tooltipConfig)||void 0===s?void 0:s.footerCallback},footerFont:null===(c=null===(d=e.tooltipConfig)||void 0===d?void 0:d.footerStyles)||void 0===c?void 0:c.footerFont},datalabels:{display:null!==(u=!y&&e.showTotal)&&void 0!==u&&u,anchor:"end",align:"end",clamp:!0,formatter:(t,a)=>{var o;const i=a.datasetIndex,r=a.chart.data.datasets;if(i!==r.length-1)return"";const n=a.dataIndex;let s=0;for(let t=0;t<r.length;t++)s+=null!==(o=r[t].data[n])&&void 0!==o?o:0;return s?e.isInternationalStore?l.truncateValueForInternationalStore(s):l.truncateValueForIndianStore(s):""},color:r.COLORS.content.secondary}},scales:{y:{title:{display:!!e.yAxis.title,text:e.yAxis.title,color:e.yAxis.titleColor,font:{size:r.FONTS.caption.fontSize,color:e.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:r.COLORS.background.base},ticks:{fontSize:r.FONTS.caption.fontSize,color:null!==(p=e.yAxis.labelColor)&&void 0!==p?p:r.COLORS.content.secondary}},x:{title:{display:!!e.xAxis.title,text:e.xAxis.title,color:e.xAxis.titleColor,font:{size:r.FONTS.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:r.COLORS.background.base},ticks:Object.assign({callback:e.xAxis.ticksCallback,fontSize:r.FONTS.caption.fontSize,color:null!==(x=e.xAxis.labelColor)&&void 0!==x?x:r.COLORS.content.secondary},y?S:{max:e.xAxis.max,stepSize:e.xAxis.stepSize})}}},f={labels:e.yAxis.data.map((t=>t.toString())),datasets:[{data:y?[250,1e3,800,1500,300,600]:e.xAxis.data,backgroundColor:t=>(t=>{var a;const o=t.chart.ctx.createLinearGradient(0,0,0,200);let i="";if(y)i="rgba(0,0,0,0)";else if(e.barColorRGBA){const t=e.barColorRGBA;i=`rgba(${t.r}, ${t.g}, ${t.b}, ${null!==(a=t.a)&&void 0!==a?a:"0.3"})`}return o.addColorStop(0,i||"rgba(146, 96, 237, 0.3)"),o.addColorStop(1,i||"rgba(146, 96, 237, 0.3)"),o})(t),barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t.jsxs(n.GraphContainerWrapper,Object.assign({padding:e.outerPadding,skipOuterLayout:e.skipOuterLayout},{children:[e.chartHeading&&t.jsx(i.TitleRegular,Object.assign({color:null!==(g=e.chartHeading.color)&&void 0!==g?g:r.COLORS.content.secondary},{children:e.chartHeading.heading})),t.jsx("div",Object.assign({style:{height:e.maintainAspectRatio?void 0:null!==(b=e.graphCanvasHeight)&&void 0!==b?b:500}},{children:t.jsx(o.Bar,{options:h,data:f})}))]}))};
|
|
@@ -35,5 +35,6 @@ export type LineChartProps = {
|
|
|
35
35
|
labelCallback?: (context: any) => void;
|
|
36
36
|
afterBodyCallBack?: (context: any) => void;
|
|
37
37
|
titleTooltipCallback?: (context: any) => void;
|
|
38
|
+
isInternationalStore?: boolean;
|
|
38
39
|
};
|
|
39
40
|
export declare const LineChart: React.FC<LineChartProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),l=require("react"),r=require("react-chartjs-2"),n=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),o=require("../utils/calcPercentage.js"),a=require("./LineChart.styled.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.PointElement,t.BarElement,t.LineElement,t.ArcElement,t.Filler,t.Title,t.Tooltip,t.Legend);exports.LineChart=t=>{let{scaleText:s,labels:d,canvasHeight:c,datas:u,maintainAspectRatio:g=!1,stepSize:p,min:y,max:b,isZeroState:v,tension:C,isNewStyles:O,prefixCurrencyInYAxis:h,pointRadius:x,useKFormat:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),l=require("react"),r=require("react-chartjs-2"),n=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),o=require("../utils/calcPercentage.js"),a=require("./LineChart.styled.js");t.Chart.register(t.CategoryScale,t.LinearScale,t.PointElement,t.BarElement,t.LineElement,t.ArcElement,t.Filler,t.Title,t.Tooltip,t.Legend);exports.LineChart=t=>{let{scaleText:s,labels:d,canvasHeight:c,datas:u,maintainAspectRatio:g=!1,stepSize:p,min:y,max:b,isZeroState:v,tension:C,isNewStyles:O,prefixCurrencyInYAxis:h,pointRadius:x,useKFormat:S,lineThickness:j,ticksLabelCallback:m,labelCallback:L,afterBodyCallBack:f,titleTooltipCallback:k,isInternationalStore:R}=t;var q,B,w;const[F,T]=l.useState(null),E=l.useRef();l.useEffect((()=>{var e,t,l,r;if(null===(r=null===(l=null===(t=null===(e=E.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===l?void 0:l.ticks)||void 0===r?void 0:r.length){const e=38*E.current.scales.y.ticks.length;T(e)}}),[E]);const z=u.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?i.COLORS.content.placeholder:i.COLORS.background.brand,square:e.squareLegends}))),I={labels:d,datasets:u.map(((e,t)=>{var l,r,n;return Object.assign(Object.assign({tension:null!=C?C:.4,fill:e.gradient?"start":0},((e,t)=>{const l={borderColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)};return O?Object.assign({pointStyle:"circle",pointRadius:x||(d&&d.length>10?2.5:4),pointBorderColor:"transparent",pointBackgroundColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)},l):Object.assign({pointRadius:null!=x?x:1},l)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(r=null!==(l=e.lineWidth)&&void 0!==l?l:j)&&void 0!==r?r:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,F?F-75:150);return t.addColorStop(0,"#F1EEFB"),t.addColorStop(1,"rgba(127, 86, 217, 0)"),t}:null!==(n=e.backgroundColor)&&void 0!==n?n:"transparent",legend:e.legend})}))},$={maintainAspectRatio:g,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=O&&O,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>i.COLORS.content.primaryInverse,backgroundColor:i.COLORS.content.primary,callbacks:{labelTextColor:()=>i.COLORS.content.primaryInverse,title:k,label:L,afterBody:f},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:v?0:y,max:v?10:b,ticks:{color:i.COLORS.content.secondary,callback:e=>{var t,l;return S?`${null!==(t=null==s?void 0:s.yPrefix)&&void 0!==t?t:""}${R?o.truncateValueForInternationalStore(e):o.truncateValueForIndianStore(e)}${null!=h?h:""}`:`${null!==(l=null==s?void 0:s.yPrefix)&&void 0!==l?l:""}${e}${null!=h?h:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:v?1:p,padding:O?24:0},title:{display:!!(null==s?void 0:s.y),text:null==s?void 0:s.y},grid:{color:i.COLORS.background.base,drawBorder:null===(q=null==s?void 0:s.yDrawBorder)||void 0===q||q}},x:{ticks:{callback:m,color:i.COLORS.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==s?void 0:s.x),text:null==s?void 0:s.x},grid:{display:!1,drawBorder:null!==(B=null==s?void 0:s.xDrawBorder)&&void 0!==B&&B}}}};return e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},g?{}:{height:null!==(w=null!=c?c:F)&&void 0!==w?w:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e.jsx(a.LegendWrapper,{children:z.map(((t,l)=>{let{text:r,color:i,square:o}=t;return r?e.jsxs(a.LegendContainer,{children:[e.jsx(a.LegendColor,{color:i,square:o,newStyle:O}),e.jsx(n.BodyTiny,Object.assign({color:"#667085"},{children:r}))]},l):e.jsx(e.Fragment,{})}))}),e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(r.Line,{ref:E,options:$,data:I})}))]}))};
|
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"),
|
|
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"),r=require("./StackedBarChart.model.js"),s=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,u,O,v,A,x,g,p,T,R,y,I,C,N,b,S,h,E,H,F,f,k,L,m,j,P,_,G,B,Z,z,D,q;const w=0===t.yAxis.data.length,V=void 0===t.customColourScaleBrand||void 0===t.customColourScalePastel?t.colorSchema===r.COLOR_SCHEMA.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"]:t.colorSchema===r.COLOR_SCHEMA.PASTEL?t.customColourScalePastel:t.customColourScaleBrand,W=t.customHoverColour,M={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barWidth:t.barWidth},Y={};t.yAxis.data.map((e=>{e.map((e=>{Y[e.name]?Y[e.name].push(e.value):Y[e.name]=[e.value]}))}));const J=Object.keys(Y).map(((e,t)=>Object.assign({label:e,data:Y[e],backgroundColor:V[t],hoverBackgroundColor:void 0===W?void 0:W[t]},M))),K={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===(u=null===(c=t.tooltipConfig)||void 0===c?void 0:c.footerStyles)||void 0===u?void 0:u.footerFont},datalabels:{display:null!==(O=t.showTotal)&&void 0!==O&&O,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===r.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=r.GRAPH_ORIENTATION.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!t.customLegend,labels:{usePointStyle:!0}},indexAxis:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(v=t.yAxis)||void 0===v?void 0:v.title:null===(A=t.xAxis)||void 0===A?void 0:A.title),text:t.orientation===r.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===r.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===r.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===r.GRAPH_ORIENTATION.HORIZONTAL?t.isInternationalStore?n.truncateValueForInternationalStore:n.truncateValueForIndianStore:void 0},stacked:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(I=t.yAxis)||void 0===I?void 0:I.stacked)||(null===(C=t.yAxis)||void 0===C?void 0:C.stacked):"boolean"!=typeof(null===(N=t.xAxis)||void 0===N?void 0:N.stacked)||(null===(b=t.xAxis)||void 0===b?void 0:b.stacked)},y:{title:{display:!!(t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(S=t.xAxis)||void 0===S?void 0:S.title:null===(h=t.yAxis)||void 0===h?void 0:h.title),text:t.orientation===r.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!==(k=t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(F=t.xAxis)||void 0===F?void 0:F.titleColor:null===(f=t.yAxis)||void 0===f?void 0:f.titleColor)&&void 0!==k?k:l.COLORS.content.secondary,font:{size:l.FONTS.caption.fontSize}},grid:{display:t.orientation!==r.GRAPH_ORIENTATION.HORIZONTAL,color:l.COLORS.background.base},ticks:Object.assign(Object.assign({stepSize:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?null===(L=t.xAxis)||void 0===L?void 0:L.stepSize:null===(m=t.yAxis)||void 0===m?void 0:m.stepSize,fontSize:l.FONTS.caption.fontSize,color:null!==(j=t.xAxis.labelColor)&&void 0!==j?j:l.COLORS.content.secondary},w?{min:0,max:2e3,stepSize:200}:{}),{callback:t.orientation!==r.GRAPH_ORIENTATION.VERTICAL?t.isInternationalStore?n.truncateValueForInternationalStore:n.truncateValueForIndianStore:void 0}),stacked:t.orientation===r.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(P=t.xAxis)||void 0===P?void 0:P.stacked)||(null===(_=t.xAxis)||void 0===_?void 0:_.stacked):"boolean"!=typeof(null===(G=t.yAxis)||void 0===G?void 0:G.stacked)||(null===(B=t.yAxis)||void 0===B?void 0:B.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!==r.GRAPH_ORIENTATION.VERTICAL?delete K.scales.y.ticks.callback:delete K.scales.x.ticks.callback;const Q={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)"}]:J};return e.jsxs(s.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!==(z=t.chartHeading.color)&&void 0!==z?z: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:J.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:K,data:Q})}))}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("chart.js"),a=require("chartjs-plugin-datalabels"),t=require("react"),o=require("react-chartjs-2"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("chart.js"),a=require("chartjs-plugin-datalabels"),t=require("react"),o=require("react-chartjs-2"),n=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),r=require("../utils/calcPercentage.js"),s=require("./StackedBarChart.styles.js"),d=require("./StackedBarDistributionChart.model.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(a);l.Chart.register(l.CategoryScale,l.LinearScale,l.BarElement,l.Tooltip,l.Legend,u.default),l.Chart.defaults.plugins.datalabels.display=!1;exports.StackedBarDistributionChart=l=>{var a,c,u,O,v,g,T,h,b,p,A,I,R,N,y,C,F,f,S,j,E,x,H,_,L,m,k,P,B,D,G,Z;const[w,z]=t.useState([]),[q,V]=t.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"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],Y={min:0,max:200,stepSize:20},U={min:l.minValue,max:l.maxValue,stepSize:l.valuesStepSize},$={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:M?0:null!==(a=l.barThickness)&&void 0!==a?a:100},J={plugins:{legend:{display:!1},tooltip:{enabled:!M,callbacks:{label:null===(c=l.tooltipConfig)||void 0===c?void 0:c.labelCallback,footer:null===(u=l.tooltipConfig)||void 0===u?void 0:u.footerCallback},footerFont:null===(v=null===(O=l.tooltipConfig)||void 0===O?void 0:O.footerStyles)||void 0===v?void 0:v.footerFont},datalabels:{display:null!==(g=!M&&l.showTotal)&&void 0!==g&&g,anchor:"end",align:"end",clamp:!0,formatter:(e,a)=>{var t;const o=a.datasetIndex,n=a.chart.data.datasets;if(o!==n.length-1)return"";const i=a.dataIndex;let s=0;for(let e=0;e<n.length;e++)s+=null!==(t=n[e].data[i])&&void 0!==t?t:0;return s?l.isInternationalStore?r.truncateValueForInternationalStore(s):r.truncateValueForIndianStore(s):""},color:i.COLORS.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",layout:{padding:{right:l.showTotal&&l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:l.showTotal&&l.orientation!=d.GRAPH_ORIENTATION.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(T=l.valueTitle)||void 0===T?void 0:T.heading:null===(h=l.labelTitle)||void 0===h?void 0:h.heading),text:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(b=l.valueTitle)||void 0===b?void 0:b.heading:null===(p=l.labelTitle)||void 0===p?void 0:p.heading,color:null!==(R=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(A=l.valueTitle)||void 0===A?void 0:A.color:null===(I=l.labelTitle)||void 0===I?void 0:I.color)&&void 0!==R?R:i.COLORS.content.secondary,font:{size:i.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL,color:i.COLORS.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:i.FONTS.caption.fontSize,color:null!==(C=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(N=l.labelTitle)||void 0===N?void 0:N.color:null===(y=l.valueTitle)||void 0===y?void 0:y.color)&&void 0!==C?C:i.COLORS.content.secondary},l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?M?Y:U:{}),{callback:(e,a)=>{var t,o;return l.orientation!==d.GRAPH_ORIENTATION.HORIZONTAL?null!==(o=null===(t=null==q?void 0:q.labels)||void 0===t?void 0:t[a])&&void 0!==o?o:"":"number"!=typeof e?e:l.isInternationalStore?r.truncateValueForInternationalStore(e):r.truncateValueForIndianStore(e)}}),stacked:!0},y:{title:{display:!!(l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(F=l.labelTitle)||void 0===F?void 0:F.heading:null===(f=l.valueTitle)||void 0===f?void 0:f.heading),text:l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(S=l.labelTitle)||void 0===S?void 0:S.heading:null===(j=l.valueTitle)||void 0===j?void 0:j.heading,color:null!==(H=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(E=l.labelTitle)||void 0===E?void 0:E.color:null===(x=l.valueTitle)||void 0===x?void 0:x.color)&&void 0!==H?H:i.COLORS.content.secondary,font:{size:i.FONTS.bodySecondary.fontSize}},grid:{display:l.orientation!==d.GRAPH_ORIENTATION.HORIZONTAL,color:i.COLORS.background.base},ticks:Object.assign(Object.assign({fontSize:i.FONTS.caption.fontSize,color:null!==(m=l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null===(_=l.valueTitle)||void 0===_?void 0:_.color:null===(L=l.labelTitle)||void 0===L?void 0:L.color)&&void 0!==m?m:i.COLORS.content.secondary},l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?{}:M?Y:U),{callback:(e,a)=>{var t,o;return l.orientation===d.GRAPH_ORIENTATION.HORIZONTAL?null!==(o=null===(t=null==q?void 0:q.labels)||void 0===t?void 0:t[a])&&void 0!==o?o:"":"number"!=typeof e?e:l.isInternationalStore?r.truncateValueForInternationalStore(e):r.truncateValueForIndianStore(e)}}),stacked:!0}},onClick:(e,a)=>{if(!l.onBarClick)return;const t=a[0].datasetIndex,o=a[0].index,n=e.chart.data.datasets[t].label,i=e.chart.data.labels[o];l.onBarClick(i,n)},onHover:(e,a)=>{l.onBarClick&&a.length&&(e.native.target.style.cursor="pointer")}},K=Array.from(new Set(l.data.map((e=>e.label)))),Q={labels:(X=K,X.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 X;t.useEffect((()=>{const e=[];K.forEach(((a,t)=>{const o=[],n=l.data.filter((e=>e.label===a));l.isFunnel||n.sort(((e,l)=>l.value-e.value)),n.forEach(((e,l)=>{const a=((e,l,a)=>W[e].slice(-a)[l])(t,l,n.length);o.push({color:a,label:e.stackLabel});const i=Object.assign({label:e.stackLabel,backgroundColor:a,data:Array(K.length).fill(0)},$);i.data[t]=e.value,Q.datasets.push(i)})),e.push(o)})),z(e),V(Q)}),[l.data]);const ee=t.useCallback((()=>e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:le().map((l=>e.jsxs("div",Object.assign({className:"legend__row"},{children:[e.jsx("div",{className:"legend__palette",style:{backgroundColor:l.color}}),e.jsx(n.BodyTiny,Object.assign({color:i.COLORS.content.secondary},{children:l.label}))]}),l.label.replace(" ","_"))))}))),[w]),le=()=>{const e=[];return w.forEach(((l,a)=>{e.push({color:l[0].color,label:K[a]})})),e};if(!q)return e.jsx(e.Fragment,{});return e.jsxs(s.GraphContainerWrapper,Object.assign({style:null!==(k=l.wrapperStyle)&&void 0!==k?k:{},padding:l.outerPadding,chartWrapperHeight:l.chartWrapperHeight,isFunnel:l.isFunnel},{children:[l.chartHeading&&e.jsx("div",Object.assign({style:{marginBottom:24}},{children:e.jsx(n.TitleRegular,Object.assign({color:null!==(P=l.chartHeading.color)&&void 0!==P?P:i.COLORS.content.secondary},{children:l.chartHeading.heading}))})),e.jsxs("div",Object.assign({className:"graph__wrapper"},{children:[(null===(B=l.showLegend)||void 0===B||B)&&l.isFunnel&&ee(),e.jsx("div",Object.assign({style:{height:null!==(D=l.graphCanvasHeight)&&void 0!==D?D:500,width:null!==(G=l.graphCanvasWidth)&&void 0!==G?G:"100%",flex:1}},{children:e.jsx(o.Bar,{options:J,data:q})})),(null===(Z=l.showLegend)||void 0===Z||Z)&&!l.isFunnel&&e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:w.map(((l,a)=>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(n.BodyTiny,Object.assign({color:i.COLORS.content.secondary},{children:l.label}))]}),l.label.replace(" ","_"))))}),`Legend_set_${a}`)))}))]}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import n,{useState as r,useEffect as o,useRef as l}from"react";import{ShimmerComponentStyled as a}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import s from"../../utils/DateUtils.js";import{COLORS as c}from"../../constants/Theme.js";import d from"../../assets/icons/arrow_down.svg.js";import g from"../../assets/icons/arrow_up.svg.js";import m from"../../assets/icons/info.svg.js";import{Tag as h}from"../tag/Tag.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{BodyCaption as y,Caption as u,TitleLarge as f,TitleMedium as b}from"../TypographyStyle.js";import{truncateValueForInternationalStore as v,truncateValueForIndianStore as j}from"./chart/utils/calcPercentage.js";import{AnalyticsTrendContainer as x}from"./CommonStyles.js";const w=r=>{let{title:o,value:l,trendPercent:s,type:d="horizontal",timeline:g,customRange:u,tooltip:w,card:
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import n,{useState as r,useEffect as o,useRef as l}from"react";import{ShimmerComponentStyled as a}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import s from"../../utils/DateUtils.js";import{COLORS as c}from"../../constants/Theme.js";import d from"../../assets/icons/arrow_down.svg.js";import g from"../../assets/icons/arrow_up.svg.js";import m from"../../assets/icons/info.svg.js";import{Tag as h}from"../tag/Tag.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{BodyCaption as y,Caption as u,TitleLarge as f,TitleMedium as b}from"../TypographyStyle.js";import{truncateValueForInternationalStore as v,truncateValueForIndianStore as j}from"./chart/utils/calcPercentage.js";import{AnalyticsTrendContainer as x}from"./CommonStyles.js";const w=r=>{let{title:o,value:l,trendPercent:s,type:d="horizontal",timeline:g,customRange:u,tooltip:w,card:O=!0,rightSeparator:$=!1,size:T="big",share:I=!1,formatVal:R,prefixSymbol:D,trailingIcon:C,onTrailIconClick:M,iconTooltipBody:k,funnelPercent:z,isLoading:L,trendRaw:P,suffixText:F,trendStyle:N,trendContainerStyle:W,trendIconStyle:_,containerStyle:A,prevTrendDiff:B,relativePercentageDiff:E,isInternationalStore:U}=r;const V="big"===T?f:b,q=void 0!==s?s<0?"negative":0===s?"neutral":"positive":void 0,G=void 0!==s?I?Math.round(s):Math.abs(Math.round(s)):void 0;return e(x,Object.assign({card:O,style:Object.assign({},A)},{children:t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:4,borderRightWidth:$?1:0,borderRightColor:c.stroke.primary,borderRightStyle:"solid",paddingLeft:O?0:24,paddingRight:O?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"},null!=W?W:{})},{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(y,Object.assign({style:{color:c.content.secondary}},{children:o})),w&&e(p,Object.assign({body:w,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",cursor:"pointer",height:"100%"}},{children:e(m,{color:c.content.primary,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},I?{justifyContent:"space-between"}:{})},{children:[L&&e(a,{width:108,height:26}),!L&&e(V,Object.assign({style:{color:c.content.primary}},{children:void 0===l?"--":"number"==typeof l&&R?l>999?U?`${null!=D?D:""}${v(l)} ${null!=F?F:""}`:`${null!=D?D:""}${j(l)} ${null!=F?F:""}`:`${null!=D?D:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(l)} ${null!=F?F:""}`:`${null!=D?D:""}${l} ${null!=F?F:""}`})),"number"==typeof E&&e(h,{tagText:`${E}%`,theme:"light",type:"neutral"}),"horizontal"===d&&!L&&!I&&e(S,{timeline:g,customRange:u,percent:G,direction:q,trendRaw:P,prefixSymbol:D,trendIconStyle:_,isInternationalStore:U}),L&&!I&&"horizontal"===d&&e(a,{height:20,width:141,marginTop:6}),"vertical"===d&&!L&&void 0!==z&&e(h,{tagText:`${z} %`,theme:"light",type:"neutral"}),I&&!L&&void 0!==G&&e(h,{tagText:`${G} %`,theme:"light",type:"neutral"}),I||L||!B||0==B?e(i,{}):e(h,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(B),theme:"light",type:"neutral"})]})),"vertical"===d&&!L&&!I&&e("div",Object.assign({style:{marginTop:10}},{children:e(S,{timeline:g,customRange:u,percent:G,direction:q,trendRaw:P,prefixSymbol:D,trendIconStyle:_,isInternationalStore:U})})),L&&"vertical"===d&&e(a,{height:20,width:141,marginTop:6})]})),k&&!L&&e(p,Object.assign({body:k,placement:"right"},{children:C&&e("div",Object.assign({className:"icon--holder",onClick:M},{children:n.createElement(C,{height:20,width:20,color:c.content.secondary})}))}))]}))}))},S=i=>{let{percent:n,direction:a,timeline:m,customRange:h,trendRaw:p,prefixSymbol:y,trendIconStyle:f,isInternationalStore:b}=i;const x="negative"===a?d:g,w="negative"===a?c.background.negative.vibrant:"positive"===a?c.background.positive.vibrant:c.content.placeholder,[S,O]=r("");o((()=>{O("today"===m?"vs yesterday":"yesterday"===m?"vs 1 day before":"7 days"===m?"vs last 7 days":"30 days"===m?"vs last 30 days":"custom"===m&&h?s.getAnalyticsCustomDateTimelineText(h):"")}),[m,h]);const $=l((()=>{const e=((null!=p?p:0)>0?"+":"-")+(null!=y?y:"");return void 0===p?"--":`${null!=e?e:""}${b?v(Math.abs(p)):j(Math.abs(p))}`})());return t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof n&&e(x,{color:w,height:16,width:16,style:Object.assign({marginRight:2},null!=f?f:{})}),"number"==typeof n&&a&&t(u,Object.assign({style:{color:w}},{children:["neutral"===a?0:n<1e3?n:">999","%"]})),!!p&&e(u,Object.assign({style:{marginLeft:4,color:c.content.placeholder}},{children:`(${$.current})`})),m&&e(u,Object.assign({style:{marginLeft:4,color:c.content.placeholder}},{children:S}))]}))};export{w as AnalyticsTrend};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{Chart as a,CategoryScale as i,LinearScale as e,BarElement as r,Tooltip as l}from"chart.js";import n from"chartjs-plugin-datalabels";import{Bar as s}from"react-chartjs-2";import{TitleRegular as d}from"../../../TypographyStyle.js";import{COLORS as c,FONTS as p}from"../../../../constants/Theme.js";import{
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{Chart as a,CategoryScale as i,LinearScale as e,BarElement as r,Tooltip as l}from"chart.js";import n from"chartjs-plugin-datalabels";import{Bar as s}from"react-chartjs-2";import{TitleRegular as d}from"../../../TypographyStyle.js";import{COLORS as c,FONTS as p}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as g,truncateValueForIndianStore as x}from"../utils/calcPercentage.js";import{GraphContainerWrapper as b}from"./HorizontalGraph.styles.js";a.register(i,e,r,l,n);const m=a=>{var i,e,r,l,n,m,f,u,y;const h=-1===a.xAxis.data.findIndex((t=>0!==t)),A={min:0,max:2e3,stepSize:null!==(i=a.xAxis.stepSize)&&void 0!==i?i:200},v={indexAxis:"y",elements:{},responsive:!0,maintainAspectRatio:a.maintainAspectRatio,layout:{padding:{right:a.showTotal?50:0}},plugins:{legend:{display:!1},tooltip:{enabled:!h,callbacks:{label:a.xAxis.toolTipCallback,footer:null===(e=a.tooltipConfig)||void 0===e?void 0:e.footerCallback},footerFont:null===(l=null===(r=a.tooltipConfig)||void 0===r?void 0:r.footerStyles)||void 0===l?void 0:l.footerFont},datalabels:{display:null!==(n=!h&&a.showTotal)&&void 0!==n&&n,anchor:"end",align:"end",clamp:!0,formatter:(t,o)=>{var i;const e=o.datasetIndex,r=o.chart.data.datasets;if(e!==r.length-1)return"";const l=o.dataIndex;let n=0;for(let t=0;t<r.length;t++)n+=null!==(i=r[t].data[l])&&void 0!==i?i:0;return n?a.isInternationalStore?g(n):x(n):""},color:c.content.secondary}},scales:{y:{title:{display:!!a.yAxis.title,text:a.yAxis.title,color:a.yAxis.titleColor,font:{size:p.caption.fontSize,color:a.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:c.background.base},ticks:{fontSize:p.caption.fontSize,color:null!==(m=a.yAxis.labelColor)&&void 0!==m?m:c.content.secondary}},x:{title:{display:!!a.xAxis.title,text:a.xAxis.title,color:a.xAxis.titleColor,font:{size:p.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:c.background.base},ticks:Object.assign({callback:a.xAxis.ticksCallback,fontSize:p.caption.fontSize,color:null!==(f=a.xAxis.labelColor)&&void 0!==f?f:c.content.secondary},h?A:{max:a.xAxis.max,stepSize:a.xAxis.stepSize})}}},C={labels:a.yAxis.data.map((t=>t.toString())),datasets:[{data:h?[250,1e3,800,1500,300,600]:a.xAxis.data,backgroundColor:t=>(t=>{var o;const i=t.chart.ctx.createLinearGradient(0,0,0,200);let e="";if(h)e="rgba(0,0,0,0)";else if(a.barColorRGBA){const t=a.barColorRGBA;e=`rgba(${t.r}, ${t.g}, ${t.b}, ${null!==(o=t.a)&&void 0!==o?o:"0.3"})`}return i.addColorStop(0,e||"rgba(146, 96, 237, 0.3)"),i.addColorStop(1,e||"rgba(146, 96, 237, 0.3)"),i})(t),barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t(b,Object.assign({padding:a.outerPadding,skipOuterLayout:a.skipOuterLayout},{children:[a.chartHeading&&o(d,Object.assign({color:null!==(u=a.chartHeading.color)&&void 0!==u?u:c.content.secondary},{children:a.chartHeading.heading})),o("div",Object.assign({style:{height:a.maintainAspectRatio?void 0:null!==(y=a.graphCanvasHeight)&&void 0!==y?y:500}},{children:o(s,{options:v,data:C})}))]}))};export{m as HorizontalGraph};
|
|
@@ -35,5 +35,6 @@ export type LineChartProps = {
|
|
|
35
35
|
labelCallback?: (context: any) => void;
|
|
36
36
|
afterBodyCallBack?: (context: any) => void;
|
|
37
37
|
titleTooltipCallback?: (context: any) => void;
|
|
38
|
+
isInternationalStore?: boolean;
|
|
38
39
|
};
|
|
39
40
|
export declare const LineChart: React.FC<LineChartProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{Chart as o,CategoryScale as r,LinearScale as n,PointElement as i,BarElement as a,LineElement as s,ArcElement as d,Filler as c,Title as u,Tooltip as p,Legend as g}from"chart.js";import{useState as b,useRef as y,useEffect as m}from"react";import{Line as v}from"react-chartjs-2";import{BodyTiny as h}from"../../../TypographyStyle.js";import{COLORS as f}from"../../../../constants/Theme.js";import{
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{Chart as o,CategoryScale as r,LinearScale as n,PointElement as i,BarElement as a,LineElement as s,ArcElement as d,Filler as c,Title as u,Tooltip as p,Legend as g}from"chart.js";import{useState as b,useRef as y,useEffect as m}from"react";import{Line as v}from"react-chartjs-2";import{BodyTiny as h}from"../../../TypographyStyle.js";import{COLORS as f}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as x,truncateValueForIndianStore as k}from"../utils/calcPercentage.js";import{LegendWrapper as C,LegendContainer as j,LegendColor as w}from"./LineChart.styled.js";o.register(r,n,i,a,s,d,c,u,p,g);const B=o=>{let{scaleText:r,labels:n,canvasHeight:i,datas:a,maintainAspectRatio:s=!1,stepSize:d,min:c,max:u,isZeroState:p,tension:g,isNewStyles:B,prefixCurrencyInYAxis:S,pointRadius:O,useKFormat:z,lineThickness:T,ticksLabelCallback:$,labelCallback:F,afterBodyCallBack:R,titleTooltipCallback:q,isInternationalStore:A}=o;var D,I,L;const[P,E]=b(null),W=y();m((()=>{var e,t,l,o;if(null===(o=null===(l=null===(t=null===(e=W.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===l?void 0:l.ticks)||void 0===o?void 0:o.length){const e=38*W.current.scales.y.ticks.length;E(e)}}),[W]);const Z=a.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?f.content.placeholder:f.background.brand,square:e.squareLegends}))),G={labels:n,datasets:a.map(((e,t)=>{var l,o,r;return Object.assign(Object.assign({tension:null!=g?g:.4,fill:e.gradient?"start":0},((e,t)=>{const l={borderColor:e||(t?f.content.placeholder:f.background.brand)};return B?Object.assign({pointStyle:"circle",pointRadius:O||(n&&n.length>10?2.5:4),pointBorderColor:"transparent",pointBackgroundColor:e||(t?f.content.placeholder:f.background.brand)},l):Object.assign({pointRadius:null!=O?O:1},l)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(o=null!==(l=e.lineWidth)&&void 0!==l?l:T)&&void 0!==o?o:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,P?P-75:150);return t.addColorStop(0,"#F1EEFB"),t.addColorStop(1,"rgba(127, 86, 217, 0)"),t}:null!==(r=e.backgroundColor)&&void 0!==r?r:"transparent",legend:e.legend})}))},H={maintainAspectRatio:s,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=B&&B,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>f.content.primaryInverse,backgroundColor:f.content.primary,callbacks:{labelTextColor:()=>f.content.primaryInverse,title:q,label:F,afterBody:R},bodyFont:()=>({weight:"400",size:14,family:"inter"})}},scales:{y:{beginAtZero:!0,min:p?0:c,max:p?10:u,ticks:{color:f.content.secondary,callback:e=>{var t,l;return z?`${null!==(t=null==r?void 0:r.yPrefix)&&void 0!==t?t:""}${A?x(e):k(e)}${null!=S?S:""}`:`${null!==(l=null==r?void 0:r.yPrefix)&&void 0!==l?l:""}${e}${null!=S?S:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:p?1:d,padding:B?24:0},title:{display:!!(null==r?void 0:r.y),text:null==r?void 0:r.y},grid:{color:f.background.base,drawBorder:null===(D=null==r?void 0:r.yDrawBorder)||void 0===D||D}},x:{ticks:{callback:$,color:f.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==r?void 0:r.x),text:null==r?void 0:r.x},grid:{display:!1,drawBorder:null!==(I=null==r?void 0:r.xDrawBorder)&&void 0!==I&&I}}}};return e("div",Object.assign({style:Object.assign(Object.assign({},s?{}:{height:null!==(L=null!=i?i:P)&&void 0!==L?L:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[t(C,{children:Z.map(((o,r)=>{let{text:n,color:i,square:a}=o;return n?e(j,{children:[t(w,{color:i,square:a,newStyle:B}),t(h,Object.assign({color:"#667085"},{children:n}))]},r):t(l,{})}))}),t("div",Object.assign({style:{flex:1}},{children:t(v,{ref:W,options:H,data:G})}))]}))};export{B as LineChart};
|
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
|
|
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 s}from"chart.js";import d 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 u,FONTS as p}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as g,truncateValueForIndianStore as x}from"../utils/calcPercentage.js";import{COLOR_SCHEMA as y,GRAPH_ORIENTATION as m}from"./StackedBarChart.model.js";import{GraphContainerWrapper as b}from"./StackedBarChart.styles.js";i.register(e,l,a,n,s,d);const A=i=>{var e,l,a,n,s,d,A,h,O,f,C,k,F,S,L,T,j,I,H,E,N,R,Z,z,B,D,P,w,_,W,V,Y,q,G,J;const K=0===i.yAxis.data.length,M=void 0===i.customColourScaleBrand||void 0===i.customColourScalePastel?i.colorSchema===y.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"]:i.colorSchema===y.PASTEL?i.customColourScalePastel:i.customColourScaleBrand,Q=i.customHoverColour,U={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barWidth:i.barWidth},X={};i.yAxis.data.map((o=>{o.map((o=>{X[o.name]?X[o.name].push(o.value):X[o.name]=[o.value]}))}));const $=Object.keys(X).map(((o,t)=>Object.assign({label:o,data:X[o],backgroundColor:M[t],hoverBackgroundColor:void 0===Q?void 0:Q[t]},U))),oo={plugins:{legend:{display:!K&&!i.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!K,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!==(s=i.showTotal)&&void 0!==s&&s,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:u.content.secondary}},layout:{padding:{right:i.showTotal&&i.orientation===m.HORIZONTAL?50:0,top:i.showTotal&&i.orientation!=m.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!i.customLegend,labels:{usePointStyle:!0}},indexAxis:i.orientation===m.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(i.orientation===m.HORIZONTAL?null===(d=i.yAxis)||void 0===d?void 0:d.title:null===(A=i.xAxis)||void 0===A?void 0:A.title),text:i.orientation===m.HORIZONTAL?null===(h=i.yAxis)||void 0===h?void 0:h.title:null===(O=i.xAxis)||void 0===O?void 0:O.title,color:null!==(k=i.orientation===m.HORIZONTAL?null===(f=i.yAxis)||void 0===f?void 0:f.titleColor:null===(C=i.xAxis)||void 0===C?void 0:C.titleColor)&&void 0!==k?k:u.content.secondary,font:{size:p.caption.fontSize}},grid:{display:i.orientation===m.HORIZONTAL,color:u.background.base},ticks:{fontSize:p.caption.fontSize,color:null!==(F=i.yAxis.labelColor)&&void 0!==F?F:u.content.secondary,callback:i.orientation===m.HORIZONTAL?i.isInternationalStore?g:x:void 0},stacked:i.orientation===m.HORIZONTAL?"boolean"!=typeof(null===(S=i.yAxis)||void 0===S?void 0:S.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===m.HORIZONTAL?null===(I=i.xAxis)||void 0===I?void 0:I.title:null===(H=i.yAxis)||void 0===H?void 0:H.title),text:i.orientation===m.HORIZONTAL?null===(E=i.xAxis)||void 0===E?void 0:E.title:null===(N=i.yAxis)||void 0===N?void 0:N.title,color:null!==(z=i.orientation===m.HORIZONTAL?null===(R=i.xAxis)||void 0===R?void 0:R.titleColor:null===(Z=i.yAxis)||void 0===Z?void 0:Z.titleColor)&&void 0!==z?z:u.content.secondary,font:{size:p.caption.fontSize}},grid:{display:i.orientation!==m.HORIZONTAL,color:u.background.base},ticks:Object.assign(Object.assign({stepSize:i.orientation===m.HORIZONTAL?null===(B=i.xAxis)||void 0===B?void 0:B.stepSize:null===(D=i.yAxis)||void 0===D?void 0:D.stepSize,fontSize:p.caption.fontSize,color:null!==(P=i.xAxis.labelColor)&&void 0!==P?P:u.content.secondary},K?{min:0,max:2e3,stepSize:200}:{}),{callback:i.orientation!==m.VERTICAL?i.isInternationalStore?g:x:void 0}),stacked:i.orientation===m.HORIZONTAL?"boolean"!=typeof(null===(w=i.xAxis)||void 0===w?void 0:w.stacked)||(null===(_=i.xAxis)||void 0===_?void 0:_.stacked):"boolean"!=typeof(null===(W=i.yAxis)||void 0===W?void 0:W.stacked)||(null===(V=i.yAxis)||void 0===V?void 0:V.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!==m.VERTICAL?delete oo.scales.y.ticks.callback:delete oo.scales.x.ticks.callback;const to={labels:i.xAxis.data.map((o=>"string"==typeof o?o:o.name)),datasets:K?[{data:[250,1e3,800,1500,300,600],backgroundColor:"rgba(0,0,0,0)"}]:$};return o(b,Object.assign({style:null!==(Y=i.wrapperStyle)&&void 0!==Y?Y:{},padding:i.outerPadding,customLegend:i.customLegend},{children:[i.chartHeading&&t("div",Object.assign({style:{marginBottom:24}},{children:t(c,Object.assign({color:null!==(q=i.chartHeading.color)&&void 0!==q?q:u.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:$.map((i=>o("div",Object.assign({className:"legend__row"},{children:[t("div",{className:"legend__palette",style:{backgroundColor:i.backgroundColor}}),t(v,Object.assign({color:u.content.secondary},{children:i.label}))]}),i.label.replace(" ","_"))))})),t("div",Object.assign({className:"graph__wrapper"},{children:t("div",Object.assign({style:{height:null!==(G=i.graphCanvasHeight)&&void 0!==G?G:500,width:null!==(J=i.graphCanvasWidth)&&void 0!==J?J:"auto"}},{children:t(r,{options:oo,data:to})}))}))]}))};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 h}from"../../../TypographyStyle.js";import{COLORS as b,FONTS as O}from"../../../../constants/Theme.js";import{
|
|
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 h}from"../../../TypographyStyle.js";import{COLORS as b,FONTS as O}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as f,truncateValueForIndianStore as m}from"../utils/calcPercentage.js";import{GraphContainerWrapper as y}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as F}from"./StackedBarDistributionChart.model.js";t.register(a,i,n,r,d,s),t.defaults.plugins.datalabels.display=!1;const T=t=>{var a,i,n,r,d,s,T,A,C,j,k,x,E,H,I,N,S,L,D,R,Z,B,_,w,z,P,M,W,V,Y,U,$;const[q,G]=c([]),[J,K]=c(),Q=!t.data.filter((e=>!!e.value)).length,X=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"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],ee={min:0,max:200,stepSize:20},le={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},oe={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:Q?0:null!==(a=t.barThickness)&&void 0!==a?a:100},te={plugins:{legend:{display:!1},tooltip:{enabled:!Q,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=!Q&&t.showTotal)&&void 0!==s&&s,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var o;const a=l.datasetIndex,i=l.chart.data.datasets;if(a!==i.length-1)return"";const n=l.dataIndex;let r=0;for(let e=0;e<i.length;e++)r+=null!==(o=i[e].data[n])&&void 0!==o?o:0;return r?t.isInternationalStore?f(r):m(r):""},color:b.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===F.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===F.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=F.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===F.HORIZONTAL?null===(T=t.valueTitle)||void 0===T?void 0:T.heading:null===(A=t.labelTitle)||void 0===A?void 0:A.heading),text:t.orientation===F.HORIZONTAL?null===(C=t.valueTitle)||void 0===C?void 0:C.heading:null===(j=t.labelTitle)||void 0===j?void 0:j.heading,color:null!==(E=t.orientation===F.HORIZONTAL?null===(k=t.valueTitle)||void 0===k?void 0:k.color:null===(x=t.labelTitle)||void 0===x?void 0:x.color)&&void 0!==E?E:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation===F.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:O.caption.fontSize,color:null!==(N=t.orientation===F.HORIZONTAL?null===(H=t.labelTitle)||void 0===H?void 0:H.color:null===(I=t.valueTitle)||void 0===I?void 0:I.color)&&void 0!==N?N:b.content.secondary},t.orientation===F.HORIZONTAL?Q?ee:le:{}),{callback:(e,l)=>{var o,a;return t.orientation!==F.HORIZONTAL?null!==(a=null===(o=null==J?void 0:J.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:t.isInternationalStore?f(e):m(e)}}),stacked:!0},y:{title:{display:!!(t.orientation===F.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===F.HORIZONTAL?null===(D=t.labelTitle)||void 0===D?void 0:D.heading:null===(R=t.valueTitle)||void 0===R?void 0:R.heading,color:null!==(_=t.orientation===F.HORIZONTAL?null===(Z=t.labelTitle)||void 0===Z?void 0:Z.color:null===(B=t.valueTitle)||void 0===B?void 0:B.color)&&void 0!==_?_:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation!==F.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({fontSize:O.caption.fontSize,color:null!==(P=t.orientation===F.HORIZONTAL?null===(w=t.valueTitle)||void 0===w?void 0:w.color:null===(z=t.labelTitle)||void 0===z?void 0:z.color)&&void 0!==P?P:b.content.secondary},t.orientation===F.HORIZONTAL?{}:Q?ee:le),{callback:(e,l)=>{var o,a;return t.orientation===F.HORIZONTAL?null!==(a=null===(o=null==J?void 0:J.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:t.isInternationalStore?f(e):m(e)}}),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")}},ae=Array.from(new Set(t.data.map((e=>e.label)))),ie={labels:(ne=ae,ne.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:Q?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var ne;v((()=>{const e=[];ae.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)=>X[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(ae.length).fill(0)},oe);n.data[o]=e.value,ie.datasets.push(n)})),e.push(a)})),G(e),K(ie)}),[t.data]);const re=u((()=>e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:de().map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}))),[q]),de=()=>{const e=[];return q.forEach(((l,o)=>{e.push({color:l[0].color,label:ae[o]})})),e};if(!J)return e(o,{});return l(y,Object.assign({style:null!==(M=t.wrapperStyle)&&void 0!==M?M:{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel},{children:[t.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(h,Object.assign({color:null!==(W=t.chartHeading.color)&&void 0!==W?W:b.content.secondary},{children:t.chartHeading.heading}))})),l("div",Object.assign({className:"graph__wrapper"},{children:[(null===(V=t.showLegend)||void 0===V||V)&&t.isFunnel&&re(),e("div",Object.assign({style:{height:null!==(Y=t.graphCanvasHeight)&&void 0!==Y?Y:500,width:null!==(U=t.graphCanvasWidth)&&void 0!==U?U:"100%",flex:1}},{children:e(g,{options:te,data:J})})),(null===($=t.showLegend)||void 0===$||$)&&!t.isFunnel&&e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:q.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:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}),`Legend_set_${t}`)))}))]}))]}))};export{T as StackedBarDistributionChart};
|