@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',
	},
	content: {
		fontWeight: 'normal',
	},
};

/**
 * @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 ) {
	return string.charAt( 0 ).toUpperCase() + string.slice( 1 );
}

/**
 * @module Tooltip
 * @description The tooltip component for the chart.
 *
 * @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.
 *
 * @return {JSX.Element|null} The tooltip component.
 */
const Tooltip = ( { active, payload, label } ) => {
	if ( active && payload && payload.length ) {
		return (
			<div style={ tooltipStyles.container }>
				<div style={ tooltipStyles.label }>{ label }</div>
				{ payload.map( ( entry, index ) => (
					<div key={ index } style={ tooltipStyles.content }>
						<span>{ capitalizeFirstLetter( entry.name ) }: </span>
						<span>{ entry.value }</span>
					</div>
				) ) }
			</div>
		);
	}

	return null;
};

export default Tooltip;