@redsift/charts 9.2.3 → 9.2.4

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

@@ -1,178 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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>
-  );
-});