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

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import Button from '../../../Button/Button';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import LineChart from '..';
+
+const onActionPress = jest.fn();
+
+const lineChartProps = {
+  data: [
+    { label: 'Series 1', data: [1, 2, 3] },
+    { label: 'Series 2', data: [4, 5, 6] },
+  ],
+  xAxisConfig: {
+    labels: ['May 2025', 'Jun 2025', 'Jul 2025'],
+  },
+  yAxisConfig: {
+    labels: ['$1', '$2', '$3'],
+  },
+  headerConfig: {
+    title: 'Line Chart',
+    actionsExtra: (
+      <Button
+        variant="inline-text-compact"
+        text="Chart extra"
+        onPress={onActionPress}
+      />
+    ),
+  },
+};
+
+describe('LineChart', () => {
+  it('should render', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <LineChart {...lineChartProps} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // X axis labels
+    expect(getByText('May 2025')).toBeVisible();
+    expect(getByText('Jun 2025')).toBeVisible();
+    expect(getByText('Jul 2025')).toBeVisible();
+
+    // Y axis labels
+    expect(getByText('$1')).toBeVisible();
+    expect(getByText('$2')).toBeVisible();
+    expect(getByText('$3')).toBeVisible();
+
+    // Header actions
+    expect(getByText('Chart extra')).toBeVisible();
+    fireEvent.press(getByText('Chart extra'));
+    expect(onActionPress).toHaveBeenCalled();
+  });
+
+  it('renders empty chart', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <LineChart data={[]} emptyText="No data" />
+    );
+
+    expect(getByText('No data')).toBeVisible();
+    expect(queryByText('Series 1')).toBeNull();
+    expect(queryByText('Series 2')).toBeNull();
+  });
+
+  it('renders chart with custom header title', () => {
+    const customTitleProps = {
+      ...lineChartProps,
+      headerConfig: {
+        ...lineChartProps.headerConfig,
+        title: 'Custom Chart Title',
+      },
+    };
+    const { getByText } = renderWithTheme(<LineChart {...customTitleProps} />);
+    expect(getByText('Custom Chart Title')).toBeVisible();
+  });
+
+  it('renders chart with different data lengths', () => {
+    const differentLengthProps = {
+      ...lineChartProps,
+      data: [
+        { label: 'Series 1', data: [1, 2, 3, 4] },
+        { label: 'Series 2', data: [4, 5] },
+      ],
+    };
+    const { queryByText } = renderWithTheme(
+      <LineChart {...differentLengthProps} />
+    );
+
+    // Verify that the chart still renders even with mismatched data lengths
+    expect(queryByText('May 2025')).toBeVisible();
+    expect(queryByText('Jun 2025')).toBeVisible();
+  });
+
+  it('renders chart with negative values', () => {
+    const negativeValuesProps = {
+      ...lineChartProps,
+      data: [
+        { label: 'Series 1', data: [-1, -2, -3] },
+        { label: 'Series 2', data: [-4, -5, -6] },
+      ],
+    };
+    const { getByText } = renderWithTheme(
+      <LineChart {...negativeValuesProps} />
+    );
+
+    // Verify that the chart renders with negative values
+    expect(getByText('May 2025')).toBeVisible();
+    expect(getByText('Jun 2025')).toBeVisible();
+    expect(getByText('Jul 2025')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,143 @@
+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 {
+  createNiceScale,
+  maxValueFromDataSet,
+  minValueFromDataSet,
+} from '../shared/niceNumbers';
+import { StyledLineChartWrapper } from '../StyledChart';
+import {
+  AxisCoordinates,
+  DataValue,
+  HeaderConfig,
+  Series,
+  XAxisConfig,
+  YAxisConfig,
+} from '../types';
+import Line from './Line';
+
+export interface LineChartProps {
+  /**
+   * The data to be displayed in the chart. Each item represents a series.
+   */
+  data: Array<Series<Array<DataValue>>>;
+  /**
+   * Optional configuration for the Y axis.
+   */
+  yAxisConfig?: YAxisConfig;
+  /**
+   * 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 is empty.
+   */
+  emptyText?: string;
+}
+
+const LineChart = ({
+  data,
+  yAxisConfig,
+  xAxisConfig,
+  style,
+  testID,
+  headerConfig,
+  emptyText,
+}: LineChartProps) => {
+  const [chartSize, setChartSize] = useState({ width: 0, height: 0 });
+
+  const colorScale = useColorScale(data.map((series) => series.label));
+
+  const niceValues = useMemo(() => {
+    const maxDataValue = maxValueFromDataSet(data);
+    const minDataValue = minValueFromDataSet(data);
+    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: niceValues.niceMin,
+      step: yAxisConfig?.step ?? niceValues.tickSpacing,
+      tick: {
+        interval: yAxisInterval,
+      },
+    };
+  }, [yAxisConfig, niceValues, yAxisInterval]);
+
+  const calculatedXAxisConfig = useMemo(() => {
+    return {
+      ...xAxisConfig,
+      labels: xAxisConfig?.labels || [],
+    };
+  }, [xAxisConfig]);
+
+  const onChartLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width, height } = event.nativeEvent.layout;
+
+      if (width !== chartSize.width || height !== chartSize.height) {
+        setChartSize({ width, height });
+      }
+    },
+    [setChartSize, chartSize]
+  );
+
+  const renderContent = useCallback(
+    ({ coordinates }: { coordinates: AxisCoordinates }) =>
+      data.map((series) => (
+        <Line
+          color={colorScale(series.label)}
+          key={series.label}
+          data={series.data}
+          coordinates={coordinates}
+          maxValue={calculatedYAxisConfig.maxValue || 0}
+          labels={Array.from(
+            { length: calculatedXAxisConfig.labels?.length || 0 },
+            (_, i) => i.toString()
+          )}
+          minValue={calculatedYAxisConfig.minValue || 0}
+        />
+      )),
+    [data, calculatedYAxisConfig, calculatedXAxisConfig, colorScale]
+  );
+
+  return (
+    <StyledLineChartWrapper
+      onLayout={onChartLayout}
+      style={style}
+      testID={testID}
+    >
+      <ChartFrame
+        xAxisConfig={calculatedXAxisConfig}
+        yAxisConfig={calculatedYAxisConfig}
+        width={chartSize.width}
+        height={chartSize.height}
+        headerConfig={headerConfig}
+        renderContent={renderContent}
+        isEmpty={data.length === 0}
+        emptyText={emptyText}
+      />
+    </StyledLineChartWrapper>
+  );
+};
+
+export default LineChart;

package/src/components/Chart/StyledChart.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/native';
+import Box from '../Box';
+
+const StyledChartHeader = styled(Box)(({ theme }) => ({
+  marginBottom: theme.__hd__.chart.space.headerMarginBottom,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}));
+
+const StyledLineChartWrapper = styled(Box)(() => ({
+  width: '100%',
+  height: '100%',
+}));
+
+export { StyledChartHeader, StyledLineChartWrapper };

package/src/components/Chart/index.tsx

@@ -0,0 +1,13 @@
+import SelectAction from './ChartSelect';
+import LineChart from './Line';
+import ColumnChart from './ColumnChart';
+
+const Chart = {
+  Column: ColumnChart,
+  Line: LineChart,
+  SelectAction,
+};
+
+export type { LineChart, ColumnChart };
+
+export default Chart;

package/src/components/Chart/shared/AxisLabel.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Typography from '../../Typography';
+
+const AxisLabel = ({
+  label,
+  numberOfLines = 1,
+  textAlign = 'right',
+}: {
+  label: string;
+  numberOfLines?: number;
+  textAlign?: 'right' | 'center';
+}) => (
+  <Typography.Label
+    style={{ textAlign }}
+    intent="subdued"
+    ellipsizeMode="tail"
+    numberOfLines={numberOfLines}
+    adjustsFontSizeToFit
+    minimumFontScale={0.6}
+  >
+    {label}
+  </Typography.Label>
+);
+
+export default AxisLabel;

package/src/components/Chart/shared/ChartFrame.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+import Svg from 'react-native-svg';
+import { useTheme } from '../../../theme';
+import Box from '../../Box';
+import {
+  AxisCoordinates,
+  HeaderConfig,
+  XAxisConfig,
+  YAxisConfig,
+} from '../types';
+import ChartHeader from './ChartHeader';
+import EmptyState from './EmptyState';
+import XAxis from './XAxis';
+import XAxisGrid from './XAxisGrid';
+import YAxis from './YAxis';
+import YAxisGrid from './YAxisGrid';
+
+export type ChartFrameProps = {
+  isEmpty?: boolean;
+  xAxisConfig: XAxisConfig;
+  yAxisConfig: YAxisConfig;
+  headerConfig?: HeaderConfig;
+  width: number;
+  height: number;
+  renderContent: (props: { coordinates: AxisCoordinates }) => React.ReactNode;
+  /**
+   * Text to display when the chart has no data (empty state).
+   * If undefined, no empty label will appear even if the chart is empty.
+   */
+  emptyText?: string;
+  /**
+   * If true, hides the grid lines for the Y-axis.
+   * Defaults to false.
+   */
+  hideYAxisGrid?: boolean;
+  /**
+   * If true, hides the grid lines for the X-axis.
+   * Defaults to false.
+   */
+  hideXAxisGrid?: boolean;
+};
+
+const yStart = 0;
+
+const ChartFrame = ({
+  xAxisConfig,
+  yAxisConfig,
+  width,
+  height,
+  headerConfig,
+  renderContent,
+  isEmpty,
+  emptyText,
+  hideYAxisGrid = false,
+  hideXAxisGrid = false,
+}: ChartFrameProps) => {
+  const theme = useTheme();
+  const { title, actionsExtra } = headerConfig || {};
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
+  const onHeaderLayout = useCallback((event: LayoutChangeEvent) => {
+    setHeaderHeight(event.nativeEvent.layout.height);
+  }, []);
+
+  // Sizing and coordinates setup
+  const {
+    space: {
+      yAxisGridTextMarginRight,
+      xAxisGridTextMarginTop,
+      headerMarginBottom,
+    },
+    sizes: {
+      yAxisDefaultTextWidth,
+      xAxisDefaultTextHeight,
+      yAxisDefaultTextHeight,
+    },
+  } = theme.__hd__.chart;
+
+  // Drawable height for the whole chart: content, axis, grid, etc.
+  const chartContentHeight =
+    height - headerHeight - (headerHeight > 0 ? headerMarginBottom : 0);
+
+  // Start offsets for various chart components, after accounting for the charts axis text size
+  const xStartOffset = yAxisDefaultTextWidth + yAxisGridTextMarginRight;
+  const yStartOffset = xAxisDefaultTextHeight + xAxisGridTextMarginTop;
+
+  const coordinates = useMemo(
+    () => ({
+      yStart,
+      yEnd: yStart + chartContentHeight - yStartOffset,
+      xStart: xStartOffset,
+      xEnd: width,
+    }),
+    [chartContentHeight, yStartOffset, xStartOffset, width]
+  );
+
+  return (
+    <Box style={{ width, height }}>
+      {headerConfig && (
+        <ChartHeader
+          title={title}
+          actionsExtra={actionsExtra}
+          onLayout={onHeaderLayout}
+        />
+      )}
+
+      <Box style={{ paddingTop: yAxisDefaultTextHeight }}>
+        <Svg style={{ width, height: chartContentHeight, overflow: 'visible' }}>
+          <XAxis xAxisConfig={xAxisConfig} coordinates={coordinates} />
+          <YAxis yAxisConfig={yAxisConfig} coordinates={coordinates} />
+          {!hideXAxisGrid && (
+            <XAxisGrid coordinates={coordinates} xAxisConfig={xAxisConfig} />
+          )}
+          {!hideYAxisGrid && (
+            <YAxisGrid coordinates={coordinates} yAxisConfig={yAxisConfig} />
+          )}
+          {/** Chart data component */}
+          {/* If the chart is empty and emptyText is provided, show the empty state text.
+              If emptyText is undefined, the empty label will not appear. */}
+          {!isEmpty
+            ? renderContent({ coordinates })
+            : emptyText && (
+                <EmptyState content={emptyText} coordinates={coordinates} />
+              )}
+        </Svg>
+      </Box>
+    </Box>
+  );
+};
+
+export default ChartFrame;

package/src/components/Chart/shared/ChartHeader.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LayoutChangeEvent } from 'react-native';
+import Typography from '../../Typography';
+import { StyledChartHeader } from '../StyledChart';
+import { HeaderConfig } from '../types';
+import Box from '../../Box';
+
+export type ChartHeaderProps = HeaderConfig & {
+  onLayout?: (event: LayoutChangeEvent) => void;
+};
+
+const ChartHeader = ({ title, actionsExtra, onLayout }: ChartHeaderProps) => (
+  <StyledChartHeader onLayout={onLayout}>
+    <Box>{title && <Typography.Body>{title}</Typography.Body>}</Box>
+    <Box>{actionsExtra}</Box>
+  </StyledChartHeader>
+);
+
+export default ChartHeader;

package/src/components/Chart/shared/EmptyState.tsx

@@ -0,0 +1,83 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import { LayoutChangeEvent, Platform } from 'react-native';
+import { ForeignObject, G } from 'react-native-svg';
+import Box from '../../Box';
+import Typography from '../../Typography';
+import { AxisCoordinates } from '../types';
+import { useTheme } from '../../../theme';
+
+type EmptyStateProps = {
+  coordinates: AxisCoordinates;
+  content: string;
+};
+
+const EmptyStateText = ({ content }: { content: string }) => {
+  return (
+    <Typography.Caption
+      fontWeight="semi-bold"
+      intent="muted"
+      numberOfLines={1}
+      ellipsizeMode="tail"
+      style={{ textAlign: 'center' }}
+    >
+      {content}
+    </Typography.Caption>
+  );
+};
+
+const EmptyState = ({ content, coordinates }: EmptyStateProps) => {
+  const [textSize, setTextSize] = useState({ width: 0, height: 0 });
+  const { xStart, xEnd, yStart, yEnd } = coordinates;
+  const theme = useTheme();
+  const {
+    sizes: { defaultWebEmptyStateWidth, defaultWebEmptyStateHeight },
+  } = theme.__hd__.chart;
+
+  const centerPosition = useMemo(() => {
+    const centerX = xStart + (xEnd - xStart) / 2;
+    const centerY = yStart + (yEnd - yStart) / 2;
+    return { centerX, centerY };
+  }, [xStart, xEnd, yStart, yEnd]);
+
+  const onTextLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setTextSize({ width, height });
+  }, []);
+
+  return (
+    <G>
+      {Platform.OS === 'web' ? (
+        <ForeignObject
+          x={centerPosition.centerX - defaultWebEmptyStateWidth / 2}
+          y={centerPosition.centerY - defaultWebEmptyStateHeight / 2}
+          width={defaultWebEmptyStateWidth}
+          height={defaultWebEmptyStateHeight}
+        >
+          <Box
+            style={{
+              width: '100%',
+              height: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <EmptyStateText content={content} />
+          </Box>
+        </ForeignObject>
+      ) : (
+        <Box
+          onLayout={onTextLayout}
+          style={{
+            position: 'absolute',
+            left: centerPosition.centerX - textSize.width / 2,
+            top: centerPosition.centerY - textSize.height / 2,
+          }}
+        >
+          <EmptyStateText content={content} />
+        </Box>
+      )}
+    </G>
+  );
+};
+
+export default EmptyState;

package/src/components/Chart/shared/XAxis.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { ForeignObject, G } from 'react-native-svg';
+import { useTheme } from '../../../theme';
+import Box from '../../Box';
+import { AxisCoordinates, XAxisConfig } from '../types';
+import AxisLabel from './AxisLabel';
+import useScaleBandX from './hooks/useScaleBandX';
+
+export type XAxisProps = {
+  // X axis config
+  xAxisConfig: XAxisConfig;
+  // X axis start offset
+  coordinates: AxisCoordinates;
+};
+
+const XAxis = ({ xAxisConfig, coordinates }: XAxisProps) => {
+  const { xStart, xEnd, yEnd } = coordinates;
+  const { labels = [] } = xAxisConfig;
+  const theme = useTheme();
+  const {
+    space: { xAxisGridTextMarginTop },
+    sizes: { xAxisDefaultTextHeight },
+  } = theme.__hd__.chart;
+
+  const scaleX = useScaleBandX({ labels, xStart, xEnd });
+
+  return (
+    <G>
+      {labels.map((label) => (
+        <G key={label}>
+          {/*
+            Cross-platform Y-axis label rendering:
+            - On web: Use ForeignObject to allow HTML/CSS styling and ellipsis with Typography.Label.
+              The x position is set to xStart - yAxisDefaultTextWidth to right-align the label box.
+            - On native: Use Box with absolute positioning and Typography.Label for compatibility.
+              The transform centers the label vertically.
+          */}
+          {Platform.OS === 'web' ? (
+            <ForeignObject
+              x={(scaleX(label) ?? 0) + scaleX.bandwidth() / 2}
+              y={yEnd + xAxisGridTextMarginTop}
+              width={scaleX.bandwidth()}
+              height={xAxisDefaultTextHeight}
+            >
+              <AxisLabel label={label} numberOfLines={2} textAlign="center" />
+            </ForeignObject>
+          ) : (
+            <Box
+              testID={`x-axis-label-${label}-container`}
+              style={{
+                width: scaleX.bandwidth(),
+                maxHeight: xAxisDefaultTextHeight,
+                position: 'absolute',
+                left: scaleX(label) ?? 0 + scaleX.bandwidth() / 2,
+                top: yEnd + xAxisGridTextMarginTop,
+              }}
+              alignItems="center"
+            >
+              <AxisLabel label={label} numberOfLines={2} textAlign="center" />
+            </Box>
+          )}
+        </G>
+      ))}
+    </G>
+  );
+};
+
+export default XAxis;

package/src/components/Chart/shared/XAxisGrid.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { G, Line } from 'react-native-svg';
+import { useTheme } from '../../../theme';
+import { AxisCoordinates, XAxisConfig } from '../types';
+import { DASH_ARRAY } from './constants';
+import useScaleBandX from './hooks/useScaleBandX';
+
+export type XAxisGridProps = {
+  xAxisConfig: XAxisConfig;
+  coordinates: AxisCoordinates;
+};
+
+const XAxisGrid = ({ xAxisConfig, coordinates }: XAxisGridProps) => {
+  const { xStart, xEnd, yEnd } = coordinates;
+  const theme = useTheme();
+  const { labels = [] } = xAxisConfig;
+
+  const {
+    colors: { gridStroke },
+  } = theme.__hd__.chart;
+
+  const scaleX = useScaleBandX({ labels, xStart, xEnd });
+
+  return (
+    <G testID="x-axis-grid">
+      {labels.map((label) => (
+        <Line
+          testID={`x-axis-grid-${label}`}
+          key={label}
+          x1={(scaleX(label) || 0) + scaleX.bandwidth() / 2}
+          y1={0}
+          x2={(scaleX(label) || 0) + scaleX.bandwidth() / 2}
+          y2={yEnd}
+          stroke={gridStroke}
+          strokeDasharray={DASH_ARRAY}
+        />
+      ))}
+    </G>
+  );
+};
+
+export default XAxisGrid;