@automattic/charts 0.44.0 → 0.46.0

package/dist/{chunk-MAV6SE6L.cjs.map → chunk-GEB4GELE.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-MAV6SE6L.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-MAV6SE6L.cjs","sourcesContent":[null,"import { formatNumberCompact } 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} 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' ] }>{ point.value }</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\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 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( 'line-chart', styles[ 'line-chart' ], className ) }\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\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',\n\t\t\t\t\t\tposition: 'relative',\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__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"]}
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-GEB4GELE.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-GEB4GELE.cjs","sourcesContent":[null,"import { formatNumberCompact } 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} 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' ] }>{ point.value }</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\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 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( 'line-chart', styles[ 'line-chart' ], className ) }\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\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',\n\t\t\t\t\t\tposition: 'relative',\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__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-KM62I6SD.js → chunk-HVWETEEV.js}

@@ -9,7 +9,7 @@ import {
   Legend,
   SingleChartContext,
   useChartLegendItems
-} from "./chunk-Q2LDRQN7.js";
+} from "./chunk-PFT2X4OW.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -20,9 +20,10 @@ import {
   useChartRegistration,
   useElementHeight,
   useGlobalChartsContext,
+  useGlobalChartsTheme,
   useXYChartTheme,
   useZeroValueDisplay
-} from "./chunk-3O6FHD2T.js";
+} from "./chunk-A3PGOCJO.js";
 
 // src/components/bar-chart/bar-chart.tsx
 import { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from "@visx/pattern";
@@ -174,6 +175,7 @@ var BarChartInternal = ({
   orientation = "vertical",
   withPatterns = false,
   showZeroValues = false,
+  legendInteractive = false,
   children
 }) => {
   const horizontal = orientation === "horizontal";
@@ -199,7 +201,25 @@ var BarChartInternal = ({
     chartRef,
     totalPoints
   });
-  const { getElementStyles } = useGlobalChartsContext();
+  const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+  const providerTheme = useGlobalChartsTheme();
+  const seriesWithVisibility = useMemo2(() => {
+    if (!chartId || !legendInteractive) {
+      return dataWithVisibleZeros.map((series, index) => ({
+        series,
+        index,
+        isVisible: true
+      }));
+    }
+    return dataWithVisibleZeros.map((series, index) => ({
+      series,
+      index,
+      isVisible: isSeriesVisible(chartId, series.label)
+    }));
+  }, [dataWithVisibleZeros, chartId, isSeriesVisible, legendInteractive]);
+  const allSeriesHidden = useMemo2(() => {
+    return seriesWithVisibility.every(({ isVisible }) => !isVisible);
+  }, [seriesWithVisibility]);
   const getBarBackground = useCallback(
     (index) => () => withPatterns ? `url(#${getPatternId(chartId, index)})` : getElementStyles({ data: dataSorted[index], index }).color,
     [withPatterns, getElementStyles, dataSorted, chartId]
@@ -376,17 +396,34 @@ var BarChartInternal = ({
                     ) })
                   ] }),
                   highlightedBarStyle && /* @__PURE__ */ jsx("style", { children: highlightedBarStyle }),
-                  /* @__PURE__ */ jsx(BarGroup, { padding: chartOptions.barGroup.padding, children: dataWithVisibleZeros.map((seriesData, index) => /* @__PURE__ */ jsx(
-                    BarSeries,
+                  allSeriesHidden ? /* @__PURE__ */ jsx(
+                    "text",
                     {
-                      dataKey: seriesData?.label,
-                      data: seriesData.data,
-                      yAccessor: chartOptions.accessors.yAccessor,
-                      xAccessor: chartOptions.accessors.xAccessor,
-                      colorAccessor: getBarBackground(index)
-                    },
-                    seriesData?.label
-                  )) }),
+                      x: width / 2,
+                      y: (height - (showLegend ? legendHeight : 0)) / 2,
+                      textAnchor: "middle",
+                      fill: providerTheme.gridStyles?.stroke || "#ccc",
+                      fontSize: "14",
+                      fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
+                      children: __("All series are hidden. Click legend items to show data.", "jetpack-charts")
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(BarGroup, { padding: chartOptions.barGroup.padding, children: seriesWithVisibility.map(({ series: seriesData, index, isVisible }) => {
+                    if (!isVisible) {
+                      return null;
+                    }
+                    return /* @__PURE__ */ jsx(
+                      BarSeries,
+                      {
+                        dataKey: seriesData?.label,
+                        data: seriesData.data,
+                        yAccessor: chartOptions.accessors.yAccessor,
+                        xAccessor: chartOptions.accessors.xAccessor,
+                        colorAccessor: getBarBackground(index)
+                      },
+                      seriesData?.label
+                    );
+                  }) }),
                   /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.x }),
                   /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.y }),
                   withTooltips && /* @__PURE__ */ jsx(
@@ -418,7 +455,8 @@ var BarChartInternal = ({
                 className: bar_chart_module_default["bar-chart__legend"],
                 shape: legendShape,
                 ref: legendRef,
-                chartId
+                chartId,
+                interactive: legendInteractive
               }
             ),
             children
@@ -450,4 +488,4 @@ export {
   BarChart,
   BarChartResponsive
 };
-//# sourceMappingURL=chunk-KM62I6SD.js.map
+//# sourceMappingURL=chunk-HVWETEEV.js.map

package/dist/chunk-HVWETEEV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/bar-chart/bar-chart.tsx","../src/components/bar-chart/bar-chart.module.scss","../src/components/bar-chart/private/use-bar-chart-options.ts"],"sourcesContent":["import { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from '@visx/pattern';\nimport { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useState, useRef, useMemo } from 'react';\nimport {\n\tuseXYChartTheme,\n\tuseChartDataTransform,\n\tuseZeroValueDisplay,\n\tuseChartMargin,\n\tuseElementHeight,\n} from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n\tGlobalChartsContext,\n} from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { AccessibleTooltip, useKeyboardNavigation } from '../tooltip';\nimport styles from './bar-chart.module.scss';\nimport { useBarChartOptions } from './private';\nimport type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';\nimport type { FC, ReactNode, ComponentType } from 'react';\n\nexport interface BarChartProps extends BaseChartProps< SeriesData[] > {\n\trenderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;\n\torientation?: 'horizontal' | 'vertical';\n\twithPatterns?: boolean;\n\tshowZeroValues?: boolean;\n\tlegendInteractive?: boolean;\n\tchildren?: ReactNode;\n}\n\n// Base props type with optional responsive properties\ntype BarChartBaseProps = Optional< BarChartProps, 'width' | 'height' | 'size' >;\n\n// Composition API types\ninterface BarChartSubComponents {\n\tLegend: ComponentType< React.ComponentProps< typeof Legend > >;\n}\n\ntype BarChartComponent = FC< BarChartBaseProps > & BarChartSubComponents;\ntype BarChartResponsiveComponent = FC< BarChartBaseProps & ResponsiveConfig > &\n\tBarChartSubComponents;\n\n// Validation function similar to LineChart\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\tpoint =>\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( ! point.label &&\n\t\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\nconst getPatternId = ( chartId: string, index: number ) => `bar-pattern-${ chartId }-${ index }`;\n\nconst BarChartInternal: FC< BarChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth,\n\theight = 400,\n\tclassName,\n\tmargin,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendMaxWidth,\n\tlegendTextOverflow = 'wrap',\n\tlegendItemClassName,\n\tlegendShape = 'rect',\n\tgridVisibility: gridVisibilityProp,\n\trenderTooltip,\n\toptions = {},\n\torientation = 'vertical',\n\twithPatterns = false,\n\tshowZeroValues = false,\n\tlegendInteractive = false,\n\tchildren,\n} ) => {\n\tconst horizontal = orientation === 'horizontal';\n\tconst chartId = useChartId( providedChartId );\n\tconst theme = useXYChartTheme( data );\n\n\tconst dataSorted = useChartDataTransform( data );\n\n\t// Transform data to add a small value for zero bars to make them visible\n\tconst dataWithVisibleZeros = useZeroValueDisplay( dataSorted, {\n\t\tenabled: showZeroValues,\n\t} );\n\n\t// Create legend items using the reusable hook\n\tconst legendItems = useChartLegendItems( dataSorted );\n\tconst chartOptions = useBarChartOptions( dataWithVisibleZeros, horizontal, options );\n\tconst defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );\n\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\tconst chartRef = useRef< HTMLDivElement >( null );\n\tconst [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );\n\tconst [ isNavigating, setIsNavigating ] = useState( false );\n\n\tconst totalPoints =\n\t\tMath.max( 0, ...data.map( series => series.data?.length || 0 ) ) * data.length;\n\n\t// Use the keyboard navigation hook\n\tconst { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {\n\t\tselectedIndex,\n\t\tsetSelectedIndex,\n\t\tisNavigating,\n\t\tsetIsNavigating,\n\t\tchartRef,\n\t\ttotalPoints,\n\t} );\n\n\tconst { getElementStyles, isSeriesVisible } = useGlobalChartsContext();\n\tconst providerTheme = useGlobalChartsTheme();\n\n\t// Add visibility information to series when using interactive legends\n\tconst seriesWithVisibility = useMemo( () => {\n\t\tif ( ! chartId || ! legendInteractive ) {\n\t\t\treturn dataWithVisibleZeros.map( ( series, index ) => ( {\n\t\t\t\tseries,\n\t\t\t\tindex,\n\t\t\t\tisVisible: true,\n\t\t\t} ) );\n\t\t}\n\t\treturn dataWithVisibleZeros.map( ( series, index ) => ( {\n\t\t\tseries,\n\t\t\tindex,\n\t\t\tisVisible: isSeriesVisible( chartId, series.label ),\n\t\t} ) );\n\t}, [ dataWithVisibleZeros, chartId, isSeriesVisible, legendInteractive ] );\n\n\t// Check if all series are hidden\n\tconst allSeriesHidden = useMemo( () => {\n\t\treturn seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );\n\t}, [ seriesWithVisibility ] );\n\n\tconst getBarBackground = useCallback(\n\t\t( index: number ) => () =>\n\t\t\twithPatterns\n\t\t\t\t? `url(#${ getPatternId( chartId, index ) })`\n\t\t\t\t: getElementStyles( { data: dataSorted[ index ], index } ).color,\n\t\t[ withPatterns, getElementStyles, dataSorted, chartId ]\n\t);\n\n\tconst renderDefaultTooltip = useCallback(\n\t\t( { tooltipData }: RenderTooltipParams< DataPointDate > ) => {\n\t\t\tconst nearestDatum = tooltipData?.nearestDatum?.datum;\n\t\t\tif ( ! nearestDatum ) return null;\n\n\t\t\treturn (\n\t\t\t\t<div className={ styles[ 'bar-chart__tooltip' ] }>\n\t\t\t\t\t<div className={ styles[ 'bar-chart__tooltip-header' ] }>\n\t\t\t\t\t\t{ tooltipData?.nearestDatum?.key }\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={ styles[ 'bar-chart__tooltip-row' ] }>\n\t\t\t\t\t\t<span className={ styles[ 'bar-chart__tooltip-label' ] }>\n\t\t\t\t\t\t\t{ chartOptions.tooltip.labelFormatter(\n\t\t\t\t\t\t\t\tnearestDatum.label || ( nearestDatum.date ? nearestDatum.date.getTime() : 0 ),\n\t\t\t\t\t\t\t\t0,\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:\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span className={ styles[ 'bar-chart__tooltip-value' ] }>{ nearestDatum.value }</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[ chartOptions.tooltip ]\n\t);\n\n\tconst renderPattern = useCallback(\n\t\t( index: number, color: string ) => {\n\t\t\tconst patternType = index % 4;\n\t\t\tconst id = getPatternId( chartId, index );\n\t\t\tconst commonProps = {\n\t\t\t\tid,\n\t\t\t\tstroke: 'white',\n\t\t\t\tstrokeWidth: 1,\n\t\t\t\tbackground: color,\n\t\t\t};\n\n\t\t\tswitch ( patternType ) {\n\t\t\t\tcase 0:\n\t\t\t\tdefault:\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<PatternLines\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\twidth={ 5 }\n\t\t\t\t\t\t\theight={ 5 }\n\t\t\t\t\t\t\torientation={ [ 'diagonal' ] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\tcase 1:\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<PatternCircles key={ id } { ...commonProps } width={ 6 } height={ 6 } fill=\"white\" />\n\t\t\t\t\t);\n\t\t\t\tcase 2:\n\t\t\t\t\treturn <PatternWaves key={ id } { ...commonProps } width={ 4 } height={ 4 } />;\n\t\t\t\tcase 3:\n\t\t\t\t\treturn <PatternHexagons key={ id } { ...commonProps } size={ 8 } height={ 3 } />;\n\t\t\t}\n\t\t},\n\t\t[ chartId ]\n\t);\n\n\tconst createPatternBorderStyle = useCallback(\n\t\t( index: number, color: string ) => {\n\t\t\tconst patternId = getPatternId( chartId, index );\n\t\t\treturn `\n\t\t\t.visx-bar[fill=\"url(#${ patternId })\"] {\n\t\t\t\tstroke: ${ color };\n\t\t\t\tstroke-width: 1;\n\t\t\t\t}\n\t\t\t`;\n\t\t},\n\t\t[ chartId ]\n\t);\n\n\tconst createKeyboardHighlightStyle = useCallback( () => {\n\t\tif ( selectedIndex === undefined ) return '';\n\n\t\t// Calculate which bar should be highlighted based on selectedIndex\n\t\t// Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n\t\tconst maxDataPoints = Math.max( ...data.map( s => s.data.length ) );\n\t\tconst dataPointIndex = Math.floor( selectedIndex / data.length );\n\t\tconst seriesIndex = selectedIndex % data.length;\n\n\t\t// Only highlight if we're within valid bounds\n\t\tif ( dataPointIndex >= maxDataPoints || seriesIndex >= data.length ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst seriesData = data[ seriesIndex ];\n\t\tif ( dataPointIndex >= seriesData.data.length ) {\n\t\t\treturn '';\n\t\t}\n\n\t\t// Based on the DOM structure analysis:\n\t\t// - All bars are in a single .visx-bar-group\n\t\t// - Bars are ordered as: [series1[0], series1[1], series2[0], series2[1], ...]\n\t\t// - So we need to calculate the actual bar index in the DOM\n\t\tconst actualBarIndex = seriesIndex * maxDataPoints + dataPointIndex;\n\n\t\t// Use a CSS class selector instead of ID since useId() generates invalid CSS ID characters\n\t\tconst generatedStyles = `\n\t\t\t.bar-chart[data-chart-id=\"bar-chart-${ chartId }\"] .visx-bar-group .visx-bar:nth-child(${\n\t\t\t\tactualBarIndex + 1\n\t\t\t}) {\n\t\t\t\tstroke: #005fcc;\n\t\t\t\tstroke-width: 2px;\n\t\t\t}\n\t\t`;\n\n\t\treturn generatedStyles;\n\t}, [ selectedIndex, data, chartId ] );\n\n\t// Validate data first\n\tconst error = validateData( dataSorted );\n\tconst isDataValid = ! error;\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\torientation,\n\t\t\twithPatterns,\n\t\t} ),\n\t\t[ orientation, withPatterns ]\n\t);\n\n\t// Register chart with context only if data is valid\n\tuseChartRegistration( {\n\t\tchartId,\n\t\tlegendItems,\n\t\tchartType: 'bar',\n\t\tisDataValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tif ( error ) {\n\t\treturn <div className={ clsx( 'bar-chart', styles[ 'bar-chart' ] ) }>{ error }</div>;\n\t}\n\n\tconst gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;\n\tconst highlightedBarStyle = createKeyboardHighlightStyle();\n\n\treturn (\n\t\t<SingleChartContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tchartId,\n\t\t\t\tchartWidth: width,\n\t\t\t\tchartHeight: height - ( showLegend ? legendHeight : 0 ),\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'bar-chart', styles[ 'bar-chart' ], className ) }\n\t\t\t\tdata-testid=\"bar-chart\"\n\t\t\t\trole=\"grid\"\n\t\t\t\taria-label={ __( 'Bar chart', 'jetpack-charts' ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',\n\t\t\t\t} }\n\t\t\t\ttabIndex={ 0 }\n\t\t\t\tonKeyDown={ onChartKeyDown }\n\t\t\t\tonFocus={ onChartFocus }\n\t\t\t\tonBlur={ onChartBlur }\n\t\t\t\tref={ chartRef }\n\t\t\t\tdata-chart-id={ `bar-chart-${ chartId }` } // Unique ID for the chart\n\t\t\t>\n\t\t\t\t<XYChart\n\t\t\t\t\ttheme={ theme }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ height - ( showLegend ? legendHeight : 0 ) }\n\t\t\t\t\tmargin={ {\n\t\t\t\t\t\t...defaultMargin,\n\t\t\t\t\t\t...margin,\n\t\t\t\t\t\t...( showLegend && legendPosition === 'top'\n\t\t\t\t\t\t\t? { top: ( defaultMargin.top || 0 ) + legendHeight }\n\t\t\t\t\t\t\t: {} ),\n\t\t\t\t\t} }\n\t\t\t\t\txScale={ chartOptions.xScale }\n\t\t\t\t\tyScale={ chartOptions.yScale }\n\t\t\t\t\thorizontal={ horizontal }\n\t\t\t\t\tpointerEventsDataKey=\"nearest\"\n\t\t\t\t>\n\t\t\t\t\t<Grid\n\t\t\t\t\t\tcolumns={ gridVisibility.includes( 'y' ) }\n\t\t\t\t\t\trows={ gridVisibility.includes( 'x' ) }\n\t\t\t\t\t\tnumTicks={ 4 }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ withPatterns && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<defs data-testid=\"bar-chart-patterns\">\n\t\t\t\t\t\t\t\t{ dataSorted.map( ( seriesData, index ) =>\n\t\t\t\t\t\t\t\t\trenderPattern( index, getElementStyles( { data: seriesData, index } ).color )\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{ dataSorted.map( ( seriesData, index ) =>\n\t\t\t\t\t\t\t\t\tcreatePatternBorderStyle(\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tgetElementStyles( { data: seriesData, index } ).color\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ highlightedBarStyle && <style>{ highlightedBarStyle }</style> }\n\n\t\t\t\t\t{ allSeriesHidden ? (\n\t\t\t\t\t\t<text\n\t\t\t\t\t\t\tx={ width / 2 }\n\t\t\t\t\t\t\ty={ ( height - ( showLegend ? legendHeight : 0 ) ) / 2 }\n\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\tfill={ providerTheme.gridStyles?.stroke || '#ccc' }\n\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }\n\t\t\t\t\t\t</text>\n\t\t\t\t\t) : null }\n\n\t\t\t\t\t<BarGroup padding={ chartOptions.barGroup.padding }>\n\t\t\t\t\t\t{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {\n\t\t\t\t\t\t\t// Skip rendering invisible series\n\t\t\t\t\t\t\tif ( ! isVisible ) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<BarSeries\n\t\t\t\t\t\t\t\t\tkey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\tdataKey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\tdata={ seriesData.data as DataPointDate[] }\n\t\t\t\t\t\t\t\t\tyAccessor={ chartOptions.accessors.yAccessor }\n\t\t\t\t\t\t\t\t\txAccessor={ chartOptions.accessors.xAccessor }\n\t\t\t\t\t\t\t\t\tcolorAccessor={ getBarBackground( index ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</BarGroup>\n\n\t\t\t\t\t<Axis { ...chartOptions.axis.x } />\n\t\t\t\t\t<Axis { ...chartOptions.axis.y } />\n\n\t\t\t\t\t{ withTooltips && (\n\t\t\t\t\t\t<AccessibleTooltip\n\t\t\t\t\t\t\tdetectBounds\n\t\t\t\t\t\t\tsnapTooltipToDatumX\n\t\t\t\t\t\t\tsnapTooltipToDatumY\n\t\t\t\t\t\t\trenderTooltip={ renderTooltip || renderDefaultTooltip }\n\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\ttooltipRef={ tooltipRef }\n\t\t\t\t\t\t\tkeyboardFocusedClassName={ styles[ 'bar-chart__tooltip--keyboard-focused' ] }\n\t\t\t\t\t\t\tseries={ data }\n\t\t\t\t\t\t\tmode=\"individual\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</XYChart>\n\n\t\t\t\t{ showLegend && (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\t\tposition={ legendPosition }\n\t\t\t\t\t\talignment={ legendAlignment }\n\t\t\t\t\t\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\n\t\t\t\t\t\tclassName={ styles[ 'bar-chart__legend' ] }\n\t\t\t\t\t\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t\tinteractive={ legendInteractive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst BarChartWithProvider: FC< BarChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, don't create a new one\n\tif ( existingContext ) {\n\t\treturn <BarChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<BarChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nBarChartWithProvider.displayName = 'BarChart';\n\n// Create BarChart with composition API\nconst BarChart = attachSubComponents( BarChartWithProvider, {\n\tLegend: Legend,\n} ) as BarChartComponent;\n\n// Create responsive BarChart with composition API\nconst BarChartResponsive = attachSubComponents(\n\twithResponsive< BarChartProps >( BarChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t}\n) as BarChartResponsiveComponent;\n\nexport { BarChartResponsive as default, BarChart as BarChartUnresponsive };\n","import 'css-chunk:src/components/bar-chart/bar-chart.module.scss';export default {\n  \"bar-chart\": \"a8ccharts-lmYNi-\",\n  \"bar-chart-legend\": \"a8ccharts-vgKKqG\"\n};","import { formatNumberCompact } from '@automattic/number-formatters';\nimport { useMemo } from 'react';\nimport type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';\nimport type { DataPointDate, BaseChartProps, SeriesData } from '../../../types';\nimport type { TickFormatter } from '@visx/axis';\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\n/**\n * Get the group padding of a scale.\n *\n * @param scale - The scale to get the group padding of.\n * @return The group padding of the scale.\n */\nconst getGroupPadding = ( scale: Record< string, unknown > ): number => {\n\treturn typeof scale.paddingInner === 'number' ? ( scale.paddingInner as number ) : 0;\n};\n\n/**\n * Returns the merged options for the bar chart, including axis and scale configuration based on the orientation.\n *\n * @param data       - The data to be displayed in the chart.\n * @param horizontal - Whether the chart is horizontal or vertical.\n * @param options    - The options for the chart.\n * @return The merged options for the chart.\n */\nexport function useBarChartOptions(\n\tdata: SeriesData[],\n\thorizontal: boolean,\n\toptions: BaseChartProps[ 'options' ] = {}\n) {\n\tconst defaultOptions = useMemo( () => {\n\t\tconst bandScale = {\n\t\t\ttype: 'band' as const,\n\t\t\tpadding: 0.2,\n\t\t\tpaddingInner: 0.1,\n\t\t};\n\t\tconst linearScale = {\n\t\t\ttype: 'linear' as const,\n\t\t\tnice: true,\n\t\t\tzero: false,\n\t\t};\n\n\t\tconst labelFormatter = data?.[ 0 ]?.data?.[ 0 ]?.label\n\t\t\t? ( label: string ) => label\n\t\t\t: formatDateTick;\n\t\tconst valueFormatter = formatNumberCompact as TickFormatter< unknown >;\n\n\t\tconst labelAccessor = ( d: DataPointDate ) => d?.label || d?.date;\n\t\tconst valueAccessor = ( d: DataPointDate | EnhancedDataPoint ) => {\n\t\t\t// Use visualValue for bar rendering if available (for zero values), otherwise use value\n\t\t\tconst enhancedPoint = d as EnhancedDataPoint;\n\t\t\treturn enhancedPoint?.visualValue !== undefined ? enhancedPoint.visualValue : d?.value;\n\t\t};\n\n\t\treturn {\n\t\t\tvertical: {\n\t\t\t\txTickFormat: labelFormatter,\n\t\t\t\tyTickFormat: valueFormatter,\n\t\t\t\ttooltipLabelFormatter: labelFormatter,\n\t\t\t\txAccessor: labelAccessor,\n\t\t\t\tyAccessor: valueAccessor,\n\t\t\t\tgridVisibility: 'x',\n\t\t\t\txScale: bandScale,\n\t\t\t\tyScale: linearScale,\n\t\t\t},\n\t\t\thorizontal: {\n\t\t\t\txTickFormat: valueFormatter,\n\t\t\t\tyTickFormat: labelFormatter,\n\t\t\t\ttooltipLabelFormatter: labelFormatter,\n\t\t\t\txAccessor: valueAccessor,\n\t\t\t\tyAccessor: labelAccessor,\n\t\t\t\tgridVisibility: 'y',\n\t\t\t\txScale: linearScale,\n\t\t\t\tyScale: bandScale,\n\t\t\t},\n\t\t};\n\t}, [ data ] );\n\n\treturn useMemo( () => {\n\t\tconst orientationKey = horizontal ? 'horizontal' : 'vertical';\n\t\tconst {\n\t\t\txTickFormat,\n\t\t\tyTickFormat,\n\t\t\ttooltipLabelFormatter: defaultTooltipLabelFormatter,\n\t\t\txAccessor,\n\t\t\tyAccessor,\n\t\t\tgridVisibility,\n\t\t\txScale: baseXScale,\n\t\t\tyScale: baseYScale,\n\t\t} = defaultOptions[ orientationKey ];\n\n\t\tconst xScale = { ...baseXScale, ...( options.xScale || {} ) };\n\t\tconst yScale = { ...baseYScale, ...( options.yScale || {} ) };\n\t\tconst providedToolTipLabelFormatter = horizontal\n\t\t\t? options.axis?.y?.tickFormat\n\t\t\t: options.axis?.x?.tickFormat;\n\n\t\treturn {\n\t\t\tgridVisibility,\n\t\t\txScale,\n\t\t\tyScale,\n\t\t\taccessors: {\n\t\t\t\txAccessor,\n\t\t\t\tyAccessor,\n\t\t\t},\n\t\t\taxis: {\n\t\t\t\tx: {\n\t\t\t\t\torientation: 'bottom' as const,\n\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\ttickFormat: xTickFormat,\n\t\t\t\t\t...( options.axis?.x || {} ),\n\t\t\t\t},\n\t\t\t\ty: {\n\t\t\t\t\torientation: 'left' as const,\n\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\ttickFormat: yTickFormat,\n\t\t\t\t\t...( options.axis?.y || {} ),\n\t\t\t\t},\n\t\t\t},\n\t\t\tbarGroup: {\n\t\t\t\tpadding: getGroupPadding( horizontal ? yScale : xScale ),\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tlabelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,\n\t\t\t},\n\t\t};\n\t}, [ defaultOptions, options, horizontal ] );\n}\n"],"mappings":"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","names":["useMemo","useMemo"]}

package/dist/{chunk-HYHBAHIU.js → chunk-JGX3ZNK5.js}

@@ -10,7 +10,7 @@ import {
   SingleChartContext,
   useChartLegendItems,
   useSingleChartContext
-} from "./chunk-Q2LDRQN7.js";
+} from "./chunk-PFT2X4OW.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -24,7 +24,7 @@ import {
   useGlobalChartsContext,
   useGlobalChartsTheme,
   useXYChartTheme
-} from "./chunk-3O6FHD2T.js";
+} from "./chunk-A3PGOCJO.js";
 
 // src/components/line-chart/line-chart.tsx
 import { formatNumberCompact } from "@automattic/number-formatters";
@@ -1027,4 +1027,4 @@ export {
   LineChart,
   LineChartResponsive
 };
-//# sourceMappingURL=chunk-HYHBAHIU.js.map
+//# sourceMappingURL=chunk-JGX3ZNK5.js.map

package/dist/{chunk-W5RFMC3A.js → chunk-JI6OGGGF.js}

@@ -1,13 +1,13 @@
 import {
   BarChartResponsive
-} from "./chunk-KM62I6SD.js";
+} from "./chunk-HVWETEEV.js";
 import {
   withResponsive
 } from "./chunk-TYYW4BG3.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider
-} from "./chunk-3O6FHD2T.js";
+} from "./chunk-A3PGOCJO.js";
 
 // src/components/bar-list-chart/bar-list-chart.tsx
 import { formatNumberCompact } from "@automattic/number-formatters";
@@ -193,4 +193,4 @@ export {
   BarListChart,
   BarListChartResponsive
 };
-//# sourceMappingURL=chunk-W5RFMC3A.js.map
+//# sourceMappingURL=chunk-JI6OGGGF.js.map

package/dist/{chunk-SHADFB3T.js → chunk-KEBKTDOQ.js}

@@ -6,7 +6,7 @@ import {
   useChartId,
   useChartRegistration,
   useGlobalChartsTheme
-} from "./chunk-3O6FHD2T.js";
+} from "./chunk-A3PGOCJO.js";
 
 // src/components/conversion-funnel-chart/conversion-funnel-chart.tsx
 import { localPoint } from "@visx/event";
@@ -366,4 +366,4 @@ ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
 export {
   ConversionFunnelChartWithProvider
 };
-//# sourceMappingURL=chunk-SHADFB3T.js.map
+//# sourceMappingURL=chunk-KEBKTDOQ.js.map

package/dist/{chunk-2HUX2CAT.cjs → chunk-LSGYIUQX.cjs}

@@ -909,6 +909,47 @@ var useZeroValueDisplay = (data, options = { enabled: false }) => {
   }, [data, enabled, minValueRatio, maxValueRatio]);
 };
 
+// src/hooks/use-interactive-legend-data.ts
+
+var useInteractiveLegendData = ({
+  data,
+  chartId,
+  legendInteractive,
+  isSeriesVisible
+}) => {
+  const visibleData = _react.useMemo.call(void 0, () => {
+    if (!chartId || !legendInteractive) {
+      return data;
+    }
+    const filtered = data.filter((segment) => isSeriesVisible(chartId, segment.label));
+    if (filtered.length === 0) {
+      return [];
+    }
+    const totalValue = filtered.reduce((sum, segment) => sum + segment.value, 0);
+    return filtered.map((segment) => ({
+      ...segment,
+      percentage: totalValue > 0 ? segment.value / totalValue * 100 : 0
+    }));
+  }, [data, chartId, isSeriesVisible, legendInteractive]);
+  const allSegmentsHidden = _react.useMemo.call(void 0, () => {
+    return legendInteractive && visibleData.length === 0;
+  }, [legendInteractive, visibleData]);
+  const legendData = _react.useMemo.call(void 0, () => {
+    if (!legendInteractive || !chartId) {
+      return data;
+    }
+    return data.map((segment) => {
+      const isVisible = isSeriesVisible(chartId, segment.label);
+      if (!isVisible) {
+        return segment;
+      }
+      const recalculated = visibleData.find((d) => d.label === segment.label);
+      return recalculated || segment;
+    });
+  }, [data, visibleData, legendInteractive, chartId, isSeriesVisible]);
+  return { visibleData, allSegmentsHidden, legendData };
+};
+
 // src/providers/chart-context/hooks/use-chart-registration.ts
 var useChartRegistration = ({
   chartId,
@@ -973,5 +1014,6 @@ var useGlobalChartsTheme = () => {
 
 
 
-exports.useDeepMemo = useDeepMemo; exports.useChartMouseHandler = useChartMouseHandler; exports.attachSubComponents = attachSubComponents; exports.formatMetricValue = formatMetricValue; exports.formatPercentage = formatPercentage; exports.isSafari = isSafari; exports.hexToRgba = hexToRgba; exports.defaultTheme = defaultTheme; exports.jetpackTheme = jetpackTheme; exports.wooTheme = wooTheme; exports.GlobalChartsContext = GlobalChartsContext; exports.GlobalChartsProvider = GlobalChartsProvider; exports.useGlobalChartsContext = useGlobalChartsContext; exports.useChartId = useChartId; exports.useChartRegistration = useChartRegistration; exports.useGlobalChartsTheme = useGlobalChartsTheme; exports.useXYChartTheme = useXYChartTheme; exports.useChartDataTransform = useChartDataTransform; exports.useChartMargin = useChartMargin; exports.useElementHeight = useElementHeight; exports.useTextTruncation = useTextTruncation; exports.useZeroValueDisplay = useZeroValueDisplay;
-//# sourceMappingURL=chunk-2HUX2CAT.cjs.map
+
+exports.useDeepMemo = useDeepMemo; exports.useChartMouseHandler = useChartMouseHandler; exports.attachSubComponents = attachSubComponents; exports.formatMetricValue = formatMetricValue; exports.formatPercentage = formatPercentage; exports.isSafari = isSafari; exports.hexToRgba = hexToRgba; exports.defaultTheme = defaultTheme; exports.jetpackTheme = jetpackTheme; exports.wooTheme = wooTheme; exports.GlobalChartsContext = GlobalChartsContext; exports.GlobalChartsProvider = GlobalChartsProvider; exports.useGlobalChartsContext = useGlobalChartsContext; exports.useChartId = useChartId; exports.useChartRegistration = useChartRegistration; exports.useGlobalChartsTheme = useGlobalChartsTheme; exports.useXYChartTheme = useXYChartTheme; exports.useChartDataTransform = useChartDataTransform; exports.useChartMargin = useChartMargin; exports.useElementHeight = useElementHeight; exports.useTextTruncation = useTextTruncation; exports.useZeroValueDisplay = useZeroValueDisplay; exports.useInteractiveLegendData = useInteractiveLegendData;
+//# sourceMappingURL=chunk-LSGYIUQX.cjs.map