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

package/src/components/Chart/shared/__tests__/__snapshots__/YAxisGrid.spec.tsx.snap

@@ -0,0 +1,228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`YAxisGrid should render correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RNSVGGroup
+    fill={
+      {
+        "payload": 4278190080,
+        "type": 0,
+      }
+    }
+    testID="y-axis-grid"
+  >
+    <RNSVGLine
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+      propList={
+        [
+          "stroke",
+          "strokeDasharray",
+        ]
+      }
+      stroke={
+        {
+          "payload": 4293454314,
+          "type": 0,
+        }
+      }
+      strokeDasharray={
+        [
+          4,
+          4,
+        ]
+      }
+      testID="y-axis-grid-0"
+      x1={0}
+      x2={100}
+      y1={100}
+      y2={100}
+    />
+    <RNSVGLine
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+      propList={
+        [
+          "stroke",
+          "strokeDasharray",
+        ]
+      }
+      stroke={
+        {
+          "payload": 4293454314,
+          "type": 0,
+        }
+      }
+      strokeDasharray={
+        [
+          4,
+          4,
+        ]
+      }
+      testID="y-axis-grid-2000"
+      x1={0}
+      x2={100}
+      y1={80}
+      y2={80}
+    />
+    <RNSVGLine
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+      propList={
+        [
+          "stroke",
+          "strokeDasharray",
+        ]
+      }
+      stroke={
+        {
+          "payload": 4293454314,
+          "type": 0,
+        }
+      }
+      strokeDasharray={
+        [
+          4,
+          4,
+        ]
+      }
+      testID="y-axis-grid-4000"
+      x1={0}
+      x2={100}
+      y1={60}
+      y2={60}
+    />
+    <RNSVGLine
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+      propList={
+        [
+          "stroke",
+          "strokeDasharray",
+        ]
+      }
+      stroke={
+        {
+          "payload": 4293454314,
+          "type": 0,
+        }
+      }
+      strokeDasharray={
+        [
+          4,
+          4,
+        ]
+      }
+      testID="y-axis-grid-6000"
+      x1={0}
+      x2={100}
+      y1={40}
+      y2={40}
+    />
+    <RNSVGLine
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+      propList={
+        [
+          "stroke",
+          "strokeDasharray",
+        ]
+      }
+      stroke={
+        {
+          "payload": 4293454314,
+          "type": 0,
+        }
+      }
+      strokeDasharray={
+        [
+          4,
+          4,
+        ]
+      }
+      testID="y-axis-grid-8000"
+      x1={0}
+      x2={100}
+      y1={19.999999999999996}
+      y2={19.999999999999996}
+    />
+    <RNSVGLine
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+      propList={
+        [
+          "stroke",
+          "strokeDasharray",
+        ]
+      }
+      stroke={
+        {
+          "payload": 4293454314,
+          "type": 0,
+        }
+      }
+      strokeDasharray={
+        [
+          4,
+          4,
+        ]
+      }
+      testID="y-axis-grid-10000"
+      x1={0}
+      x2={100}
+      y1={0}
+      y2={0}
+    />
+  </RNSVGGroup>
+  <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>
+`;

package/src/components/Chart/shared/__tests__/niceNumbers.spec.tsx

@@ -0,0 +1,127 @@
+import {
+  createNiceScale,
+  maxValueFromDataSet,
+  minValueFromDataSet,
+} from '../niceNumbers';
+
+describe('createNiceScale', () => {
+  it('calculates niceMin, niceMax, and tickSpacing correctly', () => {
+    const result = createNiceScale(0, 100, 10);
+    expect(result.niceMin).toBe(0);
+    expect(result.niceMax).toBe(100);
+    expect(result.tickSpacing).toBe(10);
+  });
+
+  it('handles different input values', () => {
+    const result = createNiceScale(-50, 50, 5);
+    expect(result.niceMin).toBe(-60);
+    expect(result.niceMax).toBe(60);
+    expect(result.tickSpacing).toBe(20);
+  });
+
+  it('handles small input range', () => {
+    const result = createNiceScale(1, 2, 2);
+    expect(result.niceMin).toBe(1);
+    expect(result.niceMax).toBe(2);
+    expect(result.tickSpacing).toBe(1);
+  });
+
+  // Test cases for different fraction ranges with rounding
+  it('handles range with fraction < 1.5', () => {
+    const result = createNiceScale(0, 12, 5);
+    expect(result.niceMin).toBe(0);
+    expect(result.niceMax).toBe(15);
+    expect(result.tickSpacing).toBe(5);
+  });
+
+  it('handles range with fraction < 3', () => {
+    const result = createNiceScale(0, 25, 5);
+    expect(result.niceMin).toBe(0);
+    expect(result.niceMax).toBe(30);
+    expect(result.tickSpacing).toBe(10);
+  });
+
+  it('handles range with fraction < 7', () => {
+    const result = createNiceScale(0, 60, 5);
+    expect(result.niceMin).toBe(0);
+    expect(result.niceMax).toBe(60);
+    expect(result.tickSpacing).toBe(20);
+  });
+
+  it('handles range with fraction >= 7', () => {
+    const result = createNiceScale(0, 80, 5);
+    expect(result.niceMin).toBe(0);
+    expect(result.niceMax).toBe(80);
+    expect(result.tickSpacing).toBe(20);
+  });
+
+  // Test cases for different fraction ranges without rounding
+  it('handles range with fraction <= 1 without rounding', () => {
+    const result = createNiceScale(0, 8, 5);
+    expect(result.niceMin).toBe(0);
+    expect(result.niceMax).toBe(8);
+    expect(result.tickSpacing).toBe(2);
+  });
+
+  it('handles range with fraction <= 2 without rounding', () => {
+    const result = createNiceScale(0, 15, 5);
+    expect(result.niceMin).toBe(0);
+    expect(result.niceMax).toBe(15);
+    expect(result.tickSpacing).toBe(5);
+  });
+
+  it('handles range with fraction <= 5 without rounding', () => {
+    const result = createNiceScale(0, 40, 5);
+    expect(result.niceMin).toBe(0);
+    expect(result.niceMax).toBe(40);
+    expect(result.tickSpacing).toBe(10);
+  });
+
+  it('handles range with fraction > 5 without rounding', () => {
+    const result = createNiceScale(0, 60, 5);
+    expect(result.niceMin).toBe(0);
+    expect(result.niceMax).toBe(60);
+    expect(result.tickSpacing).toBe(20);
+  });
+
+  // Test cases for different orders of magnitude
+  it('handles very small numbers', () => {
+    const result = createNiceScale(0.001, 0.005, 5);
+    expect(result.niceMin).toBe(0.001);
+    expect(result.niceMax).toBe(0.005);
+    expect(result.tickSpacing).toBe(0.001);
+  });
+
+  it('handles very large numbers', () => {
+    const result = createNiceScale(1000000, 1500000, 5);
+    expect(result.niceMin).toBe(1000000);
+    expect(result.niceMax).toBe(1500000);
+    expect(result.tickSpacing).toBe(100000);
+  });
+});
+
+describe('maxValueFromDataSet', () => {
+  it('returns the maximum value from a dataset', () => {
+    const data = [
+      { label: 'Series 1', data: [100, undefined, 80, 1000, 476, -890] },
+      { label: 'Series 2', data: [] },
+      { label: 'Series 3', data: [100, 235, undefined, -1000, 476, 890] },
+      { label: 'Series 4', data: [-1, -10, -100, undefined] },
+    ];
+    const result = maxValueFromDataSet(data);
+    expect(result).toBe(1000);
+  });
+});
+
+describe('minValueFromDataSet', () => {
+  it('returns the minimum value from a dataset', () => {
+    const data = [
+      { label: 'Series 1', data: [100, undefined, 80, 1000, 476, 890] },
+      { label: 'Series 2', data: [] },
+      { label: 'Series 3', data: [-100, 235, undefined, 1000, 476, -890] },
+      { label: 'Series 4', data: [undefined, -1, undefined] },
+    ];
+    const result = minValueFromDataSet(data);
+    expect(result).toBe(-890);
+  });
+});

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

@@ -0,0 +1,2 @@
+export const DASH_ARRAY = [4, 4];
+export const DEFAULT_LINE_STROKE_WIDTH = 2;

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

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import * as d3 from 'd3';
+import { mobileVisualisationPalette } from '@hero-design/colors';
+
+// Only use colors that are not maasstrichtBlue
+const DEFAULT_COLORS = Object.entries(mobileVisualisationPalette)
+  .filter(([key]) => !key.startsWith('maasstrichtBlue'))
+  .map(([, value]) => value);
+
+/**
+ * useColorScale - Returns a d3 ordinal scale for mapping labels to colors.
+ * @param labels Array of labels (series names or keys)
+ * @param customColors Optional custom color palette
+ * @returns Ordinal scale function: (label: string) => color
+ */
+export default function useColorScale(
+  labels: string[],
+  customColors?: string[]
+): (label: string) => string | undefined {
+  return useMemo(() => {
+    const palette =
+      customColors && customColors.length > 0 ? customColors : DEFAULT_COLORS;
+    return d3.scaleOrdinal<string, string>().domain(labels).range(palette);
+  }, [labels, customColors]);
+}

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

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import * as d3 from 'd3';
+
+const useGenerateTicks = ({
+  maxValue,
+  minValue,
+  step,
+}: {
+  maxValue?: number;
+  minValue?: number;
+  step?: number;
+}) => {
+  const maxValueOrZero = maxValue || 0;
+  const minValueOrZero = minValue || 0;
+
+  const ticks = useMemo(() => {
+    const generatedTicks = d3.range(minValueOrZero, maxValueOrZero, step);
+    if (generatedTicks[generatedTicks.length - 1] !== maxValueOrZero) {
+      generatedTicks.push(maxValueOrZero);
+    }
+    return generatedTicks;
+  }, [maxValueOrZero, minValueOrZero, step]);
+
+  return ticks;
+};
+
+export default useGenerateTicks;

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

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import * as d3 from 'd3';
+
+export type UseScaleBandXProps = {
+  labels: string[];
+  xStart: number;
+  xEnd: number;
+};
+
+const useScaleBandX = ({ labels, xStart, xEnd }: UseScaleBandXProps) => {
+  return useMemo(
+    () => d3.scaleBand().domain(labels).range([xStart, xEnd]).padding(0.2),
+    [labels, xStart, xEnd]
+  );
+};
+
+export default useScaleBandX;

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

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import * as d3 from 'd3';
+
+export type UseScaleLinearYProps = {
+  maxValue: number;
+  minValue: number;
+  yStart: number;
+  yEnd: number;
+};
+
+const useScaleLinearY = ({
+  maxValue,
+  minValue,
+  yStart,
+  yEnd,
+}: UseScaleLinearYProps) => {
+  const maxValueOrZero = maxValue || 0;
+  const minValueOrZero = minValue || 0;
+
+  return useMemo(
+    () =>
+      d3
+        .scaleLinear()
+        .domain([minValueOrZero, maxValueOrZero])
+        .range([yEnd, yStart]),
+    [maxValueOrZero, minValueOrZero, yStart, yEnd]
+  );
+};
+
+export default useScaleLinearY;

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

@@ -0,0 +1,68 @@
+import { DataValue } from '../types';
+
+/**
+ *     Finds a "nice" number approximately equal to x.
+ * https://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
+ *
+ * Reference: Paul Heckbert, "Nice Numbers for Graph Labels",
+ *             Graphics Gems, pp 61-63.
+ * */
+const niceNum = (localRange: number, round: boolean): number => {
+  const exponent = Math.floor(Math.log(localRange) / Math.log(10));
+  const fraction = localRange / 10 ** exponent;
+
+  let niceFraction: number;
+
+  if (round) {
+    if (fraction < 1.5) {
+      niceFraction = 1;
+    } else if (fraction < 3) {
+      niceFraction = 2;
+    } else if (fraction < 7) {
+      niceFraction = 5;
+    } else {
+      niceFraction = 10;
+    }
+  } else if (fraction <= 1) {
+    niceFraction = 1;
+  } else if (fraction <= 2) {
+    niceFraction = 2;
+  } else if (fraction <= 5) {
+    niceFraction = 5;
+  } else {
+    niceFraction = 10;
+  }
+  return niceFraction * 10 ** exponent;
+};
+
+export const createNiceScale = (
+  min: number,
+  max: number,
+  maxTicks = 10
+): { niceMin: number; niceMax: number; tickSpacing: number } => {
+  const range = niceNum(max - min, false);
+  const tickSpacing = niceNum(range / (maxTicks - 1), true);
+  const niceMin = Math.floor(min / tickSpacing) * tickSpacing;
+  const niceMax = Math.ceil(max / tickSpacing) * tickSpacing;
+
+  return {
+    niceMin,
+    niceMax,
+    tickSpacing,
+  };
+};
+
+const isNull = (value: DataValue) => value == null;
+
+const filterNullValues = (data: DataValue[]): number[] => {
+  return data.filter((d): d is number => !isNull(d));
+};
+
+export const maxValueFromDataSet = (data: { data: DataValue[] }[]): number =>
+  Math.max(
+    -Infinity,
+    ...data.map((d) => Math.max(...filterNullValues(d.data)))
+  );
+
+export const minValueFromDataSet = (data: { data: DataValue[] }[]): number =>
+  Math.min(Infinity, ...data.map((d) => Math.min(...filterNullValues(d.data))));

package/src/components/Chart/types.ts

@@ -0,0 +1,100 @@
+export type AxisSizeConfig = {
+  xAxisTextHeight: number;
+  setXAxisTextHeight: (height: number) => void;
+  yAxisTextWidth: number;
+  setYAxisTextWidth: (width: number) => void;
+};
+
+/**
+ * Represents a data series for the chart.
+ * @template Data - The type of the data array for the series.
+ */
+interface Series<Data> {
+  /**
+   * Label of the series (used for legends, etc.).
+   */
+  label: string;
+  /**
+   * Data values for the series.
+   */
+  data: Data;
+}
+
+/**
+ * Configuration for axis ticks.
+ */
+interface TickConfig {
+  /**
+   * The interval between ticks on the axis.
+   */
+  interval: number;
+}
+
+/**
+ * Configuration for the Y axis of the chart.
+ */
+interface YAxisConfig {
+  /**
+   * Maximum value for the Y axis.
+   */
+  maxValue?: number;
+  /**
+   * Minimum value for the Y axis.
+   */
+  minValue?: number;
+  /**
+   * Labels for the Y axis.
+   */
+  labels?: Array<string>;
+  /**
+   * Step size between ticks on the Y axis.
+   */
+  step?: number;
+  /**
+   * Tick configuration for the Y axis.
+   */
+  tick?: TickConfig;
+}
+
+/**
+ * Configuration for the X axis of the chart.
+ */
+interface XAxisConfig {
+  /**
+   * Labels for the X axis.
+   */
+  labels?: Array<string>;
+}
+
+/**
+ * Represents a single data value in the chart (can be a number or undefined).
+ */
+type DataValue = number | undefined;
+
+/**
+ * Represents the position of an object in the chart.
+ */
+type AxisCoordinates = {
+  xStart: number;
+  xEnd: number;
+  yStart: number;
+  yEnd: number;
+};
+
+/**
+ * Represents the configuration for the header of the chart.
+ */
+type HeaderConfig = {
+  title?: string;
+  actionsExtra?: React.ReactNode;
+};
+
+export type {
+  Series,
+  TickConfig,
+  XAxisConfig,
+  YAxisConfig,
+  DataValue,
+  AxisCoordinates,
+  HeaderConfig,
+};

package/src/components/Select/MultiSelect/OptionList.tsx

@@ -4,8 +4,8 @@ import BaseOptionList, { BaseOptionListProps } from '../BaseOptionList';
 import Option from './Option';
 import type { MultiSelectProps } from '.';
 import type { OptionType, SectionType } from '../types';
-import { deepCompareValue } from '../helpers';
 import { isOptionSelected } from './utils';
+import { deepCompareValue } from '../../../utils/helpers';
 
 type OptionListProps<V, T extends OptionType<V>> = Pick<
   MultiSelectProps<V, T>,

package/src/components/Select/MultiSelect/index.tsx

@@ -8,16 +8,12 @@ import BottomSheet from '../../BottomSheet';
 import Box from '../../Box';
 import TextInput from '../../TextInput';
 import Footer from '../Footer';
-import {
-  getScrollParams,
-  toFlatOptions,
-  toSections,
-  useKeyboard,
-} from '../helpers';
+import { getScrollParams, toFlatOptions, toSections } from '../helpers';
 import { StyledSearchBar } from '../StyledSelect';
 import type { OptionType, SectionType, SelectProps } from '../types';
 import OptionList from './OptionList';
 import { isOptionSelected } from './utils';
+import { useKeyboard } from '../../../utils/helpers';
 
 export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {

package/src/components/Select/MultiSelect/utils.ts

@@ -1,12 +1,16 @@
-import { deepCompareValue } from '../helpers';
+import { deepCompareValue } from '../../../utils/helpers';
 import { OptionType } from '../types';
 
 export const isOptionSelected = <V, T extends OptionType<V>>(
   value: V[],
   option: T
 ): boolean => {
+  if (!value || !option || !option.value) {
+    return false;
+  }
+
   if (typeof option.value === 'string') {
-    return value.includes(option.value);
+    return value?.includes(option.value);
   }
-  return value.some((v) => deepCompareValue(v, option.value));
+  return value?.some((v) => deepCompareValue(v, option.value));
 };

package/src/components/Select/SingleSelect/OptionList.tsx

@@ -6,10 +6,10 @@ import {
 } from 'react-native';
 import type { SingleSelectProps } from '.';
 import { BaseOptionListProps } from '../BaseOptionList';
-import { deepCompareValue } from '../helpers';
 import type { OptionType, SectionType } from '../types';
 import Option from './Option';
 import { StyledOptionList } from './StyledSingleSelect';
+import { deepCompareValue } from '../../../utils/helpers';
 
 type OptionListProps<V, T extends OptionType<V>> = Pick<
   SingleSelectProps<V, T>,