@hero-design/rn 8.99.4 → 8.100.0-alpha.0

package/src/components/Chart/ColumnChart/__tests__/index.spec.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ColumnChart, { ColumnChartProps } from '../index';
+
+const baseData: ColumnChartProps['data'] = [
+  {
+    label: 'Series 1',
+    data: [10, 20, 30],
+  },
+  {
+    label: 'Series 2',
+    data: [5, 15, 25],
+  },
+];
+
+const xAxisConfig = {
+  labels: ['A', 'B', 'C'],
+};
+
+describe('ColumnChart', () => {
+  it('renders without crashing', () => {
+    const { getByTestId, toJSON, getByText } = renderWithTheme(
+      <ColumnChart
+        data={baseData}
+        xAxisConfig={xAxisConfig}
+        testID="column-chart"
+      />
+    );
+    // Simulate the onLayout event
+    fireEvent(getByTestId('column-chart'), 'layout', {
+      nativeEvent: {
+        layout: { x: 0, y: 0, width: 100, height: 200 },
+      },
+    });
+    expect(toJSON()).toMatchSnapshot();
+
+    // Check all expected y-axis labels
+    for (let value = 0; value <= 60; value += 10) {
+      expect(getByText(String(value))).toBeTruthy();
+    }
+
+    expect(getByText('A')).toBeTruthy();
+    expect(getByText('B')).toBeTruthy();
+    expect(getByText('C')).toBeTruthy();
+
+    // Check a few segments for correct accessibilityLabel and testID
+    const segmentA1 = getByTestId('column-segment-A-Series 1');
+    expect(segmentA1.props.accessibilityLabel).toContain('value 10');
+    expect(segmentA1.props.accessibilityLabel).toContain('x-label A');
+    expect(segmentA1.props.accessibilityLabel).toContain('series Series 1');
+
+    const segmentB2 = getByTestId('column-segment-B-Series 2');
+    expect(segmentB2.props.accessibilityLabel).toContain('value 15');
+    expect(segmentB2.props.accessibilityLabel).toContain('x-label B');
+    expect(segmentB2.props.accessibilityLabel).toContain('series Series 2');
+  });
+
+  it('throws error if xAxisConfig.labels length does not match data length', () => {
+    const badData = [{ label: 'Series 1', data: [1, 2] }];
+    const badXAxisConfig = { labels: ['A', 'B', 'C'] };
+    expect(() =>
+      renderWithTheme(
+        <ColumnChart
+          data={badData}
+          xAxisConfig={badXAxisConfig}
+          testID="bad-chart"
+        />
+      )
+    ).toThrow();
+  });
+
+  it('renders emptyText when data is empty', () => {
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <ColumnChart
+        data={[]}
+        xAxisConfig={xAxisConfig}
+        testID="column-chart-empty"
+        emptyText="No data available"
+      />
+    );
+    // Simulate the onLayout event
+    fireEvent(getByTestId('column-chart-empty'), 'layout', {
+      nativeEvent: {
+        layout: { x: 0, y: 0, width: 100, height: 200 },
+      },
+    });
+    expect(getByText('No data available')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('throws error if any data value is negative', () => {
+    const negativeData = [
+      { label: 'Series 1', data: [10, -5, 20] },
+      { label: 'Series 2', data: [5, 15, 25] },
+    ];
+    expect(() =>
+      renderWithTheme(
+        <ColumnChart
+          data={negativeData}
+          xAxisConfig={xAxisConfig}
+          testID="negative-chart"
+        />
+      )
+    ).toThrow('Negative values are not supported in ColumnChart');
+  });
+
+  it('calls onBarPress with correct info when a bar is pressed', () => {
+    const onBarPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <ColumnChart
+        data={baseData}
+        xAxisConfig={xAxisConfig}
+        testID="column-chart"
+        onBarPress={onBarPress}
+      />
+    );
+    // Simulate the onLayout event
+    fireEvent(getByTestId('column-chart'), 'layout', {
+      nativeEvent: {
+        layout: { x: 0, y: 0, width: 100, height: 200 },
+      },
+    });
+    // Press the first segment (A, Series 1)
+    fireEvent.press(getByTestId('column-segment-A-Series 1'));
+    expect(onBarPress).toHaveBeenCalledWith({
+      value: 10,
+      xLabel: 'A',
+      seriesLabel: 'Series 1',
+      seriesIndex: 0,
+      xIndex: 0,
+    });
+  });
+});

package/src/components/Chart/ColumnChart/index.tsx

@@ -0,0 +1,216 @@
+// ColumnChart/index.tsx
+// This is the main entry point for the ColumnChart component in the RN chart library.
+// It composes the full column chart, handling layout, axis configuration, empty state, and rendering grouped/stacked columns.
+// The component is highly configurable and uses subcomponents for axes, content, and frame.
+
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import { ViewStyle, LayoutChangeEvent } from 'react-native';
+import ChartFrame from '../shared/ChartFrame';
+import {
+  DataValue,
+  HeaderConfig,
+  Series,
+  XAxisConfig,
+  YAxisConfig,
+} from '../types';
+import ColumnChartContent from './ColumnChartContent';
+import { createNiceScale } from '../shared/niceNumbers';
+import { StyledColumnChartWrapper } from './StyledColumnChart';
+
+/**
+ * Props for the ColumnChart component.
+ *
+ * @property data - The data to be displayed in the chart. Each item represents a series.
+ * @property yAxisConfig - Optional configuration for the Y axis.
+ * @property xAxisConfig - Optional configuration for the X axis.
+ * @property style - Additional style for the root View. Follows the same convention as other components (e.g., Button).
+ * @property testID - Testing id of the component. Passed to the root View and used as a suffix for inner elements.
+ * @property headerConfig - Optional header configuration (title, actions).
+ * @property emptyText - Optional text to display when data is empty.
+ * @property onBarPress - Called when a bar (column segment) is pressed. Receives info about the bar.
+ */
+export interface ColumnChartProps {
+  /**
+   * The data to be displayed in the chart. Each item represents a series.
+   */
+  data: Array<Series<Array<DataValue>>>;
+  /**
+   * Optional configuration for the Y axis.
+   * Note: minValue is omitted and always set to zero internally by the component.
+   */
+  yAxisConfig?: Omit<YAxisConfig, 'minValue'>;
+  /**
+   * Optional configuration for the X axis.
+   */
+  xAxisConfig?: XAxisConfig;
+  /**
+   * Additional style for the root View.
+   */
+  style?: ViewStyle;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Header configuration for the chart.
+   */
+  headerConfig?: HeaderConfig;
+  /**
+   * Text to display when the chart has no data (empty state).
+   */
+  emptyText?: string;
+  /**
+   * Called when a bar (column segment) is pressed. Receives info about the bar.
+   */
+  onBarPress?: (info: {
+    value: number | undefined;
+    xLabel: string;
+    seriesLabel: string;
+    seriesIndex: number;
+    xIndex: number;
+  }) => void;
+}
+
+/**
+ * ColumnChart component for rendering grouped/stacked column charts.
+ * Handles layout, axis configuration, empty state, and data validation.
+ * Uses ChartFrame for layout and axes, and ColumnChartContent for rendering columns.
+ *
+ * @param data - Array of series, each with a label and array of values.
+ * @param yAxisConfig - Optional Y axis configuration.
+ * @param xAxisConfig - Optional X axis configuration.
+ * @param style - Optional style for the chart container.
+ * @param testID - Optional test ID for testing.
+ * @param headerConfig - Optional header configuration (title, actions).
+ * @param emptyText - Optional text to display when data is empty.
+ * @param onBarPress - Called when a bar (column segment) is pressed. Receives info about the bar.
+ *
+ * Example usage:
+ * <ColumnChart
+ *   data={data}
+ *   xAxisConfig={xAxisConfig}
+ *   yAxisConfig={yAxisConfig}
+ *   emptyText="No data available"
+ * />
+ */
+const ColumnChart = ({
+  data,
+  yAxisConfig = {},
+  xAxisConfig = {},
+  style,
+  testID,
+  headerConfig,
+  emptyText,
+  onBarPress,
+}: ColumnChartProps) => {
+  const xLabels = useMemo(() => {
+    return xAxisConfig.labels && xAxisConfig.labels.length > 0
+      ? xAxisConfig.labels
+      : data[0]?.data.map((_, index) => index.toString()) || [];
+  }, [data[0]?.data.length, xAxisConfig.labels?.length]);
+
+  useEffect(() => {
+    // Validation: xLabels length must match each series' data length, only if labels are explicitly provided
+    if (xAxisConfig.labels && xAxisConfig.labels.length > 0) {
+      data.forEach((series) => {
+        if (series.data.length !== xLabels.length) {
+          throw new Error(
+            `xAxisConfig.labels length (${xLabels.length}) does not match data length (${series.data.length}) in series label: ${series.label}`
+          );
+        }
+      });
+    }
+  }, [data, xAxisConfig]);
+
+  useEffect(() => {
+    // Assert that the chart does not support negative values
+    data.forEach((series) => {
+      series.data.forEach((value, idx) => {
+        if (typeof value === 'number' && value < 0) {
+          throw new Error(
+            `Negative values are not supported in ColumnChart. Found value ${value} in series "${series.label}" at index ${idx}.`
+          );
+        }
+      });
+    });
+  }, [data]);
+
+  const [dimensions, setDimensions] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setDimensions({ width, height });
+    }
+  }, []);
+
+  // Calculate stacked maxY
+  const yMax = useMemo(
+    () =>
+      Math.max(
+        ...xLabels.map((_, xIdx) =>
+          data.reduce((sum, series) => sum + (series.data[xIdx] ?? 0), 0)
+        )
+      ),
+    [data, xLabels]
+  );
+
+  const niceValues = useMemo(() => {
+    const maxDataValue = yMax;
+    const minDataValue = 0;
+    return createNiceScale(minDataValue, maxDataValue);
+  }, [data]);
+
+  const yAxisStep = yAxisConfig?.step ?? niceValues.tickSpacing;
+  const yAxisInterval = yAxisConfig?.tick?.interval ?? yAxisStep;
+
+  const calculatedYAxisConfig = useMemo(() => {
+    return {
+      ...yAxisConfig,
+      maxValue: yAxisConfig?.maxValue ?? niceValues.niceMax,
+      minValue: 0,
+      step: yAxisConfig?.step ?? niceValues.tickSpacing,
+      tick: {
+        interval: yAxisInterval,
+      },
+    };
+  }, [yAxisConfig, niceValues, yAxisInterval]);
+
+  const calculatedXAxisConfig = useMemo(() => {
+    return {
+      ...xAxisConfig,
+      labels: xLabels,
+    };
+  }, [xAxisConfig, xLabels]);
+
+  return (
+    <StyledColumnChartWrapper style={style} testID={testID} onLayout={onLayout}>
+      {dimensions && (
+        <ChartFrame
+          isEmpty={data.length === 0}
+          xAxisConfig={calculatedXAxisConfig}
+          yAxisConfig={calculatedYAxisConfig}
+          headerConfig={headerConfig}
+          width={dimensions.width}
+          height={dimensions.height}
+          hideXAxisGrid
+          emptyText={emptyText}
+          renderContent={({ coordinates }) => (
+            <ColumnChartContent
+              coordinates={coordinates}
+              data={data}
+              xAxisConfig={calculatedXAxisConfig}
+              yAxisConfig={calculatedYAxisConfig}
+              onBarPress={onBarPress}
+            />
+          )}
+        />
+      )}
+    </StyledColumnChartWrapper>
+  );
+};
+
+export default ColumnChart;

package/src/components/Chart/Line/Line.tsx

@@ -0,0 +1,81 @@
+import * as d3 from 'd3';
+import React, { useMemo } from 'react';
+import { Path } from 'react-native-svg';
+import { DEFAULT_LINE_STROKE_WIDTH } from '../shared/constants';
+import useScaleBandX from '../shared/hooks/useScaleBandX';
+import useScaleLinearY from '../shared/hooks/useScaleLinearY';
+import { AxisCoordinates, DataValue } from '../types';
+import { useTheme } from '../../../theme';
+
+/**
+ * Props for the Line chart component
+ */
+type LineProps = {
+  /** Array of data points to be plotted on the line chart */
+  data: DataValue[];
+  /** Maximum value for the Y-axis scale */
+  maxValue: number;
+  /** Minimum value for the Y-axis scale */
+  minValue: number;
+  /** Array of labels for the X-axis points */
+  labels: string[];
+  /** Coordinates defining the chart's boundaries and scale */
+  coordinates: AxisCoordinates;
+  /** Color for the line */
+  color?: string;
+};
+
+const Line = ({
+  data,
+  maxValue,
+  minValue,
+  labels,
+  coordinates,
+  color,
+}: LineProps) => {
+  const { xStart, xEnd, yStart, yEnd } = coordinates;
+  const theme = useTheme();
+
+  // Create scales
+  const xScale = useScaleBandX({
+    labels,
+    xStart,
+    xEnd,
+  });
+
+  const yScale = useScaleLinearY({
+    maxValue,
+    minValue,
+    yStart,
+    yEnd,
+  });
+
+  // Create line generator with proper curve
+  const lineGenerator = useMemo(
+    () =>
+      d3
+        .line<DataValue>()
+        .x((_, i) => (xScale(labels[i]) ?? 0) + xScale.bandwidth() / 2)
+        .y((d) => yScale(d ?? 0))
+        .curve(d3.curveBasis),
+    [xScale, yScale, labels]
+  );
+
+  // Generate path data
+  const pathData = useMemo(() => lineGenerator(data), [data, lineGenerator]);
+
+  return pathData ? (
+    <Path
+      testID="line-path"
+      accessibilityLabel={`chart-line-maxValue:${maxValue},minValue:${minValue},labelsLength:${labels.length}`}
+      d={pathData}
+      stroke={color || theme.colors.secondary}
+      strokeWidth={DEFAULT_LINE_STROKE_WIDTH}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ) : null;
+};
+
+export default Line;

package/src/components/Chart/Line/__tests__/Line.spec.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import Line from '../Line';
+
+describe('Line', () => {
+  it('should render with basic data', () => {
+    const { getByTestId, toJSON } = renderWithTheme(
+      <Line
+        data={[1, 2, 3]}
+        maxValue={3}
+        minValue={1}
+        labels={['1', '2', '3']}
+        coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    const path = getByTestId('line-path');
+    expect(path).toBeTruthy();
+    expect(path.props.accessibilityLabel).toBe(
+      'chart-line-maxValue:3,minValue:1,labelsLength:3'
+    );
+    expect(path.props.d).toBe(
+      'M96.875,250L109.896,233.333C122.917,216.667,148.958,183.333,175,150C201.042,116.667,227.083,83.333,240.104,66.667L253.125,50'
+    );
+  });
+
+  it('should render with negative values', () => {
+    const { getByTestId } = renderWithTheme(
+      <Line
+        data={[-1, -2, -3]}
+        maxValue={-1}
+        minValue={-3}
+        labels={['1', '2', '3']}
+        coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+      />
+    );
+
+    const path = getByTestId('line-path');
+    expect(path).toBeTruthy();
+    expect(path.props.accessibilityLabel).toBe(
+      'chart-line-maxValue:-1,minValue:-3,labelsLength:3'
+    );
+    expect(path.props.d).toBe(
+      'M96.875,50L109.896,66.667C122.917,83.333,148.958,116.667,175,150C201.042,183.333,227.083,216.667,240.104,233.333L253.125,250'
+    );
+  });
+
+  it('should render with mixed positive and negative values', () => {
+    const { getByTestId } = renderWithTheme(
+      <Line
+        data={[-1, 0, 1]}
+        maxValue={1}
+        minValue={-1}
+        labels={['1', '2', '3']}
+        coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+      />
+    );
+
+    const path = getByTestId('line-path');
+    expect(path).toBeTruthy();
+    expect(path.props.accessibilityLabel).toBe(
+      'chart-line-maxValue:1,minValue:-1,labelsLength:3'
+    );
+    expect(path.props.d).toBe(
+      'M96.875,250L109.896,233.333C122.917,216.667,148.958,183.333,175,150C201.042,116.667,227.083,83.333,240.104,66.667L253.125,50'
+    );
+  });
+
+  it('should render with decimal values', () => {
+    const { getByTestId } = renderWithTheme(
+      <Line
+        data={[1.5, 2.5, 3.5]}
+        maxValue={3.5}
+        minValue={1.5}
+        labels={['1', '2', '3']}
+        coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+      />
+    );
+
+    const path = getByTestId('line-path');
+    expect(path).toBeTruthy();
+    expect(path.props.accessibilityLabel).toBe(
+      'chart-line-maxValue:3.5,minValue:1.5,labelsLength:3'
+    );
+    expect(path.props.d).toBe(
+      'M96.875,250L109.896,233.333C122.917,216.667,148.958,183.333,175,150C201.042,116.667,227.083,83.333,240.104,66.667L253.125,50'
+    );
+  });
+
+  it('should render with different coordinates', () => {
+    const { getByTestId } = renderWithTheme(
+      <Line
+        data={[1, 2, 3]}
+        maxValue={3}
+        minValue={1}
+        labels={['1', '2', '3']}
+        coordinates={{ xStart: 100, xEnd: 400, yStart: 100, yEnd: 300 }}
+      />
+    );
+
+    const path = getByTestId('line-path');
+    expect(path).toBeTruthy();
+    expect(path.props.accessibilityLabel).toBe(
+      'chart-line-maxValue:3,minValue:1,labelsLength:3'
+    );
+    expect(path.props.d).toBe(
+      'M156.25,300L171.875,283.333C187.5,266.667,218.75,233.333,250,200C281.25,166.667,312.5,133.333,328.125,116.667L343.75,100'
+    );
+  });
+
+  it('should not render when path data is null', () => {
+    const { queryByTestId } = renderWithTheme(
+      <Line
+        data={[]}
+        maxValue={0}
+        minValue={0}
+        labels={[]}
+        coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+      />
+    );
+
+    expect(queryByTestId('line-path')).toBeNull();
+  });
+
+  it('should render with custom color', () => {
+    const { getByTestId } = renderWithTheme(
+      <Line
+        data={[1, 2, 3]}
+        maxValue={3}
+        minValue={1}
+        labels={['1', '2', '3']}
+        coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+        color="#FF0000"
+      />
+    );
+
+    const path = getByTestId('line-path');
+    expect(path).toBeTruthy();
+    expect(path.props.accessibilityLabel).toBe(
+      'chart-line-maxValue:3,minValue:1,labelsLength:3'
+    );
+    expect(path.props.d).toBe(
+      'M96.875,250L109.896,233.333C122.917,216.667,148.958,183.333,175,150C201.042,116.667,227.083,83.333,240.104,66.667L253.125,50'
+    );
+    expect(path.props.stroke).toEqual({ payload: 4294901760, type: 0 });
+  });
+});

package/src/components/Chart/Line/__tests__/__snapshots__/Line.spec.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line should render with basic data 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RNSVGPath
+    accessibilityLabel="chart-line-maxValue:3,minValue:1,labelsLength:3"
+    d="M96.875,250L109.896,233.333C122.917,216.667,148.958,183.333,175,150C201.042,116.667,227.083,83.333,240.104,66.667L253.125,50"
+    fill={null}
+    propList={
+      [
+        "fill",
+        "stroke",
+        "strokeWidth",
+        "strokeLinecap",
+        "strokeLinejoin",
+      ]
+    }
+    stroke={
+      {
+        "payload": 4286144144,
+        "type": 0,
+      }
+    }
+    strokeLinecap={1}
+    strokeLinejoin={1}
+    strokeWidth={2}
+    testID="line-path"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;