@ledgerhq/lumen-ui-rnative-visualization 0.1.17 → 0.1.19

package/src/lib/Components/LineChart/LineChart.tsx

@@ -1,13 +1,111 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
 import { useMemo } from 'react';
+import Animated from 'react-native-reanimated';
+import { G } from 'react-native-svg';
 
-import type { ChartInset } from '../../utils/types';
 import { defaultXAxisProps, defaultYAxisProps } from '../Axis';
-import { DEFAULT_AXIS_HEIGHT, XAxis } from '../Axis/XAxis';
+import { XAxis } from '../Axis/XAxis';
 import { YAxis } from '../Axis/YAxis';
 import { CartesianChart } from '../CartesianChart';
+import { ChartEmptyLabel } from '../CartesianChart/ChartEmptyLabel';
+import { useShimmerAnimation } from '../CartesianChart/hooks/useShimmerAnimation';
 import { Line } from '../Line';
 
-import type { LineChartProps } from './types';
+import { LineChartEmptyState } from './LineChartEmptyState';
+import type {
+  LineChartContentProps,
+  LineChartLinesProps,
+  LineChartProps,
+  LineChartTransitionLinesProps,
+} from './types';
+import {
+  canRenderLine,
+  computeAxisPadding,
+  getChartDisplayState,
+} from './utils';
+
+const AnimatedG = Animated.createAnimatedComponent(G);
+
+const LineChartLines = ({
+  series,
+  showArea,
+  areaType,
+  stroke,
+  connectNulls,
+}: Readonly<LineChartLinesProps>) => {
+  return (
+    <>
+      {series.map((s) => (
+        <Line
+          key={s.id}
+          seriesId={s.id}
+          stroke={stroke ?? s.stroke}
+          showArea={showArea}
+          areaType={areaType}
+          connectNulls={connectNulls}
+        />
+      ))}
+    </>
+  );
+};
+
+const LineChartTransitionLines = ({
+  series,
+  showArea,
+  areaType,
+  connectNulls,
+}: Readonly<LineChartTransitionLinesProps>) => {
+  const { theme } = useTheme();
+  const { animatedProps } = useShimmerAnimation();
+
+  return (
+    <AnimatedG animatedProps={animatedProps}>
+      <LineChartLines
+        series={series}
+        showArea={showArea}
+        areaType={areaType}
+        stroke={theme.colors.border.mutedSubtle}
+        connectNulls={connectNulls}
+      />
+    </AnimatedG>
+  );
+};
+
+const LineChartContent = ({
+  series,
+  showArea,
+  areaType,
+  showXAxis,
+  showYAxis,
+  xAxisConfig,
+  yAxisConfig,
+  isTransitionLoading,
+  connectNulls,
+  children,
+}: Readonly<LineChartContentProps>) => {
+  return (
+    <>
+      {showXAxis && <XAxis {...xAxisConfig} />}
+      {showYAxis && <YAxis {...yAxisConfig} />}
+      {isTransitionLoading ? (
+        <LineChartTransitionLines
+          series={series}
+          showArea={showArea}
+          areaType={areaType}
+          connectNulls={connectNulls}
+        />
+      ) : (
+        <LineChartLines
+          series={series}
+          showArea={showArea}
+          areaType={areaType}
+          connectNulls={connectNulls}
+        />
+      )}
+      {children}
+    </>
+  );
+};
 
 export const LineChart = ({
   series,
@@ -18,47 +116,55 @@ export const LineChart = ({
   xAxis,
   yAxis,
   width,
-  height = 160,
+  height = 228,
   inset,
   children,
   enableScrubbing = false,
   onScrubberPositionChange,
   animate,
   magnetRadius,
-}: LineChartProps) => {
+  loading = false,
+  emptyLabel = 'No data',
+  connectNulls,
+}: Readonly<LineChartProps>) => {
   const xAxisConfig = {
     ...defaultXAxisProps,
     ...xAxis,
+    position: xAxis?.position ?? defaultXAxisProps.position,
   };
   const yAxisConfig = {
     ...defaultYAxisProps,
     ...yAxis,
+    position: yAxis?.position ?? defaultYAxisProps.position,
+    width: yAxis?.width ?? defaultYAxisProps.width,
   };
 
-  const axisPadding: Partial<ChartInset> | undefined = useMemo(() => {
-    if (!showXAxis && !showYAxis) {
-      return undefined;
-    }
+  const xAxisPosition = xAxisConfig.position;
+  const yAxisPosition = yAxisConfig.position;
+  const yAxisWidth = yAxisConfig.width;
 
-    return {
-      top:
-        showXAxis && xAxisConfig.position === 'top' ? DEFAULT_AXIS_HEIGHT : 0,
-      bottom:
-        showXAxis && xAxisConfig.position === 'bottom'
-          ? DEFAULT_AXIS_HEIGHT
-          : 0,
-      left:
-        showYAxis && yAxisConfig.position === 'start' ? yAxisConfig.width : 0,
-      right:
-        showYAxis && yAxisConfig.position === 'end' ? yAxisConfig.width : 0,
-    };
-  }, [
-    showXAxis,
-    showYAxis,
-    xAxisConfig?.position,
-    yAxisConfig?.position,
-    yAxisConfig?.width,
-  ]);
+  const axisPadding = useMemo(
+    () =>
+      computeAxisPadding({
+        showXAxis,
+        showYAxis,
+        xAxisPosition,
+        yAxisPosition,
+        yAxisWidth,
+      }),
+    [showXAxis, showYAxis, xAxisPosition, yAxisPosition, yAxisWidth],
+  );
+
+  const hasData = canRenderLine(series, xAxisConfig.data);
+
+  const { status, ariaLabel } = getChartDisplayState({
+    loading,
+    hasData,
+    emptyLabel,
+  });
+
+  const isTransitionLoading = status === 'transition-loading';
+  const isPlaceholder = status === 'initial-loading' || status === 'empty';
 
   return (
     <CartesianChart
@@ -71,20 +177,33 @@ export const LineChart = ({
       axisPadding={axisPadding}
       enableScrubbing={enableScrubbing}
       onScrubberPositionChange={onScrubberPositionChange}
-      animate={animate}
+      animate={isTransitionLoading ? false : animate}
       magnetRadius={magnetRadius}
+      ariaLabel={ariaLabel}
+      ariaBusy={loading}
+      overlay={
+        status === 'empty' ? (
+          <ChartEmptyLabel>{emptyLabel}</ChartEmptyLabel>
+        ) : undefined
+      }
     >
-      {showXAxis && <XAxis {...xAxisConfig} />}
-      {showYAxis && <YAxis {...yAxisConfig} />}
-      {series?.map((s) => (
-        <Line
-          key={s.id}
-          seriesId={s.id}
+      {isPlaceholder ? (
+        <LineChartEmptyState loading={status === 'initial-loading'} />
+      ) : (
+        <LineChartContent
+          series={series ?? []}
           showArea={showArea}
           areaType={areaType}
-        />
-      ))}
-      {children}
+          showXAxis={showXAxis}
+          showYAxis={showYAxis}
+          xAxisConfig={xAxisConfig}
+          yAxisConfig={yAxisConfig}
+          isTransitionLoading={isTransitionLoading}
+          connectNulls={connectNulls}
+        >
+          {children}
+        </LineChartContent>
+      )}
     </CartesianChart>
   );
 };

package/src/lib/Components/LineChart/LineChartEmptyState/LineChartEmptyState.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { render } from '@testing-library/react-native';
+
+import { CartesianChart } from '../../CartesianChart';
+import { LineChartEmptyState } from './LineChartEmptyState';
+import type { LineChartEmptyStateProps } from './types';
+
+const renderInChart = (props: LineChartEmptyStateProps) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+      <CartesianChart series={[]} width={400} height={200}>
+        <LineChartEmptyState {...props} />
+      </CartesianChart>
+    </ThemeProvider>,
+  );
+};
+
+describe('LineChartEmptyState', () => {
+  it('renders the placeholder line', () => {
+    const { getByTestId } = renderInChart({});
+
+    getByTestId('chart-empty-state-line');
+  });
+
+  it('renders the grid lines', () => {
+    const { getByTestId } = renderInChart({});
+
+    getByTestId('chart-empty-state-grid');
+  });
+
+  it('renders the placeholder while loading', () => {
+    const { getByTestId } = renderInChart({ loading: true });
+
+    getByTestId('chart-empty-state');
+    getByTestId('chart-empty-state-line');
+  });
+});

package/src/lib/Components/LineChart/LineChartEmptyState/LineChartEmptyState.tsx

@@ -0,0 +1,72 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+import Animated from 'react-native-reanimated';
+import { G, Line as SvgLine, Path } from 'react-native-svg';
+
+import { useCartesianChartContext } from '../../CartesianChart/context';
+import { useShimmerAnimation } from '../../CartesianChart/hooks/useShimmerAnimation';
+import { usePathReveal } from '../../CartesianChart/RevealAnimation';
+
+import type { LineChartEmptyStateProps } from './types';
+import { buildPlaceholderTransform, PLACEHOLDER_LINE_PATH } from './utils';
+
+const GRID_LINE_RATIOS = [0.3, 0.5, 0.7];
+const GRID_STROKE_WIDTH = 1;
+const PLACEHOLDER_STROKE_WIDTH = 2;
+
+const AnimatedG = Animated.createAnimatedComponent(G);
+
+/**
+ * SVG placeholder line shown when a LineChart is loading with no data yet (with
+ * a shimmer) or has no data to display (static). Uses a fixed line shape scaled
+ * into the chart's reserved drawing area, plus static horizontal grid lines, so
+ * axes are not needed.
+ */
+export function LineChartEmptyState({
+  loading = false,
+}: Readonly<LineChartEmptyStateProps>) {
+  const { drawingArea } = useCartesianChartContext();
+  const { theme } = useTheme();
+  const { animatedProps } = useShimmerAnimation(loading);
+  const clipPath = usePathReveal();
+
+  if (drawingArea.width <= 0 || drawingArea.height <= 0) {
+    return null;
+  }
+
+  return (
+    <G testID='chart-empty-state'>
+      <G testID='chart-empty-state-grid'>
+        {GRID_LINE_RATIOS.map((ratio) => {
+          const y = drawingArea.y + drawingArea.height * ratio;
+
+          return (
+            <SvgLine
+              key={ratio}
+              x1={drawingArea.x}
+              y1={y}
+              x2={drawingArea.x + drawingArea.width}
+              y2={y}
+              stroke={theme.colors.border.mutedSubtleTransparent}
+              strokeWidth={GRID_STROKE_WIDTH}
+            />
+          );
+        })}
+      </G>
+      <G clipPath={clipPath}>
+        <AnimatedG animatedProps={animatedProps}>
+          <Path
+            testID='chart-empty-state-line'
+            d={PLACEHOLDER_LINE_PATH}
+            transform={buildPlaceholderTransform(drawingArea)}
+            vectorEffect='non-scaling-stroke'
+            fill='none'
+            stroke={theme.colors.border.muted}
+            strokeWidth={PLACEHOLDER_STROKE_WIDTH}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </AnimatedG>
+      </G>
+    </G>
+  );
+}

package/src/lib/Components/LineChart/LineChartEmptyState/index.ts

@@ -0,0 +1,2 @@
+export { LineChartEmptyState } from './LineChartEmptyState';
+export type { LineChartEmptyStateProps } from './types';

package/src/lib/Components/LineChart/LineChartEmptyState/types.ts

@@ -0,0 +1,3 @@
+import type { LineChartProps } from '../types';
+
+export type LineChartEmptyStateProps = Pick<LineChartProps, 'loading'>;

package/src/lib/Components/LineChart/LineChartEmptyState/utils.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { buildPlaceholderTransform, PLACEHOLDER_LINE_PATH } from './utils';
+
+describe('PLACEHOLDER_LINE_PATH', () => {
+  it('is an svg path starting with a move command', () => {
+    expect(PLACEHOLDER_LINE_PATH).toMatch(/^M/);
+  });
+});
+
+describe('buildPlaceholderTransform', () => {
+  it('translates to the drawing area origin and scales the viewBox to fit', () => {
+    const transform = buildPlaceholderTransform({
+      x: 10,
+      y: 20,
+      width: 364,
+      height: 104,
+    });
+
+    expect(transform).toBe('translate(10, 20) scale(0.5, 0.5)');
+  });
+});

package/src/lib/Components/LineChart/LineChartEmptyState/utils.ts

@@ -0,0 +1,24 @@
+import type { DrawingArea } from '../../../utils/types';
+
+/**
+ * Fixed placeholder line shape, authored against a {@link PLACEHOLDER_VIEW_WIDTH}
+ * x {@link PLACEHOLDER_VIEW_HEIGHT} viewBox. Reused for every empty/loading
+ * state so the placeholder always reads the same.
+ */
+export const PLACEHOLDER_LINE_PATH =
+  'M1.00 128.27 C4.02 127.46 13.09 125.96 19.13 123.47 C25.19 120.97 31.23 116.53 37.28 113.31 C43.33 110.10 49.38 106.15 55.42 104.20 C61.48 102.24 67.52 102.53 73.57 101.61 C79.61 100.69 85.65 99.89 91.71 98.70 C97.75 97.51 103.80 95.67 109.84 94.47 C115.90 93.27 121.94 91.71 127.99 91.49 C134.03 91.26 140.09 91.53 146.13 93.16 C152.19 94.79 158.23 98.37 164.27 101.25 C170.32 104.13 176.36 108.16 182.42 110.45 C188.46 112.74 194.51 114.41 200.55 115.00 C206.61 115.60 212.65 114.56 218.70 114.03 C224.75 113.50 230.80 112.56 236.84 111.86 C242.88 111.17 248.94 110.27 254.98 109.87 C261.03 109.48 267.07 109.14 273.13 109.49 C279.17 109.82 285.22 110.90 291.26 111.90 C297.32 112.90 303.36 114.47 309.41 115.50 C315.46 116.54 321.50 118.12 327.55 118.11 C333.59 118.10 339.65 118.08 345.69 115.45 C351.74 112.81 357.78 107.02 363.84 102.29 C369.88 97.54 375.93 90.87 381.97 87.01 C388.03 83.16 394.07 79.81 400.11 79.12 C406.17 78.43 412.21 80.79 418.26 82.88 C424.30 84.99 430.36 88.88 436.40 91.74 C442.45 94.59 448.49 98.24 454.55 100.02 C460.59 101.80 466.64 102.08 472.68 102.44 C478.72 102.81 484.78 102.31 490.82 102.21 C496.87 102.11 502.92 101.95 508.97 101.84 C515.01 101.74 521.07 101.47 527.11 101.58 C533.16 101.68 539.20 101.57 545.26 102.48 C551.30 103.39 557.34 105.37 563.39 107.02 C569.43 108.68 575.49 111.02 581.53 112.40 C587.59 113.79 593.63 114.62 599.68 115.30 C605.72 115.98 611.78 115.81 617.82 116.48 C623.87 117.16 629.91 118.39 635.95 119.32 C642.01 120.25 648.05 121.51 654.10 122.04 C660.15 122.57 666.20 123.89 672.24 122.47 C678.30 121.07 684.34 117.39 690.39 113.54 C696.43 109.69 702.49 103.53 708.53 99.38 C714.57 95.23 722.31 90.65 726.66 88.61';
+
+const PLACEHOLDER_VIEW_WIDTH = 728;
+const PLACEHOLDER_VIEW_HEIGHT = 208;
+
+/**
+ * Transform that fits {@link PLACEHOLDER_LINE_PATH} into the drawing area. Pair
+ * with `vector-effect: non-scaling-stroke` on the path so the stroke keeps a
+ * constant width despite the (potentially non-uniform) scale.
+ */
+export const buildPlaceholderTransform = (drawingArea: DrawingArea): string => {
+  const scaleX = drawingArea.width / PLACEHOLDER_VIEW_WIDTH;
+  const scaleY = drawingArea.height / PLACEHOLDER_VIEW_HEIGHT;
+
+  return `translate(${drawingArea.x}, ${drawingArea.y}) scale(${scaleX}, ${scaleY})`;
+};

package/src/lib/Components/LineChart/types.ts

@@ -48,7 +48,7 @@ export type LineChartProps = {
   width?: number;
   /**
    * Height of the chart in pixels.
-   * @default 160
+   * @default 228
    */
   height?: number;
   /**
@@ -83,4 +83,52 @@ export type LineChartProps = {
    * @default 6
    */
   magnetRadius?: number;
+  /**
+   * Whether the chart is loading. When there is no data, renders an animated
+   * shimmer placeholder line (initial loading). When data is present (e.g. a
+   * time-range change), the current line is recoloured to a muted grey and
+   * shimmers until the new `series` is provided (transition loading).
+   *
+   * To get the transition behaviour, keep passing the previous `series` while
+   * refetching; clearing it falls back to the initial placeholder.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Text shown in the centre of the chart when there is no data and the chart
+   * is not loading.
+   * @default 'No data'
+   */
+  emptyLabel?: string;
+  /**
+   * Chart-wide override controlling how null values are handled across all lines.
+   * When true, skips null values and draws continuous lines across gaps.
+   * When false, null values create gaps in the lines.
+   * When omitted, each series' own `connectNulls` value is used (defaulting to `false`).
+   */
+  connectNulls?: boolean;
 };
+
+/**
+ * Series-render fields shared by `LineChart` and its internal line
+ * sub-components. Derived from {@link LineChartProps} so the option types stay
+ * in sync.
+ */
+type LineSeriesRenderProps = Required<
+  Pick<LineChartProps, 'series' | 'showArea' | 'areaType'>
+>;
+
+export type LineChartLinesProps = LineSeriesRenderProps &
+  Pick<LineChartProps, 'connectNulls'> & {
+    stroke?: string;
+  };
+
+export type LineChartTransitionLinesProps = Omit<LineChartLinesProps, 'stroke'>;
+
+export type LineChartContentProps = LineChartLinesProps &
+  Required<Pick<LineChartProps, 'showXAxis' | 'showYAxis'>> &
+  Pick<LineChartProps, 'children'> & {
+    xAxisConfig: XAxisProps;
+    yAxisConfig: YAxisProps;
+    isTransitionLoading: boolean;
+  };

package/src/lib/Components/LineChart/utils.test.ts

@@ -0,0 +1,196 @@
+import { describe, expect, it } from '@jest/globals';
+
+import type { Series } from '../../utils/types';
+import { DEFAULT_AXIS_HEIGHT } from '../Axis/XAxis';
+
+import {
+  canRenderLine,
+  computeAxisPadding,
+  getChartDisplayState,
+} from './utils';
+
+const makeSeries = (data: (number | null)[]): Series => ({
+  id: 'a',
+  stroke: '#000',
+  data,
+});
+
+describe('canRenderLine', () => {
+  it('returns false for undefined or empty series', () => {
+    expect(canRenderLine(undefined)).toBe(false);
+    expect(canRenderLine([])).toBe(false);
+  });
+
+  it('returns false when no series has at least two finite points', () => {
+    expect(canRenderLine([makeSeries([1])])).toBe(false);
+    expect(canRenderLine([makeSeries([1, null])])).toBe(false);
+    expect(canRenderLine([makeSeries([null, null])])).toBe(false);
+  });
+
+  it('returns true once a series has two finite points', () => {
+    expect(canRenderLine([makeSeries([1, 2])])).toBe(true);
+  });
+
+  it('ignores null gaps when counting drawable points', () => {
+    expect(canRenderLine([makeSeries([1, null, 3])])).toBe(true);
+  });
+
+  it('does not count NaN, Infinity, or holes as drawable points', () => {
+    expect(canRenderLine([makeSeries([NaN, NaN])])).toBe(false);
+    expect(canRenderLine([makeSeries([Infinity, -Infinity])])).toBe(false);
+    expect(canRenderLine([makeSeries([NaN, 1])])).toBe(false);
+    expect(
+      canRenderLine([makeSeries([1, undefined as unknown as number, 2])]),
+    ).toBe(true);
+    expect(
+      canRenderLine([makeSeries([1, undefined as unknown as number])]),
+    ).toBe(false);
+  });
+
+  it('returns true when any series is drawable', () => {
+    expect(canRenderLine([makeSeries([1]), makeSeries([1, 2, 3])])).toBe(true);
+  });
+
+  it('treats a missing data array as no points', () => {
+    expect(canRenderLine([{ id: 'a', stroke: '#000' }])).toBe(false);
+  });
+
+  it('caps counted points to the x-axis domain length (like toScaledPoints)', () => {
+    expect(canRenderLine([makeSeries([1, 2, 3])], ['Jan'])).toBe(false);
+    expect(canRenderLine([makeSeries([1, 2, 3])], ['Jan', 'Feb'])).toBe(true);
+  });
+
+  it('does not reduce drawable points when xData is longer than the series', () => {
+    expect(canRenderLine([makeSeries([1, 2])], ['a', 'b', 'c', 'd'])).toBe(
+      true,
+    );
+  });
+
+  it('counts only finite points within the capped range', () => {
+    expect(canRenderLine([makeSeries([null, 2, 3])], ['Jan', 'Feb'])).toBe(
+      false,
+    );
+  });
+});
+
+describe('computeAxisPadding', () => {
+  const base = {
+    xAxisPosition: 'bottom' as const,
+    yAxisPosition: 'start' as const,
+    yAxisWidth: 40,
+  };
+
+  it('returns undefined when no axis is shown', () => {
+    expect(
+      computeAxisPadding({ ...base, showXAxis: false, showYAxis: false }),
+    ).toBeUndefined();
+  });
+
+  it('reserves height on the side where the x-axis sits', () => {
+    expect(
+      computeAxisPadding({
+        ...base,
+        showXAxis: true,
+        showYAxis: false,
+        xAxisPosition: 'bottom',
+      }),
+    ).toEqual({ top: 0, bottom: DEFAULT_AXIS_HEIGHT, left: 0, right: 0 });
+
+    expect(
+      computeAxisPadding({
+        ...base,
+        showXAxis: true,
+        showYAxis: false,
+        xAxisPosition: 'top',
+      }),
+    ).toEqual({ top: DEFAULT_AXIS_HEIGHT, bottom: 0, left: 0, right: 0 });
+  });
+
+  it('reserves the y-axis width on the side where it sits', () => {
+    expect(
+      computeAxisPadding({
+        ...base,
+        showXAxis: false,
+        showYAxis: true,
+        yAxisPosition: 'start',
+        yAxisWidth: 56,
+      }),
+    ).toEqual({ top: 0, bottom: 0, left: 56, right: 0 });
+
+    expect(
+      computeAxisPadding({
+        ...base,
+        showXAxis: false,
+        showYAxis: true,
+        yAxisPosition: 'end',
+        yAxisWidth: 56,
+      }),
+    ).toEqual({ top: 0, bottom: 0, left: 0, right: 56 });
+  });
+
+  it('combines padding when both axes are shown', () => {
+    expect(
+      computeAxisPadding({
+        showXAxis: true,
+        showYAxis: true,
+        xAxisPosition: 'bottom',
+        yAxisPosition: 'start',
+        yAxisWidth: 40,
+      }),
+    ).toEqual({ top: 0, bottom: DEFAULT_AXIS_HEIGHT, left: 40, right: 0 });
+  });
+});
+
+describe('getChartDisplayState', () => {
+  it('is initial-loading when loading with no data', () => {
+    expect(
+      getChartDisplayState({
+        loading: true,
+        hasData: false,
+        emptyLabel: 'No data',
+      }),
+    ).toEqual({
+      status: 'initial-loading',
+      ariaLabel: 'Loading chart',
+    });
+  });
+
+  it('is empty when not loading with no data', () => {
+    expect(
+      getChartDisplayState({
+        loading: false,
+        hasData: false,
+        emptyLabel: 'Nothing here',
+      }),
+    ).toEqual({
+      status: 'empty',
+      ariaLabel: 'Nothing here',
+    });
+  });
+
+  it('is transition-loading when loading with data', () => {
+    expect(
+      getChartDisplayState({
+        loading: true,
+        hasData: true,
+        emptyLabel: 'No data',
+      }),
+    ).toEqual({
+      status: 'transition-loading',
+      ariaLabel: 'Loading chart',
+    });
+  });
+
+  it('is ready with no aria label when data is present and not loading', () => {
+    expect(
+      getChartDisplayState({
+        loading: false,
+        hasData: true,
+        emptyLabel: 'No data',
+      }),
+    ).toEqual({
+      status: 'ready',
+      ariaLabel: undefined,
+    });
+  });
+});