@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.
- package/CHANGELOG.md +5 -0
- package/dist/charts/bar-chart/index.cjs +3 -3
- package/dist/charts/bar-chart/index.js +2 -2
- package/dist/charts/bar-list-chart/index.cjs +4 -4
- package/dist/charts/bar-list-chart/index.js +3 -3
- package/dist/charts/conversion-funnel-chart/index.cjs +3 -3
- package/dist/charts/conversion-funnel-chart/index.js +2 -2
- package/dist/charts/geo-chart/index.cjs +3 -3
- package/dist/charts/geo-chart/index.js +2 -2
- package/dist/charts/leaderboard-chart/index.cjs +3 -3
- package/dist/charts/leaderboard-chart/index.js +2 -2
- package/dist/charts/line-chart/index.cjs +3 -3
- package/dist/charts/line-chart/index.js +2 -2
- package/dist/charts/pie-chart/index.cjs +3 -3
- package/dist/charts/pie-chart/index.js +2 -2
- package/dist/charts/pie-semi-circle-chart/index.cjs +3 -3
- package/dist/charts/pie-semi-circle-chart/index.js +2 -2
- package/dist/charts/sparkline/index.cjs +4 -4
- package/dist/charts/sparkline/index.js +3 -3
- package/dist/{chunk-AWNCAKZY.js → chunk-32ESS4MV.js} +44 -10
- package/dist/chunk-32ESS4MV.js.map +1 -0
- package/dist/{chunk-CMHPXSCI.js → chunk-7TQSPLIN.js} +2 -2
- package/dist/{chunk-M7PRGJFE.js → chunk-AFWQR3SM.js} +3 -3
- package/dist/{chunk-PGJAZN2H.js → chunk-DBY6C4O2.js} +2 -2
- package/dist/{chunk-R23BFDIW.js → chunk-DLSUC7RN.js} +2 -2
- package/dist/{chunk-LSV7F26B.cjs → chunk-EJJO2QNB.cjs} +61 -27
- package/dist/chunk-EJJO2QNB.cjs.map +1 -0
- package/dist/{chunk-HNEG3EFJ.cjs → chunk-FIFSYVN6.cjs} +16 -16
- package/dist/{chunk-HNEG3EFJ.cjs.map → chunk-FIFSYVN6.cjs.map} +1 -1
- package/dist/{chunk-66BXSWMW.cjs → chunk-FY325WQ4.cjs} +21 -21
- package/dist/{chunk-66BXSWMW.cjs.map → chunk-FY325WQ4.cjs.map} +1 -1
- package/dist/{chunk-CERFRCXD.cjs → chunk-IHESL7H5.cjs} +20 -20
- package/dist/{chunk-CERFRCXD.cjs.map → chunk-IHESL7H5.cjs.map} +1 -1
- package/dist/{chunk-4YYROZDJ.cjs → chunk-JL4ZKKZU.cjs} +16 -16
- package/dist/{chunk-4YYROZDJ.cjs.map → chunk-JL4ZKKZU.cjs.map} +1 -1
- package/dist/{chunk-WMWAUOQ4.js → chunk-KHRPRH4V.js} +3 -3
- package/dist/{chunk-FZYJM5PN.js → chunk-KXSLMOW5.js} +2 -2
- package/dist/{chunk-KKPZ4MVF.js → chunk-LT4YOIMM.js} +2 -2
- package/dist/{chunk-GBDFC74U.cjs → chunk-LTPJPIDP.cjs} +5 -5
- package/dist/{chunk-GBDFC74U.cjs.map → chunk-LTPJPIDP.cjs.map} +1 -1
- package/dist/{chunk-ZXEFMKVP.cjs → chunk-NGHXTIUE.cjs} +5 -5
- package/dist/{chunk-ZXEFMKVP.cjs.map → chunk-NGHXTIUE.cjs.map} +1 -1
- package/dist/{chunk-ZY4FXLMM.js → chunk-PCOI2GT5.js} +2 -2
- package/dist/{chunk-5N77S5N3.cjs → chunk-Q6G3BGCL.cjs} +6 -6
- package/dist/{chunk-5N77S5N3.cjs.map → chunk-Q6G3BGCL.cjs.map} +1 -1
- package/dist/{chunk-RSYD434G.cjs → chunk-TKPK4RFS.cjs} +15 -15
- package/dist/{chunk-RSYD434G.cjs.map → chunk-TKPK4RFS.cjs.map} +1 -1
- package/dist/{chunk-EBDUXL5K.js → chunk-X6GX4QUJ.js} +2 -2
- package/dist/{chunk-KMYJJTSR.cjs → chunk-XCXAWMJQ.cjs} +9 -9
- package/dist/{chunk-KMYJJTSR.cjs.map → chunk-XCXAWMJQ.cjs.map} +1 -1
- package/dist/components/legend/index.cjs +2 -2
- package/dist/components/legend/index.js +1 -1
- package/dist/hooks/index.cjs +2 -2
- package/dist/hooks/index.js +1 -1
- package/dist/index.cjs +11 -11
- package/dist/index.js +10 -10
- package/dist/providers/index.cjs +2 -2
- package/dist/providers/index.js +1 -1
- package/package.json +2 -2
- package/src/hooks/test/use-chart-margin.test.tsx +44 -0
- package/src/hooks/use-chart-margin.tsx +92 -6
- package/dist/chunk-AWNCAKZY.js.map +0 -1
- package/dist/chunk-LSV7F26B.cjs.map +0 -1
- /package/dist/{chunk-CMHPXSCI.js.map → chunk-7TQSPLIN.js.map} +0 -0
- /package/dist/{chunk-M7PRGJFE.js.map → chunk-AFWQR3SM.js.map} +0 -0
- /package/dist/{chunk-PGJAZN2H.js.map → chunk-DBY6C4O2.js.map} +0 -0
- /package/dist/{chunk-R23BFDIW.js.map → chunk-DLSUC7RN.js.map} +0 -0
- /package/dist/{chunk-WMWAUOQ4.js.map → chunk-KHRPRH4V.js.map} +0 -0
- /package/dist/{chunk-FZYJM5PN.js.map → chunk-KXSLMOW5.js.map} +0 -0
- /package/dist/{chunk-KKPZ4MVF.js.map → chunk-LT4YOIMM.js.map} +0 -0
- /package/dist/{chunk-ZY4FXLMM.js.map → chunk-PCOI2GT5.js.map} +0 -0
- /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
|
|
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 =
|
|
10
|
+
exports.Legend = _chunkEJJO2QNBcjs.Legend; exports.useChartLegendItems = _chunkEJJO2QNBcjs.useChartLegendItems;
|
|
11
11
|
//# sourceMappingURL=index.cjs.map
|
package/dist/hooks/index.cjs
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
var
|
|
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 =
|
|
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
|
package/dist/hooks/index.js
CHANGED
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
|
|
4
|
+
var _chunkFIFSYVN6cjs = require('./chunk-FIFSYVN6.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _chunkJL4ZKKZUcjs = require('./chunk-JL4ZKKZU.cjs');
|
|
9
9
|
require('./chunk-7OZEQ5HE.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
var
|
|
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
|
|
19
|
+
var _chunkLTPJPIDPcjs = require('./chunk-LTPJPIDP.cjs');
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
var
|
|
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
|
|
30
|
+
var _chunkQ6G3BGCLcjs = require('./chunk-Q6G3BGCL.cjs');
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
var
|
|
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
|
|
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
|
|
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
|
|
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 =
|
|
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-
|
|
4
|
+
} from "./chunk-DBY6C4O2.js";
|
|
5
5
|
import {
|
|
6
6
|
PieChart,
|
|
7
7
|
PieChartResponsive
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-LT4YOIMM.js";
|
|
9
9
|
import "./chunk-NFRB2POF.js";
|
|
10
10
|
import {
|
|
11
11
|
PieSemiCircleChart,
|
|
12
12
|
PieSemiCircleChartResponsive
|
|
13
|
-
} from "./chunk-
|
|
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-
|
|
19
|
+
} from "./chunk-KHRPRH4V.js";
|
|
20
20
|
import {
|
|
21
21
|
LineChart,
|
|
22
22
|
LineChartResponsive
|
|
23
|
-
} from "./chunk-
|
|
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-
|
|
30
|
+
} from "./chunk-AFWQR3SM.js";
|
|
31
31
|
import {
|
|
32
32
|
BarChart,
|
|
33
33
|
BarChartResponsive
|
|
34
|
-
} from "./chunk-
|
|
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-
|
|
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-
|
|
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-
|
|
56
|
+
} from "./chunk-32ESS4MV.js";
|
|
57
57
|
import "./chunk-TE63Y5PX.js";
|
|
58
58
|
import "./chunk-G3PMV62Z.js";
|
|
59
59
|
export {
|
package/dist/providers/index.cjs
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
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 =
|
|
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
|
package/dist/providers/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/charts",
|
|
3
|
-
"version": "0.56.
|
|
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
|
|
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 = {
|
|
38
|
-
|
|
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 ??
|
|
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
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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;
|