fix: Ensure chart top y-axis label does not get cropped

cloudscape-design · Oct 10, 2024 · 7a6cb5e · 7a6cb5e
1 parent 63d54a8
commit 7a6cb5e
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 1 deletion.
diff --git a/src/area-chart/chart-container.tsx b/src/area-chart/chart-container.tsx
@@ -44,6 +44,7 @@ interface ChartContainerProps<T extends AreaChartProps.DataTypes>
   model: ChartModel<T>;
   autoWidth: (value: number) => void;
   fitHeight?: boolean;
+  hasFilters: boolean;
   minHeight: number;
   isRTL?: boolean;
 }
@@ -71,6 +72,7 @@ function ChartContainer<T extends AreaChartProps.DataTypes>({
     detailPopoverDismissAriaLabel,
   } = {},
   fitHeight,
+  hasFilters,
   minHeight,
   xTickFormatter = deprecatedXTickFormatter,
   yTickFormatter = deprecatedYTickFormatter,
@@ -119,6 +121,7 @@ function ChartContainer<T extends AreaChartProps.DataTypes>({
       ref={mergedRef}
       minHeight={minHeight + blockEndLabelsProps.height}
       fitHeight={!!fitHeight}
+      hasFilters={hasFilters}
       leftAxisLabel={<AxisLabel axis="y" position="left" title={yTitle} />}
       leftAxisLabelMeasure={
         <LabelsMeasure

diff --git a/src/area-chart/internal.tsx b/src/area-chart/internal.tsx
@@ -190,6 +190,7 @@ export default function InternalAreaChart<T extends AreaChartProps.DataTypes>({
             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
@@ -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<HTMLDivElement>
   ) => {
     if (fitHeight) {
       return (
-        <div className={clsx(styles['chart-container'], styles['fit-height'])} ref={ref}>
+        <div
+          className={clsx(styles['chart-container'], styles['fit-height'], hasFilters && styles['has-filters'])}
+          ref={ref}
+        >
           {leftAxisLabel}
 
           <div className={clsx(styles['chart-container-outer'], styles['fit-height'])}>

diff --git 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
@@ -45,6 +45,7 @@ export interface ChartContainerProps<T extends ChartDataTypes> {
   visibleSeries: ReadonlyArray<InternalChartSeries<T>>;
 
   fitHeight?: boolean;
+  hasFilters: boolean;
   height: number;
   detailPopoverSize: MixedLineBarChartProps<T>['detailPopoverSize'];
   detailPopoverFooter: MixedLineBarChartProps<T>['detailPopoverFooter'];
@@ -103,6 +104,7 @@ const fallbackContainerWidth = 500;
 
 export default function ChartContainer<T extends ChartDataTypes>({
   fitHeight,
+  hasFilters,
   height: explicitPlotHeight,
   series,
   visibleSeries,
@@ -506,6 +508,7 @@ export default function ChartContainer<T extends ChartDataTypes>({
       ref={containerRef}
       minHeight={explicitPlotHeight + blockEndLabelsProps.height}
       fitHeight={!!fitHeight}
+      hasFilters={hasFilters}
       leftAxisLabel={<AxisLabel axis={y} position="left" title={leftAxisProps.title} />}
       leftAxisLabelMeasure={
         <LabelsMeasure

diff --git a/src/mixed-line-bar-chart/internal.tsx b/src/mixed-line-bar-chart/internal.tsx
@@ -253,6 +253,7 @@ export default function InternalMixedLineBarChart<T extends number | string | Da
         showChart ? (
           <ChartContainer
             fitHeight={fitHeight}
+            hasFilters={!!showFilters}
             height={height}
             xScaleType={xScaleType}
             yScaleType={yScaleType}