@automattic/charts 0.32.0 → 0.33.0

package/CHANGELOG.md

@@ -5,18 +5,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.33.0] - 2025-09-08
+### Added
+- Add ability to control percentage vs. value display. [#45052]
+
+### Changed
+- LeaderboardChart: Use GlobalContextProvider theme for colors. [#45067]
+- Update package dependencies. [#45027] [#45097]
+- Use `tsup` for builds. [#45051]
+
+### Fixed
+- Allow type-checking of tests and stories. [#45082]
+
 ## [0.32.0] - 2025-09-02
 ### Added
-- Charts: adds controls for label visibility [#45040]
+- Add controls for label visibility. [#45040]
 
 ### Changed
-- Charts: format percentage values to be prettier [#45032]
-- Charts: Use a global context provider for theme configuration in all stories [#45028]
-- Charts: use getStringWidth for label size calculations [#45030]
-- Fix the conversion-funnel-chart component exportation [#45033]
+- Fix the conversion-funnel-chart component export. [#45033]
+- Format percentage values to be prettier. [#45032]
+- Use a global context provider for theme configuration in all stories. [#45028]
+- Use `getStringWidth` for label size calculations. [#45030]
 
 ### Fixed
-- All charts were affected due to z-index. [#45043]
+- Prevent z-index issue across all charts. [#45043]
 
 ## [0.31.0] - 2025-09-01
 ### Added
@@ -418,6 +430,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[0.33.0]: https://github.com/Automattic/charts/compare/v0.32.0...v0.33.0
 [0.32.0]: https://github.com/Automattic/charts/compare/v0.31.0...v0.32.0
 [0.31.0]: https://github.com/Automattic/charts/compare/v0.30.0...v0.31.0
 [0.30.0]: https://github.com/Automattic/charts/compare/v0.29.0...v0.30.0

package/dist/bar-chart.module-BGQPECGS.scss

@@ -0,0 +1,12 @@
+.bar-chart {
+	display: flex;
+	flex-direction: column;
+
+	svg {
+		overflow: visible;
+	}
+
+	&-legend {
+		margin-top: 1rem;
+	}
+}

package/dist/base-legend.module-YZJXJR45.scss

@@ -0,0 +1,76 @@
+.legend {
+
+	&--horizontal {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 16px;
+	}
+
+	&--vertical {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		&.legend--alignment-start {
+			align-items: flex-start;
+		}
+
+		&.legend--alignment-center {
+			align-items: center;
+		}
+
+		&.legend--alignment-end {
+			align-items: flex-end;
+		}
+	}
+
+	// Position-based styles
+	&--position-top {
+		position: relative;
+
+		&.legend--alignment-start {
+			justify-content: flex-start;
+		}
+
+		&.legend--alignment-center {
+			justify-content: center;
+		}
+
+		&.legend--alignment-end {
+			justify-content: flex-end;
+		}
+	}
+
+	&--position-bottom {
+		position: relative;
+
+		&.legend--alignment-start {
+			justify-content: flex-start;
+		}
+
+		&.legend--alignment-center {
+			justify-content: center;
+		}
+
+		&.legend--alignment-end {
+			justify-content: flex-end;
+		}
+	}
+}
+
+.legend-item {
+	display: flex;
+	align-items: center;
+	font-size: 0.875rem;
+}
+
+.legend-item-label {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.legend-item-value {
+	font-weight: 500;
+}

package/dist/{types/components/tooltip/base-tooltip.d.ts → base-tooltip-Dlq8KmQA.d.cts}

@@ -29,4 +29,4 @@ type CustomTooltip = {
 type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
 declare const BaseTooltip: ({ data, top, left, component: Component, children, className, }: BaseTooltipProps) => react_jsx_runtime.JSX.Element;
 
-export { BaseTooltip, type BaseTooltipProps, type TooltipData };
+export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };

package/dist/base-tooltip-Dlq8KmQA.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, ComponentType, ReactNode } from 'react';
+
+type TooltipData = {
+    label: string;
+    value: number;
+    valueDisplay?: string;
+};
+type TooltipComponentProps = {
+    data: TooltipData;
+    className?: string;
+};
+type TooltipCommonProps = {
+    top: number;
+    left: number;
+    style?: CSSProperties;
+    className?: string;
+};
+type DefaultDataTooltip = {
+    data: TooltipData;
+    component?: ComponentType<TooltipComponentProps>;
+    children?: never;
+};
+type CustomTooltip = {
+    children: ReactNode;
+    data?: never;
+    component?: never;
+};
+type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
+declare const BaseTooltip: ({ data, top, left, component: Component, children, className, }: BaseTooltipProps) => react_jsx_runtime.JSX.Element;
+
+export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };

package/dist/base-tooltip.module-NILZYBVJ.scss

@@ -0,0 +1,11 @@
+.tooltip {
+	padding: 0.5rem;
+	background-color: rgba(0, 0, 0, 0.85);
+	color: #fff;
+	border-radius: 4px;
+	font-size: 14px;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	position: absolute;
+	pointer-events: none;
+	transform: translate(-50%, -100%);
+}

package/dist/chunk-253F4WJT.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _chunkBNAXWJSFcjs = require('./chunk-BNAXWJSF.cjs');var _chunkRS3D7LRGcjs = require('./chunk-RS3D7LRG.cjs');var _chunk4CPALWEXcjs = require('./chunk-4CPALWEX.cjs');var _chunkHJYSGVCMcjs = require('./chunk-HJYSGVCM.cjs');var _chunk76MUGFRKcjs = require('./chunk-76MUGFRK.cjs');var _chunkSJSVNSI5cjs = require('./chunk-SJSVNSI5.cjs');var _group = require('@visx/group');var _shape = require('@visx/shape');var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);var _react = require('react');var p="./pie-chart.module-LOP3Y52M.scss";var _jsxruntime = require('react/jsx-runtime');var we=o=>{if(!o.length)return{isValid:!1,message:"No data available"};if(o.some(r=>r.percentage<0||r.value<0))return{isValid:!1,message:"Invalid data: Negative values are not allowed"};let n=o.reduce((r,i)=>r+i.percentage,0);return Math.abs(n-100)>.01?{isValid:!1,message:"Invalid percentage total: Must equal 100"}:{isValid:!0,message:""}},te=({data:o,chartId:C,withTooltips:n=!1,className:r,showLegend:i=!1,legendOrientation:oe="horizontal",legendPosition:g="bottom",legendAlignment:ae="center",legendShape:re="circle",size:D,thickness:h=1,padding:ne=20,gapScale:P=0,cornerScale:d=0,showLabels:ie=!0,legendValueDisplay:L="percentage",children:se=null})=>{let f=_chunkSJSVNSI5cjs.u.call(void 0, ),v=_chunkSJSVNSI5cjs.q.call(void 0, C),[le,pe]=_chunkSJSVNSI5cjs.y.call(void 0, ),{onMouseMove:he,onMouseLeave:de,tooltipOpen:me,tooltipData:I,tooltipLeft:ce,tooltipTop:ue}=_chunkSJSVNSI5cjs.b.call(void 0, {withTooltips:n}),Ce=_react.useMemo.call(void 0, ()=>({showValues:!0,legendValueDisplay:L}),[L]),ge=_chunk76MUGFRKcjs.d.call(void 0, o,Ce),{isValid:S,message:Pe}=we(o),{svgChildren:fe,htmlChildren:ve,otherChildren:xe}=_chunkBNAXWJSFcjs.c.call(void 0, se,"PieChart"),be=_react.useMemo.call(void 0, ()=>({thickness:h,gapScale:P,cornerScale:d}),[h,P,d]);_chunkSJSVNSI5cjs.r.call(void 0, {chartId:v,legendItems:ge,chartType:"pie",isDataValid:S,metadata:be});let{resolveGroupColor:Me}=_chunkSJSVNSI5cjs.p.call(void 0, );if(!S)return _jsxruntime.jsx.call(void 0, "div",{className:_clsx2.default.call(void 0, "pie-chart",p["pie-chart"],r),children:_jsxruntime.jsx.call(void 0, "div",{className:p["error-message"],children:Pe})});let s=D,H=D,l=i&&g==="top"?H-pe:H,ye=Math.min(s,l)/2,Re=s/2,Ve=l/2,Ge=P*(2*Math.PI/o.length),m=ye-ne,N=h===0?0:m*(1-h),De=(m-N)/2,Le=d?Math.min(d*m,De):0,Ie=o.map((a,t)=>({...a,index:t})),B={value:a=>a.value,fill:({group:a,index:t,color:x})=>Me({group:a,index:t,overrideColor:x})};return _jsxruntime.jsx.call(void 0, _chunk76MUGFRKcjs.a.Provider,{value:{chartId:v,chartWidth:s,chartHeight:l},children:_jsxruntime.jsxs.call(void 0, "div",{className:_clsx2.default.call(void 0, "pie-chart",p["pie-chart"],r),style:{display:"flex",flexDirection:i&&g==="top"?"column-reverse":"column"},children:[_jsxruntime.jsx.call(void 0, "svg",{viewBox:`0 0 ${s} ${l}`,preserveAspectRatio:"xMidYMid meet",width:s,height:l,children:_jsxruntime.jsxs.call(void 0, _group.Group,{top:Ve,left:Re,children:[_jsxruntime.jsx.call(void 0, _shape.Pie,{data:Ie,pieValue:B.value,outerRadius:m,innerRadius:N,padAngle:Ge,cornerRadius:Le,children:a=>a.arcs.map((t,x)=>{let[T,W]=a.path.centroid(t),Se=t.endAngle-t.startAngle>=.25,He=Be=>he(Be,t.data),b={d:a.path(t)||"",fill:B.fill(t.data)};n&&(b.onMouseMove=He,b.onMouseLeave=de);let M=12,Ne=_chunkRS3D7LRGcjs.c.call(void 0, t.data.label,{fontSize:M}),E=6,A=Ne+E*2,w=M+E*2;return _jsxruntime.jsxs.call(void 0, "g",{children:[_jsxruntime.jsx.call(void 0, "path",{...b}),ie&&Se&&_jsxruntime.jsxs.call(void 0, "g",{children:[f.labelBackgroundColor&&_jsxruntime.jsx.call(void 0, "rect",{x:T-A/2,y:W-w/2,width:A,height:w,fill:f.labelBackgroundColor,rx:4,ry:4,pointerEvents:"none"}),_jsxruntime.jsx.call(void 0, "text",{x:T,y:W,dy:".33em",fill:f.labelTextColor||"#333",fontSize:M,textAnchor:"middle",pointerEvents:"none",children:t.data.label})]})]},`arc-${x}`)})}),fe]})}),i&&_jsxruntime.jsx.call(void 0, _chunk76MUGFRKcjs.c,{orientation:oe,position:g,alignment:ae,className:p["pie-chart-legend"],shape:re,ref:le,chartId:v}),n&&me&&I&&_jsxruntime.jsx.call(void 0, _chunkHJYSGVCMcjs.a,{data:I,top:ue||0,left:ce||0,style:{transform:"translate(-50%, -100%)"}}),ve,xe]})})},G=o=>_react.useContext.call(void 0, _chunkSJSVNSI5cjs.n)?_jsxruntime.jsx.call(void 0, te,{...o}):_jsxruntime.jsx.call(void 0, _chunkSJSVNSI5cjs.o,{children:_jsxruntime.jsx.call(void 0, te,{...o})});G.displayName="PieChart";var Oe=_chunkSJSVNSI5cjs.c.call(void 0, G,{Legend:_chunk76MUGFRKcjs.c,SVG:_chunkBNAXWJSFcjs.a,HTML:_chunkBNAXWJSFcjs.b}),ke= exports.b =_chunkSJSVNSI5cjs.c.call(void 0, _chunk4CPALWEXcjs.a.call(void 0, G),{Legend:_chunk76MUGFRKcjs.c,SVG:_chunkBNAXWJSFcjs.a,HTML:_chunkBNAXWJSFcjs.b});exports.a = Oe; exports.b = ke;
+//# sourceMappingURL=chunk-253F4WJT.cjs.map

package/dist/chunk-253F4WJT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-253F4WJT.cjs","../src/components/pie-chart/pie-chart.tsx"],"names":["validateData","data","item","totalPercentage","sum","PieChartInternal","providedChartId","withTooltips","className","showLegend","legendOrientation","legendPosition","legendAlignment","legendShape","size","thickness","padding","gapScale","cornerScale","showLabels","legendValueDisplay","children","providerTheme","useGlobalChartsTheme","chartId","useChartId","legendRef","legendHeight","useElementHeight","onMouseMove","onMouseLeave","tooltipOpen","tooltipData","tooltipLeft","tooltipTop","useChartMouseHandler","legendOptions","useMemo","legendItems","useChartLegendItems","isValid","message","svgChildren","htmlChildren","otherChildren","useChartChildren","chartMetadata","useChartRegistration","resolveGroupColor","useGlobalChartsContext","jsx","clsx","pie_chart_module_default","width","height","adjustedHeight","radius","centerX","centerY","padAngle","outerRadius","innerRadius","maxCornerRadius","cornerRadius","dataWithIndex","d","index","accessors","group","overrideColor","SingleChartContext","jsxs"],"mappings":"AAAA,iOAAsD,wDAAyC,wDAAyC,wDAAyC,wDAAkD,wDAAiG,oCCA9S,oCACF,wEACH,8BACmB,IDHmb,CAAC,CAAC,kCAAkC,CCsLvf,+CAAA,IA5FEA,EAAAA,CAAiBC,CAAAA,EAAiC,CACvD,EAAA,CAAK,CAAEA,CAAAA,CAAK,MAAA,CACX,MAAO,CAAE,OAAA,CAAS,CAAA,CAAA,CAAO,OAAA,CAAS,mBAAoB,CAAA,CAKvD,EAAA,CAD0BA,CAAAA,CAAK,IAAA,CAAMC,CAAAA,EAAQA,CAAAA,CAAK,UAAA,CAAa,CAAA,EAAKA,CAAAA,CAAK,KAAA,CAAQ,CAAE,CAAA,CAElF,MAAO,CAAE,OAAA,CAAS,CAAA,CAAA,CAAO,OAAA,CAAS,+CAAgD,CAAA,CAInF,IAAMC,CAAAA,CAAkBF,CAAAA,CAAK,MAAA,CAAQ,CAAEG,CAAAA,CAAKF,CAAAA,CAAAA,EAAUE,CAAAA,CAAMF,CAAAA,CAAK,UAAA,CAAY,CAAE,CAAA,CAC/E,OAAK,IAAA,CAAK,GAAA,CAAKC,CAAAA,CAAkB,GAAI,CAAA,CAAI,GAAA,CAEjC,CAAE,OAAA,CAAS,CAAA,CAAA,CAAO,OAAA,CAAS,0CAA2C,CAAA,CAGvE,CAAE,OAAA,CAAS,CAAA,CAAA,CAAM,OAAA,CAAS,EAAG,CACrC,CAAA,CAQME,EAAAA,CAAmB,CAAE,CAC1B,IAAA,CAAAJ,CAAAA,CACA,OAAA,CAASK,CAAAA,CACT,YAAA,CAAAC,CAAAA,CAAe,CAAA,CAAA,CACf,SAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,CAAAA,CAAa,CAAA,CAAA,CACb,iBAAA,CAAAC,EAAAA,CAAoB,YAAA,CACpB,cAAA,CAAAC,CAAAA,CAAiB,QAAA,CACjB,eAAA,CAAAC,EAAAA,CAAkB,QAAA,CAClB,WAAA,CAAAC,EAAAA,CAAc,QAAA,CACd,IAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CAAY,CAAA,CACZ,OAAA,CAAAC,EAAAA,CAAU,EAAA,CACV,QAAA,CAAAC,CAAAA,CAAW,CAAA,CACX,WAAA,CAAAC,CAAAA,CAAc,CAAA,CACd,UAAA,CAAAC,EAAAA,CAAa,CAAA,CAAA,CACb,kBAAA,CAAAC,CAAAA,CAAqB,YAAA,CACrB,QAAA,CAAAC,EAAAA,CAAW,IACZ,CAAA,CAAA,EAAsB,CACrB,IAAMC,CAAAA,CAAgBC,iCAAAA,CAAqB,CACrCC,CAAAA,CAAUC,iCAAAA,CAA4B,CAAA,CACtC,CAAEC,EAAAA,CAAWC,EAAa,CAAA,CAAIC,iCAAAA,CAAmC,CACjE,CAAE,WAAA,CAAAC,EAAAA,CAAa,YAAA,CAAAC,EAAAA,CAAc,WAAA,CAAAC,EAAAA,CAAa,WAAA,CAAAC,CAAAA,CAAa,WAAA,CAAAC,EAAAA,CAAa,UAAA,CAAAC,EAAW,CAAA,CACpFC,iCAAAA,CACC,YAAA,CAAA5B,CACD,CAAE,CAAA,CAGG6B,EAAAA,CAAgBC,4BAAAA,CACrB,CAAA,EAAA,CAAQ,CAAE,UAAA,CAAY,CAAA,CAAA,CAAM,kBAAA,CAAAjB,CAAmB,CAAA,CAAA,CAC/C,CAAEA,CAAmB,CACtB,CAAA,CAGMkB,EAAAA,CAAcC,iCAAAA,CAAqBtC,CAAMmC,EAAc,CAAA,CAEvD,CAAE,OAAA,CAAAI,CAAAA,CAAS,OAAA,CAAAC,EAAQ,CAAA,CAAIzC,EAAAA,CAAcC,CAAK,CAAA,CAG1C,CAAE,WAAA,CAAAyC,EAAAA,CAAa,YAAA,CAAAC,EAAAA,CAAc,aAAA,CAAAC,EAAc,CAAA,CAAIC,iCAAAA,EAAkBxB,CAAU,UAAW,CAAA,CAGtFyB,EAAAA,CAAgBT,4BAAAA,CACrB,CAAA,EAAA,CAAQ,CACP,SAAA,CAAAtB,CAAAA,CACA,QAAA,CAAAE,CAAAA,CACA,WAAA,CAAAC,CACD,CAAA,CAAA,CACA,CAAEH,CAAAA,CAAWE,CAAAA,CAAUC,CAAY,CACpC,CAAA,CAGA6B,iCAAAA,CACC,OAAA,CAAAvB,CAAAA,CACA,WAAA,CAAAc,EAAAA,CACA,SAAA,CAAW,KAAA,CACX,WAAA,CAAaE,CAAAA,CACb,QAAA,CAAUM,EACX,CAAE,CAAA,CAEF,GAAM,CAAE,iBAAA,CAAAE,EAAkB,CAAA,CAAIC,iCAAAA,CAAuB,CAErD,EAAA,CAAK,CAAET,CAAAA,CACN,OACCU,6BAAAA,KAAC,CAAA,CAAI,SAAA,CAAYC,4BAAAA,WAAM,CAAaC,CAAAA,CAAQ,WAAY,CAAA,CAAG5C,CAAU,CAAA,CACpE,QAAA,CAAA0C,6BAAAA,KAAC,CAAA,CAAI,SAAA,CAAYE,CAAAA,CAAQ,eAAgB,CAAA,CAAM,QAAA,CAAAX,EAAAA,CAAS,CAAA,CACzD,CAAA,CAIF,IAAMY,CAAAA,CAAQvC,CAAAA,CACRwC,CAAAA,CAASxC,CAAAA,CACTyC,CAAAA,CAAiB9C,CAAAA,EAAcE,CAAAA,GAAmB,KAAA,CAAQ2C,CAAAA,CAAS3B,EAAAA,CAAe2B,CAAAA,CAGlFE,EAAAA,CAAS,IAAA,CAAK,GAAA,CAAKH,CAAAA,CAAOE,CAAe,CAAA,CAAI,CAAA,CAG7CE,EAAAA,CAAUJ,CAAAA,CAAQ,CAAA,CAClBK,EAAAA,CAAUH,CAAAA,CAAiB,CAAA,CAG3BI,EAAAA,CAAW1C,CAAAA,CAAAA,CAAe,CAAA,CAAI,IAAA,CAAK,EAAA,CAAOhB,CAAAA,CAAK,MAAA,CAAA,CAE/C2D,CAAAA,CAAcJ,EAAAA,CAASxC,EAAAA,CACvB6C,CAAAA,CAAc9C,CAAAA,GAAc,CAAA,CAAI,CAAA,CAAI6C,CAAAA,CAAAA,CAAgB,CAAA,CAAI7C,CAAAA,CAAAA,CAExD+C,EAAAA,CAAAA,CAAoBF,CAAAA,CAAcC,CAAAA,CAAAA,CAAgB,CAAA,CAClDE,EAAAA,CAAe7C,CAAAA,CAAc,IAAA,CAAK,GAAA,CAAKA,CAAAA,CAAc0C,CAAAA,CAAaE,EAAgB,CAAA,CAAI,CAAA,CAGtFE,EAAAA,CAAgB/D,CAAAA,CAAK,GAAA,CAAK,CAAEgE,CAAAA,CAAGC,CAAAA,CAAAA,EAAAA,CAAa,CACjD,GAAGD,CAAAA,CACH,KAAA,CAAAC,CACD,CAAA,CAAI,CAAA,CAEEC,CAAAA,CAAY,CACjB,KAAA,CAASF,CAAAA,EAA4BA,CAAAA,CAAE,KAAA,CAEvC,IAAA,CAAM,CAAE,CAAE,KAAA,CAAAG,CAAAA,CAAO,KAAA,CAAAF,CAAAA,CAAO,KAAA,CAAOG,CAAc,CAAA,CAAA,EAC5CrB,EAAAA,CAAmB,CAAE,KAAA,CAAAoB,CAAAA,CAAO,KAAA,CAAAF,CAAAA,CAAO,aAAA,CAAAG,CAAc,CAAE,CACrD,CAAA,CAEA,OACCnB,6BAAAA,mBAACoB,CAAmB,QAAA,CAAnB,CACA,KAAA,CAAQ,CACP,OAAA,CAAA9C,CAAAA,CACA,UAAA,CAAY6B,CAAAA,CACZ,WAAA,CAAaE,CACd,CAAA,CAEA,QAAA,CAAAgB,8BAAAA,KAAC,CAAA,CACA,SAAA,CAAYpB,4BAAAA,WAAM,CAAaC,CAAAA,CAAQ,WAAY,CAAA,CAAG5C,CAAU,CAAA,CAChE,KAAA,CAAQ,CACP,OAAA,CAAS,MAAA,CACT,aAAA,CAAeC,CAAAA,EAAcE,CAAAA,GAAmB,KAAA,CAAQ,gBAAA,CAAmB,QAC5E,CAAA,CAEA,QAAA,CAAA,CAAAuC,6BAAAA,KAAC,CAAA,CACA,OAAA,CAAU,CAAA,IAAA,EAAQG,CAAM,CAAA,CAAA,EAAKE,CAAe,CAAA,CAAA","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-253F4WJT.cjs","sourcesContent":[null,"import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport clsx from 'clsx';\nimport { useContext, useMemo } from 'react';\nimport { useChartMouseHandler, useElementHeight } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n} from '../../providers/chart-context';\nimport { GlobalChartsContext } from '../../providers/chart-context/global-charts-provider';\nimport { attachSubComponents } from '../../utils';\nimport { getStringWidth } from '../../visx/text';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive, ResponsiveConfig } from '../private/with-responsive';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-chart.module.scss';\nimport type { BaseChartProps, DataPointPercentage, Optional } from '../../types';\nimport type { LegendValueDisplay } from '../legend';\nimport type { ChartComponentWithComposition } from '../private/chart-composition';\nimport type { SVGProps, MouseEvent, ReactNode, FC } from 'react';\n\nexport interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.\n\t */\n\tinnerRadius?: number;\n\n\t/**\n\t * Add padding to the chart\n\t */\n\tpadding?: number;\n\n\t/**\n\t * Thickness of the pie chart.\n\t * A value between 0 and 1, where 0 means no thickness\n\t * and 1 means the maximum thickness.\n\t */\n\tthickness?: number;\n\n\t/**\n\t * Scale of the gap between groups in the pie chart\n\t * A value between 0 and 1, where 0 means no gap.\n\t */\n\tgapScale?: number;\n\n\t/**\n\t * Scale of the corner radius for the pie chart segments.\n\t * A value between 0 and 1, where 0 means no corner radius.\n\t */\n\tcornerScale?: number;\n\n\t/**\n\t * Whether to show labels on pie segments. Defaults to true.\n\t */\n\tshowLabels?: boolean;\n\n\t/**\n\t * What type of value to display in the legend when showValues is true.\n\t * - 'percentage': Shows percentage values (e.g., \"23%\") [default]\n\t * - 'value': Shows raw numeric values (e.g., \"30000\")\n\t * - 'valueDisplay': Shows formatted values (e.g., \"30K\")\n\t * - 'none': Shows no values, only labels\n\t */\n\tlegendValueDisplay?: LegendValueDisplay;\n\n\t/**\n\t * Use the children prop to render additional elements on the chart.\n\t */\n\tchildren?: ReactNode;\n}\n\n// Base props type with optional responsive properties\ntype PieChartBaseProps = Optional< PieChartProps, 'size' >;\n\n// Composition API types\ntype PieChartComponent = ChartComponentWithComposition< PieChartBaseProps >;\ntype PieChartResponsiveComponent = ChartComponentWithComposition<\n\tPieChartBaseProps & ResponsiveConfig\n>;\n\n/**\n * Validates the pie chart data\n * @param data - The data to validate\n * @return Object containing validation result and error message\n */\nconst validateData = ( data: DataPointPercentage[] ) => {\n\tif ( ! data.length ) {\n\t\treturn { isValid: false, message: 'No data available' };\n\t}\n\n\t// Check for negative values\n\tconst hasNegativeValues = data.some( item => item.percentage < 0 || item.value < 0 );\n\tif ( hasNegativeValues ) {\n\t\treturn { isValid: false, message: 'Invalid data: Negative values are not allowed' };\n\t}\n\n\t// Validate total percentage\n\tconst totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );\n\tif ( Math.abs( totalPercentage - 100 ) > 0.01 ) {\n\t\t// Using small epsilon for floating point comparison\n\t\treturn { isValid: false, message: 'Invalid percentage total: Must equal 100' };\n\t}\n\n\treturn { isValid: true, message: '' };\n};\n\n/**\n * Renders a pie or donut chart using the provided data.\n *\n * @param {PieChartProps} props - Component props\n * @return {JSX.Element} The rendered chart component\n */\nconst PieChartInternal = ( {\n\tdata,\n\tchartId: providedChartId,\n\twithTooltips = false,\n\tclassName,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendShape = 'circle',\n\tsize,\n\tthickness = 1,\n\tpadding = 20,\n\tgapScale = 0,\n\tcornerScale = 0,\n\tshowLabels = true,\n\tlegendValueDisplay = 'percentage',\n\tchildren = null,\n}: PieChartProps ) => {\n\tconst providerTheme = useGlobalChartsTheme();\n\tconst chartId = useChartId( providedChartId );\n\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\tconst { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } =\n\t\tuseChartMouseHandler( {\n\t\t\twithTooltips,\n\t\t} );\n\n\t// Memoize legend options to prevent unnecessary re-calculations\n\tconst legendOptions = useMemo(\n\t\t() => ( { showValues: true, legendValueDisplay } ),\n\t\t[ legendValueDisplay ]\n\t);\n\n\t// Create legend items using the reusable hook\n\tconst legendItems = useChartLegendItems( data, legendOptions );\n\n\tconst { isValid, message } = validateData( data );\n\n\t// Process children to extract compound components\n\tconst { svgChildren, htmlChildren, otherChildren } = useChartChildren( children, 'PieChart' );\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\tthickness,\n\t\t\tgapScale,\n\t\t\tcornerScale,\n\t\t} ),\n\t\t[ thickness, gapScale, cornerScale ]\n\t);\n\n\t// Register chart with context only if data is valid\n\tuseChartRegistration( {\n\t\tchartId,\n\t\tlegendItems,\n\t\tchartType: 'pie',\n\t\tisDataValid: isValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tconst { resolveGroupColor } = useGlobalChartsContext();\n\n\tif ( ! isValid ) {\n\t\treturn (\n\t\t\t<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>\n\t\t\t\t<div className={ styles[ 'error-message' ] }>{ message }</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst width = size;\n\tconst height = size;\n\tconst adjustedHeight = showLegend && legendPosition === 'top' ? height - legendHeight : height;\n\n\t// Calculate radius based on width/height\n\tconst radius = Math.min( width, adjustedHeight ) / 2;\n\n\t// Center the chart in the available space\n\tconst centerX = width / 2;\n\tconst centerY = adjustedHeight / 2;\n\n\t// Calculate the angle between each\n\tconst padAngle = gapScale * ( ( 2 * Math.PI ) / data.length );\n\n\tconst outerRadius = radius - padding;\n\tconst innerRadius = thickness === 0 ? 0 : outerRadius * ( 1 - thickness );\n\n\tconst maxCornerRadius = ( outerRadius - innerRadius ) / 2;\n\tconst cornerRadius = cornerScale ? Math.min( cornerScale * outerRadius, maxCornerRadius ) : 0;\n\n\t// Map the data to include index for color assignment\n\tconst dataWithIndex = data.map( ( d, index ) => ( {\n\t\t...d,\n\t\tindex,\n\t} ) );\n\n\tconst accessors = {\n\t\tvalue: ( d: DataPointPercentage ) => d.value,\n\t\t// Use the color property from the data object as a last resort. The theme provides colours by default.\n\t\tfill: ( { group, index, color: overrideColor }: DataPointPercentage & { index: number } ) =>\n\t\t\tresolveGroupColor( { group, index, overrideColor } ),\n\t};\n\n\treturn (\n\t\t<SingleChartContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tchartId,\n\t\t\t\tchartWidth: width,\n\t\t\t\tchartHeight: adjustedHeight,\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tviewBox={ `0 0 ${ width } ${ adjustedHeight }` }\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ adjustedHeight }\n\t\t\t\t>\n\t\t\t\t\t<Group top={ centerY } left={ centerX }>\n\t\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\t\touterRadius={ outerRadius }\n\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\tpadAngle={ padAngle }\n\t\t\t\t\t\t\tcornerRadius={ cornerRadius }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\t\treturn pie.arcs.map( ( arc, index ) => {\n\t\t\t\t\t\t\t\t\tconst [ centroidX, centroidY ] = pie.path.centroid( arc );\n\t\t\t\t\t\t\t\t\tconst hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;\n\t\t\t\t\t\t\t\t\tconst handleMouseMove = ( event: MouseEvent< SVGElement > ) =>\n\t\t\t\t\t\t\t\t\t\tonMouseMove( event, arc.data );\n\n\t\t\t\t\t\t\t\t\tconst pathProps: SVGProps< SVGPathElement > = {\n\t\t\t\t\t\t\t\t\t\td: pie.path( arc ) || '',\n\t\t\t\t\t\t\t\t\t\tfill: accessors.fill( arc.data ),\n\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\tif ( withTooltips ) {\n\t\t\t\t\t\t\t\t\t\tpathProps.onMouseMove = handleMouseMove;\n\t\t\t\t\t\t\t\t\t\tpathProps.onMouseLeave = onMouseLeave;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t// Estimate text width more accurately for background sizing\n\t\t\t\t\t\t\t\t\tconst fontSize = 12;\n\t\t\t\t\t\t\t\t\tconst estimatedTextWidth = getStringWidth( arc.data.label, { fontSize } );\n\t\t\t\t\t\t\t\t\tconst labelPadding = 6;\n\t\t\t\t\t\t\t\t\tconst backgroundWidth = estimatedTextWidth + labelPadding * 2;\n\t\t\t\t\t\t\t\t\tconst backgroundHeight = fontSize + labelPadding * 2;\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<g key={ `arc-${ index }` }>\n\t\t\t\t\t\t\t\t\t\t\t<path { ...pathProps } />\n\t\t\t\t\t\t\t\t\t\t\t{ showLabels && hasSpaceForLabel && (\n\t\t\t\t\t\t\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ providerTheme.labelBackgroundColor && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx={ centroidX - backgroundWidth / 2 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ty={ centroidY - backgroundHeight / 2 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={ backgroundWidth }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={ backgroundHeight }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill={ providerTheme.labelBackgroundColor }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trx={ 4 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\try={ 4 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tx={ centroidX }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ty={ centroidY }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdy=\".33em\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill={ providerTheme.labelTextColor || '#333' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={ fontSize }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ arc.data.label }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t</Pie>\n\n\t\t\t\t\t\t{ /* Render SVG children (like Group, Text) inside the SVG */ }\n\t\t\t\t\t\t{ svgChildren }\n\t\t\t\t\t</Group>\n\t\t\t\t</svg>\n\n\t\t\t\t{ showLegend && (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\t\tposition={ legendPosition }\n\t\t\t\t\t\talignment={ legendAlignment }\n\t\t\t\t\t\tclassName={ styles[ 'pie-chart-legend' ] }\n\t\t\t\t\t\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t\t<BaseTooltip\n\t\t\t\t\t\tdata={ tooltipData }\n\t\t\t\t\t\ttop={ tooltipTop || 0 }\n\t\t\t\t\t\tleft={ tooltipLeft || 0 }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\ttransform: 'translate(-50%, -100%)',\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ /* Render HTML component children from PieChart.HTML */ }\n\t\t\t\t{ htmlChildren }\n\n\t\t\t\t{ /* Render other React children for backward compatibility */ }\n\t\t\t\t{ otherChildren }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst PieChartWithProvider: FC< PieChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, don't create a new one\n\tif ( existingContext ) {\n\t\treturn <PieChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<PieChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nPieChartWithProvider.displayName = 'PieChart';\n\n// Create PieChart with composition API\nconst PieChart = attachSubComponents( PieChartWithProvider, {\n\tLegend: Legend,\n\tSVG: ChartSVG,\n\tHTML: ChartHTML,\n} ) as PieChartComponent;\n\n// Create responsive PieChart with composition API\nconst PieChartResponsive = attachSubComponents(\n\twithResponsive< PieChartProps >( PieChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tSVG: ChartSVG,\n\t\tHTML: ChartHTML,\n\t}\n) as PieChartResponsiveComponent;\n\nexport { PieChartResponsive as default, PieChart as PieChartUnresponsive };\n"]}

package/dist/chunk-2CEQF5RH.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _chunkJNA2WFY7cjs = require('./chunk-JNA2WFY7.cjs');var _chunk4CPALWEXcjs = require('./chunk-4CPALWEX.cjs');var _chunkSJSVNSI5cjs = require('./chunk-SJSVNSI5.cjs');var _numberformatters = require('@automattic/number-formatters');var _group = require('@visx/group');var _scale = require('@visx/scale');var _text = require('@visx/text');var _react = require('react');var _jsxruntime = require('react/jsx-runtime');var h=e=>{let t=e;return t&&"bandwidth"in t?_nullishCoalesce(_optionalChain([t, 'optionalAccess', _2 => _2.bandwidth, 'call', _3 => _3()]), () => (0)):0},G=({textProps:e,x:t,y:a,label:r,formatter:n})=>_jsxruntime.jsx.call(void 0, _text.Text,{...e,textAnchor:"start",x:t,y:a,children:n(r)}),N=({textProps:e,x:t,y:a,value:r,formatter:n})=>_jsxruntime.jsx.call(void 0, _text.Text,{...e,textAnchor:"end",x:t,y:a,fontWeight:500,children:n(r)}),_=({ticks:e,tickLabelProps:t,yOffset:a,labelPosition:r,valuePosition:n,data:p,labelFormatter:o,valueFormatter:s,LabelComponent:c=G,ValueComponent:m=N})=>{if(e.length===0)return null;let b=e.map(({value:u,index:i})=>typeof t=="function"?t(u,i,e):{});return e.map(({from:u,formattedValue:i},f)=>{let x=_nullishCoalesce(b[f], () => ({}));delete x.textAnchor,delete x.dx;let L=p.reduce((A,{data:R})=>A+(_nullishCoalesce(_optionalChain([R, 'access', _4 => _4[f], 'optionalAccess', _5 => _5.value]), () => (0))),0),d=u.y+a;return _jsxruntime.jsxs.call(void 0, _group.Group,{children:[_jsxruntime.jsx.call(void 0, c,{textProps:x,x:r,y:d,label:i,formatter:o}),_jsxruntime.jsx.call(void 0, m,{textProps:x,x:n,y:d,value:L,formatter:s,data:p,index:f})]},f)})},w=(e,t,a,r)=>{if(!r)return 0;let n=e.map(({label:m})=>m),p=_scale.createScale.call(void 0, {type:"band",range:[0,a],domain:n,...t}),o=_scale.scaleBand.call(void 0, {domain:n,range:[0,h(p)],padding:t.paddingInner});return-(h(o)+6)},v=({data:e,width:t,height:a,options:r={},margin:n={left:0,right:20,bottom:0,top:0},...p})=>{let o=_react.useMemo.call(void 0, ()=>{let s=e.length>1,c={paddingInner:s?.3:.1,padding:s?.3:.1},m={zero:!0},b={...c,..._nullishCoalesce(r.yScale, () => ({}))},u={...m,..._nullishCoalesce(r.xScale, () => ({}))};return{yScale:b,xScale:u,labelPosition:_nullishCoalesce(r.labelPosition, () => ((s?0:10))),valueFormatter:_nullishCoalesce(r.valueFormatter, () => ((i=>_numberformatters.formatNumberCompact.call(void 0, i)))),labelFormatter:_nullishCoalesce(r.labelFormatter, () => ((i=>String(i)))),valuePosition:_nullishCoalesce(r.valuePosition, () => (t)),yOffset:_nullishCoalesce(r.yOffset, () => (w(e,b,a,s)))}},[r,t,e,a]);return _jsxruntime.jsx.call(void 0, _chunkJNA2WFY7cjs.a,{orientation:"horizontal",gridVisibility:"none",data:e,width:t,height:a,margin:n,options:{axis:{y:{children:s=>_jsxruntime.jsx.call(void 0, _,{...s,data:e,yOffset:o.yOffset,labelPosition:o.labelPosition,valuePosition:o.valuePosition,labelFormatter:o.labelFormatter,valueFormatter:o.valueFormatter,LabelComponent:r.labelComponent,ValueComponent:r.valueComponent})},x:{children:()=>null}},xScale:o.xScale,yScale:o.yScale},...p})},B=e=>_react.useContext.call(void 0, _chunkSJSVNSI5cjs.n)?_jsxruntime.jsx.call(void 0, v,{...e}):_jsxruntime.jsx.call(void 0, _chunkSJSVNSI5cjs.o,{children:_jsxruntime.jsx.call(void 0, v,{...e})});B.displayName="BarListChart";var z=_chunk4CPALWEXcjs.a.call(void 0, B);exports.a = z;
+//# sourceMappingURL=chunk-2CEQF5RH.cjs.map

package/dist/chunk-2CEQF5RH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-2CEQF5RH.cjs","../src/components/bar-list-chart/bar-list-chart.tsx"],"names":["getScaleBandwidth","scale","s","DefaultLabelComponent","textProps","x","y","label","formatter","jsx","Text","DefaultValueComponent","value","AxisRenderer","ticks","tickLabelProps","yOffset","labelPosition","valuePosition","data","labelFormatter","valueFormatter","LabelComponent","ValueComponent","allTickLabelProps","index","from","formattedValue","sum","acc","seriesData","jsxs","Group","getDefaultYOffset","yScaleConfig","height","isMultiSeries","dataKeys","yScale","createScale","groupScale","scaleBand","BarListChartInternal","width","options","margin","rest","chartOptions","useMemo","defaultYScale","defaultXScale","xScale","formatNumberCompact","BarChartResponsive","renderProps","BarListChart","props","useContext","GlobalChartsProvider","BarListChartResponsive","withResponsive"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-2CEQF5RH.cjs","sourcesContent":[null,"import { formatNumberCompact } from '@automattic/number-formatters';\nimport { Group } from '@visx/group';\nimport { createScale, scaleBand } from '@visx/scale';\nimport { Text, type TextProps } from '@visx/text';\nimport { useContext, useMemo } from 'react';\nimport { GlobalChartsContext, GlobalChartsProvider } from '../../providers/chart-context';\nimport { BarChart } from '../bar-chart';\nimport { withResponsive } from '../private/with-responsive';\nimport type { SeriesData } from '../..';\nimport type { ScaleOptions } from '../../types';\nimport type { BarChartProps } from '../bar-chart/bar-chart';\nimport type { AxisRendererProps, AxisScale } from '@visx/axis';\nimport type { AnyD3Scale } from '@visx/scale';\nimport type { ComponentType, FC } from 'react';\n\nexport interface BarListChartProps\n\textends Exclude< BarChartProps, 'orientation' | 'size' | 'gridVisibility' > {\n\toptions?: {\n\t\t/**\n\t\t * Scale for the y axis. Exclude the type property.\n\t\t */\n\t\tyScale: Omit< ScaleOptions, 'type' >;\n\t\t/**\n\t\t * Scale for the x axis. Exclude the type property.\n\t\t */\n\t\txScale: Omit< ScaleOptions, 'type' >;\n\t\t/**\n\t\t * Formatter for the label.\n\t\t */\n\t\tlabelFormatter?: ( value: string ) => string;\n\t\t/**\n\t\t * Formatter for the value.\n\t\t */\n\t\tvalueFormatter?: ( value: number ) => string;\n\t\t/**\n\t\t * y offset of the label and value. Default is based on the number of series, automatically computed.\n\t\t */\n\t\tyOffset?: number;\n\t\t/**\n\t\t * x position of the label.\n\t\t */\n\t\tlabelPosition?: number;\n\t\t/**\n\t\t * x position of the value.\n\t\t */\n\t\tvaluePosition?: number;\n\t\t/**\n\t\t * Custom render function for the label.\n\t\t */\n\t\tlabelComponent?: ComponentType< RenderLabelProps >;\n\t\t/**\n\t\t * Custom render function for the value.\n\t\t */\n\t\tvalueComponent?: ComponentType< RenderValueProps >;\n\t};\n}\n\nexport interface RenderLabelProps {\n\ttextProps: TextProps;\n\tx: number;\n\ty: number;\n\tlabel: string;\n\tformatter: ( value: string ) => string;\n}\n\nexport interface RenderValueProps {\n\ttextProps: TextProps;\n\tx: number;\n\ty: number;\n\tvalue: number;\n\t/**\n\t * Original data\n\t */\n\tdata: SeriesData[];\n\t/**\n\t * Index of the data point\n\t */\n\tindex: number;\n\tformatter: ( value: number ) => string;\n}\n\n/**\n * Get the bandwidth of a scale\n * @param scale - The scale to get the bandwidth of\n * @return The bandwidth of the scale\n */\nconst getScaleBandwidth = < Scale extends AxisScale >( scale?: Scale ) => {\n\t// Broaden type before using 'xxx' in s as typeguard.\n\tconst s = scale as AxisScale;\n\treturn s && 'bandwidth' in s ? s?.bandwidth() ?? 0 : 0;\n};\n\nconst DefaultLabelComponent = ( { textProps, x, y, label, formatter } ) => {\n\treturn (\n\t\t<Text { ...textProps } textAnchor=\"start\" x={ x } y={ y }>\n\t\t\t{ formatter( label ) }\n\t\t</Text>\n\t);\n};\n\nconst DefaultValueComponent = ( { textProps, x, y, value, formatter }: RenderValueProps ) => {\n\treturn (\n\t\t<Text { ...textProps } textAnchor=\"end\" x={ x } y={ y } fontWeight={ 500 }>\n\t\t\t{ formatter( value ) }\n\t\t</Text>\n\t);\n};\n\nconst AxisRenderer = ( {\n\tticks,\n\ttickLabelProps,\n\tyOffset,\n\tlabelPosition,\n\tvaluePosition,\n\tdata,\n\tlabelFormatter,\n\tvalueFormatter,\n\tLabelComponent = DefaultLabelComponent,\n\tValueComponent = DefaultValueComponent,\n}: AxisRendererProps< AnyD3Scale > & {\n\tyOffset: number;\n\tlabelPosition: number;\n\tvaluePosition: number;\n\tdata: SeriesData[];\n\tlabelFormatter?: ( value: string ) => string;\n\tvalueFormatter?: ( value: number ) => string;\n\tLabelComponent?: ComponentType< RenderLabelProps >;\n\tValueComponent?: ComponentType< RenderValueProps >;\n} ) => {\n\tif ( ticks.length === 0 ) {\n\t\treturn null;\n\t}\n\n\t// compute the max tick label size to compute label offset\n\tconst allTickLabelProps = ticks.map( ( { value, index } ) =>\n\t\ttypeof tickLabelProps === 'function' ? tickLabelProps( value, index, ticks ) : {}\n\t);\n\n\treturn ticks.map( ( { from, formattedValue }, index ) => {\n\t\tconst textProps = allTickLabelProps[ index ] ?? {};\n\t\t// No need to pass textAnchor and dx. It will be handled by the component.\n\t\tdelete textProps.textAnchor;\n\t\tdelete textProps.dx;\n\n\t\tconst sum = data.reduce(\n\t\t\t( acc, { data: seriesData } ) => acc + ( seriesData[ index ]?.value ?? 0 ),\n\t\t\t0\n\t\t);\n\t\tconst y = from.y + yOffset;\n\n\t\treturn (\n\t\t\t<Group key={ index }>\n\t\t\t\t<LabelComponent\n\t\t\t\t\ttextProps={ textProps }\n\t\t\t\t\tx={ labelPosition }\n\t\t\t\t\ty={ y }\n\t\t\t\t\tlabel={ formattedValue }\n\t\t\t\t\tformatter={ labelFormatter }\n\t\t\t\t/>\n\t\t\t\t<ValueComponent\n\t\t\t\t\ttextProps={ textProps }\n\t\t\t\t\tx={ valuePosition }\n\t\t\t\t\ty={ y }\n\t\t\t\t\tvalue={ sum }\n\t\t\t\t\tformatter={ valueFormatter }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tindex={ index }\n\t\t\t\t/>\n\t\t\t</Group>\n\t\t);\n\t} );\n};\n\n/**\n * Calculate the default y offset for the bar list chart.\n * @param data          - The data to calculate the default y offset for.\n * @param yScaleConfig  - The y scale configuration.\n * @param height        - The height of the chart.\n * @param isMultiSeries - Whether the chart is a multi series chart.\n * @return The default y offset.\n */\nconst getDefaultYOffset = (\n\tdata: SeriesData[],\n\tyScaleConfig: Omit< ScaleOptions, 'type' >,\n\theight: number,\n\tisMultiSeries: boolean\n) => {\n\tif ( ! isMultiSeries ) {\n\t\treturn 0;\n\t}\n\n\tconst dataKeys = data.map( ( { label } ) => label );\n\n\tconst yScale = createScale< string >( {\n\t\ttype: 'band' as const,\n\t\trange: [ 0, height ],\n\t\tdomain: dataKeys,\n\t\t...yScaleConfig,\n\t} );\n\n\tconst groupScale = scaleBand< string >( {\n\t\tdomain: dataKeys,\n\t\trange: [ 0, getScaleBandwidth( yScale ) ],\n\t\tpadding: yScaleConfig.paddingInner,\n\t} );\n\n\tconst GAP_BETWEEN_BARS = 6;\n\tconst barThickness = getScaleBandwidth( groupScale );\n\n\t// Use negative value to move the label up.\n\treturn -( barThickness + GAP_BETWEEN_BARS );\n};\n\nconst BarListChartInternal: FC< BarListChartProps > = ( {\n\tdata,\n\twidth,\n\theight,\n\toptions = {},\n\tmargin = {\n\t\tleft: 0,\n\t\tright: 20,\n\t\tbottom: 0,\n\t\ttop: 0,\n\t},\n\t...rest\n} ) => {\n\tconst chartOptions = useMemo( () => {\n\t\tconst isMultiSeries = data.length > 1;\n\n\t\tconst defaultYScale = {\n\t\t\t// For multi series, set default padding larger to look better.\n\t\t\tpaddingInner: isMultiSeries ? 0.3 : 0.1,\n\t\t\tpadding: isMultiSeries ? 0.3 : 0.1,\n\t\t};\n\t\tconst defaultXScale = {\n\t\t\t// Always begin at zero since the x axis is hidden.\n\t\t\tzero: true,\n\t\t};\n\t\tconst yScale = {\n\t\t\t...defaultYScale,\n\t\t\t...( options.yScale ?? {} ),\n\t\t};\n\t\tconst xScale = {\n\t\t\t...defaultXScale,\n\t\t\t...( options.xScale ?? {} ),\n\t\t};\n\n\t\treturn {\n\t\t\tyScale,\n\t\t\txScale,\n\t\t\tlabelPosition: options.labelPosition ?? ( isMultiSeries ? 0 : 10 ),\n\t\t\tvalueFormatter: options.valueFormatter ?? ( value => formatNumberCompact( value ) ),\n\t\t\tlabelFormatter: options.labelFormatter ?? ( value => String( value ) ),\n\t\t\tvaluePosition: options.valuePosition ?? width,\n\t\t\tyOffset: options.yOffset ?? getDefaultYOffset( data, yScale, height, isMultiSeries ),\n\t\t};\n\t}, [ options, width, data, height ] );\n\n\treturn (\n\t\t<BarChart\n\t\t\torientation=\"horizontal\"\n\t\t\tgridVisibility={ 'none' }\n\t\t\tdata={ data }\n\t\t\twidth={ width }\n\t\t\theight={ height }\n\t\t\tmargin={ margin }\n\t\t\toptions={ {\n\t\t\t\taxis: {\n\t\t\t\t\ty: {\n\t\t\t\t\t\tchildren: ( renderProps: AxisRendererProps< AnyD3Scale > ) => (\n\t\t\t\t\t\t\t<AxisRenderer\n\t\t\t\t\t\t\t\t{ ...renderProps }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tyOffset={ chartOptions.yOffset }\n\t\t\t\t\t\t\t\tlabelPosition={ chartOptions.labelPosition }\n\t\t\t\t\t\t\t\tvaluePosition={ chartOptions.valuePosition }\n\t\t\t\t\t\t\t\tlabelFormatter={ chartOptions.labelFormatter }\n\t\t\t\t\t\t\t\tvalueFormatter={ chartOptions.valueFormatter }\n\t\t\t\t\t\t\t\tLabelComponent={ options.labelComponent }\n\t\t\t\t\t\t\t\tValueComponent={ options.valueComponent }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tx: {\n\t\t\t\t\t\tchildren: () => null,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\txScale: chartOptions.xScale,\n\t\t\t\tyScale: chartOptions.yScale,\n\t\t\t} }\n\t\t\t{ ...rest }\n\t\t/>\n\t);\n};\n\nconst BarListChart: FC< BarListChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, render the core component directly\n\tif ( existingContext ) {\n\t\treturn <BarListChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, wrap with our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<BarListChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nBarListChart.displayName = 'BarListChart';\n\nconst BarListChartResponsive = withResponsive< BarListChartProps >( BarListChart );\n\nexport { BarListChartResponsive as default, BarListChart as BarListChartUnresponsive };\n"]}