@redsift/charts 8.0.0 → 8.0.1

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

@@ -0,0 +1,189 @@
+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 { DataVizColorPalette } from '@redsift/design-system';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  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: DataVizColorPalette.purple,
+    Bread: DataVizColorPalette.pink,
+    Tea: DataVizColorPalette.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,90 @@
+import React, { forwardRef, useId } from 'react';
+import classNames from 'classnames';
+
+import { Comp } 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 = propsId ?? useId();
+
+    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,137 @@
+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.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>
+  );
+});