@automattic/charts 0.58.0 → 0.59.0

package/src/charts/pie-chart/test/pie-chart.test.tsx

@@ -7,8 +7,8 @@ describe( 'PieChart', () => {
 	const defaultProps = {
 		size: 500,
 		data: [
-			{ label: 'A', percentage: 50, value: 50 },
-			{ label: 'B', percentage: 50, value: 50 },
+			{ label: 'A', value: 50 },
+			{ label: 'B', value: 50 },
 		],
 	};
 
@@ -21,21 +21,21 @@ describe( 'PieChart', () => {
 	};
 
 	describe( 'Data Validation', () => {
-		test( 'validates total percentage equals 100', () => {
+		test( 'validates total value is greater than 0', () => {
 			renderWithTheme( {
 				data: [
-					{ label: 'A', percentage: 60, value: 60 },
-					{ label: 'B', percentage: 50, value: 50 },
+					{ label: 'A', value: 0 },
+					{ label: 'B', value: 0 },
 				],
 			} );
-			expect( screen.getByText( /invalid percentage total/i ) ).toBeInTheDocument();
+			expect( screen.getByText( /invalid data/i ) ).toBeInTheDocument();
 		} );
 
 		test( 'handles negative values', () => {
 			renderWithTheme( {
 				data: [
-					{ label: 'A', percentage: -30, value: -30 },
-					{ label: 'B', percentage: 130, value: 130 },
+					{ label: 'A', value: -30 },
+					{ label: 'B', value: 130 },
 				],
 			} );
 			expect( screen.getByText( /invalid data/i ) ).toBeInTheDocument();
@@ -48,7 +48,7 @@ describe( 'PieChart', () => {
 
 		test( 'handles single data point', () => {
 			renderWithTheme( {
-				data: [ { label: 'A', percentage: 100, value: 100 } ],
+				data: [ { label: 'A', value: 100 } ],
 			} );
 			// Use getAllByText since 'A' appears in both chart and legend
 			const labels = screen.getAllByText( 'A' );
@@ -157,10 +157,11 @@ describe( 'PieChart', () => {
 	} );
 
 	describe( 'Legend Value Display', () => {
+		// Values that give clean percentages: 60/100=60%, 23/100=23%, 17/100=17%
 		const testData = [
-			{ label: 'Windows', value: 80000, valueDisplay: '80K', percentage: 60 },
-			{ label: 'MacOS', value: 30000, valueDisplay: '30K', percentage: 23 },
-			{ label: 'Linux', value: 22000, valueDisplay: '22K', percentage: 17 },
+			{ label: 'Windows', value: 60, valueDisplay: '60' },
+			{ label: 'MacOS', value: 23, valueDisplay: '23' },
+			{ label: 'Linux', value: 17, valueDisplay: '17' },
 		];
 
 		test( 'shows percentage values by default when showLegend and showValues are enabled', () => {
@@ -170,7 +171,7 @@ describe( 'PieChart', () => {
 				// legendValueDisplay defaults to 'percentage'
 			} );
 
-			// Should display percentage values (using formatPercentage which shows "60%", "23%", "17%")
+			// Should display calculated percentages from values
 			expect( screen.getByText( '60%' ) ).toBeInTheDocument();
 			expect( screen.getByText( '23%' ) ).toBeInTheDocument();
 			expect( screen.getByText( '17%' ) ).toBeInTheDocument();
@@ -184,9 +185,9 @@ describe( 'PieChart', () => {
 			} );
 
 			// Should display localized numeric values
-			expect( screen.getByText( '80,000' ) ).toBeInTheDocument();
-			expect( screen.getByText( '30,000' ) ).toBeInTheDocument();
-			expect( screen.getByText( '22,000' ) ).toBeInTheDocument();
+			expect( screen.getByText( '60' ) ).toBeInTheDocument();
+			expect( screen.getByText( '23' ) ).toBeInTheDocument();
+			expect( screen.getByText( '17' ) ).toBeInTheDocument();
 		} );
 
 		test( 'shows formatted values when legendValueDisplay is set to "valueDisplay"', () => {
@@ -197,9 +198,9 @@ describe( 'PieChart', () => {
 			} );
 
 			// Should display formatted values (valueDisplay field)
-			expect( screen.getByText( '80K' ) ).toBeInTheDocument();
-			expect( screen.getByText( '30K' ) ).toBeInTheDocument();
-			expect( screen.getByText( '22K' ) ).toBeInTheDocument();
+			expect( screen.getByText( '60' ) ).toBeInTheDocument();
+			expect( screen.getByText( '23' ) ).toBeInTheDocument();
+			expect( screen.getByText( '17' ) ).toBeInTheDocument();
 		} );
 
 		test( 'shows no values when legendValueDisplay is set to "none"', () => {
@@ -222,9 +223,12 @@ describe( 'PieChart', () => {
 	} );
 
 	describe( 'Tooltip Functionality', () => {
+		// Values: 80000 + 30000 = 110000
+		// Windows: 80000/110000 = 72.727...%
+		// MacOS: 30000/110000 = 27.272...%
 		const testData = [
-			{ label: 'Windows', value: 80000, valueDisplay: '80K', percentage: 70 },
-			{ label: 'MacOS', value: 30000, valueDisplay: '30K', percentage: 30 },
+			{ label: 'Windows', value: 80000, valueDisplay: '80K' },
+			{ label: 'MacOS', value: 30000, valueDisplay: '30K' },
 		];
 
 		test( 'does not show tooltip when withTooltips is false', async () => {
@@ -314,7 +318,7 @@ describe( 'PieChart', () => {
 
 		test( 'tooltip shows valueDisplay when available, falls back to value', async () => {
 			const user = userEvent.setup();
-			const dataWithoutValueDisplay = [ { label: 'Test', value: 42, percentage: 100 } ];
+			const dataWithoutValueDisplay = [ { label: 'Test', value: 42 } ];
 
 			renderWithTheme( {
 				data: dataWithoutValueDisplay,
@@ -356,15 +360,18 @@ describe( 'PieChart', () => {
 			expect( customTooltipRenderer ).toHaveBeenCalled();
 
 			// Verify the renderer received correct parameters
+			// Percentage is calculated from values: 80000 / (80000 + 30000) = 72.727...%
 			expect( customTooltipRenderer ).toHaveBeenCalledWith(
 				expect.objectContaining( {
 					tooltipData: expect.objectContaining( {
 						label: 'Windows',
 						value: 80000,
-						percentage: 70,
 					} ),
 				} )
 			);
+			// Verify percentage is calculated (approximately 72.73%)
+			const callArgs = customTooltipRenderer.mock.calls[ 0 ][ 0 ];
+			expect( callArgs.tooltipData.percentage ).toBeCloseTo( 72.73, 1 );
 		} );
 	} );
 
@@ -372,8 +379,8 @@ describe( 'PieChart', () => {
 		test( 'filters segments when interactive legend is enabled and segment is toggled', async () => {
 			const user = userEvent.setup();
 			const testData = [
-				{ label: 'Segment A', value: 50, percentage: 50 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment A', value: 50 },
+				{ label: 'Segment B', value: 50 },
 			];
 
 			renderWithTheme( {
@@ -404,8 +411,8 @@ describe( 'PieChart', () => {
 		test( 'shows empty state when all segments are hidden', async () => {
 			const user = userEvent.setup();
 			const testData = [
-				{ label: 'Segment A', value: 50, percentage: 50 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment A', value: 50 },
+				{ label: 'Segment B', value: 50 },
 			];
 
 			renderWithTheme( {
@@ -443,8 +450,8 @@ describe( 'PieChart', () => {
 
 		test( 'does not filter segments when legendInteractive is false', () => {
 			const testData = [
-				{ label: 'Segment A', value: 50, percentage: 50 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment A', value: 50 },
+				{ label: 'Segment B', value: 50 },
 			];
 
 			renderWithTheme( {
@@ -466,9 +473,9 @@ describe( 'PieChart', () => {
 		test( 'maintains consistent colors when segments are hidden', async () => {
 			const user = userEvent.setup();
 			const testData = [
-				{ label: 'Segment A', value: 30, percentage: 30 },
-				{ label: 'Segment B', value: 40, percentage: 40 },
-				{ label: 'Segment C', value: 30, percentage: 30 },
+				{ label: 'Segment A', value: 30 },
+				{ label: 'Segment B', value: 40 },
+				{ label: 'Segment C', value: 30 },
 			];
 
 			renderWithTheme( {
@@ -498,9 +505,9 @@ describe( 'PieChart', () => {
 		test( 'recalculates legend percentages when segments are hidden', async () => {
 			const user = userEvent.setup();
 			const testData = [
-				{ label: 'Segment A', value: 25, percentage: 25 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
-				{ label: 'Segment C', value: 25, percentage: 25 },
+				{ label: 'Segment A', value: 25 },
+				{ label: 'Segment B', value: 50 },
+				{ label: 'Segment C', value: 25 },
 			];
 
 			renderWithTheme( {

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -5,15 +5,9 @@
 		width: 100%;
 	}
 
-	// Flex wrapper that fills remaining Stack space and measures the SVG area
-	&__svg-wrapper {
-		flex: 1;
-		min-height: 0; // Required for flex shrinking
-		min-width: 0; // Required for flex shrinking
+	&__centering {
 		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		height: 100%;
 	}
 
 	.label {

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -8,7 +8,11 @@ import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
-import { useElementSize, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';
+import {
+	useDataWithPercentages,
+	useInteractiveLegendData,
+	usePrefersReducedMotion,
+} from '../../hooks';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -17,18 +21,20 @@ import {
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
-import {
-	ChartSVG,
-	ChartHTML,
-	useChartChildren,
-	renderLegendSlot,
-} from '../private/chart-composition';
+import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
+import { ChartLayout } from '../private/chart-layout';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation';
 import { SingleChartContext } from '../private/single-chart-context';
+import { SvgEmptyState } from '../private/svg-empty-state';
 import { withResponsive } from '../private/with-responsive';
 import styles from './pie-semi-circle-chart.module.scss';
 import type { LegendValueDisplay } from '../../components/legend';
-import type { BaseChartProps, DataPointPercentage, Optional } from '../../types';
+import type {
+	BaseChartProps,
+	DataPointPercentage,
+	DataPointPercentageCalculated,
+	Optional,
+} from '../../types';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
@@ -39,9 +45,9 @@ import type { FC, MouseEvent, ReactNode } from 'react';
  */
 export type PieSemiCircleChartRenderTooltipParams = {
 	/**
-	 * The data point being hovered, including label, value, and percentage.
+	 * The data point being hovered, including label, value, and calculated percentage.
 	 */
-	tooltipData: DataPointPercentage;
+	tooltipData: DataPointPercentageCalculated;
 };
 
 /**
@@ -129,7 +135,7 @@ type PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<
 	PieSemiCircleChartBaseProps & ResponsiveConfig
 >;
 
-export type ArcData = PieArcDatum< DataPointPercentage >;
+export type ArcData = PieArcDatum< DataPointPercentageCalculated >;
 
 /**
  * Validates the semi-circle pie chart data
@@ -142,15 +148,15 @@ const validateData = ( data: DataPointPercentage[] ) => {
 	}
 
 	// Check for negative values
-	const hasNegativeValues = data.some( item => item.percentage < 0 || item.value < 0 );
+	const hasNegativeValues = data.some( item => item.value < 0 );
 	if ( hasNegativeValues ) {
 		return { isValid: false, message: 'Invalid data: Negative values are not allowed' };
 	}
 
-	// Validate total percentage is greater than 0
-	const totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );
-	if ( totalPercentage <= 0 ) {
-		return { isValid: false, message: 'Invalid percentage total: Must be greater than 0' };
+	// Validate total value is greater than 0
+	const totalValue = data.reduce( ( sum, item ) => sum + item.value, 0 );
+	if ( totalValue <= 0 ) {
+		return { isValid: false, message: 'Invalid data: Total value must be greater than 0' };
 	}
 
 	return { isValid: true, message: '' };
@@ -181,10 +187,8 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	const legendPosition = legend.position ?? 'bottom';
 
 	const chartId = useChartId( providedChartId );
-	// Measure the SVG wrapper to calculate constrained dimensions
-	const [ svgWrapperRef, svgWrapperWidth, svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
-		useTooltip< DataPointPercentage >();
+		useTooltip< DataPointPercentageCalculated >();
 
 	// Set up portal tooltip for better z-index handling
 	// We get containerBounds to cancel out stale offsets in the position calculation
@@ -239,9 +243,12 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
 
+	// Calculate percentages from values (single source of truth)
+	const dataWithPercentages = useDataWithPercentages( data );
+
 	// Filter and recalculate data for interactive legends
 	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {
-		data,
+		data: dataWithPercentages,
 		chartId,
 		legendInteractive,
 		isSeriesVisible,
@@ -250,12 +257,12 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	// Define accessors with useMemo to avoid changing dependencies
 	const accessors = useMemo(
 		() => ( {
-			value: ( d: DataPointPercentage ) => d.value,
+			value: ( d: DataPointPercentageCalculated ) => d.value,
 			sort: (
-				a: DataPointPercentage & { index: number },
-				b: DataPointPercentage & { index: number }
+				a: DataPointPercentageCalculated & { index: number },
+				b: DataPointPercentageCalculated & { index: number }
 			) => b.value - a.value,
-			fill: ( d: DataPointPercentage & { index: number } ) =>
+			fill: ( d: DataPointPercentageCalculated & { index: number } ) =>
 				getElementStyles( { data: d, index: d.index } ).color,
 		} ),
 		[ getElementStyles ]
@@ -315,18 +322,6 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 		);
 	}
 
-	// Calculate chart dimensions maintaining the 2:1 width-to-height ratio.
-	// Use measured SVG wrapper dimensions to respect height constraints, falling back
-	// to explicit props during initial render before measurement is available.
-	const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : effectiveWidth;
-	const availableHeight =
-		svgWrapperHeight > 0 ? svgWrapperHeight : propHeight || effectiveWidth / 2;
-	// Constrain width so that height (= width / 2) never exceeds the available height
-	const width = Math.min( availableWidth, availableHeight * 2 );
-	const height = width / 2;
-	const radius = height; // For a semi-circle, radius equals the SVG height
-	const innerRadius = radius * ( 1 - thickness );
-
 	// Map data with index for color assignment
 	// When interactive, we need to find the original index to maintain consistent colors
 	const dataWithIndex = visibleData.map( d => {
@@ -357,16 +352,11 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	);
 
 	return (
-		<SingleChartContext.Provider
-			value={ {
-				chartId,
-				chartWidth: width,
-				chartHeight: height,
-			} }
-		>
-			<Stack
-				ref={ containerRef }
-				direction="column"
+		<SingleChartContext.Provider value={ { chartId } }>
+			<ChartLayout
+				legendPosition={ legendPosition }
+				legendElement={ legendElement }
+				legendChildren={ legendChildren }
 				gap={ gap }
 				className={ clsx(
 					'pie-semi-circle-chart',
@@ -381,120 +371,130 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					height: propHeight || undefined,
 				} }
 				data-testid="pie-chart-container"
+				trailingContent={
+					<>
+						{ withTooltips && tooltipOpen && tooltipData && (
+							<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
+								<div role="tooltip">{ renderTooltip( { tooltipData } ) }</div>
+							</TooltipInPortal>
+						) }
+						{ htmlChildren }
+						{ otherChildren }
+					</>
+				}
 			>
-				{ legendPosition === 'top' && legendElement }
-				{ renderLegendSlot( legendChildren, 'top' ) }
-
-				<div ref={ svgWrapperRef } className={ styles[ 'pie-semi-circle-chart__svg-wrapper' ] }>
-					<svg
-						width={ width }
-						height={ height }
-						viewBox={ `0 0 ${ width } ${ height }` }
-						data-testid="pie-chart-svg"
-					>
-						<defs>
-							<RadialWipeAnimation
-								id={ `radial-wipe-${ chartId }` }
-								radius={ radius }
-								innerRadius={ innerRadius }
-								startAngle="-180deg"
-								wipePercentage={ 50 }
-							/>
-						</defs>
-
-						{ /* Main chart group centered horizontally and positioned at bottom */ }
-						<Group
-							top={ height }
-							left={ width / 2 }
-							mask={ animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null }
+				{ ( { contentWidth, contentHeight } ) => {
+					// Calculate chart dimensions maintaining the 2:1 width-to-height ratio.
+					// Use measured dimensions to respect height constraints, falling back
+					// to explicit props during initial render before measurement is available.
+					const availableWidth = contentWidth > 0 ? contentWidth : effectiveWidth;
+					const availableHeight =
+						contentHeight > 0 ? contentHeight : propHeight || effectiveWidth / 2;
+					// Constrain width so that height (= width / 2) never exceeds the available height
+					const width = Math.min( availableWidth, availableHeight * 2 );
+					const height = width / 2;
+					const radius = height; // For a semi-circle, radius equals the SVG height
+					const innerRadius = radius * ( 1 - thickness );
+
+					return (
+						<Stack
+							ref={ containerRef }
+							align="center"
+							justify="center"
+							className={ styles[ 'pie-semi-circle-chart__centering' ] }
 						>
-							{ allSegmentsHidden ? (
-								<text
-									textAnchor="middle"
-									y={ -radius / 2 }
-									fill="#ccc"
-									fontSize="14"
-									fontFamily="-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif"
-								>
-									{ __(
-										'All segments are hidden. Click legend items to show data.',
-										'jetpack-charts'
-									) }
-								</text>
-							) : (
-								<>
-									{ /* Pie chart */ }
-									<Pie< DataPointPercentage & { index: number } >
-										data={ dataWithIndex }
-										pieValue={ accessors.value }
-										outerRadius={ radius }
+							<svg
+								width={ width }
+								height={ height }
+								viewBox={ `0 0 ${ width } ${ height }` }
+								data-testid="pie-chart-svg"
+							>
+								<defs>
+									<RadialWipeAnimation
+										id={ `radial-wipe-${ chartId }` }
+										radius={ radius }
 										innerRadius={ innerRadius }
-										cornerRadius={ 3 }
-										padAngle={ PAD_ANGLE }
-										startAngle={ startAngle }
-										endAngle={ endAngle }
-										pieSort={ accessors.sort }
-									>
-										{ pie => {
-											return pie.arcs.map( arc => (
-												<g
-													key={ arc.data.label }
-													onMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }
-													onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
+										startAngle="-180deg"
+										wipePercentage={ 50 }
+									/>
+								</defs>
+
+								{ /* Main chart group centered horizontally and positioned at bottom */ }
+								<Group
+									top={ height }
+									left={ width / 2 }
+									mask={
+										animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null
+									}
+								>
+									{ allSegmentsHidden ? (
+										<SvgEmptyState x={ 0 } y={ -radius / 2 } width={ width } height={ height }>
+											{ __(
+												'All segments are hidden. Click legend items to show data.',
+												'jetpack-charts'
+											) }
+										</SvgEmptyState>
+									) : (
+										<>
+											{ /* Pie chart */ }
+											<Pie< DataPointPercentageCalculated & { index: number } >
+												data={ dataWithIndex }
+												pieValue={ accessors.value }
+												outerRadius={ radius }
+												innerRadius={ innerRadius }
+												cornerRadius={ 3 }
+												padAngle={ PAD_ANGLE }
+												startAngle={ startAngle }
+												endAngle={ endAngle }
+												pieSort={ accessors.sort }
+											>
+												{ pie => {
+													return pie.arcs.map( arc => (
+														<g
+															key={ arc.data.label }
+															onMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }
+															onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
+														>
+															<path
+																d={ pie.path( arc ) || '' }
+																fill={ accessors.fill( arc.data ) }
+																data-testid="pie-segment"
+															/>
+														</g>
+													) );
+												} }
+											</Pie>
+
+											{ /* Label and note text */ }
+											<Group>
+												<Text
+													textAnchor="middle"
+													verticalAnchor="start"
+													y={ -40 } // Position above the chart with space for note
+													className={ styles.label }
 												>
-													<path
-														d={ pie.path( arc ) || '' }
-														fill={ accessors.fill( arc.data ) }
-														data-testid="pie-segment"
-													/>
-												</g>
-											) );
-										} }
-									</Pie>
-
-									{ /* Label and note text */ }
-									<Group>
-										<Text
-											textAnchor="middle"
-											verticalAnchor="start"
-											y={ -40 } // Position above the chart with space for note
-											className={ styles.label }
-										>
-											{ label }
-										</Text>
-										<Text
-											textAnchor="middle"
-											verticalAnchor="start"
-											y={ -20 } // Position between label and chart
-											className={ styles.note }
-										>
-											{ note }
-										</Text>
-									</Group>
-
-									{ /* Render SVG children from composition API */ }
-									{ ! allSegmentsHidden && svgChildren }
-								</>
-							) }
-						</Group>
-					</svg>
-				</div>
-
-				{ legendPosition === 'bottom' && legendElement }
-				{ renderLegendSlot( legendChildren, 'bottom' ) }
-
-				{ withTooltips && tooltipOpen && tooltipData && (
-					<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
-						<div role="tooltip">{ renderTooltip( { tooltipData } ) }</div>
-					</TooltipInPortal>
-				) }
-
-				{ /* Render HTML children from composition API */ }
-				{ htmlChildren }
+													{ label }
+												</Text>
+												<Text
+													textAnchor="middle"
+													verticalAnchor="start"
+													y={ -20 } // Position between label and chart
+													className={ styles.note }
+												>
+													{ note }
+												</Text>
+											</Group>
 
-				{ /* Render any other children that aren't compound components */ }
-				{ otherChildren }
-			</Stack>
+											{ /* Render SVG children from composition API */ }
+											{ ! allSegmentsHidden && svgChildren }
+										</>
+									) }
+								</Group>
+							</svg>
+						</Stack>
+					);
+				} }
+			</ChartLayout>
 		</SingleChartContext.Provider>
 	);
 };