@bikdotai/bik-component-library 0.0.659-beta.0 → 0.0.659-beta.1
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/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 +2 -0
- package/dist/cjs/components/bik-layout/MockMenus.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 +2 -0
- 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("chart.js"),n=require("react"),l=require("react-chartjs-2"),r=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:C,tension:v,isNewStyles:h,prefixCurrencyInYAxis:x,pointRadius:O,useKFormat:j,lineThickness:m,ticksLabelCallback:S,labelCallback:L,afterBodyCallBack:f,titleTooltipCallback:k,isInternationalStore:R,customYHeaders:w,headerIcons:q=[],legendsAndIconDirection:B="row"}=t;var F,T,I;const[E,z]=n.useState(null),A=n.useRef();n.useEffect((()=>{var e,t,n,l;if(null===(l=null===(n=null===(t=null===(e=A.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===n?void 0:n.ticks)||void 0===l?void 0:l.length){const e=38*A.current.scales.y.ticks.length;z(e)}}),[A]);const D=u.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?i.COLORS.content.placeholder:i.COLORS.background.brand,square:e.squareLegends}))),$={labels:d,datasets:u.map(((e,t)=>{var n,l,r;return Object.assign(Object.assign({tension:null!=v?v:.4,fill:e.gradient?"start":0},((e,t)=>{const n={borderColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)};return h?Object.assign({pointStyle:"circle",pointRadius:O||(d&&d.length>10?2.5:4),pointBorderColor:"transparent",pointBackgroundColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)},n):Object.assign({pointRadius:null!=O?O:1},n)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(l=null!==(n=e.lineWidth)&&void 0!==n?n:m)&&void 0!==l?l:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,E?E-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})}))},P={maintainAspectRatio:g,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=h&&h,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:C?0:y,max:C?10:b,ticks:{color:i.COLORS.content.secondary,callback:e=>{var t,n;return j?`${null!==(t=null==s?void 0:s.yPrefix)&&void 0!==t?t:""}${R?o.truncateValueForInternationalStore(e):o.truncateValueForIndianStore(e)}${null!=x?x:""}`:w&&Object.keys(w).length>0?w[e]:`${null!==(n=null==s?void 0:s.yPrefix)&&void 0!==n?n:""}${e}${null!=x?x:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:C?1:p,padding:h?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===(F=null==s?void 0:s.yDrawBorder)||void 0===F||F}},x:{ticks:{callback:S,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!==(T=null==s?void 0:s.xDrawBorder)&&void 0!==T&&T}}}};return e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},g?{}:{height:null!==(I=null!=c?c:E)&&void 0!==I?I:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",flexDirection:B}},{children:[e.jsx(a.LegendWrapper,{children:D.map(((t,n)=>{let{text:l,color:i,square:o}=t;return l?e.jsxs(a.LegendContainer,{children:[e.jsx(a.LegendColor,{color:i,square:o,newStyle:h}),e.jsx(r.BodyTiny,Object.assign({color:"#667085"},{children:l}))]},n):e.jsx(e.Fragment,{})}))})
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("chart.js"),n=require("react"),l=require("react-chartjs-2"),r=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:C,tension:v,isNewStyles:h,prefixCurrencyInYAxis:x,pointRadius:O,useKFormat:j,lineThickness:m,ticksLabelCallback:S,labelCallback:L,afterBodyCallBack:f,titleTooltipCallback:k,isInternationalStore:R,customYHeaders:w,headerIcons:q=[],legendsAndIconDirection:B="row"}=t;var F,T,I;const[E,z]=n.useState(null),A=n.useRef();n.useEffect((()=>{var e,t,n,l;if(null===(l=null===(n=null===(t=null===(e=A.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===n?void 0:n.ticks)||void 0===l?void 0:l.length){const e=38*A.current.scales.y.ticks.length;z(e)}}),[A]);const D=u.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?i.COLORS.content.placeholder:i.COLORS.background.brand,square:e.squareLegends}))),$={labels:d,datasets:u.map(((e,t)=>{var n,l,r;return Object.assign(Object.assign({tension:null!=v?v:.4,fill:e.gradient?"start":0},((e,t)=>{const n={borderColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)};return h?Object.assign({pointStyle:"circle",pointRadius:O||(d&&d.length>10?2.5:4),pointBorderColor:"transparent",pointBackgroundColor:e||(t?i.COLORS.content.placeholder:i.COLORS.background.brand)},n):Object.assign({pointRadius:null!=O?O:1},n)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(l=null!==(n=e.lineWidth)&&void 0!==n?n:m)&&void 0!==l?l:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,E?E-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})}))},P={maintainAspectRatio:g,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=h&&h,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:C?0:y,max:C?10:b,ticks:{color:i.COLORS.content.secondary,callback:e=>{var t,n;return j?`${null!==(t=null==s?void 0:s.yPrefix)&&void 0!==t?t:""}${R?o.truncateValueForInternationalStore(e):o.truncateValueForIndianStore(e)}${null!=x?x:""}`:w&&Object.keys(w).length>0?w[e]:`${null!==(n=null==s?void 0:s.yPrefix)&&void 0!==n?n:""}${e}${null!=x?x:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:C?1:p,padding:h?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===(F=null==s?void 0:s.yDrawBorder)||void 0===F||F}},x:{ticks:{callback:S,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!==(T=null==s?void 0:s.xDrawBorder)&&void 0!==T&&T}}}};return e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},g?{}:{height:null!==(I=null!=c?c:E)&&void 0!==I?I:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",flexDirection:B}},{children:[e.jsx(a.LegendWrapper,{children:q.map(((t,n)=>e.jsx(a.LegendContainer,{children:t},n)))}),e.jsx(a.LegendWrapper,{children:D.map(((t,n)=>{let{text:l,color:i,square:o}=t;return l?e.jsxs(a.LegendContainer,{children:[e.jsx(a.LegendColor,{color:i,square:o,newStyle:h}),e.jsx(r.BodyTiny,Object.assign({color:"#667085"},{children:l}))]},n):e.jsx(e.Fragment,{})}))})]})),e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(l.Line,{ref:A,options:P,data:$})}))]}))};
|
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("../../../../assets/icons/maximize.svg.js"),i=require("chart.js"),o=require("chartjs-plugin-datalabels"),a=require("react"),l=require("react-chartjs-2"),n=require("../../../icon-button/IconButton.js"),d=require("../../../modals/styledModal.js"),r=require("../../../TypographyStyle.js"),s=require("../../../../constants/Theme.js"),c=require("../utils/calcPercentage.js"),u=require("./StackedBarChart.model.js"),v=require("./StackedBarChart.styles.js");function O(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=O(o);i.Chart.register(i.CategoryScale,i.LinearScale,i.BarElement,i.Tooltip,i.Legend,g.default);exports.StackedBarChart=i=>{var o,O,g,p,x,b,A,h,y,R,C,T,I,f,j,N,S,m,L,k,H,E,F,P,G,_,B,w,D,q,Z,z,M,W,V,Y,J,K,Q,U,X,$;const[ee,te]=a.useState(!1),ie=[250,1e3,800,1500,300,600],oe=0===i.yAxis.data.length,ae=void 0===i.customColourScaleBrand&&void 0===i.customColourScalePastel?i.colorSchema===u.COLOR_SCHEMA.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"]:i.colorSchema===u.COLOR_SCHEMA.PASTEL?i.customColourScalePastel:i.customColourScaleBrand,le=i.customHoverColour,ne=a.useMemo((()=>{var e,t,o;return Object.assign(Object.assign({barPercentage:(null==i?void 0:i.barPercentage)||.4,categoryPercentage:1,pointStyle:"circle",barWidth:i.barWidth,borderRadius:(null==i?void 0:i.borderRadius)||void 0},"object"==typeof(null==i?void 0:i.borderRadius)?{borderSkipped:!1}:{}),(null===(e=null==i?void 0:i.addBarGap)||void 0===e?void 0:e.flag)?{borderWidth:{top:(null===(t=null==i?void 0:i.addBarGap)||void 0===t?void 0:t.value)||2,bottom:(null===(o=null==i?void 0:i.addBarGap)||void 0===o?void 0:o.value)||2,right:0,left:0},borderColor:"transparent"}:{})}),[i.barWidth,null==i?void 0:i.borderRadius,null==i?void 0:i.barPercentage,null==i?void 0:i.addBarGap]),de={};i.yAxis.data.map((e=>{e.map((e=>{de[e.name]?de[e.name].push(e.value):de[e.name]=[e.value]}))}));const re=Object.keys(de).map(((e,t)=>Object.assign({label:e,data:de[e],backgroundColor:null==ae?void 0:ae[t],hoverBackgroundColor:void 0===le?void 0:le[t]},ne)));let se=i.xAxis.data.map((e=>"string"==typeof e?e:e.name)),ce=re;if(i.truncateBars){const e=((e,t,i)=>{if(t.length<=i)return{truncatedData:e,truncatedLabels:t,originalData:e,originalLabels:t};const o=e.map((e=>e.slice(0,i))),a=e.map((e=>e.slice(i).reduce(((e,t)=>e+t),0)));o.forEach(((e,t)=>e.push(a[t])));const l=t.slice(0,i);return l.push("Others"),{truncatedData:o,truncatedLabels:l,originalData:e,originalLabels:t}})(re.map((e=>e.data)),se,i.truncateBars);re.forEach(((t,i)=>t.data=e.truncatedData[i])),se=e.truncatedLabels,ce=e.originalData.map(((e,t)=>Object.assign(Object.assign({},re[t]),{data:e})))}const ue={plugins:{legend:{display:!oe&&!i.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!oe,callbacks:{label:null===(o=i.tooltipConfig)||void 0===o?void 0:o.labelCallback,title:null===(O=i.tooltipConfig)||void 0===O?void 0:O.titleCallback,footer:null===(g=i.tooltipConfig)||void 0===g?void 0:g.footerCallback},footerFont:null===(x=null===(p=i.tooltipConfig)||void 0===p?void 0:p.footerStyles)||void 0===x?void 0:x.footerFont},datalabels:{display:null!==(b=i.showTotal)&&void 0!==b&&b,anchor:"end",align:"end",clamp:!0,formatter:(e,t)=>{var i;const o=t.datasetIndex,a=t.chart.data.datasets;if(o!==a.length-1)return"";const l=t.dataIndex;let n=0;for(let e=0;e<a.length;e++)n+=null!==(i=a[e].data[l])&&void 0!==i?i:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:s.COLORS.content.secondary}},layout:{padding:{right:i.showTotal&&i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:i.showTotal&&i.orientation!=u.GRAPH_ORIENTATION.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!i.customLegend,labels:{usePointStyle:!0}},indexAxis:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(A=i.yAxis)||void 0===A?void 0:A.title:null===(h=i.xAxis)||void 0===h?void 0:h.title),text:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(y=i.yAxis)||void 0===y?void 0:y.title:null===(R=i.xAxis)||void 0===R?void 0:R.title,color:null!==(I=i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(C=i.yAxis)||void 0===C?void 0:C.titleColor:null===(T=i.xAxis)||void 0===T?void 0:T.titleColor)&&void 0!==I?I:s.COLORS.content.secondary,font:{size:s.FONTS.caption.fontSize}},grid:{display:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL&&(void 0===(null===(f=null==i?void 0:i.showGridLines)||void 0===f?void 0:f.x)||(null===(j=null==i?void 0:i.showGridLines)||void 0===j?void 0:j.x)),color:s.COLORS.background.base},ticks:{fontSize:s.FONTS.caption.fontSize,color:null!==(N=i.yAxis.labelColor)&&void 0!==N?N:s.COLORS.content.secondary,callback:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?i.isInternationalStore?c.truncateValueForInternationalStore:c.truncateValueForIndianStore:void 0},stacked:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(S=i.yAxis)||void 0===S?void 0:S.stacked)||(null===(m=i.yAxis)||void 0===m?void 0:m.stacked):"boolean"!=typeof(null===(L=i.xAxis)||void 0===L?void 0:L.stacked)||(null===(k=i.xAxis)||void 0===k?void 0:k.stacked)},y:Object.assign(Object.assign({},(null===(H=null==i?void 0:i.equalHeight)||void 0===H?void 0:H.flag)?{suggestedMin:-(null==i?void 0:i.equalHeight.max),suggestedMax:null==i?void 0:i.equalHeight.max}:{}),{title:{display:!!(i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(E=i.xAxis)||void 0===E?void 0:E.title:null===(F=i.yAxis)||void 0===F?void 0:F.title),text:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(P=i.xAxis)||void 0===P?void 0:P.title:null===(G=i.yAxis)||void 0===G?void 0:G.title,color:null!==(w=i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(_=i.xAxis)||void 0===_?void 0:_.titleColor:null===(B=i.yAxis)||void 0===B?void 0:B.titleColor)&&void 0!==w?w:s.COLORS.content.secondary,font:{size:s.FONTS.caption.fontSize}},grid:{display:i.orientation!==u.GRAPH_ORIENTATION.HORIZONTAL&&(void 0===(null===(D=null==i?void 0:i.showGridLines)||void 0===D?void 0:D.y)||(null===(q=null==i?void 0:i.showGridLines)||void 0===q?void 0:q.y)),color:s.COLORS.background.base},ticks:Object.assign(Object.assign({stepSize:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(Z=i.xAxis)||void 0===Z?void 0:Z.stepSize:null===(z=i.yAxis)||void 0===z?void 0:z.stepSize,fontSize:s.FONTS.caption.fontSize,color:null!==(M=i.xAxis.labelColor)&&void 0!==M?M:s.COLORS.content.secondary},oe?{min:0,max:2e3,stepSize:200}:{}),{callback:(null==i?void 0:i.ticksCallback)?null==i?void 0:i.ticksCallback:i.orientation!==u.GRAPH_ORIENTATION.VERTICAL?i.isInternationalStore?c.truncateValueForInternationalStore:c.truncateValueForIndianStore:void 0}),stacked:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(W=i.xAxis)||void 0===W?void 0:W.stacked)||(null===(V=i.xAxis)||void 0===V?void 0:V.stacked):"boolean"!=typeof(null===(Y=i.yAxis)||void 0===Y?void 0:Y.stacked)||(null===(J=i.yAxis)||void 0===J?void 0:J.stacked)})},onClick:(e,t)=>{if(!i.onBarClick)return;const o=t[0].datasetIndex,a=t[0].index,l=e.chart.data.datasets[o].label,n=e.chart.data.labels[a];i.onBarClick(n,l)},onHover:(e,t)=>{i.onBarClick&&t.length&&(e.native.target.style.cursor="pointer")}};i.orientation&&i.orientation!==u.GRAPH_ORIENTATION.VERTICAL?delete ue.scales.y.ticks.callback:delete ue.scales.x.ticks.callback;const ve={labels:se,datasets:oe?[{data:ie,backgroundColor:"rgba(0,0,0,0)"}]:re},Oe={labels:i.xAxis.data.map((e=>"string"==typeof e?e:e.name)),datasets:oe?[{data:ie,backgroundColor:"rgba(0,0,0,0)"}]:ce},ge=function(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",padding:"0px 24px 12px 24px",justifyContent:i.allowChartPopup&&!t?"flex-start":"flex-end",flexWrap:"wrap"}},{children:re.map((t=>e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:"8px",marginTop:"4px"}},{children:[e.jsx("div",{style:{backgroundColor:t.backgroundColor,width:"16px",height:"16px",borderRadius:"2px"}}),e.jsx(r.BodyTiny,Object.assign({color:s.COLORS.content.secondary},{children:t.label}))]}),t.label.replace(" ","_"))))}))};return e.jsxs(v.GraphContainerWrapper,Object.assign({style:null!==(K=i.wrapperStyle)&&void 0!==K?K:{},padding:i.outerPadding,customLegend:i.customLegend},{children:[i.chartHeading&&e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:i.hideHeading?"flex-end":"space-between"}},{children:[!0!==i.hideHeading&&e.jsx(r.TitleRegular,Object.assign({color:null!==(Q=i.chartHeading.color)&&void 0!==Q?Q:s.COLORS.content.secondary},{children:i.chartHeading.heading})),i.allowChartPopup&&e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:e.jsx("div",{children:e.jsx(n.IconButton,{Icon:t.default,onClick:()=>{te(!0)}})})}))]})),i.customLegend&&ge(),e.jsx("div",Object.assign({className:"graph__wrapper"},{children:e.jsx("div",Object.assign({style:{height:null!==(U=i.graphCanvasHeight)&&void 0!==U?U:500,width:null!==(X=i.graphCanvasWidth)&&void 0!==X?X:"auto"}},{children:e.jsx(l.Bar,{options:ue,data:ve})}))})),ee&&e.jsx(d.StyledModal,Object.assign({open:ee,onClose:()=>te(!1),closeOnOutsideClick:!0,headingTitle:null===($=i.chartHeading)||void 0===$?void 0:$.heading,width:"85%"},{children:e.jsxs("div",Object.assign({className:"graph__wrapper",style:{padding:"8px"}},{children:[i.customLegend&&ge(!0),e.jsx("div",Object.assign({style:{height:"70vh",width:"100%",padding:"16px",borderRadius:"8px"}},{children:e.jsx(l.Bar,{options:ue,data:Oe})}))]}))}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../assets/icons/maximize.svg.js"),i=require("chart.js"),o=require("chartjs-plugin-datalabels"),a=require("react"),l=require("react-chartjs-2"),n=require("../../../icon-button/IconButton.js"),d=require("../../../modals/styledModal.js"),s=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),c=require("../utils/calcPercentage.js"),u=require("./StackedBarChart.model.js"),v=require("./StackedBarChart.styles.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=g(o);i.Chart.register(i.CategoryScale,i.LinearScale,i.BarElement,i.Tooltip,i.Legend,p.default);exports.StackedBarChart=i=>{var o,g,p,O,x,b,h,A,y,C,R,I,T,j,f,N,S,m,L,k,H,E,F,P,G,_,B,w,D,q,Z,z,M,W,V,Y,J,K,Q,U,X,$;const{headerIcons:ee=[],legendsAndIconDirection:te="row"}=i,[ie,oe]=a.useState(!1),ae=[250,1e3,800,1500,300,600],le=0===i.yAxis.data.length,ne=void 0===i.customColourScaleBrand&&void 0===i.customColourScalePastel?i.colorSchema===u.COLOR_SCHEMA.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"]:i.colorSchema===u.COLOR_SCHEMA.PASTEL?i.customColourScalePastel:i.customColourScaleBrand,de=i.customHoverColour,se=a.useMemo((()=>{var e,t,o;return Object.assign(Object.assign({barPercentage:(null==i?void 0:i.barPercentage)||.4,categoryPercentage:1,pointStyle:"circle",barWidth:i.barWidth,borderRadius:(null==i?void 0:i.borderRadius)||void 0},"object"==typeof(null==i?void 0:i.borderRadius)?{borderSkipped:!1}:{}),(null===(e=null==i?void 0:i.addBarGap)||void 0===e?void 0:e.flag)?{borderWidth:{top:(null===(t=null==i?void 0:i.addBarGap)||void 0===t?void 0:t.value)||2,bottom:(null===(o=null==i?void 0:i.addBarGap)||void 0===o?void 0:o.value)||2,right:0,left:0},borderColor:"transparent"}:{})}),[i.barWidth,null==i?void 0:i.borderRadius,null==i?void 0:i.barPercentage,null==i?void 0:i.addBarGap]),re={};i.yAxis.data.map((e=>{e.map((e=>{re[e.name]?re[e.name].push(e.value):re[e.name]=[e.value]}))}));const ce=Object.keys(re).map(((e,t)=>Object.assign({label:e,data:re[e],backgroundColor:null==ne?void 0:ne[t],hoverBackgroundColor:void 0===de?void 0:de[t]},se)));let ue=i.xAxis.data.map((e=>"string"==typeof e?e:e.name)),ve=ce;if(i.truncateBars){const e=((e,t,i)=>{if(t.length<=i)return{truncatedData:e,truncatedLabels:t,originalData:e,originalLabels:t};const o=e.map((e=>e.slice(0,i))),a=e.map((e=>e.slice(i).reduce(((e,t)=>e+t),0)));o.forEach(((e,t)=>e.push(a[t])));const l=t.slice(0,i);return l.push("Others"),{truncatedData:o,truncatedLabels:l,originalData:e,originalLabels:t}})(ce.map((e=>e.data)),ue,i.truncateBars);ce.forEach(((t,i)=>t.data=e.truncatedData[i])),ue=e.truncatedLabels,ve=e.originalData.map(((e,t)=>Object.assign(Object.assign({},ce[t]),{data:e})))}const ge={plugins:{legend:{display:!le&&!i.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!le,callbacks:{label:null===(o=i.tooltipConfig)||void 0===o?void 0:o.labelCallback,title:null===(g=i.tooltipConfig)||void 0===g?void 0:g.titleCallback,footer:null===(p=i.tooltipConfig)||void 0===p?void 0:p.footerCallback},footerFont:null===(x=null===(O=i.tooltipConfig)||void 0===O?void 0:O.footerStyles)||void 0===x?void 0:x.footerFont},datalabels:{display:null!==(b=i.showTotal)&&void 0!==b&&b,anchor:"end",align:"end",clamp:!0,formatter:(e,t)=>{var i;const o=t.datasetIndex,a=t.chart.data.datasets;if(o!==a.length-1)return"";const l=t.dataIndex;let n=0;for(let e=0;e<a.length;e++)n+=null!==(i=a[e].data[l])&&void 0!==i?i:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:r.COLORS.content.secondary}},layout:{padding:{right:i.showTotal&&i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?50:0,top:i.showTotal&&i.orientation!=u.GRAPH_ORIENTATION.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!i.customLegend,labels:{usePointStyle:!0}},indexAxis:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(h=i.yAxis)||void 0===h?void 0:h.title:null===(A=i.xAxis)||void 0===A?void 0:A.title),text:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(y=i.yAxis)||void 0===y?void 0:y.title:null===(C=i.xAxis)||void 0===C?void 0:C.title,color:null!==(T=i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(R=i.yAxis)||void 0===R?void 0:R.titleColor:null===(I=i.xAxis)||void 0===I?void 0:I.titleColor)&&void 0!==T?T:r.COLORS.content.secondary,font:{size:r.FONTS.caption.fontSize}},grid:{display:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL&&(void 0===(null===(j=null==i?void 0:i.showGridLines)||void 0===j?void 0:j.x)||(null===(f=null==i?void 0:i.showGridLines)||void 0===f?void 0:f.x)),color:r.COLORS.background.base},ticks:{fontSize:r.FONTS.caption.fontSize,color:null!==(N=i.yAxis.labelColor)&&void 0!==N?N:r.COLORS.content.secondary,callback:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?i.isInternationalStore?c.truncateValueForInternationalStore:c.truncateValueForIndianStore:void 0},stacked:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(S=i.yAxis)||void 0===S?void 0:S.stacked)||(null===(m=i.yAxis)||void 0===m?void 0:m.stacked):"boolean"!=typeof(null===(L=i.xAxis)||void 0===L?void 0:L.stacked)||(null===(k=i.xAxis)||void 0===k?void 0:k.stacked)},y:Object.assign(Object.assign({},(null===(H=null==i?void 0:i.equalHeight)||void 0===H?void 0:H.flag)?{suggestedMin:-(null==i?void 0:i.equalHeight.max),suggestedMax:null==i?void 0:i.equalHeight.max}:{}),{title:{display:!!(i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(E=i.xAxis)||void 0===E?void 0:E.title:null===(F=i.yAxis)||void 0===F?void 0:F.title),text:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(P=i.xAxis)||void 0===P?void 0:P.title:null===(G=i.yAxis)||void 0===G?void 0:G.title,color:null!==(w=i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(_=i.xAxis)||void 0===_?void 0:_.titleColor:null===(B=i.yAxis)||void 0===B?void 0:B.titleColor)&&void 0!==w?w:r.COLORS.content.secondary,font:{size:r.FONTS.caption.fontSize}},grid:{display:i.orientation!==u.GRAPH_ORIENTATION.HORIZONTAL&&(void 0===(null===(D=null==i?void 0:i.showGridLines)||void 0===D?void 0:D.y)||(null===(q=null==i?void 0:i.showGridLines)||void 0===q?void 0:q.y)),color:r.COLORS.background.base},ticks:Object.assign(Object.assign({stepSize:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?null===(Z=i.xAxis)||void 0===Z?void 0:Z.stepSize:null===(z=i.yAxis)||void 0===z?void 0:z.stepSize,fontSize:r.FONTS.caption.fontSize,color:null!==(M=i.xAxis.labelColor)&&void 0!==M?M:r.COLORS.content.secondary},le?{min:0,max:2e3,stepSize:200}:{}),{callback:(null==i?void 0:i.ticksCallback)?null==i?void 0:i.ticksCallback:i.orientation!==u.GRAPH_ORIENTATION.VERTICAL?i.isInternationalStore?c.truncateValueForInternationalStore:c.truncateValueForIndianStore:void 0}),stacked:i.orientation===u.GRAPH_ORIENTATION.HORIZONTAL?"boolean"!=typeof(null===(W=i.xAxis)||void 0===W?void 0:W.stacked)||(null===(V=i.xAxis)||void 0===V?void 0:V.stacked):"boolean"!=typeof(null===(Y=i.yAxis)||void 0===Y?void 0:Y.stacked)||(null===(J=i.yAxis)||void 0===J?void 0:J.stacked)})},onClick:(e,t)=>{if(!i.onBarClick)return;const o=t[0].datasetIndex,a=t[0].index,l=e.chart.data.datasets[o].label,n=e.chart.data.labels[a];i.onBarClick(n,l)},onHover:(e,t)=>{i.onBarClick&&t.length&&(e.native.target.style.cursor="pointer")}};i.orientation&&i.orientation!==u.GRAPH_ORIENTATION.VERTICAL?delete ge.scales.y.ticks.callback:delete ge.scales.x.ticks.callback;const pe={labels:ue,datasets:le?[{data:ae,backgroundColor:"rgba(0,0,0,0)"}]:ce},Oe={labels:i.xAxis.data.map((e=>"string"==typeof e?e:e.name)),datasets:le?[{data:ae,backgroundColor:"rgba(0,0,0,0)"}]:ve},xe=function(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return e.jsx("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",padding:"0px 24px 12px 24px",justifyContent:i.allowChartPopup&&!t?"flex-start":"flex-end",flexWrap:"wrap"}},{children:ce.map((t=>e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:"8px",marginTop:"4px"}},{children:[e.jsx("div",{style:{backgroundColor:t.backgroundColor,width:"16px",height:"16px",borderRadius:"2px"}}),e.jsx(s.BodyTiny,Object.assign({color:r.COLORS.content.secondary},{children:t.label}))]}),t.label.replace(" ","_"))))}))};return e.jsxs(v.GraphContainerWrapper,Object.assign({style:null!==(K=i.wrapperStyle)&&void 0!==K?K:{},padding:i.outerPadding,customLegend:i.customLegend},{children:[i.chartHeading&&e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:i.hideHeading?"flex-end":"space-between"}},{children:[!0!==i.hideHeading&&e.jsx(s.TitleRegular,Object.assign({color:null!==(Q=i.chartHeading.color)&&void 0!==Q?Q:r.COLORS.content.secondary},{children:i.chartHeading.heading})),i.allowChartPopup&&e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:e.jsx("div",{children:e.jsx(n.IconButton,{Icon:t.default,onClick:()=>{oe(!0)}})})}))]})),i.customLegend&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:te,justifyContent:"space-between"}},{children:[e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",gap:"8px"}},{children:ee.map(((t,i)=>e.jsx("div",{children:e.jsx("div",{children:t})},i)))})),xe()]})),e.jsx("div",Object.assign({className:"graph__wrapper"},{children:e.jsx("div",Object.assign({style:{height:null!==(U=i.graphCanvasHeight)&&void 0!==U?U:500,width:null!==(X=i.graphCanvasWidth)&&void 0!==X?X:"auto"}},{children:e.jsx(l.Bar,{options:ge,data:pe})}))})),ie&&e.jsx(d.StyledModal,Object.assign({open:ie,onClose:()=>oe(!1),closeOnOutsideClick:!0,headingTitle:null===($=i.chartHeading)||void 0===$?void 0:$.heading,width:"85%"},{children:e.jsxs("div",Object.assign({className:"graph__wrapper",style:{padding:"8px"}},{children:[i.customLegend&&xe(!0),e.jsx("div",Object.assign({style:{height:"70vh",width:"100%",padding:"16px",borderRadius:"8px"}},{children:e.jsx(l.Bar,{options:ge,data:Oe})}))]}))}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{Chart as n,CategoryScale as o,LinearScale as r,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";n.register(o,r,i,a,s,d,c,u,p,g);const O=n=>{let{scaleText:o,labels:r,canvasHeight:i,datas:a,maintainAspectRatio:s=!1,stepSize:d,min:c,max:u,isZeroState:p,tension:g,isNewStyles:O,prefixCurrencyInYAxis:B,pointRadius:S,useKFormat:z,lineThickness:D,ticksLabelCallback:I,labelCallback:T,afterBodyCallBack:$,titleTooltipCallback:A,isInternationalStore:F,customYHeaders:R,headerIcons:q=[],legendsAndIconDirection:L="row"}=n;var P,E,H;const[W,Y]=b(null),Z=y();m((()=>{var e,t,l,n;if(null===(n=null===(l=null===(t=null===(e=Z.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===l?void 0:l.ticks)||void 0===n?void 0:n.length){const e=38*Z.current.scales.y.ticks.length;Y(e)}}),[Z]);const G=a.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?f.content.placeholder:f.background.brand,square:e.squareLegends}))),K={labels:r,datasets:a.map(((e,t)=>{var l,n,o;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 O?Object.assign({pointStyle:"circle",pointRadius:S||(r&&r.length>10?2.5:4),pointBorderColor:"transparent",pointBackgroundColor:e||(t?f.content.placeholder:f.background.brand)},l):Object.assign({pointRadius:null!=S?S:1},l)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(n=null!==(l=e.lineWidth)&&void 0!==l?l:D)&&void 0!==n?n:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,W?W-75:150);return t.addColorStop(0,"#F1EEFB"),t.addColorStop(1,"rgba(127, 86, 217, 0)"),t}:null!==(o=e.backgroundColor)&&void 0!==o?o:"transparent",legend:e.legend})}))},N={maintainAspectRatio:s,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=O&&O,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>f.content.primaryInverse,backgroundColor:f.content.primary,callbacks:{labelTextColor:()=>f.content.primaryInverse,title:A,label:T,afterBody:$},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==o?void 0:o.yPrefix)&&void 0!==t?t:""}${F?x(e):k(e)}${null!=B?B:""}`:R&&Object.keys(R).length>0?R[e]:`${null!==(l=null==o?void 0:o.yPrefix)&&void 0!==l?l:""}${e}${null!=B?B:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:p?1:d,padding:O?24:0},title:{display:!!(null==o?void 0:o.y),text:null==o?void 0:o.y},grid:{color:f.background.base,drawBorder:null===(P=null==o?void 0:o.yDrawBorder)||void 0===P||P}},x:{ticks:{callback:I,color:f.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==o?void 0:o.x),text:null==o?void 0:o.x},grid:{display:!1,drawBorder:null!==(E=null==o?void 0:o.xDrawBorder)&&void 0!==E&&E}}}};return e("div",Object.assign({style:Object.assign(Object.assign({},s?{}:{height:null!==(H=null!=i?i:W)&&void 0!==H?H:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",flexDirection:L}},{children:[t(C,{children:G.map(((n,o)=>{let{text:r,color:i,square:a}=n;return r?e(j,{children:[t(w,{color:i,square:a,newStyle:O}),t(h,Object.assign({color:"#667085"},{children:r}))]},o):t(l,{})}))})
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{Chart as n,CategoryScale as o,LinearScale as r,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";n.register(o,r,i,a,s,d,c,u,p,g);const O=n=>{let{scaleText:o,labels:r,canvasHeight:i,datas:a,maintainAspectRatio:s=!1,stepSize:d,min:c,max:u,isZeroState:p,tension:g,isNewStyles:O,prefixCurrencyInYAxis:B,pointRadius:S,useKFormat:z,lineThickness:D,ticksLabelCallback:I,labelCallback:T,afterBodyCallBack:$,titleTooltipCallback:A,isInternationalStore:F,customYHeaders:R,headerIcons:q=[],legendsAndIconDirection:L="row"}=n;var P,E,H;const[W,Y]=b(null),Z=y();m((()=>{var e,t,l,n;if(null===(n=null===(l=null===(t=null===(e=Z.current)||void 0===e?void 0:e.scales)||void 0===t?void 0:t.y)||void 0===l?void 0:l.ticks)||void 0===n?void 0:n.length){const e=38*Z.current.scales.y.ticks.length;Y(e)}}),[Z]);const G=a.map((e=>({text:e.legend,color:e.lineColor?e.lineColor:e.dotted?f.content.placeholder:f.background.brand,square:e.squareLegends}))),K={labels:r,datasets:a.map(((e,t)=>{var l,n,o;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 O?Object.assign({pointStyle:"circle",pointRadius:S||(r&&r.length>10?2.5:4),pointBorderColor:"transparent",pointBackgroundColor:e||(t?f.content.placeholder:f.background.brand)},l):Object.assign({pointRadius:null!=S?S:1},l)})(e.lineColor,e.dotted)),{borderDash:e.dotted?[8,3]:void 0,data:e.data,borderWidth:null!==(n=null!==(l=e.lineWidth)&&void 0!==l?l:D)&&void 0!==n?n:2,backgroundColor:e.gradient?e=>{const t=e.chart.ctx.createLinearGradient(0,0,0,W?W-75:150);return t.addColorStop(0,"#F1EEFB"),t.addColorStop(1,"rgba(127, 86, 217, 0)"),t}:null!==(o=e.backgroundColor)&&void 0!==o?o:"transparent",legend:e.legend})}))},N={maintainAspectRatio:s,responsive:!0,plugins:{legend:{display:!1},title:{display:!1},tooltip:{displayColors:null!=O&&O,titleFont:()=>({weight:"600",size:14,family:"inter"}),titleColor:()=>f.content.primaryInverse,backgroundColor:f.content.primary,callbacks:{labelTextColor:()=>f.content.primaryInverse,title:A,label:T,afterBody:$},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==o?void 0:o.yPrefix)&&void 0!==t?t:""}${F?x(e):k(e)}${null!=B?B:""}`:R&&Object.keys(R).length>0?R[e]:`${null!==(l=null==o?void 0:o.yPrefix)&&void 0!==l?l:""}${e}${null!=B?B:""}`},font:{family:"inter",size:12,weight:"400"},stepSize:p?1:d,padding:O?24:0},title:{display:!!(null==o?void 0:o.y),text:null==o?void 0:o.y},grid:{color:f.background.base,drawBorder:null===(P=null==o?void 0:o.yDrawBorder)||void 0===P||P}},x:{ticks:{callback:I,color:f.content.secondary,font:{family:"inter",size:12,weight:"400"}},title:{display:!!(null==o?void 0:o.x),text:null==o?void 0:o.x},grid:{display:!1,drawBorder:null!==(E=null==o?void 0:o.xDrawBorder)&&void 0!==E&&E}}}};return e("div",Object.assign({style:Object.assign(Object.assign({},s?{}:{height:null!==(H=null!=i?i:W)&&void 0!==H?H:204}),{display:"flex",flexDirection:"column",gap:2,width:"100%"})},{children:[e("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",flexDirection:L}},{children:[t(C,{children:q.map(((e,l)=>t(j,{children:e},l)))}),t(C,{children:G.map(((n,o)=>{let{text:r,color:i,square:a}=n;return r?e(j,{children:[t(w,{color:i,square:a,newStyle:O}),t(h,Object.assign({color:"#667085"},{children:r}))]},o):t(l,{})}))})]})),t("div",Object.assign({style:{flex:1}},{children:t(v,{ref:Z,options:N,data:K})}))]}))};export{O as LineChart};
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as o,jsx as i}from"react/jsx-runtime";import t from"../../../../assets/icons/maximize.svg.js";import{Chart as e,CategoryScale as a,LinearScale as l,BarElement as n,Tooltip as d,Legend as s}from"chart.js";import r from"chartjs-plugin-datalabels";import{useState as c,useMemo as u}from"react";import{Bar as v}from"react-chartjs-2";import{IconButton as p}from"../../../icon-button/IconButton.js";import{StyledModal as g}from"../../../modals/styledModal.js";import{TitleRegular as b,BodyTiny as x}from"../../../TypographyStyle.js";import{COLORS as h,FONTS as m}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as y,truncateValueForIndianStore as f}from"../utils/calcPercentage.js";import{COLOR_SCHEMA as O,GRAPH_ORIENTATION as A}from"./StackedBarChart.model.js";import{GraphContainerWrapper as C}from"./StackedBarChart.styles.js";e.register(a,l,n,d,s,r);const k=e=>{var a,l,n,d,s,r,k,j,L,F,S,H,T,
|
|
1
|
+
import{jsxs as o,jsx as i}from"react/jsx-runtime";import t from"../../../../assets/icons/maximize.svg.js";import{Chart as e,CategoryScale as a,LinearScale as l,BarElement as n,Tooltip as d,Legend as s}from"chart.js";import r from"chartjs-plugin-datalabels";import{useState as c,useMemo as u}from"react";import{Bar as v}from"react-chartjs-2";import{IconButton as p}from"../../../icon-button/IconButton.js";import{StyledModal as g}from"../../../modals/styledModal.js";import{TitleRegular as b,BodyTiny as x}from"../../../TypographyStyle.js";import{COLORS as h,FONTS as m}from"../../../../constants/Theme.js";import{truncateValueForInternationalStore as y,truncateValueForIndianStore as f}from"../utils/calcPercentage.js";import{COLOR_SCHEMA as O,GRAPH_ORIENTATION as A}from"./StackedBarChart.model.js";import{GraphContainerWrapper as C}from"./StackedBarChart.styles.js";e.register(a,l,n,d,s,r);const k=e=>{var a,l,n,d,s,r,k,j,L,F,S,I,H,T,R,w,E,B,D,N,Z,z,P,G,W,_,q,M,V,Y,J,K,Q,U,X,$,oo,io,to,eo,ao,lo;const{headerIcons:no=[],legendsAndIconDirection:so="row"}=e,[ro,co]=c(!1),uo=[250,1e3,800,1500,300,600],vo=0===e.yAxis.data.length,po=void 0===e.customColourScaleBrand&&void 0===e.customColourScalePastel?e.colorSchema===O.PASTEL?["#E6C7FF","#FEC6C6","#FEDEF3","#DEEFFF","#FFD8B1","#C7E5FF","#FFD3E6","#C9FFE5","#FFE3C7","#D9D9FF"]:["#5E07BB","#9E77ED","#D2AEFF","#F7D7FF","#CDE1FF","#92AFFA","#3935E1"]:e.colorSchema===O.PASTEL?e.customColourScalePastel:e.customColourScaleBrand,go=e.customHoverColour,bo=u((()=>{var o,i,t;return Object.assign(Object.assign({barPercentage:(null==e?void 0:e.barPercentage)||.4,categoryPercentage:1,pointStyle:"circle",barWidth:e.barWidth,borderRadius:(null==e?void 0:e.borderRadius)||void 0},"object"==typeof(null==e?void 0:e.borderRadius)?{borderSkipped:!1}:{}),(null===(o=null==e?void 0:e.addBarGap)||void 0===o?void 0:o.flag)?{borderWidth:{top:(null===(i=null==e?void 0:e.addBarGap)||void 0===i?void 0:i.value)||2,bottom:(null===(t=null==e?void 0:e.addBarGap)||void 0===t?void 0:t.value)||2,right:0,left:0},borderColor:"transparent"}:{})}),[e.barWidth,null==e?void 0:e.borderRadius,null==e?void 0:e.barPercentage,null==e?void 0:e.addBarGap]),xo={};e.yAxis.data.map((o=>{o.map((o=>{xo[o.name]?xo[o.name].push(o.value):xo[o.name]=[o.value]}))}));const ho=Object.keys(xo).map(((o,i)=>Object.assign({label:o,data:xo[o],backgroundColor:null==po?void 0:po[i],hoverBackgroundColor:void 0===go?void 0:go[i]},bo)));let mo=e.xAxis.data.map((o=>"string"==typeof o?o:o.name)),yo=ho;if(e.truncateBars){const o=((o,i,t)=>{if(i.length<=t)return{truncatedData:o,truncatedLabels:i,originalData:o,originalLabels:i};const e=o.map((o=>o.slice(0,t))),a=o.map((o=>o.slice(t).reduce(((o,i)=>o+i),0)));e.forEach(((o,i)=>o.push(a[i])));const l=i.slice(0,t);return l.push("Others"),{truncatedData:e,truncatedLabels:l,originalData:o,originalLabels:i}})(ho.map((o=>o.data)),mo,e.truncateBars);ho.forEach(((i,t)=>i.data=o.truncatedData[t])),mo=o.truncatedLabels,yo=o.originalData.map(((o,i)=>Object.assign(Object.assign({},ho[i]),{data:o})))}const fo={plugins:{legend:{display:!vo&&!e.customLegend,labels:{usePointStyle:!0,fontSize:2}},tooltip:{enabled:!vo,callbacks:{label:null===(a=e.tooltipConfig)||void 0===a?void 0:a.labelCallback,title:null===(l=e.tooltipConfig)||void 0===l?void 0:l.titleCallback,footer:null===(n=e.tooltipConfig)||void 0===n?void 0:n.footerCallback},footerFont:null===(s=null===(d=e.tooltipConfig)||void 0===d?void 0:d.footerStyles)||void 0===s?void 0:s.footerFont},datalabels:{display:null!==(r=e.showTotal)&&void 0!==r&&r,anchor:"end",align:"end",clamp:!0,formatter:(o,i)=>{var t;const e=i.datasetIndex,a=i.chart.data.datasets;if(e!==a.length-1)return"";const l=i.dataIndex;let n=0;for(let o=0;o<a.length;o++)n+=null!==(t=a[o].data[l])&&void 0!==t?t:0;return n?n<1e3?n:(n/1e3).toString().substring(0,4)+"k":""},color:h.content.secondary}},layout:{padding:{right:e.showTotal&&e.orientation===A.HORIZONTAL?50:0,top:e.showTotal&&e.orientation!=A.HORIZONTAL?50:0}},responsive:!0,maintainAspectRatio:!1,legend:{display:!e.customLegend,labels:{usePointStyle:!0}},indexAxis:e.orientation===A.HORIZONTAL?"y":"x",scales:{x:{title:{display:!!(e.orientation===A.HORIZONTAL?null===(k=e.yAxis)||void 0===k?void 0:k.title:null===(j=e.xAxis)||void 0===j?void 0:j.title),text:e.orientation===A.HORIZONTAL?null===(L=e.yAxis)||void 0===L?void 0:L.title:null===(F=e.xAxis)||void 0===F?void 0:F.title,color:null!==(H=e.orientation===A.HORIZONTAL?null===(S=e.yAxis)||void 0===S?void 0:S.titleColor:null===(I=e.xAxis)||void 0===I?void 0:I.titleColor)&&void 0!==H?H:h.content.secondary,font:{size:m.caption.fontSize}},grid:{display:e.orientation===A.HORIZONTAL&&(void 0===(null===(T=null==e?void 0:e.showGridLines)||void 0===T?void 0:T.x)||(null===(R=null==e?void 0:e.showGridLines)||void 0===R?void 0:R.x)),color:h.background.base},ticks:{fontSize:m.caption.fontSize,color:null!==(w=e.yAxis.labelColor)&&void 0!==w?w:h.content.secondary,callback:e.orientation===A.HORIZONTAL?e.isInternationalStore?y:f:void 0},stacked:e.orientation===A.HORIZONTAL?"boolean"!=typeof(null===(E=e.yAxis)||void 0===E?void 0:E.stacked)||(null===(B=e.yAxis)||void 0===B?void 0:B.stacked):"boolean"!=typeof(null===(D=e.xAxis)||void 0===D?void 0:D.stacked)||(null===(N=e.xAxis)||void 0===N?void 0:N.stacked)},y:Object.assign(Object.assign({},(null===(Z=null==e?void 0:e.equalHeight)||void 0===Z?void 0:Z.flag)?{suggestedMin:-(null==e?void 0:e.equalHeight.max),suggestedMax:null==e?void 0:e.equalHeight.max}:{}),{title:{display:!!(e.orientation===A.HORIZONTAL?null===(z=e.xAxis)||void 0===z?void 0:z.title:null===(P=e.yAxis)||void 0===P?void 0:P.title),text:e.orientation===A.HORIZONTAL?null===(G=e.xAxis)||void 0===G?void 0:G.title:null===(W=e.yAxis)||void 0===W?void 0:W.title,color:null!==(M=e.orientation===A.HORIZONTAL?null===(_=e.xAxis)||void 0===_?void 0:_.titleColor:null===(q=e.yAxis)||void 0===q?void 0:q.titleColor)&&void 0!==M?M:h.content.secondary,font:{size:m.caption.fontSize}},grid:{display:e.orientation!==A.HORIZONTAL&&(void 0===(null===(V=null==e?void 0:e.showGridLines)||void 0===V?void 0:V.y)||(null===(Y=null==e?void 0:e.showGridLines)||void 0===Y?void 0:Y.y)),color:h.background.base},ticks:Object.assign(Object.assign({stepSize:e.orientation===A.HORIZONTAL?null===(J=e.xAxis)||void 0===J?void 0:J.stepSize:null===(K=e.yAxis)||void 0===K?void 0:K.stepSize,fontSize:m.caption.fontSize,color:null!==(Q=e.xAxis.labelColor)&&void 0!==Q?Q:h.content.secondary},vo?{min:0,max:2e3,stepSize:200}:{}),{callback:(null==e?void 0:e.ticksCallback)?null==e?void 0:e.ticksCallback:e.orientation!==A.VERTICAL?e.isInternationalStore?y:f:void 0}),stacked:e.orientation===A.HORIZONTAL?"boolean"!=typeof(null===(U=e.xAxis)||void 0===U?void 0:U.stacked)||(null===(X=e.xAxis)||void 0===X?void 0:X.stacked):"boolean"!=typeof(null===($=e.yAxis)||void 0===$?void 0:$.stacked)||(null===(oo=e.yAxis)||void 0===oo?void 0:oo.stacked)})},onClick:(o,i)=>{if(!e.onBarClick)return;const t=i[0].datasetIndex,a=i[0].index,l=o.chart.data.datasets[t].label,n=o.chart.data.labels[a];e.onBarClick(n,l)},onHover:(o,i)=>{e.onBarClick&&i.length&&(o.native.target.style.cursor="pointer")}};e.orientation&&e.orientation!==A.VERTICAL?delete fo.scales.y.ticks.callback:delete fo.scales.x.ticks.callback;const Oo={labels:mo,datasets:vo?[{data:uo,backgroundColor:"rgba(0,0,0,0)"}]:ho},Ao={labels:e.xAxis.data.map((o=>"string"==typeof o?o:o.name)),datasets:vo?[{data:uo,backgroundColor:"rgba(0,0,0,0)"}]:yo},Co=function(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return i("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",padding:"0px 24px 12px 24px",justifyContent:e.allowChartPopup&&!t?"flex-start":"flex-end",flexWrap:"wrap"}},{children:ho.map((t=>o("div",Object.assign({style:{display:"flex",alignItems:"center",gap:"8px",marginTop:"4px"}},{children:[i("div",{style:{backgroundColor:t.backgroundColor,width:"16px",height:"16px",borderRadius:"2px"}}),i(x,Object.assign({color:h.content.secondary},{children:t.label}))]}),t.label.replace(" ","_"))))}))};return o(C,Object.assign({style:null!==(io=e.wrapperStyle)&&void 0!==io?io:{},padding:e.outerPadding,customLegend:e.customLegend},{children:[e.chartHeading&&o("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:e.hideHeading?"flex-end":"space-between"}},{children:[!0!==e.hideHeading&&i(b,Object.assign({color:null!==(to=e.chartHeading.color)&&void 0!==to?to:h.content.secondary},{children:e.chartHeading.heading})),e.allowChartPopup&&i("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:i("div",{children:i(p,{Icon:t,onClick:()=>{co(!0)}})})}))]})),e.customLegend&&o("div",Object.assign({style:{display:"flex",flexDirection:so,justifyContent:"space-between"}},{children:[i("div",Object.assign({style:{display:"flex",alignItems:"center",gap:"8px"}},{children:no.map(((o,t)=>i("div",{children:i("div",{children:o})},t)))})),Co()]})),i("div",Object.assign({className:"graph__wrapper"},{children:i("div",Object.assign({style:{height:null!==(eo=e.graphCanvasHeight)&&void 0!==eo?eo:500,width:null!==(ao=e.graphCanvasWidth)&&void 0!==ao?ao:"auto"}},{children:i(v,{options:fo,data:Oo})}))})),ro&&i(g,Object.assign({open:ro,onClose:()=>co(!1),closeOnOutsideClick:!0,headingTitle:null===(lo=e.chartHeading)||void 0===lo?void 0:lo.heading,width:"85%"},{children:o("div",Object.assign({className:"graph__wrapper",style:{padding:"8px"}},{children:[e.customLegend&&Co(!0),i("div",Object.assign({style:{height:"70vh",width:"100%",padding:"16px",borderRadius:"8px"}},{children:i(v,{options:fo,data:Ao})}))]}))}))]}))};export{k as StackedBarChart};
|