@hero-design/rn 8.100.2 → 8.101.1

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

@@ -3,11 +3,10 @@
 // Each segment represents a value from a different series, stacked vertically. Uses the Segment component for rendering each bar.
 
 import React, { memo } from 'react';
-import Segment from './Segment';
-import { DataValue, YAxisConfig } from '../types';
-import useScaleLinearY from '../shared/hooks/useScaleLinearY';
-import useColorScale from '../shared/hooks/useColorScale';
 import { deepCompareValue } from '../../../utils/helpers';
+import useScaleLinearY from '../shared/hooks/useScaleLinearY';
+import { DataValue, YAxisConfig } from '../types';
+import Segment from './Segment';
 
 interface StackedSegmentProps {
   stackedData: Array<DataValue>;
@@ -27,6 +26,10 @@ interface StackedSegmentProps {
     seriesIndex: number;
     xIndex: number;
   }) => void;
+  /**
+   * A function that maps series labels to colors.
+   */
+  colorScale?: (label: string) => string | undefined;
 }
 
 /**
@@ -43,6 +46,7 @@ const StackedSegment: React.FC<StackedSegmentProps> = ({
   xCenter,
   xIndex,
   onBarPress,
+  colorScale,
 }) => {
   const { yStart, yEnd } = coordinates;
   const stackedMaxY = yAxisConfig.maxValue ?? 0;
@@ -54,7 +58,7 @@ const StackedSegment: React.FC<StackedSegmentProps> = ({
   });
 
   let yStack = 0; // running sum for stacking
-  const colorScale = useColorScale(seriesLabels);
+
   return stackedData.map((value, index) => {
     // If value is undefined, skip this segment
     if (value === undefined) {
@@ -74,7 +78,7 @@ const StackedSegment: React.FC<StackedSegmentProps> = ({
         xCenter={xCenter}
         y={y1}
         height={colHeight}
-        color={colorScale(seriesLabel)}
+        color={colorScale?.(seriesLabel)}
         value={value}
         xLabel={xLabel}
         seriesLabel={seriesLabel}

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

@@ -25,7 +25,7 @@ describe('Segment', () => {
 
     const segment = getByTestId('test-segment');
     expect(segment.props.accessibilityLabel).toBe(
-      'Column segment: value 10, x-label A, series Series 1'
+      'Column segment: value 10, x-label A, series Series 1, color #000000'
     );
   });
 

package/src/components/Chart/ColumnChart/__tests__/__snapshots__/StackedSegment.spec.tsx.snap

@@ -35,19 +35,14 @@ exports[`StackedSegment renders segments with correct accessibilityLabel and tes
       }
     >
       <RNSVGRect
-        accessibilityLabel="Column segment: value 10, x-label A, series Series 1"
+        accessibilityLabel="Column segment: value 10, x-label A, series Series 1, color undefined"
         fill={
           {
-            "payload": 4291005678,
+            "payload": 4278190080,
             "type": 0,
           }
         }
         height={31.333333333333314}
-        propList={
-          [
-            "fill",
-          ]
-        }
         rx={8}
         testID="column-segment-A-Series 1"
         width={16}
@@ -55,19 +50,14 @@ exports[`StackedSegment renders segments with correct accessibilityLabel and tes
         y={167.66666666666669}
       />
       <RNSVGRect
-        accessibilityLabel="Column segment: value 20, x-label A, series Series 2"
+        accessibilityLabel="Column segment: value 20, x-label A, series Series 2, color undefined"
         fill={
           {
-            "payload": 4280139502,
+            "payload": 4278190080,
             "type": 0,
           }
         }
         height={64.66666666666669}
-        propList={
-          [
-            "fill",
-          ]
-        }
         rx={8}
         testID="column-segment-A-Series 2"
         width={16}
@@ -75,19 +65,14 @@ exports[`StackedSegment renders segments with correct accessibilityLabel and tes
         y={101}
       />
       <RNSVGRect
-        accessibilityLabel="Column segment: value 30, x-label A, series Series 3"
+        accessibilityLabel="Column segment: value 30, x-label A, series Series 3, color undefined"
         fill={
           {
-            "payload": 4284471940,
+            "payload": 4278190080,
             "type": 0,
           }
         }
         height={98}
-        propList={
-          [
-            "fill",
-          ]
-        }
         rx={8}
         testID="column-segment-A-Series 3"
         width={16}