@hero-design/rn 8.100.2 → 8.101.0

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

@@ -1,8 +1,13 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
+import { mobileVisualisationPalette } from '@hero-design/colors';
 import Button from '../../../Button/Button';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
-import LineChart from '..';
+import LineChart, { LineChartProps } from '..';
+import {
+  ERROR_COLOR_NOT_FOUND,
+  ERROR_COLOR_NUMBER_MISMATCH,
+} from '../../shared/constants';
 
 const onActionPress = jest.fn();
 
@@ -109,4 +114,93 @@ describe('LineChart', () => {
     expect(getByText('Jun 2025')).toBeVisible();
     expect(getByText('Jul 2025')).toBeVisible();
   });
+
+  it('renders chart with custom colors', () => {
+    const customColorsProps: LineChartProps = {
+      ...lineChartProps,
+      data: [
+        { label: 'Series 1', data: [1, 2, 3] },
+        { label: 'Series 2', data: [4, 5, 6] },
+      ],
+      styleConfig: {
+        series: [
+          { label: 'Series 1', color: 'greenLight' },
+          { label: 'Series 2', color: 'blueLight' },
+        ],
+      },
+    };
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <LineChart {...customColorsProps} />
+    );
+
+    expect(getByTestId('line-Series 1').props.accessibilityLabel).toContain(
+      `color:${mobileVisualisationPalette.greenLight}`
+    );
+    expect(getByTestId('line-Series 2').props.accessibilityLabel).toContain(
+      `color:${mobileVisualisationPalette.blueLight}`
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('May 2025')).toBeVisible();
+    expect(getByText('Jun 2025')).toBeVisible();
+    expect(getByText('Jul 2025')).toBeVisible();
+  });
+
+  it('should throw an error if the styleConfig does not have enough colors', () => {
+    expect(() =>
+      renderWithTheme(
+        <LineChart
+          {...lineChartProps}
+          styleConfig={{ series: [{ label: 'Series 1' }] }}
+        />
+      )
+    ).toThrow(ERROR_COLOR_NUMBER_MISMATCH);
+
+    expect(() =>
+      renderWithTheme(
+        <LineChart
+          {...lineChartProps}
+          styleConfig={{
+            series: [
+              { label: 'Series 1', color: 'greenLight' },
+              { label: 'Series 2', color: 'blueLight' },
+              { label: 'Series 3', color: 'redLight' },
+            ],
+          }}
+        />
+      )
+    ).toThrow(ERROR_COLOR_NUMBER_MISMATCH);
+
+    expect(() =>
+      renderWithTheme(
+        <LineChart
+          {...lineChartProps}
+          styleConfig={{
+            series: [
+              { label: 'Series 1', color: undefined },
+              { label: 'Series 2', color: 'blueLight' },
+              { label: 'Series 3', color: 'redLight' },
+            ],
+          }}
+        />
+      )
+    ).toThrow(ERROR_COLOR_NUMBER_MISMATCH);
+  });
+
+  it('should throw error if the color is not found in the palette', () => {
+    expect(() =>
+      renderWithTheme(
+        <LineChart
+          {...lineChartProps}
+          styleConfig={{
+            series: [
+              // @ts-expect-error: This is a test for error handling
+              { label: 'Series 1', color: 'mauve' },
+              { label: 'Series 2', color: 'blueLight' },
+            ],
+          }}
+        />
+      )
+    ).toThrow(ERROR_COLOR_NOT_FOUND.replace('{color}', 'mauve'));
+  });
 });

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { LayoutChangeEvent, ViewStyle } from 'react-native';
 import ChartFrame from '../shared/ChartFrame';
-import useColorScale from '../shared/hooks/useColorScale';
+import useCustomColor from '../shared/hooks/useCustomColor';
 import {
   createNiceScale,
   maxValueFromDataSet,
@@ -13,6 +13,7 @@ import {
   DataValue,
   HeaderConfig,
   Series,
+  StyleConfig,
   XAxisConfig,
   YAxisConfig,
 } from '../types';
@@ -47,6 +48,12 @@ export interface LineChartProps {
    * Text to display when the chart is empty.
    */
   emptyText?: string;
+  /**
+   * * styleConfig use to custom the style of the chart.
+   * * styleConfig must be an object:
+   *    * color?: use to custom the legend colors.
+   */
+  styleConfig?: StyleConfig;
 }
 
 const LineChart = ({
@@ -57,10 +64,14 @@ const LineChart = ({
   testID,
   headerConfig,
   emptyText,
+  styleConfig,
 }: LineChartProps) => {
   const [chartSize, setChartSize] = useState({ width: 0, height: 0 });
 
-  const colorScale = useColorScale(data.map((series) => series.label));
+  const colorScale = useCustomColor({
+    data,
+    seriesConfig: styleConfig?.series,
+  });
 
   const niceValues = useMemo(() => {
     const maxDataValue = maxValueFromDataSet(data);
@@ -106,6 +117,7 @@ const LineChart = ({
       data.map((series) => (
         <Line
           color={colorScale(series.label)}
+          testID={`line-${series.label}`}
           key={series.label}
           data={series.data}
           coordinates={coordinates}

package/src/components/Chart/shared/__tests__/utils.spec.ts

@@ -0,0 +1,16 @@
+import { filterElementHasNoColor } from '../utils';
+
+describe('filterElementHasNoColor', () => {
+  it('should return an array of objects with color property', () => {
+    const data = [
+      { label: '07th', color: 'red' },
+      { label: '08th', color: 'blue' },
+      { label: '9th', color: undefined },
+    ];
+    const result = filterElementHasNoColor(data);
+    expect(result).toEqual([
+      { label: '07th', color: 'red' },
+      { label: '08th', color: 'blue' },
+    ]);
+  });
+});

package/src/components/Chart/shared/constants.ts

@@ -1,2 +1,6 @@
 export const DASH_ARRAY = [4, 4];
 export const DEFAULT_LINE_STROKE_WIDTH = 2;
+export const ERROR_COLOR_NUMBER_MISMATCH =
+  'styleConfig.series should have exact number of colors as the number of labels';
+export const ERROR_COLOR_NOT_FOUND =
+  'Color {color} not found in the mobile visualization palette.';

package/src/components/Chart/shared/hooks/useCustomColor.ts

@@ -0,0 +1,84 @@
+import { mobileVisualisationPalette } from '@hero-design/colors';
+import { useMemo } from 'react';
+import type { DataValue, Series, StyleConfig } from '../../types';
+import {
+  ERROR_COLOR_NOT_FOUND,
+  ERROR_COLOR_NUMBER_MISMATCH,
+} from '../constants';
+import { filterElementHasNoColor } from '../utils';
+import useColorScale from './useColorScale';
+
+/**
+ * Props for the useCustomColor hook
+ */
+type useCustomColorProps = {
+  /** Array of data series containing values and labels */
+  data: Array<Series<Array<DataValue>>>;
+  /** Optional configuration for custom series colors */
+  seriesConfig?: StyleConfig['series'];
+};
+
+/**
+ * Hook to handle custom color assignments for chart series
+ *
+ * This hook manages:
+ * 1. Validation of custom color configurations
+ * 2. Color mapping between series and palette
+ * 3. Fallback to default colors when custom colors aren't provided
+ *
+ * @throws {Error} When custom colors are invalid or don't match data series
+ */
+const useCustomColor = ({ data, seriesConfig }: useCustomColorProps) => {
+  // Check if custom colors are provided and non-empty
+  const hasCustomColors = Boolean(seriesConfig?.length);
+
+  // Process and validate custom color segments
+  const customSegments = useMemo(() => {
+    if (!hasCustomColors) return undefined;
+
+    // Filter out segments without colors
+    const filtered = filterElementHasNoColor(seriesConfig || []);
+
+    // Validate: number of custom colors must match number of data series
+    if (filtered.length < data.length) {
+      throw new Error(ERROR_COLOR_NUMBER_MISMATCH);
+    }
+
+    // Validate: all data series must have corresponding custom colors
+    const dataLabels = new Set(data.map((d) => d.label));
+    if (!filtered.every((series) => dataLabels.has(series.label))) {
+      throw new Error(ERROR_COLOR_NUMBER_MISMATCH);
+    }
+
+    return filtered;
+  }, [seriesConfig, hasCustomColors, data]);
+
+  // Map custom segments to actual color values from palette
+  const customColors = useMemo(() => {
+    if (!customSegments) return [];
+
+    // Convert color keys to actual color values
+    const colors = customSegments.map((series) => {
+      const color = mobileVisualisationPalette[series.color];
+      // Validate: color key must exist in palette
+      if (color === undefined) {
+        throw new Error(ERROR_COLOR_NOT_FOUND.replace('{color}', series.color));
+      }
+      return color;
+    });
+
+    return colors;
+  }, [customSegments]);
+
+  // Create color scale:
+  // - If custom colors exist, use custom color mapping
+  // - Otherwise, fall back to default color mapping
+  return useColorScale(
+    customSegments
+      ? customSegments.map((series) => series.label)
+      : data.map((series) => series.label),
+    customColors
+  );
+};
+
+export default useCustomColor;

package/src/components/Chart/shared/utils.ts

@@ -0,0 +1,14 @@
+/**
+ * Filter elements that have no color.
+ * @param data - The data to filter.
+ * @returns The filtered data.
+ */
+const filterElementHasNoColor = <D extends object>(
+  data: Array<D & { color?: string }>
+): Array<D & { color: string }> => {
+  return data.filter((element) => element.color !== undefined) as Array<
+    D & { color: string }
+  >;
+};
+
+export { filterElementHasNoColor };

package/src/components/Chart/types.ts

@@ -89,6 +89,37 @@ type HeaderConfig = {
   actionsExtra?: React.ReactNode;
 };
 
+type ChartColor =
+  | 'primaryLight'
+  | 'blueLight'
+  | 'greenLight'
+  | 'redLight'
+  | 'orangeLight'
+  | 'yellowLight'
+  | 'pinkLight'
+  | 'greyLight'
+  | 'primaryMedium'
+  | 'blueMedium'
+  | 'greenMedium'
+  | 'redMedium'
+  | 'orangeMedium'
+  | 'yellowMedium'
+  | 'pinkMedium'
+  | 'greyMedium';
+
+/**
+ * Represents the configuration for the style of the chart.
+ */
+type StyleConfig = {
+  /**
+   * Chart colors config.
+   */
+  series?: Array<{
+    label: string;
+    color?: ChartColor;
+  }>;
+};
+
 export type {
   Series,
   TickConfig,
@@ -97,4 +128,5 @@ export type {
   DataValue,
   AxisCoordinates,
   HeaderConfig,
+  StyleConfig,
 };