Charts: Improve TimeSeriesForecastChart with composition pattern and legend props

projects/js-packages/charts/changelog/add-area-chart-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+TimeSeriesForecastChart: Add compound composition pattern and full legend prop parity.

projects/js-packages/charts/src/charts/time-series-forecast-chart/private/use-forecast-data.ts

@@ -76,7 +76,7 @@ export function useForecastData< D >( {
 		transformed.sort( ( a, b ) => a.date.getTime() - b.date.getTime() );
 
 		// 3. Split by forecastStart
-		// Both series include the transition point so the lines connect seamlessly visually
+		// Both series include the transition point so the lines connect seamlessly
 		const forecastStartTime = forecastStart.getTime();
 		const historical = transformed.filter( p => p.date.getTime() <= forecastStartTime );
 		const forecast = transformed.filter( p => p.date.getTime() >= forecastStartTime );
@@ -101,7 +101,11 @@ export function useForecastData< D >( {
 
 		// Add some padding to y domain (ensure minimum padding to avoid zero-height scales)
 		const yPadding = Math.max( ( maxY - minY ) * 0.1, 1 );
-		const yDomain: [ number, number ] = [ minY - yPadding, maxY + yPadding ];
+		const yMinWithPadding = minY - yPadding;
+		const yDomain: [ number, number ] = [
+			minY >= 0 ? Math.max( 0, yMinWithPadding ) : yMinWithPadding,
+			maxY + yPadding,
+		];
 
 		// 6. Compute x domain (use reduce to avoid stack overflow on large arrays)
 		const allDateTimes = transformed.map( p => p.date.getTime() );

projects/js-packages/charts/src/charts/time-series-forecast-chart/time-series-forecast-chart.module.scss

@@ -1,4 +1,6 @@
 .time-series-forecast-chart {
+	display: flex;
+	flex-direction: column;
 	position: relative;
 
 	&__svg-wrapper {
@@ -15,6 +17,10 @@
 		}
 	}
 
+	&--legend-top {
+		flex-direction: column-reverse;
+	}
+
 	svg {
 		overflow: visible;
 	}
@@ -50,6 +56,10 @@
 		border-radius: 3px;
 		background: var(--charts-forecast-badge-background, rgba(0, 0, 0, 0.1));
 	}
+
+	&__legend {
+		padding-block-start: 8px;
+	}
 }
 
 @keyframes rise {