diff --git a/src/area-chart/chart-container.tsx b/src/area-chart/chart-container.tsx index 0ac0f56df7..74c887b090 100644 --- a/src/area-chart/chart-container.tsx +++ b/src/area-chart/chart-container.tsx @@ -44,6 +44,7 @@ interface ChartContainerProps model: ChartModel; autoWidth: (value: number) => void; fitHeight?: boolean; + hasFilters: boolean; minHeight: number; isRTL?: boolean; } @@ -71,6 +72,7 @@ function ChartContainer({ detailPopoverDismissAriaLabel, } = {}, fitHeight, + hasFilters, minHeight, xTickFormatter = deprecatedXTickFormatter, yTickFormatter = deprecatedYTickFormatter, @@ -119,6 +121,7 @@ function ChartContainer({ ref={mergedRef} minHeight={minHeight + blockEndLabelsProps.height} fitHeight={!!fitHeight} + hasFilters={hasFilters} leftAxisLabel={} leftAxisLabelMeasure={ ({ ariaDescription={ariaDescription} i18nStrings={i18nStrings} fitHeight={fitHeight} + hasFilters={!!showFilters} minHeight={height} isRTL={isRtl} /> diff --git a/src/internal/components/cartesian-chart/chart-container.tsx b/src/internal/components/cartesian-chart/chart-container.tsx index 2ec6451390..f077b85f43 100644 --- a/src/internal/components/cartesian-chart/chart-container.tsx +++ b/src/internal/components/cartesian-chart/chart-container.tsx @@ -9,6 +9,7 @@ import styles from './styles.css.js'; interface CartesianChartContainerProps { minHeight: number; fitHeight: boolean; + hasFilters: boolean; leftAxisLabel: React.ReactNode; leftAxisLabelMeasure: React.ReactNode; bottomAxisLabel: React.ReactNode; @@ -28,12 +29,16 @@ export const CartesianChartContainer = forwardRef( bottomAxisLabel, chartPlot, popover, + hasFilters, }: CartesianChartContainerProps, ref: React.Ref ) => { if (fitHeight) { return ( -
+
{leftAxisLabel}
diff --git a/src/internal/components/cartesian-chart/styles.scss b/src/internal/components/cartesian-chart/styles.scss index 614b4ff3a6..31f30281c0 100644 --- a/src/internal/components/cartesian-chart/styles.scss +++ b/src/internal/components/cartesian-chart/styles.scss @@ -124,6 +124,10 @@ .chart-container-outer { display: flex; + &:not(.axis-label + &, .has-filters > &) { + margin-block-start: calc(0.5 * #{awsui.$font-chart-detail-size}); + } + &.fit-height { flex: 1; } diff --git a/src/mixed-line-bar-chart/chart-container.tsx b/src/mixed-line-bar-chart/chart-container.tsx index 27867edbef..bdc4eaa351 100644 --- a/src/mixed-line-bar-chart/chart-container.tsx +++ b/src/mixed-line-bar-chart/chart-container.tsx @@ -45,6 +45,7 @@ export interface ChartContainerProps { visibleSeries: ReadonlyArray>; fitHeight?: boolean; + hasFilters: boolean; height: number; detailPopoverSize: MixedLineBarChartProps['detailPopoverSize']; detailPopoverFooter: MixedLineBarChartProps['detailPopoverFooter']; @@ -103,6 +104,7 @@ const fallbackContainerWidth = 500; export default function ChartContainer({ fitHeight, + hasFilters, height: explicitPlotHeight, series, visibleSeries, @@ -506,6 +508,7 @@ export default function ChartContainer({ ref={containerRef} minHeight={explicitPlotHeight + blockEndLabelsProps.height} fitHeight={!!fitHeight} + hasFilters={hasFilters} leftAxisLabel={} leftAxisLabelMeasure={