@automattic/charts 0.50.2 → 0.52.0

package/dist/chunk-ULRFJ3IU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-deep-memo.ts","../src/hooks/use-chart-mouse-handler.ts","../src/hooks/use-xychart-theme.ts","../src/providers/chart-context/global-charts-provider.tsx","../src/providers/chart-context/private/get-chart-color.ts","../src/providers/chart-context/themes.ts","../src/providers/chart-context/hooks/use-global-charts-context.ts","../src/providers/chart-context/hooks/use-chart-id.ts","../src/providers/chart-context/hooks/use-chart-registration.ts","../src/providers/chart-context/hooks/use-global-charts-theme.ts","../src/hooks/use-chart-data-transform.ts","../src/hooks/use-chart-margin.tsx","../src/hooks/use-element-height.ts","../src/hooks/use-text-truncation.ts","../src/hooks/use-zero-value-display.ts","../src/hooks/use-interactive-legend-data.ts","../src/hooks/use-prefers-reduced-motion.ts"],"sourcesContent":["import isEqual from 'fast-deep-equal';\nimport { useRef } from 'react';\n\n/**\n * Custom hook to memoize a value using deep equality comparison.\n * Prevents unnecessary re-renders when objects have the same content but different references.\n *\n * @param value - The value to memoize with deep equality comparison\n * @return The memoized value that only changes when deeply different\n */\nexport const useDeepMemo = < T >( value: T ): T => {\n\tconst ref = useRef< T >( value );\n\n\tif ( ! isEqual( ref.current, value ) ) {\n\t\tref.current = value;\n\t}\n\n\treturn ref.current;\n};\n","import { localPoint } from '@visx/event';\nimport { useTooltip } from '@visx/tooltip';\nimport { useCallback, type MouseEvent } from 'react';\nimport type { DataPoint } from '../types';\n\ntype UseChartMouseHandlerProps = {\n\t/**\n\t * Whether tooltips are enabled\n\t */\n\twithTooltips: boolean;\n\t/**\n\t * Horizontal offset for tooltip positioning in pixels (default: 0)\n\t */\n\toffsetX?: number;\n\t/**\n\t * Vertical offset for tooltip positioning in pixels (default: -10)\n\t */\n\toffsetY?: number;\n};\n\ntype UseChartMouseHandlerReturn = {\n\t/**\n\t * Handler for mouse move events\n\t */\n\tonMouseMove: ( event: MouseEvent< SVGElement >, data: DataPoint ) => void;\n\t/**\n\t * Handler for mouse leave events\n\t */\n\tonMouseLeave: () => void;\n\t/**\n\t * Whether the tooltip is currently open\n\t */\n\ttooltipOpen: boolean;\n\t/**\n\t * The current tooltip data\n\t */\n\ttooltipData: DataPoint | null;\n\t/**\n\t * The current tooltip left position\n\t */\n\ttooltipLeft: number | undefined;\n\t/**\n\t * The current tooltip top position\n\t */\n\ttooltipTop: number | undefined;\n};\n\n/**\n * Hook to handle mouse interactions for chart components\n *\n * @param {UseChartMouseHandlerProps} props - Hook configuration\n * @return {UseChartMouseHandlerReturn} Object containing handlers and tooltip state\n */\nexport const useChartMouseHandler = ( {\n\twithTooltips,\n\toffsetX = 0,\n\toffsetY = -10,\n}: UseChartMouseHandlerProps ): UseChartMouseHandlerReturn => {\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< DataPoint >();\n\n\tconst onMouseMove = useCallback(\n\t\t( event: MouseEvent< SVGElement >, data: DataPoint ) => {\n\t\t\tif ( ! withTooltips ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: data,\n\t\t\t\ttooltipLeft: coords.x + offsetX,\n\t\t\t\ttooltipTop: coords.y + offsetY,\n\t\t\t} );\n\t\t},\n\t\t[ withTooltips, showTooltip, offsetX, offsetY ]\n\t);\n\n\tconst onMouseLeave = useCallback( () => {\n\t\tif ( ! withTooltips ) {\n\t\t\treturn;\n\t\t}\n\t\thideTooltip();\n\t}, [ withTooltips, hideTooltip ] );\n\n\treturn {\n\t\tonMouseMove,\n\t\tonMouseLeave,\n\t\ttooltipOpen,\n\t\ttooltipData: tooltipData || null,\n\t\ttooltipLeft,\n\t\ttooltipTop,\n\t};\n};\n","import { buildChartTheme } from '@visx/xychart';\nimport { useMemo } from 'react';\nimport { useGlobalChartsTheme } from '../providers';\nimport type { SeriesData } from '../types';\n\nexport const useXYChartTheme = ( data: SeriesData[] ) => {\n\tconst theme = useGlobalChartsTheme();\n\n\treturn useMemo( () => {\n\t\tconst seriesColors = ( data ?? [] )\n\t\t\t.map( series => series.options?.stroke )\n\t\t\t.filter( ( color ): color is string => Boolean( color ) );\n\n\t\treturn buildChartTheme( {\n\t\t\t...theme,\n\t\t\tcolors: [ ...seriesColors, ...( theme.colors ?? [] ) ],\n\t\t} );\n\t}, [ theme, data ] );\n};\n","import {\n\tcreateContext,\n\tuseCallback,\n\tuseMemo,\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n} from 'react';\nimport {\n\tgetItemShapeStyles,\n\tgetSeriesLineStyles,\n\tmergeThemes,\n\thexToHsl,\n\tresolveCssVariable,\n} from '../../utils';\nimport { getChartColor, type ColorCache } from './private/get-chart-color';\nimport { defaultTheme } from './themes';\nimport type { GlobalChartsContextValue, ChartRegistration } from './types';\nimport type { ChartTheme, CompleteChartTheme } from '../../types';\nimport type { FC, ReactNode } from 'react';\n\nexport const GlobalChartsContext = createContext< GlobalChartsContextValue | null >( null );\n\nexport interface GlobalChartsProviderProps {\n\tchildren: ReactNode;\n\ttheme?: Partial< ChartTheme >;\n}\n\nexport const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { children, theme } ) => {\n\tconst [ charts, setCharts ] = useState< Map< string, ChartRegistration > >( () => new Map() );\n\t// Track hidden series per chart: chartId -> Set<seriesLabel>\n\tconst [ hiddenSeries, setHiddenSeries ] = useState< Map< string, Set< string > > >(\n\t\t() => new Map()\n\t);\n\n\t// Ref to the wrapper element for resolving scoped CSS variables\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\n\tconst providerTheme: CompleteChartTheme = useMemo( () => {\n\t\treturn theme ? mergeThemes( defaultTheme, theme ) : defaultTheme;\n\t}, [ theme ] );\n\n\t// Cache expensive color computations that only change when theme colors change\n\t// Using useState + useLayoutEffect instead of useMemo to ensure CSS variables\n\t// in <style> tags are applied to the DOM before we try to resolve them\n\tconst [ colorCache, setColorCache ] = useState< ColorCache >( () => ( {\n\t\tcolors: [],\n\t\thues: [],\n\t\texistingHslColors: [],\n\t\tminHue: 360,\n\t\tmaxHue: 0,\n\t} ) );\n\n\t// Compute color cache after DOM is updated (so CSS variables are available)\n\t// Resolves CSS variables from the wrapper element's scope to handle scoped variables\n\t// Note: Only re-runs when providerTheme changes, not when wrapper element changes.\n\t// This is intentional, as wrapperRef is expected to be stable for the lifetime of the provider.\n\tuseLayoutEffect( () => {\n\t\tconst { colors } = providerTheme;\n\t\tconst resolvedColors: string[] = [];\n\t\tconst hues: number[] = [];\n\t\tconst existingHslColors: Array< [ number, number, number ] > = [];\n\t\tlet minHue = 360;\n\t\tlet maxHue = 0;\n\n\t\t// Process all colors once and cache the results\n\t\tif ( Array.isArray( colors ) ) {\n\t\t\tfor ( const color of colors ) {\n\t\t\t\tif ( color && typeof color === 'string' ) {\n\t\t\t\t\tlet colorValue = color;\n\n\t\t\t\t\t// Handle CSS custom properties names - resolve them to actual values\n\t\t\t\t\t// Use wrapper element to resolve scoped CSS variables\n\t\t\t\t\tif ( color.startsWith( '--' ) ) {\n\t\t\t\t\t\tconst resolved = resolveCssVariable( color, wrapperRef.current );\n\n\t\t\t\t\t\tif ( resolved === null || resolved === '' ) {\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tcolorValue = resolved;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Process hex colors\n\t\t\t\t\tif ( colorValue.startsWith( '#' ) ) {\n\t\t\t\t\t\tresolvedColors.push( colorValue );\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tconst hslColor = hexToHsl( colorValue );\n\t\t\t\t\t\t\thues.push( hslColor[ 0 ] );\n\t\t\t\t\t\t\texistingHslColors.push( hslColor );\n\t\t\t\t\t\t\tminHue = Math.min( minHue, hslColor[ 0 ] );\n\t\t\t\t\t\t\tmaxHue = Math.max( maxHue, hslColor[ 0 ] );\n\t\t\t\t\t\t} catch {\n\t\t\t\t\t\t\t// Ignore invalid hex colors that don't parse to HSL\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tsetColorCache( {\n\t\t\tcolors: resolvedColors,\n\t\t\thues,\n\t\t\texistingHslColors,\n\t\t\tminHue,\n\t\t\tmaxHue,\n\t\t} );\n\t}, [ providerTheme ] );\n\n\tconst [ groupToColorMap, setGroupToColorMap ] = useState< Map< string, string > >(\n\t\t() => new Map()\n\t);\n\n\t// Reset group color mappings when theme colors change\n\tuseEffect( () => {\n\t\t// Create a completely new Map instance to trigger dependencies, e.g. useChartLegendItems\n\t\tsetGroupToColorMap( new Map() );\n\t}, [ providerTheme.colors ] );\n\n\tconst registerChart = useCallback( ( id: string, data: ChartRegistration ) => {\n\t\tsetCharts( prev => new Map( prev ).set( id, data ) );\n\t}, [] );\n\n\tconst unregisterChart = useCallback( ( id: string ) => {\n\t\tsetCharts( prev => {\n\t\t\tconst newMap = new Map( prev );\n\t\t\tnewMap.delete( id );\n\t\t\treturn newMap;\n\t\t} );\n\t}, [] );\n\n\tconst getChartData = useCallback(\n\t\t( id: string ) => {\n\t\t\treturn charts.get( id );\n\t\t},\n\t\t[ charts ]\n\t);\n\n\tconst resolveColor = useCallback(\n\t\t( {\n\t\t\tgroup,\n\t\t\tindex,\n\t\t\toverrideColor,\n\t\t}: {\n\t\t\tgroup?: string;\n\t\t\tindex: number;\n\t\t\toverrideColor?: string;\n\t\t} ): string => {\n\t\t\t// Highest precedence: eg. explicit series stroke or chart color prop\n\t\t\tif ( overrideColor ) {\n\t\t\t\treturn overrideColor;\n\t\t\t}\n\n\t\t\t// If group provided, maintain a stable assignment\n\t\t\tif ( group ) {\n\t\t\t\tconst existing = groupToColorMap.get( group );\n\n\t\t\t\tif ( existing ) {\n\t\t\t\t\treturn existing;\n\t\t\t\t}\n\n\t\t\t\tconst assignedCount = groupToColorMap.size;\n\t\t\t\tconst color =\n\t\t\t\t\tcolorCache.colors.length > 0 ? getChartColor( assignedCount, colorCache ) : '#000000';\n\t\t\t\tgroupToColorMap.set( group, color );\n\n\t\t\t\treturn color;\n\t\t\t}\n\n\t\t\treturn colorCache.colors.length > 0 ? getChartColor( index, colorCache ) : '#000000';\n\t\t},\n\t\t[ colorCache, groupToColorMap ]\n\t);\n\n\tconst getElementStyles = useCallback< GlobalChartsContextValue[ 'getElementStyles' ] >(\n\t\t( { data, index, overrideColor, legendShape } ) => {\n\t\t\tconst isSeriesData = data && typeof data === 'object' && 'data' in data && 'options' in data;\n\t\t\tconst isPointPercentageData = data && typeof data === 'object' && 'percentage' in data;\n\n\t\t\treturn {\n\t\t\t\tcolor: resolveColor( {\n\t\t\t\t\tgroup: data?.group,\n\t\t\t\t\tindex,\n\t\t\t\t\toverrideColor:\n\t\t\t\t\t\toverrideColor ||\n\t\t\t\t\t\t( isSeriesData && data?.options?.stroke ) ||\n\t\t\t\t\t\t( isPointPercentageData && data?.color ),\n\t\t\t\t} ),\n\t\t\t\tlineStyles: isSeriesData ? getSeriesLineStyles( data, index, providerTheme ) : {},\n\t\t\t\tglyph: providerTheme.glyphs?.[ index ],\n\t\t\t\tshapeStyles: isSeriesData\n\t\t\t\t\t? getItemShapeStyles( data, index, providerTheme, legendShape )\n\t\t\t\t\t: {},\n\t\t\t};\n\t\t},\n\t\t[ providerTheme, resolveColor ]\n\t);\n\n\t// Series visibility management methods\n\tconst toggleSeriesVisibility = useCallback( ( chartId: string, seriesLabel: string ) => {\n\t\tsetHiddenSeries( prev => {\n\t\t\tconst newMap = new Map( prev );\n\t\t\tconst chartHidden = newMap.get( chartId ) || new Set();\n\t\t\tconst newSet = new Set( chartHidden );\n\n\t\t\tif ( newSet.has( seriesLabel ) ) {\n\t\t\t\tnewSet.delete( seriesLabel );\n\t\t\t} else {\n\t\t\t\tnewSet.add( seriesLabel );\n\t\t\t}\n\n\t\t\tif ( newSet.size === 0 ) {\n\t\t\t\tnewMap.delete( chartId );\n\t\t\t} else {\n\t\t\t\tnewMap.set( chartId, newSet );\n\t\t\t}\n\n\t\t\treturn newMap;\n\t\t} );\n\t}, [] );\n\n\tconst isSeriesVisible = useCallback(\n\t\t( chartId: string, seriesLabel: string ) => {\n\t\t\tconst chartHidden = hiddenSeries.get( chartId );\n\t\t\treturn ! chartHidden || ! chartHidden.has( seriesLabel );\n\t\t},\n\t\t[ hiddenSeries ]\n\t);\n\n\tconst getHiddenSeries = useCallback(\n\t\t( chartId: string ): Set< string > => {\n\t\t\tconst set = hiddenSeries.get( chartId );\n\t\t\treturn set ? new Set( set ) : new Set< string >();\n\t\t},\n\t\t[ hiddenSeries ]\n\t);\n\n\tconst value: GlobalChartsContextValue = useMemo(\n\t\t() => ( {\n\t\t\tcharts,\n\t\t\tregisterChart,\n\t\t\tunregisterChart,\n\t\t\tgetChartData,\n\t\t\ttheme: providerTheme,\n\t\t\tgetElementStyles,\n\t\t\ttoggleSeriesVisibility,\n\t\t\tisSeriesVisible,\n\t\t\tgetHiddenSeries,\n\t\t} ),\n\t\t[\n\t\t\tcharts,\n\t\t\tregisterChart,\n\t\t\tunregisterChart,\n\t\t\tgetChartData,\n\t\t\tproviderTheme,\n\t\t\tgetElementStyles,\n\t\t\ttoggleSeriesVisibility,\n\t\t\tisSeriesVisible,\n\t\t\tgetHiddenSeries,\n\t\t]\n\t);\n\n\treturn (\n\t\t<GlobalChartsContext.Provider value={ value }>\n\t\t\t<div ref={ wrapperRef } style={ { display: 'contents' } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</GlobalChartsContext.Provider>\n\t);\n};\n","import { getColorDistance } from '../../../utils';\n\nexport interface ColorCache {\n\tcolors: string[];\n\thues: number[];\n\texistingHslColors: Array< [ number, number, number ] >;\n\tminHue: number;\n\tmaxHue: number;\n}\n\n/**\n * Golden ratio for mathematically pleasing color distribution\n * Used to generate evenly spaced hues that are visually distinct\n */\nconst GOLDEN_RATIO = 0.618033988749;\n\n/**\n * Minimum perceptual distance between colors to ensure visual distinction\n * Based on weighted HSL distance calculation optimized for chart readability\n */\nconst MIN_COLOR_DISTANCE = 25;\n\n/**\n * Maximum attempts to find a sufficiently different color\n * Prevents infinite loops while allowing reasonable search space\n */\nconst MAX_COLOR_GENERATION_ATTEMPTS = 50;\n\n/**\n * Color variation attempt offset\n * Small increment to explore slightly different color variations per attempt\n */\nconst VARIATION_ATTEMPT_OFFSET = 0.1;\n\n// Saturation configuration for generated colors\n\n/**\n * Base saturation percentage for generated colors\n * 45% provides muted, professional colors without being washed out\n */\nconst BASE_SATURATION = 45;\n\n/**\n * Number of saturation variation steps\n * Creates 3 different saturation levels for variety\n */\nconst SATURATION_VARIATION_STEPS = 3;\n\n/**\n * Saturation increment per variation step\n * 10% increments provide subtle variation while keeping colors muted\n * Results in saturation levels: 45%, 55%, 65%\n */\nconst SATURATION_INCREMENT = 10;\n\n// Lightness configuration for WCAG AA accessibility compliance\n\n/**\n * Base lightness percentage for generated colors\n * 35% ensures sufficient contrast against white backgrounds for WCAG AA compliance\n * WCAG AA requires 4.5:1 contrast ratio for normal text\n */\nconst BASE_LIGHTNESS = 35;\n\n/**\n * Number of lightness variation steps\n * Creates 4 different lightness levels for variety\n */\nconst LIGHTNESS_VARIATION_STEPS = 4;\n\n/**\n * Lightness increment per variation step\n * 8% increments provide subtle lightness variation while maintaining accessibility\n * Results in lightness levels: 35%, 43%, 51%, 59%\n * All levels maintain WCAG AA compliance against white backgrounds\n */\nconst LIGHTNESS_INCREMENT = 8;\n\n// Hue range expansion and constraints\n\n/**\n * Minimum hue range in degrees to ensure sufficient color variety\n * 60 degrees provides reasonable color spread even for narrow palettes\n */\nconst MIN_HUE_RANGE_DEGREES = 60;\n\n/**\n * Hue range expansion factor\n * 1.3x expansion provides slightly more variety than the original palette\n */\nconst HUE_RANGE_EXPANSION_FACTOR = 1.3;\n\n/**\n * Threshold for detecting hue wrap-around (color wheel boundary crossing)\n * 180 degrees indicates the colors span more than half the color wheel\n */\nconst HUE_WRAP_THRESHOLD_DEGREES = 180;\n\n/**\n * Full color wheel rotation in degrees\n */\nconst FULL_HUE_ROTATION_DEGREES = 360;\n\n/**\n * Factor for single color hue range\n */\nconst SINGLE_COLOR_HUE_RANGE_FACTOR = 0.33;\n\n/**\n * Get a color from the colors array or generate a new color using the golden ratio\n *\n * @param index      - the index of the color to get\n * @param colorCache - pre-computed color data for performance\n * @return a color from the colors array or a new color using the golden ratio\n */\nexport const getChartColor = ( index: number, colorCache: ColorCache ) => {\n\tconst {\n\t\tcolors,\n\t\thues,\n\t\texistingHslColors,\n\t\tminHue: cachedMinHue,\n\t\tmaxHue: cachedMaxHue,\n\t} = colorCache;\n\n\tif ( index < colors.length ) {\n\t\treturn colors[ index ];\n\t}\n\n\tlet minHue = cachedMinHue;\n\tlet maxHue = cachedMaxHue;\n\n\t// Generate additional colors using golden ratio, avoiding similar colors\n\tfor ( let attempt = 0; attempt < MAX_COLOR_GENERATION_ATTEMPTS; attempt++ ) {\n\t\t// Calculate hue using golden ratio distribution with variation per attempt\n\t\t// Formula: ((base_index + attempt_variation) * golden_ratio * 360°) mod 360°\n\t\t// This ensures mathematically pleasing spacing while allowing slight shifts per attempt\n\t\tlet hue =\n\t\t\t( ( index - colors.length + attempt * VARIATION_ATTEMPT_OFFSET ) *\n\t\t\t\tGOLDEN_RATIO *\n\t\t\t\tFULL_HUE_ROTATION_DEGREES ) %\n\t\t\tFULL_HUE_ROTATION_DEGREES;\n\n\t\t// If we have existing colors, constrain new colors to their hue range\n\t\tif ( hues.length > 0 ) {\n\t\t\t// Handle hue wrap-around (e.g., if colors span across 0 degrees)\n\t\t\tlet hueRange = maxHue - minHue;\n\n\t\t\t// If there's only one color, use a set hue range for limited variety\n\t\t\tif ( hues.length === 1 ) {\n\t\t\t\thueRange = FULL_HUE_ROTATION_DEGREES * SINGLE_COLOR_HUE_RANGE_FACTOR;\n\t\t\t} else if ( hueRange > HUE_WRAP_THRESHOLD_DEGREES ) {\n\t\t\t\t// If the range is very large, it might be wrapping around the color wheel\n\t\t\t\t// Check if a smaller range exists when considering wrap-around\n\t\t\t\tconst altMinHue = Math.min( ...hues.filter( h => h > HUE_WRAP_THRESHOLD_DEGREES ) );\n\t\t\t\tconst altMaxHue =\n\t\t\t\t\tMath.max( ...hues.filter( h => h < HUE_WRAP_THRESHOLD_DEGREES ) ) +\n\t\t\t\t\tFULL_HUE_ROTATION_DEGREES;\n\t\t\t\tconst altRange = altMaxHue - altMinHue;\n\n\t\t\t\tif ( altRange < hueRange ) {\n\t\t\t\t\tminHue = altMinHue;\n\t\t\t\t\tmaxHue = altMaxHue;\n\t\t\t\t\thueRange = altRange;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Expand the range slightly to provide some variation\n\t\t\tconst expandedRange = Math.max(\n\t\t\t\thueRange * HUE_RANGE_EXPANSION_FACTOR,\n\t\t\t\tMIN_HUE_RANGE_DEGREES\n\t\t\t);\n\t\t\tconst rangeCenter = ( minHue + maxHue ) / 2;\n\t\t\tconst expandedMin = rangeCenter - expandedRange / 2;\n\n\t\t\t// Map the generated hue to the expanded range\n\t\t\thue = expandedMin + ( hue / FULL_HUE_ROTATION_DEGREES ) * expandedRange;\n\n\t\t\t// Normalize to 0-360 range\n\t\t\thue =\n\t\t\t\t( ( hue % FULL_HUE_ROTATION_DEGREES ) + FULL_HUE_ROTATION_DEGREES ) %\n\t\t\t\tFULL_HUE_ROTATION_DEGREES;\n\t\t}\n\n\t\tconst saturation =\n\t\t\tBASE_SATURATION + ( ( index + attempt ) % SATURATION_VARIATION_STEPS ) * SATURATION_INCREMENT;\n\t\tconst lightness =\n\t\t\tBASE_LIGHTNESS + ( ( index + attempt ) % LIGHTNESS_VARIATION_STEPS ) * LIGHTNESS_INCREMENT;\n\n\t\tconst candidateHsl: [ number, number, number ] = [ hue, saturation, lightness ];\n\n\t\t// Check if this color is sufficiently different from existing colors\n\t\tlet isSufficientlyDifferent = true;\n\t\tfor ( const existingHsl of existingHslColors ) {\n\t\t\tif ( getColorDistance( candidateHsl, existingHsl ) < MIN_COLOR_DISTANCE ) {\n\t\t\t\tisSufficientlyDifferent = false;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tif ( isSufficientlyDifferent ) {\n\t\t\treturn `hsl(${ Math.round( hue ) }, ${ saturation }%, ${ lightness }%)`;\n\t\t}\n\t}\n\n\t// Fallback if we couldn't find a sufficiently different color\n\t// Formula: ((base_index) * golden_ratio * 360°) mod 360°\n\t// This ensures mathematically pleasing spacing while maintaining consistency\n\tconst fallbackHue =\n\t\t( ( index - colors.length ) * GOLDEN_RATIO * FULL_HUE_ROTATION_DEGREES ) %\n\t\tFULL_HUE_ROTATION_DEGREES;\n\tconst fallbackSaturation =\n\t\tBASE_SATURATION + ( index % SATURATION_VARIATION_STEPS ) * SATURATION_INCREMENT;\n\tconst fallbackLightness =\n\t\tBASE_LIGHTNESS + ( index % LIGHTNESS_VARIATION_STEPS ) * LIGHTNESS_INCREMENT;\n\treturn `hsl(${ Math.round( fallbackHue ) }, ${ fallbackSaturation }%, ${ fallbackLightness }%)`;\n};\n","import type { CompleteChartTheme } from '../../types';\n\n/**\n * Default theme configuration\n */\nconst defaultTheme: CompleteChartTheme = {\n\tbackgroundColor: '#FFFFFF', // chart background color\n\tlabelBackgroundColor: 'transparent', // label background color (transparent by default)\n\tlabelTextColor: '#FFFFFF', // label text color (white to match original behavior)\n\tcolors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],\n\tgridStyles: {\n\t\tstroke: '#DCDCDE',\n\t\tstrokeWidth: 1,\n\t},\n\ttickLength: 4,\n\tgridColor: '',\n\tgridColorDark: '',\n\txTickLineStyles: { stroke: 'black' },\n\txAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 },\n\tlegendLabelStyles: {\n\t\tcolor: 'var(--jp-gray-80, #2c3338)',\n\t},\n\tlegendContainerStyles: {},\n\tseriesLineStyles: [],\n\tlegendShapeStyles: [],\n\tglyphs: [],\n\tsvgLabelSmall: { fill: 'var(--jp-gray-80, #2c3338)' },\n\tannotationStyles: {\n\t\tlabel: {\n\t\t\tanchorLineStroke: 'var(--jp-gray-80, #2c3338)',\n\t\t\tbackgroundFill: '#fff',\n\t\t},\n\t\tconnector: {\n\t\t\tstroke: 'var(--jp-gray-80, #2c3338)',\n\t\t},\n\t\tcircleSubject: {\n\t\t\tstroke: 'transparent',\n\t\t\tfill: 'var(--jp-gray-80, #2c3338)',\n\t\t\tradius: 5,\n\t\t},\n\t},\n\tleaderboardChart: {\n\t\trowGap: 12,\n\t\tcolumnGap: 4,\n\t\tlabelSpacing: 1.5,\n\t\tdeltaColors: [ '#FF8C8F', '#757575', '#1F9828' ], // [negative, neutral, positive]\n\t},\n\tconversionFunnelChart: {\n\t\tbackgroundColor: '#F3F4F6',\n\t\tpositiveChangeColor: '#1F9828',\n\t\tnegativeChangeColor: '#FF8C8F',\n\t},\n\tlineChart: {\n\t\tlineStyles: {\n\t\t\tcomparison: {\n\t\t\t\tstrokeDasharray: '4 4',\n\t\t\t\tstrokeLinecap: 'square',\n\t\t\t},\n\t\t},\n\t},\n\tsparkline: {\n\t\tmargin: { top: 2, right: 2, bottom: 2, left: 2 },\n\t\tstrokeWidth: 1.5,\n\t},\n};\n\nexport { defaultTheme };\n","import { useContext } from 'react';\nimport { GlobalChartsContext } from '../global-charts-provider';\nimport type { GlobalChartsContextValue } from '../types';\n\nexport const useGlobalChartsContext = (): GlobalChartsContextValue => {\n\tconst context = useContext( GlobalChartsContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'useGlobalChartsContext must be used within a GlobalChartsProvider' );\n\t}\n\treturn context;\n};\n","import { useId } from 'react';\n\nexport const useChartId = ( providedId?: string ): string => {\n\tconst generatedId = useId();\n\treturn providedId || generatedId;\n};\n","import { useEffect, useMemo } from 'react';\nimport { useDeepMemo } from '../../../hooks';\nimport { useGlobalChartsContext } from './use-global-charts-context';\nimport type { BaseLegendItem } from '../../../components/legend';\n\nexport const useChartRegistration = ( {\n\tchartId,\n\tlegendItems,\n\tchartType,\n\tisDataValid,\n\tmetadata,\n}: {\n\tchartId: string;\n\tlegendItems: BaseLegendItem[];\n\tchartType: string;\n\tisDataValid: boolean;\n\tmetadata?: Record< string, unknown >;\n} ): void => {\n\tconst { registerChart, unregisterChart } = useGlobalChartsContext();\n\n\t// Memoize legendItems with deep comparison to prevent infinite loops\n\tconst stableLegendItems = useDeepMemo( legendItems );\n\n\t// Memoize metadata to prevent unnecessary re-renders\n\tconst memoizedMetadata = useMemo( () => metadata, [ metadata ] );\n\n\tuseEffect( () => {\n\t\t// Only register if data is valid\n\t\tif ( isDataValid ) {\n\t\t\tregisterChart( chartId, {\n\t\t\t\tlegendItems: stableLegendItems,\n\t\t\t\tchartType,\n\t\t\t\tmetadata: memoizedMetadata,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tunregisterChart( chartId );\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [\n\t\tchartId,\n\t\tstableLegendItems,\n\t\tchartType,\n\t\tmemoizedMetadata,\n\t\tisDataValid,\n\t\t// Removed registerChart and unregisterChart from dependencies\n\t\t// They are stable functions created with useCallback and empty deps\n\t] );\n};\n","import { useContext } from 'react';\nimport { GlobalChartsContext } from '../global-charts-provider';\nimport { defaultTheme } from '../themes';\nimport type { CompleteChartTheme } from '../../../types';\n\n/**\n * Hook to get the global chart theme from GlobalChartsProvider\n *\n * @return The global chart theme\n */\nexport const useGlobalChartsTheme = (): CompleteChartTheme => {\n\t// Get context but don't throw if it doesn't exist (for testing or standalone usage)\n\tconst context = useContext( GlobalChartsContext );\n\tconst globalTheme = context?.theme;\n\n\treturn globalTheme ?? defaultTheme;\n};\n","import { useMemo } from 'react';\nimport { parseAsLocalDate } from '../utils';\nimport type { SeriesData } from '../types';\n\n/**\n * Hook that transforms and sorts chart data, handling date parsing and sorting\n *\n * This hook extracts the common data transformation logic used in both line-chart\n * and bar-chart components. It:\n * 1. Parses date strings into Date objects using parseAsLocalDate\n * 2. Sorts data points by date when date properties are present\n * 3. Returns the original data unchanged when no date properties are found\n *\n * @param {SeriesData[]} data - The raw chart data to transform\n * @return {SeriesData[]} The transformed and sorted data\n */\nexport const useChartDataTransform = ( data: SeriesData[] ) => {\n\treturn useMemo( () => {\n\t\t// Check if the first data point has date or dateString properties\n\t\tconst firstPoint = data?.[ 0 ]?.data?.[ 0 ];\n\t\tconst hasDateProperties = firstPoint && ( 'date' in firstPoint || 'dateString' in firstPoint );\n\n\t\t// If no date properties found, return data unchanged\n\t\tif ( ! hasDateProperties ) {\n\t\t\treturn data;\n\t\t}\n\n\t\t// Transform and sort data with date properties\n\t\treturn data.map( series => ( {\n\t\t\t...series,\n\t\t\tdata: series.data\n\t\t\t\t.map( point => {\n\t\t\t\t\tlet date: Date | undefined;\n\n\t\t\t\t\tif ( 'date' in point && point.date ) {\n\t\t\t\t\t\tdate = point.date;\n\t\t\t\t\t} else if ( 'dateString' in point && point.dateString ) {\n\t\t\t\t\t\tdate = parseAsLocalDate( point.dateString );\n\t\t\t\t\t}\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...point,\n\t\t\t\t\t\tdate,\n\t\t\t\t\t};\n\t\t\t\t} )\n\t\t\t\t.sort( ( a, b ) => {\n\t\t\t\t\tif ( ! a.date || ! b.date ) return 0;\n\t\t\t\t\treturn a.date.getTime() - b.date.getTime();\n\t\t\t\t} ),\n\t\t} ) );\n\t}, [ data ] );\n};\n","import { createScale, getTicks } from '@visx/scale';\nimport { useMemo } from 'react';\nimport { getLongestTickWidth } from '../utils';\nimport type { BaseChartProps, DataPointDate, SeriesData } from '../types';\nimport type { XYChartTheme } from '@visx/xychart';\n\nexport const useChartMargin = (\n\theight: number,\n\toptions: BaseChartProps[ 'options' ],\n\tdata: SeriesData[],\n\ttheme: XYChartTheme,\n\thorizontal: boolean = false\n) => {\n\tconst yTicks = useMemo( () => {\n\t\tconst allDataPoints = data.flatMap( series => series.data as DataPointDate[] );\n\n\t\tif ( horizontal ) {\n\t\t\t// When horizontal, y ticks renders fixed tick labels.\n\t\t\treturn allDataPoints.map(\n\t\t\t\td => d.label || options.axis?.y?.tickFormat( d.date.getTime(), 0, [] )\n\t\t\t);\n\t\t}\n\n\t\tconst minY = Math.min( ...allDataPoints.map( d => d.value ) );\n\t\tconst maxY = Math.max( ...allDataPoints.map( d => d.value ) );\n\t\tconst yScale = createScale( {\n\t\t\t...options.yScale,\n\t\t\tdomain: [ minY, maxY ],\n\t\t\trange: [ height, 0 ],\n\t\t} );\n\n\t\treturn getTicks( yScale, options.axis?.y?.numTicks );\n\t}, [ options, data, height, horizontal ] );\n\n\treturn useMemo( () => {\n\t\t// Default margin is for bottom axis labels.\n\t\tconst defaultMargin = { top: 10, right: 20, bottom: 20, left: 20 };\n\t\tconst defaultTickWidth = 40;\n\n\t\t// Auto-calculate margin for y axis labels based on orientation and tick width.\n\t\tconst yAxisOrientation = options.axis?.y?.orientation;\n\t\tconst yAxisStyles =\n\t\t\tyAxisOrientation === 'right' ? theme.axisStyles.y.right : theme.axisStyles.y.left;\n\t\tconst yTickWidth = getLongestTickWidth(\n\t\t\tyTicks,\n\t\t\toptions.axis?.y?.tickFormat,\n\t\t\tyAxisStyles.axisLabel\n\t\t);\n\t\tconst yMarginValue = ( yTickWidth ?? defaultTickWidth ) + ( yAxisStyles?.tickLength ?? 0 );\n\n\t\tif ( yAxisOrientation === 'right' ) {\n\t\t\tdefaultMargin.right = yMarginValue;\n\t\t} else {\n\t\t\tdefaultMargin.left = yMarginValue;\n\t\t}\n\n\t\tif ( options.axis?.x?.orientation === 'top' ) {\n\t\t\tdefaultMargin.top = 20;\n\t\t\tdefaultMargin.bottom = 10;\n\t\t}\n\n\t\treturn defaultMargin;\n\t}, [ options, theme, yTicks ] );\n};\n","import { useState, useCallback, useRef } from 'react';\n\n/**\n * Hook to measure the height of a DOM element.\n * Returns a ref to attach to the element and the current height in pixels.\n *\n * @param {object} props               - Optional props.\n * @param {number} props.initialHeight - The initial height to use.\n *\n * @return {[Function, number]} A tuple containing a ref to attach to the element and the current height in pixels\n */\nexport function useElementHeight< T extends HTMLElement = HTMLDivElement >( {\n\tinitialHeight = 0,\n}: {\n\tinitialHeight?: number;\n} = {} ): [ ( node: T | null ) => void, number ] {\n\tconst [ height, setHeight ] = useState( initialHeight );\n\tconst observerRef = useRef< ResizeObserver | null >( null );\n\n\tconst refCallback = useCallback( ( node: T | null ) => {\n\t\tif ( observerRef.current ) {\n\t\t\tobserverRef.current.disconnect();\n\t\t\tobserverRef.current = null;\n\t\t}\n\t\tif ( node ) {\n\t\t\tconst handleResize = () => {\n\t\t\t\tsetHeight( node.getBoundingClientRect().height || 0 );\n\t\t\t};\n\t\t\thandleResize();\n\t\t\tconst resizeObserver = new window.ResizeObserver( handleResize );\n\t\t\tresizeObserver.observe( node );\n\t\t\tobserverRef.current = resizeObserver;\n\t\t}\n\t}, [] );\n\n\treturn [ refCallback, height ];\n}\n","import { useCallback, useRef, useState } from 'react';\n\n/**\n * Hook to detect if text content is truncated within its container.\n * Uses ResizeObserver to dynamically track changes in element size.\n *\n * @param enabled - Whether truncation detection should be active. Defaults to true.\n * @return A tuple containing:\n * - [0] refCallback: Function to attach to the text element as a ref\n * - [1] isTruncated: Boolean indicating if the text is currently truncated\n *\n * @example\n * ```tsx\n * const [textRef, isTruncated] = useTextTruncation(true);\n *\n * return (\n *   <span ref={textRef} title={isTruncated ? fullText : undefined}>\n *     {text}\n *   </span>\n * );\n * ```\n */\nexport function useTextTruncation(\n\tenabled: boolean = true\n): [ ( node: HTMLElement | null ) => void, boolean ] {\n\tconst [ isTruncated, setIsTruncated ] = useState( false );\n\tconst observerRef = useRef< ResizeObserver | null >( null );\n\n\tconst refCallback = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\t// Cleanup existing observer\n\t\t\tif ( observerRef.current ) {\n\t\t\t\tobserverRef.current.disconnect();\n\t\t\t\tobserverRef.current = null;\n\t\t\t}\n\n\t\t\tif ( node && enabled ) {\n\t\t\t\tconst checkTruncation = () => {\n\t\t\t\t\t// Check if content width exceeds container width (indicates truncation)\n\t\t\t\t\tconst truncated = node.scrollWidth > node.clientWidth;\n\t\t\t\t\tsetIsTruncated( truncated );\n\t\t\t\t};\n\n\t\t\t\t// Initial check\n\t\t\t\tcheckTruncation();\n\n\t\t\t\t// Watch for size changes\n\t\t\t\tconst resizeObserver = new ResizeObserver( checkTruncation );\n\t\t\t\tresizeObserver.observe( node );\n\t\t\t\tobserverRef.current = resizeObserver;\n\t\t\t} else {\n\t\t\t\tsetIsTruncated( false );\n\t\t\t}\n\t\t},\n\t\t[ enabled ]\n\t);\n\n\treturn [ refCallback, isTruncated ];\n}\n","import { useMemo } from 'react';\nimport type { SeriesData, DataPointDate } from '../types';\n\nexport type EnhancedDataPoint = DataPointDate & {\n\tvisualValue?: number;\n};\n\nexport interface EnhancedSeriesData extends Omit< SeriesData, 'data' > {\n\tdata: EnhancedDataPoint[];\n}\n\nexport interface UseZeroValueDisplayOptions {\n\tenabled: boolean;\n\tminValueRatio?: number;\n\tmaxValueRatio?: number;\n}\n\nexport const useZeroValueDisplay = (\n\tdata: SeriesData[],\n\toptions: UseZeroValueDisplayOptions = { enabled: false }\n): SeriesData[] | EnhancedSeriesData[] => {\n\tconst { enabled, minValueRatio = 0.6, maxValueRatio = 0.008 } = options;\n\n\treturn useMemo( () => {\n\t\tif ( ! enabled ) return data;\n\n\t\t// Collect all non-zero, non-null values (both positive and negative)\n\t\tconst nonZeroValues: number[] = [];\n\n\t\tfor ( const series of data ) {\n\t\t\tfor ( const point of series.data ) {\n\t\t\t\tif ( point.value !== null && point.value !== 0 ) {\n\t\t\t\t\tnonZeroValues.push( point.value );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif ( nonZeroValues.length === 0 ) return data;\n\n\t\t// Convert to absolute values to find the range\n\t\tconst absoluteValues = nonZeroValues.map( Math.abs );\n\n\t\t// Calculate min and max based on absolute values\n\t\tconst minAbsoluteValue = Math.min( ...absoluteValues );\n\t\tconst maxAbsoluteValue = Math.max( ...absoluteValues );\n\n\t\t// Calculate minimum visible value using absolute range\n\t\tconst minVisibleValue = Math.min(\n\t\t\tminAbsoluteValue * minValueRatio,\n\t\t\tmaxAbsoluteValue * maxValueRatio\n\t\t);\n\n\t\treturn data.map( series => ( {\n\t\t\t...series,\n\t\t\tdata: series.data.map( ( point ): EnhancedDataPoint => {\n\t\t\t\tif ( point.value === 0 ) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...point,\n\t\t\t\t\t\tvisualValue: minVisibleValue,\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\treturn point;\n\t\t\t} ),\n\t\t} ) );\n\t}, [ data, enabled, minValueRatio, maxValueRatio ] );\n};\n","import { useMemo } from 'react';\n\n/**\n * Data point interface for charts with interactive legends.\n * Requires label for series identification, value for calculations, and percentage for display.\n */\ninterface DataPointWithPercentage {\n\tlabel: string;\n\tvalue: number;\n\tpercentage: number;\n}\n\n/**\n * Parameters for the useInteractiveLegendData hook.\n */\ninterface UseInteractiveLegendDataParams< T extends DataPointWithPercentage > {\n\t/** The chart data to filter based on legend visibility */\n\tdata: T[];\n\t/** Unique chart identifier, required for interactive legends */\n\tchartId: string | undefined;\n\t/** Whether interactive legend filtering is enabled */\n\tlegendInteractive: boolean;\n\t/** Function to check if a series is visible in the legend */\n\tisSeriesVisible: ( chartId: string, label: string ) => boolean;\n}\n\n/**\n * Return value from the useInteractiveLegendData hook.\n */\ninterface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {\n\t/** Filtered data array containing only visible segments with recalculated percentages */\n\tvisibleData: T[];\n\t/** Boolean indicating if all segments are hidden */\n\tallSegmentsHidden: boolean;\n\t/**\n\t * Legend data with recalculated percentages for visible items.\n\t * Uses original data for hidden items, but shows recalculated percentages for visible ones.\n\t * This ensures the legend displays accurate percentages while maintaining all entries.\n\t */\n\tlegendData: T[];\n}\n\n/**\n * Custom hook to filter and recalculate chart data for interactive legends.\n *\n * When interactive legends are enabled, this hook:\n * 1. Filters data to show only visible series based on legend selection\n * 2. Recalculates percentages so visible segments total 100%\n * 3. Tracks whether all segments are hidden to show empty state\n *\n * This is particularly useful for pie charts, donut charts, and semi-circle charts\n * where segment visibility and percentages need to be dynamically adjusted.\n *\n * @example\n * ```tsx\n * const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({\n *   data: chartData,\n *   chartId: 'my-pie-chart',\n *   legendInteractive: true,\n *   isSeriesVisible: (id, label) => context.isSeriesVisible(id, label),\n * });\n *\n * // Use legendData for creating legend items (shows recalculated percentages)\n * const legendItems = useChartLegendItems(legendData, legendOptions);\n *\n * if (allSegmentsHidden) {\n *   return <EmptyState />;\n * }\n *\n * // Use visibleData for rendering the chart (only visible segments)\n * return <PieChart data={visibleData} />;\n * ```\n *\n * @param params                   - Configuration object for the hook\n * @param params.data              - The chart data to filter\n * @param params.chartId           - Unique identifier for the chart (required for interactive mode)\n * @param params.legendInteractive - Whether to enable interactive filtering\n * @param params.isSeriesVisible   - Function to check series visibility\n * @return Object containing visibleData, allSegmentsHidden flag, and legendData with recalculated percentages\n */\nexport const useInteractiveLegendData = < T extends DataPointWithPercentage >( {\n\tdata,\n\tchartId,\n\tlegendInteractive,\n\tisSeriesVisible,\n}: UseInteractiveLegendDataParams< T > ): UseInteractiveLegendDataResult< T > => {\n\t// Filter and recalculate data for interactive legends\n\tconst visibleData = useMemo( () => {\n\t\t// If interactive mode is disabled or no chartId, return all data unchanged\n\t\tif ( ! chartId || ! legendInteractive ) {\n\t\t\treturn data;\n\t\t}\n\n\t\t// Filter to only visible segments based on legend state\n\t\tconst filtered = data.filter( segment => isSeriesVisible( chartId, segment.label ) );\n\n\t\t// If no segments are visible, return empty array\n\t\tif ( filtered.length === 0 ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t// Recalculate percentages so visible segments total 100%\n\t\tconst totalValue = filtered.reduce( ( sum, segment ) => sum + segment.value, 0 );\n\n\t\treturn filtered.map( segment => ( {\n\t\t\t...segment,\n\t\t\tpercentage: totalValue > 0 ? ( segment.value / totalValue ) * 100 : 0,\n\t\t} ) );\n\t}, [ data, chartId, isSeriesVisible, legendInteractive ] );\n\n\t// Check if all segments are hidden (only relevant in interactive mode)\n\tconst allSegmentsHidden = useMemo( () => {\n\t\treturn legendInteractive && visibleData.length === 0;\n\t}, [ legendInteractive, visibleData ] );\n\n\t// Prepare legend data with recalculated percentages for visible items\n\t// This maintains all legend entries but shows updated percentages for visible segments\n\tconst legendData = useMemo( () => {\n\t\tif ( ! legendInteractive || ! chartId ) {\n\t\t\treturn data;\n\t\t}\n\n\t\t// Map original data to show recalculated percentages for visible items\n\t\treturn data.map( segment => {\n\t\t\tconst isVisible = isSeriesVisible( chartId, segment.label );\n\t\t\tif ( ! isVisible ) {\n\t\t\t\t// Return original data for hidden items\n\t\t\t\treturn segment;\n\t\t\t}\n\n\t\t\t// For visible items, find the recalculated percentage from visibleData\n\t\t\tconst recalculated = visibleData.find( d => d.label === segment.label );\n\t\t\treturn recalculated || segment;\n\t\t} );\n\t}, [ data, visibleData, legendInteractive, chartId, isSeriesVisible ] );\n\n\treturn { visibleData, allSegmentsHidden, legendData };\n};\n","import { useState, useEffect } from 'react';\n\n// 'no-preference' returns false in unsupported browsers,\n// causing a safe fallback to reduced motion instead of animating.\nconst QUERY = '(prefers-reduced-motion: no-preference)';\n\nconst getInitialState = () => ! window.matchMedia( QUERY ).matches;\n\n/**\n * Custom hook to determine if the user prefers reduced motion.\n * @return {boolean} A boolean indicating the user's preference for reduced motion.\n */\nexport function usePrefersReducedMotion() {\n\tconst [ prefersReducedMotion, setPrefersReducedMotion ] = useState( getInitialState );\n\n\tuseEffect( () => {\n\t\tconst mediaQueryList = window.matchMedia( QUERY );\n\n\t\tconst listener = event => {\n\t\t\tsetPrefersReducedMotion( ! event.matches );\n\t\t};\n\n\t\tmediaQueryList.addEventListener( 'change', listener );\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener( 'change', listener );\n\t\t};\n\t}, [] );\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"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","names":["useMemo","useCallback","useRef","useRef","useCallback","useEffect","useMemo","useMemo","useEffect","useContext","useContext","useMemo","useMemo","useMemo","useMemo","useMemo","useState","useCallback","useRef","useCallback","useRef","useState","useMemo","useMemo","useState","useEffect"]}

package/dist/{chunk-SLO4NLKC.cjs → chunk-VEJIPJN7.cjs}

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunk5NI3TGRDcjs = require('./chunk-5NI3TGRD.cjs');
 
+var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
 
 
+var _chunkMUUSZ7J5cjs = require('./chunk-MUUSZ7J5.cjs');
 
 
-var _chunkBZQFCAX7cjs = require('./chunk-BZQFCAX7.cjs');
 
 
 
-var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
+var _chunk67BAKCI2cjs = require('./chunk-67BAKCI2.cjs');
 
 
 
@@ -23,13 +23,13 @@ var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
 
 
 
-var _chunkN4ZDNOPYcjs = require('./chunk-N4ZDNOPY.cjs');
+var _chunk44EBMDFIcjs = require('./chunk-44EBMDFI.cjs');
 
 
 
 var _chunkFI5B6KSHcjs = require('./chunk-FI5B6KSH.cjs');
 
-// src/components/line-chart/line-chart.tsx
+// src/charts/line-chart/line-chart.tsx
 var _numberformatters = require('@automattic/number-formatters');
 var _curve = require('@visx/curve');
 var _gradient = require('@visx/gradient');
@@ -40,7 +40,7 @@ var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
 var _datefns = require('date-fns');
 var _react = require('react');
 
-// src/components/private/default-glyph/default-glyph.tsx
+// src/charts/private/default-glyph/default-glyph.tsx
 
 
 var _jsxruntime = require('react/jsx-runtime');
@@ -63,28 +63,28 @@ var DefaultGlyph = (props) => {
   );
 };
 
-// src/components/line-chart/line-chart.module.scss
+// src/charts/line-chart/line-chart.module.scss
 var line_chart_module_default = {
-  "line-chart": "a8ccharts-ITM3dm",
-  "line-chart--animated": "a8ccharts-fXvEBi",
-  "rise": "a8ccharts-gb7M8E",
-  "line-chart--legend-top": "a8ccharts-zQLTUG",
-  "line-chart__tooltip": "a8ccharts-aqcmeq",
-  "line-chart__annotation-label-popover": "a8ccharts-TqNZkh",
-  "line-chart__tooltip-date": "a8ccharts-4Dzab-",
-  "line-chart__tooltip-row": "a8ccharts-6A37Gb",
-  "line-chart__tooltip-label": "a8ccharts-IvnFFF",
-  "line-chart__annotations-overlay": "a8ccharts-4nR2pv",
-  "line-chart__annotation-label": "a8ccharts-OmgiTA",
-  "line-chart__annotation-label-trigger-button": "a8ccharts-mcIb3E",
-  "line-chart__annotation-label-popover--visible": "a8ccharts-dE0cVP",
-  "line-chart__annotation-label-popover--safari": "a8ccharts-i3NHTh",
-  "line-chart__annotation-label-popover-header": "a8ccharts-OwypoS",
-  "line-chart__annotation-label-popover-content": "a8ccharts-vtgQtP",
-  "line-chart__annotation-label-popover-close-button": "a8ccharts-i8KUcG"
+  "line-chart": "a8ccharts-v-oO8E",
+  "line-chart--animated": "a8ccharts-QrkuTW",
+  "rise": "a8ccharts--rxDU3",
+  "line-chart--legend-top": "a8ccharts-3l-pKy",
+  "line-chart__tooltip": "a8ccharts-Tu0rR-",
+  "line-chart__annotation-label-popover": "a8ccharts--RSWXi",
+  "line-chart__tooltip-date": "a8ccharts-Q-b5A1",
+  "line-chart__tooltip-row": "a8ccharts-19N7T9",
+  "line-chart__tooltip-label": "a8ccharts-HOAXrD",
+  "line-chart__annotations-overlay": "a8ccharts-rQiY8O",
+  "line-chart__annotation-label": "a8ccharts-8AKWOe",
+  "line-chart__annotation-label-trigger-button": "a8ccharts-7mh3Cl",
+  "line-chart__annotation-label-popover--visible": "a8ccharts-VAeVuJ",
+  "line-chart__annotation-label-popover--safari": "a8ccharts-TEe-iV",
+  "line-chart__annotation-label-popover-header": "a8ccharts-LAUpx7",
+  "line-chart__annotation-label-popover-content": "a8ccharts-b76gEu",
+  "line-chart__annotation-label-popover-close-button": "a8ccharts-LIpFoS"
 };
 
-// src/components/line-chart/private/line-chart-annotation-label-popover.tsx
+// src/charts/line-chart/private/line-chart-annotation-label-popover.tsx
 
 
 var _gridicons = require('gridicons'); var _gridicons2 = _interopRequireDefault(_gridicons);
@@ -175,12 +175,12 @@ var LineChartAnnotationLabelWithPopover = ({
 };
 var line_chart_annotation_label_popover_default = LineChartAnnotationLabelWithPopover;
 
-// src/components/line-chart/private/line-chart-annotations-overlay.tsx
+// src/charts/line-chart/private/line-chart-annotations-overlay.tsx
 
 
 
 var LineChartAnnotationsOverlay = ({ children }) => {
-  const { chartRef, chartWidth, chartHeight } = _chunkBZQFCAX7cjs.useSingleChartContext.call(void 0, );
+  const { chartRef, chartWidth, chartHeight } = _chunk67BAKCI2cjs.useSingleChartContext.call(void 0, );
   const [scales, setScales] = _react.useState.call(void 0, null);
   const [scalesStable, setScalesStable] = _react.useState.call(void 0, false);
   const createScaleSignature = _react.useCallback.call(void 0, (scaleData) => {
@@ -264,7 +264,7 @@ var LineChartAnnotationsOverlay = ({ children }) => {
 };
 var line_chart_annotations_overlay_default = LineChartAnnotationsOverlay;
 
-// src/components/line-chart/private/line-chart-annotation.tsx
+// src/charts/line-chart/private/line-chart-annotation.tsx
 
 
 
@@ -359,7 +359,7 @@ var LineChartAnnotation = ({
   renderLabel,
   renderLabelPopover
 }) => {
-  const providerTheme = _chunkN4ZDNOPYcjs.useGlobalChartsTheme.call(void 0, );
+  const providerTheme = _chunk44EBMDFIcjs.useGlobalChartsTheme.call(void 0, );
   const { xScale, yScale } = _react.useContext.call(void 0, _xychart.DataContext) || {};
   const labelRef = _react.useRef.call(void 0, null);
   const [height, setHeight] = _react.useState.call(void 0, null);
@@ -478,7 +478,7 @@ var LineChartAnnotation = ({
 };
 var line_chart_annotation_default = LineChartAnnotation;
 
-// src/components/line-chart/private/line-chart-glyph.tsx
+// src/charts/line-chart/private/line-chart-glyph.tsx
 
 
 var toNumber = (val) => {
@@ -516,7 +516,7 @@ var LineChartGlyph = ({
 };
 var line_chart_glyph_default = LineChartGlyph;
 
-// src/components/line-chart/line-chart.tsx
+// src/charts/line-chart/line-chart.tsx
 
 
 var X_TICK_WIDTH = 60;
@@ -692,12 +692,13 @@ var LineChartInternal = _react.forwardRef.call(void 0,
     onPointerUp = void 0,
     onPointerMove = void 0,
     onPointerOut = void 0,
-    children
+    children,
+    gridVisibility
   }, ref) => {
-    const providerTheme = _chunkN4ZDNOPYcjs.useGlobalChartsTheme.call(void 0, );
-    const theme = _chunkN4ZDNOPYcjs.useXYChartTheme.call(void 0, data);
-    const chartId = _chunkN4ZDNOPYcjs.useChartId.call(void 0, providedChartId);
-    const [legendRef, legendHeight] = _chunkN4ZDNOPYcjs.useElementHeight.call(void 0, );
+    const providerTheme = _chunk44EBMDFIcjs.useGlobalChartsTheme.call(void 0, );
+    const theme = _chunk44EBMDFIcjs.useXYChartTheme.call(void 0, data);
+    const chartId = _chunk44EBMDFIcjs.useChartId.call(void 0, providedChartId);
+    const [legendRef, legendHeight] = _chunk44EBMDFIcjs.useElementHeight.call(void 0, );
     const chartRef = _react.useRef.call(void 0, null);
     const [selectedIndex, setSelectedIndex] = _react.useState.call(void 0, void 0);
     const [isNavigating, setIsNavigating] = _react.useState.call(void 0, false);
@@ -710,8 +711,8 @@ var LineChartInternal = _react.forwardRef.call(void 0,
       }),
       [internalChartRef]
     );
-    const dataSorted = _chunkN4ZDNOPYcjs.useChartDataTransform.call(void 0, data);
-    const { getElementStyles, isSeriesVisible } = _chunkN4ZDNOPYcjs.useGlobalChartsContext.call(void 0, );
+    const dataSorted = _chunk44EBMDFIcjs.useChartDataTransform.call(void 0, data);
+    const { getElementStyles, isSeriesVisible } = _chunk44EBMDFIcjs.useGlobalChartsContext.call(void 0, );
     const seriesWithVisibility = _react.useMemo.call(void 0, () => {
       if (!chartId || !legendInteractive) {
         return dataSorted.map((series, index) => ({ series, index, isVisible: true }));
@@ -741,12 +742,14 @@ var LineChartInternal = _react.forwardRef.call(void 0,
             orientation: "bottom",
             numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
             tickFormat: formatter,
+            display: true,
             ..._optionalChain([options, 'optionalAccess', _60 => _60.axis, 'optionalAccess', _61 => _61.x])
           },
           y: {
             orientation: "left",
             numTicks: 4,
             tickFormat: _numberformatters.formatNumberCompact,
+            display: true,
             ..._optionalChain([options, 'optionalAccess', _62 => _62.axis, 'optionalAccess', _63 => _63.y])
           }
         },
@@ -776,7 +779,7 @@ var LineChartInternal = _react.forwardRef.call(void 0,
         return themeGlyph ? themeGlyph(propsWithResolvedColor) : renderGlyph(propsWithResolvedColor);
       };
     }, [dataSorted, renderGlyph, getElementStyles]);
-    const defaultMargin = _chunkN4ZDNOPYcjs.useChartMargin.call(void 0, height, chartOptions, dataSorted, theme);
+    const defaultMargin = _chunk44EBMDFIcjs.useChartMargin.call(void 0, height, chartOptions, dataSorted, theme);
     const error = validateData(dataSorted);
     const isDataValid = !error;
     const legendOptions = _react.useMemo.call(void 0, 
@@ -787,7 +790,7 @@ var LineChartInternal = _react.forwardRef.call(void 0,
       }),
       [withLegendGlyph, _optionalChain([glyphStyle, 'optionalAccess', _67 => _67.radius]), renderGlyph]
     );
-    const legendItems = _chunkBZQFCAX7cjs.useChartLegendItems.call(void 0, dataSorted, legendOptions, legendShape);
+    const legendItems = _chunk67BAKCI2cjs.useChartLegendItems.call(void 0, dataSorted, legendOptions, legendShape);
     const chartMetadata = _react.useMemo.call(void 0, 
       () => ({
         withGradientFill,
@@ -799,14 +802,14 @@ var LineChartInternal = _react.forwardRef.call(void 0,
       }),
       [withGradientFill, smoothing, curveType, withStartGlyphs, withEndGlyphs, withLegendGlyph]
     );
-    _chunkN4ZDNOPYcjs.useChartRegistration.call(void 0, {
+    _chunk44EBMDFIcjs.useChartRegistration.call(void 0, {
       chartId,
       legendItems,
       chartType: "line",
       isDataValid,
       metadata: chartMetadata
     });
-    const prefersReducedMotion = _chunkN4ZDNOPYcjs.usePrefersReducedMotion.call(void 0, );
+    const prefersReducedMotion = _chunk44EBMDFIcjs.usePrefersReducedMotion.call(void 0, );
     const accessors = {
       xAccessor: (d) => _optionalChain([d, 'optionalAccess', _68 => _68.date]),
       yAccessor: (d) => _optionalChain([d, 'optionalAccess', _69 => _69.value])
@@ -815,7 +818,7 @@ var LineChartInternal = _react.forwardRef.call(void 0,
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _clsx2.default.call(void 0, "line-chart", line_chart_module_default["line-chart"]), children: error });
     }
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkBZQFCAX7cjs.SingleChartContext.Provider,
+      _chunk67BAKCI2cjs.SingleChartContext.Provider,
       {
         value: {
           chartId,
@@ -868,9 +871,9 @@ var LineChartInternal = _react.forwardRef.call(void 0,
                       onPointerOut,
                       pointerEventsDataKey: "nearest",
                       children: [
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Grid, { columns: false, numTicks: 4 }),
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, { ...chartOptions.axis.x }),
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, { ...chartOptions.axis.y }),
+                        gridVisibility !== "none" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Grid, { columns: false, numTicks: 4 }),
+                        chartOptions.axis.x.display && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, { ...chartOptions.axis.x }),
+                        chartOptions.axis.y.display && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, { ...chartOptions.axis.y }),
                         allSeriesHidden ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                           "text",
                           {
@@ -993,7 +996,7 @@ var LineChartInternal = _react.forwardRef.call(void 0,
                 }
               ),
               showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkBZQFCAX7cjs.Legend,
+                _chunk67BAKCI2cjs.Legend,
                 {
                   orientation: legendOrientation,
                   alignment: legendAlignment,
@@ -1017,22 +1020,22 @@ var LineChartInternal = _react.forwardRef.call(void 0,
   }
 );
 var LineChartWithProvider = _react.forwardRef.call(void 0, (props, ref) => {
-  const existingContext = _react.useContext.call(void 0, _chunkN4ZDNOPYcjs.GlobalChartsContext);
+  const existingContext = _react.useContext.call(void 0, _chunk44EBMDFIcjs.GlobalChartsContext);
   if (existingContext) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LineChartInternal, { ...props, ref });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN4ZDNOPYcjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LineChartInternal, { ...props, ref }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk44EBMDFIcjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LineChartInternal, { ...props, ref }) });
 });
 LineChartWithProvider.displayName = "LineChart";
 var LineChart = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0, LineChartWithProvider, {
-  Legend: _chunkBZQFCAX7cjs.Legend,
+  Legend: _chunk67BAKCI2cjs.Legend,
   AnnotationsOverlay: line_chart_annotations_overlay_default,
   Annotation: line_chart_annotation_default
 });
 var LineChartResponsive = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0, 
-  _chunk5NI3TGRDcjs.withResponsive.call(void 0, LineChartWithProvider),
+  _chunkMUUSZ7J5cjs.withResponsive.call(void 0, LineChartWithProvider),
   {
-    Legend: _chunkBZQFCAX7cjs.Legend,
+    Legend: _chunk67BAKCI2cjs.Legend,
     AnnotationsOverlay: line_chart_annotations_overlay_default,
     Annotation: line_chart_annotation_default
   }
@@ -1042,4 +1045,4 @@ var LineChartResponsive = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0,
 
 
 exports.LineChart = LineChart; exports.LineChartResponsive = LineChartResponsive;
-//# sourceMappingURL=chunk-SLO4NLKC.cjs.map
+//# sourceMappingURL=chunk-VEJIPJN7.cjs.map

package/dist/chunk-VEJIPJN7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-VEJIPJN7.cjs","../src/charts/line-chart/line-chart.tsx","../src/charts/private/default-glyph/default-glyph.tsx","../src/charts/line-chart/line-chart.module.scss","../src/charts/line-chart/private/line-chart-annotation-label-popover.tsx","../src/charts/line-chart/private/line-chart-annotations-overlay.tsx","../src/charts/line-chart/private/line-chart-annotation.tsx","../src/charts/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-VEJIPJN7.cjs","sourcesContent":[null,"import { formatNumberCompact, formatNumber } from '@automattic/number-formatters';\nimport { curveCatmullRom, curveLinear, curveMonotoneX } from '@visx/curve';\nimport { LinearGradient } from '@visx/gradient';\nimport { scaleTime } from '@visx/scale';\nimport { XYChart, AreaSeries, Grid, Axis, DataContext } from '@visx/xychart';\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { differenceInHours, differenceInYears } from 'date-fns';\nimport { useMemo, useContext, forwardRef, useImperativeHandle, useState, useRef } from 'react';\nimport { Legend, useChartLegendItems } from '../../components/legend';\nimport { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';\nimport {\n\tuseXYChartTheme,\n\tuseChartDataTransform,\n\tuseChartMargin,\n\tuseElementHeight,\n\tusePrefersReducedMotion,\n} from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tGlobalChartsContext,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n} from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { DefaultGlyph } from '../private/default-glyph';\nimport { SingleChartContext, type SingleChartRef } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './line-chart.module.scss';\nimport { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';\nimport type { CurveType, RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';\nimport type { DataPoint, DataPointDate, SeriesData, Optional } from '../../types';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { TickFormatter } from '@visx/axis';\nimport type { GlyphProps } from '@visx/xychart';\nimport type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';\nimport type { FC, Ref } from 'react';\n\nconst X_TICK_WIDTH = 60;\n\nconst defaultRenderGlyph = < Datum extends object >( props: RenderLineGlyphProps< Datum > ) => {\n\treturn <DefaultGlyph { ...props } key={ props.key } />;\n};\n\nconst toNumber = ( val?: number | string | null ): number | undefined => {\n\tconst num = typeof val === 'number' ? val : parseFloat( val );\n\treturn isNaN( num ) ? undefined : num;\n};\n\n/**\n * Determines the curve type for the line chart based on the provided type and smoothing parameters\n *\n * @param {CurveType} type      - The explicit curve type to use\n * @param {boolean}   smoothing - Legacy smoothing parameter\n * @return The curve function to use for the line\n */\nconst getCurveType = ( type?: CurveType, smoothing?: boolean ) => {\n\t// If no type specified, use legacy smoothing behavior\n\tif ( ! type ) {\n\t\treturn smoothing ? curveCatmullRom : curveLinear;\n\t}\n\n\t// Handle explicit curve types\n\tswitch ( type ) {\n\t\tcase 'smooth':\n\t\t\treturn curveCatmullRom;\n\t\tcase 'monotone':\n\t\t\treturn curveMonotoneX;\n\t\tcase 'linear':\n\t\t\treturn curveLinear;\n\t\tdefault:\n\t\t\treturn curveLinear;\n\t}\n};\n\nconst renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) => {\n\tconst { tooltipData } = params;\n\tconst nearestDatum = tooltipData?.nearestDatum?.datum;\n\tif ( ! nearestDatum ) return null;\n\n\tconst tooltipPoints: TooltipDatum[] = Object.entries( tooltipData?.datumByKey || {} )\n\t\t.map( ( [ key, { datum } ] ) => ( {\n\t\t\tkey,\n\t\t\tvalue: datum.value as number,\n\t\t} ) )\n\t\t.sort( ( a, b ) => b.value - a.value );\n\n\treturn (\n\t\t<div className={ styles[ 'line-chart__tooltip' ] }>\n\t\t\t<div className={ styles[ 'line-chart__tooltip-date' ] }>\n\t\t\t\t{ nearestDatum.date?.toLocaleDateString() }\n\t\t\t</div>\n\t\t\t{ tooltipPoints.map( point => (\n\t\t\t\t<div key={ point.key } className={ styles[ 'line-chart__tooltip-row' ] }>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-label' ] }>{ point.key }:</span>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-value' ] }>\n\t\t\t\t\t\t{ formatNumber( point.value ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t</div>\n\t);\n};\n\nconst formatYearTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleDateString( undefined, {\n\t\tyear: 'numeric',\n\t} );\n};\n\nconst formatDateTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleDateString( undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t} );\n};\n\nconst formatHourTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleTimeString( undefined, {\n\t\thour: 'numeric',\n\t\thour12: true,\n\t} );\n};\n\nconst getFormatter = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {\n\tconst minX = Math.min( ...sortedData.map( datom => datom.data.at( 0 )?.date ) );\n\tconst maxX = Math.max( ...sortedData.map( datom => datom.data.at( -1 )?.date ) );\n\n\tconst diffInHours = Math.abs( differenceInHours( maxX, minX ) );\n\tif ( diffInHours <= 24 ) {\n\t\treturn formatHourTick;\n\t}\n\n\tconst diffInYears = Math.abs( differenceInYears( maxX, minX ) );\n\tif ( diffInYears <= 1 ) {\n\t\treturn formatDateTick;\n\t}\n\n\treturn formatYearTick;\n};\n\nconst guessOptimalNumTicks = (\n\tdata: ReturnType< typeof useChartDataTransform >,\n\tchartWidth: number,\n\ttickFormatter: ( timestamp: number, index?: number, values?: unknown ) => 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(\n\t\tdata[ 0 ]?.data.length || 3, // A sane fallback to avoid NaN when no data is present\n\t\tMath.ceil( chartWidth / X_TICK_WIDTH )\n\t);\n\tlet secondBestGuess = 1; // a tick number that's no greater than upperBound\n\n\tfor ( let numTicks = upperBound; numTicks > 1; --numTicks ) {\n\t\tconst ticks = xScale.ticks( numTicks ).map( d => tickFormatter( d.getTime() ) );\n\n\t\t// The .ticks() function doesn't properly respect the requested number of ticks, so we need to check the length\n\t\tif ( ticks.length > upperBound ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tsecondBestGuess = Math.max( secondBestGuess, ticks.length );\n\n\t\tconst uniqueTicks = Array.from( new Set( ticks ) );\n\t\tif ( uniqueTicks.length === 1 ) {\n\t\t\t// All ticks are the same, so skip further processing\n\t\t\treturn 1;\n\t\t}\n\n\t\t// Example: OCT 1 JAN 1 APR 1 JUL 1 OCT 1\n\t\t// Here, the two OCTs are not duplicates as they represent October of two different years.\n\t\tconst hasConsecutiveDuplicate = ticks.some(\n\t\t\t( tick, idx ) => idx > 0 && tick === ticks[ idx - 1 ]\n\t\t);\n\n\t\tif ( hasConsecutiveDuplicate ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\treturn ticks.length;\n\t}\n\n\treturn secondBestGuess;\n};\n\nconst validateData = ( data: SeriesData[] ) => {\n\tif ( ! data?.length ) return 'No data available';\n\n\tconst hasInvalidData = data.some( series =>\n\t\tseries.data.some(\n\t\t\t( point: DataPointDate | DataPoint ) =>\n\t\t\t\tisNaN( point.value as number ) ||\n\t\t\t\tpoint.value === null ||\n\t\t\t\tpoint.value === undefined ||\n\t\t\t\t( 'date' in point && point.date && isNaN( point.date.getTime() ) )\n\t\t)\n\t);\n\n\tif ( hasInvalidData ) return 'Invalid data';\n\treturn null;\n};\n\n// Inner component to access DataContext and provide scale data to ref\nconst LineChartScalesRef: FC< {\n\tchartRef?: Ref< SingleChartRef >;\n\twidth: number;\n\theight: number;\n\tmargin?: { top?: number; right?: number; bottom?: number; left?: number };\n} > = ( { chartRef, width, height, margin } ) => {\n\tconst context = useContext( DataContext );\n\n\tuseImperativeHandle(\n\t\tchartRef,\n\t\t() => ( {\n\t\t\tgetScales: () => {\n\t\t\t\tif ( ! context?.xScale || ! context?.yScale ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\txScale: context.xScale,\n\t\t\t\t\tyScale: context.yScale,\n\t\t\t\t};\n\t\t\t},\n\t\t\tgetChartDimensions: () => ( {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t\tmargin: margin || {},\n\t\t\t} ),\n\t\t} ),\n\t\t[ context, width, height, margin ]\n\t);\n\n\treturn null; // This component only provides the ref interface\n};\n\nconst LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(\n\t(\n\t\t{\n\t\t\tdata,\n\t\t\tchartId: providedChartId,\n\t\t\twidth,\n\t\t\theight,\n\t\t\tclassName,\n\t\t\tmargin,\n\t\t\twithTooltips = true,\n\t\t\twithTooltipCrosshairs,\n\t\t\tshowLegend = false,\n\t\t\tlegendOrientation = 'horizontal',\n\t\t\tlegendAlignment = 'center',\n\t\t\tlegendPosition = 'bottom',\n\t\t\tlegendMaxWidth,\n\t\t\tlegendTextOverflow = 'wrap',\n\t\t\tlegendItemClassName,\n\t\t\trenderGlyph = defaultRenderGlyph,\n\t\t\tglyphStyle = {},\n\t\t\tlegendShape = 'line',\n\t\t\twithLegendGlyph = false,\n\t\t\twithGradientFill = false,\n\t\t\tsmoothing = true,\n\t\t\tcurveType,\n\t\t\trenderTooltip = renderDefaultTooltip,\n\t\t\twithStartGlyphs = false,\n\t\t\twithEndGlyphs = false,\n\t\t\tlegendInteractive = false,\n\t\t\tanimation,\n\t\t\toptions = {},\n\t\t\tonPointerDown = undefined,\n\t\t\tonPointerUp = undefined,\n\t\t\tonPointerMove = undefined,\n\t\t\tonPointerOut = undefined,\n\t\t\tchildren,\n\t\t\tgridVisibility,\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 = options?.axis?.x?.tickFormat || 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\tdisplay: true,\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\tdisplay: true,\n\t\t\t\t\t\t...options?.axis?.y,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\txScale: {\n\t\t\t\t\ttype: 'time' as const,\n\t\t\t\t\t...options?.xScale,\n\t\t\t\t},\n\t\t\t\tyScale: {\n\t\t\t\t\ttype: 'linear' as const,\n\t\t\t\t\tnice: true,\n\t\t\t\t\tzero: false,\n\t\t\t\t\t...options?.yScale,\n\t\t\t\t},\n\t\t\t};\n\t\t}, [ options, dataSorted, width ] );\n\n\t\tconst tooltipRenderGlyph = useMemo( () => {\n\t\t\treturn ( props: GlyphProps< DataPointDate > ) => {\n\t\t\t\tconst seriesIndex = dataSorted.findIndex(\n\t\t\t\t\tseries =>\n\t\t\t\t\t\tseries.label === props.key || series.data.includes( props.datum as DataPointDate )\n\t\t\t\t);\n\n\t\t\t\tconst seriesData = dataSorted[ seriesIndex ];\n\n\t\t\t\tconst { color, glyph: themeGlyph } = getElementStyles( {\n\t\t\t\t\tdata: seriesData,\n\t\t\t\t\tindex: seriesIndex,\n\t\t\t\t} );\n\n\t\t\t\tconst propsWithResolvedColor = { ...props, color };\n\n\t\t\t\treturn themeGlyph\n\t\t\t\t\t? themeGlyph( propsWithResolvedColor )\n\t\t\t\t\t: renderGlyph( propsWithResolvedColor );\n\t\t\t};\n\t\t}, [ dataSorted, renderGlyph, getElementStyles ] );\n\n\t\tconst defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme );\n\n\t\tconst error = validateData( dataSorted );\n\t\tconst isDataValid = ! error;\n\n\t\t// Memoize legend options to prevent unnecessary re-calculations\n\t\tconst legendOptions = useMemo(\n\t\t\t() => ( {\n\t\t\t\twithGlyph: withLegendGlyph,\n\t\t\t\tglyphSize: Math.max( 0, toNumber( glyphStyle?.radius ) ?? 4 ),\n\t\t\t\trenderGlyph,\n\t\t\t} ),\n\t\t\t[ withLegendGlyph, glyphStyle?.radius, renderGlyph ]\n\t\t);\n\n\t\t// Create legend items using the reusable hook\n\t\tconst legendItems = useChartLegendItems( dataSorted, legendOptions, legendShape );\n\n\t\t// Memoize metadata to prevent unnecessary re-registration\n\t\tconst chartMetadata = useMemo(\n\t\t\t() => ( {\n\t\t\t\twithGradientFill,\n\t\t\t\tsmoothing,\n\t\t\t\tcurveType,\n\t\t\t\twithStartGlyphs,\n\t\t\t\twithEndGlyphs,\n\t\t\t\twithLegendGlyph,\n\t\t\t} ),\n\t\t\t[ withGradientFill, smoothing, curveType, withStartGlyphs, withEndGlyphs, withLegendGlyph ]\n\t\t);\n\n\t\t// Register chart with context only if data is valid\n\t\tuseChartRegistration( {\n\t\t\tchartId,\n\t\t\tlegendItems,\n\t\t\tchartType: 'line',\n\t\t\tisDataValid,\n\t\t\tmetadata: chartMetadata,\n\t\t} );\n\n\t\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\t\tconst accessors = {\n\t\t\txAccessor: ( d: DataPointDate ) => d?.date,\n\t\t\tyAccessor: ( d: DataPointDate ) => d?.value,\n\t\t};\n\n\t\t// Create a custom renderTooltip that includes focus capability\n\t\tif ( error ) {\n\t\t\treturn <div className={ clsx( 'line-chart', styles[ 'line-chart' ] ) }>{ error }</div>;\n\t\t}\n\n\t\treturn (\n\t\t\t<SingleChartContext.Provider\n\t\t\t\tvalue={ {\n\t\t\t\t\tchartId,\n\t\t\t\t\tchartRef: internalChartRef,\n\t\t\t\t\tchartWidth: width,\n\t\t\t\t\tchartHeight: height - ( showLegend ? legendHeight : 0 ),\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'line-chart',\n\t\t\t\t\t\tstyles[ 'line-chart' ],\n\t\t\t\t\t\t{ [ styles[ 'line-chart--animated' ] ]: animation && ! prefersReducedMotion },\n\t\t\t\t\t\t{ [ styles[ 'line-chart--legend-top' ] ]: showLegend && legendPosition === 'top' },\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\tdata-testid=\"line-chart\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\theight,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\trole=\"grid\"\n\t\t\t\t\t\taria-label={ __( 'Line chart', 'jetpack-charts' ) }\n\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\tonKeyDown={ onChartKeyDown }\n\t\t\t\t\t\tonFocus={ onChartFocus }\n\t\t\t\t\t\tonBlur={ onChartBlur }\n\t\t\t\t\t\tref={ chartRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<XYChart\n\t\t\t\t\t\t\ttheme={ theme }\n\t\t\t\t\t\t\twidth={ width }\n\t\t\t\t\t\t\theight={ height - ( showLegend ? legendHeight : 0 ) }\n\t\t\t\t\t\t\tmargin={ {\n\t\t\t\t\t\t\t\t...defaultMargin,\n\t\t\t\t\t\t\t\t...margin,\n\t\t\t\t\t\t\t\t...( showLegend && legendPosition === 'top'\n\t\t\t\t\t\t\t\t\t? { top: ( defaultMargin.top || 0 ) + legendHeight }\n\t\t\t\t\t\t\t\t\t: {} ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t// xScale and yScale could be set in Axis as well, but they are `scale` props there.\n\t\t\t\t\t\t\txScale={ chartOptions.xScale }\n\t\t\t\t\t\t\tyScale={ chartOptions.yScale }\n\t\t\t\t\t\t\tonPointerDown={ onPointerDown }\n\t\t\t\t\t\t\tonPointerUp={ onPointerUp }\n\t\t\t\t\t\t\tonPointerMove={ onPointerMove }\n\t\t\t\t\t\t\tonPointerOut={ onPointerOut }\n\t\t\t\t\t\t\tpointerEventsDataKey=\"nearest\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ gridVisibility !== 'none' && <Grid columns={ false } numTicks={ 4 } /> }\n\t\t\t\t\t\t\t{ chartOptions.axis.x.display && <Axis { ...chartOptions.axis.x } /> }\n\t\t\t\t\t\t\t{ chartOptions.axis.y.display && <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/charts/line-chart/line-chart.module.scss';export default {\n  \"line-chart\": \"a8ccharts-v-oO8E\",\n  \"line-chart--animated\": \"a8ccharts-QrkuTW\",\n  \"rise\": \"a8ccharts--rxDU3\",\n  \"line-chart--legend-top\": \"a8ccharts-3l-pKy\",\n  \"line-chart__tooltip\": \"a8ccharts-Tu0rR-\",\n  \"line-chart__annotation-label-popover\": \"a8ccharts--RSWXi\",\n  \"line-chart__tooltip-date\": \"a8ccharts-Q-b5A1\",\n  \"line-chart__tooltip-row\": \"a8ccharts-19N7T9\",\n  \"line-chart__tooltip-label\": \"a8ccharts-HOAXrD\",\n  \"line-chart__annotations-overlay\": \"a8ccharts-rQiY8O\",\n  \"line-chart__annotation-label\": \"a8ccharts-8AKWOe\",\n  \"line-chart__annotation-label-trigger-button\": \"a8ccharts-7mh3Cl\",\n  \"line-chart__annotation-label-popover--visible\": \"a8ccharts-VAeVuJ\",\n  \"line-chart__annotation-label-popover--safari\": \"a8ccharts-TEe-iV\",\n  \"line-chart__annotation-label-popover-header\": \"a8ccharts-LAUpx7\",\n  \"line-chart__annotation-label-popover-content\": \"a8ccharts-b76gEu\",\n  \"line-chart__annotation-label-popover-close-button\": \"a8ccharts-LIpFoS\"\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"]}