@automattic/charts 0.38.2 → 0.40.0

package/CHANGELOG.md

@@ -5,6 +5,25 @@ 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.40.0] - 2025-10-06
+### Added
+- Add `legendItemClassName` prop for custom legend item styling. [#45286]
+
+### Changed
+- Update package dependencies. [#45334]
+- Update package dependencies. [#45335]
+
+## [0.39.0] - 2025-09-29
+### Added
+- Generate extra colors from theme colors if needed. [#45276]
+- Global Charts context: Add documentation. [#45313]
+- Guess a better x-axis ticks value in line charts. [#45259]
+- Line Chart: Add support for annotated line section. [#45284]
+
+### Changed
+- Improve tooltip positioning in pie charts. [#45237]
+- Conversion Funnel chart: Use global charts context theme for consistency. [#45264]
+
 ## [0.38.2] - 2025-09-22
 ### Changed
 - Update dependencies. [#43811]
@@ -475,6 +494,8 @@ 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.40.0]: https://github.com/Automattic/charts/compare/v0.39.0...v0.40.0
+[0.39.0]: https://github.com/Automattic/charts/compare/v0.38.2...v0.39.0
 [0.38.2]: https://github.com/Automattic/charts/compare/v0.38.1...v0.38.2
 [0.38.1]: https://github.com/Automattic/charts/compare/v0.38.0...v0.38.1
 [0.38.0]: https://github.com/Automattic/charts/compare/v0.37.0...v0.38.0

package/dist/{base-tooltip-Dlq8KmQA.d.cts → base-tooltip-DOq93wjU.d.cts}

@@ -15,6 +15,12 @@ type TooltipCommonProps = {
     left: number;
     style?: CSSProperties;
     className?: string;
+    /**
+     * Whether to render the tooltip container div. When false, only renders the content.
+     * Useful when the tooltip is rendered inside a portal or custom container.
+     * @default true
+     */
+    renderContainer?: boolean;
 };
 type DefaultDataTooltip = {
     data: TooltipData;
@@ -27,6 +33,6 @@ type CustomTooltip = {
     component?: never;
 };
 type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
-declare const BaseTooltip: ({ data, top, left, component: Component, children, className, }: BaseTooltipProps) => react_jsx_runtime.JSX.Element;
+declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer, }: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 
 export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };

package/dist/{base-tooltip-Dlq8KmQA.d.ts → base-tooltip-DOq93wjU.d.ts}

@@ -15,6 +15,12 @@ type TooltipCommonProps = {
     left: number;
     style?: CSSProperties;
     className?: string;
+    /**
+     * Whether to render the tooltip container div. When false, only renders the content.
+     * Useful when the tooltip is rendered inside a portal or custom container.
+     * @default true
+     */
+    renderContainer?: boolean;
 };
 type DefaultDataTooltip = {
     data: TooltipData;
@@ -27,6 +33,6 @@ type CustomTooltip = {
     component?: never;
 };
 type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
-declare const BaseTooltip: ({ data, top, left, component: Component, children, className, }: BaseTooltipProps) => react_jsx_runtime.JSX.Element;
+declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer, }: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 
 export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };

package/dist/{chunk-XLKUVSWX.js → chunk-2YVSCZ6E.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-NFRB2POF.js";
 import {
   BaseTooltip
-} from "./chunk-6KOC7ZWU.js";
+} from "./chunk-W5KOH3TV.js";
 import {
   ChartHTML,
   ChartSVG,
@@ -16,24 +16,25 @@ import {
   Legend,
   SingleChartContext,
   useChartLegendItems
-} from "./chunk-64WB3TV2.js";
+} from "./chunk-663ETEC4.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
   attachSubComponents,
   useChartId,
-  useChartMouseHandler,
   useChartRegistration,
   useElementHeight,
   useGlobalChartsContext,
   useGlobalChartsTheme
-} from "./chunk-3WXEHYPV.js";
+} from "./chunk-KACVKFMH.js";
 
 // src/components/pie-chart/pie-chart.tsx
+import { localPoint } from "@visx/event";
 import { Group } from "@visx/group";
 import { Pie } from "@visx/shape";
+import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
 import clsx from "clsx";
-import { useContext, useMemo } from "react";
+import { useCallback, useContext, useMemo } from "react";
 
 // src/components/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
@@ -67,6 +68,7 @@ var PieChartInternal = ({
   legendAlignment = "center",
   legendMaxWidth,
   legendTextOverflow = "wrap",
+  legendItemClassName,
   legendShape = "circle",
   size,
   thickness = 1,
@@ -75,14 +77,25 @@ var PieChartInternal = ({
   cornerScale = 0,
   showLabels = true,
   legendValueDisplay = "percentage",
-  children = null
+  children = null,
+  tooltipOffsetX = 0,
+  tooltipOffsetY = -15
 }) => {
   const providerTheme = useGlobalChartsTheme();
   const chartId = useChartId(providedChartId);
   const [legendRef, legendHeight] = useElementHeight();
-  const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } = useChartMouseHandler({
-    withTooltips
+  const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip();
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+    debounce: 0
   });
+  const onMouseLeave = useCallback(() => {
+    if (!withTooltips) {
+      return;
+    }
+    hideTooltip();
+  }, [withTooltips, hideTooltip]);
   const legendOptions = useMemo(
     () => ({ showValues: true, legendValueDisplay }),
     [legendValueDisplay]
@@ -141,6 +154,7 @@ var PieChartInternal = ({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: containerRef,
           className: clsx("pie-chart", pie_chart_module_default["pie-chart"], className),
           style: {
             display: "flex",
@@ -168,21 +182,36 @@ var PieChartInternal = ({
                         return pie.arcs.map((arc, index) => {
                           const [centroidX, centroidY] = pie.path.centroid(arc);
                           const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
-                          const handleMouseMove = (event) => onMouseMove(event, arc.data);
+                          const handleMouseMove = (event) => {
+                            if (!withTooltips) {
+                              return;
+                            }
+                            const coords = localPoint(event);
+                            if (coords) {
+                              const legendOffset = showLegend && legendPosition === "top" ? legendHeight : 0;
+                              showTooltip({
+                                tooltipData: arc.data,
+                                tooltipLeft: coords.x + tooltipOffsetX,
+                                tooltipTop: coords.y + legendOffset + tooltipOffsetY
+                              });
+                            }
+                          };
                           const pathProps = {
                             d: pie.path(arc) || "",
-                            fill: accessors.fill(arc.data)
+                            fill: accessors.fill(arc.data),
+                            "data-testid": "pie-segment"
                           };
+                          const groupProps = {};
                           if (withTooltips) {
-                            pathProps.onMouseMove = handleMouseMove;
-                            pathProps.onMouseLeave = onMouseLeave;
+                            groupProps.onMouseMove = handleMouseMove;
+                            groupProps.onMouseLeave = onMouseLeave;
                           }
                           const fontSize = 12;
                           const estimatedTextWidth = getStringWidth(arc.data.label, { fontSize });
                           const labelPadding = 6;
                           const backgroundWidth = estimatedTextWidth + labelPadding * 2;
                           const backgroundHeight = fontSize + labelPadding * 2;
-                          return /* @__PURE__ */ jsxs("g", { children: [
+                          return /* @__PURE__ */ jsxs("g", { ...groupProps, children: [
                             /* @__PURE__ */ jsx("path", { ...pathProps }),
                             showLabels && hasSpaceForLabel && /* @__PURE__ */ jsxs("g", { children: [
                               providerTheme.labelBackgroundColor && /* @__PURE__ */ jsx(
@@ -229,23 +258,14 @@ var PieChartInternal = ({
                 alignment: legendAlignment,
                 maxWidth: legendMaxWidth,
                 textOverflow: legendTextOverflow,
+                legendItemClassName,
                 className: pie_chart_module_default["pie-chart-legend"],
                 shape: legendShape,
                 ref: legendRef,
                 chartId
               }
             ),
-            withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(
-              BaseTooltip,
-              {
-                data: tooltipData,
-                top: tooltipTop || 0,
-                left: tooltipLeft || 0,
-                style: {
-                  transform: "translate(-50%, -100%)"
-                }
-              }
-            ),
+            withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, { top: tooltipTop || 0, left: tooltipLeft || 0, children: /* @__PURE__ */ jsx("div", { role: "tooltip", children: /* @__PURE__ */ jsx(BaseTooltip, { data: tooltipData, top: 0, left: 0, renderContainer: false }) }) }),
             htmlChildren,
             otherChildren
           ]
@@ -280,4 +300,4 @@ export {
   PieChart,
   PieChartResponsive
 };
-//# sourceMappingURL=chunk-XLKUVSWX.js.map
+//# sourceMappingURL=chunk-2YVSCZ6E.js.map

package/dist/chunk-2YVSCZ6E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/pie-chart/pie-chart.tsx","../src/components/pie-chart/pie-chart.module.scss"],"sourcesContent":["import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useElementHeight } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n\tGlobalChartsContext,\n} from '../../providers';\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\t/**\n\t * Horizontal offset for tooltip positioning in pixels (default: 0)\n\t */\n\ttooltipOffsetX?: number;\n\n\t/**\n\t * Vertical offset for tooltip positioning in pixels (default: -15)\n\t */\n\ttooltipOffsetY?: number;\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\tlegendMaxWidth,\n\tlegendTextOverflow = 'wrap',\n\tlegendItemClassName,\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\ttooltipOffsetX = 0,\n\ttooltipOffsetY = -15,\n}: PieChartProps ) => {\n\tconst providerTheme = useGlobalChartsTheme();\n\tconst chartId = useChartId( providedChartId );\n\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< DataPointPercentage >();\n\n\t// Set up portal tooltip for better z-index handling\n\tconst { containerRef, TooltipInPortal } = useTooltipInPortal( {\n\t\tdetectBounds: true,\n\t\tscroll: true,\n\t\tdebounce: 0,\n\t} );\n\n\tconst onMouseLeave = useCallback( () => {\n\t\tif ( ! withTooltips ) {\n\t\t\treturn;\n\t\t}\n\t\thideTooltip();\n\t}, [ withTooltips, hideTooltip ] );\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 { getElementStyles } = 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\tfill: ( d: DataPointPercentage & { index: number } ) => {\n\t\t\treturn getElementStyles( { data: d, index: d.index } ).color;\n\t\t},\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\tref={ containerRef }\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\tif ( ! withTooltips ) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t// Get coordinates relative to the current target element\n\t\t\t\t\t\t\t\t\t\tconst coords = localPoint( event );\n\t\t\t\t\t\t\t\t\t\tif ( coords ) {\n\t\t\t\t\t\t\t\t\t\t\t// Account for legend offset when legend is on top\n\t\t\t\t\t\t\t\t\t\t\tconst legendOffset =\n\t\t\t\t\t\t\t\t\t\t\t\tshowLegend && legendPosition === 'top' ? legendHeight : 0;\n\t\t\t\t\t\t\t\t\t\t\tshowTooltip( {\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipData: arc.data,\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipLeft: coords.x + tooltipOffsetX,\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipTop: coords.y + legendOffset + tooltipOffsetY,\n\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\tconst pathProps: SVGProps< SVGPathElement > & { 'data-testid'?: string } = {\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\t'data-testid': 'pie-segment',\n\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\tconst groupProps: SVGProps< SVGGElement > = {};\n\t\t\t\t\t\t\t\t\tif ( withTooltips ) {\n\t\t\t\t\t\t\t\t\t\tgroupProps.onMouseMove = handleMouseMove;\n\t\t\t\t\t\t\t\t\t\tgroupProps.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 }` } { ...groupProps }>\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\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\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<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>\n\t\t\t\t\t\t<div role=\"tooltip\">\n\t\t\t\t\t\t\t<BaseTooltip data={ tooltipData } top={ 0 } left={ 0 } renderContainer={ false } />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</TooltipInPortal>\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","import 'css-chunk:src/components/pie-chart/pie-chart.module.scss';export default {\n  \"pie-chart\": \"a8ccharts-R12VhH\"\n};"],"mappings":"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","names":[]}

package/dist/{chunk-64WB3TV2.js → chunk-663ETEC4.js}

@@ -4,7 +4,7 @@ import {
   useGlobalChartsContext,
   useGlobalChartsTheme,
   useTextTruncation
-} from "./chunk-3WXEHYPV.js";
+} from "./chunk-KACVKFMH.js";
 
 // src/components/legend/legend.tsx
 import { useContext as useContext2, useMemo, forwardRef as forwardRef2 } from "react";
@@ -127,6 +127,7 @@ var BaseLegend = forwardRef(
     itemMargin = "0",
     itemDirection = "row",
     legendLabelProps,
+    legendItemClassName,
     ...legendItemProps
   }, ref) => {
     const theme = useGlobalChartsTheme();
@@ -165,7 +166,11 @@ var BaseLegend = forwardRef(
             children: labels.map((label, i) => /* @__PURE__ */ jsxs(
               LegendItem,
               {
-                className: clsx("visx-legend-item", base_legend_module_default["legend-item"]),
+                className: clsx(
+                  "visx-legend-item",
+                  base_legend_module_default["legend-item"],
+                  legendItemClassName
+                ),
                 "data-testid": "legend-item",
                 margin: itemMargin,
                 flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
@@ -381,4 +386,4 @@ export {
   Legend,
   useChartLegendItems
 };
-//# sourceMappingURL=chunk-64WB3TV2.js.map
+//# sourceMappingURL=chunk-663ETEC4.js.map

package/dist/chunk-663ETEC4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/legend/legend.tsx","../src/components/private/single-chart-context/single-chart-context.tsx","../src/components/private/single-chart-context/use-single-chart-context.ts","../src/components/legend/private/base-legend.tsx","../src/components/legend/utils/value-or-identity.ts","../src/components/legend/utils/label-transform-factory.ts","../src/components/legend/private/base-legend.module.scss","../src/components/legend/hooks/use-chart-legend-items.ts"],"sourcesContent":["import { useContext, useMemo, forwardRef } from 'react';\nimport { GlobalChartsContext } from '../../providers';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { BaseLegend } from './private';\nimport type { LegendProps } from './types';\n\nexport const Legend = forwardRef< HTMLDivElement, LegendProps >(\n\t( { chartId, items, ...props }, ref ) => {\n\t\t// Get context but don't throw if it doesn't exist\n\t\tconst context = useContext( GlobalChartsContext );\n\t\tconst singleChartContext = useContext( SingleChartContext );\n\n\t\t// When chartId is used, it is standalone mode\n\t\t// When chartId is not provided, we use the context's chartId, meaning it is in a single chart context\n\t\tconst contextChartId = chartId ?? singleChartContext?.chartId;\n\n\t\t// Use useMemo to ensure re-rendering when context changes\n\t\tconst contextItems = useMemo( () => {\n\t\t\treturn contextChartId && context\n\t\t\t\t? context.getChartData( contextChartId )?.legendItems\n\t\t\t\t: undefined;\n\t\t}, [ contextChartId, context ] );\n\n\t\t// Provided items take precedence over context items\n\t\tconst legendItems = ( items || contextItems ) as typeof items;\n\n\t\tif ( ! legendItems ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn <BaseLegend ref={ ref } items={ legendItems } { ...props } />;\n\t}\n);\n","import { createContext } from 'react';\n\nexport interface ChartInstanceRef {\n\tgetScales: () => { xScale: unknown; yScale: unknown } | null;\n\tgetChartDimensions: () => {\n\t\twidth: number;\n\t\theight: number;\n\t\tmargin: { top?: number; right?: number; bottom?: number; left?: number };\n\t};\n}\n\n// Local context for chart implicit state sharing\nexport interface ChartInstanceContextValue {\n\tchartId: string;\n\tchartRef?: React.RefObject< ChartInstanceRef >;\n\tchartWidth: number;\n\tchartHeight: number;\n}\n\nexport const ChartInstanceContext = createContext< ChartInstanceContextValue | null >( null );\n\n// Backward compatibility exports\nexport const SingleChartContext = ChartInstanceContext;\nexport type SingleChartContextValue = ChartInstanceContextValue;\nexport type SingleChartRef = ChartInstanceRef;\n","import { useContext } from 'react';\nimport { ChartInstanceContext, type ChartInstanceContextValue } from './single-chart-context';\n\nexport const useChartInstanceContext = (): ChartInstanceContextValue => {\n\tconst context = useContext( ChartInstanceContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'useChartInstanceContext must be used within a Chart component' );\n\t}\n\treturn context;\n};\n\nexport const useSingleChartContext = useChartInstanceContext;\n","import { Group } from '@visx/group';\nimport { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from '@visx/legend';\nimport { scaleOrdinal } from '@visx/scale';\nimport clsx from 'clsx';\nimport { type RefAttributes, type ForwardRefExoticComponent, forwardRef, useCallback } from 'react';\nimport { useTextTruncation } from '../../../hooks';\nimport { useGlobalChartsTheme } from '../../../providers';\nimport { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from '../utils';\nimport styles from './base-legend.module.scss';\nimport type { BaseLegendProps } from '../types';\n\nconst orientationToFlexDirection = {\n\thorizontal: 'row' as const,\n\tvertical: 'column' as const,\n};\n\n// Component for legend text with truncation detection\n// Moved outside BaseLegend to prevent recreation on every render\nconst LegendText = ( {\n\ttext,\n\ttextOverflow,\n\tmaxWidth,\n}: {\n\ttext: string;\n\ttextOverflow: 'ellipsis' | 'wrap';\n\tmaxWidth?: string;\n} ) => {\n\tconst isEllipsis = maxWidth != null && textOverflow === 'ellipsis';\n\tconst [ textRef, isTruncated ] = useTextTruncation( Boolean( isEllipsis ) );\n\n\treturn (\n\t\t<span\n\t\t\tref={ textRef }\n\t\t\tclassName={ clsx(\n\t\t\t\tstyles[ 'legend-item-text' ],\n\t\t\t\tmaxWidth != null && styles[ `legend-item-text--${ textOverflow }` ]\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\t...( maxWidth != null && {\n\t\t\t\t\tmaxWidth,\n\t\t\t\t\tminWidth: 0,\n\t\t\t\t} ),\n\t\t\t} }\n\t\t\ttitle={ isEllipsis && isTruncated ? text : undefined }\n\t\t>\n\t\t\t{ text }\n\t\t</span>\n\t);\n};\n\n/*\n * Base legend component that displays color-coded items with labels based on visx LegendOrdinal.\n * We avoid using LegendOrdinal directly to enable support for advanced features such as interactivity.\n */\nexport const BaseLegend: ForwardRefExoticComponent<\n\tBaseLegendProps & RefAttributes< HTMLDivElement >\n> = forwardRef< HTMLDivElement, BaseLegendProps >(\n\t(\n\t\t{\n\t\t\titems,\n\t\t\tclassName,\n\t\t\torientation = 'horizontal',\n\t\t\tposition = 'bottom',\n\t\t\talignment = 'center',\n\t\t\tmaxWidth,\n\t\t\ttextOverflow = 'wrap',\n\t\t\tshape = 'rect',\n\t\t\tfill = valueOrIdentityString,\n\t\t\tsize = valueOrIdentityString,\n\t\t\tlabelFormat = valueOrIdentity,\n\t\t\tlabelTransform = labelTransformFactory,\n\t\t\tshapeWidth = 16,\n\t\t\tshapeHeight = 16,\n\t\t\tshapeMargin = '2px 4px 2px 0',\n\t\t\tlabelAlign = 'left',\n\t\t\tlabelFlex = '0 0 auto', // Use natural width instead of expanding to fill space\n\t\t\tlabelMargin = '0 4px',\n\t\t\titemMargin = '0',\n\t\t\titemDirection = 'row',\n\t\t\tlegendLabelProps,\n\t\t\tlegendItemClassName,\n\t\t\t...legendItemProps\n\t\t},\n\t\tref\n\t) => {\n\t\tconst theme = useGlobalChartsTheme();\n\n\t\tconst legendScale = scaleOrdinal( {\n\t\t\tdomain: items.map( item => item.label ),\n\t\t\trange: items.map( item => item.color ),\n\t\t} );\n\t\tconst domain = legendScale.domain();\n\n\t\tconst getShapeStyle = useCallback(\n\t\t\t( { index }: { index: number } ) => items[ index ]?.shapeStyle,\n\t\t\t[ items ]\n\t\t);\n\n\t\treturn (\n\t\t\t<LegendOrdinal\n\t\t\t\tscale={ legendScale }\n\t\t\t\tlabelFormat={ labelFormat }\n\t\t\t\tlabelTransform={ labelTransform }\n\t\t\t>\n\t\t\t\t{ labels => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\tdata-testid={ `legend-${ orientation }` }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tstyles.legend,\n\t\t\t\t\t\t\tstyles[ `legend--${ orientation }` ],\n\t\t\t\t\t\t\tstyles[ `legend--alignment-${ alignment }` ],\n\t\t\t\t\t\t\tstyles[ `legend--position-${ position }` ],\n\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tflexDirection: orientationToFlexDirection[ orientation ],\n\t\t\t\t\t\t\t...theme.legendContainerStyles,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ labels.map( ( label, i ) => (\n\t\t\t\t\t\t\t<LegendItem\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'visx-legend-item',\n\t\t\t\t\t\t\t\t\tstyles[ 'legend-item' ],\n\t\t\t\t\t\t\t\t\tlegendItemClassName\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tdata-testid=\"legend-item\"\n\t\t\t\t\t\t\t\tkey={ `legend-${ label.text }-${ i }` }\n\t\t\t\t\t\t\t\tmargin={ itemMargin }\n\t\t\t\t\t\t\t\tflexDirection={\n\t\t\t\t\t\t\t\t\torientation === 'vertical' && alignment === 'end' ? 'row-reverse' : itemDirection\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{ ...legendItemProps }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ items[ i ]?.renderGlyph ? (\n\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\twidth={ items[ i ]?.glyphSize * 2 }\n\t\t\t\t\t\t\t\t\t\theight={ items[ i ]?.glyphSize * 2 }\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"legend-glyph\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Group>\n\t\t\t\t\t\t\t\t\t\t\t{ items[ i ]?.renderGlyph( {\n\t\t\t\t\t\t\t\t\t\t\t\tkey: `legend-glyph-${ label.text }`,\n\t\t\t\t\t\t\t\t\t\t\t\tdatum: {},\n\t\t\t\t\t\t\t\t\t\t\t\tindex: i,\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: fill( label ),\n\t\t\t\t\t\t\t\t\t\t\t\tsize: items[ i ]?.glyphSize,\n\t\t\t\t\t\t\t\t\t\t\t\tx: items[ i ]?.glyphSize,\n\t\t\t\t\t\t\t\t\t\t\t\ty: items[ i ]?.glyphSize,\n\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t</Group>\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<LegendShape\n\t\t\t\t\t\t\t\t\t\tshape={ shape }\n\t\t\t\t\t\t\t\t\t\theight={ shapeHeight }\n\t\t\t\t\t\t\t\t\t\twidth={ shapeWidth }\n\t\t\t\t\t\t\t\t\t\tmargin={ shapeMargin }\n\t\t\t\t\t\t\t\t\t\titem={ domain[ i ] }\n\t\t\t\t\t\t\t\t\t\titemIndex={ i }\n\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t\tfill={ fill }\n\t\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t\t\tshapeStyle={ getShapeStyle }\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\t<LegendLabel\n\t\t\t\t\t\t\t\t\tclassName={ clsx( 'visx-legend-label', styles[ 'legend-item-label' ] ) }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tjustifyContent: labelAlign,\n\t\t\t\t\t\t\t\t\t\tflex: labelFlex,\n\t\t\t\t\t\t\t\t\t\tmargin: labelMargin,\n\t\t\t\t\t\t\t\t\t\t...theme.legendLabelStyles,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t{ ...legendLabelProps }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<LegendText\n\t\t\t\t\t\t\t\t\t\ttext={ label.text }\n\t\t\t\t\t\t\t\t\t\ttextOverflow={ textOverflow }\n\t\t\t\t\t\t\t\t\t\tmaxWidth={ maxWidth }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ items.find( item => item.label === label.text )?.value && (\n\t\t\t\t\t\t\t\t\t\t<span className={ styles[ 'legend-item-value' ] }>\n\t\t\t\t\t\t\t\t\t\t\t{ '\\u00A0' }\n\t\t\t\t\t\t\t\t\t\t\t{ items.find( item => item.label === label.text )?.value }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</LegendLabel>\n\t\t\t\t\t\t\t</LegendItem>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</LegendOrdinal>\n\t\t);\n\t}\n);\n","export type ValueOrIdentity< T > = T | { value?: T };\n\n/**\n * Returns an object's value if defined, or the object.\n * @param _ - The object to return the value of.\n * @return The value of the object, or the object itself.\n */\nexport function valueOrIdentity< T >( _: ValueOrIdentity< T > ): T {\n\tif ( _ && typeof _ === 'object' && 'value' in _ && typeof _.value !== 'undefined' )\n\t\treturn _.value;\n\treturn _ as T;\n}\n\n/**\n * Returns an object's value if defined, or the object, coerced to a string.\n * @param _ - The object to return the value of.\n * @return The value of the object, or the object itself.\n */\nexport function valueOrIdentityString< T >( _: ValueOrIdentity< T > ): string {\n\treturn String( valueOrIdentity( _ ) );\n}\n","import type { ItemTransformer, LabelFormatter } from '@visx/legend/lib/types';\nimport type { AnyD3Scale, ScaleInput } from '@visx/scale';\n\n/**\n * Returns a function which takes a Datum and index as input, and returns a formatted label object.\n * @param {object}                            root0             - The object to return the value of.\n * @param {AnyD3Scale}                        root0.scale       - The scale to use.\n * @param {LabelFormatter<ScaleInput<Scale>>} root0.labelFormat - The label format to use.\n * @return {ItemTransformer<ScaleInput<Scale>, ReturnType<Scale>>} The label transform factory.\n */\nexport function labelTransformFactory< Scale extends AnyD3Scale >( {\n\tscale,\n\tlabelFormat,\n}: {\n\tscale: Scale;\n\tlabelFormat: LabelFormatter< ScaleInput< Scale > >;\n} ): ItemTransformer< ScaleInput< Scale >, ReturnType< Scale > > {\n\treturn ( d, i ) => ( {\n\t\tdatum: d,\n\t\tindex: i,\n\t\ttext: `${ labelFormat( d, i ) }`,\n\t\tvalue: scale( d ),\n\t} );\n}\n","import 'css-chunk:src/components/legend/private/base-legend.module.scss';export default {\n  \"legend--horizontal\": \"a8ccharts-AELBvX\",\n  \"legend--vertical\": \"a8ccharts-fX8uQe\",\n  \"legend--alignment-start\": \"a8ccharts-DEe0wg\",\n  \"legend--alignment-center\": \"a8ccharts-WBKF9I\",\n  \"legend--alignment-end\": \"a8ccharts-JfwMng\",\n  \"legend--position-top\": \"a8ccharts-8Y73Kh\",\n  \"legend--position-bottom\": \"a8ccharts-TVM-IY\",\n  \"legend-item\": \"a8ccharts-Vflwq8\",\n  \"legend-item-label\": \"a8ccharts-2H65Kr\",\n  \"legend-item-text--wrap\": \"a8ccharts-faSDBI\",\n  \"legend-item-text--ellipsis\": \"a8ccharts-FISUIO\",\n  \"legend-item-value\": \"a8ccharts-DTZlT-\"\n};","import { useMemo } from 'react';\nimport {\n\tuseGlobalChartsContext,\n\ttype GetElementStylesParams,\n\ttype ElementStyles,\n} from '../../../providers';\nimport { formatPercentage } from '../../../utils';\nimport type { SeriesData, DataPointDate, DataPointPercentage } from '../../../types';\nimport type { BaseLegendItem } from '../types';\nimport type { LegendShape } from '@visx/legend/lib/types';\nimport type { GlyphProps } from '@visx/xychart';\nimport type { ReactNode } from 'react';\n\nexport type LegendValueDisplay = 'percentage' | 'value' | 'valueDisplay' | 'none';\n\nexport interface ChartLegendOptions {\n\twithGlyph?: boolean;\n\tglyphSize?: number;\n\trenderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;\n\tshowValues?: boolean;\n\tlegendValueDisplay?: LegendValueDisplay;\n\tlegendShape?: LegendShape< SeriesData[], number >;\n}\n\n/**\n * Formats the value for a data point based on its type and display preference\n * @param point              - The data point to format\n * @param showValues         - Whether to show values or return empty string\n * @param legendValueDisplay - What type of value to display\n * @return Formatted value string\n */\nfunction formatPointValue(\n\tpoint: DataPointDate | DataPointPercentage,\n\tshowValues: boolean,\n\tlegendValueDisplay: LegendValueDisplay = 'percentage'\n): string {\n\tif ( ! showValues || legendValueDisplay === 'none' ) {\n\t\treturn '';\n\t}\n\n\t// Handle DataPointPercentage (pie chart data)\n\tif ( 'percentage' in point ) {\n\t\tconst percentagePoint = point as DataPointPercentage;\n\t\tswitch ( legendValueDisplay ) {\n\t\t\tcase 'percentage':\n\t\t\t\treturn formatPercentage( percentagePoint.percentage );\n\t\t\tcase 'value':\n\t\t\t\treturn percentagePoint.value.toString();\n\t\t\tcase 'valueDisplay':\n\t\t\t\treturn percentagePoint.valueDisplay || percentagePoint.value.toString();\n\t\t\tdefault:\n\t\t\t\treturn '';\n\t\t}\n\t}\n\n\t// Handle DataPointDate (time series data)\n\tif ( 'value' in point ) {\n\t\treturn point.value.toString();\n\t}\n\n\treturn '';\n}\n\n/**\n * Applies glyph configuration to a legend item if needed\n * @param baseItem    - The base legend item\n * @param withGlyph   - Whether to include glyph rendering\n * @param glyph       - Glyph component from theme\n * @param renderGlyph - Custom glyph render function\n * @param glyphSize   - Size of the glyph\n * @return The legend item with glyph configuration applied if applicable\n */\nfunction applyGlyphToLegendItem(\n\tbaseItem: BaseLegendItem,\n\twithGlyph: boolean,\n\tglyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,\n\trenderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,\n\tglyphSize?: number\n): BaseLegendItem {\n\tif ( withGlyph ) {\n\t\tconst glyphToUse = glyph || renderGlyph;\n\t\tif ( glyphToUse ) {\n\t\t\treturn {\n\t\t\t\t...baseItem,\n\t\t\t\tglyphSize,\n\t\t\t\trenderGlyph: glyphToUse,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn baseItem;\n}\n\n/**\n * Processes SeriesData into legend items\n * @param seriesData       - The series data to process\n * @param getElementStyles - Function to get element styles\n * @param showValues       - Whether to show values in legend\n * @param withGlyph        - Whether to include glyph rendering\n * @param glyphSize        - Size of the glyph\n * @param renderGlyph      - Component to render the glyph\n * @param legendShape      - The shape type for legend items (string literal or React component)\n * @return Array of processed legend items\n */\nfunction processSeriesData(\n\tseriesData: SeriesData[],\n\tgetElementStyles: ( params: GetElementStylesParams ) => ElementStyles,\n\tshowValues: boolean,\n\twithGlyph: boolean,\n\tglyphSize: number,\n\trenderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,\n\tlegendShape?: LegendShape< SeriesData[], number >\n): BaseLegendItem[] {\n\tconst mapper = ( series: SeriesData, index: number ) => {\n\t\tconst { color, glyph, shapeStyles } = getElementStyles( {\n\t\t\tdata: series,\n\t\t\tindex,\n\t\t\tlegendShape,\n\t\t} );\n\n\t\tconst baseItem: BaseLegendItem = {\n\t\t\tlabel: series.label,\n\t\t\tvalue: showValues ? series.data?.length?.toString() || '0' : '',\n\t\t\tcolor,\n\t\t\tshapeStyle: shapeStyles,\n\t\t};\n\n\t\treturn applyGlyphToLegendItem( baseItem, withGlyph, glyph, renderGlyph, glyphSize );\n\t};\n\n\treturn seriesData.map( mapper );\n}\n\n/**\n * Processes point data into legend items\n * @param pointData          - The point data to process\n * @param getElementStyles   - Function to get element styles\n * @param showValues         - Whether to show values in legend\n * @param legendValueDisplay - What type of value to display\n * @param withGlyph          - Whether to include glyph rendering\n * @param glyphSize          - Size of the glyph\n * @param renderGlyph        - Component to render the glyph\n * @param legendShape        - The shape type for legend items (string literal or React component)\n * @return Array of processed legend items\n */\nfunction processPointData(\n\tpointData: ( DataPointDate | DataPointPercentage )[],\n\tgetElementStyles: ( params: GetElementStylesParams ) => ElementStyles,\n\tshowValues: boolean,\n\tlegendValueDisplay: LegendValueDisplay,\n\twithGlyph: boolean,\n\tglyphSize: number,\n\trenderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,\n\tlegendShape?: LegendShape< SeriesData[], number >\n): BaseLegendItem[] {\n\tconst mapper = ( point: DataPointDate | DataPointPercentage, index: number ) => {\n\t\tconst { color, glyph, shapeStyles } = getElementStyles( {\n\t\t\tdata: point as DataPointPercentage,\n\t\t\tindex,\n\t\t\tlegendShape,\n\t\t} );\n\n\t\tconst baseItem: BaseLegendItem = {\n\t\t\tlabel: point.label,\n\t\t\tvalue: formatPointValue( point, showValues, legendValueDisplay ),\n\t\t\tcolor,\n\t\t\tshapeStyle: shapeStyles,\n\t\t};\n\n\t\treturn applyGlyphToLegendItem( baseItem, withGlyph, glyph, renderGlyph, glyphSize );\n\t};\n\n\treturn pointData.map( mapper );\n}\n\n/**\n * Hook to transform chart data into legend items\n * @param data        - The chart data to transform\n * @param options     - Configuration options for legend generation\n * @param legendShape - The shape type for legend items (string literal or React component)\n * @return Array of legend items ready for display\n */\nexport function useChartLegendItems<\n\tT extends SeriesData[] | DataPointDate[] | DataPointPercentage[],\n>(\n\tdata: T,\n\toptions: ChartLegendOptions = {},\n\tlegendShape?: LegendShape< SeriesData[], number >\n): BaseLegendItem[] {\n\tconst {\n\t\tshowValues = false,\n\t\tlegendValueDisplay = 'percentage',\n\t\twithGlyph = false,\n\t\tglyphSize = 8,\n\t\trenderGlyph,\n\t} = options;\n\tconst { getElementStyles } = useGlobalChartsContext();\n\n\treturn useMemo( () => {\n\t\tif ( ! data || ! Array.isArray( data ) || data.length === 0 ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t// Handle SeriesData (multiple series with data points)\n\t\tif ( 'data' in data[ 0 ] ) {\n\t\t\treturn processSeriesData(\n\t\t\t\tdata as SeriesData[],\n\t\t\t\tgetElementStyles,\n\t\t\t\tshowValues,\n\t\t\t\twithGlyph,\n\t\t\t\tglyphSize,\n\t\t\t\trenderGlyph,\n\t\t\t\tlegendShape\n\t\t\t);\n\t\t}\n\n\t\t// Handle DataPointDate or DataPointPercentage (single data points)\n\t\treturn processPointData(\n\t\t\tdata as ( DataPointDate | DataPointPercentage )[],\n\t\t\tgetElementStyles,\n\t\t\tshowValues,\n\t\t\tlegendValueDisplay,\n\t\t\twithGlyph,\n\t\t\tglyphSize,\n\t\t\trenderGlyph,\n\t\t\tlegendShape\n\t\t);\n\t}, [\n\t\tdata,\n\t\tgetElementStyles,\n\t\tshowValues,\n\t\tlegendValueDisplay,\n\t\twithGlyph,\n\t\tglyphSize,\n\t\trenderGlyph,\n\t\tlegendShape,\n\t] );\n}\n"],"mappings":"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","names":["useContext","forwardRef","jsx","forwardRef","useContext","useMemo","useMemo"]}

package/dist/{chunk-EOYI6JHT.cjs → chunk-66JB3JZA.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkH43FBWWZcjs = require('./chunk-H43FBWWZ.cjs');
+var _chunk6GO5PFYLcjs = require('./chunk-6GO5PFYL.cjs');
 
 
 
@@ -13,7 +13,7 @@ var _chunkFX2PTUFCcjs = require('./chunk-FX2PTUFC.cjs');
 
 
 
-var _chunkSEPMBOVDcjs = require('./chunk-SEPMBOVD.cjs');
+var _chunkNRVZS2ICcjs = require('./chunk-NRVZS2IC.cjs');
 
 
 
@@ -22,7 +22,7 @@ var _chunkSEPMBOVDcjs = require('./chunk-SEPMBOVD.cjs');
 
 
 
-var _chunkM4OSG2EScjs = require('./chunk-M4OSG2ES.cjs');
+var _chunkRTUQVBUJcjs = require('./chunk-RTUQVBUJ.cjs');
 
 // src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx
 var _event = require('@visx/event');
@@ -70,27 +70,37 @@ var PieSemiCircleChartInternal = ({
   legendAlignment = "center",
   legendMaxWidth,
   legendTextOverflow = "wrap",
+  legendItemClassName,
   legendShape = "circle",
   legendValueDisplay = "percentage",
   label,
   note,
   className,
-  children
+  children,
+  tooltipOffsetX = 0,
+  tooltipOffsetY = -15
 }) => {
-  const chartId = _chunkM4OSG2EScjs.useChartId.call(void 0, providedChartId);
-  const [legendRef, legendHeight] = _chunkM4OSG2EScjs.useElementHeight.call(void 0, );
+  const chartId = _chunkRTUQVBUJcjs.useChartId.call(void 0, providedChartId);
+  const [legendRef, legendHeight] = _chunkRTUQVBUJcjs.useElementHeight.call(void 0, );
   const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = _tooltip.useTooltip.call(void 0, );
+  const { containerRef, TooltipInPortal } = _tooltip.useTooltipInPortal.call(void 0, {
+    detectBounds: true,
+    scroll: true,
+    debounce: 0
+  });
   const handleMouseMove = _react.useCallback.call(void 0, 
     (event, arc) => {
       const coords = _event.localPoint.call(void 0, event);
-      if (!coords) return;
-      showTooltip({
-        tooltipData: arc.data,
-        tooltipLeft: coords.x,
-        tooltipTop: coords.y - 10
-      });
+      if (coords) {
+        const legendOffset = showLegend && legendPosition === "top" ? legendHeight : 0;
+        showTooltip({
+          tooltipData: arc.data,
+          tooltipLeft: coords.x + tooltipOffsetX,
+          tooltipTop: coords.y + legendOffset + tooltipOffsetY
+        });
+      }
     },
-    [showTooltip]
+    [showTooltip, tooltipOffsetX, tooltipOffsetY, showLegend, legendPosition, legendHeight]
   );
   const handleMouseLeave = _react.useCallback.call(void 0, () => {
     hideTooltip();
@@ -102,7 +112,7 @@ var PieSemiCircleChartInternal = ({
     [handleMouseMove]
   );
   const { isValid, message } = validateData(data);
-  const { getElementStyles } = _chunkM4OSG2EScjs.useGlobalChartsContext.call(void 0, );
+  const { getElementStyles } = _chunkRTUQVBUJcjs.useGlobalChartsContext.call(void 0, );
   const accessors = _react.useMemo.call(void 0, 
     () => ({
       value: (d) => d.value,
@@ -115,7 +125,7 @@ var PieSemiCircleChartInternal = ({
     () => ({ showValues: true, legendValueDisplay }),
     [legendValueDisplay]
   );
-  const legendItems = _chunkSEPMBOVDcjs.useChartLegendItems.call(void 0, data, legendOptions);
+  const legendItems = _chunkNRVZS2ICcjs.useChartLegendItems.call(void 0, data, legendOptions);
   const { svgChildren, htmlChildren, otherChildren } = _chunk3Z526IL2cjs.useChartChildren.call(void 0, 
     children,
     "PieSemiCircleChart"
@@ -127,7 +137,7 @@ var PieSemiCircleChartInternal = ({
     }),
     [thickness, clockwise]
   );
-  _chunkM4OSG2EScjs.useChartRegistration.call(void 0, {
+  _chunkRTUQVBUJcjs.useChartRegistration.call(void 0, {
     chartId,
     legendItems,
     chartType: "pie-semi-circle",
@@ -148,7 +158,7 @@ var PieSemiCircleChartInternal = ({
   const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
   const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkSEPMBOVDcjs.SingleChartContext.Provider,
+    _chunkNRVZS2ICcjs.SingleChartContext.Provider,
     {
       value: {
         chartId,
@@ -158,6 +168,7 @@ var PieSemiCircleChartInternal = ({
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "div",
         {
+          ref: containerRef,
           className: _clsx2.default.call(void 0, "pie-semi-circle-chart", pie_semi_circle_chart_module_default["pie-semi-circle-chart"], className),
           "data-testid": "pie-chart-container",
           style: {
@@ -189,8 +200,8 @@ var PieSemiCircleChartInternal = ({
                         return pie.arcs.map((arc) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                           "g",
                           {
-                            onMouseMove: handleArcMouseMove(arc),
-                            onMouseLeave: handleMouseLeave,
+                            onMouseMove: withTooltips ? handleArcMouseMove(arc) : void 0,
+                            onMouseLeave: withTooltips ? handleMouseLeave : void 0,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                               "path",
                               {
@@ -231,26 +242,16 @@ var PieSemiCircleChartInternal = ({
                 ] })
               }
             ),
-            withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkH43FBWWZcjs.BaseTooltip,
-              {
-                data: {
-                  label: tooltipData.label,
-                  value: tooltipData.value,
-                  valueDisplay: tooltipData.valueDisplay
-                },
-                top: tooltipTop || 0,
-                left: tooltipLeft || 0
-              }
-            ),
+            withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipInPortal, { top: tooltipTop || 0, left: tooltipLeft || 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "tooltip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6GO5PFYLcjs.BaseTooltip, { data: tooltipData, top: 0, left: 0, renderContainer: false }) }) }),
             showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkSEPMBOVDcjs.Legend,
+              _chunkNRVZS2ICcjs.Legend,
               {
                 orientation: legendOrientation,
                 position: legendPosition,
                 alignment: legendAlignment,
                 maxWidth: legendMaxWidth,
                 textOverflow: legendTextOverflow,
+                legendItemClassName,
                 shape: legendShape,
                 ref: legendRef,
                 chartId
@@ -265,22 +266,22 @@ var PieSemiCircleChartInternal = ({
   );
 };
 var PieSemiCircleChartWithProvider = (props) => {
-  const existingContext = _react.useContext.call(void 0, _chunkM4OSG2EScjs.GlobalChartsContext);
+  const existingContext = _react.useContext.call(void 0, _chunkRTUQVBUJcjs.GlobalChartsContext);
   if (existingContext) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, { ...props });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkM4OSG2EScjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, { ...props }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRTUQVBUJcjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, { ...props }) });
 };
 PieSemiCircleChartWithProvider.displayName = "PieSemiCircleChart";
-var PieSemiCircleChart = _chunkM4OSG2EScjs.attachSubComponents.call(void 0, PieSemiCircleChartWithProvider, {
-  Legend: _chunkSEPMBOVDcjs.Legend,
+var PieSemiCircleChart = _chunkRTUQVBUJcjs.attachSubComponents.call(void 0, PieSemiCircleChartWithProvider, {
+  Legend: _chunkNRVZS2ICcjs.Legend,
   SVG: _chunk3Z526IL2cjs.ChartSVG,
   HTML: _chunk3Z526IL2cjs.ChartHTML
 });
-var PieSemiCircleChartResponsive = _chunkM4OSG2EScjs.attachSubComponents.call(void 0, 
+var PieSemiCircleChartResponsive = _chunkRTUQVBUJcjs.attachSubComponents.call(void 0, 
   _chunkFX2PTUFCcjs.withResponsive.call(void 0, PieSemiCircleChartWithProvider),
   {
-    Legend: _chunkSEPMBOVDcjs.Legend,
+    Legend: _chunkNRVZS2ICcjs.Legend,
     SVG: _chunk3Z526IL2cjs.ChartSVG,
     HTML: _chunk3Z526IL2cjs.ChartHTML
   }
@@ -290,4 +291,4 @@ var PieSemiCircleChartResponsive = _chunkM4OSG2EScjs.attachSubComponents.call(vo
 
 
 exports.PieSemiCircleChart = PieSemiCircleChart; exports.PieSemiCircleChartResponsive = PieSemiCircleChartResponsive;
-//# sourceMappingURL=chunk-EOYI6JHT.cjs.map
+//# sourceMappingURL=chunk-66JB3JZA.cjs.map

package/dist/chunk-66JB3JZA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-66JB3JZA.cjs","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-66JB3JZA.cjs","sourcesContent":[null,"import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { Text } from '@visx/text';\nimport { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useElementHeight } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tGlobalChartsContext,\n} from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-semi-circle-chart.module.scss';\nimport type { BaseChartProps, DataPointPercentage, Optional } from '../../types';\nimport type { LegendValueDisplay } from '../legend';\nimport type { ChartComponentWithComposition } from '../private/chart-composition';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport type { FC, MouseEvent, ReactNode } from 'react';\n\nconst PAD_ANGLE = 0.03; // Padding between segments\n\nexport interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Width of the chart in pixels; height would be half of this value calculated automatically.\n\t */\n\twidth?: number;\n\n\t/**\n\t * Thickness of the pie chart. A value between 0 and 1\n\t */\n\tthickness?: number;\n\n\t/**\n\t * Direction of chart rendering\n\t * true for clockwise, false for counter-clockwise\n\t */\n\tclockwise?: boolean;\n\n\t/**\n\t * Label text to display above the chart\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Note text to display below the label\n\t */\n\tnote?: string;\n\n\t/**\n\t * Use the children prop to render additional elements on the chart.\n\t */\n\tchildren?: ReactNode;\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 * Horizontal offset for tooltip positioning in pixels (default: 0)\n\t */\n\ttooltipOffsetX?: number;\n\n\t/**\n\t * Vertical offset for tooltip positioning in pixels (default: -15)\n\t */\n\ttooltipOffsetY?: number;\n}\n\n// Base props type with optional responsive properties\ntype PieSemiCircleChartBaseProps = Optional< PieSemiCircleChartProps, 'width' >;\n\n// Composition API types\ntype PieSemiCircleChartComponent = ChartComponentWithComposition< PieSemiCircleChartBaseProps >;\ntype PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<\n\tPieSemiCircleChartBaseProps & ResponsiveConfig\n>;\n\nexport type ArcData = PieArcDatum< DataPointPercentage >;\n\n/**\n * Validates the semi-circle 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 is greater than 0\n\tconst totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );\n\tif ( totalPercentage <= 0 ) {\n\t\treturn { isValid: false, message: 'Invalid percentage total: Must be greater than 0' };\n\t}\n\n\treturn { isValid: true, message: '' };\n};\n\nconst PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth = 400,\n\tthickness = 0.4,\n\tclockwise = true,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendMaxWidth,\n\tlegendTextOverflow = 'wrap',\n\tlegendItemClassName,\n\tlegendShape = 'circle',\n\tlegendValueDisplay = 'percentage',\n\tlabel,\n\tnote,\n\tclassName,\n\tchildren,\n\ttooltipOffsetX = 0,\n\ttooltipOffsetY = -15,\n} ) => {\n\tconst chartId = useChartId( providedChartId );\n\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< DataPointPercentage >();\n\n\t// Set up portal tooltip for better z-index handling\n\tconst { containerRef, TooltipInPortal } = useTooltipInPortal( {\n\t\tdetectBounds: true,\n\t\tscroll: true,\n\t\tdebounce: 0,\n\t} );\n\n\tconst handleMouseMove = useCallback(\n\t\t( event: MouseEvent< SVGElement >, arc: ArcData ) => {\n\t\t\t// Get coordinates relative to the current target element\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( coords ) {\n\t\t\t\t// Account for legend offset when legend is on top\n\t\t\t\tconst legendOffset = showLegend && legendPosition === 'top' ? legendHeight : 0;\n\t\t\t\tshowTooltip( {\n\t\t\t\t\ttooltipData: arc.data,\n\t\t\t\t\ttooltipLeft: coords.x + tooltipOffsetX,\n\t\t\t\t\ttooltipTop: coords.y + legendOffset + tooltipOffsetY,\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[ showTooltip, tooltipOffsetX, tooltipOffsetY, showLegend, legendPosition, legendHeight ]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tconst handleArcMouseMove = useCallback(\n\t\t( arc: ArcData ) => ( event: MouseEvent< SVGElement > ) => {\n\t\t\thandleMouseMove( event, arc );\n\t\t},\n\t\t[ handleMouseMove ]\n\t);\n\n\t// Validate data first to get validation result\n\tconst { isValid, message } = validateData( data );\n\n\tconst { getElementStyles } = useGlobalChartsContext();\n\n\t// Define accessors with useMemo to avoid changing dependencies\n\tconst accessors = useMemo(\n\t\t() => ( {\n\t\t\tvalue: ( d: DataPointPercentage ) => d.value,\n\t\t\tsort: (\n\t\t\t\ta: DataPointPercentage & { index: number },\n\t\t\t\tb: DataPointPercentage & { index: number }\n\t\t\t) => b.value - a.value,\n\t\t\tfill: ( d: DataPointPercentage & { index: number } ) =>\n\t\t\t\tgetElementStyles( { data: d, index: d.index } ).color,\n\t\t} ),\n\t\t[ getElementStyles ]\n\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\t// Process children to extract compound components\n\tconst { svgChildren, htmlChildren, otherChildren } = useChartChildren(\n\t\tchildren,\n\t\t'PieSemiCircleChart'\n\t);\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\tthickness,\n\t\t\tclockwise,\n\t\t} ),\n\t\t[ thickness, clockwise ]\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-semi-circle',\n\t\tisDataValid: isValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tif ( ! isValid ) {\n\t\treturn (\n\t\t\t<div className={ styles[ 'pie-semi-circle-chart' ] }>\n\t\t\t\t<svg width={ width } height={ width / 2 } data-testid=\"pie-chart-svg\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" textAnchor=\"middle\" className={ styles.error }>\n\t\t\t\t\t\t{ message }\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Calculate chart dimensions\n\t// TODO: we might want to accept height as a prop in the future, because the height of container might not always be enough.\n\tconst height = width / 2;\n\t// The chart only takes the height minus the legend height.\n\tconst chartHeight = height - ( showLegend && legendPosition === 'top' ? legendHeight : 0 );\n\tconst radius = Math.min( width / 2, chartHeight );\n\tconst innerRadius = radius * ( 1 - thickness );\n\n\t// Map data with index for color assignment\n\tconst dataWithIndex = data.map( ( d, index ) => ( {\n\t\t...d,\n\t\tindex,\n\t} ) );\n\n\t// Configure pie angles based on clockwise direction\n\tconst startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n\tconst endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\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: radius,\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ containerRef }\n\t\t\t\tclassName={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }\n\t\t\t\tdata-testid=\"pie-chart-container\"\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\twidth={ width }\n\t\t\t\t\theight={ radius }\n\t\t\t\t\tviewBox={ `0 0 ${ width } ${ chartHeight }` }\n\t\t\t\t\tdata-testid=\"pie-chart-svg\"\n\t\t\t\t>\n\t\t\t\t\t{ /* Main chart group centered horizontally and positioned at bottom */ }\n\t\t\t\t\t<Group top={ chartHeight } left={ width / 2 }>\n\t\t\t\t\t\t{ /* Pie chart */ }\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={ radius }\n\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\tcornerRadius={ 3 }\n\t\t\t\t\t\t\tpadAngle={ PAD_ANGLE }\n\t\t\t\t\t\t\tstartAngle={ startAngle }\n\t\t\t\t\t\t\tendAngle={ endAngle }\n\t\t\t\t\t\t\tpieSort={ accessors.sort }\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 => (\n\t\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\t\tkey={ arc.data.label }\n\t\t\t\t\t\t\t\t\t\tonMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={ withTooltips ? handleMouseLeave : undefined }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\td={ pie.path( arc ) || '' }\n\t\t\t\t\t\t\t\t\t\t\tfill={ accessors.fill( arc.data ) }\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"pie-segment\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</g>\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{ /* Label and note text */ }\n\t\t\t\t\t\t<Group>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -40 } // Position above the chart with space for note\n\t\t\t\t\t\t\t\tclassName={ styles.label }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -20 } // Position between label and chart\n\t\t\t\t\t\t\t\tclassName={ styles.note }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ note }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Group>\n\n\t\t\t\t\t\t{ /* Render SVG children from composition API */ }\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{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t\t<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>\n\t\t\t\t\t\t<div role=\"tooltip\">\n\t\t\t\t\t\t\t<BaseTooltip data={ tooltipData } top={ 0 } left={ 0 } renderContainer={ false } />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</TooltipInPortal>\n\t\t\t\t) }\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\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\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{ /* Render HTML children from composition API */ }\n\t\t\t\t{ htmlChildren }\n\n\t\t\t\t{ /* Render any other children that aren't compound components */ }\n\t\t\t\t{ otherChildren }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst PieSemiCircleChartWithProvider: FC< PieSemiCircleChartProps > = 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 <PieSemiCircleChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<PieSemiCircleChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nPieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';\n\n// Create PieSemiCircleChart with composition API\nconst PieSemiCircleChart = attachSubComponents( PieSemiCircleChartWithProvider, {\n\tLegend: Legend,\n\tSVG: ChartSVG,\n\tHTML: ChartHTML,\n} ) as PieSemiCircleChartComponent;\n\n// Create responsive PieSemiCircleChart with composition API\nconst PieSemiCircleChartResponsive = attachSubComponents(\n\twithResponsive< PieSemiCircleChartProps >( PieSemiCircleChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tSVG: ChartSVG,\n\t\tHTML: ChartHTML,\n\t}\n) as PieSemiCircleChartResponsiveComponent;\n\nexport {\n\tPieSemiCircleChartResponsive as default,\n\tPieSemiCircleChart as PieSemiCircleChartUnresponsive,\n};\n","import 'css-chunk:src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n  \"pie-semi-circle-chart\": \"a8ccharts-r5jk9c\",\n  \"label\": \"a8ccharts-nPqOgD\",\n  \"note\": \"a8ccharts-LpBZQh\"\n};"]}