@spscommerce/ds-react-charts 8.31.1 → 8.31.2

package/lib/index.js

@@ -6946,6 +6946,7 @@ function dh(e) {
         hideTicks: !0,
         hideAxisLine: !0,
         stroke: ve.colors.gray300,
+        numTicks: l.tickCount,
         tickLabelProps: () => ({
           textAnchor: "end",
           fontSize: "12px",

package/lib/index.umd.cjs

@@ -108,7 +108,7 @@ z`).split(`
                             />
                         )
                     }
-                `}}}},Y1={barFillColor1:"string",barFillColor2:"string",barFillColorHover:"string",chartData:"ChartDataObject[]",chartHeight:"number",chartWidth:"number",barSize:"number",yAxis:"ChartAxis",xAxis:"ChartAxis",marginLeft:"number",xMaxValue:"number",xTickFormat:"(i: number) => string"};function io(e){const{barFillColor1:t=pe.colors.blue200,barFillColor2:n="#007DB880",barFillColorHover:r=pe.colors.blue300,chartData:a=[],chartHeight:i=0,chartWidth:s=0,barSize:o,yAxis:l={tickValues:"label"},xAxis:u={tickValues:"value",tickCount:3},marginLeft:c=30,xMaxValue:f,xTickFormat:h}=e,p={top:30,bottom:30,left:c,right:30},d=s-p.left-p.right,v=i-p.top-p.bottom,x=k=>k[u.tickValues],g=k=>k[l.tickValues],b=Mn({range:[0,v],round:!0,domain:a.map(g),padding:.4}),_=Yt({range:[0,d],round:!0,domain:[0,f||Math.max(...a.map(x))]}),M=(k,C)=>P=>k(C(P)),y=M(_,x),S=M(b,g),T=Fn(),$=Fn();return j.createElement("svg",{width:s,height:i,className:"sps-chart-wrapper"},j.createElement(gf,{scale:_,left:p.left,height:v,stroke:pe.colors.gray400,strokeOpacity:.2}),j.createElement(Cn,{id:$,from:"#D2D4D580",to:"#D2D4D5",vertical:!1}),j.createElement(Cn,{id:T,from:n,to:t,vertical:!1}),a.map((k,C)=>{const P=y(k),N=Fn();return j.createElement(rn,{key:C},j.createElement("rect",{x:p.left,y:S(k)+(o?(b.bandwidth()-o)/2:0),height:o||b.bandwidth(),width:d,fill:`url(#${$})`}),j.createElement(ul,{id:N,right:!0,radius:4,x:p.left,y:S(k)+(o?(b.bandwidth()-o)/2:0),height:o||b.bandwidth(),width:P,fill:`url(#${T})`,onMouseEnter:A=>{const R=A.target;R.style.fill=r},onMouseLeave:A=>{const R=A.target;R.style.fill=""}}),j.createElement(hf,{scale:b,left:p.left,hideTicks:!0,hideAxisLine:!0,stroke:pe.colors.gray300,tickLabelProps:()=>({textAnchor:"end",fontSize:"12px",fill:pe.colors.gray400,fontWeight:"200",width:p.left,verticalAnchor:"middle"})}),j.createElement(Xa,{top:v,scale:_,left:p.left,hideTicks:!0,numTicks:u.tickCount,tickFormat:h||void 0,stroke:pe.colors.gray300,tickLabelProps:()=>({textAnchor:"middle",fontSize:"12px",fontWeight:"200",fill:pe.colors.gray400})}),j.createElement(tn.SpsTooltip,{for:N},k.label))}))}Object.assign(io,{props:Y1,displayName:"SpsHorizontalBarChart"});function bf(e){var t,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=bf(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function xf(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=bf(e))&&(r&&(r+=" "),r+=t);return r}var V1=["flexDirection","alignItems","margin","display","children"];function ao(){return ao=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},ao.apply(this,arguments)}function G1(e,t){if(e==null)return{};var n={},r=Object.keys(e),a,i;for(i=0;i<r.length;i++)a=r[i],!(t.indexOf(a)>=0)&&(n[a]=e[a]);return n}function _f(e){var t=e.flexDirection,n=t===void 0?"row":t,r=e.alignItems,a=r===void 0?"center":r,i=e.margin,s=i===void 0?"0":i,o=e.display,l=o===void 0?"flex":o,u=e.children,c=G1(e,V1);return m.createElement("div",ao({className:"visx-legend-item",style:{display:l,alignItems:a,flexDirection:n,margin:s}},c),u)}_f.propTypes={alignItems:w.string,margin:w.oneOfType([w.string,w.number]),children:w.node,display:w.string};var K1=["flex","label","margin","align","children"];function oo(){return oo=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},oo.apply(this,arguments)}function X1(e,t){if(e==null)return{};var n={},r=Object.keys(e),a,i;for(i=0;i<r.length;i++)a=r[i],!(t.indexOf(a)>=0)&&(n[a]=e[a]);return n}function wf(e){var t=e.flex,n=t===void 0?"1":t,r=e.label,a=e.margin,i=a===void 0?"5px 0":a,s=e.align,o=s===void 0?"left":s,l=e.children,u=X1(e,K1);return m.createElement("div",oo({className:"visx-legend-label",style:{justifyContent:o,display:"flex",flex:n,margin:i}},u),l||r)}wf.propTypes={align:w.string,label:w.node,flex:w.oneOfType([w.string,w.number]),margin:w.oneOfType([w.string,w.number]),children:w.node};function so(){return so=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},so.apply(this,arguments)}function lo(e){var t=e.fill,n=e.width,r=e.height,a=e.style;return m.createElement("div",{style:so({width:n,height:r,background:t},a)})}lo.propTypes={fill:w.string,width:w.oneOfType([w.string,w.number]),height:w.oneOfType([w.string,w.number])};function Sf(e){var t=e.fill,n=e.width,r=e.height,a=e.style,i=typeof n=="string"||typeof n>"u"?0:n,s=typeof r=="string"||typeof r>"u"?0:r,o=Math.max(i,s),l=o/2;return m.createElement("svg",{width:o,height:o},m.createElement(Ge,{top:l,left:l},m.createElement("circle",{r:l,fill:t,style:a})))}Sf.propTypes={fill:w.string,width:w.oneOfType([w.string,w.number]),height:w.oneOfType([w.string,w.number])};function Tf(e){var t=e.fill,n=e.width,r=e.height,a=e.style,i=typeof r=="string"||typeof r>"u"?0:r,s=typeof(a==null?void 0:a.strokeWidth)=="number"?a==null?void 0:a.strokeWidth:2;return m.createElement("svg",{width:n,height:r},m.createElement(Ge,{top:i/2-s/2},m.createElement("line",{x1:0,x2:n,y1:0,y2:0,stroke:t,strokeWidth:s,style:a})))}Tf.propTypes={fill:w.string,width:w.oneOfType([w.string,w.number]),height:w.oneOfType([w.string,w.number])};function In(){return In=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},In.apply(this,arguments)}var uo=function(){};function Z1(e){var t=e.shape,n=t===void 0?"rect":t,r=e.fill,a=r===void 0?uo:r,i=e.size,s=i===void 0?uo:i,o=e.width,l=e.height,u=e.label,c=e.item,f=e.itemIndex,h=e.shapeStyle,p=h===void 0?uo:h,d={width:o,height:l,item:c,itemIndex:f,label:u,fill:a(In({},u)),size:s(In({},u)),style:p(In({},u))};return typeof n=="string"?n==="circle"?m.createElement(Sf,d):n==="line"?m.createElement(Tf,d):m.createElement(lo,d):m.isValidElement(n)?m.cloneElement(n,d):n?m.createElement(n,d):null}function qr(){return qr=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},qr.apply(this,arguments)}function Of(e){var t=e.shape,n=t===void 0?lo:t,r=e.width,a=e.height,i=e.margin,s=e.label,o=e.item,l=e.itemIndex,u=e.fill,c=e.size,f=e.shapeStyle;return m.createElement("div",{className:"visx-legend-shape",style:{display:"flex",width:c?c(qr({},s)):r,height:c?c(qr({},s)):a,margin:i}},Z1({shape:n,item:o,itemIndex:l,label:s,width:r,height:a,fill:u,shapeStyle:f}))}Of.propTypes={itemIndex:w.number.isRequired,margin:w.oneOfType([w.string,w.number]),width:w.oneOfType([w.string,w.number]),height:w.oneOfType([w.string,w.number])};function kf(e){return e&&typeof e=="object"&&"value"in e&&typeof e.value<"u"?e.value:e}function Mf(e){return String(kf(e))}function Q1(e){var t=e.scale,n=e.labelFormat;return function(r,a){return{datum:r,index:a,text:""+n(r,a),value:t(r)}}}var J1=["className","style","scale","shape","domain","fill","size","labelFormat","labelTransform","shapeWidth","shapeHeight","shapeMargin","shapeStyle","labelAlign","labelFlex","labelMargin","itemMargin","direction","itemDirection","legendLabelProps","children"];function Rn(){return Rn=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Rn.apply(this,arguments)}function ex(e,t){if(e==null)return{};var n={},r=Object.keys(e),a,i;for(i=0;i<r.length;i++)a=r[i],!(t.indexOf(a)>=0)&&(n[a]=e[a]);return n}var tx={display:"flex"};function $f(e){var t=e.className,n=e.style,r=n===void 0?tx:n,a=e.scale,i=e.shape,s=e.domain,o=e.fill,l=o===void 0?Mf:o,u=e.size,c=u===void 0?Mf:u,f=e.labelFormat,h=f===void 0?kf:f,p=e.labelTransform,d=p===void 0?Q1:p,v=e.shapeWidth,x=v===void 0?15:v,g=e.shapeHeight,b=g===void 0?15:g,_=e.shapeMargin,M=_===void 0?"2px 4px 2px 0":_,y=e.shapeStyle,S=e.labelAlign,T=S===void 0?"left":S,$=e.labelFlex,k=$===void 0?"1":$,C=e.labelMargin,P=C===void 0?"0 4px":C,N=e.itemMargin,A=N===void 0?"0":N,R=e.direction,X=R===void 0?"column":R,U=e.itemDirection,Z=U===void 0?"row":U,ee=e.legendLabelProps,K=e.children,E=ex(e,J1),D=s||("domain"in a?a.domain():[]),B=d({scale:a,labelFormat:h}),W=D.map(B);return K?m.createElement(m.Fragment,null,K(W)):m.createElement("div",{className:ve("visx-legend",t),style:Rn({},r,{flexDirection:X})},W.map(function(F,I){return m.createElement(_f,Rn({key:"legend-"+F.text+"-"+I,margin:A,flexDirection:Z},E),m.createElement(Of,{shape:i,height:b,width:x,margin:M,item:D[I],itemIndex:I,label:F,fill:l,size:c,shapeStyle:y}),m.createElement(wf,Rn({label:F.text,flex:k,margin:P,align:T},ee)))}))}$f.propTypes={children:w.func,className:w.string,domain:w.array,shapeWidth:w.oneOfType([w.string,w.number]),shapeHeight:w.oneOfType([w.string,w.number]),shapeMargin:w.oneOfType([w.string,w.number]),labelAlign:w.string,labelFlex:w.oneOfType([w.string,w.number]),labelMargin:w.oneOfType([w.string,w.number]),itemMargin:w.oneOfType([w.string,w.number]),fill:w.func,size:w.func,shapeStyle:w.func};function Cf(e){return m.createElement($f,e)}const nx={chartData:"ChartDataProps[]",chartHeight:"number",chartWidth:"number",milestones:"MilestonesType[]",useAbsoluteLegend:"boolean",barTooltip:"(props: BarTooltipProps) => JSX.Element"};function co(e){const t=tn.useElementId(),{chartData:n=[],chartHeight:r=0,chartWidth:a=0,milestones:i,barTooltip:s,useAbsoluteLegend:o}=e,l={top:25,bottom:40,left:30,right:30};function u(T,$){const k=parseInt(T.slice(1,3),16),C=parseInt(T.slice(3,5),16),P=parseInt(T.slice(5,7),16);return`rgba(${k}, ${C}, ${P}, ${$})`}const c=n.map(T=>T.color),f=n.map(T=>T.label),h=n.map(T=>T.value),p=h.reduce((T,$)=>T+$,0),d=h.map(T=>Math.round(T/p*100*10)/10),v=Yt({domain:[0,100],nice:!0}),x=[n.reduce((T,$)=>Object.assign(T,{[$.label]:$.value}),{})],g=[n.reduce((T,$,k)=>Object.assign(T,{[$.label]:d[k]}),{})],b=Mn({domain:x,padding:.2}),_=Cr({domain:f.map(T=>`${T}: ${(o?x:g)[0][T]}%`),range:[...c]}),M=a-l.left-l.right,y=r-l.top-l.bottom;v.rangeRound([0,M]),b.rangeRound([y,0]);const S=T=>`${T}%`;return j.createElement("div",{style:{width:a},className:"position-relative"},j.createElement(Cf,{className:"fs-12 lh-18 gray600",scale:_,direction:"row",shape:"rect",shapeWidth:30,shapeHeight:4,shapeMargin:"0 5px 0 0",shapeStyle:()=>({borderRadius:"2px"}),labelMargin:"0",itemMargin:"0 10px 0 10px",style:{display:"flex",justifyContent:"center",fontSize:"16px"}}),i&&!(i!=null&&i.every(T=>T===void 0))&&j.createElement("div",{className:"position-absolute",style:{top:"26px",width:`${a-l.left-l.right}px`,margin:`0 ${l.left}px`,height:"12px"}},i.map(T=>j.createElement("i",{key:`${t.current}_${T.label}`,className:xf("sps-icon sps-icon-chevron-down fs-14 position-absolute",T.color),style:{left:`calc(${T.value}% - 5px)`}}))),j.createElement("svg",{width:a,height:r},j.createElement(rn,{top:l.top,left:l.left},j.createElement(xp,{data:g,keys:f,height:y,y:()=>"",xScale:v,yScale:b,color:_},T=>T.map($=>$.bars.map(k=>{let C=0;k.x===0||T.length-1===$.index?C=k.width-1.5:C=k.width-3,C<0&&(C=0);const P=`${t.current}_${k.key}`,N=k.key?k.key.toUpperCase():"",A=x[0][$.key]?x[0][$.key].toLocaleString():"";return j.createElement(rn,{key:`barstack-horizontal-${$.index}-${k.index}`},j.createElement(Cn,{id:`gradient-${$.index}`,vertical:!1,from:u(k.color,.5),to:k.color}),j.createElement("rect",{id:P,x:k.x!==0?k.x+1.5:k.x,y:k.y,width:C,height:20,fill:`url(#gradient-${$.index})`},s&&j.createElement(tn.SpsTooltip,{for:P},j.createElement(s,{label:N,absoluteValue:A,relativeValue:g[0][$.key]}))))}))),j.createElement(Xa,{top:y+6,tickFormat:S,scale:v,stroke:pe.colors.gray400,tickStroke:pe.colors.gray400,tickLength:4,tickLineProps:{y1:-11,y2:5},tickLabelProps:()=>({fill:pe.colors.gray400,fontSize:12,textAnchor:"middle"})}))),i&&!i.every(T=>T===void 0)&&j.createElement("footer",{className:"fs-12 lh-18 gray600 d-flex justify-content-center"},i.map(T=>j.createElement("span",{key:`${t.current}_${T.label}`,className:"d-flex align-items-center ml-3"},j.createElement("i",{className:xf("sps-icon sps-icon-chevron-down fs-14 mr-1",T.color)}),T.label,":",j.createElement("span",{className:"sps-text-semibold gray600 ml-1"},T.value,"%")))))}Object.assign(co,{props:nx,displayName:"SpsStackedHorizontalBarChart"});const Ef={basic:{label:"Basic",description:tt.code`
+                `}}}},Y1={barFillColor1:"string",barFillColor2:"string",barFillColorHover:"string",chartData:"ChartDataObject[]",chartHeight:"number",chartWidth:"number",barSize:"number",yAxis:"ChartAxis",xAxis:"ChartAxis",marginLeft:"number",xMaxValue:"number",xTickFormat:"(i: number) => string"};function io(e){const{barFillColor1:t=pe.colors.blue200,barFillColor2:n="#007DB880",barFillColorHover:r=pe.colors.blue300,chartData:a=[],chartHeight:i=0,chartWidth:s=0,barSize:o,yAxis:l={tickValues:"label"},xAxis:u={tickValues:"value",tickCount:3},marginLeft:c=30,xMaxValue:f,xTickFormat:h}=e,p={top:30,bottom:30,left:c,right:30},d=s-p.left-p.right,v=i-p.top-p.bottom,x=k=>k[u.tickValues],g=k=>k[l.tickValues],b=Mn({range:[0,v],round:!0,domain:a.map(g),padding:.4}),_=Yt({range:[0,d],round:!0,domain:[0,f||Math.max(...a.map(x))]}),M=(k,C)=>P=>k(C(P)),y=M(_,x),S=M(b,g),T=Fn(),$=Fn();return j.createElement("svg",{width:s,height:i,className:"sps-chart-wrapper"},j.createElement(gf,{scale:_,left:p.left,height:v,stroke:pe.colors.gray400,strokeOpacity:.2}),j.createElement(Cn,{id:$,from:"#D2D4D580",to:"#D2D4D5",vertical:!1}),j.createElement(Cn,{id:T,from:n,to:t,vertical:!1}),a.map((k,C)=>{const P=y(k),N=Fn();return j.createElement(rn,{key:C},j.createElement("rect",{x:p.left,y:S(k)+(o?(b.bandwidth()-o)/2:0),height:o||b.bandwidth(),width:d,fill:`url(#${$})`}),j.createElement(ul,{id:N,right:!0,radius:4,x:p.left,y:S(k)+(o?(b.bandwidth()-o)/2:0),height:o||b.bandwidth(),width:P,fill:`url(#${T})`,onMouseEnter:A=>{const R=A.target;R.style.fill=r},onMouseLeave:A=>{const R=A.target;R.style.fill=""}}),j.createElement(hf,{scale:b,left:p.left,hideTicks:!0,hideAxisLine:!0,stroke:pe.colors.gray300,numTicks:l.tickCount,tickLabelProps:()=>({textAnchor:"end",fontSize:"12px",fill:pe.colors.gray400,fontWeight:"200",width:p.left,verticalAnchor:"middle"})}),j.createElement(Xa,{top:v,scale:_,left:p.left,hideTicks:!0,numTicks:u.tickCount,tickFormat:h||void 0,stroke:pe.colors.gray300,tickLabelProps:()=>({textAnchor:"middle",fontSize:"12px",fontWeight:"200",fill:pe.colors.gray400})}),j.createElement(tn.SpsTooltip,{for:N},k.label))}))}Object.assign(io,{props:Y1,displayName:"SpsHorizontalBarChart"});function bf(e){var t,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=bf(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function xf(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=bf(e))&&(r&&(r+=" "),r+=t);return r}var V1=["flexDirection","alignItems","margin","display","children"];function ao(){return ao=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},ao.apply(this,arguments)}function G1(e,t){if(e==null)return{};var n={},r=Object.keys(e),a,i;for(i=0;i<r.length;i++)a=r[i],!(t.indexOf(a)>=0)&&(n[a]=e[a]);return n}function _f(e){var t=e.flexDirection,n=t===void 0?"row":t,r=e.alignItems,a=r===void 0?"center":r,i=e.margin,s=i===void 0?"0":i,o=e.display,l=o===void 0?"flex":o,u=e.children,c=G1(e,V1);return m.createElement("div",ao({className:"visx-legend-item",style:{display:l,alignItems:a,flexDirection:n,margin:s}},c),u)}_f.propTypes={alignItems:w.string,margin:w.oneOfType([w.string,w.number]),children:w.node,display:w.string};var K1=["flex","label","margin","align","children"];function oo(){return oo=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},oo.apply(this,arguments)}function X1(e,t){if(e==null)return{};var n={},r=Object.keys(e),a,i;for(i=0;i<r.length;i++)a=r[i],!(t.indexOf(a)>=0)&&(n[a]=e[a]);return n}function wf(e){var t=e.flex,n=t===void 0?"1":t,r=e.label,a=e.margin,i=a===void 0?"5px 0":a,s=e.align,o=s===void 0?"left":s,l=e.children,u=X1(e,K1);return m.createElement("div",oo({className:"visx-legend-label",style:{justifyContent:o,display:"flex",flex:n,margin:i}},u),l||r)}wf.propTypes={align:w.string,label:w.node,flex:w.oneOfType([w.string,w.number]),margin:w.oneOfType([w.string,w.number]),children:w.node};function so(){return so=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},so.apply(this,arguments)}function lo(e){var t=e.fill,n=e.width,r=e.height,a=e.style;return m.createElement("div",{style:so({width:n,height:r,background:t},a)})}lo.propTypes={fill:w.string,width:w.oneOfType([w.string,w.number]),height:w.oneOfType([w.string,w.number])};function Sf(e){var t=e.fill,n=e.width,r=e.height,a=e.style,i=typeof n=="string"||typeof n>"u"?0:n,s=typeof r=="string"||typeof r>"u"?0:r,o=Math.max(i,s),l=o/2;return m.createElement("svg",{width:o,height:o},m.createElement(Ge,{top:l,left:l},m.createElement("circle",{r:l,fill:t,style:a})))}Sf.propTypes={fill:w.string,width:w.oneOfType([w.string,w.number]),height:w.oneOfType([w.string,w.number])};function Tf(e){var t=e.fill,n=e.width,r=e.height,a=e.style,i=typeof r=="string"||typeof r>"u"?0:r,s=typeof(a==null?void 0:a.strokeWidth)=="number"?a==null?void 0:a.strokeWidth:2;return m.createElement("svg",{width:n,height:r},m.createElement(Ge,{top:i/2-s/2},m.createElement("line",{x1:0,x2:n,y1:0,y2:0,stroke:t,strokeWidth:s,style:a})))}Tf.propTypes={fill:w.string,width:w.oneOfType([w.string,w.number]),height:w.oneOfType([w.string,w.number])};function In(){return In=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},In.apply(this,arguments)}var uo=function(){};function Z1(e){var t=e.shape,n=t===void 0?"rect":t,r=e.fill,a=r===void 0?uo:r,i=e.size,s=i===void 0?uo:i,o=e.width,l=e.height,u=e.label,c=e.item,f=e.itemIndex,h=e.shapeStyle,p=h===void 0?uo:h,d={width:o,height:l,item:c,itemIndex:f,label:u,fill:a(In({},u)),size:s(In({},u)),style:p(In({},u))};return typeof n=="string"?n==="circle"?m.createElement(Sf,d):n==="line"?m.createElement(Tf,d):m.createElement(lo,d):m.isValidElement(n)?m.cloneElement(n,d):n?m.createElement(n,d):null}function qr(){return qr=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},qr.apply(this,arguments)}function Of(e){var t=e.shape,n=t===void 0?lo:t,r=e.width,a=e.height,i=e.margin,s=e.label,o=e.item,l=e.itemIndex,u=e.fill,c=e.size,f=e.shapeStyle;return m.createElement("div",{className:"visx-legend-shape",style:{display:"flex",width:c?c(qr({},s)):r,height:c?c(qr({},s)):a,margin:i}},Z1({shape:n,item:o,itemIndex:l,label:s,width:r,height:a,fill:u,shapeStyle:f}))}Of.propTypes={itemIndex:w.number.isRequired,margin:w.oneOfType([w.string,w.number]),width:w.oneOfType([w.string,w.number]),height:w.oneOfType([w.string,w.number])};function kf(e){return e&&typeof e=="object"&&"value"in e&&typeof e.value<"u"?e.value:e}function Mf(e){return String(kf(e))}function Q1(e){var t=e.scale,n=e.labelFormat;return function(r,a){return{datum:r,index:a,text:""+n(r,a),value:t(r)}}}var J1=["className","style","scale","shape","domain","fill","size","labelFormat","labelTransform","shapeWidth","shapeHeight","shapeMargin","shapeStyle","labelAlign","labelFlex","labelMargin","itemMargin","direction","itemDirection","legendLabelProps","children"];function Rn(){return Rn=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Rn.apply(this,arguments)}function ex(e,t){if(e==null)return{};var n={},r=Object.keys(e),a,i;for(i=0;i<r.length;i++)a=r[i],!(t.indexOf(a)>=0)&&(n[a]=e[a]);return n}var tx={display:"flex"};function $f(e){var t=e.className,n=e.style,r=n===void 0?tx:n,a=e.scale,i=e.shape,s=e.domain,o=e.fill,l=o===void 0?Mf:o,u=e.size,c=u===void 0?Mf:u,f=e.labelFormat,h=f===void 0?kf:f,p=e.labelTransform,d=p===void 0?Q1:p,v=e.shapeWidth,x=v===void 0?15:v,g=e.shapeHeight,b=g===void 0?15:g,_=e.shapeMargin,M=_===void 0?"2px 4px 2px 0":_,y=e.shapeStyle,S=e.labelAlign,T=S===void 0?"left":S,$=e.labelFlex,k=$===void 0?"1":$,C=e.labelMargin,P=C===void 0?"0 4px":C,N=e.itemMargin,A=N===void 0?"0":N,R=e.direction,X=R===void 0?"column":R,U=e.itemDirection,Z=U===void 0?"row":U,ee=e.legendLabelProps,K=e.children,E=ex(e,J1),D=s||("domain"in a?a.domain():[]),B=d({scale:a,labelFormat:h}),W=D.map(B);return K?m.createElement(m.Fragment,null,K(W)):m.createElement("div",{className:ve("visx-legend",t),style:Rn({},r,{flexDirection:X})},W.map(function(F,I){return m.createElement(_f,Rn({key:"legend-"+F.text+"-"+I,margin:A,flexDirection:Z},E),m.createElement(Of,{shape:i,height:b,width:x,margin:M,item:D[I],itemIndex:I,label:F,fill:l,size:c,shapeStyle:y}),m.createElement(wf,Rn({label:F.text,flex:k,margin:P,align:T},ee)))}))}$f.propTypes={children:w.func,className:w.string,domain:w.array,shapeWidth:w.oneOfType([w.string,w.number]),shapeHeight:w.oneOfType([w.string,w.number]),shapeMargin:w.oneOfType([w.string,w.number]),labelAlign:w.string,labelFlex:w.oneOfType([w.string,w.number]),labelMargin:w.oneOfType([w.string,w.number]),itemMargin:w.oneOfType([w.string,w.number]),fill:w.func,size:w.func,shapeStyle:w.func};function Cf(e){return m.createElement($f,e)}const nx={chartData:"ChartDataProps[]",chartHeight:"number",chartWidth:"number",milestones:"MilestonesType[]",useAbsoluteLegend:"boolean",barTooltip:"(props: BarTooltipProps) => JSX.Element"};function co(e){const t=tn.useElementId(),{chartData:n=[],chartHeight:r=0,chartWidth:a=0,milestones:i,barTooltip:s,useAbsoluteLegend:o}=e,l={top:25,bottom:40,left:30,right:30};function u(T,$){const k=parseInt(T.slice(1,3),16),C=parseInt(T.slice(3,5),16),P=parseInt(T.slice(5,7),16);return`rgba(${k}, ${C}, ${P}, ${$})`}const c=n.map(T=>T.color),f=n.map(T=>T.label),h=n.map(T=>T.value),p=h.reduce((T,$)=>T+$,0),d=h.map(T=>Math.round(T/p*100*10)/10),v=Yt({domain:[0,100],nice:!0}),x=[n.reduce((T,$)=>Object.assign(T,{[$.label]:$.value}),{})],g=[n.reduce((T,$,k)=>Object.assign(T,{[$.label]:d[k]}),{})],b=Mn({domain:x,padding:.2}),_=Cr({domain:f.map(T=>`${T}: ${(o?x:g)[0][T]}%`),range:[...c]}),M=a-l.left-l.right,y=r-l.top-l.bottom;v.rangeRound([0,M]),b.rangeRound([y,0]);const S=T=>`${T}%`;return j.createElement("div",{style:{width:a},className:"position-relative"},j.createElement(Cf,{className:"fs-12 lh-18 gray600",scale:_,direction:"row",shape:"rect",shapeWidth:30,shapeHeight:4,shapeMargin:"0 5px 0 0",shapeStyle:()=>({borderRadius:"2px"}),labelMargin:"0",itemMargin:"0 10px 0 10px",style:{display:"flex",justifyContent:"center",fontSize:"16px"}}),i&&!(i!=null&&i.every(T=>T===void 0))&&j.createElement("div",{className:"position-absolute",style:{top:"26px",width:`${a-l.left-l.right}px`,margin:`0 ${l.left}px`,height:"12px"}},i.map(T=>j.createElement("i",{key:`${t.current}_${T.label}`,className:xf("sps-icon sps-icon-chevron-down fs-14 position-absolute",T.color),style:{left:`calc(${T.value}% - 5px)`}}))),j.createElement("svg",{width:a,height:r},j.createElement(rn,{top:l.top,left:l.left},j.createElement(xp,{data:g,keys:f,height:y,y:()=>"",xScale:v,yScale:b,color:_},T=>T.map($=>$.bars.map(k=>{let C=0;k.x===0||T.length-1===$.index?C=k.width-1.5:C=k.width-3,C<0&&(C=0);const P=`${t.current}_${k.key}`,N=k.key?k.key.toUpperCase():"",A=x[0][$.key]?x[0][$.key].toLocaleString():"";return j.createElement(rn,{key:`barstack-horizontal-${$.index}-${k.index}`},j.createElement(Cn,{id:`gradient-${$.index}`,vertical:!1,from:u(k.color,.5),to:k.color}),j.createElement("rect",{id:P,x:k.x!==0?k.x+1.5:k.x,y:k.y,width:C,height:20,fill:`url(#gradient-${$.index})`},s&&j.createElement(tn.SpsTooltip,{for:P},j.createElement(s,{label:N,absoluteValue:A,relativeValue:g[0][$.key]}))))}))),j.createElement(Xa,{top:y+6,tickFormat:S,scale:v,stroke:pe.colors.gray400,tickStroke:pe.colors.gray400,tickLength:4,tickLineProps:{y1:-11,y2:5},tickLabelProps:()=>({fill:pe.colors.gray400,fontSize:12,textAnchor:"middle"})}))),i&&!i.every(T=>T===void 0)&&j.createElement("footer",{className:"fs-12 lh-18 gray600 d-flex justify-content-center"},i.map(T=>j.createElement("span",{key:`${t.current}_${T.label}`,className:"d-flex align-items-center ml-3"},j.createElement("i",{className:xf("sps-icon sps-icon-chevron-down fs-14 mr-1",T.color)}),T.label,":",j.createElement("span",{className:"sps-text-semibold gray600 ml-1"},T.value,"%")))))}Object.assign(co,{props:nx,displayName:"SpsStackedHorizontalBarChart"});const Ef={basic:{label:"Basic",description:tt.code`
             <p>Stacked horizontal bar chart example.</p>
         `,examples:{basic:{react:tt.code`
                     import { SpsStackedHorizontalBarChart } from "@spscommerce/ds-react-charts";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react-charts",
   "description": "SPS Design System React Chart components",
-  "version": "8.31.1",
+  "version": "8.31.2",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react-charts",
@@ -37,9 +37,9 @@
     "@spscommerce/utils": "^7.0.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@spscommerce/ds-react": "8.31.1",
-    "@spscommerce/ds-shared": "8.31.1",
-    "@spscommerce/ds-colors": "8.31.1"
+    "@spscommerce/ds-colors": "8.31.2",
+    "@spscommerce/ds-react": "8.31.2",
+    "@spscommerce/ds-shared": "8.31.2"
   },
   "devDependencies": {
     "@spscommerce/utils": "^7.0.0",
@@ -50,10 +50,10 @@
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@spscommerce/ds-colors": "8.31.1",
-    "@spscommerce/ds-react": "8.31.1",
-    "@spscommerce/ds-shared": "8.31.1",
-    "test": "8.31.1"
+    "@spscommerce/ds-colors": "8.31.2",
+    "@spscommerce/ds-react": "8.31.2",
+    "@spscommerce/ds-shared": "8.31.2",
+    "test": "8.31.2"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",