@automattic/charts 0.44.0 → 0.45.0

package/dist/{chunk-ZA7OWPY7.cjs → chunk-VOMSG7KV.cjs}

@@ -13,7 +13,7 @@ var _chunkFX2PTUFCcjs = require('./chunk-FX2PTUFC.cjs');
 
 
 
-var _chunkGK3XEXVIcjs = require('./chunk-GK3XEXVI.cjs');
+var _chunkPNSMPZ3Ecjs = require('./chunk-PNSMPZ3E.cjs');
 
 
 
@@ -22,7 +22,8 @@ var _chunkGK3XEXVIcjs = require('./chunk-GK3XEXVI.cjs');
 
 
 
-var _chunk2HUX2CATcjs = require('./chunk-2HUX2CAT.cjs');
+
+var _chunkLSGYIUQXcjs = require('./chunk-LSGYIUQX.cjs');
 
 // src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx
 var _event = require('@visx/event');
@@ -30,6 +31,7 @@ var _group = require('@visx/group');
 var _shape = require('@visx/shape');
 var _text = require('@visx/text');
 var _tooltip = require('@visx/tooltip');
+var _i18n = require('@wordpress/i18n');
 var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
 var _react = require('react');
 
@@ -73,6 +75,7 @@ var PieSemiCircleChartInternal = ({
   legendItemClassName,
   legendShape = "circle",
   legendValueDisplay = "percentage",
+  legendInteractive = false,
   label,
   note,
   className,
@@ -80,8 +83,8 @@ var PieSemiCircleChartInternal = ({
   tooltipOffsetX = 0,
   tooltipOffsetY = -15
 }) => {
-  const chartId = _chunk2HUX2CATcjs.useChartId.call(void 0, providedChartId);
-  const [legendRef, legendHeight] = _chunk2HUX2CATcjs.useElementHeight.call(void 0, );
+  const chartId = _chunkLSGYIUQXcjs.useChartId.call(void 0, providedChartId);
+  const [legendRef, legendHeight] = _chunkLSGYIUQXcjs.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,
@@ -112,7 +115,13 @@ var PieSemiCircleChartInternal = ({
     [handleMouseMove]
   );
   const { isValid, message } = validateData(data);
-  const { getElementStyles } = _chunk2HUX2CATcjs.useGlobalChartsContext.call(void 0, );
+  const { getElementStyles, isSeriesVisible } = _chunkLSGYIUQXcjs.useGlobalChartsContext.call(void 0, );
+  const { visibleData, allSegmentsHidden, legendData } = _chunkLSGYIUQXcjs.useInteractiveLegendData.call(void 0, {
+    data,
+    chartId,
+    legendInteractive,
+    isSeriesVisible
+  });
   const accessors = _react.useMemo.call(void 0, 
     () => ({
       value: (d) => d.value,
@@ -125,7 +134,7 @@ var PieSemiCircleChartInternal = ({
     () => ({ showValues: true, legendValueDisplay }),
     [legendValueDisplay]
   );
-  const legendItems = _chunkGK3XEXVIcjs.useChartLegendItems.call(void 0, data, legendOptions);
+  const legendItems = _chunkPNSMPZ3Ecjs.useChartLegendItems.call(void 0, legendData, legendOptions);
   const { svgChildren, htmlChildren, otherChildren } = _chunk3Z526IL2cjs.useChartChildren.call(void 0, 
     children,
     "PieSemiCircleChart"
@@ -137,7 +146,7 @@ var PieSemiCircleChartInternal = ({
     }),
     [thickness, clockwise]
   );
-  _chunk2HUX2CATcjs.useChartRegistration.call(void 0, {
+  _chunkLSGYIUQXcjs.useChartRegistration.call(void 0, {
     chartId,
     legendItems,
     chartType: "pie-semi-circle",
@@ -151,14 +160,17 @@ var PieSemiCircleChartInternal = ({
   const chartHeight = height - (showLegend && legendPosition === "top" ? legendHeight : 0);
   const radius = Math.min(width / 2, chartHeight);
   const innerRadius = radius * (1 - thickness);
-  const dataWithIndex = data.map((d, index) => ({
-    ...d,
-    index
-  }));
+  const dataWithIndex = visibleData.map((d) => {
+    const originalIndex = data.findIndex((item) => item.label === d.label);
+    return {
+      ...d,
+      index: originalIndex >= 0 ? originalIndex : 0
+    };
+  });
   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, 
-    _chunkGK3XEXVIcjs.SingleChartContext.Provider,
+    _chunkPNSMPZ3Ecjs.SingleChartContext.Provider,
     {
       value: {
         chartId,
@@ -183,7 +195,20 @@ var PieSemiCircleChartInternal = ({
                 height: radius,
                 viewBox: `0 0 ${width} ${chartHeight}`,
                 "data-testid": "pie-chart-svg",
-                children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _group.Group, { top: chartHeight, left: width / 2, children: [
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _group.Group, { top: chartHeight, left: width / 2, children: allSegmentsHidden ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "text",
+                  {
+                    textAnchor: "middle",
+                    y: -radius / 2,
+                    fill: "#ccc",
+                    fontSize: "14",
+                    fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
+                    children: _i18n.__.call(void 0, 
+                      "All segments are hidden. Click legend items to show data.",
+                      "jetpack-charts"
+                    )
+                  }
+                ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     _shape.Pie,
                     {
@@ -238,13 +263,13 @@ var PieSemiCircleChartInternal = ({
                       }
                     )
                   ] }),
-                  svgChildren
-                ] })
+                  !allSegmentsHidden && svgChildren
+                ] }) })
               }
             ),
             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, 
-              _chunkGK3XEXVIcjs.Legend,
+              _chunkPNSMPZ3Ecjs.Legend,
               {
                 orientation: legendOrientation,
                 position: legendPosition,
@@ -254,7 +279,8 @@ var PieSemiCircleChartInternal = ({
                 legendItemClassName,
                 shape: legendShape,
                 ref: legendRef,
-                chartId
+                chartId,
+                interactive: legendInteractive
               }
             ),
             htmlChildren,
@@ -266,22 +292,22 @@ var PieSemiCircleChartInternal = ({
   );
 };
 var PieSemiCircleChartWithProvider = (props) => {
-  const existingContext = _react.useContext.call(void 0, _chunk2HUX2CATcjs.GlobalChartsContext);
+  const existingContext = _react.useContext.call(void 0, _chunkLSGYIUQXcjs.GlobalChartsContext);
   if (existingContext) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, { ...props });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2HUX2CATcjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, { ...props }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLSGYIUQXcjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, { ...props }) });
 };
 PieSemiCircleChartWithProvider.displayName = "PieSemiCircleChart";
-var PieSemiCircleChart = _chunk2HUX2CATcjs.attachSubComponents.call(void 0, PieSemiCircleChartWithProvider, {
-  Legend: _chunkGK3XEXVIcjs.Legend,
+var PieSemiCircleChart = _chunkLSGYIUQXcjs.attachSubComponents.call(void 0, PieSemiCircleChartWithProvider, {
+  Legend: _chunkPNSMPZ3Ecjs.Legend,
   SVG: _chunk3Z526IL2cjs.ChartSVG,
   HTML: _chunk3Z526IL2cjs.ChartHTML
 });
-var PieSemiCircleChartResponsive = _chunk2HUX2CATcjs.attachSubComponents.call(void 0, 
+var PieSemiCircleChartResponsive = _chunkLSGYIUQXcjs.attachSubComponents.call(void 0, 
   _chunkFX2PTUFCcjs.withResponsive.call(void 0, PieSemiCircleChartWithProvider),
   {
-    Legend: _chunkGK3XEXVIcjs.Legend,
+    Legend: _chunkPNSMPZ3Ecjs.Legend,
     SVG: _chunk3Z526IL2cjs.ChartSVG,
     HTML: _chunk3Z526IL2cjs.ChartHTML
   }
@@ -291,4 +317,4 @@ var PieSemiCircleChartResponsive = _chunk2HUX2CATcjs.attachSubComponents.call(vo
 
 
 exports.PieSemiCircleChart = PieSemiCircleChart; exports.PieSemiCircleChartResponsive = PieSemiCircleChartResponsive;
-//# sourceMappingURL=chunk-ZA7OWPY7.cjs.map
+//# sourceMappingURL=chunk-VOMSG7KV.cjs.map

package/dist/chunk-VOMSG7KV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-VOMSG7KV.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-VOMSG7KV.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 { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useElementHeight, useInteractiveLegendData } 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 * Enable interactive legend items that can toggle segment visibility.\n\t * Requires chartId and GlobalChartsProvider.\n\t * When segments are hidden, percentages are recalculated so visible segments total 100%.\n\t */\n\tlegendInteractive?: boolean;\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\tlegendInteractive = false,\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, isSeriesVisible } = useGlobalChartsContext();\n\n\t// Filter and recalculate data for interactive legends\n\tconst { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {\n\t\tdata,\n\t\tchartId,\n\t\tlegendInteractive,\n\t\tisSeriesVisible,\n\t} );\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 legendData (has recalculated percentages for visible items)\n\tconst legendItems = useChartLegendItems( legendData, 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\t// When interactive, we need to find the original index to maintain consistent colors\n\tconst dataWithIndex = visibleData.map( d => {\n\t\tconst originalIndex = data.findIndex( item => item.label === d.label );\n\t\treturn {\n\t\t\t...d,\n\t\t\tindex: originalIndex >= 0 ? originalIndex : 0,\n\t\t};\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{ allSegmentsHidden ? (\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\ty={ -radius / 2 }\n\t\t\t\t\t\t\t\tfill=\"#ccc\"\n\t\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\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\t'All segments are hidden. Click legend items to show data.',\n\t\t\t\t\t\t\t\t\t'jetpack-charts'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{ /* Pie chart */ }\n\t\t\t\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\t\t\t\touterRadius={ radius }\n\t\t\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\t\t\tcornerRadius={ 3 }\n\t\t\t\t\t\t\t\t\tpadAngle={ PAD_ANGLE }\n\t\t\t\t\t\t\t\t\tstartAngle={ startAngle }\n\t\t\t\t\t\t\t\t\tendAngle={ endAngle }\n\t\t\t\t\t\t\t\t\tpieSort={ accessors.sort }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\t\t\t\treturn pie.arcs.map( arc => (\n\t\t\t\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ arc.data.label }\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseLeave={ withTooltips ? handleMouseLeave : undefined }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\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\t\t\tfill={ accessors.fill( arc.data ) }\n\t\t\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\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t\t\t) );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t</Pie>\n\n\t\t\t\t\t\t\t\t{ /* Label and note text */ }\n\t\t\t\t\t\t\t\t<Group>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\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\t\t\tclassName={ styles.label }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\t\t\ty={ -20 } // Position between label and chart\n\t\t\t\t\t\t\t\t\t\tclassName={ styles.note }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ note }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Group>\n\n\t\t\t\t\t\t\t\t{ /* Render SVG children from composition API */ }\n\t\t\t\t\t\t\t\t{ ! allSegmentsHidden && svgChildren }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\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\tinteractive={ legendInteractive }\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};"]}

package/dist/{chunk-QLLKOSJ6.cjs → chunk-YKVKFUV7.cjs}

@@ -16,7 +16,7 @@ var _chunkFX2PTUFCcjs = require('./chunk-FX2PTUFC.cjs');
 
 
 
-var _chunkGK3XEXVIcjs = require('./chunk-GK3XEXVI.cjs');
+var _chunkPNSMPZ3Ecjs = require('./chunk-PNSMPZ3E.cjs');
 
 
 
@@ -26,13 +26,15 @@ var _chunkGK3XEXVIcjs = require('./chunk-GK3XEXVI.cjs');
 
 
 
-var _chunk2HUX2CATcjs = require('./chunk-2HUX2CAT.cjs');
+
+var _chunkLSGYIUQXcjs = require('./chunk-LSGYIUQX.cjs');
 
 // src/components/pie-chart/pie-chart.tsx
 var _event = require('@visx/event');
 var _group = require('@visx/group');
 var _shape = require('@visx/shape');
 var _tooltip = require('@visx/tooltip');
+var _i18n = require('@wordpress/i18n');
 var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
 var _react = require('react');
 
@@ -77,13 +79,14 @@ var PieChartInternal = ({
   cornerScale = 0,
   showLabels = true,
   legendValueDisplay = "percentage",
+  legendInteractive = false,
   children = null,
   tooltipOffsetX = 0,
   tooltipOffsetY = -15
 }) => {
-  const providerTheme = _chunk2HUX2CATcjs.useGlobalChartsTheme.call(void 0, );
-  const chartId = _chunk2HUX2CATcjs.useChartId.call(void 0, providedChartId);
-  const [legendRef, legendHeight] = _chunk2HUX2CATcjs.useElementHeight.call(void 0, );
+  const providerTheme = _chunkLSGYIUQXcjs.useGlobalChartsTheme.call(void 0, );
+  const chartId = _chunkLSGYIUQXcjs.useChartId.call(void 0, providedChartId);
+  const [legendRef, legendHeight] = _chunkLSGYIUQXcjs.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,
@@ -96,11 +99,18 @@ var PieChartInternal = ({
     }
     hideTooltip();
   }, [withTooltips, hideTooltip]);
+  const { getElementStyles, isSeriesVisible } = _chunkLSGYIUQXcjs.useGlobalChartsContext.call(void 0, );
+  const { visibleData, allSegmentsHidden, legendData } = _chunkLSGYIUQXcjs.useInteractiveLegendData.call(void 0, {
+    data,
+    chartId,
+    legendInteractive,
+    isSeriesVisible
+  });
   const legendOptions = _react.useMemo.call(void 0, 
     () => ({ showValues: true, legendValueDisplay }),
     [legendValueDisplay]
   );
-  const legendItems = _chunkGK3XEXVIcjs.useChartLegendItems.call(void 0, data, legendOptions);
+  const legendItems = _chunkPNSMPZ3Ecjs.useChartLegendItems.call(void 0, legendData, legendOptions);
   const { isValid, message } = validateData(data);
   const { svgChildren, htmlChildren, otherChildren } = _chunk3Z526IL2cjs.useChartChildren.call(void 0, children, "PieChart");
   const chartMetadata = _react.useMemo.call(void 0, 
@@ -111,14 +121,13 @@ var PieChartInternal = ({
     }),
     [thickness, gapScale, cornerScale]
   );
-  _chunk2HUX2CATcjs.useChartRegistration.call(void 0, {
+  _chunkLSGYIUQXcjs.useChartRegistration.call(void 0, {
     chartId,
     legendItems,
     chartType: "pie",
     isDataValid: isValid,
     metadata: chartMetadata
   });
-  const { getElementStyles } = _chunk2HUX2CATcjs.useGlobalChartsContext.call(void 0, );
   if (!isValid) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _clsx2.default.call(void 0, "pie-chart", pie_chart_module_default["pie-chart"], className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: pie_chart_module_default["error-message"], children: message }) });
   }
@@ -133,10 +142,13 @@ var PieChartInternal = ({
   const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);
   const maxCornerRadius = (outerRadius - innerRadius) / 2;
   const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;
-  const dataWithIndex = data.map((d, index) => ({
-    ...d,
-    index
-  }));
+  const dataWithIndex = visibleData.map((d) => {
+    const originalIndex = data.findIndex((item) => item.label === d.label);
+    return {
+      ...d,
+      index: originalIndex >= 0 ? originalIndex : 0
+    };
+  });
   const accessors = {
     value: (d) => d.value,
     fill: (d) => {
@@ -144,7 +156,7 @@ var PieChartInternal = ({
     }
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkGK3XEXVIcjs.SingleChartContext.Provider,
+    _chunkPNSMPZ3Ecjs.SingleChartContext.Provider,
     {
       value: {
         chartId,
@@ -169,7 +181,20 @@ var PieChartInternal = ({
                 width,
                 height: adjustedHeight,
                 children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _group.Group, { top: centerY, left: centerX, children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  allSegmentsHidden ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "text",
+                    {
+                      textAnchor: "middle",
+                      dy: ".33em",
+                      fill: providerTheme.gridColor || "#ccc",
+                      fontSize: "14",
+                      fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
+                      children: _i18n.__.call(void 0, 
+                        "All segments are hidden. Click legend items to show data.",
+                        "jetpack-charts"
+                      )
+                    }
+                  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     _shape.Pie,
                     {
                       data: dataWithIndex,
@@ -246,12 +271,12 @@ var PieChartInternal = ({
                       }
                     }
                   ),
-                  svgChildren
+                  !allSegmentsHidden && svgChildren
                 ] })
               }
             ),
             showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkGK3XEXVIcjs.Legend,
+              _chunkPNSMPZ3Ecjs.Legend,
               {
                 orientation: legendOrientation,
                 position: legendPosition,
@@ -262,7 +287,8 @@ var PieChartInternal = ({
                 className: pie_chart_module_default["pie-chart-legend"],
                 shape: legendShape,
                 ref: legendRef,
-                chartId
+                chartId,
+                interactive: legendInteractive
               }
             ),
             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 }) }) }),
@@ -275,22 +301,22 @@ var PieChartInternal = ({
   );
 };
 var PieChartWithProvider = (props) => {
-  const existingContext = _react.useContext.call(void 0, _chunk2HUX2CATcjs.GlobalChartsContext);
+  const existingContext = _react.useContext.call(void 0, _chunkLSGYIUQXcjs.GlobalChartsContext);
   if (existingContext) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieChartInternal, { ...props });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2HUX2CATcjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieChartInternal, { ...props }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLSGYIUQXcjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieChartInternal, { ...props }) });
 };
 PieChartWithProvider.displayName = "PieChart";
-var PieChart = _chunk2HUX2CATcjs.attachSubComponents.call(void 0, PieChartWithProvider, {
-  Legend: _chunkGK3XEXVIcjs.Legend,
+var PieChart = _chunkLSGYIUQXcjs.attachSubComponents.call(void 0, PieChartWithProvider, {
+  Legend: _chunkPNSMPZ3Ecjs.Legend,
   SVG: _chunk3Z526IL2cjs.ChartSVG,
   HTML: _chunk3Z526IL2cjs.ChartHTML
 });
-var PieChartResponsive = _chunk2HUX2CATcjs.attachSubComponents.call(void 0, 
+var PieChartResponsive = _chunkLSGYIUQXcjs.attachSubComponents.call(void 0, 
   _chunkFX2PTUFCcjs.withResponsive.call(void 0, PieChartWithProvider),
   {
-    Legend: _chunkGK3XEXVIcjs.Legend,
+    Legend: _chunkPNSMPZ3Ecjs.Legend,
     SVG: _chunk3Z526IL2cjs.ChartSVG,
     HTML: _chunk3Z526IL2cjs.ChartHTML
   }
@@ -300,4 +326,4 @@ var PieChartResponsive = _chunk2HUX2CATcjs.attachSubComponents.call(void 0,
 
 
 exports.PieChart = PieChart; exports.PieChartResponsive = PieChartResponsive;
-//# sourceMappingURL=chunk-QLLKOSJ6.cjs.map
+//# sourceMappingURL=chunk-YKVKFUV7.cjs.map

package/dist/chunk-YKVKFUV7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-YKVKFUV7.cjs","../src/components/pie-chart/pie-chart.tsx","../src/components/pie-chart/pie-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-YKVKFUV7.cjs","sourcesContent":[null,"import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useElementHeight, useInteractiveLegendData } 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 * Enable interactive legend items that can toggle segment visibility.\n\t * Requires chartId and GlobalChartsProvider.\n\t * When segments are hidden, percentages are recalculated so visible segments total 100%.\n\t */\n\tlegendInteractive?: boolean;\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 = 0,\n\tgapScale = 0,\n\tcornerScale = 0,\n\tshowLabels = true,\n\tlegendValueDisplay = 'percentage',\n\tlegendInteractive = false,\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\tconst { getElementStyles, isSeriesVisible } = useGlobalChartsContext();\n\n\t// Filter and recalculate data for interactive legends\n\tconst { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {\n\t\tdata,\n\t\tchartId,\n\t\tlegendInteractive,\n\t\tisSeriesVisible,\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 legendData (has recalculated percentages for visible items)\n\tconst legendItems = useChartLegendItems( legendData, 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\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 (use original data length for consistent spacing)\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\t// When interactive, we need to find the original index to maintain consistent colors\n\tconst dataWithIndex = visibleData.map( d => {\n\t\tconst originalIndex = data.findIndex( item => item.label === d.label );\n\t\treturn {\n\t\t\t...d,\n\t\t\tindex: originalIndex >= 0 ? originalIndex : 0,\n\t\t};\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{ allSegmentsHidden ? (\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\tdy=\".33em\"\n\t\t\t\t\t\t\t\tfill={ providerTheme.gridColor || '#ccc' }\n\t\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\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\t'All segments are hidden. Click legend items to show data.',\n\t\t\t\t\t\t\t\t\t'jetpack-charts'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\t\t\touterRadius={ outerRadius }\n\t\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\t\tpadAngle={ padAngle }\n\t\t\t\t\t\t\t\tcornerRadius={ cornerRadius }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\t\t\treturn pie.arcs.map( ( arc, index ) => {\n\t\t\t\t\t\t\t\t\t\tconst [ centroidX, centroidY ] = pie.path.centroid( arc );\n\t\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\t\tconst handleMouseMove = ( event: MouseEvent< SVGElement > ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( ! withTooltips ) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\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\t\tconst coords = localPoint( event );\n\t\t\t\t\t\t\t\t\t\t\tif ( coords ) {\n\t\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\t\tconst legendOffset =\n\t\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\t\tshowTooltip( {\n\t\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\t\ttooltipLeft: coords.x + tooltipOffsetX,\n\t\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\t} );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t};\n\n\t\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\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\t'data-testid': 'pie-segment',\n\t\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\t\tconst groupProps: SVGProps< SVGGElement > = {};\n\t\t\t\t\t\t\t\t\t\tif ( withTooltips ) {\n\t\t\t\t\t\t\t\t\t\t\tgroupProps.onMouseMove = handleMouseMove;\n\t\t\t\t\t\t\t\t\t\t\tgroupProps.onMouseLeave = onMouseLeave;\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\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\t\tconst fontSize = 12;\n\t\t\t\t\t\t\t\t\t\tconst estimatedTextWidth = getStringWidth( arc.data.label, { fontSize } );\n\t\t\t\t\t\t\t\t\t\tconst labelPadding = 6;\n\t\t\t\t\t\t\t\t\t\tconst backgroundWidth = estimatedTextWidth + labelPadding * 2;\n\t\t\t\t\t\t\t\t\t\tconst backgroundHeight = fontSize + labelPadding * 2;\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\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\t<path { ...pathProps } />\n\t\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\t<g>\n\t\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\t<rect\n\t\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\t\ty={ centroidY - backgroundHeight / 2 }\n\t\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\t\theight={ backgroundHeight }\n\t\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\t\trx={ 4 }\n\t\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\t\tpointerEvents=\"none\"\n\t\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\t) }\n\t\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\t\tx={ centroidX }\n\t\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\t\tdy=\".33em\"\n\t\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\t\tfontSize={ fontSize }\n\t\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\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\t\t{ arc.data.label }\n\t\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</g>\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t\t\t);\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</Pie>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t{ /* Render SVG children (like Group, Text) inside the SVG */ }\n\t\t\t\t\t\t{ ! allSegmentsHidden && 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\tinteractive={ legendInteractive }\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};"]}

package/dist/{chunk-XDIWMJZD.js → chunk-ZSNO2BYX.js}

@@ -16,7 +16,7 @@ import {
   Legend,
   SingleChartContext,
   useChartLegendItems
-} from "./chunk-Q2LDRQN7.js";
+} from "./chunk-PFT2X4OW.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -25,14 +25,16 @@ import {
   useChartRegistration,
   useElementHeight,
   useGlobalChartsContext,
-  useGlobalChartsTheme
-} from "./chunk-3O6FHD2T.js";
+  useGlobalChartsTheme,
+  useInteractiveLegendData
+} from "./chunk-A3PGOCJO.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 { __ } from "@wordpress/i18n";
 import clsx from "clsx";
 import { useCallback, useContext, useMemo } from "react";
 
@@ -77,6 +79,7 @@ var PieChartInternal = ({
   cornerScale = 0,
   showLabels = true,
   legendValueDisplay = "percentage",
+  legendInteractive = false,
   children = null,
   tooltipOffsetX = 0,
   tooltipOffsetY = -15
@@ -96,11 +99,18 @@ var PieChartInternal = ({
     }
     hideTooltip();
   }, [withTooltips, hideTooltip]);
+  const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+  const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+    data,
+    chartId,
+    legendInteractive,
+    isSeriesVisible
+  });
   const legendOptions = useMemo(
     () => ({ showValues: true, legendValueDisplay }),
     [legendValueDisplay]
   );
-  const legendItems = useChartLegendItems(data, legendOptions);
+  const legendItems = useChartLegendItems(legendData, legendOptions);
   const { isValid, message } = validateData(data);
   const { svgChildren, htmlChildren, otherChildren } = useChartChildren(children, "PieChart");
   const chartMetadata = useMemo(
@@ -118,7 +128,6 @@ var PieChartInternal = ({
     isDataValid: isValid,
     metadata: chartMetadata
   });
-  const { getElementStyles } = useGlobalChartsContext();
   if (!isValid) {
     return /* @__PURE__ */ jsx("div", { className: clsx("pie-chart", pie_chart_module_default["pie-chart"], className), children: /* @__PURE__ */ jsx("div", { className: pie_chart_module_default["error-message"], children: message }) });
   }
@@ -133,10 +142,13 @@ var PieChartInternal = ({
   const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);
   const maxCornerRadius = (outerRadius - innerRadius) / 2;
   const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;
-  const dataWithIndex = data.map((d, index) => ({
-    ...d,
-    index
-  }));
+  const dataWithIndex = visibleData.map((d) => {
+    const originalIndex = data.findIndex((item) => item.label === d.label);
+    return {
+      ...d,
+      index: originalIndex >= 0 ? originalIndex : 0
+    };
+  });
   const accessors = {
     value: (d) => d.value,
     fill: (d) => {
@@ -169,7 +181,20 @@ var PieChartInternal = ({
                 width,
                 height: adjustedHeight,
                 children: /* @__PURE__ */ jsxs(Group, { top: centerY, left: centerX, children: [
-                  /* @__PURE__ */ jsx(
+                  allSegmentsHidden ? /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      textAnchor: "middle",
+                      dy: ".33em",
+                      fill: providerTheme.gridColor || "#ccc",
+                      fontSize: "14",
+                      fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
+                      children: __(
+                        "All segments are hidden. Click legend items to show data.",
+                        "jetpack-charts"
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx(
                     Pie,
                     {
                       data: dataWithIndex,
@@ -246,7 +271,7 @@ var PieChartInternal = ({
                       }
                     }
                   ),
-                  svgChildren
+                  !allSegmentsHidden && svgChildren
                 ] })
               }
             ),
@@ -262,7 +287,8 @@ var PieChartInternal = ({
                 className: pie_chart_module_default["pie-chart-legend"],
                 shape: legendShape,
                 ref: legendRef,
-                chartId
+                chartId,
+                interactive: legendInteractive
               }
             ),
             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 }) }) }),
@@ -300,4 +326,4 @@ export {
   PieChart,
   PieChartResponsive
 };
-//# sourceMappingURL=chunk-XDIWMJZD.js.map
+//# sourceMappingURL=chunk-ZSNO2BYX.js.map