@hero-design/rn 8.100.2 → 8.101.0

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

@@ -1,7 +1,12 @@
 import React from 'react';
+import { mobileVisualisationPalette } from '@hero-design/colors';
 import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import ColumnChart, { ColumnChartProps } from '../index';
+import {
+  ERROR_COLOR_NOT_FOUND,
+  ERROR_COLOR_NUMBER_MISMATCH,
+} from '../../shared/constants';
 
 const baseData: ColumnChartProps['data'] = [
   {
@@ -131,4 +136,106 @@ describe('ColumnChart', () => {
       xIndex: 0,
     });
   });
+
+  it('renders chart with custom colors', () => {
+    const { getByTestId, getByText, toJSON } = renderWithTheme(
+      <ColumnChart
+        data={baseData}
+        xAxisConfig={xAxisConfig}
+        testID="column-chart"
+        styleConfig={{
+          series: [
+            { label: 'Series 1', color: 'greenLight' },
+            { label: 'Series 2', color: 'blueLight' },
+          ],
+        }}
+      />
+    );
+
+    // Simulate the onLayout event
+    fireEvent(getByTestId('column-chart'), 'layout', {
+      nativeEvent: {
+        layout: { x: 0, y: 0, width: 100, height: 200 },
+      },
+    });
+
+    expect(
+      getByTestId('column-segment-A-Series 1').props.accessibilityLabel
+    ).toContain(`color ${mobileVisualisationPalette.greenLight}`);
+    expect(
+      getByTestId('column-segment-B-Series 2').props.accessibilityLabel
+    ).toContain(`color ${mobileVisualisationPalette.blueLight}`);
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('A')).toBeVisible();
+    expect(getByText('B')).toBeVisible();
+    expect(getByText('C')).toBeVisible();
+  });
+
+  it('should throw error if styleConfig.series does not have enough colors', () => {
+    expect(() =>
+      renderWithTheme(
+        <ColumnChart
+          data={baseData}
+          xAxisConfig={xAxisConfig}
+          testID="column-chart"
+          styleConfig={{
+            series: [{ label: 'Series 1' }],
+          }}
+        />
+      )
+    ).toThrow(ERROR_COLOR_NUMBER_MISMATCH);
+
+    expect(() =>
+      renderWithTheme(
+        <ColumnChart
+          data={baseData}
+          xAxisConfig={xAxisConfig}
+          testID="column-chart"
+          styleConfig={{
+            series: [
+              { label: 'Series 1', color: 'greenLight' },
+              { label: 'Series 2', color: 'blueLight' },
+              { label: 'Series 3', color: 'redLight' },
+            ],
+          }}
+        />
+      )
+    ).toThrow(ERROR_COLOR_NUMBER_MISMATCH);
+
+    expect(() =>
+      renderWithTheme(
+        <ColumnChart
+          data={baseData}
+          xAxisConfig={xAxisConfig}
+          testID="column-chart"
+          styleConfig={{
+            series: [
+              { label: 'Series 1', color: undefined },
+              { label: 'Series 2', color: 'blueLight' },
+            ],
+          }}
+        />
+      )
+    ).toThrow(ERROR_COLOR_NUMBER_MISMATCH);
+  });
+
+  it('should throw error if color is not found in the palette', () => {
+    expect(() =>
+      renderWithTheme(
+        <ColumnChart
+          data={baseData}
+          xAxisConfig={xAxisConfig}
+          testID="column-chart"
+          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/ColumnChart/index.tsx

@@ -10,12 +10,14 @@ import {
   DataValue,
   HeaderConfig,
   Series,
+  StyleConfig,
   XAxisConfig,
   YAxisConfig,
 } from '../types';
 import ColumnChartContent from './ColumnChartContent';
 import { createNiceScale } from '../shared/niceNumbers';
 import { StyledColumnChartWrapper } from './StyledColumnChart';
+import useCustomColor from '../shared/hooks/useCustomColor';
 
 /**
  * Props for the ColumnChart component.
@@ -69,6 +71,12 @@ export interface ColumnChartProps {
     seriesIndex: number;
     xIndex: number;
   }) => void;
+  /**
+   * * styleConfig use to custom the style of the chart.
+   * * styleConfig must be an object:
+   *    * color?: use to custom the legend colors.
+   */
+  styleConfig?: StyleConfig;
 }
 
 /**
@@ -102,7 +110,13 @@ const ColumnChart = ({
   headerConfig,
   emptyText,
   onBarPress,
+  styleConfig,
 }: ColumnChartProps) => {
+  const colorScale = useCustomColor({
+    data,
+    seriesConfig: styleConfig?.series,
+  });
+
   const xLabels = useMemo(() => {
     return xAxisConfig.labels && xAxisConfig.labels.length > 0
       ? xAxisConfig.labels
@@ -205,6 +219,7 @@ const ColumnChart = ({
               xAxisConfig={calculatedXAxisConfig}
               yAxisConfig={calculatedYAxisConfig}
               onBarPress={onBarPress}
+              colorScale={colorScale}
             />
           )}
         />

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

@@ -23,6 +23,8 @@ type LineProps = {
   coordinates: AxisCoordinates;
   /** Color for the line */
   color?: string;
+  /** Test ID for the line */
+  testID?: string;
 };
 
 const Line = ({
@@ -32,6 +34,7 @@ const Line = ({
   labels,
   coordinates,
   color,
+  testID,
 }: LineProps) => {
   const { xStart, xEnd, yStart, yEnd } = coordinates;
   const theme = useTheme();
@@ -66,8 +69,8 @@ const Line = ({
 
   return pathData ? (
     <Path
-      testID="line-path"
-      accessibilityLabel={`chart-line-maxValue:${maxValue},minValue:${minValue},labelsLength:${labels.length}`}
+      testID={testID}
+      accessibilityLabel={`chart-line-maxValue:${maxValue},minValue:${minValue},labelsLength:${labels.length},color:${color}`}
       d={pathData}
       stroke={color || theme.colors.secondary}
       strokeWidth={DEFAULT_LINE_STROKE_WIDTH}

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

@@ -11,6 +11,7 @@ describe('Line', () => {
         minValue={1}
         labels={['1', '2', '3']}
         coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+        testID="line-path"
       />
     );
 
@@ -18,7 +19,7 @@ describe('Line', () => {
     const path = getByTestId('line-path');
     expect(path).toBeTruthy();
     expect(path.props.accessibilityLabel).toBe(
-      'chart-line-maxValue:3,minValue:1,labelsLength:3'
+      'chart-line-maxValue:3,minValue:1,labelsLength:3,color:undefined'
     );
     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'
@@ -33,13 +34,14 @@ describe('Line', () => {
         minValue={-3}
         labels={['1', '2', '3']}
         coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+        testID="line-path"
       />
     );
 
     const path = getByTestId('line-path');
     expect(path).toBeTruthy();
     expect(path.props.accessibilityLabel).toBe(
-      'chart-line-maxValue:-1,minValue:-3,labelsLength:3'
+      'chart-line-maxValue:-1,minValue:-3,labelsLength:3,color:undefined'
     );
     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'
@@ -54,13 +56,14 @@ describe('Line', () => {
         minValue={-1}
         labels={['1', '2', '3']}
         coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+        testID="line-path"
       />
     );
 
     const path = getByTestId('line-path');
     expect(path).toBeTruthy();
     expect(path.props.accessibilityLabel).toBe(
-      'chart-line-maxValue:1,minValue:-1,labelsLength:3'
+      'chart-line-maxValue:1,minValue:-1,labelsLength:3,color:undefined'
     );
     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'
@@ -75,13 +78,14 @@ describe('Line', () => {
         minValue={1.5}
         labels={['1', '2', '3']}
         coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+        testID="line-path"
       />
     );
 
     const path = getByTestId('line-path');
     expect(path).toBeTruthy();
     expect(path.props.accessibilityLabel).toBe(
-      'chart-line-maxValue:3.5,minValue:1.5,labelsLength:3'
+      'chart-line-maxValue:3.5,minValue:1.5,labelsLength:3,color:undefined'
     );
     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'
@@ -96,13 +100,14 @@ describe('Line', () => {
         minValue={1}
         labels={['1', '2', '3']}
         coordinates={{ xStart: 100, xEnd: 400, yStart: 100, yEnd: 300 }}
+        testID="line-path"
       />
     );
 
     const path = getByTestId('line-path');
     expect(path).toBeTruthy();
     expect(path.props.accessibilityLabel).toBe(
-      'chart-line-maxValue:3,minValue:1,labelsLength:3'
+      'chart-line-maxValue:3,minValue:1,labelsLength:3,color:undefined'
     );
     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'
@@ -117,6 +122,7 @@ describe('Line', () => {
         minValue={0}
         labels={[]}
         coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
+        testID="line-path"
       />
     );
 
@@ -132,13 +138,14 @@ describe('Line', () => {
         labels={['1', '2', '3']}
         coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 250 }}
         color="#FF0000"
+        testID="line-path"
       />
     );
 
     const path = getByTestId('line-path');
     expect(path).toBeTruthy();
     expect(path.props.accessibilityLabel).toBe(
-      'chart-line-maxValue:3,minValue:1,labelsLength:3'
+      'chart-line-maxValue:3,minValue:1,labelsLength:3,color:#FF0000'
     );
     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'

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

@@ -9,7 +9,7 @@ exports[`Line should render with basic data 1`] = `
   }
 >
   <RNSVGPath
-    accessibilityLabel="chart-line-maxValue:3,minValue:1,labelsLength:3"
+    accessibilityLabel="chart-line-maxValue:3,minValue:1,labelsLength:3,color:undefined"
     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={