@gravityforms/components/react/admin/modules/Chart/common/Tooltip.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React } from '@gravityforms/libraries';

const tooltipStyles = {
	container: {
		backgroundColor: '#242748', // Dark blue background
		color: '#ffffff', // White text
		padding: '8px',
		borderRadius: '3px',
		position: 'relative',
		textAlign: 'left',
		fontSize: '12px',
	},
	label: {
		fontWeight: '600',
		marginBottom: '4px',
	},
	entry: {
		alignItems: 'center',
		display: 'flex',
		fontWeight: 'normal',
		gap: '6px',
	},
	swatch: {
		borderRadius: '2px',
		flexShrink: 0,
		height: '8px',
		width: '8px',
	},
};

/**
 * @function capitalizeFirstLetter
 * @description Capitalize the first letter of a string.
 *
 * @since 4.4.4
 *
 * @param {string} string The string to capitalize the first letter of.
 *
 * @return {string} The string with the first letter capitalized.
 */
function capitalizeFirstLetter( string ) {
	if ( ! string ) {
		return '';
	}

	return string.charAt( 0 ).toUpperCase() + string.slice( 1 );
}

/**
 * @function createChartTooltipContent
 * @description Creates a Recharts tooltip content renderer with optional formatters.
 *
 * @since 6.6.3
 *
 * @param {Object}   config                 Tooltip configuration.
 * @param {Function} config.labelFormatter  Optional formatter for the category label.
 * @param {Function} config.valueFormatter  Optional formatter for each series value.
 * @return {Function} Recharts tooltip content renderer.
 */
export const createChartTooltipContent = ( {
	labelFormatter = null,
	valueFormatter = null,
} = {} ) => ( tooltipProps ) => (
	<ChartTooltip
		{ ...tooltipProps }
		labelFormatter={ labelFormatter }
		valueFormatter={ valueFormatter }
	/>
);

/**
 * @function buildTooltipAttributes
 * @description Builds Recharts Tooltip props with shared defaults and CustomTooltip wiring.
 *
 * @since 6.6.3
 *
 * @param {Object}        config                      Tooltip build configuration.
 * @param {Object}        config.cursor               Default cursor configuration.
 * @param {Object}        config.tooltipProps         Consumer-provided tooltip props.
 * @param {boolean}       config.tooltipShared        Whether the tooltip is shared across series.
 * @param {Function|null} config.defaultValueFormatter Default value formatter when none is provided.
 *
 * @return {Object} Recharts Tooltip props.
 */
export const buildTooltipAttributes = ( {
	cursor,
	tooltipProps = {},
	tooltipShared = true,
	defaultValueFormatter = null,
} ) => {
	const {
		content: customContent,
		labelFormatter,
		formatter,
		itemSorter,
		shared,
		cursor: tooltipCursor,
		...restTooltipProps
	} = tooltipProps;

	const valueFormatter = formatter || defaultValueFormatter;

	return {
		content: customContent || createChartTooltipContent( {
			labelFormatter,
			valueFormatter,
		} ),
		cursor: tooltipCursor !== undefined ? tooltipCursor : cursor,
		formatter: valueFormatter,
		itemSorter,
		labelFormatter,
		shared: shared !== undefined ? shared : tooltipShared,
		...restTooltipProps,
	};
};

/**
 * @module ChartTooltip
 * @description The tooltip component for charts.
 *
 * @since 4.4.4
 *
 * @param {boolean}  active          Whether the tooltip is active.
 * @param {Array}    payload         The payload of the tooltip.
 * @param {string}   label           The label of the tooltip.
 * @param {Function} labelFormatter  Optional formatter for the category label.
 * @param {Function} valueFormatter  Optional formatter for each series value.
 *
 * @return {JSX.Element|null} The tooltip component.
 */
const ChartTooltip = ( {
	active,
	payload,
	label,
	labelFormatter = null,
	valueFormatter = null,
} ) => {
	if ( ! active || ! payload || ! payload.length ) {
		return null;
	}

	// Recharts Tooltip applies itemSorter before passing payload to custom content.
	const formattedLabel = labelFormatter ? labelFormatter( label, payload ) : label;

	return (
		<div style={ tooltipStyles.container }>
			{ formattedLabel !== null && formattedLabel !== undefined && formattedLabel !== '' && (
				<div style={ tooltipStyles.label }>{ formattedLabel }</div>
			) }
			{ payload.map( ( entry, index ) => {
				const defaultDisplayName = entry.name || entry.dataKey || '';
				const formattedEntry = valueFormatter
					? valueFormatter( entry.value, defaultDisplayName, entry )
					: entry.value;
				const displayValue = Array.isArray( formattedEntry )
					? formattedEntry[ 0 ]
					: formattedEntry;
				const displayName = Array.isArray( formattedEntry ) && formattedEntry.length > 1
					? formattedEntry[ 1 ]
					: defaultDisplayName;

				return (
					<div key={ index } style={ tooltipStyles.entry }>
						{ entry.color && (
							<span
								style={ {
									...tooltipStyles.swatch,
									backgroundColor: entry.color,
								} }
							/>
						) }
						<span>{ capitalizeFirstLetter( displayName ) }: </span>
						<span>{ displayValue }</span>
					</div>
				);
			} ) }
		</div>
	);
};

export default ChartTooltip;