@automattic/charts 0.49.0 → 0.49.1

package/CHANGELOG.md

@@ -5,6 +5,13 @@ 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.49.1] - 2025-11-20
+### Changed
+- Update package dependencies. [#46022]
+
+### Fixed
+- Localize numbers in legend labels and tooltips [#45991]
+
 ## [0.49.0] - 2025-11-19
 ### Added
 - Add animation in circular shaped charts. [#45870]
@@ -563,6 +570,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[0.49.1]: https://github.com/Automattic/charts/compare/v0.49.0...v0.49.1
 [0.49.0]: https://github.com/Automattic/charts/compare/v0.48.0...v0.49.0
 [0.48.0]: https://github.com/Automattic/charts/compare/v0.47.0...v0.48.0
 [0.47.0]: https://github.com/Automattic/charts/compare/v0.46.3...v0.47.0

package/dist/{chunk-Z5TSTVSS.cjs → chunk-4JNKQ6G2.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
-var _chunk6GO5PFYLcjs = require('./chunk-6GO5PFYL.cjs');
+var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
 
 
 var _chunkFX2PTUFCcjs = require('./chunk-FX2PTUFC.cjs');
@@ -10,7 +10,7 @@ var _chunkFX2PTUFCcjs = require('./chunk-FX2PTUFC.cjs');
 
 
 
-var _chunkQTQG3XNMcjs = require('./chunk-QTQG3XNM.cjs');
+var _chunk4TN6B3QGcjs = require('./chunk-4TN6B3QG.cjs');
 
 
 
@@ -178,7 +178,7 @@ var line_chart_annotation_label_popover_default = LineChartAnnotationLabelWithPo
 
 
 var LineChartAnnotationsOverlay = ({ children }) => {
-  const { chartRef, chartWidth, chartHeight } = _chunkQTQG3XNMcjs.useSingleChartContext.call(void 0, );
+  const { chartRef, chartWidth, chartHeight } = _chunk4TN6B3QGcjs.useSingleChartContext.call(void 0, );
   const [scales, setScales] = _react.useState.call(void 0, null);
   const [scalesStable, setScalesStable] = _react.useState.call(void 0, false);
   const createScaleSignature = _react.useCallback.call(void 0, (scaleData) => {
@@ -555,7 +555,7 @@ var renderDefaultTooltip = (params) => {
         point.key,
         ":"
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: line_chart_module_default["line-chart__tooltip-value"], children: point.value })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: line_chart_module_default["line-chart__tooltip-value"], children: _numberformatters.formatNumber.call(void 0, point.value) })
     ] }, point.key))
   ] });
 };
@@ -719,7 +719,7 @@ var LineChartInternal = _react.forwardRef.call(void 0,
     const allSeriesHidden = _react.useMemo.call(void 0, () => {
       return seriesWithVisibility.every(({ isVisible }) => !isVisible);
     }, [seriesWithVisibility]);
-    const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = _chunk6GO5PFYLcjs.useKeyboardNavigation.call(void 0, {
+    const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = _chunk7HROSZRScjs.useKeyboardNavigation.call(void 0, {
       selectedIndex,
       setSelectedIndex,
       isNavigating,
@@ -781,7 +781,7 @@ var LineChartInternal = _react.forwardRef.call(void 0,
       }),
       [withLegendGlyph, _optionalChain([glyphStyle, 'optionalAccess', _64 => _64.radius]), renderGlyph]
     );
-    const legendItems = _chunkQTQG3XNMcjs.useChartLegendItems.call(void 0, dataSorted, legendOptions, legendShape);
+    const legendItems = _chunk4TN6B3QGcjs.useChartLegendItems.call(void 0, dataSorted, legendOptions, legendShape);
     const chartMetadata = _react.useMemo.call(void 0, 
       () => ({
         withGradientFill,
@@ -809,7 +809,7 @@ var LineChartInternal = _react.forwardRef.call(void 0,
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _clsx2.default.call(void 0, "line-chart", line_chart_module_default["line-chart"]), children: error });
     }
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQTQG3XNMcjs.SingleChartContext.Provider,
+      _chunk4TN6B3QGcjs.SingleChartContext.Provider,
       {
         value: {
           chartId,
@@ -955,7 +955,7 @@ var LineChartInternal = _react.forwardRef.call(void 0,
                           ] }, _optionalChain([seriesData, 'optionalAccess', _78 => _78.label]) || index);
                         }),
                         withTooltips && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                          _chunk6GO5PFYLcjs.AccessibleTooltip,
+                          _chunk7HROSZRScjs.AccessibleTooltip,
                           {
                             detectBounds: true,
                             snapTooltipToDatumX: true,
@@ -987,7 +987,7 @@ var LineChartInternal = _react.forwardRef.call(void 0,
                 }
               ),
               showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkQTQG3XNMcjs.Legend,
+                _chunk4TN6B3QGcjs.Legend,
                 {
                   orientation: legendOrientation,
                   alignment: legendAlignment,
@@ -1019,14 +1019,14 @@ var LineChartWithProvider = _react.forwardRef.call(void 0, (props, ref) => {
 });
 LineChartWithProvider.displayName = "LineChart";
 var LineChart = _chunkMNZD6UDQcjs.attachSubComponents.call(void 0, LineChartWithProvider, {
-  Legend: _chunkQTQG3XNMcjs.Legend,
+  Legend: _chunk4TN6B3QGcjs.Legend,
   AnnotationsOverlay: line_chart_annotations_overlay_default,
   Annotation: line_chart_annotation_default
 });
 var LineChartResponsive = _chunkMNZD6UDQcjs.attachSubComponents.call(void 0, 
   _chunkFX2PTUFCcjs.withResponsive.call(void 0, LineChartWithProvider),
   {
-    Legend: _chunkQTQG3XNMcjs.Legend,
+    Legend: _chunk4TN6B3QGcjs.Legend,
     AnnotationsOverlay: line_chart_annotations_overlay_default,
     Annotation: line_chart_annotation_default
   }
@@ -1036,4 +1036,4 @@ var LineChartResponsive = _chunkMNZD6UDQcjs.attachSubComponents.call(void 0,
 
 
 exports.LineChart = LineChart; exports.LineChartResponsive = LineChartResponsive;
-//# sourceMappingURL=chunk-Z5TSTVSS.cjs.map
+//# sourceMappingURL=chunk-4JNKQ6G2.cjs.map

package/dist/chunk-4JNKQ6G2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-4JNKQ6G2.cjs","../src/components/line-chart/line-chart.tsx","../src/components/private/default-glyph/default-glyph.tsx","../src/components/line-chart/line-chart.module.scss","../src/components/line-chart/private/line-chart-annotation-label-popover.tsx","../src/components/line-chart/private/line-chart-annotations-overlay.tsx","../src/components/line-chart/private/line-chart-annotation.tsx","../src/components/line-chart/private/line-chart-glyph.tsx"],"names":["jsx","useEffect","useRef","yMax","xMax","x","y","yMin","xMin","jsxs","useContext"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-4JNKQ6G2.cjs","sourcesContent":[null,"import { formatNumberCompact, formatNumber } from '@automattic/number-formatters';\nimport { curveCatmullRom, curveLinear, curveMonotoneX } from '@visx/curve';\nimport { LinearGradient } from '@visx/gradient';\nimport { scaleTime } from '@visx/scale';\nimport { XYChart, AreaSeries, Grid, Axis, DataContext } from '@visx/xychart';\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { differenceInHours, differenceInYears } from 'date-fns';\nimport { useMemo, useContext, forwardRef, useImperativeHandle, useState, useRef } from 'react';\nimport {\n\tuseXYChartTheme,\n\tuseChartDataTransform,\n\tuseChartMargin,\n\tuseElementHeight,\n\tusePrefersReducedMotion,\n} from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tGlobalChartsContext,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n} from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { DefaultGlyph } from '../private/default-glyph';\nimport { SingleChartContext, type SingleChartRef } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { AccessibleTooltip, useKeyboardNavigation } from '../tooltip';\nimport styles from './line-chart.module.scss';\nimport { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';\nimport type { CurveType, RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';\nimport type { DataPoint, DataPointDate, SeriesData, Optional } from '../../types';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { TickFormatter } from '@visx/axis';\nimport type { GlyphProps } from '@visx/xychart';\nimport type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';\nimport type { FC, Ref } from 'react';\n\nconst X_TICK_WIDTH = 60;\n\nconst defaultRenderGlyph = < Datum extends object >( props: RenderLineGlyphProps< Datum > ) => {\n\treturn <DefaultGlyph { ...props } key={ props.key } />;\n};\n\nconst toNumber = ( val?: number | string | null ): number | undefined => {\n\tconst num = typeof val === 'number' ? val : parseFloat( val );\n\treturn isNaN( num ) ? undefined : num;\n};\n\n/**\n * Determines the curve type for the line chart based on the provided type and smoothing parameters\n *\n * @param {CurveType} type      - The explicit curve type to use\n * @param {boolean}   smoothing - Legacy smoothing parameter\n * @return The curve function to use for the line\n */\nconst getCurveType = ( type?: CurveType, smoothing?: boolean ) => {\n\t// If no type specified, use legacy smoothing behavior\n\tif ( ! type ) {\n\t\treturn smoothing ? curveCatmullRom : curveLinear;\n\t}\n\n\t// Handle explicit curve types\n\tswitch ( type ) {\n\t\tcase 'smooth':\n\t\t\treturn curveCatmullRom;\n\t\tcase 'monotone':\n\t\t\treturn curveMonotoneX;\n\t\tcase 'linear':\n\t\t\treturn curveLinear;\n\t\tdefault:\n\t\t\treturn curveLinear;\n\t}\n};\n\nconst renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) => {\n\tconst { tooltipData } = params;\n\tconst nearestDatum = tooltipData?.nearestDatum?.datum;\n\tif ( ! nearestDatum ) return null;\n\n\tconst tooltipPoints: TooltipDatum[] = Object.entries( tooltipData?.datumByKey || {} )\n\t\t.map( ( [ key, { datum } ] ) => ( {\n\t\t\tkey,\n\t\t\tvalue: datum.value as number,\n\t\t} ) )\n\t\t.sort( ( a, b ) => b.value - a.value );\n\n\treturn (\n\t\t<div className={ styles[ 'line-chart__tooltip' ] }>\n\t\t\t<div className={ styles[ 'line-chart__tooltip-date' ] }>\n\t\t\t\t{ nearestDatum.date?.toLocaleDateString() }\n\t\t\t</div>\n\t\t\t{ tooltipPoints.map( point => (\n\t\t\t\t<div key={ point.key } className={ styles[ 'line-chart__tooltip-row' ] }>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-label' ] }>{ point.key }:</span>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-value' ] }>\n\t\t\t\t\t\t{ formatNumber( point.value ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t</div>\n\t);\n};\n\nconst formatYearTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleDateString( undefined, {\n\t\tyear: 'numeric',\n\t} );\n};\n\nconst formatDateTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleDateString( undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t} );\n};\n\nconst formatHourTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleTimeString( undefined, {\n\t\thour: 'numeric',\n\t\thour12: true,\n\t} );\n};\n\nconst getFormatter = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {\n\tconst minX = Math.min( ...sortedData.map( datom => datom.data.at( 0 )?.date ) );\n\tconst maxX = Math.max( ...sortedData.map( datom => datom.data.at( -1 )?.date ) );\n\n\tconst diffInHours = Math.abs( differenceInHours( maxX, minX ) );\n\tif ( diffInHours <= 24 ) {\n\t\treturn formatHourTick;\n\t}\n\n\tconst diffInYears = Math.abs( differenceInYears( maxX, minX ) );\n\tif ( diffInYears <= 1 ) {\n\t\treturn formatDateTick;\n\t}\n\n\treturn formatYearTick;\n};\n\nconst guessOptimalNumTicks = (\n\tdata: ReturnType< typeof useChartDataTransform >,\n\tchartWidth: number,\n\ttickFormatter: ( timestamp: number ) => string\n) => {\n\tconst minX = Math.min( ...data.map( datom => datom.data.at( 0 )?.date ) );\n\tconst maxX = Math.max( ...data.map( datom => datom.data.at( -1 )?.date ) );\n\tconst xScale = scaleTime( { domain: [ minX, maxX ] } );\n\n\t// Calculate upper bound of tick numbers based on data points and chart width\n\tconst upperBound = Math.min( data[ 0 ]?.data.length, Math.ceil( chartWidth / X_TICK_WIDTH ) );\n\tlet secondBestGuess = 1; // a tick number that's no greater than upperBound\n\n\tfor ( let numTicks = upperBound; numTicks > 1; --numTicks ) {\n\t\tconst ticks = xScale.ticks( numTicks ).map( d => tickFormatter( d.getTime() ) );\n\n\t\t// The .ticks() function doesn't properly respect the requested number of ticks, so we need to check the length\n\t\tif ( ticks.length > upperBound ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tsecondBestGuess = Math.max( secondBestGuess, ticks.length );\n\n\t\tconst uniqueTicks = Array.from( new Set( ticks ) );\n\t\tif ( uniqueTicks.length === 1 ) {\n\t\t\t// All ticks are the same, so skip further processing\n\t\t\treturn 1;\n\t\t}\n\n\t\t// Example: OCT 1 JAN 1 APR 1 JUL 1 OCT 1\n\t\t// Here, the two OCTs are not duplicates as they represent October of two different years.\n\t\tconst hasConsecutiveDuplicate = ticks.some(\n\t\t\t( tick, idx ) => idx > 0 && tick === ticks[ idx - 1 ]\n\t\t);\n\n\t\tif ( hasConsecutiveDuplicate ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\treturn ticks.length;\n\t}\n\n\treturn secondBestGuess;\n};\n\nconst validateData = ( data: SeriesData[] ) => {\n\tif ( ! data?.length ) return 'No data available';\n\n\tconst hasInvalidData = data.some( series =>\n\t\tseries.data.some(\n\t\t\t( point: DataPointDate | DataPoint ) =>\n\t\t\t\tisNaN( point.value as number ) ||\n\t\t\t\tpoint.value === null ||\n\t\t\t\tpoint.value === undefined ||\n\t\t\t\t( 'date' in point && point.date && isNaN( point.date.getTime() ) )\n\t\t)\n\t);\n\n\tif ( hasInvalidData ) return 'Invalid data';\n\treturn null;\n};\n\n// Inner component to access DataContext and provide scale data to ref\nconst LineChartScalesRef: FC< {\n\tchartRef?: Ref< SingleChartRef >;\n\twidth: number;\n\theight: number;\n\tmargin?: { top?: number; right?: number; bottom?: number; left?: number };\n} > = ( { chartRef, width, height, margin } ) => {\n\tconst context = useContext( DataContext );\n\n\tuseImperativeHandle(\n\t\tchartRef,\n\t\t() => ( {\n\t\t\tgetScales: () => {\n\t\t\t\tif ( ! context?.xScale || ! context?.yScale ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\txScale: context.xScale,\n\t\t\t\t\tyScale: context.yScale,\n\t\t\t\t};\n\t\t\t},\n\t\t\tgetChartDimensions: () => ( {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t\tmargin: margin || {},\n\t\t\t} ),\n\t\t} ),\n\t\t[ context, width, height, margin ]\n\t);\n\n\treturn null; // This component only provides the ref interface\n};\n\nconst LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(\n\t(\n\t\t{\n\t\t\tdata,\n\t\t\tchartId: providedChartId,\n\t\t\twidth,\n\t\t\theight,\n\t\t\tclassName,\n\t\t\tmargin,\n\t\t\twithTooltips = true,\n\t\t\twithTooltipCrosshairs,\n\t\t\tshowLegend = false,\n\t\t\tlegendOrientation = 'horizontal',\n\t\t\tlegendAlignment = 'center',\n\t\t\tlegendPosition = 'bottom',\n\t\t\tlegendMaxWidth,\n\t\t\tlegendTextOverflow = 'wrap',\n\t\t\tlegendItemClassName,\n\t\t\trenderGlyph = defaultRenderGlyph,\n\t\t\tglyphStyle = {},\n\t\t\tlegendShape = 'line',\n\t\t\twithLegendGlyph = false,\n\t\t\twithGradientFill = false,\n\t\t\tsmoothing = true,\n\t\t\tcurveType,\n\t\t\trenderTooltip = renderDefaultTooltip,\n\t\t\twithStartGlyphs = false,\n\t\t\twithEndGlyphs = false,\n\t\t\tlegendInteractive = false,\n\t\t\tanimation,\n\t\t\toptions = {},\n\t\t\tonPointerDown = undefined,\n\t\t\tonPointerUp = undefined,\n\t\t\tonPointerMove = undefined,\n\t\t\tonPointerOut = undefined,\n\t\t\tchildren,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst providerTheme = useGlobalChartsTheme();\n\t\tconst theme = useXYChartTheme( data );\n\t\tconst chartId = useChartId( providedChartId );\n\t\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\t\tconst chartRef = useRef< HTMLDivElement >( null );\n\t\tconst [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );\n\t\tconst [ isNavigating, setIsNavigating ] = useState( false );\n\t\tconst internalChartRef = useRef< SingleChartRef >( null );\n\n\t\t// Forward the external ref to the internal ref\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => ( {\n\t\t\t\tgetScales: () => internalChartRef.current?.getScales() || null,\n\t\t\t\tgetChartDimensions: () =>\n\t\t\t\t\tinternalChartRef.current?.getChartDimensions() || { width: 0, height: 0, margin: {} },\n\t\t\t} ),\n\t\t\t[ internalChartRef ]\n\t\t);\n\n\t\tconst dataSorted = useChartDataTransform( data );\n\t\tconst { getElementStyles, isSeriesVisible } = useGlobalChartsContext();\n\n\t\t// Add visibility information to series when using interactive legends\n\t\tconst seriesWithVisibility = useMemo( () => {\n\t\t\tif ( ! chartId || ! legendInteractive ) {\n\t\t\t\treturn dataSorted.map( ( series, index ) => ( { series, index, isVisible: true } ) );\n\t\t\t}\n\t\t\treturn dataSorted.map( ( series, index ) => ( {\n\t\t\t\tseries,\n\t\t\t\tindex,\n\t\t\t\tisVisible: isSeriesVisible( chartId, series.label ),\n\t\t\t} ) );\n\t\t}, [ dataSorted, chartId, isSeriesVisible, legendInteractive ] );\n\n\t\t// Check if all series are hidden\n\t\tconst allSeriesHidden = useMemo( () => {\n\t\t\treturn seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );\n\t\t}, [ seriesWithVisibility ] );\n\n\t\t// Use the keyboard navigation hook\n\t\tconst { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {\n\t\t\tselectedIndex,\n\t\t\tsetSelectedIndex,\n\t\t\tisNavigating,\n\t\t\tsetIsNavigating,\n\t\t\tchartRef,\n\t\t\ttotalPoints: dataSorted[ 0 ]?.data.length || 0,\n\t\t} );\n\n\t\tconst chartOptions = useMemo( () => {\n\t\t\tconst formatter = getFormatter( dataSorted );\n\n\t\t\treturn {\n\t\t\t\taxis: {\n\t\t\t\t\tx: {\n\t\t\t\t\t\torientation: 'bottom' as const,\n\t\t\t\t\t\tnumTicks: guessOptimalNumTicks( dataSorted, width, formatter ),\n\t\t\t\t\t\ttickFormat: formatter,\n\t\t\t\t\t\t...options?.axis?.x,\n\t\t\t\t\t},\n\t\t\t\t\ty: {\n\t\t\t\t\t\torientation: 'left' as const,\n\t\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\t\ttickFormat: formatNumberCompact as TickFormatter< number >,\n\t\t\t\t\t\t...options?.axis?.y,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\txScale: {\n\t\t\t\t\ttype: 'time' as const,\n\t\t\t\t\t...options?.xScale,\n\t\t\t\t},\n\t\t\t\tyScale: {\n\t\t\t\t\ttype: 'linear' as const,\n\t\t\t\t\tnice: true,\n\t\t\t\t\tzero: false,\n\t\t\t\t\t...options?.yScale,\n\t\t\t\t},\n\t\t\t};\n\t\t}, [ options, dataSorted, width ] );\n\n\t\tconst tooltipRenderGlyph = useMemo( () => {\n\t\t\treturn ( props: GlyphProps< DataPointDate > ) => {\n\t\t\t\tconst seriesIndex = dataSorted.findIndex(\n\t\t\t\t\tseries =>\n\t\t\t\t\t\tseries.label === props.key || series.data.includes( props.datum as DataPointDate )\n\t\t\t\t);\n\n\t\t\t\tconst seriesData = dataSorted[ seriesIndex ];\n\n\t\t\t\tconst { color, glyph: themeGlyph } = getElementStyles( {\n\t\t\t\t\tdata: seriesData,\n\t\t\t\t\tindex: seriesIndex,\n\t\t\t\t} );\n\n\t\t\t\tconst propsWithResolvedColor = { ...props, color };\n\n\t\t\t\treturn themeGlyph\n\t\t\t\t\t? themeGlyph( propsWithResolvedColor )\n\t\t\t\t\t: renderGlyph( propsWithResolvedColor );\n\t\t\t};\n\t\t}, [ dataSorted, renderGlyph, getElementStyles ] );\n\n\t\tconst defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme );\n\n\t\tconst error = validateData( dataSorted );\n\t\tconst isDataValid = ! error;\n\n\t\t// Memoize legend options to prevent unnecessary re-calculations\n\t\tconst legendOptions = useMemo(\n\t\t\t() => ( {\n\t\t\t\twithGlyph: withLegendGlyph,\n\t\t\t\tglyphSize: Math.max( 0, toNumber( glyphStyle?.radius ) ?? 4 ),\n\t\t\t\trenderGlyph,\n\t\t\t} ),\n\t\t\t[ withLegendGlyph, glyphStyle?.radius, renderGlyph ]\n\t\t);\n\n\t\t// Create legend items using the reusable hook\n\t\tconst legendItems = useChartLegendItems( dataSorted, legendOptions, legendShape );\n\n\t\t// Memoize metadata to prevent unnecessary re-registration\n\t\tconst chartMetadata = useMemo(\n\t\t\t() => ( {\n\t\t\t\twithGradientFill,\n\t\t\t\tsmoothing,\n\t\t\t\tcurveType,\n\t\t\t\twithStartGlyphs,\n\t\t\t\twithEndGlyphs,\n\t\t\t\twithLegendGlyph,\n\t\t\t} ),\n\t\t\t[ withGradientFill, smoothing, curveType, withStartGlyphs, withEndGlyphs, withLegendGlyph ]\n\t\t);\n\n\t\t// Register chart with context only if data is valid\n\t\tuseChartRegistration( {\n\t\t\tchartId,\n\t\t\tlegendItems,\n\t\t\tchartType: 'line',\n\t\t\tisDataValid,\n\t\t\tmetadata: chartMetadata,\n\t\t} );\n\n\t\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\t\tconst accessors = {\n\t\t\txAccessor: ( d: DataPointDate ) => d?.date,\n\t\t\tyAccessor: ( d: DataPointDate ) => d?.value,\n\t\t};\n\n\t\t// Create a custom renderTooltip that includes focus capability\n\t\tif ( error ) {\n\t\t\treturn <div className={ clsx( 'line-chart', styles[ 'line-chart' ] ) }>{ error }</div>;\n\t\t}\n\n\t\treturn (\n\t\t\t<SingleChartContext.Provider\n\t\t\t\tvalue={ {\n\t\t\t\t\tchartId,\n\t\t\t\t\tchartRef: internalChartRef,\n\t\t\t\t\tchartWidth: width,\n\t\t\t\t\tchartHeight: height - ( showLegend ? legendHeight : 0 ),\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'line-chart',\n\t\t\t\t\t\tstyles[ 'line-chart' ],\n\t\t\t\t\t\t{ [ styles[ 'line-chart--animated' ] ]: animation && ! prefersReducedMotion },\n\t\t\t\t\t\t{ [ styles[ 'line-chart--legend-top' ] ]: showLegend && legendPosition === 'top' },\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tdata-testid=\"line-chart\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\theight,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\trole=\"grid\"\n\t\t\t\t\t\taria-label={ __( 'Line chart', 'jetpack-charts' ) }\n\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\tonKeyDown={ onChartKeyDown }\n\t\t\t\t\t\tonFocus={ onChartFocus }\n\t\t\t\t\t\tonBlur={ onChartBlur }\n\t\t\t\t\t\tref={ chartRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<XYChart\n\t\t\t\t\t\t\ttheme={ theme }\n\t\t\t\t\t\t\twidth={ width }\n\t\t\t\t\t\t\theight={ height - ( showLegend ? legendHeight : 0 ) }\n\t\t\t\t\t\t\tmargin={ {\n\t\t\t\t\t\t\t\t...defaultMargin,\n\t\t\t\t\t\t\t\t...margin,\n\t\t\t\t\t\t\t\t...( showLegend && legendPosition === 'top'\n\t\t\t\t\t\t\t\t\t? { top: ( defaultMargin.top || 0 ) + legendHeight }\n\t\t\t\t\t\t\t\t\t: {} ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t// xScale and yScale could be set in Axis as well, but they are `scale` props there.\n\t\t\t\t\t\t\txScale={ chartOptions.xScale }\n\t\t\t\t\t\t\tyScale={ chartOptions.yScale }\n\t\t\t\t\t\t\tonPointerDown={ onPointerDown }\n\t\t\t\t\t\t\tonPointerUp={ onPointerUp }\n\t\t\t\t\t\t\tonPointerMove={ onPointerMove }\n\t\t\t\t\t\t\tonPointerOut={ onPointerOut }\n\t\t\t\t\t\t\tpointerEventsDataKey=\"nearest\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Grid columns={ false } numTicks={ 4 } />\n\t\t\t\t\t\t\t<Axis { ...chartOptions.axis.x } />\n\t\t\t\t\t\t\t<Axis { ...chartOptions.axis.y } />\n\n\t\t\t\t\t\t\t{ allSeriesHidden ? (\n\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\tx={ width / 2 }\n\t\t\t\t\t\t\t\t\ty={ ( height - ( showLegend ? legendHeight : 0 ) ) / 2 }\n\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\tfill={ providerTheme.gridStyles?.stroke || '#ccc' }\n\t\t\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\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\t\t'All series are hidden. Click legend items to show data.',\n\t\t\t\t\t\t\t\t\t\t'jetpack-charts'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t) : null }\n\n\t\t\t\t\t\t\t{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {\n\t\t\t\t\t\t\t\t// Skip rendering invisible series\n\t\t\t\t\t\t\t\tif ( ! isVisible ) {\n\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tconst { color, lineStyles, glyph } = getElementStyles( {\n\t\t\t\t\t\t\t\t\tdata: seriesData,\n\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\t\tconst lineProps = {\n\t\t\t\t\t\t\t\t\tstroke: color,\n\t\t\t\t\t\t\t\t\t...lineStyles,\n\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<g key={ seriesData?.label || index }>\n\t\t\t\t\t\t\t\t\t\t{ withGradientFill && (\n\t\t\t\t\t\t\t\t\t\t\t<LinearGradient\n\t\t\t\t\t\t\t\t\t\t\t\tid={ `area-gradient-${ chartId }-${ index + 1 }` }\n\t\t\t\t\t\t\t\t\t\t\t\tfrom={ color }\n\t\t\t\t\t\t\t\t\t\t\t\tfromOpacity={ 0.4 }\n\t\t\t\t\t\t\t\t\t\t\t\ttoOpacity={ 0.1 }\n\t\t\t\t\t\t\t\t\t\t\t\tto={ providerTheme.backgroundColor }\n\t\t\t\t\t\t\t\t\t\t\t\t{ ...seriesData.options?.gradient }\n\t\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"line-gradient\"\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{ seriesData.options?.gradient?.stops?.map( ( stop, stopIndex ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `${ stop.offset }-${ stop.color || color }` }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\toffset={ stop.offset }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstopColor={ stop.color || color }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstopOpacity={ stop.opacity ?? 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-testid={ `line-gradient-stop-${ chartId }-${ index }-${ stopIndex }` }\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) ) }\n\t\t\t\t\t\t\t\t\t\t\t</LinearGradient>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t<AreaSeries\n\t\t\t\t\t\t\t\t\t\t\tkey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\t\t\tdataKey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\t\t\tdata={ seriesData.data as DataPointDate[] }\n\t\t\t\t\t\t\t\t\t\t\t{ ...accessors }\n\t\t\t\t\t\t\t\t\t\t\tfill={\n\t\t\t\t\t\t\t\t\t\t\t\twithGradientFill\n\t\t\t\t\t\t\t\t\t\t\t\t\t? `url(#area-gradient-${ chartId }-${ index + 1 })`\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'transparent'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\trenderLine={ true }\n\t\t\t\t\t\t\t\t\t\t\tcurve={ getCurveType( curveType, smoothing ) }\n\t\t\t\t\t\t\t\t\t\t\tlineProps={ lineProps }\n\t\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t\t{ withStartGlyphs && (\n\t\t\t\t\t\t\t\t\t\t\t<LineChartGlyph\n\t\t\t\t\t\t\t\t\t\t\t\tindex={ index }\n\t\t\t\t\t\t\t\t\t\t\t\tdata={ seriesData }\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\t\t\trenderGlyph={ glyph ?? renderGlyph }\n\t\t\t\t\t\t\t\t\t\t\t\taccessors={ accessors }\n\t\t\t\t\t\t\t\t\t\t\t\tglyphStyle={ glyphStyle }\n\t\t\t\t\t\t\t\t\t\t\t\tposition=\"start\"\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\t{ withEndGlyphs && (\n\t\t\t\t\t\t\t\t\t\t\t<LineChartGlyph\n\t\t\t\t\t\t\t\t\t\t\t\tindex={ index }\n\t\t\t\t\t\t\t\t\t\t\t\tdata={ seriesData }\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\t\t\trenderGlyph={ glyph ?? renderGlyph }\n\t\t\t\t\t\t\t\t\t\t\t\taccessors={ accessors }\n\t\t\t\t\t\t\t\t\t\t\t\tglyphStyle={ glyphStyle }\n\t\t\t\t\t\t\t\t\t\t\t\tposition=\"end\"\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</g>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\n\t\t\t\t\t\t\t{ withTooltips && (\n\t\t\t\t\t\t\t\t<AccessibleTooltip\n\t\t\t\t\t\t\t\t\tdetectBounds\n\t\t\t\t\t\t\t\t\tsnapTooltipToDatumX\n\t\t\t\t\t\t\t\t\tsnapTooltipToDatumY\n\t\t\t\t\t\t\t\t\tshowSeriesGlyphs\n\t\t\t\t\t\t\t\t\trenderTooltip={ renderTooltip }\n\t\t\t\t\t\t\t\t\trenderGlyph={ tooltipRenderGlyph }\n\t\t\t\t\t\t\t\t\tglyphStyle={ glyphStyle }\n\t\t\t\t\t\t\t\t\tshowVerticalCrosshair={ withTooltipCrosshairs?.showVertical }\n\t\t\t\t\t\t\t\t\tshowHorizontalCrosshair={ withTooltipCrosshairs?.showHorizontal }\n\t\t\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\t\t\ttooltipRef={ tooltipRef }\n\t\t\t\t\t\t\t\t\tkeyboardFocusedClassName={ styles[ 'line-chart__tooltip--keyboard-focused' ] }\n\t\t\t\t\t\t\t\t\tseries={ dataSorted }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t{ /* Component to expose scale data via ref */ }\n\t\t\t\t\t\t\t<LineChartScalesRef\n\t\t\t\t\t\t\t\tchartRef={ internalChartRef }\n\t\t\t\t\t\t\t\twidth={ width }\n\t\t\t\t\t\t\t\theight={ height }\n\t\t\t\t\t\t\t\tmargin={ margin }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</XYChart>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{ showLegend && (\n\t\t\t\t\t\t<Legend\n\t\t\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\t\t\talignment={ legendAlignment }\n\t\t\t\t\t\t\tposition={ legendPosition }\n\t\t\t\t\t\t\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\n\t\t\t\t\t\t\tclassName={ styles[ 'line-chart-legend' ] }\n\t\t\t\t\t\t\tshape={ legendShape }\n\t\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t\t\tinteractive={ legendInteractive }\n\t\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t</SingleChartContext.Provider>\n\t\t);\n\t}\n);\n\n// Component type definitions for composition API\ntype LineChartAnnotationComponents = {\n\tAnnotationsOverlay: typeof LineChartAnnotationsOverlay;\n\tAnnotation: typeof LineChartAnnotation;\n\tLegend: typeof Legend;\n};\n\ntype LineChartBaseProps = Optional< LineChartProps, 'width' | 'height' | 'size' >;\n\ntype LineChartComponent = React.ForwardRefExoticComponent<\n\tLineChartBaseProps & React.RefAttributes< SingleChartRef >\n> &\n\tLineChartAnnotationComponents;\n\ntype LineChartResponsiveComponent = React.ForwardRefExoticComponent<\n\tLineChartBaseProps & ResponsiveConfig & React.RefAttributes< SingleChartRef >\n> &\n\tLineChartAnnotationComponents;\n\nconst LineChartWithProvider = forwardRef< SingleChartRef, LineChartProps >( ( props, ref ) => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, render the core component directly\n\tif ( existingContext ) {\n\t\treturn <LineChartInternal { ...props } ref={ ref } />;\n\t}\n\n\t// Otherwise, wrap with our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<LineChartInternal { ...props } ref={ ref } />\n\t\t</GlobalChartsProvider>\n\t);\n} );\n\nLineChartWithProvider.displayName = 'LineChart';\n\nconst LineChart = attachSubComponents( LineChartWithProvider, {\n\tLegend: Legend,\n\tAnnotationsOverlay: LineChartAnnotationsOverlay,\n\tAnnotation: LineChartAnnotation,\n} ) as LineChartComponent;\n\nconst LineChartResponsive = attachSubComponents(\n\twithResponsive< LineChartProps >( LineChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tAnnotationsOverlay: LineChartAnnotationsOverlay,\n\t\tAnnotation: LineChartAnnotation,\n\t}\n) as LineChartResponsiveComponent;\n\nexport { LineChartResponsive as default, LineChart as LineChartUnresponsive };\n","import { DataContext } from '@visx/xychart';\nimport { useContext } from 'react';\nimport type { RenderLineGlyphProps } from '../../line-chart';\n\nexport const DefaultGlyph = < Datum extends object >( props: RenderLineGlyphProps< Datum > ) => {\n\tconst { theme } = useContext( DataContext ) || {};\n\tconst position = props.position || 'start';\n\n\treturn (\n\t\t<circle\n\t\t\tcx={ props.x }\n\t\t\tcy={ props.y }\n\t\t\tr={ props.size }\n\t\t\tfill={ props.color }\n\t\t\tstroke={ theme?.backgroundColor }\n\t\t\tstrokeWidth={ 1.5 }\n\t\t\tpaintOrder=\"fill\"\n\t\t\tdata-testid={ `${ position }-glyph-${ props.index }` }\n\t\t\t{ ...props.glyphStyle }\n\t\t/>\n\t);\n};\n","import 'css-chunk:src/components/line-chart/line-chart.module.scss';export default {\n  \"line-chart\": \"a8ccharts-ITM3dm\",\n  \"line-chart--animated\": \"a8ccharts-fXvEBi\",\n  \"rise\": \"a8ccharts-gb7M8E\",\n  \"line-chart--legend-top\": \"a8ccharts-zQLTUG\",\n  \"line-chart__tooltip\": \"a8ccharts-aqcmeq\",\n  \"line-chart__annotation-label-popover\": \"a8ccharts-TqNZkh\",\n  \"line-chart__tooltip-date\": \"a8ccharts-4Dzab-\",\n  \"line-chart__tooltip-row\": \"a8ccharts-6A37Gb\",\n  \"line-chart__tooltip-label\": \"a8ccharts-IvnFFF\",\n  \"line-chart__annotations-overlay\": \"a8ccharts-4nR2pv\",\n  \"line-chart__annotation-label\": \"a8ccharts-OmgiTA\",\n  \"line-chart__annotation-label-trigger-button\": \"a8ccharts-mcIb3E\",\n  \"line-chart__annotation-label-popover--visible\": \"a8ccharts-dE0cVP\",\n  \"line-chart__annotation-label-popover--safari\": \"a8ccharts-i3NHTh\",\n  \"line-chart__annotation-label-popover-header\": \"a8ccharts-OwypoS\",\n  \"line-chart__annotation-label-popover-content\": \"a8ccharts-vtgQtP\",\n  \"line-chart__annotation-label-popover-close-button\": \"a8ccharts-i8KUcG\"\n};","import { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport Gridicon from 'gridicons';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { isSafari } from '../../../utils';\nimport styles from '../line-chart.module.scss';\nimport type { ButtonWithPopover, PopoverElement, ToggleEvent } from '../../../types';\nimport type { FC } from 'react';\n\nexport const POPOVER_BUTTON_SIZE = 44;\n\ninterface LineChartAnnotationLabelWithPopoverProps {\n\ttitle: string;\n\tsubtitle?: string;\n\trenderLabel: FC< { title: string; subtitle?: string } >;\n\trenderLabelPopover: FC< { title: string; subtitle?: string } >;\n}\n\nconst LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopoverProps > = ( {\n\ttitle,\n\tsubtitle,\n\trenderLabel,\n\trenderLabelPopover,\n} ) => {\n\tconst popoverId = useId();\n\tconst buttonRef = useRef< HTMLButtonElement >( null );\n\tconst popoverRef = useRef< HTMLDivElement >( null );\n\tconst [ isPositioned, setIsPositioned ] = useState( false );\n\tconst isBrowserSafari = isSafari();\n\n\tuseEffect( () => {\n\t\tconst button = buttonRef.current;\n\t\tconst popover = popoverRef.current;\n\n\t\tif ( ! button || ! popover ) return;\n\n\t\tconst positionPopover = () => {\n\t\t\t// Popover positioning in Safari is complicated due to issues with SVG foreign objects (https://bugs.webkit.org/show_bug.cgi?id=23113), so let it be positioned in the centre of the viewport.\n\t\t\tif ( ! isBrowserSafari ) {\n\t\t\t\tconst buttonRect = button.getBoundingClientRect();\n\t\t\t\tpopover.style.left = `${ buttonRect.right }px`;\n\t\t\t\tpopover.style.top = `${ buttonRect.top }px`;\n\t\t\t}\n\n\t\t\tsetIsPositioned( true );\n\t\t};\n\n\t\t// Position when popover shows\n\t\tpopover.addEventListener( 'toggle', ( e: ToggleEvent ) => {\n\t\t\tif ( e.newState === 'open' ) {\n\t\t\t\tpositionPopover();\n\t\t\t}\n\t\t} );\n\n\t\t// Initial positioning if already open\n\t\ttry {\n\t\t\tif ( popover.matches( ':popover-open' ) ) {\n\t\t\t\tpositionPopover();\n\t\t\t}\n\t\t} catch {\n\t\t\t// Ignore errors in test environments (e.g., JSDOM does not support :popover-open)\n\t\t}\n\t}, [ isBrowserSafari ] );\n\n\treturn (\n\t\t<div className={ styles[ 'line-chart__annotation-label' ] }>\n\t\t\t<button\n\t\t\t\tref={ buttonRef }\n\t\t\t\t{ ...( { popovertarget: popoverId } as ButtonWithPopover ) }\n\t\t\t\tclassName={ styles[ 'line-chart__annotation-label-trigger-button' ] }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${ POPOVER_BUTTON_SIZE }px`,\n\t\t\t\t\theight: `${ POPOVER_BUTTON_SIZE }px`,\n\t\t\t\t\ttransform: `translate(${ POPOVER_BUTTON_SIZE / 2 }px, 0)`,\n\t\t\t\t} }\n\t\t\t\taria-label={ title || __( 'View details', 'jetpack-charts' ) }\n\t\t\t>\n\t\t\t\t{ renderLabel( { title, subtitle } ) }\n\t\t\t</button>\n\t\t\t<div\n\t\t\t\tref={ popoverRef }\n\t\t\t\tid={ popoverId }\n\t\t\t\t{ ...( { popover: 'auto' } as PopoverElement ) }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tstyles[ 'line-chart__annotation-label-popover' ],\n\t\t\t\t\tisPositioned && styles[ 'line-chart__annotation-label-popover--visible' ],\n\t\t\t\t\tisBrowserSafari && styles[ 'line-chart__annotation-label-popover--safari' ]\n\t\t\t\t) }\n\t\t\t\tdata-testid=\"line-chart-annotation-label-popover\"\n\t\t\t>\n\t\t\t\t<div className={ styles[ 'line-chart__annotation-label-popover-header' ] }>\n\t\t\t\t\t<div className={ styles[ 'line-chart__annotation-label-popover-content' ] }>\n\t\t\t\t\t\t{ renderLabelPopover( { title, subtitle } ) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...( {\n\t\t\t\t\t\t\tpopovertarget: popoverId,\n\t\t\t\t\t\t\tpopovertargetaction: 'hide',\n\t\t\t\t\t\t} as ButtonWithPopover ) }\n\t\t\t\t\t\tclassName={ styles[ 'line-chart__annotation-label-popover-close-button' ] }\n\t\t\t\t\t\taria-label={ __( 'Close', 'jetpack-charts' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Gridicon icon=\"cross\" size={ 16 } />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default LineChartAnnotationLabelWithPopover;\n","import { DataContext } from '@visx/xychart';\nimport { useEffect, useState, useCallback } from 'react';\nimport { useSingleChartContext } from '../../private/single-chart-context';\nimport styles from '../line-chart.module.scss';\nimport type { AxisScale } from '@visx/axis';\nimport type { FC, ReactNode } from 'react';\n\nexport interface LineChartAnnotationsProps {\n\tchildren?: ReactNode;\n}\n\ninterface ScaleData {\n\txScale: AxisScale< Date >;\n\tyScale: AxisScale< number >;\n}\n\nconst LineChartAnnotationsOverlay: FC< LineChartAnnotationsProps > = ( { children } ) => {\n\tconst { chartRef, chartWidth, chartHeight } = useSingleChartContext();\n\n\tconst [ scales, setScales ] = useState< ScaleData | null >( null );\n\tconst [ scalesStable, setScalesStable ] = useState< boolean >( false );\n\n\t// Create a signature for scale data to enable easy comparison\n\tconst createScaleSignature = useCallback( ( scaleData: ScaleData ) => {\n\t\tconst xDomain = scaleData.xScale.domain();\n\t\tconst yDomain = scaleData.yScale.domain();\n\t\tconst xRange = scaleData.xScale.range();\n\t\tconst yRange = scaleData.yScale.range();\n\n\t\treturn `${ xDomain.join( ',' ) }-${ yDomain.join( ',' ) }-${ xRange.join(\n\t\t\t','\n\t\t) }-${ yRange.join( ',' ) }`;\n\t}, [] );\n\n\t// Get scales from chart ref and return them with signature for comparison\n\tconst getScalesData = useCallback( () => {\n\t\tif ( chartRef?.current ) {\n\t\t\tconst scaleData = chartRef.current.getScales();\n\n\t\t\tif ( scaleData ) {\n\t\t\t\tconst scaleInfo = {\n\t\t\t\t\txScale: scaleData.xScale as AxisScale< Date >,\n\t\t\t\t\tyScale: scaleData.yScale as AxisScale< number >,\n\t\t\t\t};\n\n\t\t\t\treturn {\n\t\t\t\t\tscales: scaleInfo,\n\t\t\t\t\tsignature: createScaleSignature( scaleInfo ),\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}, [ chartRef, createScaleSignature ] );\n\n\t// The chart resizes on render so we need to monitor the scales until they stabilize\n\tuseEffect( () => {\n\t\tlet timeoutId: number | null = null;\n\t\tlet lastSignature: string | null = null;\n\t\tlet retryCount = 0;\n\t\tconst maxRetries = 20; // 20 * 50ms = 1 second max\n\t\tconst checkInterval = 50; // Check every 50ms\n\n\t\t// Reset stability state when monitoring starts\n\t\tsetScalesStable( false );\n\n\t\tconst monitorScales = () => {\n\t\t\tconst currentScaleData = getScalesData();\n\n\t\t\t// If we got scales, compare signatures\n\t\t\tif ( currentScaleData ) {\n\t\t\t\t// Check if scales have settled by comparing signatures\n\t\t\t\tconst scalesSettled = lastSignature && currentScaleData.signature === lastSignature;\n\n\t\t\t\tif ( scalesSettled ) {\n\t\t\t\t\t// Scales have stabilized, mark as stable\n\t\t\t\t\tsetScalesStable( true );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Update scales and remember signature for next comparison\n\t\t\t\tsetScales( currentScaleData.scales );\n\t\t\t\tlastSignature = currentScaleData.signature;\n\t\t\t}\n\n\t\t\t// Continue monitoring if we haven't exceeded max retries\n\t\t\tif ( retryCount < maxRetries ) {\n\t\t\t\tretryCount++;\n\t\t\t\ttimeoutId = setTimeout( monitorScales, checkInterval ) as unknown as number;\n\t\t\t}\n\t\t};\n\n\t\tmonitorScales();\n\n\t\treturn () => {\n\t\t\tif ( timeoutId ) {\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t}\n\t\t};\n\t}, [ getScalesData, chartWidth, chartHeight ] );\n\n\t// Early return if no chart data available\n\tif ( ! chartRef || ! children ) {\n\t\treturn null;\n\t}\n\n\tif ( ! scales || ! scalesStable ) {\n\t\treturn null;\n\t}\n\n\t// Create a DataContext value that mimics what visx provides\n\t// We're intentionally providing minimal context for annotations to work\n\tconst dataContextValue = {\n\t\txScale: scales.xScale,\n\t\tyScale: scales.yScale,\n\t\tmargin: { top: 0, right: 0, bottom: 0, left: 0 },\n\t\twidth: chartWidth,\n\t\theight: chartHeight,\n\t} as unknown as Parameters< typeof DataContext.Provider >[ 0 ][ 'value' ];\n\n\treturn (\n\t\t<DataContext.Provider value={ dataContextValue }>\n\t\t\t<svg\n\t\t\t\twidth={ chartWidth }\n\t\t\t\theight={ chartHeight }\n\t\t\t\tclassName={ styles[ 'line-chart__annotations-overlay' ] }\n\t\t\t\tdata-testid=\"line-chart-annotations-overlay\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</svg>\n\t\t</DataContext.Provider>\n\t);\n};\n\nexport default LineChartAnnotationsOverlay;\n","import {\n\tAnnotation,\n\tCircleSubject,\n\tConnector,\n\tHtmlLabel,\n\tLabel,\n\tLineSubject,\n} from '@visx/annotation';\nimport { DataContext } from '@visx/xychart';\nimport merge from 'deepmerge';\nimport { useContext, useRef, useEffect, useState, useMemo } from 'react';\nimport { useGlobalChartsTheme } from '../../../providers';\nimport { isSafari } from '../../../utils';\nimport LineChartAnnotationLabelWithPopover, {\n\tPOPOVER_BUTTON_SIZE,\n} from './line-chart-annotation-label-popover';\nimport type { LineChartAnnotationProps } from '../types';\nimport type { LabelProps } from '@visx/annotation/lib/components/Label';\nimport type { TextProps } from '@visx/text';\nimport type { FC } from 'react';\n\ntype SubjectType = 'circle' | 'line-vertical' | 'line-horizontal';\n\nconst ANNOTATION_MAX_WIDTH = 125; // visx default\nconst ANNOTATION_INIT_HEIGHT = 100;\n\nexport const getLabelPosition = ( {\n\tsubjectType,\n\tx,\n\txMax,\n\ty,\n\tyMin,\n\tyMax,\n\tmaxWidth,\n\theight,\n}: {\n\tsubjectType: SubjectType;\n\tx: number;\n\txMax: number;\n\ty: number;\n\tyMin: number;\n\tyMax: number;\n\tmaxWidth?: number;\n\theight?: number | null;\n} ): {\n\tdx: number;\n\tdy: number;\n\tisFlippedHorizontally: boolean;\n\tisFlippedVertically: boolean;\n} => {\n\tconst annotationMaxWidth = maxWidth ?? ANNOTATION_MAX_WIDTH;\n\tconst annotationHeight = height ?? ANNOTATION_INIT_HEIGHT;\n\tlet dx = 15;\n\tlet dy = 15;\n\tlet isFlippedHorizontally = false;\n\tlet isFlippedVertically = false;\n\n\tif ( subjectType === 'line-horizontal' ) {\n\t\tdx = 0;\n\t\tdy = 20;\n\t}\n\n\tif ( subjectType === 'line-vertical' ) {\n\t\tdx = 20;\n\t\tdy = 0;\n\t}\n\n\t// Smart horizontal positioning: if annotation would extend beyond right edge, position it to the left\n\t// Account for the connector offset (dx) in boundary calculations\n\tconst effectiveX = x + dx;\n\n\tif ( effectiveX + annotationMaxWidth > xMax ) {\n\t\tisFlippedHorizontally = true;\n\n\t\tif ( subjectType === 'circle' ) {\n\t\t\tdx = -dx; // Just flip to the left side with same offset\n\t\t} else if ( subjectType === 'line-vertical' ) {\n\t\t\tdx = -20; // Position to the left of the line\n\t\t}\n\t}\n\n\t// Smart vertical positioning: check both top and bottom edges\n\t// For circle annotations, they are positioned below by default (dy > 0)\n\t// Only flip when close to bottom edge to position above\n\tif ( subjectType === 'circle' ) {\n\t\t// Check if positioning below would extend beyond bottom edge\n\t\tif ( y + dy + annotationHeight > yMin ) {\n\t\t\t// Too close to bottom edge, position above\n\t\t\tisFlippedVertically = true;\n\t\t\tdy = -Math.abs( dy ); // Ensure negative value to position above the point\n\t\t}\n\t\t// When close to top edge, keep default below positioning (no flip needed)\n\t} else if ( y - annotationHeight < yMax ) {\n\t\t// Too close to top edge, position below\n\t\tif ( subjectType === 'line-horizontal' ) {\n\t\t\tisFlippedVertically = true;\n\t\t\tdy = Math.abs( dy ); // Ensure positive value to position below the point\n\t\t} else if ( subjectType === 'line-vertical' ) {\n\t\t\tisFlippedVertically = true; // For anchor adjustment only\n\t\t}\n\t} else if ( y + annotationHeight > yMin ) {\n\t\t// Too close to bottom edge, position above\n\t\tif ( subjectType === 'line-horizontal' ) {\n\t\t\tisFlippedVertically = true;\n\t\t\tdy = -Math.abs( dy ); // Ensure negative value to position above the point\n\t\t} else if ( subjectType === 'line-vertical' ) {\n\t\t\tisFlippedVertically = true; // For anchor adjustment only\n\t\t}\n\t}\n\n\treturn { dx, dy, isFlippedHorizontally, isFlippedVertically };\n};\n\nconst getHorizontalAnchor = (\n\tsubjectType: SubjectType,\n\tisFlippedHorizontally: boolean\n): LabelProps[ 'horizontalAnchor' ] => {\n\tif ( subjectType === 'line-horizontal' ) {\n\t\treturn isFlippedHorizontally ? 'end' : 'start';\n\t}\n\n\treturn undefined;\n};\n\nconst getVerticalAnchor = (\n\tsubjectType: SubjectType,\n\tisFlippedVertically: boolean,\n\ty: number,\n\tyMax: number,\n\theight: number\n): TextProps[ 'verticalAnchor' ] => {\n\tif ( subjectType === 'line-vertical' ) {\n\t\tif ( isFlippedVertically ) {\n\t\t\t// If flipped due to top edge, anchor to top; if flipped due to bottom edge, anchor to bottom\n\t\t\treturn y - height < yMax ? 'start' : 'end';\n\t\t}\n\n\t\treturn 'start';\n\t}\n\n\treturn undefined;\n};\n\nconst LineChartAnnotation: FC< LineChartAnnotationProps > = ( {\n\tdatum,\n\ttitle,\n\tsubtitle,\n\tsubjectType = 'circle',\n\tstyles: datumStyles,\n\ttestId,\n\trenderLabel,\n\trenderLabelPopover,\n} ) => {\n\tconst providerTheme = useGlobalChartsTheme();\n\tconst { xScale, yScale } = useContext( DataContext ) || {};\n\tconst labelRef = useRef< SVGGElement >( null );\n\tconst [ height, setHeight ] = useState< number | null >( null );\n\n\t// Deep merge styles to preserve nested object properties\n\tconst styles = merge( providerTheme.annotationStyles ?? {}, datumStyles ?? {} );\n\n\t// Measure the label height once after initial render\n\tuseEffect( () => {\n\t\tif ( labelRef.current?.getBBox ) {\n\t\t\tconst bbox = labelRef.current.getBBox();\n\t\t\tsetHeight( bbox.height );\n\t\t}\n\t}, [] );\n\n\tconst positionData = useMemo( () => {\n\t\tif ( ! datum || ! datum.date || datum.value == null || ! xScale || ! yScale ) return null;\n\n\t\tconst x = xScale( datum.date );\n\t\tconst y = yScale( datum.value );\n\n\t\tif ( typeof x !== 'number' || typeof y !== 'number' ) return null;\n\n\t\tconst [ yMin, yMax ] = yScale.range().map( Number );\n\t\tconst [ xMin, xMax ] = xScale.range().map( Number );\n\n\t\t// If a custom label is provided, use the provided position\n\t\tif ( renderLabel ) {\n\t\t\treturn {\n\t\t\t\tx,\n\t\t\t\tdx: 0,\n\t\t\t\ty,\n\t\t\t\tdy: 0,\n\t\t\t\tyMin,\n\t\t\t\tyMax,\n\t\t\t\txMin,\n\t\t\t\txMax,\n\t\t\t\tisFlippedHorizontally: false,\n\t\t\t\tisFlippedVertically: false,\n\t\t\t};\n\t\t}\n\n\t\tconst position = getLabelPosition( {\n\t\t\tsubjectType,\n\t\t\tx,\n\t\t\txMax,\n\t\t\ty,\n\t\t\tyMin,\n\t\t\tyMax,\n\t\t\tmaxWidth: styles?.label?.maxWidth,\n\t\t\theight,\n\t\t} );\n\n\t\treturn { x, y, yMin, yMax, xMin, xMax, ...position };\n\t}, [ datum, xScale, yScale, subjectType, styles?.label?.maxWidth, height, renderLabel ] );\n\n\tif ( ! positionData ) return null;\n\n\tconst { x, y, yMin, yMax, xMin, xMax, dx, dy, isFlippedHorizontally, isFlippedVertically } =\n\t\tpositionData;\n\n\tconst getLabelY = () => {\n\t\tconst labelY = styles?.label?.y;\n\n\t\tif ( labelY === 'start' ) return yMax;\n\t\tif ( labelY === 'end' ) return yMin;\n\n\t\treturn labelY;\n\t};\n\n\tconst getLabelX = () => {\n\t\tconst labelX = styles?.label?.x;\n\n\t\tif ( labelX === 'start' ) return xMin;\n\t\tif ( labelX === 'end' ) return xMax;\n\n\t\treturn labelX;\n\t};\n\n\tconst labelPosition = {\n\t\tx: getLabelX(),\n\t\ty: getLabelY(),\n\t};\n\n\t// Safari has a bug where children of an SVG foreignObject are not positioned correctly https://bugs.webkit.org/show_bug.cgi?id=23113\n\t// This is a workaround to position the label correctly\n\tconst getSafariHTMLLabelPosition = () => {\n\t\tconst labelWidth = POPOVER_BUTTON_SIZE;\n\t\tconst labelHeight = POPOVER_BUTTON_SIZE;\n\n\t\treturn isSafari()\n\t\t\t? {\n\t\t\t\t\ttransform: `translate(${\n\t\t\t\t\t\tx +\n\t\t\t\t\t\t( dx || 0 ) +\n\t\t\t\t\t\t( typeof labelPosition.x === 'number' ? labelPosition.x - x : 0 ) -\n\t\t\t\t\t\tlabelWidth\n\t\t\t\t\t}px, ${\n\t\t\t\t\t\ty +\n\t\t\t\t\t\t( dy || 0 ) +\n\t\t\t\t\t\t( typeof labelPosition.y === 'number' ? labelPosition.y - y : 0 ) -\n\t\t\t\t\t\tlabelHeight\n\t\t\t\t\t}px)`,\n\t\t\t\t\twidth: labelWidth,\n\t\t\t\t\theight: labelHeight,\n\t\t\t  }\n\t\t\t: undefined;\n\t};\n\n\treturn (\n\t\t<g data-testid={ testId }>\n\t\t\t<Annotation x={ x } y={ y } dx={ dx } dy={ dy }>\n\t\t\t\t<Connector { ...styles?.connector } />\n\t\t\t\t{ subjectType === 'circle' && <CircleSubject { ...styles?.circleSubject } /> }\n\t\t\t\t{ subjectType === 'line-vertical' && (\n\t\t\t\t\t<LineSubject\n\t\t\t\t\t\tmin={ yMax }\n\t\t\t\t\t\tmax={ yMin }\n\t\t\t\t\t\t{ ...{ ...styles?.lineSubject, orientation: 'vertical' } }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ subjectType === 'line-horizontal' && (\n\t\t\t\t\t<LineSubject\n\t\t\t\t\t\tmin={ xMin }\n\t\t\t\t\t\tmax={ xMax }\n\t\t\t\t\t\t{ ...{ ...styles?.lineSubject, orientation: 'horizontal' } }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ renderLabel ? (\n\t\t\t\t\t<HtmlLabel { ...styles?.label } { ...labelPosition }>\n\t\t\t\t\t\t<div style={ getSafariHTMLLabelPosition() }>\n\t\t\t\t\t\t\t{ renderLabelPopover ? (\n\t\t\t\t\t\t\t\t<LineChartAnnotationLabelWithPopover\n\t\t\t\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\t\t\t\tsubtitle={ subtitle }\n\t\t\t\t\t\t\t\t\trenderLabel={ renderLabel }\n\t\t\t\t\t\t\t\t\trenderLabelPopover={ renderLabelPopover }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\trenderLabel( { title, subtitle } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</HtmlLabel>\n\t\t\t\t) : (\n\t\t\t\t\t<g ref={ labelRef }>\n\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\t\tsubtitle={ subtitle }\n\t\t\t\t\t\t\t{ ...styles?.label }\n\t\t\t\t\t\t\t{ ...labelPosition }\n\t\t\t\t\t\t\thorizontalAnchor={ getHorizontalAnchor( subjectType, isFlippedHorizontally ) }\n\t\t\t\t\t\t\tverticalAnchor={ getVerticalAnchor(\n\t\t\t\t\t\t\t\tsubjectType,\n\t\t\t\t\t\t\t\tisFlippedVertically,\n\t\t\t\t\t\t\t\ty,\n\t\t\t\t\t\t\t\tyMax,\n\t\t\t\t\t\t\t\theight ?? ANNOTATION_INIT_HEIGHT\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</g>\n\t\t\t\t) }\n\t\t\t</Annotation>\n\t\t</g>\n\t);\n};\n\nexport default LineChartAnnotation;\n","import { DataContext } from '@visx/xychart';\nimport { useContext } from 'react';\nimport type { LineChartGlyphProps } from '../types';\nimport type { FC } from 'react';\n\nconst toNumber = ( val?: number | string | null ): number | undefined => {\n\tconst num = typeof val === 'number' ? val : parseFloat( val );\n\treturn isNaN( num ) ? undefined : num;\n};\n\nconst LineChartGlyph: FC< LineChartGlyphProps > = ( {\n\tdata,\n\tindex,\n\tcolor,\n\tglyphStyle,\n\trenderGlyph,\n\taccessors,\n\tposition,\n} ) => {\n\tconst { xScale, yScale } = useContext( DataContext ) || {};\n\tif ( ! xScale || ! yScale ) return null;\n\n\tif ( data.data.length === 0 ) return null;\n\n\tconst point = position === 'start' ? data.data[ 0 ] : data.data[ data.data.length - 1 ];\n\n\tconst x = xScale( accessors.xAccessor( point ) );\n\tconst y = yScale( accessors.yAccessor( point ) );\n\n\tif ( typeof x !== 'number' || typeof y !== 'number' ) return null;\n\n\tconst size = Math.max( 0, toNumber( glyphStyle?.radius ) ?? 4 );\n\n\treturn renderGlyph( {\n\t\tkey: `${ position }-glyph-${ data.label }`,\n\t\tindex,\n\t\tdatum: point,\n\t\tcolor,\n\t\tsize,\n\t\tx,\n\t\ty,\n\t\tglyphStyle,\n\t\tposition,\n\t} );\n};\n\nexport default LineChartGlyph;\n"]}

package/dist/{chunk-OJCBYFXF.js → chunk-4OOCYYLB.js}

@@ -1,7 +1,7 @@
 import {
   AccessibleTooltip,
   useKeyboardNavigation
-} from "./chunk-W5KOH3TV.js";
+} from "./chunk-5XI443YP.js";
 import {
   withResponsive
 } from "./chunk-TYYW4BG3.js";
@@ -10,7 +10,7 @@ import {
   SingleChartContext,
   useChartLegendItems,
   useSingleChartContext
-} from "./chunk-IKDM6OVX.js";
+} from "./chunk-JX6O5KKS.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -28,7 +28,7 @@ import {
 } from "./chunk-5OB3F7GC.js";
 
 // src/components/line-chart/line-chart.tsx
-import { formatNumberCompact } from "@automattic/number-formatters";
+import { formatNumberCompact, formatNumber } from "@automattic/number-formatters";
 import { curveCatmullRom, curveLinear, curveMonotoneX } from "@visx/curve";
 import { LinearGradient } from "@visx/gradient";
 import { scaleTime } from "@visx/scale";
@@ -555,7 +555,7 @@ var renderDefaultTooltip = (params) => {
         point.key,
         ":"
       ] }),
-      /* @__PURE__ */ jsx5("span", { className: line_chart_module_default["line-chart__tooltip-value"], children: point.value })
+      /* @__PURE__ */ jsx5("span", { className: line_chart_module_default["line-chart__tooltip-value"], children: formatNumber(point.value) })
     ] }, point.key))
   ] });
 };
@@ -1036,4 +1036,4 @@ export {
   LineChart,
   LineChartResponsive
 };
-//# sourceMappingURL=chunk-OJCBYFXF.js.map
+//# sourceMappingURL=chunk-4OOCYYLB.js.map

package/dist/chunk-4OOCYYLB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/line-chart/line-chart.tsx","../src/components/private/default-glyph/default-glyph.tsx","../src/components/line-chart/line-chart.module.scss","../src/components/line-chart/private/line-chart-annotation-label-popover.tsx","../src/components/line-chart/private/line-chart-annotations-overlay.tsx","../src/components/line-chart/private/line-chart-annotation.tsx","../src/components/line-chart/private/line-chart-glyph.tsx"],"sourcesContent":["import { formatNumberCompact, formatNumber } from '@automattic/number-formatters';\nimport { curveCatmullRom, curveLinear, curveMonotoneX } from '@visx/curve';\nimport { LinearGradient } from '@visx/gradient';\nimport { scaleTime } from '@visx/scale';\nimport { XYChart, AreaSeries, Grid, Axis, DataContext } from '@visx/xychart';\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { differenceInHours, differenceInYears } from 'date-fns';\nimport { useMemo, useContext, forwardRef, useImperativeHandle, useState, useRef } from 'react';\nimport {\n\tuseXYChartTheme,\n\tuseChartDataTransform,\n\tuseChartMargin,\n\tuseElementHeight,\n\tusePrefersReducedMotion,\n} from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tGlobalChartsContext,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n} from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { DefaultGlyph } from '../private/default-glyph';\nimport { SingleChartContext, type SingleChartRef } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { AccessibleTooltip, useKeyboardNavigation } from '../tooltip';\nimport styles from './line-chart.module.scss';\nimport { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';\nimport type { CurveType, RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';\nimport type { DataPoint, DataPointDate, SeriesData, Optional } from '../../types';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { TickFormatter } from '@visx/axis';\nimport type { GlyphProps } from '@visx/xychart';\nimport type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';\nimport type { FC, Ref } from 'react';\n\nconst X_TICK_WIDTH = 60;\n\nconst defaultRenderGlyph = < Datum extends object >( props: RenderLineGlyphProps< Datum > ) => {\n\treturn <DefaultGlyph { ...props } key={ props.key } />;\n};\n\nconst toNumber = ( val?: number | string | null ): number | undefined => {\n\tconst num = typeof val === 'number' ? val : parseFloat( val );\n\treturn isNaN( num ) ? undefined : num;\n};\n\n/**\n * Determines the curve type for the line chart based on the provided type and smoothing parameters\n *\n * @param {CurveType} type      - The explicit curve type to use\n * @param {boolean}   smoothing - Legacy smoothing parameter\n * @return The curve function to use for the line\n */\nconst getCurveType = ( type?: CurveType, smoothing?: boolean ) => {\n\t// If no type specified, use legacy smoothing behavior\n\tif ( ! type ) {\n\t\treturn smoothing ? curveCatmullRom : curveLinear;\n\t}\n\n\t// Handle explicit curve types\n\tswitch ( type ) {\n\t\tcase 'smooth':\n\t\t\treturn curveCatmullRom;\n\t\tcase 'monotone':\n\t\t\treturn curveMonotoneX;\n\t\tcase 'linear':\n\t\t\treturn curveLinear;\n\t\tdefault:\n\t\t\treturn curveLinear;\n\t}\n};\n\nconst renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) => {\n\tconst { tooltipData } = params;\n\tconst nearestDatum = tooltipData?.nearestDatum?.datum;\n\tif ( ! nearestDatum ) return null;\n\n\tconst tooltipPoints: TooltipDatum[] = Object.entries( tooltipData?.datumByKey || {} )\n\t\t.map( ( [ key, { datum } ] ) => ( {\n\t\t\tkey,\n\t\t\tvalue: datum.value as number,\n\t\t} ) )\n\t\t.sort( ( a, b ) => b.value - a.value );\n\n\treturn (\n\t\t<div className={ styles[ 'line-chart__tooltip' ] }>\n\t\t\t<div className={ styles[ 'line-chart__tooltip-date' ] }>\n\t\t\t\t{ nearestDatum.date?.toLocaleDateString() }\n\t\t\t</div>\n\t\t\t{ tooltipPoints.map( point => (\n\t\t\t\t<div key={ point.key } className={ styles[ 'line-chart__tooltip-row' ] }>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-label' ] }>{ point.key }:</span>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-value' ] }>\n\t\t\t\t\t\t{ formatNumber( point.value ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t</div>\n\t);\n};\n\nconst formatYearTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleDateString( undefined, {\n\t\tyear: 'numeric',\n\t} );\n};\n\nconst formatDateTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleDateString( undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t} );\n};\n\nconst formatHourTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleTimeString( undefined, {\n\t\thour: 'numeric',\n\t\thour12: true,\n\t} );\n};\n\nconst getFormatter = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {\n\tconst minX = Math.min( ...sortedData.map( datom => datom.data.at( 0 )?.date ) );\n\tconst maxX = Math.max( ...sortedData.map( datom => datom.data.at( -1 )?.date ) );\n\n\tconst diffInHours = Math.abs( differenceInHours( maxX, minX ) );\n\tif ( diffInHours <= 24 ) {\n\t\treturn formatHourTick;\n\t}\n\n\tconst diffInYears = Math.abs( differenceInYears( maxX, minX ) );\n\tif ( diffInYears <= 1 ) {\n\t\treturn formatDateTick;\n\t}\n\n\treturn formatYearTick;\n};\n\nconst guessOptimalNumTicks = (\n\tdata: ReturnType< typeof useChartDataTransform >,\n\tchartWidth: number,\n\ttickFormatter: ( timestamp: number ) => string\n) => {\n\tconst minX = Math.min( ...data.map( datom => datom.data.at( 0 )?.date ) );\n\tconst maxX = Math.max( ...data.map( datom => datom.data.at( -1 )?.date ) );\n\tconst xScale = scaleTime( { domain: [ minX, maxX ] } );\n\n\t// Calculate upper bound of tick numbers based on data points and chart width\n\tconst upperBound = Math.min( data[ 0 ]?.data.length, Math.ceil( chartWidth / X_TICK_WIDTH ) );\n\tlet secondBestGuess = 1; // a tick number that's no greater than upperBound\n\n\tfor ( let numTicks = upperBound; numTicks > 1; --numTicks ) {\n\t\tconst ticks = xScale.ticks( numTicks ).map( d => tickFormatter( d.getTime() ) );\n\n\t\t// The .ticks() function doesn't properly respect the requested number of ticks, so we need to check the length\n\t\tif ( ticks.length > upperBound ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tsecondBestGuess = Math.max( secondBestGuess, ticks.length );\n\n\t\tconst uniqueTicks = Array.from( new Set( ticks ) );\n\t\tif ( uniqueTicks.length === 1 ) {\n\t\t\t// All ticks are the same, so skip further processing\n\t\t\treturn 1;\n\t\t}\n\n\t\t// Example: OCT 1 JAN 1 APR 1 JUL 1 OCT 1\n\t\t// Here, the two OCTs are not duplicates as they represent October of two different years.\n\t\tconst hasConsecutiveDuplicate = ticks.some(\n\t\t\t( tick, idx ) => idx > 0 && tick === ticks[ idx - 1 ]\n\t\t);\n\n\t\tif ( hasConsecutiveDuplicate ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\treturn ticks.length;\n\t}\n\n\treturn secondBestGuess;\n};\n\nconst validateData = ( data: SeriesData[] ) => {\n\tif ( ! data?.length ) return 'No data available';\n\n\tconst hasInvalidData = data.some( series =>\n\t\tseries.data.some(\n\t\t\t( point: DataPointDate | DataPoint ) =>\n\t\t\t\tisNaN( point.value as number ) ||\n\t\t\t\tpoint.value === null ||\n\t\t\t\tpoint.value === undefined ||\n\t\t\t\t( 'date' in point && point.date && isNaN( point.date.getTime() ) )\n\t\t)\n\t);\n\n\tif ( hasInvalidData ) return 'Invalid data';\n\treturn null;\n};\n\n// Inner component to access DataContext and provide scale data to ref\nconst LineChartScalesRef: FC< {\n\tchartRef?: Ref< SingleChartRef >;\n\twidth: number;\n\theight: number;\n\tmargin?: { top?: number; right?: number; bottom?: number; left?: number };\n} > = ( { chartRef, width, height, margin } ) => {\n\tconst context = useContext( DataContext );\n\n\tuseImperativeHandle(\n\t\tchartRef,\n\t\t() => ( {\n\t\t\tgetScales: () => {\n\t\t\t\tif ( ! context?.xScale || ! context?.yScale ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\txScale: context.xScale,\n\t\t\t\t\tyScale: context.yScale,\n\t\t\t\t};\n\t\t\t},\n\t\t\tgetChartDimensions: () => ( {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t\tmargin: margin || {},\n\t\t\t} ),\n\t\t} ),\n\t\t[ context, width, height, margin ]\n\t);\n\n\treturn null; // This component only provides the ref interface\n};\n\nconst LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(\n\t(\n\t\t{\n\t\t\tdata,\n\t\t\tchartId: providedChartId,\n\t\t\twidth,\n\t\t\theight,\n\t\t\tclassName,\n\t\t\tmargin,\n\t\t\twithTooltips = true,\n\t\t\twithTooltipCrosshairs,\n\t\t\tshowLegend = false,\n\t\t\tlegendOrientation = 'horizontal',\n\t\t\tlegendAlignment = 'center',\n\t\t\tlegendPosition = 'bottom',\n\t\t\tlegendMaxWidth,\n\t\t\tlegendTextOverflow = 'wrap',\n\t\t\tlegendItemClassName,\n\t\t\trenderGlyph = defaultRenderGlyph,\n\t\t\tglyphStyle = {},\n\t\t\tlegendShape = 'line',\n\t\t\twithLegendGlyph = false,\n\t\t\twithGradientFill = false,\n\t\t\tsmoothing = true,\n\t\t\tcurveType,\n\t\t\trenderTooltip = renderDefaultTooltip,\n\t\t\twithStartGlyphs = false,\n\t\t\twithEndGlyphs = false,\n\t\t\tlegendInteractive = false,\n\t\t\tanimation,\n\t\t\toptions = {},\n\t\t\tonPointerDown = undefined,\n\t\t\tonPointerUp = undefined,\n\t\t\tonPointerMove = undefined,\n\t\t\tonPointerOut = undefined,\n\t\t\tchildren,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst providerTheme = useGlobalChartsTheme();\n\t\tconst theme = useXYChartTheme( data );\n\t\tconst chartId = useChartId( providedChartId );\n\t\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\t\tconst chartRef = useRef< HTMLDivElement >( null );\n\t\tconst [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );\n\t\tconst [ isNavigating, setIsNavigating ] = useState( false );\n\t\tconst internalChartRef = useRef< SingleChartRef >( null );\n\n\t\t// Forward the external ref to the internal ref\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => ( {\n\t\t\t\tgetScales: () => internalChartRef.current?.getScales() || null,\n\t\t\t\tgetChartDimensions: () =>\n\t\t\t\t\tinternalChartRef.current?.getChartDimensions() || { width: 0, height: 0, margin: {} },\n\t\t\t} ),\n\t\t\t[ internalChartRef ]\n\t\t);\n\n\t\tconst dataSorted = useChartDataTransform( data );\n\t\tconst { getElementStyles, isSeriesVisible } = useGlobalChartsContext();\n\n\t\t// Add visibility information to series when using interactive legends\n\t\tconst seriesWithVisibility = useMemo( () => {\n\t\t\tif ( ! chartId || ! legendInteractive ) {\n\t\t\t\treturn dataSorted.map( ( series, index ) => ( { series, index, isVisible: true } ) );\n\t\t\t}\n\t\t\treturn dataSorted.map( ( series, index ) => ( {\n\t\t\t\tseries,\n\t\t\t\tindex,\n\t\t\t\tisVisible: isSeriesVisible( chartId, series.label ),\n\t\t\t} ) );\n\t\t}, [ dataSorted, chartId, isSeriesVisible, legendInteractive ] );\n\n\t\t// Check if all series are hidden\n\t\tconst allSeriesHidden = useMemo( () => {\n\t\t\treturn seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );\n\t\t}, [ seriesWithVisibility ] );\n\n\t\t// Use the keyboard navigation hook\n\t\tconst { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {\n\t\t\tselectedIndex,\n\t\t\tsetSelectedIndex,\n\t\t\tisNavigating,\n\t\t\tsetIsNavigating,\n\t\t\tchartRef,\n\t\t\ttotalPoints: dataSorted[ 0 ]?.data.length || 0,\n\t\t} );\n\n\t\tconst chartOptions = useMemo( () => {\n\t\t\tconst formatter = getFormatter( dataSorted );\n\n\t\t\treturn {\n\t\t\t\taxis: {\n\t\t\t\t\tx: {\n\t\t\t\t\t\torientation: 'bottom' as const,\n\t\t\t\t\t\tnumTicks: guessOptimalNumTicks( dataSorted, width, formatter ),\n\t\t\t\t\t\ttickFormat: formatter,\n\t\t\t\t\t\t...options?.axis?.x,\n\t\t\t\t\t},\n\t\t\t\t\ty: {\n\t\t\t\t\t\torientation: 'left' as const,\n\t\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\t\ttickFormat: formatNumberCompact as TickFormatter< number >,\n\t\t\t\t\t\t...options?.axis?.y,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\txScale: {\n\t\t\t\t\ttype: 'time' as const,\n\t\t\t\t\t...options?.xScale,\n\t\t\t\t},\n\t\t\t\tyScale: {\n\t\t\t\t\ttype: 'linear' as const,\n\t\t\t\t\tnice: true,\n\t\t\t\t\tzero: false,\n\t\t\t\t\t...options?.yScale,\n\t\t\t\t},\n\t\t\t};\n\t\t}, [ options, dataSorted, width ] );\n\n\t\tconst tooltipRenderGlyph = useMemo( () => {\n\t\t\treturn ( props: GlyphProps< DataPointDate > ) => {\n\t\t\t\tconst seriesIndex = dataSorted.findIndex(\n\t\t\t\t\tseries =>\n\t\t\t\t\t\tseries.label === props.key || series.data.includes( props.datum as DataPointDate )\n\t\t\t\t);\n\n\t\t\t\tconst seriesData = dataSorted[ seriesIndex ];\n\n\t\t\t\tconst { color, glyph: themeGlyph } = getElementStyles( {\n\t\t\t\t\tdata: seriesData,\n\t\t\t\t\tindex: seriesIndex,\n\t\t\t\t} );\n\n\t\t\t\tconst propsWithResolvedColor = { ...props, color };\n\n\t\t\t\treturn themeGlyph\n\t\t\t\t\t? themeGlyph( propsWithResolvedColor )\n\t\t\t\t\t: renderGlyph( propsWithResolvedColor );\n\t\t\t};\n\t\t}, [ dataSorted, renderGlyph, getElementStyles ] );\n\n\t\tconst defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme );\n\n\t\tconst error = validateData( dataSorted );\n\t\tconst isDataValid = ! error;\n\n\t\t// Memoize legend options to prevent unnecessary re-calculations\n\t\tconst legendOptions = useMemo(\n\t\t\t() => ( {\n\t\t\t\twithGlyph: withLegendGlyph,\n\t\t\t\tglyphSize: Math.max( 0, toNumber( glyphStyle?.radius ) ?? 4 ),\n\t\t\t\trenderGlyph,\n\t\t\t} ),\n\t\t\t[ withLegendGlyph, glyphStyle?.radius, renderGlyph ]\n\t\t);\n\n\t\t// Create legend items using the reusable hook\n\t\tconst legendItems = useChartLegendItems( dataSorted, legendOptions, legendShape );\n\n\t\t// Memoize metadata to prevent unnecessary re-registration\n\t\tconst chartMetadata = useMemo(\n\t\t\t() => ( {\n\t\t\t\twithGradientFill,\n\t\t\t\tsmoothing,\n\t\t\t\tcurveType,\n\t\t\t\twithStartGlyphs,\n\t\t\t\twithEndGlyphs,\n\t\t\t\twithLegendGlyph,\n\t\t\t} ),\n\t\t\t[ withGradientFill, smoothing, curveType, withStartGlyphs, withEndGlyphs, withLegendGlyph ]\n\t\t);\n\n\t\t// Register chart with context only if data is valid\n\t\tuseChartRegistration( {\n\t\t\tchartId,\n\t\t\tlegendItems,\n\t\t\tchartType: 'line',\n\t\t\tisDataValid,\n\t\t\tmetadata: chartMetadata,\n\t\t} );\n\n\t\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\t\tconst accessors = {\n\t\t\txAccessor: ( d: DataPointDate ) => d?.date,\n\t\t\tyAccessor: ( d: DataPointDate ) => d?.value,\n\t\t};\n\n\t\t// Create a custom renderTooltip that includes focus capability\n\t\tif ( error ) {\n\t\t\treturn <div className={ clsx( 'line-chart', styles[ 'line-chart' ] ) }>{ error }</div>;\n\t\t}\n\n\t\treturn (\n\t\t\t<SingleChartContext.Provider\n\t\t\t\tvalue={ {\n\t\t\t\t\tchartId,\n\t\t\t\t\tchartRef: internalChartRef,\n\t\t\t\t\tchartWidth: width,\n\t\t\t\t\tchartHeight: height - ( showLegend ? legendHeight : 0 ),\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'line-chart',\n\t\t\t\t\t\tstyles[ 'line-chart' ],\n\t\t\t\t\t\t{ [ styles[ 'line-chart--animated' ] ]: animation && ! prefersReducedMotion },\n\t\t\t\t\t\t{ [ styles[ 'line-chart--legend-top' ] ]: showLegend && legendPosition === 'top' },\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tdata-testid=\"line-chart\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\theight,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\trole=\"grid\"\n\t\t\t\t\t\taria-label={ __( 'Line chart', 'jetpack-charts' ) }\n\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\tonKeyDown={ onChartKeyDown }\n\t\t\t\t\t\tonFocus={ onChartFocus }\n\t\t\t\t\t\tonBlur={ onChartBlur }\n\t\t\t\t\t\tref={ chartRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<XYChart\n\t\t\t\t\t\t\ttheme={ theme }\n\t\t\t\t\t\t\twidth={ width }\n\t\t\t\t\t\t\theight={ height - ( showLegend ? legendHeight : 0 ) }\n\t\t\t\t\t\t\tmargin={ {\n\t\t\t\t\t\t\t\t...defaultMargin,\n\t\t\t\t\t\t\t\t...margin,\n\t\t\t\t\t\t\t\t...( showLegend && legendPosition === 'top'\n\t\t\t\t\t\t\t\t\t? { top: ( defaultMargin.top || 0 ) + legendHeight }\n\t\t\t\t\t\t\t\t\t: {} ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t// xScale and yScale could be set in Axis as well, but they are `scale` props there.\n\t\t\t\t\t\t\txScale={ chartOptions.xScale }\n\t\t\t\t\t\t\tyScale={ chartOptions.yScale }\n\t\t\t\t\t\t\tonPointerDown={ onPointerDown }\n\t\t\t\t\t\t\tonPointerUp={ onPointerUp }\n\t\t\t\t\t\t\tonPointerMove={ onPointerMove }\n\t\t\t\t\t\t\tonPointerOut={ onPointerOut }\n\t\t\t\t\t\t\tpointerEventsDataKey=\"nearest\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Grid columns={ false } numTicks={ 4 } />\n\t\t\t\t\t\t\t<Axis { ...chartOptions.axis.x } />\n\t\t\t\t\t\t\t<Axis { ...chartOptions.axis.y } />\n\n\t\t\t\t\t\t\t{ allSeriesHidden ? (\n\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\tx={ width / 2 }\n\t\t\t\t\t\t\t\t\ty={ ( height - ( showLegend ? legendHeight : 0 ) ) / 2 }\n\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\tfill={ providerTheme.gridStyles?.stroke || '#ccc' }\n\t\t\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\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\t\t'All series are hidden. Click legend items to show data.',\n\t\t\t\t\t\t\t\t\t\t'jetpack-charts'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t) : null }\n\n\t\t\t\t\t\t\t{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {\n\t\t\t\t\t\t\t\t// Skip rendering invisible series\n\t\t\t\t\t\t\t\tif ( ! isVisible ) {\n\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tconst { color, lineStyles, glyph } = getElementStyles( {\n\t\t\t\t\t\t\t\t\tdata: seriesData,\n\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\t\tconst lineProps = {\n\t\t\t\t\t\t\t\t\tstroke: color,\n\t\t\t\t\t\t\t\t\t...lineStyles,\n\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<g key={ seriesData?.label || index }>\n\t\t\t\t\t\t\t\t\t\t{ withGradientFill && (\n\t\t\t\t\t\t\t\t\t\t\t<LinearGradient\n\t\t\t\t\t\t\t\t\t\t\t\tid={ `area-gradient-${ chartId }-${ index + 1 }` }\n\t\t\t\t\t\t\t\t\t\t\t\tfrom={ color }\n\t\t\t\t\t\t\t\t\t\t\t\tfromOpacity={ 0.4 }\n\t\t\t\t\t\t\t\t\t\t\t\ttoOpacity={ 0.1 }\n\t\t\t\t\t\t\t\t\t\t\t\tto={ providerTheme.backgroundColor }\n\t\t\t\t\t\t\t\t\t\t\t\t{ ...seriesData.options?.gradient }\n\t\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"line-gradient\"\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{ seriesData.options?.gradient?.stops?.map( ( stop, stopIndex ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `${ stop.offset }-${ stop.color || color }` }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\toffset={ stop.offset }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstopColor={ stop.color || color }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstopOpacity={ stop.opacity ?? 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-testid={ `line-gradient-stop-${ chartId }-${ index }-${ stopIndex }` }\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) ) }\n\t\t\t\t\t\t\t\t\t\t\t</LinearGradient>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t<AreaSeries\n\t\t\t\t\t\t\t\t\t\t\tkey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\t\t\tdataKey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\t\t\tdata={ seriesData.data as DataPointDate[] }\n\t\t\t\t\t\t\t\t\t\t\t{ ...accessors }\n\t\t\t\t\t\t\t\t\t\t\tfill={\n\t\t\t\t\t\t\t\t\t\t\t\twithGradientFill\n\t\t\t\t\t\t\t\t\t\t\t\t\t? `url(#area-gradient-${ chartId }-${ index + 1 })`\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'transparent'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\trenderLine={ true }\n\t\t\t\t\t\t\t\t\t\t\tcurve={ getCurveType( curveType, smoothing ) }\n\t\t\t\t\t\t\t\t\t\t\tlineProps={ lineProps }\n\t\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t\t{ withStartGlyphs && (\n\t\t\t\t\t\t\t\t\t\t\t<LineChartGlyph\n\t\t\t\t\t\t\t\t\t\t\t\tindex={ index }\n\t\t\t\t\t\t\t\t\t\t\t\tdata={ seriesData }\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\t\t\trenderGlyph={ glyph ?? renderGlyph }\n\t\t\t\t\t\t\t\t\t\t\t\taccessors={ accessors }\n\t\t\t\t\t\t\t\t\t\t\t\tglyphStyle={ glyphStyle }\n\t\t\t\t\t\t\t\t\t\t\t\tposition=\"start\"\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\t{ withEndGlyphs && (\n\t\t\t\t\t\t\t\t\t\t\t<LineChartGlyph\n\t\t\t\t\t\t\t\t\t\t\t\tindex={ index }\n\t\t\t\t\t\t\t\t\t\t\t\tdata={ seriesData }\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\t\t\trenderGlyph={ glyph ?? renderGlyph }\n\t\t\t\t\t\t\t\t\t\t\t\taccessors={ accessors }\n\t\t\t\t\t\t\t\t\t\t\t\tglyphStyle={ glyphStyle }\n\t\t\t\t\t\t\t\t\t\t\t\tposition=\"end\"\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</g>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\n\t\t\t\t\t\t\t{ withTooltips && (\n\t\t\t\t\t\t\t\t<AccessibleTooltip\n\t\t\t\t\t\t\t\t\tdetectBounds\n\t\t\t\t\t\t\t\t\tsnapTooltipToDatumX\n\t\t\t\t\t\t\t\t\tsnapTooltipToDatumY\n\t\t\t\t\t\t\t\t\tshowSeriesGlyphs\n\t\t\t\t\t\t\t\t\trenderTooltip={ renderTooltip }\n\t\t\t\t\t\t\t\t\trenderGlyph={ tooltipRenderGlyph }\n\t\t\t\t\t\t\t\t\tglyphStyle={ glyphStyle }\n\t\t\t\t\t\t\t\t\tshowVerticalCrosshair={ withTooltipCrosshairs?.showVertical }\n\t\t\t\t\t\t\t\t\tshowHorizontalCrosshair={ withTooltipCrosshairs?.showHorizontal }\n\t\t\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\t\t\ttooltipRef={ tooltipRef }\n\t\t\t\t\t\t\t\t\tkeyboardFocusedClassName={ styles[ 'line-chart__tooltip--keyboard-focused' ] }\n\t\t\t\t\t\t\t\t\tseries={ dataSorted }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t{ /* Component to expose scale data via ref */ }\n\t\t\t\t\t\t\t<LineChartScalesRef\n\t\t\t\t\t\t\t\tchartRef={ internalChartRef }\n\t\t\t\t\t\t\t\twidth={ width }\n\t\t\t\t\t\t\t\theight={ height }\n\t\t\t\t\t\t\t\tmargin={ margin }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</XYChart>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{ showLegend && (\n\t\t\t\t\t\t<Legend\n\t\t\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\t\t\talignment={ legendAlignment }\n\t\t\t\t\t\t\tposition={ legendPosition }\n\t\t\t\t\t\t\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\n\t\t\t\t\t\t\tclassName={ styles[ 'line-chart-legend' ] }\n\t\t\t\t\t\t\tshape={ legendShape }\n\t\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t\t\tinteractive={ legendInteractive }\n\t\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t</SingleChartContext.Provider>\n\t\t);\n\t}\n);\n\n// Component type definitions for composition API\ntype LineChartAnnotationComponents = {\n\tAnnotationsOverlay: typeof LineChartAnnotationsOverlay;\n\tAnnotation: typeof LineChartAnnotation;\n\tLegend: typeof Legend;\n};\n\ntype LineChartBaseProps = Optional< LineChartProps, 'width' | 'height' | 'size' >;\n\ntype LineChartComponent = React.ForwardRefExoticComponent<\n\tLineChartBaseProps & React.RefAttributes< SingleChartRef >\n> &\n\tLineChartAnnotationComponents;\n\ntype LineChartResponsiveComponent = React.ForwardRefExoticComponent<\n\tLineChartBaseProps & ResponsiveConfig & React.RefAttributes< SingleChartRef >\n> &\n\tLineChartAnnotationComponents;\n\nconst LineChartWithProvider = forwardRef< SingleChartRef, LineChartProps >( ( props, ref ) => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, render the core component directly\n\tif ( existingContext ) {\n\t\treturn <LineChartInternal { ...props } ref={ ref } />;\n\t}\n\n\t// Otherwise, wrap with our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<LineChartInternal { ...props } ref={ ref } />\n\t\t</GlobalChartsProvider>\n\t);\n} );\n\nLineChartWithProvider.displayName = 'LineChart';\n\nconst LineChart = attachSubComponents( LineChartWithProvider, {\n\tLegend: Legend,\n\tAnnotationsOverlay: LineChartAnnotationsOverlay,\n\tAnnotation: LineChartAnnotation,\n} ) as LineChartComponent;\n\nconst LineChartResponsive = attachSubComponents(\n\twithResponsive< LineChartProps >( LineChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tAnnotationsOverlay: LineChartAnnotationsOverlay,\n\t\tAnnotation: LineChartAnnotation,\n\t}\n) as LineChartResponsiveComponent;\n\nexport { LineChartResponsive as default, LineChart as LineChartUnresponsive };\n","import { DataContext } from '@visx/xychart';\nimport { useContext } from 'react';\nimport type { RenderLineGlyphProps } from '../../line-chart';\n\nexport const DefaultGlyph = < Datum extends object >( props: RenderLineGlyphProps< Datum > ) => {\n\tconst { theme } = useContext( DataContext ) || {};\n\tconst position = props.position || 'start';\n\n\treturn (\n\t\t<circle\n\t\t\tcx={ props.x }\n\t\t\tcy={ props.y }\n\t\t\tr={ props.size }\n\t\t\tfill={ props.color }\n\t\t\tstroke={ theme?.backgroundColor }\n\t\t\tstrokeWidth={ 1.5 }\n\t\t\tpaintOrder=\"fill\"\n\t\t\tdata-testid={ `${ position }-glyph-${ props.index }` }\n\t\t\t{ ...props.glyphStyle }\n\t\t/>\n\t);\n};\n","import 'css-chunk:src/components/line-chart/line-chart.module.scss';export default {\n  \"line-chart\": \"a8ccharts-ITM3dm\",\n  \"line-chart--animated\": \"a8ccharts-fXvEBi\",\n  \"rise\": \"a8ccharts-gb7M8E\",\n  \"line-chart--legend-top\": \"a8ccharts-zQLTUG\",\n  \"line-chart__tooltip\": \"a8ccharts-aqcmeq\",\n  \"line-chart__annotation-label-popover\": \"a8ccharts-TqNZkh\",\n  \"line-chart__tooltip-date\": \"a8ccharts-4Dzab-\",\n  \"line-chart__tooltip-row\": \"a8ccharts-6A37Gb\",\n  \"line-chart__tooltip-label\": \"a8ccharts-IvnFFF\",\n  \"line-chart__annotations-overlay\": \"a8ccharts-4nR2pv\",\n  \"line-chart__annotation-label\": \"a8ccharts-OmgiTA\",\n  \"line-chart__annotation-label-trigger-button\": \"a8ccharts-mcIb3E\",\n  \"line-chart__annotation-label-popover--visible\": \"a8ccharts-dE0cVP\",\n  \"line-chart__annotation-label-popover--safari\": \"a8ccharts-i3NHTh\",\n  \"line-chart__annotation-label-popover-header\": \"a8ccharts-OwypoS\",\n  \"line-chart__annotation-label-popover-content\": \"a8ccharts-vtgQtP\",\n  \"line-chart__annotation-label-popover-close-button\": \"a8ccharts-i8KUcG\"\n};","import { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport Gridicon from 'gridicons';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { isSafari } from '../../../utils';\nimport styles from '../line-chart.module.scss';\nimport type { ButtonWithPopover, PopoverElement, ToggleEvent } from '../../../types';\nimport type { FC } from 'react';\n\nexport const POPOVER_BUTTON_SIZE = 44;\n\ninterface LineChartAnnotationLabelWithPopoverProps {\n\ttitle: string;\n\tsubtitle?: string;\n\trenderLabel: FC< { title: string; subtitle?: string } >;\n\trenderLabelPopover: FC< { title: string; subtitle?: string } >;\n}\n\nconst LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopoverProps > = ( {\n\ttitle,\n\tsubtitle,\n\trenderLabel,\n\trenderLabelPopover,\n} ) => {\n\tconst popoverId = useId();\n\tconst buttonRef = useRef< HTMLButtonElement >( null );\n\tconst popoverRef = useRef< HTMLDivElement >( null );\n\tconst [ isPositioned, setIsPositioned ] = useState( false );\n\tconst isBrowserSafari = isSafari();\n\n\tuseEffect( () => {\n\t\tconst button = buttonRef.current;\n\t\tconst popover = popoverRef.current;\n\n\t\tif ( ! button || ! popover ) return;\n\n\t\tconst positionPopover = () => {\n\t\t\t// Popover positioning in Safari is complicated due to issues with SVG foreign objects (https://bugs.webkit.org/show_bug.cgi?id=23113), so let it be positioned in the centre of the viewport.\n\t\t\tif ( ! isBrowserSafari ) {\n\t\t\t\tconst buttonRect = button.getBoundingClientRect();\n\t\t\t\tpopover.style.left = `${ buttonRect.right }px`;\n\t\t\t\tpopover.style.top = `${ buttonRect.top }px`;\n\t\t\t}\n\n\t\t\tsetIsPositioned( true );\n\t\t};\n\n\t\t// Position when popover shows\n\t\tpopover.addEventListener( 'toggle', ( e: ToggleEvent ) => {\n\t\t\tif ( e.newState === 'open' ) {\n\t\t\t\tpositionPopover();\n\t\t\t}\n\t\t} );\n\n\t\t// Initial positioning if already open\n\t\ttry {\n\t\t\tif ( popover.matches( ':popover-open' ) ) {\n\t\t\t\tpositionPopover();\n\t\t\t}\n\t\t} catch {\n\t\t\t// Ignore errors in test environments (e.g., JSDOM does not support :popover-open)\n\t\t}\n\t}, [ isBrowserSafari ] );\n\n\treturn (\n\t\t<div className={ styles[ 'line-chart__annotation-label' ] }>\n\t\t\t<button\n\t\t\t\tref={ buttonRef }\n\t\t\t\t{ ...( { popovertarget: popoverId } as ButtonWithPopover ) }\n\t\t\t\tclassName={ styles[ 'line-chart__annotation-label-trigger-button' ] }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: `${ POPOVER_BUTTON_SIZE }px`,\n\t\t\t\t\theight: `${ POPOVER_BUTTON_SIZE }px`,\n\t\t\t\t\ttransform: `translate(${ POPOVER_BUTTON_SIZE / 2 }px, 0)`,\n\t\t\t\t} }\n\t\t\t\taria-label={ title || __( 'View details', 'jetpack-charts' ) }\n\t\t\t>\n\t\t\t\t{ renderLabel( { title, subtitle } ) }\n\t\t\t</button>\n\t\t\t<div\n\t\t\t\tref={ popoverRef }\n\t\t\t\tid={ popoverId }\n\t\t\t\t{ ...( { popover: 'auto' } as PopoverElement ) }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tstyles[ 'line-chart__annotation-label-popover' ],\n\t\t\t\t\tisPositioned && styles[ 'line-chart__annotation-label-popover--visible' ],\n\t\t\t\t\tisBrowserSafari && styles[ 'line-chart__annotation-label-popover--safari' ]\n\t\t\t\t) }\n\t\t\t\tdata-testid=\"line-chart-annotation-label-popover\"\n\t\t\t>\n\t\t\t\t<div className={ styles[ 'line-chart__annotation-label-popover-header' ] }>\n\t\t\t\t\t<div className={ styles[ 'line-chart__annotation-label-popover-content' ] }>\n\t\t\t\t\t\t{ renderLabelPopover( { title, subtitle } ) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...( {\n\t\t\t\t\t\t\tpopovertarget: popoverId,\n\t\t\t\t\t\t\tpopovertargetaction: 'hide',\n\t\t\t\t\t\t} as ButtonWithPopover ) }\n\t\t\t\t\t\tclassName={ styles[ 'line-chart__annotation-label-popover-close-button' ] }\n\t\t\t\t\t\taria-label={ __( 'Close', 'jetpack-charts' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Gridicon icon=\"cross\" size={ 16 } />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default LineChartAnnotationLabelWithPopover;\n","import { DataContext } from '@visx/xychart';\nimport { useEffect, useState, useCallback } from 'react';\nimport { useSingleChartContext } from '../../private/single-chart-context';\nimport styles from '../line-chart.module.scss';\nimport type { AxisScale } from '@visx/axis';\nimport type { FC, ReactNode } from 'react';\n\nexport interface LineChartAnnotationsProps {\n\tchildren?: ReactNode;\n}\n\ninterface ScaleData {\n\txScale: AxisScale< Date >;\n\tyScale: AxisScale< number >;\n}\n\nconst LineChartAnnotationsOverlay: FC< LineChartAnnotationsProps > = ( { children } ) => {\n\tconst { chartRef, chartWidth, chartHeight } = useSingleChartContext();\n\n\tconst [ scales, setScales ] = useState< ScaleData | null >( null );\n\tconst [ scalesStable, setScalesStable ] = useState< boolean >( false );\n\n\t// Create a signature for scale data to enable easy comparison\n\tconst createScaleSignature = useCallback( ( scaleData: ScaleData ) => {\n\t\tconst xDomain = scaleData.xScale.domain();\n\t\tconst yDomain = scaleData.yScale.domain();\n\t\tconst xRange = scaleData.xScale.range();\n\t\tconst yRange = scaleData.yScale.range();\n\n\t\treturn `${ xDomain.join( ',' ) }-${ yDomain.join( ',' ) }-${ xRange.join(\n\t\t\t','\n\t\t) }-${ yRange.join( ',' ) }`;\n\t}, [] );\n\n\t// Get scales from chart ref and return them with signature for comparison\n\tconst getScalesData = useCallback( () => {\n\t\tif ( chartRef?.current ) {\n\t\t\tconst scaleData = chartRef.current.getScales();\n\n\t\t\tif ( scaleData ) {\n\t\t\t\tconst scaleInfo = {\n\t\t\t\t\txScale: scaleData.xScale as AxisScale< Date >,\n\t\t\t\t\tyScale: scaleData.yScale as AxisScale< number >,\n\t\t\t\t};\n\n\t\t\t\treturn {\n\t\t\t\t\tscales: scaleInfo,\n\t\t\t\t\tsignature: createScaleSignature( scaleInfo ),\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}, [ chartRef, createScaleSignature ] );\n\n\t// The chart resizes on render so we need to monitor the scales until they stabilize\n\tuseEffect( () => {\n\t\tlet timeoutId: number | null = null;\n\t\tlet lastSignature: string | null = null;\n\t\tlet retryCount = 0;\n\t\tconst maxRetries = 20; // 20 * 50ms = 1 second max\n\t\tconst checkInterval = 50; // Check every 50ms\n\n\t\t// Reset stability state when monitoring starts\n\t\tsetScalesStable( false );\n\n\t\tconst monitorScales = () => {\n\t\t\tconst currentScaleData = getScalesData();\n\n\t\t\t// If we got scales, compare signatures\n\t\t\tif ( currentScaleData ) {\n\t\t\t\t// Check if scales have settled by comparing signatures\n\t\t\t\tconst scalesSettled = lastSignature && currentScaleData.signature === lastSignature;\n\n\t\t\t\tif ( scalesSettled ) {\n\t\t\t\t\t// Scales have stabilized, mark as stable\n\t\t\t\t\tsetScalesStable( true );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Update scales and remember signature for next comparison\n\t\t\t\tsetScales( currentScaleData.scales );\n\t\t\t\tlastSignature = currentScaleData.signature;\n\t\t\t}\n\n\t\t\t// Continue monitoring if we haven't exceeded max retries\n\t\t\tif ( retryCount < maxRetries ) {\n\t\t\t\tretryCount++;\n\t\t\t\ttimeoutId = setTimeout( monitorScales, checkInterval ) as unknown as number;\n\t\t\t}\n\t\t};\n\n\t\tmonitorScales();\n\n\t\treturn () => {\n\t\t\tif ( timeoutId ) {\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t}\n\t\t};\n\t}, [ getScalesData, chartWidth, chartHeight ] );\n\n\t// Early return if no chart data available\n\tif ( ! chartRef || ! children ) {\n\t\treturn null;\n\t}\n\n\tif ( ! scales || ! scalesStable ) {\n\t\treturn null;\n\t}\n\n\t// Create a DataContext value that mimics what visx provides\n\t// We're intentionally providing minimal context for annotations to work\n\tconst dataContextValue = {\n\t\txScale: scales.xScale,\n\t\tyScale: scales.yScale,\n\t\tmargin: { top: 0, right: 0, bottom: 0, left: 0 },\n\t\twidth: chartWidth,\n\t\theight: chartHeight,\n\t} as unknown as Parameters< typeof DataContext.Provider >[ 0 ][ 'value' ];\n\n\treturn (\n\t\t<DataContext.Provider value={ dataContextValue }>\n\t\t\t<svg\n\t\t\t\twidth={ chartWidth }\n\t\t\t\theight={ chartHeight }\n\t\t\t\tclassName={ styles[ 'line-chart__annotations-overlay' ] }\n\t\t\t\tdata-testid=\"line-chart-annotations-overlay\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</svg>\n\t\t</DataContext.Provider>\n\t);\n};\n\nexport default LineChartAnnotationsOverlay;\n","import {\n\tAnnotation,\n\tCircleSubject,\n\tConnector,\n\tHtmlLabel,\n\tLabel,\n\tLineSubject,\n} from '@visx/annotation';\nimport { DataContext } from '@visx/xychart';\nimport merge from 'deepmerge';\nimport { useContext, useRef, useEffect, useState, useMemo } from 'react';\nimport { useGlobalChartsTheme } from '../../../providers';\nimport { isSafari } from '../../../utils';\nimport LineChartAnnotationLabelWithPopover, {\n\tPOPOVER_BUTTON_SIZE,\n} from './line-chart-annotation-label-popover';\nimport type { LineChartAnnotationProps } from '../types';\nimport type { LabelProps } from '@visx/annotation/lib/components/Label';\nimport type { TextProps } from '@visx/text';\nimport type { FC } from 'react';\n\ntype SubjectType = 'circle' | 'line-vertical' | 'line-horizontal';\n\nconst ANNOTATION_MAX_WIDTH = 125; // visx default\nconst ANNOTATION_INIT_HEIGHT = 100;\n\nexport const getLabelPosition = ( {\n\tsubjectType,\n\tx,\n\txMax,\n\ty,\n\tyMin,\n\tyMax,\n\tmaxWidth,\n\theight,\n}: {\n\tsubjectType: SubjectType;\n\tx: number;\n\txMax: number;\n\ty: number;\n\tyMin: number;\n\tyMax: number;\n\tmaxWidth?: number;\n\theight?: number | null;\n} ): {\n\tdx: number;\n\tdy: number;\n\tisFlippedHorizontally: boolean;\n\tisFlippedVertically: boolean;\n} => {\n\tconst annotationMaxWidth = maxWidth ?? ANNOTATION_MAX_WIDTH;\n\tconst annotationHeight = height ?? ANNOTATION_INIT_HEIGHT;\n\tlet dx = 15;\n\tlet dy = 15;\n\tlet isFlippedHorizontally = false;\n\tlet isFlippedVertically = false;\n\n\tif ( subjectType === 'line-horizontal' ) {\n\t\tdx = 0;\n\t\tdy = 20;\n\t}\n\n\tif ( subjectType === 'line-vertical' ) {\n\t\tdx = 20;\n\t\tdy = 0;\n\t}\n\n\t// Smart horizontal positioning: if annotation would extend beyond right edge, position it to the left\n\t// Account for the connector offset (dx) in boundary calculations\n\tconst effectiveX = x + dx;\n\n\tif ( effectiveX + annotationMaxWidth > xMax ) {\n\t\tisFlippedHorizontally = true;\n\n\t\tif ( subjectType === 'circle' ) {\n\t\t\tdx = -dx; // Just flip to the left side with same offset\n\t\t} else if ( subjectType === 'line-vertical' ) {\n\t\t\tdx = -20; // Position to the left of the line\n\t\t}\n\t}\n\n\t// Smart vertical positioning: check both top and bottom edges\n\t// For circle annotations, they are positioned below by default (dy > 0)\n\t// Only flip when close to bottom edge to position above\n\tif ( subjectType === 'circle' ) {\n\t\t// Check if positioning below would extend beyond bottom edge\n\t\tif ( y + dy + annotationHeight > yMin ) {\n\t\t\t// Too close to bottom edge, position above\n\t\t\tisFlippedVertically = true;\n\t\t\tdy = -Math.abs( dy ); // Ensure negative value to position above the point\n\t\t}\n\t\t// When close to top edge, keep default below positioning (no flip needed)\n\t} else if ( y - annotationHeight < yMax ) {\n\t\t// Too close to top edge, position below\n\t\tif ( subjectType === 'line-horizontal' ) {\n\t\t\tisFlippedVertically = true;\n\t\t\tdy = Math.abs( dy ); // Ensure positive value to position below the point\n\t\t} else if ( subjectType === 'line-vertical' ) {\n\t\t\tisFlippedVertically = true; // For anchor adjustment only\n\t\t}\n\t} else if ( y + annotationHeight > yMin ) {\n\t\t// Too close to bottom edge, position above\n\t\tif ( subjectType === 'line-horizontal' ) {\n\t\t\tisFlippedVertically = true;\n\t\t\tdy = -Math.abs( dy ); // Ensure negative value to position above the point\n\t\t} else if ( subjectType === 'line-vertical' ) {\n\t\t\tisFlippedVertically = true; // For anchor adjustment only\n\t\t}\n\t}\n\n\treturn { dx, dy, isFlippedHorizontally, isFlippedVertically };\n};\n\nconst getHorizontalAnchor = (\n\tsubjectType: SubjectType,\n\tisFlippedHorizontally: boolean\n): LabelProps[ 'horizontalAnchor' ] => {\n\tif ( subjectType === 'line-horizontal' ) {\n\t\treturn isFlippedHorizontally ? 'end' : 'start';\n\t}\n\n\treturn undefined;\n};\n\nconst getVerticalAnchor = (\n\tsubjectType: SubjectType,\n\tisFlippedVertically: boolean,\n\ty: number,\n\tyMax: number,\n\theight: number\n): TextProps[ 'verticalAnchor' ] => {\n\tif ( subjectType === 'line-vertical' ) {\n\t\tif ( isFlippedVertically ) {\n\t\t\t// If flipped due to top edge, anchor to top; if flipped due to bottom edge, anchor to bottom\n\t\t\treturn y - height < yMax ? 'start' : 'end';\n\t\t}\n\n\t\treturn 'start';\n\t}\n\n\treturn undefined;\n};\n\nconst LineChartAnnotation: FC< LineChartAnnotationProps > = ( {\n\tdatum,\n\ttitle,\n\tsubtitle,\n\tsubjectType = 'circle',\n\tstyles: datumStyles,\n\ttestId,\n\trenderLabel,\n\trenderLabelPopover,\n} ) => {\n\tconst providerTheme = useGlobalChartsTheme();\n\tconst { xScale, yScale } = useContext( DataContext ) || {};\n\tconst labelRef = useRef< SVGGElement >( null );\n\tconst [ height, setHeight ] = useState< number | null >( null );\n\n\t// Deep merge styles to preserve nested object properties\n\tconst styles = merge( providerTheme.annotationStyles ?? {}, datumStyles ?? {} );\n\n\t// Measure the label height once after initial render\n\tuseEffect( () => {\n\t\tif ( labelRef.current?.getBBox ) {\n\t\t\tconst bbox = labelRef.current.getBBox();\n\t\t\tsetHeight( bbox.height );\n\t\t}\n\t}, [] );\n\n\tconst positionData = useMemo( () => {\n\t\tif ( ! datum || ! datum.date || datum.value == null || ! xScale || ! yScale ) return null;\n\n\t\tconst x = xScale( datum.date );\n\t\tconst y = yScale( datum.value );\n\n\t\tif ( typeof x !== 'number' || typeof y !== 'number' ) return null;\n\n\t\tconst [ yMin, yMax ] = yScale.range().map( Number );\n\t\tconst [ xMin, xMax ] = xScale.range().map( Number );\n\n\t\t// If a custom label is provided, use the provided position\n\t\tif ( renderLabel ) {\n\t\t\treturn {\n\t\t\t\tx,\n\t\t\t\tdx: 0,\n\t\t\t\ty,\n\t\t\t\tdy: 0,\n\t\t\t\tyMin,\n\t\t\t\tyMax,\n\t\t\t\txMin,\n\t\t\t\txMax,\n\t\t\t\tisFlippedHorizontally: false,\n\t\t\t\tisFlippedVertically: false,\n\t\t\t};\n\t\t}\n\n\t\tconst position = getLabelPosition( {\n\t\t\tsubjectType,\n\t\t\tx,\n\t\t\txMax,\n\t\t\ty,\n\t\t\tyMin,\n\t\t\tyMax,\n\t\t\tmaxWidth: styles?.label?.maxWidth,\n\t\t\theight,\n\t\t} );\n\n\t\treturn { x, y, yMin, yMax, xMin, xMax, ...position };\n\t}, [ datum, xScale, yScale, subjectType, styles?.label?.maxWidth, height, renderLabel ] );\n\n\tif ( ! positionData ) return null;\n\n\tconst { x, y, yMin, yMax, xMin, xMax, dx, dy, isFlippedHorizontally, isFlippedVertically } =\n\t\tpositionData;\n\n\tconst getLabelY = () => {\n\t\tconst labelY = styles?.label?.y;\n\n\t\tif ( labelY === 'start' ) return yMax;\n\t\tif ( labelY === 'end' ) return yMin;\n\n\t\treturn labelY;\n\t};\n\n\tconst getLabelX = () => {\n\t\tconst labelX = styles?.label?.x;\n\n\t\tif ( labelX === 'start' ) return xMin;\n\t\tif ( labelX === 'end' ) return xMax;\n\n\t\treturn labelX;\n\t};\n\n\tconst labelPosition = {\n\t\tx: getLabelX(),\n\t\ty: getLabelY(),\n\t};\n\n\t// Safari has a bug where children of an SVG foreignObject are not positioned correctly https://bugs.webkit.org/show_bug.cgi?id=23113\n\t// This is a workaround to position the label correctly\n\tconst getSafariHTMLLabelPosition = () => {\n\t\tconst labelWidth = POPOVER_BUTTON_SIZE;\n\t\tconst labelHeight = POPOVER_BUTTON_SIZE;\n\n\t\treturn isSafari()\n\t\t\t? {\n\t\t\t\t\ttransform: `translate(${\n\t\t\t\t\t\tx +\n\t\t\t\t\t\t( dx || 0 ) +\n\t\t\t\t\t\t( typeof labelPosition.x === 'number' ? labelPosition.x - x : 0 ) -\n\t\t\t\t\t\tlabelWidth\n\t\t\t\t\t}px, ${\n\t\t\t\t\t\ty +\n\t\t\t\t\t\t( dy || 0 ) +\n\t\t\t\t\t\t( typeof labelPosition.y === 'number' ? labelPosition.y - y : 0 ) -\n\t\t\t\t\t\tlabelHeight\n\t\t\t\t\t}px)`,\n\t\t\t\t\twidth: labelWidth,\n\t\t\t\t\theight: labelHeight,\n\t\t\t  }\n\t\t\t: undefined;\n\t};\n\n\treturn (\n\t\t<g data-testid={ testId }>\n\t\t\t<Annotation x={ x } y={ y } dx={ dx } dy={ dy }>\n\t\t\t\t<Connector { ...styles?.connector } />\n\t\t\t\t{ subjectType === 'circle' && <CircleSubject { ...styles?.circleSubject } /> }\n\t\t\t\t{ subjectType === 'line-vertical' && (\n\t\t\t\t\t<LineSubject\n\t\t\t\t\t\tmin={ yMax }\n\t\t\t\t\t\tmax={ yMin }\n\t\t\t\t\t\t{ ...{ ...styles?.lineSubject, orientation: 'vertical' } }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ subjectType === 'line-horizontal' && (\n\t\t\t\t\t<LineSubject\n\t\t\t\t\t\tmin={ xMin }\n\t\t\t\t\t\tmax={ xMax }\n\t\t\t\t\t\t{ ...{ ...styles?.lineSubject, orientation: 'horizontal' } }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ renderLabel ? (\n\t\t\t\t\t<HtmlLabel { ...styles?.label } { ...labelPosition }>\n\t\t\t\t\t\t<div style={ getSafariHTMLLabelPosition() }>\n\t\t\t\t\t\t\t{ renderLabelPopover ? (\n\t\t\t\t\t\t\t\t<LineChartAnnotationLabelWithPopover\n\t\t\t\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\t\t\t\tsubtitle={ subtitle }\n\t\t\t\t\t\t\t\t\trenderLabel={ renderLabel }\n\t\t\t\t\t\t\t\t\trenderLabelPopover={ renderLabelPopover }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\trenderLabel( { title, subtitle } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</HtmlLabel>\n\t\t\t\t) : (\n\t\t\t\t\t<g ref={ labelRef }>\n\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\t\tsubtitle={ subtitle }\n\t\t\t\t\t\t\t{ ...styles?.label }\n\t\t\t\t\t\t\t{ ...labelPosition }\n\t\t\t\t\t\t\thorizontalAnchor={ getHorizontalAnchor( subjectType, isFlippedHorizontally ) }\n\t\t\t\t\t\t\tverticalAnchor={ getVerticalAnchor(\n\t\t\t\t\t\t\t\tsubjectType,\n\t\t\t\t\t\t\t\tisFlippedVertically,\n\t\t\t\t\t\t\t\ty,\n\t\t\t\t\t\t\t\tyMax,\n\t\t\t\t\t\t\t\theight ?? ANNOTATION_INIT_HEIGHT\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</g>\n\t\t\t\t) }\n\t\t\t</Annotation>\n\t\t</g>\n\t);\n};\n\nexport default LineChartAnnotation;\n","import { DataContext } from '@visx/xychart';\nimport { useContext } from 'react';\nimport type { LineChartGlyphProps } from '../types';\nimport type { FC } from 'react';\n\nconst toNumber = ( val?: number | string | null ): number | undefined => {\n\tconst num = typeof val === 'number' ? val : parseFloat( val );\n\treturn isNaN( num ) ? undefined : num;\n};\n\nconst LineChartGlyph: FC< LineChartGlyphProps > = ( {\n\tdata,\n\tindex,\n\tcolor,\n\tglyphStyle,\n\trenderGlyph,\n\taccessors,\n\tposition,\n} ) => {\n\tconst { xScale, yScale } = useContext( DataContext ) || {};\n\tif ( ! xScale || ! yScale ) return null;\n\n\tif ( data.data.length === 0 ) return null;\n\n\tconst point = position === 'start' ? data.data[ 0 ] : data.data[ data.data.length - 1 ];\n\n\tconst x = xScale( accessors.xAccessor( point ) );\n\tconst y = yScale( accessors.yAccessor( point ) );\n\n\tif ( typeof x !== 'number' || typeof y !== 'number' ) return null;\n\n\tconst size = Math.max( 0, toNumber( glyphStyle?.radius ) ?? 4 );\n\n\treturn renderGlyph( {\n\t\tkey: `${ position }-glyph-${ data.label }`,\n\t\tindex,\n\t\tdatum: point,\n\t\tcolor,\n\t\tsize,\n\t\tx,\n\t\ty,\n\t\tglyphStyle,\n\t\tposition,\n\t} );\n};\n\nexport default LineChartGlyph;\n"],"mappings":"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","names":["DataContext","__","clsx","useMemo","useContext","useState","useRef","jsx","DataContext","useEffect","useState","jsx","useState","useEffect","DataContext","DataContext","useContext","useRef","useEffect","useState","jsx","jsxs","useContext","DataContext","useRef","useState","useEffect","x","y","yMin","yMax","xMin","xMax","DataContext","useContext","jsx","jsxs","toNumber","useContext","DataContext","useRef","useState","useMemo","clsx","__"]}

package/dist/{chunk-QTQG3XNM.cjs → chunk-4TN6B3QG.cjs}

@@ -327,6 +327,7 @@ var Legend = _react.forwardRef.call(void 0,
 );
 
 // src/components/legend/hooks/use-chart-legend-items.ts
+var _numberformatters = require('@automattic/number-formatters');
 
 function formatPointValue(point, showValues, legendValueDisplay = "percentage") {
   if (!showValues || legendValueDisplay === "none") {
@@ -338,15 +339,15 @@ function formatPointValue(point, showValues, legendValueDisplay = "percentage")
       case "percentage":
         return _chunkMNZD6UDQcjs.formatPercentage.call(void 0, percentagePoint.percentage);
       case "value":
-        return percentagePoint.value.toString();
+        return _numberformatters.formatNumber.call(void 0, percentagePoint.value);
       case "valueDisplay":
-        return percentagePoint.valueDisplay || percentagePoint.value.toString();
+        return percentagePoint.valueDisplay || _numberformatters.formatNumber.call(void 0, percentagePoint.value);
       default:
         return "";
     }
   }
   if ("value" in point) {
-    return point.value.toString();
+    return point.value !== null ? _numberformatters.formatNumber.call(void 0, point.value) : "";
   }
   return "";
 }
@@ -449,4 +450,4 @@ function useChartLegendItems(data, options = {}, legendShape) {
 
 
 exports.SingleChartContext = SingleChartContext; exports.useSingleChartContext = useSingleChartContext; exports.Legend = Legend; exports.useChartLegendItems = useChartLegendItems;
-//# sourceMappingURL=chunk-QTQG3XNM.cjs.map
+//# sourceMappingURL=chunk-4TN6B3QG.cjs.map

package/dist/chunk-4TN6B3QG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-4TN6B3QG.cjs","../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"],"names":["useMemo"],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACA;ACRA,8BAAgD;ADUhD;AACA;AEXA;AAmBO,IAAM,qBAAA,EAAuB,kCAAA,IAAwD,CAAA;AAGrF,IAAM,mBAAA,EAAqB,oBAAA;AFPlC;AACA;AGhBA;AAGO,IAAM,wBAAA,EAA0B,CAAA,EAAA,GAAiC;AACvE,EAAA,MAAM,QAAA,EAAU,+BAAA,oBAAiC,CAAA;AACjD,EAAA,GAAA,CAAK,CAAE,OAAA,EAAU;AAChB,IAAA,MAAM,IAAI,KAAA,CAAO,+DAAgE,CAAA;AAAA,EAClF;AACA,EAAA,OAAO,OAAA;AACR,CAAA;AAEO,IAAM,sBAAA,EAAwB,uBAAA;AHerC;AACA;AI3BA,oCAAsB;AACtB,sCAAoE;AACpE,oCAA6B;AAC7B,wEAAiB;AACjB;AAIC;AACA;AACA;AAAA;AJ2BD;AACA;AK/BO,SAAS,eAAA,CAAsB,CAAA,EAA6B;AAClE,EAAA,GAAA,CAAK,EAAA,GAAK,OAAO,EAAA,IAAM,SAAA,GAAY,QAAA,GAAW,EAAA,GAAK,OAAO,CAAA,CAAE,MAAA,IAAU,WAAA;AACrE,IAAA,OAAO,CAAA,CAAE,KAAA;AACV,EAAA,OAAO,CAAA;AACR;AAOO,SAAS,qBAAA,CAA4B,CAAA,EAAkC;AAC7E,EAAA,OAAO,MAAA,CAAQ,eAAA,CAAiB,CAAE,CAAE,CAAA;AACrC;AL2BA;AACA;AMtCO,SAAS,qBAAA,CAAmD;AAAA,EAClE,KAAA;AAAA,EACA;AACD,CAAA,EAGiE;AAChE,EAAA,OAAO,CAAE,CAAA,EAAG,CAAA,EAAA,GAAA,CAAS;AAAA,IACpB,KAAA,EAAO,CAAA;AAAA,IACP,KAAA,EAAO,CAAA;AAAA,IACP,IAAA,EAAM,CAAA,EAAA;AACC,IAAA;AACR,EAAA;AACD;ANqCW;AACA;AO7DqE;AAC9E,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACF;AP+DW;AACA;AIzCT;AApBI;AACL,EAAA;AACA,EAAA;AACD;AAIM;AACL,EAAA;AACA,EAAA;AACA,EAAA;AAKM;AACA,EAAA;AACE,EAAA;AAGP,EAAA;AAAC,IAAA;AAAA,IAAA;AACM,MAAA;AACN,MAAA;AACC,QAAA;AACA,QAAA;AACD,MAAA;AACA,MAAA;AACM,QAAA;AACJ,UAAA;AACA,UAAA;AACD,QAAA;AACD,MAAA;AACA,MAAA;AAEE,MAAA;AAAA,IAAA;AACH,EAAA;AAEF;AAMa;AAIX,EAAA;AACC,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACO,IAAA;AACA,IAAA;AACP,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAAY;AACZ,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACG,IAAA;AAEJ,EAAA;AAEM,IAAA;AACA,IAAA;AAEA,IAAA;AACL,MAAA;AACA,MAAA;AACC,IAAA;AACI,IAAA;AAEA,IAAA;AACD,MAAA;AACF,MAAA;AACH,IAAA;AAGM,IAAA;AACH,MAAA;AACD,QAAA;AACC,UAAA;AACD,QAAA;AACD,MAAA;AACE,MAAA;AACH,IAAA;AAGM,IAAA;AACH,MAAA;AACD,QAAA;AACC,UAAA;AACD,QAAA;AACA,QAAA;AACD,MAAA;AACE,MAAA;AACH,IAAA;AAGM,IAAA;AACH,MAAA;AACD,QAAA;AACC,UAAA;AACD,QAAA;AACA,QAAA;AACD,MAAA;AACE,MAAA;AACH,IAAA;AAEM,IAAA;AACH,MAAA;AACD,QAAA;AACC,UAAA;AACD,QAAA;AACA,QAAA;AACC,UAAA;AACC,YAAA;AACA,YAAA;AACD,UAAA;AACD,QAAA;AACD,MAAA;AACE,MAAA;AACH,IAAA;AAEO,IAAA;AAGL,MAAA;AAAA,MAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AAEE,QAAA;AACA,UAAA;AAAA,UAAA;AAAA,YAAA;AACA,YAAA;AACK,YAAA;AACgC,YAAA;AACzB,cAAA;AACJ,cAAA;AAC4B,cAAA;AACQ,cAAA;AACF,cAAA;AACzC,YAAA;AACD,YAAA;AACQ,cAAA;AACgD,cAAA;AAC9C,YAAA;AACV,YAAA;AAGC,cAAA;AACA,cAAA;AACA,cAAA;AAEA,cAAA;AACC,gBAAA;AAAC,gBAAA;AAAA,kBAAA;AACY,oBAAA;AACX,oBAAA;AACsB,oBAAA;AAC4B,oBAAA;AACL,oBAAA;AAC7C,kBAAA;AACD,kBAAA;AACY,kBAAA;AAEH,kBAAA;AAIL,kBAAA;AAEM,kBAAA;AACE,kBAAA;AACoB,kBAAA;AACH,kBAAA;AACU,kBAAA;AAInC,kBAAA;AAEC,kBAAA;AAEH,oCAAA;AACD,sBAAA;AAAC,sBAAA;AAAA,wBAAA;AACgC,wBAAA;AACC,wBAAA;AACrB,wBAAA;AAGgB,0BAAA;AACO,0BAAA;AACzB,0BAAA;AACD,0BAAA;AACY,0BAAA;AACD,0BAAA;AACH,0BAAA;AACA,wBAAA;AAEjB,sBAAA;AAAA,oBAAA;AAGD,sBAAA;AAAC,sBAAA;AAAA,wBAAA;AACA,wBAAA;AACS,wBAAA;AACD,wBAAA;AACC,wBAAA;AACQ,wBAAA;AACL,wBAAA;AACZ,wBAAA;AACA,wBAAA;AACA,wBAAA;AACa,sBAAA;AAAA,oBAAA;AACd,oCAAA;AAED,sBAAA;AAAC,sBAAA;AAAA,wBAAA;AACqE,wBAAA;AAC7D,0BAAA;AACS,0BAAA;AACV,0BAAA;AACE,0BAAA;AACC,wBAAA;AACV,wBAAA;AACK,wBAAA;AAEL,0CAAA;AAAA,4BAAA;AAAC,4BAAA;AAAA,8BAAA;AACa,8BAAA;AACb,8BAAA;AACA,4BAAA;AAAA,0BAAA;AACD,0CAAA;AAGI,4BAAA;AAAA,4CAAA;AACiD,0BAAA;AACpD,wBAAA;AAAA,sBAAA;AAAA,oBAAA;AAEF,kBAAA;AAAA,gBAAA;AAAA,gBAAA;AAxEmC,cAAA;AAyEpC,YAAA;AAEA,UAAA;AACH,QAAA;AAAA,MAAA;AAEF,IAAA;AAEF,EAAA;AACD;AJgCW;AACA;ACxRF;AAxBI;AACR,EAAA;AAEG,IAAA;AACA,IAAA;AAIA,IAAA;AAGA,IAAA;AACL,MAAA;AAGI,IAAA;AAGC,IAAA;AAEC,IAAA;AACN,MAAA;AACD,IAAA;AAEO,IAAA;AACR,EAAA;AACD;ADuSW;AACA;AQxUF;AACA;AA+BA;AAKD,EAAA;AACC,IAAA;AACR,EAAA;AAGK,EAAA;AACE,IAAA;AACN,IAAA;AACM,MAAA;AACJ,QAAA;AACI,MAAA;AACJ,QAAA;AACI,MAAA;AACJ,QAAA;AACD,MAAA;AACC,QAAA;AACF,IAAA;AACD,EAAA;AAGK,EAAA;AACG,IAAA;AACR,EAAA;AAEO,EAAA;AACR;AAWS;AAOH,EAAA;AACE,IAAA;AACD,IAAA;AACJ,MAAA;AACI,QAAA;AACH,QAAA;AACA,QAAA;AACD,MAAA;AACD,IAAA;AACD,EAAA;AAEO,EAAA;AACR;AAaS;AASF,EAAA;AACC,IAAA;AACL,MAAA;AACA,MAAA;AACA,MAAA;AACC,IAAA;AAEI,IAAA;AACL,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACD,IAAA;AAEO,IAAA;AACR,EAAA;AAEO,EAAA;AACR;AAcS;AAUF,EAAA;AACC,IAAA;AACL,MAAA;AACA,MAAA;AACA,MAAA;AACC,IAAA;AAEI,IAAA;AACL,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACD,IAAA;AAEO,IAAA;AACR,EAAA;AAEO,EAAA;AACR;AASgB;AAOT,EAAA;AACL,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACG,EAAA;AACI,EAAA;AAEDA,EAAAA;AACC,IAAA;AACN,MAAA;AACD,IAAA;AAGK,IAAA;AACJ,MAAA;AACC,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACD,MAAA;AACD,IAAA;AAGO,IAAA;AACN,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACD,IAAA;AACE,EAAA;AACF,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACC,EAAA;AACH;AR+MW;AACA;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-4TN6B3QG.cjs","sourcesContent":[null,"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 } chartId={ contextChartId } />;\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 {\n\ttype RefAttributes,\n\ttype ForwardRefExoticComponent,\n\ttype KeyboardEvent,\n\tforwardRef,\n\tuseCallback,\n\tuseContext,\n} from 'react';\nimport { useTextTruncation } from '../../../hooks';\nimport { GlobalChartsContext, 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\trender,\n\t\t\tinteractive = false,\n\t\t\tchartId,\n\t\t\t...legendItemProps\n\t\t},\n\t\tref\n\t) => {\n\t\tconst theme = useGlobalChartsTheme();\n\t\tconst context = useContext( GlobalChartsContext );\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\t// Handle legend item clicks for interactive mode\n\t\tconst handleLegendClick = useCallback(\n\t\t\t( seriesLabel: string ) => {\n\t\t\t\tif ( interactive && chartId && context ) {\n\t\t\t\t\tcontext.toggleSeriesVisibility( chartId, seriesLabel );\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ interactive, chartId, context ]\n\t\t);\n\n\t\t// Check if a series is visible\n\t\tconst isSeriesVisible = useCallback(\n\t\t\t( seriesLabel: string ) => {\n\t\t\t\tif ( ! interactive || ! chartId || ! context ) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn context.isSeriesVisible( chartId, seriesLabel );\n\t\t\t},\n\t\t\t[ interactive, chartId, context ]\n\t\t);\n\n\t\t// Create event handlers to avoid inline arrow functions\n\t\tconst createClickHandler = useCallback(\n\t\t\t( labelText: string ) => {\n\t\t\t\tif ( ! interactive ) {\n\t\t\t\t\treturn undefined;\n\t\t\t\t}\n\t\t\t\treturn () => handleLegendClick( labelText );\n\t\t\t},\n\t\t\t[ interactive, handleLegendClick ]\n\t\t);\n\n\t\tconst createKeyDownHandler = useCallback(\n\t\t\t( labelText: string ) => {\n\t\t\t\tif ( ! interactive ) {\n\t\t\t\t\treturn undefined;\n\t\t\t\t}\n\t\t\t\treturn ( event: KeyboardEvent ) => {\n\t\t\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\thandleLegendClick( labelText );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ interactive, handleLegendClick ]\n\t\t);\n\n\t\treturn render ? (\n\t\t\trender( items )\n\t\t) : (\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\tconst visible = isSeriesVisible( label.text );\n\t\t\t\t\t\t\tconst handleClick = createClickHandler( label.text );\n\t\t\t\t\t\t\tconst handleKeyDown = createKeyDownHandler( label.text );\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<LegendItem\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'visx-legend-item',\n\t\t\t\t\t\t\t\t\t\tstyles[ 'legend-item' ],\n\t\t\t\t\t\t\t\t\t\tinteractive && styles[ 'legend-item--interactive' ],\n\t\t\t\t\t\t\t\t\t\t! visible && styles[ 'legend-item--inactive' ],\n\t\t\t\t\t\t\t\t\t\tlegendItemClassName\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tdata-testid=\"legend-item\"\n\t\t\t\t\t\t\t\t\tkey={ `legend-${ label.text }-${ i }` }\n\t\t\t\t\t\t\t\t\tmargin={ itemMargin }\n\t\t\t\t\t\t\t\t\tflexDirection={\n\t\t\t\t\t\t\t\t\t\torientation === 'vertical' && alignment === 'end'\n\t\t\t\t\t\t\t\t\t\t\t? 'row-reverse'\n\t\t\t\t\t\t\t\t\t\t\t: itemDirection\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ handleClick }\n\t\t\t\t\t\t\t\t\tonKeyDown={ handleKeyDown }\n\t\t\t\t\t\t\t\t\trole={ interactive ? 'button' : undefined }\n\t\t\t\t\t\t\t\t\ttabIndex={ interactive ? 0 : undefined }\n\t\t\t\t\t\t\t\t\taria-pressed={ interactive ? visible : undefined }\n\t\t\t\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\t\t\t\tinteractive\n\t\t\t\t\t\t\t\t\t\t\t? `${ label.text }: ${ visible ? 'visible' : 'hidden' }. Toggle visibility.`\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t{ ...legendItemProps }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ items[ i ]?.renderGlyph ? (\n\t\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\t\twidth={ items[ i ]?.glyphSize * 2 }\n\t\t\t\t\t\t\t\t\t\t\theight={ items[ i ]?.glyphSize * 2 }\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"legend-glyph\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Group>\n\t\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\t\tkey: `legend-glyph-${ label.text }`,\n\t\t\t\t\t\t\t\t\t\t\t\t\tdatum: {},\n\t\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\t\tcolor: fill( label ),\n\t\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\t\tx: items[ i ]?.glyphSize,\n\t\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\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t</Group>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<LegendShape\n\t\t\t\t\t\t\t\t\t\t\tshape={ shape }\n\t\t\t\t\t\t\t\t\t\t\theight={ shapeHeight }\n\t\t\t\t\t\t\t\t\t\t\twidth={ shapeWidth }\n\t\t\t\t\t\t\t\t\t\t\tmargin={ shapeMargin }\n\t\t\t\t\t\t\t\t\t\t\titem={ domain[ i ] }\n\t\t\t\t\t\t\t\t\t\t\titemIndex={ i }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t\t\tfill={ fill }\n\t\t\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t\t\t\tshapeStyle={ getShapeStyle }\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\t<LegendLabel\n\t\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\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: labelAlign,\n\t\t\t\t\t\t\t\t\t\t\tflex: labelFlex,\n\t\t\t\t\t\t\t\t\t\t\tmargin: labelMargin,\n\t\t\t\t\t\t\t\t\t\t\t...theme.legendLabelStyles,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t{ ...legendLabelProps }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<LegendText\n\t\t\t\t\t\t\t\t\t\t\ttext={ label.text }\n\t\t\t\t\t\t\t\t\t\t\ttextOverflow={ textOverflow }\n\t\t\t\t\t\t\t\t\t\t\tmaxWidth={ maxWidth }\n\t\t\t\t\t\t\t\t\t\t/>\n\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\t<span className={ styles[ 'legend-item-value' ] }>\n\t\t\t\t\t\t\t\t\t\t\t\t{ '\\u00A0' }\n\t\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\t</span>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</LegendLabel>\n\t\t\t\t\t\t\t\t</LegendItem>\n\t\t\t\t\t\t\t);\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--interactive\": \"a8ccharts-qGsavM\",\n  \"legend-item--inactive\": \"a8ccharts-ZtDY-Q\",\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 { formatNumber } from '@automattic/number-formatters';\nimport { 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 formatNumber( percentagePoint.value );\n\t\t\tcase 'valueDisplay':\n\t\t\t\treturn percentagePoint.valueDisplay || formatNumber( percentagePoint.value );\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 !== null ? formatNumber( point.value ) : '';\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"]}