@redsift/charts 9.2.3-patch → 9.2.3

package/src/components/BarChart/BarChart.test.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { composeStory } from '@storybook/react';
+import Meta, { Controls } from './BarChart.stories';
+
+import { BarChart } from './BarChart';
+import { ChartSize, ChartTheme, ColorTheme, TooltipVariant } from '../../types';
+import { PresentationColorPalette } from '@redsift/design-system';
+
+jest.mock('@redsift/design-system', () => ({
+  ...jest.requireActual('@redsift/design-system'),
+  useId: () => ['123'],
+}));
+
+const themes = {
+  ...ColorTheme,
+  'success-warning-danger': {
+    success: 'Bread',
+    warning: 'Tea',
+    danger: 'Coffee',
+  },
+  'success-warning-danger-neutral': {
+    success: 'Bread',
+    warning: 'Tea',
+    danger: 'Coffee',
+    neutral: 'Pastry',
+  },
+  custom: {
+    Coffee: PresentationColorPalette.purple,
+    Bread: PresentationColorPalette.pink,
+    Tea: PresentationColorPalette.aqua,
+  },
+};
+
+const data = [
+  { key: 'Dogs', value: 350 },
+  { key: 'Cats', value: 500 },
+  { key: 'Fish', value: 150 },
+];
+
+describe('BarChart', () => {
+  const onClickSpy = jest.fn();
+
+  afterEach(() => {
+    onClickSpy.mockClear();
+  });
+
+  it('should match snapshot', () => {
+    const ComposedStory = composeStory(Controls, Meta);
+    const tree = render(
+      <>
+        {Object.values(ChartSize).map((size, i) =>
+          Object.values(TooltipVariant).map((tooltipVariant, j) => (
+            <ComposedStory
+              key={`${size}-${tooltipVariant}`}
+              tooltipVariant={tooltipVariant}
+              size={size}
+              theme={
+                Object.keys(themes)[
+                  (i * Object.values(TooltipVariant).length + j) % Object.keys(themes).length
+                ] as ChartTheme
+              }
+            />
+          ))
+        )}
+      </>
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('supports custom className', () => {
+    const tree = render(<BarChart aria-label="Chart" data={data} className="test" />);
+    const component = tree.asFragment().firstChild;
+
+    expect(component).toHaveAttribute('class', expect.stringContaining('test'));
+  });
+
+  it('supports custom data attributes', () => {
+    const tree = render(<BarChart aria-label="Chart" data={data} data-testid="test" />);
+    const component = tree.asFragment().firstChild;
+    expect(component).toHaveAttribute('data-testid', 'test');
+  });
+
+  it('can be labelled using a title', () => {
+    const { getByLabelText } = render(<BarChart data={data} title="Label" />);
+    const component = getByLabelText('Label');
+    expect(component).toHaveAttribute('aria-labelledby', 'id123__title');
+  });
+
+  it('can be labelled using an aria-label', () => {
+    const { getByLabelText } = render(<BarChart data={data} aria-label="Label" />);
+    const component = getByLabelText('Label');
+    expect(component).toHaveAttribute('aria-label', 'Label');
+  });
+
+  it('can be labelled using an aria-labelledby', () => {
+    const { getByLabelText } = render(
+      <>
+        <h1 id="123">Label</h1>
+        <BarChart data={data} aria-labelledby="123" />
+      </>
+    );
+    const component = getByLabelText('Label');
+    expect(component).toHaveAttribute('aria-labelledby', '123');
+  });
+
+  it('supports click on the bars', async () => {
+    const user = userEvent.setup();
+    const { getAllByRole } = render(<BarChart aria-label="Chart" data={data} onBarClick={onClickSpy} />);
+
+    const bars = getAllByRole('button');
+    expect(bars.length).toBe(3);
+
+    await user.click(bars[0]);
+    await user.click(bars[1]);
+    await user.click(bars[2]);
+
+    expect(onClickSpy).toHaveBeenCalledWith({
+      data: { key: 'Cats', value: 500, percent: 0.5 },
+    });
+    expect(onClickSpy).toHaveBeenCalledWith({
+      data: { key: 'Dogs', value: 350, percent: 0.35 },
+    });
+    expect(onClickSpy).toHaveBeenCalledWith({
+      data: { key: 'Fish', value: 150, percent: 0.15 },
+    });
+    expect(onClickSpy).toHaveBeenCalledTimes(3);
+  });
+
+  it('supports keydown on the bars', async () => {
+    const { getAllByRole } = render(<BarChart aria-label="Chart" data={data} onBarClick={onClickSpy} />);
+
+    const bars = getAllByRole('button');
+    expect(bars.length).toBe(3);
+
+    userEvent.keyboard('[Tab]');
+    userEvent.keyboard('[Enter]');
+    userEvent.keyboard('[Tab]');
+    userEvent.keyboard('[Space]');
+    userEvent.keyboard('[Tab]');
+    userEvent.keyboard('[Enter]');
+
+    expect(onClickSpy).toHaveBeenCalledWith({
+      data: { key: 'Cats', value: 500, percent: 0.5 },
+    });
+    expect(onClickSpy).toHaveBeenCalledWith({
+      data: { key: 'Dogs', value: 350, percent: 0.35 },
+    });
+    expect(onClickSpy).toHaveBeenCalledWith({
+      data: { key: 'Fish', value: 150, percent: 0.15 },
+    });
+    expect(onClickSpy).toHaveBeenCalledTimes(3);
+  });
+
+  it('shows a tooltip when hovering on the bars ', async () => {
+    const user = userEvent.setup();
+    const { getAllByRole } = render(
+      <BarChart
+        aria-label="Chart"
+        data={data}
+        // The onBarClick gives the bar the role "button" which is then used to access the bars.
+        onBarClick={onClickSpy}
+      />
+    );
+
+    const bars = getAllByRole('button');
+    expect(bars.length).toBe(3);
+
+    await user.hover(bars[0]);
+    await waitFor(() => {
+      expect(screen.getByRole('tooltip', { exact: true })).toBeInTheDocument();
+    });
+    const tooltip = screen.getByRole('tooltip');
+    expect(tooltip.textContent).toContain('Cats');
+  });
+});

package/src/components/BarChart/BarChart.tsx

@@ -0,0 +1,89 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+
+import { Comp, useId } from '@redsift/design-system';
+
+import { ChartSize, ColorTheme, TooltipVariant } from '../../types';
+import { BarChartProps } from './types';
+import { EmptyBarChart } from './EmptyBarChart';
+import { LoadingBarChart } from './LoadingBarChart';
+import { RenderedBarChart } from './RenderedBarChart';
+
+const COMPONENT_NAME = 'BarChart';
+const CLASSNAME = 'redsift-barchart';
+const DEFAULT_PROPS: Partial<BarChartProps> = {
+  isBarSelected: () => true,
+  others: true,
+  size: ChartSize.medium,
+  theme: ColorTheme.default,
+  tooltipVariant: TooltipVariant.value,
+  localeText: {
+    emptyChartText: 'No Data',
+  },
+};
+
+export const BarChart: Comp<BarChartProps, HTMLDivElement> = forwardRef((props, ref) => {
+  const {
+    areXLabelsRotated,
+    caping,
+    chartRef,
+    className,
+    data: propsData,
+    emptyComponent,
+    id: propsId,
+    isBarSelected,
+    labelDecorator,
+    localeText,
+    onBarClick,
+    others,
+    size,
+    barRole,
+    theme,
+    tooltipVariant,
+    ...forwardedProps
+  } = props;
+  const [_id] = useId();
+  const id = propsId ?? _id;
+
+  if (propsData === undefined || propsData === null) {
+    return <LoadingBarChart id={id} {...forwardedProps} ref={ref} />;
+  }
+
+  if (propsData.length === 0) {
+    return (
+      <EmptyBarChart
+        data={propsData}
+        emptyComponent={emptyComponent}
+        id={id}
+        localeText={localeText}
+        size={size}
+        {...forwardedProps}
+        ref={ref}
+      />
+    );
+  }
+
+  return (
+    <RenderedBarChart
+      areXLabelsRotated={areXLabelsRotated}
+      barRole={barRole}
+      caping={caping}
+      chartRef={chartRef}
+      className={classNames(BarChart.className, className)}
+      data={propsData}
+      id={id}
+      isBarSelected={isBarSelected}
+      labelDecorator={labelDecorator}
+      onBarClick={onBarClick}
+      others={others}
+      size={size}
+      theme={theme}
+      tooltipVariant={tooltipVariant}
+      {...forwardedProps}
+      ref={ref}
+    />
+  );
+});
+BarChart.className = CLASSNAME;
+BarChart.defaultProps = DEFAULT_PROPS;
+BarChart.displayName = COMPONENT_NAME;

package/src/components/BarChart/EmptyBarChart.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, RefObject, useRef } from 'react';
+import { scaleLinear as d3scaleLinear, ScaleLinear as d3ScaleLinear } from 'd3';
+
+import { AnyScale } from '../../types';
+import { BarChartProps } from './types';
+import { StyledBarChart, StyledBarChartEmptyText } from './styles';
+import { Axis } from '../Axis';
+import { sizeToDimension } from './utils';
+
+export const EmptyBarChart = forwardRef<HTMLDivElement, BarChartProps>(
+  (props, ref) => {
+    const { className, emptyComponent, size, localeText, ...forwardedProps } =
+      props;
+
+    const chartDimensions = sizeToDimension(size!);
+    const width = chartDimensions.width;
+    const height = chartDimensions.height;
+    const margins = { top: 16, left: 16, right: 16, bottom: 32 };
+    const chartHeight = height - margins.top - margins.bottom;
+    const chartWidth = width - margins.left - margins.right;
+
+    const scaleRef = useRef<d3ScaleLinear<number, number>>();
+    if (!scaleRef.current) {
+      scaleRef.current = d3scaleLinear().domain([]).range([0, chartWidth]);
+    }
+
+    return (
+      <StyledBarChart
+        {...forwardedProps}
+        className={className}
+        ref={ref as RefObject<HTMLDivElement>}
+      >
+        {emptyComponent ?? (
+          <>
+            <StyledBarChartEmptyText
+              $maxWidth={width}
+              $textSize={chartDimensions.fontSize / 2}
+            >
+              <span>{localeText?.emptyChartText}</span>
+            </StyledBarChartEmptyText>
+            <svg width={width} height={height}>
+              <g transform={`translate(${margins.left},${margins.top})`}>
+                <Axis
+                  position="bottom"
+                  length={chartWidth}
+                  scale={scaleRef.current as AnyScale}
+                  x={0}
+                  y={chartHeight}
+                  tickValues={4}
+                />
+              </g>
+            </svg>
+          </>
+        )}
+      </StyledBarChart>
+    );
+  }
+);

package/src/components/BarChart/LoadingBarChart.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef, RefObject } from 'react';
+
+import { BarChartProps } from './types';
+import { StyledBarChart } from './styles';
+
+export const LoadingBarChart = forwardRef<HTMLDivElement, BarChartProps>(
+  (props, ref) => {
+    const { className, ...forwardedProps } = props;
+
+    return (
+      <StyledBarChart
+        {...forwardedProps}
+        className={className}
+        ref={ref as RefObject<HTMLDivElement>}
+      >
+        Loading...
+      </StyledBarChart>
+    );
+  }
+);

package/src/components/BarChart/RenderedBarChart.tsx

@@ -0,0 +1,115 @@
+import React, { forwardRef, RefObject, useEffect, useMemo, useRef } from 'react';
+import { scaleLinear as d3scaleLinear, ScaleLinear as d3ScaleLinear, sum as d3sum } from 'd3';
+
+import { AnyScale, CategoryData } from '../../types';
+import { BarChartProps } from './types';
+import { StyledBarChart } from './styles';
+import { Bar } from '../Bar';
+import { Axis } from '../Axis';
+import { useFormatCategoricalData } from '../../hooks';
+import { sizeToDimension } from './utils';
+
+interface RenderedBarChartProps extends Required<Pick<BarChartProps, 'data'>>, Omit<BarChartProps, 'data'> {}
+
+export const RenderedBarChart = forwardRef<HTMLDivElement, RenderedBarChartProps>((props, ref) => {
+  const {
+    areXLabelsRotated,
+    barProps,
+    caping,
+    className,
+    data: propsData,
+    id,
+    isBarSelected,
+    labelDecorator,
+    onBarClick,
+    others,
+    size,
+    barRole,
+    theme,
+    tooltipVariant,
+    ...forwardedProps
+  } = props;
+
+  const cache = useRef<CategoryData>();
+
+  const { data, colorScale } = useFormatCategoricalData({
+    data: propsData,
+    theme: theme!,
+    caping,
+    others,
+  });
+
+  useEffect(() => {
+    cache.current = data;
+  });
+
+  const chartDimensions = sizeToDimension(size!);
+  const width = chartDimensions.width;
+  const height = chartDimensions.height;
+  const margins = { top: 16, left: 16, right: 16, bottom: 32 };
+  const chartHeight = height - margins.top - margins.bottom;
+  const chartWidth = width - margins.left - margins.right;
+  const numberOfRows = data.filter((datum) => datum.value).length;
+  const gap = 5;
+
+  const scale = useMemo<d3ScaleLinear<number, number>>(
+    () =>
+      d3scaleLinear()
+        .domain([0, Math.max(...data.map(({ value }) => value))])
+        .range([0, chartWidth]),
+    [size]
+  );
+
+  const barHeight = (chartHeight - (numberOfRows + 1) * gap) / numberOfRows;
+  const total = d3sum(data, (d) => d.value);
+
+  return (
+    <StyledBarChart {...forwardedProps} id={id} className={className} ref={ref as RefObject<HTMLDivElement>}>
+      <svg width={width} height={height}>
+        <g transform={`translate(${margins.left},${margins.top})`}>
+          <Axis
+            position="bottom"
+            length={chartWidth}
+            scale={scale as AnyScale}
+            x={0}
+            y={chartHeight}
+            tickValues={4}
+            tickRotation={areXLabelsRotated ? -45 : 0}
+          />
+          {data
+            .filter((datum) => datum.value)
+            .map((datum, index) => {
+              const percent = datum.value / total;
+              const to = {
+                data: {
+                  ...datum,
+                  percent,
+                },
+              };
+              const from = cache.current ? { data: cache.current[index] } : undefined;
+
+              return (
+                <Bar
+                  {...barProps}
+                  color={colorScale?.(to.data.key)!}
+                  data={to}
+                  gap={gap}
+                  height={barHeight}
+                  id={`id${id}__bar-${index}`}
+                  index={index}
+                  isSelected={Boolean(isBarSelected!(to))}
+                  key={`bar _${index}`}
+                  labelDecorator={labelDecorator}
+                  onClick={onBarClick}
+                  previousData={from!}
+                  role={barRole}
+                  scale={scale!}
+                  tooltipVariant={tooltipVariant}
+                />
+              );
+            })}
+        </g>
+      </svg>
+    </StyledBarChart>
+  );
+});