@gravityforms/components/react/admin/modules/Chart/index.js

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

import { React } from '@gravityforms/libraries';
import Box from '../../elements/Box';
import Loader from '../Loaders/RingLoader';

const { Suspense, lazy } = React;

const loadChart = ( chartType ) => {
	switch ( chartType ) {
		case 'area':
			return lazy( () => import( './AreaChart' ) );
		default:
			throw new Error( `Unknown chart type: ${ chartType }` );
	}
};

/**
 * @module Chart
 * @description The Chart renderer component. Loads different chart types based on the type prop using dynamic imports.
 * Powered by Recharts.
 *
 * @since 4.4.5
 *
 * @param {object}              props                    The component and renderer props.
 * @param {number}              props.animationDuration  The duration of the reveal animation in milliseconds.
 * @param {object}              props.areaProps          The props to pass to each Area (can also override the presets we use). Check Recharts docs for all available.
 * @param {object}              props.cartesianGridProps The props to pass to the CartesianGrid (can also override the presets we use). Check Recharts docs for all available.
 * @param {object}              props.checkboxProps      The props to pass to each Checkbox. Check our docs for all available.
 * @param {node}                props.children           Any additional content to display below the chart.
 * @param {string}              props.cursorColor        The color of the cursor line in the chart that appears when the tooltip is hovered.
 * @param {object}              props.customAttributes   Custom attributes to apply to the chart wrapper.
 * @param {string|array|object} props.customClasses      Custom classes to apply to the chart wrapper.
 * @param {array}               props.data               The data to display in the chart. Check Recharts docs for formats.
 * @param {string}              props.gridColor          The color of the grid lines and the x and y axis.
 * @param {number|string}       props.height             The height of the chart.
 * @param {object}              props.legendProps        The props to pass to the Legend (can also override the presets we use). Check Recharts docs for all available.
 * @param {array}               props.options            The options to display as checkboxes to toggle the visibility of each data set.
 * @param {boolean}             props.showCheckboxes     Whether to show the checkboxes to toggle the visibility of each data set.
 * @param {boolean}             props.showLegend         Whether to show the legend.
 * @param {object}              props.tooltipProps       The props to pass to the Tooltip (can also override the presets we use). Check Recharts docs for all available.
 * @param {string}              props.type               The type of chart to render.
 * @param {number|string}       props.width              The width of the chart.
 * @param {object}              props.xAxisProps         The props to pass to the XAxis (can also override the presets we use). Check Recharts docs for all available.
 * @param {object}              props.yAxisProps         The props to pass to the YAxis (can also override the presets we use). Check Recharts docs for all available.
 * @param {object}              props.ref                The reference to the chart component.
 *
 * @return {JSX.Element|null} The Chart component.
 */
const Chart = ( props ) => {
	const {
		height = 400,
		type = 'area',
	} = props;
	const ChartComponent = loadChart( type );

	return (
		<Suspense fallback={ <Box
			display="flex"
			customAttributes={ { style: { alignItems: 'center', justifyContent: 'center' } } }
			y={ height }
		>
			<Loader foreground="#9092b2" />
		</Box> }>
			<ChartComponent { ...props } />
		</Suspense>
	);
};

export default Chart;