fix: Fix tick count for horizontal bar charts and make bottom labels height measure synchronous

src/area-chart/chart-container.tsx

@@ -7,7 +7,7 @@ import ChartPlot from '../internal/components/chart-plot';
 import AxisLabel from '../internal/components/cartesian-chart/axis-label';
 import LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';
 import LeftLabels from '../internal/components/cartesian-chart/left-labels';
-import BottomLabels from '../internal/components/cartesian-chart/bottom-labels';
+import BottomLabels, { useBottomLabels } from '../internal/components/cartesian-chart/bottom-labels';
 import EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';
 import { AreaChartProps } from './interfaces';
 import { ChartModel } from './model';
@@ -77,9 +77,14 @@ function ChartContainer<T extends AreaChartProps.DataTypes>({
   detailTotalFormatter = deprecatedDetailTotalFormatter,
 }: ChartContainerProps<T>) {
   const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);
-  const [bottomLabelsHeight, setBottomLabelsHeight] = useState(0);
   const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);
 
+  const bottomLabelsProps = useBottomLabels({
+    ticks: model.computed.xTicks,
+    scale: model.computed.xScale,
+    tickFormatter: xTickFormatter as TickFormatter,
+  });
+
   // Calculate the width of the plot area and tell it to the parent.
   const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);
   useEffect(() => {
@@ -110,7 +115,7 @@ function ChartContainer<T extends AreaChartProps.DataTypes>({
   return (
     <CartesianChartContainer
       ref={mergedRef}
-      minHeight={minHeight + bottomLabelsHeight}
+      minHeight={minHeight + bottomLabelsProps.height}
       fitHeight={!!fitHeight}
       leftAxisLabel={<AxisLabel axis="y" position="left" title={yTitle} />}
       leftAxisLabelMeasure={
@@ -126,8 +131,8 @@ function ChartContainer<T extends AreaChartProps.DataTypes>({
         <ChartPlot
           ref={model.refs.plot}
           width="100%"
-          height={fitHeight ? `calc(100% - ${bottomLabelsHeight}px)` : model.height}
-          offsetBottom={bottomLabelsHeight}
+          height={fitHeight ? `calc(100% - ${bottomLabelsProps.height}px)` : model.height}
+          offsetBottom={bottomLabelsProps.height}
           ariaLabel={ariaLabel}
           ariaLabelledby={ariaLabelledby}
           ariaDescription={ariaDescription}
@@ -167,14 +172,12 @@ function ChartContainer<T extends AreaChartProps.DataTypes>({
           <AreaDataSeries model={model} />
 
           <BottomLabels
+            {...bottomLabelsProps}
             width={model.width}
             height={model.height}
             scale={model.computed.xScale}
-            ticks={model.computed.xTicks}
-            tickFormatter={xTickFormatter as TickFormatter}
             title={xTitle}
             ariaRoleDescription={xAxisAriaRoleDescription}
-            autoHeight={setBottomLabelsHeight}
             offsetLeft={leftLabelsWidth + BOTTOM_LABELS_OFFSET}
             offsetRight={BOTTOM_LABELS_OFFSET}
           />

src/internal/components/cartesian-chart/bottom-labels.tsx

@@ -1,51 +1,40 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import clsx from 'clsx';
 
 import { ChartDataTypes } from './interfaces';
 import { ChartScale, NumericChartScale } from './scales';
 import { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';
 
 import styles from './styles.css.js';
-import { formatTicks, getVisibleTicks } from './label-utils';
+import { formatTicks, getVisibleTicks, FormattedTick } from './label-utils';
 import { useInternalI18n } from '../../../i18n/context';
 
 interface BottomLabelsProps {
   axis?: 'x' | 'y';
   width: number;
   height: number;
   scale: ChartScale | NumericChartScale;
-  ticks: readonly ChartDataTypes[];
-  tickFormatter?: (value: ChartDataTypes) => string;
   title?: string;
   ariaRoleDescription?: string;
-  autoHeight: (value: number) => void;
   offsetLeft?: number;
   offsetRight?: number;
+  virtualTextRef: React.Ref<SVGTextElement>;
+  formattedTicks: readonly FormattedTick[];
 }
 
-export default memo(BottomLabels) as typeof BottomLabels;
-
-// Renders the visible tick labels on the bottom axis, as well as their grid lines.
-function BottomLabels({
-  axis = 'x',
-  width,
-  height,
-  scale,
+export function useBottomLabels({
   ticks,
+  scale,
   tickFormatter,
-  title,
-  ariaRoleDescription,
-  autoHeight,
-  offsetLeft = 0,
-  offsetRight = 0,
-}: BottomLabelsProps) {
-  const i18n = useInternalI18n('[charts]');
+}: {
+  scale: ChartScale | NumericChartScale;
+  ticks: readonly ChartDataTypes[];
+  tickFormatter?: (value: ChartDataTypes) => string;
+}) {
   const virtualTextRef = useRef<SVGTextElement>(null);
 
-  const xOffset = scale.isCategorical() && axis === 'x' ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;
-
   const cacheRef = useRef<{ [label: string]: number }>({});
   const getLabelSpace = (label: string) => {
     if (cacheRef.current[label] !== undefined) {
@@ -65,21 +54,38 @@ function BottomLabels({
     virtualTextRef.current.textContent = '';
   }
 
+  let height = TICK_LENGTH + TICK_MARGIN;
+  for (const { lines } of formattedTicks) {
+    height = Math.max(height, TICK_LENGTH + TICK_MARGIN + lines.length * TICK_LINE_HEIGHT);
+  }
+
+  return { virtualTextRef, formattedTicks, height };
+}
+
+export default memo(BottomLabels) as typeof BottomLabels;
+
+// Renders the visible tick labels on the bottom axis, as well as their grid lines.
+function BottomLabels({
+  axis = 'x',
+  width,
+  height,
+  scale,
+  title,
+  ariaRoleDescription,
+  offsetLeft = 0,
+  offsetRight = 0,
+  virtualTextRef,
+  formattedTicks,
+}: BottomLabelsProps) {
+  const i18n = useInternalI18n('[charts]');
+
+  const xOffset = scale.isCategorical() && axis === 'x' ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;
+
   const from = 0 - offsetLeft - xOffset;
   const until = width + offsetRight - xOffset;
   const balanceLabels = axis === 'x' && scale.scaleType !== 'log';
   const visibleTicks = getVisibleTicks(formattedTicks, from, until, balanceLabels);
 
-  let maxHeight = TICK_LENGTH + TICK_MARGIN;
-  for (const { lines } of formattedTicks) {
-    maxHeight = Math.max(maxHeight, TICK_LENGTH + TICK_MARGIN + lines.length * TICK_LINE_HEIGHT);
-  }
-
-  // Tell elements's height to the parent.
-  useEffect(() => {
-    autoHeight(maxHeight);
-  }, [autoHeight, maxHeight]);
-
   return (
     <g
       transform={`translate(0,${height})`}