@automattic/charts 0.56.4 → 0.56.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/charts/bar-chart/index.cjs +3 -3
  3. package/dist/charts/bar-chart/index.js +2 -2
  4. package/dist/charts/bar-list-chart/index.cjs +4 -4
  5. package/dist/charts/bar-list-chart/index.js +3 -3
  6. package/dist/charts/conversion-funnel-chart/index.cjs +3 -3
  7. package/dist/charts/conversion-funnel-chart/index.js +2 -2
  8. package/dist/charts/geo-chart/index.cjs +3 -3
  9. package/dist/charts/geo-chart/index.js +2 -2
  10. package/dist/charts/leaderboard-chart/index.cjs +3 -3
  11. package/dist/charts/leaderboard-chart/index.js +2 -2
  12. package/dist/charts/line-chart/index.cjs +3 -3
  13. package/dist/charts/line-chart/index.js +2 -2
  14. package/dist/charts/pie-chart/index.cjs +3 -3
  15. package/dist/charts/pie-chart/index.js +2 -2
  16. package/dist/charts/pie-semi-circle-chart/index.cjs +3 -3
  17. package/dist/charts/pie-semi-circle-chart/index.js +2 -2
  18. package/dist/charts/sparkline/index.cjs +4 -4
  19. package/dist/charts/sparkline/index.js +3 -3
  20. package/dist/{chunk-AWNCAKZY.js → chunk-32ESS4MV.js} +44 -10
  21. package/dist/chunk-32ESS4MV.js.map +1 -0
  22. package/dist/{chunk-CMHPXSCI.js → chunk-7TQSPLIN.js} +2 -2
  23. package/dist/{chunk-M7PRGJFE.js → chunk-AFWQR3SM.js} +3 -3
  24. package/dist/{chunk-PGJAZN2H.js → chunk-DBY6C4O2.js} +2 -2
  25. package/dist/{chunk-R23BFDIW.js → chunk-DLSUC7RN.js} +2 -2
  26. package/dist/{chunk-LSV7F26B.cjs → chunk-EJJO2QNB.cjs} +61 -27
  27. package/dist/chunk-EJJO2QNB.cjs.map +1 -0
  28. package/dist/{chunk-HNEG3EFJ.cjs → chunk-FIFSYVN6.cjs} +16 -16
  29. package/dist/{chunk-HNEG3EFJ.cjs.map → chunk-FIFSYVN6.cjs.map} +1 -1
  30. package/dist/{chunk-66BXSWMW.cjs → chunk-FY325WQ4.cjs} +21 -21
  31. package/dist/{chunk-66BXSWMW.cjs.map → chunk-FY325WQ4.cjs.map} +1 -1
  32. package/dist/{chunk-CERFRCXD.cjs → chunk-IHESL7H5.cjs} +20 -20
  33. package/dist/{chunk-CERFRCXD.cjs.map → chunk-IHESL7H5.cjs.map} +1 -1
  34. package/dist/{chunk-4YYROZDJ.cjs → chunk-JL4ZKKZU.cjs} +16 -16
  35. package/dist/{chunk-4YYROZDJ.cjs.map → chunk-JL4ZKKZU.cjs.map} +1 -1
  36. package/dist/{chunk-WMWAUOQ4.js → chunk-KHRPRH4V.js} +3 -3
  37. package/dist/{chunk-FZYJM5PN.js → chunk-KXSLMOW5.js} +2 -2
  38. package/dist/{chunk-KKPZ4MVF.js → chunk-LT4YOIMM.js} +2 -2
  39. package/dist/{chunk-GBDFC74U.cjs → chunk-LTPJPIDP.cjs} +5 -5
  40. package/dist/{chunk-GBDFC74U.cjs.map → chunk-LTPJPIDP.cjs.map} +1 -1
  41. package/dist/{chunk-ZXEFMKVP.cjs → chunk-NGHXTIUE.cjs} +5 -5
  42. package/dist/{chunk-ZXEFMKVP.cjs.map → chunk-NGHXTIUE.cjs.map} +1 -1
  43. package/dist/{chunk-ZY4FXLMM.js → chunk-PCOI2GT5.js} +2 -2
  44. package/dist/{chunk-5N77S5N3.cjs → chunk-Q6G3BGCL.cjs} +6 -6
  45. package/dist/{chunk-5N77S5N3.cjs.map → chunk-Q6G3BGCL.cjs.map} +1 -1
  46. package/dist/{chunk-RSYD434G.cjs → chunk-TKPK4RFS.cjs} +15 -15
  47. package/dist/{chunk-RSYD434G.cjs.map → chunk-TKPK4RFS.cjs.map} +1 -1
  48. package/dist/{chunk-EBDUXL5K.js → chunk-X6GX4QUJ.js} +2 -2
  49. package/dist/{chunk-KMYJJTSR.cjs → chunk-XCXAWMJQ.cjs} +9 -9
  50. package/dist/{chunk-KMYJJTSR.cjs.map → chunk-XCXAWMJQ.cjs.map} +1 -1
  51. package/dist/components/legend/index.cjs +2 -2
  52. package/dist/components/legend/index.js +1 -1
  53. package/dist/hooks/index.cjs +2 -2
  54. package/dist/hooks/index.js +1 -1
  55. package/dist/index.cjs +11 -11
  56. package/dist/index.js +10 -10
  57. package/dist/providers/index.cjs +2 -2
  58. package/dist/providers/index.js +1 -1
  59. package/package.json +2 -2
  60. package/src/hooks/test/use-chart-margin.test.tsx +44 -0
  61. package/src/hooks/use-chart-margin.tsx +92 -6
  62. package/dist/chunk-AWNCAKZY.js.map +0 -1
  63. package/dist/chunk-LSV7F26B.cjs.map +0 -1
  64. /package/dist/{chunk-CMHPXSCI.js.map → chunk-7TQSPLIN.js.map} +0 -0
  65. /package/dist/{chunk-M7PRGJFE.js.map → chunk-AFWQR3SM.js.map} +0 -0
  66. /package/dist/{chunk-PGJAZN2H.js.map → chunk-DBY6C4O2.js.map} +0 -0
  67. /package/dist/{chunk-R23BFDIW.js.map → chunk-DLSUC7RN.js.map} +0 -0
  68. /package/dist/{chunk-WMWAUOQ4.js.map → chunk-KHRPRH4V.js.map} +0 -0
  69. /package/dist/{chunk-FZYJM5PN.js.map → chunk-KXSLMOW5.js.map} +0 -0
  70. /package/dist/{chunk-KKPZ4MVF.js.map → chunk-LT4YOIMM.js.map} +0 -0
  71. /package/dist/{chunk-ZY4FXLMM.js.map → chunk-PCOI2GT5.js.map} +0 -0
  72. /package/dist/{chunk-EBDUXL5K.js.map → chunk-X6GX4QUJ.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-KMYJJTSR.cjs","../src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx","../src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss","../src/charts/conversion-funnel-chart/private/use-funnel-selection.ts"],"names":["useCallback"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-KMYJJTSR.cjs","sourcesContent":[null,"import { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { Stack } from '@wordpress/ui';\nimport clsx from 'clsx';\nimport { useRef, useMemo, useEffect, useCallback, useContext } from 'react';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, GlobalChartsContext, useChartId, useChartRegistration, useGlobalChartsTheme, useGlobalChartsContext } from '../../providers';\nimport { formatPercentage, hexToRgba } from '../../utils';\nimport styles from './conversion-funnel-chart.module.scss';\nimport { useFunnelSelection } from './private';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Internal ConversionFunnelChart component with chart registration\n *\n * @param props - Component props\n * @param props.chartId - Optional unique identifier for the chart\n * @param props.mainRate - Main conversion rate to highlight\n * @param props.changeIndicator - Change indicator (e.g., +2%, -1.5%)\n * @param props.steps - Array of funnel steps\n * @param props.loading - Whether the chart is in loading state\n * @param props.animation - Whether to show chart animation on initial render or not\n * @param props.className - Additional CSS class name\n * @param props.height - Height of the chart container. Falls back to style.height if set, otherwise defaults to \"100%\".\n * @param props.style - Custom styling\n * @param props.renderStepLabel - Custom render function for step labels\n * @param props.renderStepRate - Custom render function for step rates\n * @param props.renderMainMetric - Custom render function for the entire main metric section\n * @param props.renderTooltip - Custom render function for tooltip content\n * @return JSX element representing the conversion funnel chart\n */\nconst ConversionFunnelChartInternal = ({\n mainRate,\n changeIndicator,\n steps,\n loading = false,\n animation,\n className,\n chartId: providedChartId,\n height,\n style,\n renderStepLabel,\n renderStepRate,\n renderMainMetric,\n renderTooltip\n}) => {\n const chartId = useChartId(providedChartId);\n const {\n conversionFunnelChart: conversionFunnelChartSettings\n } = useGlobalChartsTheme();\n const {\n getElementStyles\n } = useGlobalChartsContext();\n const chartRef = useRef(null);\n const selectedBarRef = useRef(null);\n\n // Use @visx/tooltip hooks for tooltip positioning\n const {\n tooltipData,\n tooltipLeft,\n tooltipTop,\n tooltipOpen,\n showTooltip,\n hideTooltip\n } = useTooltip();\n\n // Use custom hook for selection management\n const {\n handleBarClick,\n handleBarKeyDown,\n clearSelection,\n getStepState\n } = useFunnelSelection(hideTooltip);\n const {\n containerRef: portalContainerRef,\n TooltipInPortal,\n containerBounds\n } = useTooltipInPortal({\n // use TooltipWithBounds for boundary detection\n detectBounds: true,\n // when tooltip containers are scrolled, this will correctly update the Tooltip position\n scroll: true\n });\n\n // Wrapper to clear selectedBarRef after clearing selection\n const clearSelectionAndRef = useCallback(() => {\n clearSelection();\n selectedBarRef.current = null;\n hideTooltip();\n }, [clearSelection, hideTooltip]);\n\n // Helper function to show tooltip at specific coordinates\n const showTooltipAt = useCallback((step, x, y) => {\n showTooltip({\n tooltipData: step,\n tooltipLeft: x,\n tooltipTop: y - 10\n });\n }, [showTooltip]);\n\n // Helper function to get tooltip coordinates for mouse events\n // Use clientX/Y and subtract containerBounds to cancel out any stale offset.\n // TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX\n // By passing (clientX - containerBounds.left), we get correct page coordinates\n // regardless of whether bounds are stale (e.g., after dashboard customization).\n const getMouseTooltipCoords = useCallback(event => {\n // Don't return coords until container bounds are measured\n if (containerBounds.width === 0 || containerBounds.height === 0) {\n return null;\n }\n return {\n x: event.clientX - containerBounds.left,\n y: event.clientY - containerBounds.top\n };\n }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);\n\n // Helper function to get tooltip coordinates for keyboard events\n // Use fresh getBoundingClientRect() and subtract containerBounds to cancel out stale offset.\n const getKeyboardTooltipCoords = useCallback(event => {\n // Don't return coords until container bounds are measured\n if (containerBounds.width === 0 || containerBounds.height === 0) {\n return null;\n }\n const rect = event.currentTarget.getBoundingClientRect();\n // Calculate center of element in viewport coordinates, then subtract containerBounds\n const x = rect.left + rect.width / 2 - containerBounds.left;\n const y = rect.top - containerBounds.top;\n return {\n x,\n y\n };\n }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);\n\n // Helper function to handle step interaction (both click and keyboard)\n const handleStepInteraction = useCallback((step, event, interactionType) => {\n // Store reference to the interacted element\n selectedBarRef.current = event.currentTarget;\n\n // Check if deselecting the same step\n const {\n isClicked\n } = getStepState(step.id);\n if (isClicked) {\n // Deselecting - clear selection (tooltip will be hidden by hook)\n if (interactionType === 'click') {\n handleBarClick(step.id);\n } else {\n handleBarKeyDown(step.id, event);\n }\n return;\n }\n\n // Selecting - handle selection and show tooltip\n if (interactionType === 'click') {\n handleBarClick(step.id);\n const coords = getMouseTooltipCoords(event);\n if (coords) {\n showTooltipAt(step, coords.x, coords.y);\n }\n } else {\n handleBarKeyDown(step.id, event);\n const coords = getKeyboardTooltipCoords(event);\n if (coords) {\n showTooltipAt(step, coords.x, coords.y);\n }\n }\n }, [getStepState, handleBarClick, handleBarKeyDown, showTooltipAt, getMouseTooltipCoords, getKeyboardTooltipCoords]);\n\n // Create handler factories to avoid arrow functions in JSX\n const stepHandlers = useMemo(() => {\n const handlers = new Map();\n steps.forEach(step => {\n const onClick = event => {\n event.stopPropagation();\n handleStepInteraction(step, event, 'click');\n };\n const onKeyDown = event => {\n if (event.key === 'Enter' || event.key === ' ') {\n handleStepInteraction(step, event, 'keyboard');\n } else {\n // For other keys (like Escape), just handle the selection\n selectedBarRef.current = event.currentTarget;\n handleBarKeyDown(step.id, event);\n }\n };\n handlers.set(step.id, {\n onClick,\n onKeyDown\n });\n });\n return handlers;\n }, [steps, handleStepInteraction, handleBarKeyDown]);\n\n // Handle document-level click to clear selection when clicking outside selected bar\n useEffect(() => {\n const handleDocumentClick = event => {\n // Only clear selection if there's an active selection and click is outside the selected bar\n if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) {\n clearSelectionAndRef();\n }\n };\n document.addEventListener('mousedown', handleDocumentClick);\n return () => {\n document.removeEventListener('mousedown', handleDocumentClick);\n };\n }, [clearSelectionAndRef]);\n\n // Resolve height: explicit height prop > style.height > default 100%\n const resolvedHeight = height ?? style?.height ?? '100%';\n\n // Get component settings from theme with fallbacks\n const {\n primaryColor,\n backgroundColor,\n positiveChangeColor,\n negativeChangeColor\n } = conversionFunnelChartSettings;\n\n // Resolve bar color using getElementStyles with primaryColor as override\n const {\n color: barColor\n } = getElementStyles ? getElementStyles({\n index: 0,\n overrideColor: primaryColor\n }) : {\n color: primaryColor || '#000000'\n };\n\n // Determine change indicator color\n const isPositiveChange = changeIndicator?.startsWith('+');\n const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;\n\n // Create light background version of primary color if not set\n const barBackgroundColor = backgroundColor || hexToRgba(barColor, 0.08) || 'rgba(0, 0, 0, 0.08)';\n\n // Default main metric rendering function\n const renderDefaultMainMetric = () => /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsx(\"span\", {\n className: styles['main-rate'],\n children: formatPercentage(mainRate)\n }), changeIndicator && /*#__PURE__*/_jsx(\"span\", {\n className: styles['change-indicator'],\n style: {\n color: changeColor\n },\n children: changeIndicator\n })]\n });\n\n // Default tooltip rendering function\n const renderDefaultTooltip = step => /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsx(\"div\", {\n className: styles['tooltip-title'],\n children: step.label\n }), /*#__PURE__*/_jsxs(\"div\", {\n className: styles['tooltip-content'],\n children: [formatPercentage(step.rate), ` • ${step.count ?? 'no'} items`]\n })]\n });\n\n // Validate data\n const isDataValid = Boolean(steps && steps.length > 0);\n\n // Memoize metadata to prevent unnecessary re-registration\n const chartMetadata = useMemo(() => ({\n mainRate,\n changeIndicator,\n stepsCount: steps?.length || 0\n }), [mainRate, changeIndicator, steps?.length]);\n useChartRegistration({\n chartId,\n legendItems: [],\n chartType: 'conversion-funnel',\n isDataValid,\n metadata: chartMetadata\n });\n const prefersReducedMotion = usePrefersReducedMotion();\n\n // Handle empty or undefined data\n if (!isDataValid) {\n return /*#__PURE__*/_jsx(Stack, {\n direction: \"column\",\n className: clsx(styles.conversionFunnelChart, loading && styles.loading, className),\n style: {\n ...style,\n height: resolvedHeight\n },\n children: /*#__PURE__*/_jsx(\"div\", {\n className: styles['empty-state'],\n children: loading ? 'Loading...' : 'No data available'\n })\n });\n }\n\n // Calculate bar heights relative to the maximum (first step)\n const maxRate = Math.max(...steps.map(step => step.rate));\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsxs(Stack, {\n direction: \"column\",\n ref: node => {\n // Set containerRef for @visx coordinate system\n portalContainerRef(node);\n chartRef.current = node;\n },\n className: clsx(styles.conversionFunnelChart, loading && styles.loading, className),\n style: {\n ...style,\n height: resolvedHeight\n },\n children: [renderMainMetric ? renderMainMetric({\n mainRate,\n changeIndicator,\n className: styles['main-metric'],\n changeColor\n }) : /*#__PURE__*/_jsx(\"div\", {\n className: styles['main-metric'],\n children: renderDefaultMainMetric()\n }), /*#__PURE__*/_jsx(\"div\", {\n className: styles['funnel-container'],\n children: steps.map((step, index) => {\n const barHeight = step.rate / maxRate * 100;\n const {\n isBlurred\n } = getStepState(step.id);\n return /*#__PURE__*/_jsxs(\"div\", {\n className: clsx(styles['funnel-step'], isBlurred && styles.blurred),\n children: [/*#__PURE__*/_jsxs(\"div\", {\n className: styles['step-header'],\n children: [renderStepLabel ? renderStepLabel({\n step,\n index,\n className: styles['step-label']\n }) : /*#__PURE__*/_jsx(\"span\", {\n className: styles['step-label'],\n children: step.label\n }), renderStepRate ? renderStepRate({\n step,\n index,\n className: styles['step-rate']\n }) : /*#__PURE__*/_jsx(\"span\", {\n className: styles['step-rate'],\n children: formatPercentage(step.rate)\n })]\n }), /*#__PURE__*/_jsx(\"div\", {\n className: clsx(styles['bar-container'], isBlurred && styles.disabled),\n onClick: stepHandlers.get(step.id)?.onClick,\n onKeyDown: stepHandlers.get(step.id)?.onKeyDown,\n role: \"button\",\n tabIndex: isBlurred ? -1 : 0,\n \"aria-label\": step.label,\n style: {\n backgroundColor: barBackgroundColor\n },\n children: /*#__PURE__*/_jsx(\"div\", {\n className: clsx(styles['funnel-bar'], {\n [styles['funnel-bar--animated']]: animation && !loading && !prefersReducedMotion\n }),\n style: {\n height: `${barHeight}%`,\n backgroundColor: barColor\n }\n })\n })]\n }, step.id);\n })\n })]\n }), tooltipOpen && tooltipData && (() => {\n const tooltipContent = renderTooltip ? renderTooltip({\n step: tooltipData,\n index: steps.findIndex(s => s.id === tooltipData.id),\n top: tooltipTop,\n left: tooltipLeft,\n className: styles['tooltip-wrapper']\n }) : renderDefaultTooltip(tooltipData);\n\n // Don't render tooltip if renderTooltip returns falsy\n if (!tooltipContent) return null;\n return /*#__PURE__*/_jsx(TooltipInPortal\n // set this to random so it correctly updates with parent bounds\n , {\n top: tooltipTop,\n left: tooltipLeft,\n className: styles['tooltip-wrapper'],\n children: tooltipContent\n }, Math.random());\n })()]\n });\n};\n\n/**\n * ConversionFunnelChart component with provider wrapper\n *\n * @param props - Component props\n * @return JSX element representing the conversion funnel chart\n */\nconst ConversionFunnelChartWithProvider = props => {\n const existingContext = useContext(GlobalChartsContext);\n\n // If we're already in a GlobalChartsProvider context, don't create a new one\n if (existingContext) {\n return /*#__PURE__*/_jsx(ConversionFunnelChartInternal, {\n ...props\n });\n }\n\n // Otherwise, create our own GlobalChartsProvider\n return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n children: /*#__PURE__*/_jsx(ConversionFunnelChartInternal, {\n ...props\n })\n });\n};\nConversionFunnelChartWithProvider.displayName = 'ConversionFunnelChart';\nexport { ConversionFunnelChartWithProvider as default };","import 'css-chunk:src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss';export default {\n \"conversionFunnelChart\": \"a8ccharts-lK-YNK\",\n \"loading\": \"a8ccharts-DbHKK5\",\n \"main-metric\": \"a8ccharts-61WPYr\",\n \"main-rate\": \"a8ccharts-RRRI6x\",\n \"change-indicator\": \"a8ccharts-661iwx\",\n \"funnel-container\": \"a8ccharts-Z7EGnW\",\n \"funnel-step\": \"a8ccharts-VqFY0l\",\n \"blurred\": \"a8ccharts-7dTRBs\",\n \"step-header\": \"a8ccharts-2JsQiV\",\n \"step-label\": \"a8ccharts-6OabC4\",\n \"step-rate\": \"a8ccharts-9wSZ6n\",\n \"bar-container\": \"a8ccharts-sSmCTi\",\n \"disabled\": \"a8ccharts-PLWVAW\",\n \"funnel-bar\": \"a8ccharts-EzczI-\",\n \"selected\": \"a8ccharts-wNpZEu\",\n \"funnel-bar--animated\": \"a8ccharts-68HQJl\",\n \"stretch\": \"a8ccharts-CmtieZ\",\n \"tooltip-wrapper\": \"a8ccharts-2TeoCn\",\n \"tooltip-title\": \"a8ccharts-jkRitH\",\n \"tooltip-content\": \"a8ccharts-8jgT-3\",\n \"empty-state\": \"a8ccharts-Ml6MMr\"\n};","import { useCallback, useState } from 'react';\n\n/**\n * Custom hook to manage funnel bar selection state and interactions\n * @param hideTooltip - Function to hide tooltip when selection is cleared\n * @return Object containing selection state and event handlers\n */\nexport const useFunnelSelection = ( hideTooltip?: () => void ) => {\n\tconst [ clickedStep, setClickedStep ] = useState< string | null >( null );\n\n\t// Handle bar click\n\tconst handleBarClick = useCallback(\n\t\t( stepId: string ) => {\n\t\t\tif ( clickedStep === stepId ) {\n\t\t\t\t// If clicking the same step, deselect it\n\t\t\t\tsetClickedStep( null );\n\t\t\t\thideTooltip?.();\n\t\t\t} else {\n\t\t\t\t// Otherwise, select this step\n\t\t\t\tsetClickedStep( stepId );\n\t\t\t}\n\t\t},\n\t\t[ clickedStep, hideTooltip ]\n\t);\n\n\t// Handle bar keydown\n\tconst handleBarKeyDown = useCallback(\n\t\t( stepId: string, event: React.KeyboardEvent ) => {\n\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( clickedStep === stepId ) {\n\t\t\t\t\tsetClickedStep( null );\n\t\t\t\t\thideTooltip?.();\n\t\t\t\t} else {\n\t\t\t\t\tsetClickedStep( stepId );\n\t\t\t\t}\n\t\t\t} else if ( event.key === 'Escape' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetClickedStep( null );\n\t\t\t\thideTooltip?.();\n\t\t\t}\n\t\t},\n\t\t[ clickedStep, hideTooltip ]\n\t);\n\n\t// Clear selection (for chart-level click)\n\tconst clearSelection = useCallback( () => {\n\t\tsetClickedStep( null );\n\t\thideTooltip?.();\n\t}, [ hideTooltip ] );\n\n\t// Get step state helpers\n\tconst getStepState = useCallback(\n\t\t( stepId: string ) => ( {\n\t\t\tisClicked: clickedStep === stepId,\n\t\t\tisBlurred: clickedStep !== null && clickedStep !== stepId,\n\t\t} ),\n\t\t[ clickedStep ]\n\t);\n\n\treturn {\n\t\tclickedStep,\n\t\thandleBarClick,\n\t\thandleBarKeyDown,\n\t\tclearSelection,\n\t\tgetStepState,\n\t};\n};\n"]}
1
+ {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-XCXAWMJQ.cjs","../src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx","../src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss","../src/charts/conversion-funnel-chart/private/use-funnel-selection.ts"],"names":["useCallback"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-XCXAWMJQ.cjs","sourcesContent":[null,"import { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { Stack } from '@wordpress/ui';\nimport clsx from 'clsx';\nimport { useRef, useMemo, useEffect, useCallback, useContext } from 'react';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, GlobalChartsContext, useChartId, useChartRegistration, useGlobalChartsTheme, useGlobalChartsContext } from '../../providers';\nimport { formatPercentage, hexToRgba } from '../../utils';\nimport styles from './conversion-funnel-chart.module.scss';\nimport { useFunnelSelection } from './private';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Internal ConversionFunnelChart component with chart registration\n *\n * @param props - Component props\n * @param props.chartId - Optional unique identifier for the chart\n * @param props.mainRate - Main conversion rate to highlight\n * @param props.changeIndicator - Change indicator (e.g., +2%, -1.5%)\n * @param props.steps - Array of funnel steps\n * @param props.loading - Whether the chart is in loading state\n * @param props.animation - Whether to show chart animation on initial render or not\n * @param props.className - Additional CSS class name\n * @param props.height - Height of the chart container. Falls back to style.height if set, otherwise defaults to \"100%\".\n * @param props.style - Custom styling\n * @param props.renderStepLabel - Custom render function for step labels\n * @param props.renderStepRate - Custom render function for step rates\n * @param props.renderMainMetric - Custom render function for the entire main metric section\n * @param props.renderTooltip - Custom render function for tooltip content\n * @return JSX element representing the conversion funnel chart\n */\nconst ConversionFunnelChartInternal = ({\n mainRate,\n changeIndicator,\n steps,\n loading = false,\n animation,\n className,\n chartId: providedChartId,\n height,\n style,\n renderStepLabel,\n renderStepRate,\n renderMainMetric,\n renderTooltip\n}) => {\n const chartId = useChartId(providedChartId);\n const {\n conversionFunnelChart: conversionFunnelChartSettings\n } = useGlobalChartsTheme();\n const {\n getElementStyles\n } = useGlobalChartsContext();\n const chartRef = useRef(null);\n const selectedBarRef = useRef(null);\n\n // Use @visx/tooltip hooks for tooltip positioning\n const {\n tooltipData,\n tooltipLeft,\n tooltipTop,\n tooltipOpen,\n showTooltip,\n hideTooltip\n } = useTooltip();\n\n // Use custom hook for selection management\n const {\n handleBarClick,\n handleBarKeyDown,\n clearSelection,\n getStepState\n } = useFunnelSelection(hideTooltip);\n const {\n containerRef: portalContainerRef,\n TooltipInPortal,\n containerBounds\n } = useTooltipInPortal({\n // use TooltipWithBounds for boundary detection\n detectBounds: true,\n // when tooltip containers are scrolled, this will correctly update the Tooltip position\n scroll: true\n });\n\n // Wrapper to clear selectedBarRef after clearing selection\n const clearSelectionAndRef = useCallback(() => {\n clearSelection();\n selectedBarRef.current = null;\n hideTooltip();\n }, [clearSelection, hideTooltip]);\n\n // Helper function to show tooltip at specific coordinates\n const showTooltipAt = useCallback((step, x, y) => {\n showTooltip({\n tooltipData: step,\n tooltipLeft: x,\n tooltipTop: y - 10\n });\n }, [showTooltip]);\n\n // Helper function to get tooltip coordinates for mouse events\n // Use clientX/Y and subtract containerBounds to cancel out any stale offset.\n // TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX\n // By passing (clientX - containerBounds.left), we get correct page coordinates\n // regardless of whether bounds are stale (e.g., after dashboard customization).\n const getMouseTooltipCoords = useCallback(event => {\n // Don't return coords until container bounds are measured\n if (containerBounds.width === 0 || containerBounds.height === 0) {\n return null;\n }\n return {\n x: event.clientX - containerBounds.left,\n y: event.clientY - containerBounds.top\n };\n }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);\n\n // Helper function to get tooltip coordinates for keyboard events\n // Use fresh getBoundingClientRect() and subtract containerBounds to cancel out stale offset.\n const getKeyboardTooltipCoords = useCallback(event => {\n // Don't return coords until container bounds are measured\n if (containerBounds.width === 0 || containerBounds.height === 0) {\n return null;\n }\n const rect = event.currentTarget.getBoundingClientRect();\n // Calculate center of element in viewport coordinates, then subtract containerBounds\n const x = rect.left + rect.width / 2 - containerBounds.left;\n const y = rect.top - containerBounds.top;\n return {\n x,\n y\n };\n }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);\n\n // Helper function to handle step interaction (both click and keyboard)\n const handleStepInteraction = useCallback((step, event, interactionType) => {\n // Store reference to the interacted element\n selectedBarRef.current = event.currentTarget;\n\n // Check if deselecting the same step\n const {\n isClicked\n } = getStepState(step.id);\n if (isClicked) {\n // Deselecting - clear selection (tooltip will be hidden by hook)\n if (interactionType === 'click') {\n handleBarClick(step.id);\n } else {\n handleBarKeyDown(step.id, event);\n }\n return;\n }\n\n // Selecting - handle selection and show tooltip\n if (interactionType === 'click') {\n handleBarClick(step.id);\n const coords = getMouseTooltipCoords(event);\n if (coords) {\n showTooltipAt(step, coords.x, coords.y);\n }\n } else {\n handleBarKeyDown(step.id, event);\n const coords = getKeyboardTooltipCoords(event);\n if (coords) {\n showTooltipAt(step, coords.x, coords.y);\n }\n }\n }, [getStepState, handleBarClick, handleBarKeyDown, showTooltipAt, getMouseTooltipCoords, getKeyboardTooltipCoords]);\n\n // Create handler factories to avoid arrow functions in JSX\n const stepHandlers = useMemo(() => {\n const handlers = new Map();\n steps.forEach(step => {\n const onClick = event => {\n event.stopPropagation();\n handleStepInteraction(step, event, 'click');\n };\n const onKeyDown = event => {\n if (event.key === 'Enter' || event.key === ' ') {\n handleStepInteraction(step, event, 'keyboard');\n } else {\n // For other keys (like Escape), just handle the selection\n selectedBarRef.current = event.currentTarget;\n handleBarKeyDown(step.id, event);\n }\n };\n handlers.set(step.id, {\n onClick,\n onKeyDown\n });\n });\n return handlers;\n }, [steps, handleStepInteraction, handleBarKeyDown]);\n\n // Handle document-level click to clear selection when clicking outside selected bar\n useEffect(() => {\n const handleDocumentClick = event => {\n // Only clear selection if there's an active selection and click is outside the selected bar\n if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) {\n clearSelectionAndRef();\n }\n };\n document.addEventListener('mousedown', handleDocumentClick);\n return () => {\n document.removeEventListener('mousedown', handleDocumentClick);\n };\n }, [clearSelectionAndRef]);\n\n // Resolve height: explicit height prop > style.height > default 100%\n const resolvedHeight = height ?? style?.height ?? '100%';\n\n // Get component settings from theme with fallbacks\n const {\n primaryColor,\n backgroundColor,\n positiveChangeColor,\n negativeChangeColor\n } = conversionFunnelChartSettings;\n\n // Resolve bar color using getElementStyles with primaryColor as override\n const {\n color: barColor\n } = getElementStyles ? getElementStyles({\n index: 0,\n overrideColor: primaryColor\n }) : {\n color: primaryColor || '#000000'\n };\n\n // Determine change indicator color\n const isPositiveChange = changeIndicator?.startsWith('+');\n const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;\n\n // Create light background version of primary color if not set\n const barBackgroundColor = backgroundColor || hexToRgba(barColor, 0.08) || 'rgba(0, 0, 0, 0.08)';\n\n // Default main metric rendering function\n const renderDefaultMainMetric = () => /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsx(\"span\", {\n className: styles['main-rate'],\n children: formatPercentage(mainRate)\n }), changeIndicator && /*#__PURE__*/_jsx(\"span\", {\n className: styles['change-indicator'],\n style: {\n color: changeColor\n },\n children: changeIndicator\n })]\n });\n\n // Default tooltip rendering function\n const renderDefaultTooltip = step => /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsx(\"div\", {\n className: styles['tooltip-title'],\n children: step.label\n }), /*#__PURE__*/_jsxs(\"div\", {\n className: styles['tooltip-content'],\n children: [formatPercentage(step.rate), ` • ${step.count ?? 'no'} items`]\n })]\n });\n\n // Validate data\n const isDataValid = Boolean(steps && steps.length > 0);\n\n // Memoize metadata to prevent unnecessary re-registration\n const chartMetadata = useMemo(() => ({\n mainRate,\n changeIndicator,\n stepsCount: steps?.length || 0\n }), [mainRate, changeIndicator, steps?.length]);\n useChartRegistration({\n chartId,\n legendItems: [],\n chartType: 'conversion-funnel',\n isDataValid,\n metadata: chartMetadata\n });\n const prefersReducedMotion = usePrefersReducedMotion();\n\n // Handle empty or undefined data\n if (!isDataValid) {\n return /*#__PURE__*/_jsx(Stack, {\n direction: \"column\",\n className: clsx(styles.conversionFunnelChart, loading && styles.loading, className),\n style: {\n ...style,\n height: resolvedHeight\n },\n children: /*#__PURE__*/_jsx(\"div\", {\n className: styles['empty-state'],\n children: loading ? 'Loading...' : 'No data available'\n })\n });\n }\n\n // Calculate bar heights relative to the maximum (first step)\n const maxRate = Math.max(...steps.map(step => step.rate));\n return /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsxs(Stack, {\n direction: \"column\",\n ref: node => {\n // Set containerRef for @visx coordinate system\n portalContainerRef(node);\n chartRef.current = node;\n },\n className: clsx(styles.conversionFunnelChart, loading && styles.loading, className),\n style: {\n ...style,\n height: resolvedHeight\n },\n children: [renderMainMetric ? renderMainMetric({\n mainRate,\n changeIndicator,\n className: styles['main-metric'],\n changeColor\n }) : /*#__PURE__*/_jsx(\"div\", {\n className: styles['main-metric'],\n children: renderDefaultMainMetric()\n }), /*#__PURE__*/_jsx(\"div\", {\n className: styles['funnel-container'],\n children: steps.map((step, index) => {\n const barHeight = step.rate / maxRate * 100;\n const {\n isBlurred\n } = getStepState(step.id);\n return /*#__PURE__*/_jsxs(\"div\", {\n className: clsx(styles['funnel-step'], isBlurred && styles.blurred),\n children: [/*#__PURE__*/_jsxs(\"div\", {\n className: styles['step-header'],\n children: [renderStepLabel ? renderStepLabel({\n step,\n index,\n className: styles['step-label']\n }) : /*#__PURE__*/_jsx(\"span\", {\n className: styles['step-label'],\n children: step.label\n }), renderStepRate ? renderStepRate({\n step,\n index,\n className: styles['step-rate']\n }) : /*#__PURE__*/_jsx(\"span\", {\n className: styles['step-rate'],\n children: formatPercentage(step.rate)\n })]\n }), /*#__PURE__*/_jsx(\"div\", {\n className: clsx(styles['bar-container'], isBlurred && styles.disabled),\n onClick: stepHandlers.get(step.id)?.onClick,\n onKeyDown: stepHandlers.get(step.id)?.onKeyDown,\n role: \"button\",\n tabIndex: isBlurred ? -1 : 0,\n \"aria-label\": step.label,\n style: {\n backgroundColor: barBackgroundColor\n },\n children: /*#__PURE__*/_jsx(\"div\", {\n className: clsx(styles['funnel-bar'], {\n [styles['funnel-bar--animated']]: animation && !loading && !prefersReducedMotion\n }),\n style: {\n height: `${barHeight}%`,\n backgroundColor: barColor\n }\n })\n })]\n }, step.id);\n })\n })]\n }), tooltipOpen && tooltipData && (() => {\n const tooltipContent = renderTooltip ? renderTooltip({\n step: tooltipData,\n index: steps.findIndex(s => s.id === tooltipData.id),\n top: tooltipTop,\n left: tooltipLeft,\n className: styles['tooltip-wrapper']\n }) : renderDefaultTooltip(tooltipData);\n\n // Don't render tooltip if renderTooltip returns falsy\n if (!tooltipContent) return null;\n return /*#__PURE__*/_jsx(TooltipInPortal\n // set this to random so it correctly updates with parent bounds\n , {\n top: tooltipTop,\n left: tooltipLeft,\n className: styles['tooltip-wrapper'],\n children: tooltipContent\n }, Math.random());\n })()]\n });\n};\n\n/**\n * ConversionFunnelChart component with provider wrapper\n *\n * @param props - Component props\n * @return JSX element representing the conversion funnel chart\n */\nconst ConversionFunnelChartWithProvider = props => {\n const existingContext = useContext(GlobalChartsContext);\n\n // If we're already in a GlobalChartsProvider context, don't create a new one\n if (existingContext) {\n return /*#__PURE__*/_jsx(ConversionFunnelChartInternal, {\n ...props\n });\n }\n\n // Otherwise, create our own GlobalChartsProvider\n return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n children: /*#__PURE__*/_jsx(ConversionFunnelChartInternal, {\n ...props\n })\n });\n};\nConversionFunnelChartWithProvider.displayName = 'ConversionFunnelChart';\nexport { ConversionFunnelChartWithProvider as default };","import 'css-chunk:src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss';export default {\n \"conversionFunnelChart\": \"a8ccharts-lK-YNK\",\n \"loading\": \"a8ccharts-DbHKK5\",\n \"main-metric\": \"a8ccharts-61WPYr\",\n \"main-rate\": \"a8ccharts-RRRI6x\",\n \"change-indicator\": \"a8ccharts-661iwx\",\n \"funnel-container\": \"a8ccharts-Z7EGnW\",\n \"funnel-step\": \"a8ccharts-VqFY0l\",\n \"blurred\": \"a8ccharts-7dTRBs\",\n \"step-header\": \"a8ccharts-2JsQiV\",\n \"step-label\": \"a8ccharts-6OabC4\",\n \"step-rate\": \"a8ccharts-9wSZ6n\",\n \"bar-container\": \"a8ccharts-sSmCTi\",\n \"disabled\": \"a8ccharts-PLWVAW\",\n \"funnel-bar\": \"a8ccharts-EzczI-\",\n \"selected\": \"a8ccharts-wNpZEu\",\n \"funnel-bar--animated\": \"a8ccharts-68HQJl\",\n \"stretch\": \"a8ccharts-CmtieZ\",\n \"tooltip-wrapper\": \"a8ccharts-2TeoCn\",\n \"tooltip-title\": \"a8ccharts-jkRitH\",\n \"tooltip-content\": \"a8ccharts-8jgT-3\",\n \"empty-state\": \"a8ccharts-Ml6MMr\"\n};","import { useCallback, useState } from 'react';\n\n/**\n * Custom hook to manage funnel bar selection state and interactions\n * @param hideTooltip - Function to hide tooltip when selection is cleared\n * @return Object containing selection state and event handlers\n */\nexport const useFunnelSelection = ( hideTooltip?: () => void ) => {\n\tconst [ clickedStep, setClickedStep ] = useState< string | null >( null );\n\n\t// Handle bar click\n\tconst handleBarClick = useCallback(\n\t\t( stepId: string ) => {\n\t\t\tif ( clickedStep === stepId ) {\n\t\t\t\t// If clicking the same step, deselect it\n\t\t\t\tsetClickedStep( null );\n\t\t\t\thideTooltip?.();\n\t\t\t} else {\n\t\t\t\t// Otherwise, select this step\n\t\t\t\tsetClickedStep( stepId );\n\t\t\t}\n\t\t},\n\t\t[ clickedStep, hideTooltip ]\n\t);\n\n\t// Handle bar keydown\n\tconst handleBarKeyDown = useCallback(\n\t\t( stepId: string, event: React.KeyboardEvent ) => {\n\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( clickedStep === stepId ) {\n\t\t\t\t\tsetClickedStep( null );\n\t\t\t\t\thideTooltip?.();\n\t\t\t\t} else {\n\t\t\t\t\tsetClickedStep( stepId );\n\t\t\t\t}\n\t\t\t} else if ( event.key === 'Escape' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetClickedStep( null );\n\t\t\t\thideTooltip?.();\n\t\t\t}\n\t\t},\n\t\t[ clickedStep, hideTooltip ]\n\t);\n\n\t// Clear selection (for chart-level click)\n\tconst clearSelection = useCallback( () => {\n\t\tsetClickedStep( null );\n\t\thideTooltip?.();\n\t}, [ hideTooltip ] );\n\n\t// Get step state helpers\n\tconst getStepState = useCallback(\n\t\t( stepId: string ) => ( {\n\t\t\tisClicked: clickedStep === stepId,\n\t\t\tisBlurred: clickedStep !== null && clickedStep !== stepId,\n\t\t} ),\n\t\t[ clickedStep ]\n\t);\n\n\treturn {\n\t\tclickedStep,\n\t\thandleBarClick,\n\t\thandleBarKeyDown,\n\t\tclearSelection,\n\t\tgetStepState,\n\t};\n};\n"]}
@@ -1,11 +1,11 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _chunkLSV7F26Bcjs = require('../../chunk-LSV7F26B.cjs');
4
+ var _chunkEJJO2QNBcjs = require('../../chunk-EJJO2QNB.cjs');
5
5
  require('../../chunk-ZVGEDXDP.cjs');
6
6
  require('../../chunk-EMMSS5I5.cjs');
7
7
 
8
8
 
9
9
 
10
- exports.Legend = _chunkLSV7F26Bcjs.Legend; exports.useChartLegendItems = _chunkLSV7F26Bcjs.useChartLegendItems;
10
+ exports.Legend = _chunkEJJO2QNBcjs.Legend; exports.useChartLegendItems = _chunkEJJO2QNBcjs.useChartLegendItems;
11
11
  //# sourceMappingURL=index.cjs.map
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Legend,
3
3
  useChartLegendItems
4
- } from "../../chunk-AWNCAKZY.js";
4
+ } from "../../chunk-32ESS4MV.js";
5
5
  import "../../chunk-TE63Y5PX.js";
6
6
  import "../../chunk-G3PMV62Z.js";
7
7
  export {
@@ -11,7 +11,7 @@
11
11
 
12
12
 
13
13
 
14
- var _chunkLSV7F26Bcjs = require('../chunk-LSV7F26B.cjs');
14
+ var _chunkEJJO2QNBcjs = require('../chunk-EJJO2QNB.cjs');
15
15
  require('../chunk-ZVGEDXDP.cjs');
16
16
  require('../chunk-EMMSS5I5.cjs');
17
17
 
@@ -27,5 +27,5 @@ require('../chunk-EMMSS5I5.cjs');
27
27
 
28
28
 
29
29
 
30
- exports.useChartDataTransform = _chunkLSV7F26Bcjs.useChartDataTransform; exports.useChartMargin = _chunkLSV7F26Bcjs.useChartMargin; exports.useChartMouseHandler = _chunkLSV7F26Bcjs.useChartMouseHandler; exports.useDeepMemo = _chunkLSV7F26Bcjs.useDeepMemo; exports.useElementHeight = _chunkLSV7F26Bcjs.useElementHeight; exports.useHasLegendChild = _chunkLSV7F26Bcjs.useHasLegendChild; exports.useInteractiveLegendData = _chunkLSV7F26Bcjs.useInteractiveLegendData; exports.usePrefersReducedMotion = _chunkLSV7F26Bcjs.usePrefersReducedMotion; exports.useTextTruncation = _chunkLSV7F26Bcjs.useTextTruncation; exports.useTooltipPortalRelocator = _chunkLSV7F26Bcjs.useTooltipPortalRelocator; exports.useXYChartTheme = _chunkLSV7F26Bcjs.useXYChartTheme; exports.useZeroValueDisplay = _chunkLSV7F26Bcjs.useZeroValueDisplay;
30
+ exports.useChartDataTransform = _chunkEJJO2QNBcjs.useChartDataTransform; exports.useChartMargin = _chunkEJJO2QNBcjs.useChartMargin; exports.useChartMouseHandler = _chunkEJJO2QNBcjs.useChartMouseHandler; exports.useDeepMemo = _chunkEJJO2QNBcjs.useDeepMemo; exports.useElementHeight = _chunkEJJO2QNBcjs.useElementHeight; exports.useHasLegendChild = _chunkEJJO2QNBcjs.useHasLegendChild; exports.useInteractiveLegendData = _chunkEJJO2QNBcjs.useInteractiveLegendData; exports.usePrefersReducedMotion = _chunkEJJO2QNBcjs.usePrefersReducedMotion; exports.useTextTruncation = _chunkEJJO2QNBcjs.useTextTruncation; exports.useTooltipPortalRelocator = _chunkEJJO2QNBcjs.useTooltipPortalRelocator; exports.useXYChartTheme = _chunkEJJO2QNBcjs.useXYChartTheme; exports.useZeroValueDisplay = _chunkEJJO2QNBcjs.useZeroValueDisplay;
31
31
  //# sourceMappingURL=index.cjs.map
@@ -11,7 +11,7 @@ import {
11
11
  useTooltipPortalRelocator,
12
12
  useXYChartTheme,
13
13
  useZeroValueDisplay
14
- } from "../chunk-AWNCAKZY.js";
14
+ } from "../chunk-32ESS4MV.js";
15
15
  import "../chunk-TE63Y5PX.js";
16
16
  import "../chunk-G3PMV62Z.js";
17
17
  export {
package/dist/index.cjs CHANGED
@@ -1,49 +1,49 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _chunkHNEG3EFJcjs = require('./chunk-HNEG3EFJ.cjs');
4
+ var _chunkFIFSYVN6cjs = require('./chunk-FIFSYVN6.cjs');
5
5
 
6
6
 
7
7
 
8
- var _chunk4YYROZDJcjs = require('./chunk-4YYROZDJ.cjs');
8
+ var _chunkJL4ZKKZUcjs = require('./chunk-JL4ZKKZU.cjs');
9
9
  require('./chunk-7OZEQ5HE.cjs');
10
10
 
11
11
 
12
12
 
13
- var _chunkRSYD434Gcjs = require('./chunk-RSYD434G.cjs');
13
+ var _chunkTKPK4RFScjs = require('./chunk-TKPK4RFS.cjs');
14
14
  require('./chunk-2A34OA5O.cjs');
15
15
  require('./chunk-RCY6XLGU.cjs');
16
16
 
17
17
 
18
18
 
19
- var _chunkGBDFC74Ucjs = require('./chunk-GBDFC74U.cjs');
19
+ var _chunkLTPJPIDPcjs = require('./chunk-LTPJPIDP.cjs');
20
20
 
21
21
 
22
22
 
23
- var _chunk66BXSWMWcjs = require('./chunk-66BXSWMW.cjs');
23
+ var _chunkFY325WQ4cjs = require('./chunk-FY325WQ4.cjs');
24
24
 
25
25
 
26
26
  var _chunkI2276W3Icjs = require('./chunk-I2276W3I.cjs');
27
27
 
28
28
 
29
29
 
30
- var _chunk5N77S5N3cjs = require('./chunk-5N77S5N3.cjs');
30
+ var _chunkQ6G3BGCLcjs = require('./chunk-Q6G3BGCL.cjs');
31
31
 
32
32
 
33
33
 
34
- var _chunkCERFRCXDcjs = require('./chunk-CERFRCXD.cjs');
34
+ var _chunkIHESL7H5cjs = require('./chunk-IHESL7H5.cjs');
35
35
 
36
36
 
37
37
  var _chunkY3NNQMAXcjs = require('./chunk-Y3NNQMAX.cjs');
38
38
 
39
39
 
40
- var _chunkKMYJJTSRcjs = require('./chunk-KMYJJTSR.cjs');
40
+ var _chunkXCXAWMJQcjs = require('./chunk-XCXAWMJQ.cjs');
41
41
  require('./chunk-SH32YSZO.cjs');
42
42
  require('./chunk-I5467ZJ5.cjs');
43
43
 
44
44
 
45
45
 
46
- var _chunkZXEFMKVPcjs = require('./chunk-ZXEFMKVP.cjs');
46
+ var _chunkNGHXTIUEcjs = require('./chunk-NGHXTIUE.cjs');
47
47
  require('./chunk-7QDEU3KN.cjs');
48
48
 
49
49
 
@@ -53,7 +53,7 @@ require('./chunk-7QDEU3KN.cjs');
53
53
 
54
54
 
55
55
 
56
- var _chunkLSV7F26Bcjs = require('./chunk-LSV7F26B.cjs');
56
+ var _chunkEJJO2QNBcjs = require('./chunk-EJJO2QNB.cjs');
57
57
  require('./chunk-ZVGEDXDP.cjs');
58
58
  require('./chunk-EMMSS5I5.cjs');
59
59
 
@@ -84,5 +84,5 @@ require('./chunk-EMMSS5I5.cjs');
84
84
 
85
85
 
86
86
 
87
- exports.BarChart = _chunkCERFRCXDcjs.BarChartResponsive; exports.BarChartUnresponsive = _chunkCERFRCXDcjs.BarChart; exports.BarListChart = _chunk5N77S5N3cjs.BarListChartResponsive; exports.BarListChartUnresponsive = _chunk5N77S5N3cjs.BarListChart; exports.BaseTooltip = _chunkY3NNQMAXcjs.BaseTooltip; exports.ConversionFunnelChart = _chunkKMYJJTSRcjs.ConversionFunnelChartWithProvider; exports.GeoChart = _chunkZXEFMKVPcjs.GeoChartResponsive; exports.GeoChartUnresponsive = _chunkZXEFMKVPcjs.GeoChartWithProvider; exports.GlobalChartsContext = _chunkLSV7F26Bcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkLSV7F26Bcjs.GlobalChartsProvider; exports.LeaderboardChart = _chunkHNEG3EFJcjs.LeaderboardChartResponsive; exports.LeaderboardChartUnresponsive = _chunkHNEG3EFJcjs.LeaderboardChart; exports.Legend = _chunkLSV7F26Bcjs.Legend; exports.LineChart = _chunk66BXSWMWcjs.LineChartResponsive; exports.LineChartUnresponsive = _chunk66BXSWMWcjs.LineChart; exports.PieChart = _chunk4YYROZDJcjs.PieChartResponsive; exports.PieChartUnresponsive = _chunk4YYROZDJcjs.PieChart; exports.PieSemiCircleChart = _chunkRSYD434Gcjs.PieSemiCircleChartResponsive; exports.PieSemiCircleChartUnresponsive = _chunkRSYD434Gcjs.PieSemiCircleChart; exports.Sparkline = _chunkGBDFC74Ucjs.Sparkline; exports.SparklineUnresponsive = _chunkGBDFC74Ucjs.SparklineUnresponsive; exports.ThemeProvider = _chunkLSV7F26Bcjs.GlobalChartsProvider; exports.TrendIndicator = _chunkI2276W3Icjs.TrendIndicator; exports.defaultTheme = _chunkLSV7F26Bcjs.defaultTheme; exports.useChartLegendItems = _chunkLSV7F26Bcjs.useChartLegendItems; exports.useGlobalChartsContext = _chunkLSV7F26Bcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkLSV7F26Bcjs.useGlobalChartsTheme;
87
+ exports.BarChart = _chunkIHESL7H5cjs.BarChartResponsive; exports.BarChartUnresponsive = _chunkIHESL7H5cjs.BarChart; exports.BarListChart = _chunkQ6G3BGCLcjs.BarListChartResponsive; exports.BarListChartUnresponsive = _chunkQ6G3BGCLcjs.BarListChart; exports.BaseTooltip = _chunkY3NNQMAXcjs.BaseTooltip; exports.ConversionFunnelChart = _chunkXCXAWMJQcjs.ConversionFunnelChartWithProvider; exports.GeoChart = _chunkNGHXTIUEcjs.GeoChartResponsive; exports.GeoChartUnresponsive = _chunkNGHXTIUEcjs.GeoChartWithProvider; exports.GlobalChartsContext = _chunkEJJO2QNBcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkEJJO2QNBcjs.GlobalChartsProvider; exports.LeaderboardChart = _chunkFIFSYVN6cjs.LeaderboardChartResponsive; exports.LeaderboardChartUnresponsive = _chunkFIFSYVN6cjs.LeaderboardChart; exports.Legend = _chunkEJJO2QNBcjs.Legend; exports.LineChart = _chunkFY325WQ4cjs.LineChartResponsive; exports.LineChartUnresponsive = _chunkFY325WQ4cjs.LineChart; exports.PieChart = _chunkJL4ZKKZUcjs.PieChartResponsive; exports.PieChartUnresponsive = _chunkJL4ZKKZUcjs.PieChart; exports.PieSemiCircleChart = _chunkTKPK4RFScjs.PieSemiCircleChartResponsive; exports.PieSemiCircleChartUnresponsive = _chunkTKPK4RFScjs.PieSemiCircleChart; exports.Sparkline = _chunkLTPJPIDPcjs.Sparkline; exports.SparklineUnresponsive = _chunkLTPJPIDPcjs.SparklineUnresponsive; exports.ThemeProvider = _chunkEJJO2QNBcjs.GlobalChartsProvider; exports.TrendIndicator = _chunkI2276W3Icjs.TrendIndicator; exports.defaultTheme = _chunkEJJO2QNBcjs.defaultTheme; exports.useChartLegendItems = _chunkEJJO2QNBcjs.useChartLegendItems; exports.useGlobalChartsContext = _chunkEJJO2QNBcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkEJJO2QNBcjs.useGlobalChartsTheme;
88
88
  //# sourceMappingURL=index.cjs.map
package/dist/index.js CHANGED
@@ -1,49 +1,49 @@
1
1
  import {
2
2
  LeaderboardChart,
3
3
  LeaderboardChartResponsive
4
- } from "./chunk-PGJAZN2H.js";
4
+ } from "./chunk-DBY6C4O2.js";
5
5
  import {
6
6
  PieChart,
7
7
  PieChartResponsive
8
- } from "./chunk-KKPZ4MVF.js";
8
+ } from "./chunk-LT4YOIMM.js";
9
9
  import "./chunk-NFRB2POF.js";
10
10
  import {
11
11
  PieSemiCircleChart,
12
12
  PieSemiCircleChartResponsive
13
- } from "./chunk-CMHPXSCI.js";
13
+ } from "./chunk-7TQSPLIN.js";
14
14
  import "./chunk-KXRWNFQJ.js";
15
15
  import "./chunk-6CCZL2JJ.js";
16
16
  import {
17
17
  Sparkline,
18
18
  SparklineUnresponsive
19
- } from "./chunk-WMWAUOQ4.js";
19
+ } from "./chunk-KHRPRH4V.js";
20
20
  import {
21
21
  LineChart,
22
22
  LineChartResponsive
23
- } from "./chunk-R23BFDIW.js";
23
+ } from "./chunk-DLSUC7RN.js";
24
24
  import {
25
25
  TrendIndicator
26
26
  } from "./chunk-XWYZIFZW.js";
27
27
  import {
28
28
  BarListChart,
29
29
  BarListChartResponsive
30
- } from "./chunk-M7PRGJFE.js";
30
+ } from "./chunk-AFWQR3SM.js";
31
31
  import {
32
32
  BarChart,
33
33
  BarChartResponsive
34
- } from "./chunk-FZYJM5PN.js";
34
+ } from "./chunk-KXSLMOW5.js";
35
35
  import {
36
36
  BaseTooltip
37
37
  } from "./chunk-BPYKWMI7.js";
38
38
  import {
39
39
  ConversionFunnelChartWithProvider
40
- } from "./chunk-EBDUXL5K.js";
40
+ } from "./chunk-X6GX4QUJ.js";
41
41
  import "./chunk-MEIVKY4K.js";
42
42
  import "./chunk-SEKPIG5K.js";
43
43
  import {
44
44
  GeoChartResponsive,
45
45
  GeoChartWithProvider
46
- } from "./chunk-ZY4FXLMM.js";
46
+ } from "./chunk-PCOI2GT5.js";
47
47
  import "./chunk-TYIH5LMV.js";
48
48
  import {
49
49
  GlobalChartsContext,
@@ -53,7 +53,7 @@ import {
53
53
  useChartLegendItems,
54
54
  useGlobalChartsContext,
55
55
  useGlobalChartsTheme
56
- } from "./chunk-AWNCAKZY.js";
56
+ } from "./chunk-32ESS4MV.js";
57
57
  import "./chunk-TE63Y5PX.js";
58
58
  import "./chunk-G3PMV62Z.js";
59
59
  export {
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- var _chunkLSV7F26Bcjs = require('../chunk-LSV7F26B.cjs');
9
+ var _chunkEJJO2QNBcjs = require('../chunk-EJJO2QNB.cjs');
10
10
  require('../chunk-ZVGEDXDP.cjs');
11
11
  require('../chunk-EMMSS5I5.cjs');
12
12
 
@@ -17,5 +17,5 @@ require('../chunk-EMMSS5I5.cjs');
17
17
 
18
18
 
19
19
 
20
- exports.GlobalChartsContext = _chunkLSV7F26Bcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkLSV7F26Bcjs.GlobalChartsProvider; exports.defaultTheme = _chunkLSV7F26Bcjs.defaultTheme; exports.useChartId = _chunkLSV7F26Bcjs.useChartId; exports.useChartRegistration = _chunkLSV7F26Bcjs.useChartRegistration; exports.useGlobalChartsContext = _chunkLSV7F26Bcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkLSV7F26Bcjs.useGlobalChartsTheme;
20
+ exports.GlobalChartsContext = _chunkEJJO2QNBcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkEJJO2QNBcjs.GlobalChartsProvider; exports.defaultTheme = _chunkEJJO2QNBcjs.defaultTheme; exports.useChartId = _chunkEJJO2QNBcjs.useChartId; exports.useChartRegistration = _chunkEJJO2QNBcjs.useChartRegistration; exports.useGlobalChartsContext = _chunkEJJO2QNBcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkEJJO2QNBcjs.useGlobalChartsTheme;
21
21
  //# sourceMappingURL=index.cjs.map
@@ -6,7 +6,7 @@ import {
6
6
  useChartRegistration,
7
7
  useGlobalChartsContext,
8
8
  useGlobalChartsTheme
9
- } from "../chunk-AWNCAKZY.js";
9
+ } from "../chunk-32ESS4MV.js";
10
10
  import "../chunk-TE63Y5PX.js";
11
11
  import "../chunk-G3PMV62Z.js";
12
12
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/charts",
3
- "version": "0.56.4",
3
+ "version": "0.56.5",
4
4
  "description": "Display charts within Automattic products.",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
6
6
  "bugs": {
@@ -180,7 +180,7 @@
180
180
  "typecheck": "tsc --noEmit"
181
181
  },
182
182
  "dependencies": {
183
- "@automattic/number-formatters": "^1.0.18",
183
+ "@automattic/number-formatters": "^1.1.0",
184
184
  "@babel/runtime": "7.28.6",
185
185
  "@react-spring/web": "9.7.5",
186
186
  "@visx/annotation": "^3.12.0",
@@ -102,6 +102,7 @@ describe( 'useChartMargin', () => {
102
102
  const height = 300;
103
103
  const theme = baseTheme;
104
104
  const { result } = renderHook( () => useChartMargin( height, options, data, theme ) );
105
+ // 12px font + 8 tick length = 20
105
106
  expect( result.current.top ).toBe( 20 );
106
107
  expect( result.current.bottom ).toBe( 10 );
107
108
  } );
@@ -113,7 +114,50 @@ describe( 'useChartMargin', () => {
113
114
  const { result } = renderHook( () => useChartMargin( height, options, data, theme ) );
114
115
  expect( result.current.left ).toBe( 48 );
115
116
  expect( result.current.top ).toBe( 10 );
117
+ // 12px font + 8 tick length = 20
116
118
  expect( result.current.bottom ).toBe( 20 );
117
119
  expect( result.current.right ).toBe( 20 );
118
120
  } );
121
+
122
+ it( 'increases bottom margin when X-axis tick labels are larger', () => {
123
+ const options = optionsBase;
124
+ const height = 300;
125
+ const theme = {
126
+ ...baseTheme,
127
+ axisStyles: {
128
+ ...baseTheme.axisStyles,
129
+ x: {
130
+ top: { axisLabel: { fontSize: 10 }, tickLength: 4 } as unknown as never,
131
+ bottom: { axisLabel: { fontSize: 16 }, tickLength: 10 } as unknown as never,
132
+ },
133
+ },
134
+ } as XYChartTheme;
135
+
136
+ const { result } = renderHook( () => useChartMargin( height, options, data, theme ) );
137
+
138
+ // 16px font + 10px tick length = 26, which is larger than the 20px default bottom margin.
139
+ expect( result.current.bottom ).toBe( 26 );
140
+ } );
141
+
142
+ it( 'falls back to svgLabelSmall font size when X-axis axisLabel font size is missing', () => {
143
+ const options = optionsBase;
144
+ const height = 300;
145
+ const theme = {
146
+ ...baseTheme,
147
+ svgLabelSmall: { fontSize: 18 } as unknown as never,
148
+ axisStyles: {
149
+ ...baseTheme.axisStyles,
150
+ x: {
151
+ top: { axisLabel: {}, tickLength: 5 } as unknown as never,
152
+ bottom: { axisLabel: {}, tickLength: 7 } as unknown as never,
153
+ },
154
+ },
155
+ } as XYChartTheme;
156
+
157
+ const { result } = renderHook( () => useChartMargin( height, options, data, theme ) );
158
+
159
+ // svgLabelSmall font size (18) + 7px tick length = 25.
160
+ // This is larger than the 20px default bottom margin, so it should be used.
161
+ expect( result.current.bottom ).toBe( 25 );
162
+ } );
119
163
  } );
@@ -4,6 +4,79 @@ import { getLongestTickWidth } from '../utils';
4
4
  import type { BaseChartProps, DataPointDate, SeriesData } from '../types';
5
5
  import type { XYChartTheme } from '@visx/xychart';
6
6
 
7
+ /**
8
+ * Base top margin used when no dynamic adjustments are necessary.
9
+ */
10
+ const DEFAULT_MARGIN_TOP = 10;
11
+
12
+ /**
13
+ * Base right margin used when no dynamic adjustments are necessary.
14
+ */
15
+ const DEFAULT_MARGIN_RIGHT = 20;
16
+
17
+ /**
18
+ * Base bottom margin used for charts with a bottom X-axis.
19
+ * This is large enough for typical font sizes and will be increased
20
+ * dynamically when tick labels require more space.
21
+ */
22
+ const DEFAULT_MARGIN_BOTTOM = 20;
23
+
24
+ /**
25
+ * Base left margin used when no dynamic adjustments are necessary.
26
+ */
27
+ const DEFAULT_MARGIN_LEFT = 20;
28
+
29
+ /**
30
+ * Bottom margin to use when the X-axis is rendered at the top.
31
+ * We only need a small buffer below the chart in that case.
32
+ */
33
+ const DEFAULT_BOTTOM_FOR_TOP_AXIS = 10;
34
+
35
+ /**
36
+ * Fallback font size used when we cannot derive a font size
37
+ * from the theme or axis styles for X-axis tick labels.
38
+ */
39
+ const DEFAULT_FONT_SIZE = 12;
40
+
41
+ /**
42
+ * Fallback tick length used when tickLength is not provided
43
+ * by the theme for either axis.
44
+ */
45
+ const DEFAULT_TICK_LENGTH = 8;
46
+
47
+ /**
48
+ * Fallback width used for Y-axis tick labels when we cannot
49
+ * measure them via getLongestTickWidth.
50
+ */
51
+ const DEFAULT_Y_TICK_WIDTH = 40;
52
+
53
+ const resolveFontSize = ( val?: number | string ): number | undefined => {
54
+ if ( typeof val === 'number' && ! isNaN( val ) ) {
55
+ return val;
56
+ }
57
+
58
+ if ( typeof val === 'string' ) {
59
+ const parsed = parseFloat( val );
60
+ return isNaN( parsed ) ? undefined : parsed;
61
+ }
62
+
63
+ return undefined;
64
+ };
65
+
66
+ const getXAxisLabelMetrics = ( theme: XYChartTheme, orientation: 'top' | 'bottom' ) => {
67
+ const xAxisStyles =
68
+ orientation === 'top' ? theme.axisStyles?.x?.top : theme.axisStyles?.x?.bottom;
69
+
70
+ const fontSize =
71
+ resolveFontSize( xAxisStyles?.axisLabel?.fontSize ) ||
72
+ resolveFontSize( theme.svgLabelSmall?.fontSize ) ||
73
+ DEFAULT_FONT_SIZE;
74
+
75
+ const tickLength = xAxisStyles?.tickLength ?? DEFAULT_TICK_LENGTH;
76
+
77
+ return { fontSize, tickLength };
78
+ };
79
+
7
80
  export const useChartMargin = (
8
81
  height: number,
9
82
  options: BaseChartProps[ 'options' ],
@@ -34,8 +107,12 @@ export const useChartMargin = (
34
107
 
35
108
  return useMemo( () => {
36
109
  // Default margin is for bottom axis labels.
37
- const defaultMargin = { top: 10, right: 20, bottom: 20, left: 20 };
38
- const defaultTickWidth = 40;
110
+ const defaultMargin = {
111
+ top: DEFAULT_MARGIN_TOP,
112
+ right: DEFAULT_MARGIN_RIGHT,
113
+ bottom: DEFAULT_MARGIN_BOTTOM,
114
+ left: DEFAULT_MARGIN_LEFT,
115
+ };
39
116
 
40
117
  // Auto-calculate margin for y axis labels based on orientation and tick width.
41
118
  const yAxisOrientation = options.axis?.y?.orientation;
@@ -46,7 +123,7 @@ export const useChartMargin = (
46
123
  options.axis?.y?.tickFormat,
47
124
  yAxisStyles.axisLabel
48
125
  );
49
- const yMarginValue = ( yTickWidth ?? defaultTickWidth ) + ( yAxisStyles?.tickLength ?? 0 );
126
+ const yMarginValue = ( yTickWidth ?? DEFAULT_Y_TICK_WIDTH ) + ( yAxisStyles?.tickLength ?? 0 );
50
127
 
51
128
  if ( yAxisOrientation === 'right' ) {
52
129
  defaultMargin.right = yMarginValue;
@@ -54,9 +131,18 @@ export const useChartMargin = (
54
131
  defaultMargin.left = yMarginValue;
55
132
  }
56
133
 
57
- if ( options.axis?.x?.orientation === 'top' ) {
58
- defaultMargin.top = 20;
59
- defaultMargin.bottom = 10;
134
+ // Dynamically compute X-axis margin (bottom by default, or top if orientation is 'top').
135
+ // This mirrors Y-axis behavior where margin is based on label size and tick length,
136
+ // but keeps the padding minimal so consumers can control container spacing themselves.
137
+ const xOrientation = options.axis?.x?.orientation === 'top' ? 'top' : 'bottom';
138
+ const { fontSize, tickLength } = getXAxisLabelMetrics( theme, xOrientation );
139
+ const computedXMargin = fontSize + tickLength;
140
+
141
+ if ( xOrientation === 'top' ) {
142
+ defaultMargin.top = Math.max( defaultMargin.top, computedXMargin );
143
+ defaultMargin.bottom = DEFAULT_BOTTOM_FOR_TOP_AXIS;
144
+ } else {
145
+ defaultMargin.bottom = Math.max( defaultMargin.bottom, computedXMargin );
60
146
  }
61
147
 
62
148
  return defaultMargin;