@redsift/charts 8.0.0 → 8.0.1

package/src/components/LegendItem/LegendItem.tsx

@@ -0,0 +1,106 @@
+import React, { KeyboardEventHandler, forwardRef, useId } from 'react';
+import classNames from 'classnames';
+
+import { Comp, Number, Text } from '@redsift/design-system';
+
+import { LegendItemProps } from './types';
+import { StyledLegendItem } from './styles';
+import { monochrome } from '../../scheme';
+import { LabelVariant } from '../../types';
+
+const COMPONENT_NAME = 'LegendItem';
+const CLASSNAME = 'redsift-legend-item';
+const DEFAULT_PROPS: Partial<LegendItemProps> = {
+  color: monochrome,
+  index: 0,
+};
+
+export const LegendItem: Comp<LegendItemProps, HTMLLIElement> = forwardRef(
+  (props, ref) => {
+    const {
+      index,
+      isSelected: propsIsSelected,
+      labelDecorator,
+      onClick,
+      role,
+    } = props;
+
+    const {
+      className,
+      color,
+      data,
+      id: propsId,
+      total,
+      variant,
+      ...forwardedProps
+    } = props;
+    const id = propsId ?? useId();
+
+    const text = labelDecorator ? labelDecorator(data) : data.data.key;
+    const isEmpty = data.data.value === 0;
+
+    const isSelectable = role === 'option';
+    const isSelected = isSelectable && propsIsSelected === true;
+    const isDeselected = isSelectable && propsIsSelected === false;
+
+    const onKeyDown: KeyboardEventHandler<HTMLLIElement> = (event) => {
+      if (onClick) {
+        event.stopPropagation();
+
+        if (event.code === 'Enter' || event.code === 'Space') {
+          event.preventDefault();
+          onClick(data);
+        }
+      }
+    };
+
+    return (
+      <StyledLegendItem
+        {...forwardedProps}
+        className={classNames(LegendItem.className, className, `_${index}`, {
+          selected: isSelected,
+          deselected: isDeselected,
+        })}
+        color={isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color}
+        ref={ref}
+        aria-labelledby={!isEmpty ? `${id}-title` : undefined}
+        aria-selected={isSelected ? true : isDeselected ? false : undefined}
+        id={id}
+        onClick={onClick ? () => onClick(data) : undefined}
+        onKeyDown={onClick ? (e) => onKeyDown(e) : undefined}
+        role={role ? role : onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        $clickable={Boolean(onClick)}
+      >
+        <div />
+        {variant === LabelVariant.value ? (
+          <>
+            <Number
+              as="b"
+              maximumFractionDigits={2}
+              value={data.data.value}
+              variant="inherit"
+            />
+            <Text variant="caption">{text}</Text>
+          </>
+        ) : variant === LabelVariant.percent && total ? (
+          <>
+            <Number
+              as="b"
+              maximumFractionDigits={2}
+              type="percent"
+              value={data.data.value / total}
+              variant="inherit"
+            />
+            <Text variant="caption">{text}</Text>
+          </>
+        ) : (
+          <Text variant="caption">{text}</Text>
+        )}
+      </StyledLegendItem>
+    );
+  }
+);
+LegendItem.className = CLASSNAME;
+LegendItem.defaultProps = DEFAULT_PROPS;
+LegendItem.displayName = COMPONENT_NAME;

package/src/components/LegendItem/index.ts

@@ -0,0 +1,3 @@
+export * from './LegendItem';
+export * from './types';
+export * from './styles';

package/src/components/LegendItem/styles.ts

@@ -0,0 +1,40 @@
+import styled, { css } from 'styled-components';
+import { StyledLegendItemProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledLegendItem = styled.li<StyledLegendItemProps>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--redsift-typography-caption-font-size);
+
+  > div {
+    height: 16px;
+    width: 16px;
+    min-width: 16px;
+    background-color: ${({ color }) => color};
+  }
+
+  ${({ $clickable }) =>
+    $clickable
+      ? css`
+          cursor: pointer;
+
+          &:hover,
+          &:focus {
+            outline: none;
+            > div {
+              opacity: 0.7;
+            }
+          }
+
+          &:focus-visible {
+            > div {
+              outline: 4px solid var(--redsift-color-default-primary);
+            }
+          }
+        `
+      : ''}}
+`;

package/src/components/LegendItem/types.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from 'react';
+import { LabelVariant, LegendItemDatum } from '../../types';
+import { DataPointProps, StyledDataPointProps } from '../DataPoint';
+
+/**
+ * Component props.
+ */
+export interface LegendItemProps
+  extends Pick<
+      DataPointProps<LegendItemDatum>,
+      | 'color'
+      | 'data'
+      | 'id'
+      | 'index'
+      | 'isSelected'
+      | 'labelDecorator'
+      | 'onClick'
+      | 'previousData'
+      | 'role'
+      | 'tooltipVariant'
+    >,
+    Omit<ComponentProps<'li'>, 'onClick' | 'role'> {
+  /** Total used to compute percentage. */
+  total?: number;
+  /** Variant. */
+  variant?: LabelVariant;
+}
+
+export type StyledLegendItemProps = Pick<StyledDataPointProps, '$clickable'> &
+  Omit<LegendItemProps, 'data'>;

package/src/components/PieChart/EmptyPieChart.tsx

@@ -0,0 +1,86 @@
+import React, { forwardRef, RefObject } from 'react';
+import { arc as d3arc } from 'd3';
+
+import { ArcDatum } from '../../types';
+import { PieChartProps, PieChartVariant } from './types';
+import { StyledPieChart, StyledPieChartEmptyText } from './styles';
+import { Arcs } from '../Arcs';
+import { empty } from '../../scheme';
+import { sizeToDimension } from './utils';
+
+export const EmptyPieChart = forwardRef<HTMLDivElement, PieChartProps>(
+  (props, ref) => {
+    const {
+      className,
+      emptyComponent,
+      localeText,
+      size,
+      variant,
+      ...forwardedProps
+    } = props;
+
+    const isDonut =
+      variant === PieChartVariant.donut ||
+      variant === PieChartVariant.spacedDonut;
+
+    const { width, height, fontSize, innerRadius } = sizeToDimension(size!);
+    const externalRadiusPadding = 8;
+
+    const createArc = d3arc<ArcDatum>()
+      .innerRadius(isDonut ? innerRadius : 0)
+      .outerRadius(width / 2 - externalRadiusPadding);
+
+    return (
+      <StyledPieChart
+        {...forwardedProps}
+        className={className}
+        ref={ref as RefObject<HTMLDivElement>}
+      >
+        {emptyComponent ?? (
+          <>
+            <StyledPieChartEmptyText
+              $maxWidth={innerRadius * 2}
+              $textSize={fontSize / 2}
+              $isDonut={isDonut}
+            >
+              <span>{localeText?.emptyChartText}</span>
+            </StyledPieChartEmptyText>
+            <svg width={width} height={height}>
+              <Arcs
+                arcs={[
+                  {
+                    createArc,
+                    previousData: {
+                      data: {
+                        key: '',
+                        value: 0,
+                      },
+                      startAngle: 0,
+                      endAngle: 0,
+                      padAngle: 0,
+                      value: 0,
+                      index: 0,
+                    },
+                    data: {
+                      data: {
+                        key: 'No Data',
+                        value: 0,
+                      },
+                      index: 0,
+                      value: 0,
+                      startAngle: 0,
+                      endAngle: 2 * Math.PI,
+                      padAngle: 0,
+                    },
+                    color: empty,
+                  },
+                ]}
+                transform={`translate(${width / 2} ${height / 2})`}
+              />
+            </svg>
+          </>
+        )}
+      </StyledPieChart>
+    );
+  }
+);

package/src/components/PieChart/LoadingPieChart.tsx

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

package/src/components/PieChart/PieChart.stories.tsx

@@ -0,0 +1,91 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { DataVizColorPalette } from '@redsift/design-system';
+import { PieChart } from '.';
+import { PieChartLabelVariant, PieChartVariant } from './types';
+import {
+  CategoryData,
+  ChartSize,
+  ChartTheme,
+  ColorTheme,
+  TooltipVariant,
+} from '../../types';
+
+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 meta: Meta<typeof PieChart> = {
+  title: 'Charts/PieChart',
+  component: PieChart as any,
+  argTypes: {
+    variant: {
+      options: Object.values(PieChartVariant),
+      control: { type: 'select' },
+    },
+    labelVariant: {
+      options: Object.values(PieChartLabelVariant),
+      control: { type: 'select' },
+    },
+    tooltipVariant: {
+      options: Object.values(TooltipVariant),
+      control: { type: 'select' },
+    },
+    size: {
+      options: Object.values(ChartSize),
+      control: { type: 'select' },
+    },
+    theme: {
+      options: Object.keys(themes),
+      mapping: themes,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof PieChart>;
+
+const data: CategoryData = [
+  { key: 'Cookies', value: 540 },
+  { key: 'Coffee', value: 5471 },
+  { key: 'Bread', value: 3325 },
+  { key: 'Tea', value: 1435 },
+  { key: 'Pastry', value: 856 },
+  { key: 'Sandwich', value: 771 },
+  { key: 'Croissant', value: 771 },
+  { key: 'Hot chocolate', value: 588 },
+  { key: 'Toast', value: 318 },
+];
+
+export const Controls: Story = {
+  args: {
+    title: 'Pie Chart',
+    variant: 'spacedDonut',
+    labelVariant: 'externalLabelValue',
+    tooltipVariant: 'value',
+    size: 'medium',
+    theme: 'success-warning-danger-neutral' as ChartTheme,
+    caping: 4,
+    others: true,
+    onSliceClick: (datum) => console.log(datum),
+    data: data,
+  },
+};

package/src/components/PieChart/PieChart.test.tsx

@@ -0,0 +1,201 @@
+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 './PieChart.stories';
+
+import { PieChart } from './PieChart';
+import { PieChartLabelVariant, PieChartVariant } from './types';
+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: 300 },
+  { key: 'Cats', value: 500 },
+  { key: 'Fish', value: 150 },
+];
+
+describe('PieChart', () => {
+  const onClickSpy = jest.fn();
+
+  afterEach(() => {
+    onClickSpy.mockClear();
+  });
+
+  it('should match snapshot', () => {
+    const ComposedStory = composeStory(Controls, Meta);
+    const tree = render(
+      <>
+        {Object.values(PieChartVariant).map((variant, i) =>
+          Object.values(ChartSize).map((size, j) =>
+            Object.values(PieChartLabelVariant).map((labelVariant, k) => (
+              <ComposedStory
+                key={`${variant}-${size}-${labelVariant}-${
+                  Object.values(TooltipVariant)[k]
+                }`}
+                variant={variant}
+                labelVariant={labelVariant}
+                tooltipVariant={Object.values(TooltipVariant)[k]}
+                size={size}
+                theme={
+                  Object.keys(themes)[
+                    (i * Object.values(ChartSize).length +
+                      j * Object.values(PieChartLabelVariant).length +
+                      k) %
+                      Object.keys(themes).length
+                  ] as ChartTheme
+                }
+              />
+            ))
+          )
+        )}
+      </>
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('handles default', () => {
+    const { queryByText } = render(<PieChart aria-label="Chart" data={data} />);
+
+    expect(queryByText('Cats')).toBe(null);
+    expect(queryByText('Dogs')).toBe(null);
+    expect(queryByText('Fish')).toBe(null);
+  });
+
+  it('handles internal labels', () => {
+    const { getByText } = render(
+      <PieChart
+        aria-label="Chart"
+        data={data}
+        labelVariant={PieChartLabelVariant.internal}
+      />
+    );
+
+    expect(getByText('Cats')).toBeVisible();
+    expect(getByText('Dogs')).toBeVisible();
+  });
+
+  it('supports custom className', () => {
+    const tree = render(
+      <PieChart 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(
+      <PieChart 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(<PieChart 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(
+      <PieChart 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>
+        <PieChart data={data} aria-labelledby="123" />
+      </>
+    );
+    const component = getByLabelText('Label');
+    expect(component).toHaveAttribute('aria-labelledby', '123');
+  });
+
+  it('supports click on the pie slices', async () => {
+    const user = userEvent.setup();
+    const { getAllByRole } = render(
+      <PieChart aria-label="Chart" data={data} onSliceClick={onClickSpy} />
+    );
+
+    const slices = getAllByRole('button');
+    expect(slices.length).toBe(3);
+
+    await user.click(slices[0]);
+    await user.click(slices[1]);
+    await user.click(slices[2]);
+
+    expect(onClickSpy).toHaveBeenCalledTimes(3);
+  });
+
+  it('supports keydown on the pie slices', async () => {
+    const { getAllByRole } = render(
+      <PieChart aria-label="Chart" data={data} onSliceClick={onClickSpy} />
+    );
+
+    const slices = getAllByRole('button');
+    expect(slices.length).toBe(3);
+
+    userEvent.keyboard('[Tab]');
+    userEvent.keyboard('[Enter]');
+    userEvent.keyboard('[Tab]');
+    userEvent.keyboard('[Space]');
+    userEvent.keyboard('[Tab]');
+    userEvent.keyboard('[Enter]');
+
+    expect(onClickSpy).toHaveBeenCalledTimes(3);
+  });
+
+  it('shows a tooltip when hovering on the pie slices ', async () => {
+    const user = userEvent.setup();
+    const { getAllByRole } = render(
+      <PieChart
+        aria-label="Chart"
+        data={data}
+        // The onSliceClick gives the slice the role "button" which is then used to access the slices.
+        onSliceClick={onClickSpy}
+      />
+    );
+
+    const slices = getAllByRole('button');
+    expect(slices.length).toBe(3);
+
+    await user.hover(slices[0]);
+    await waitFor(() => {
+      expect(screen.getByRole('tooltip', { exact: true })).toBeInTheDocument();
+    });
+    const tooltip = screen.getByRole('tooltip');
+    expect(tooltip.textContent).toContain('Cats');
+  });
+});

package/src/components/PieChart/PieChart.tsx

@@ -0,0 +1,101 @@
+import React, { forwardRef, useId } from 'react';
+import classNames from 'classnames';
+
+import { Comp } from '@redsift/design-system';
+
+import { ChartSize, ColorTheme, TooltipVariant } from '../../types';
+import { PieChartLabelVariant, PieChartProps, PieChartVariant } from './types';
+import { LoadingPieChart } from './LoadingPieChart';
+import { EmptyPieChart } from './EmptyPieChart';
+import { RenderedPieChart } from './RenderedPieChart';
+
+const COMPONENT_NAME = 'PieChart';
+const CLASSNAME = 'redsift-piechart';
+const DEFAULT_PROPS: Partial<PieChartProps> = {
+  isSliceSelected: () => true,
+  labelVariant: PieChartLabelVariant.none,
+  others: true,
+  size: ChartSize.medium,
+  theme: ColorTheme.default,
+  variant: PieChartVariant.plain,
+  tooltipVariant: TooltipVariant.value,
+  localeText: {
+    emptyChartText: 'No Data',
+  },
+};
+
+export const PieChart: Comp<PieChartProps, HTMLDivElement> = forwardRef(
+  (props, ref) => {
+    const {
+      caping,
+      chartRef,
+      className,
+      data: propsData,
+      emptyComponent,
+      id: propsId,
+      isSliceSelected,
+      labelDecorator,
+      labelVariant,
+      localeText,
+      middleText,
+      onSliceClick,
+      others,
+      size,
+      sliceRole,
+      subtext,
+      text,
+      theme,
+      tooltipVariant,
+      variant,
+      ...forwardedProps
+    } = props;
+    const id = propsId ?? useId();
+
+    if (propsData === undefined || propsData === null) {
+      return <LoadingPieChart id={id} {...forwardedProps} ref={ref} />;
+    }
+
+    if (propsData.length === 0) {
+      return (
+        <EmptyPieChart
+          data={propsData}
+          emptyComponent={emptyComponent}
+          id={id}
+          localeText={localeText}
+          size={size}
+          variant={variant}
+          {...forwardedProps}
+          ref={ref}
+        />
+      );
+    }
+
+    return (
+      <RenderedPieChart
+        caping={caping}
+        chartRef={chartRef}
+        className={classNames(PieChart.className, className)}
+        data={propsData}
+        id={id}
+        isSliceSelected={isSliceSelected}
+        labelDecorator={labelDecorator}
+        labelVariant={labelVariant}
+        middleText={middleText}
+        onSliceClick={onSliceClick}
+        others={others}
+        size={size}
+        sliceRole={sliceRole}
+        subtext={subtext}
+        text={text}
+        theme={theme}
+        tooltipVariant={tooltipVariant}
+        variant={variant}
+        {...forwardedProps}
+        ref={ref}
+      />
+    );
+  }
+);
+PieChart.className = CLASSNAME;
+PieChart.defaultProps = DEFAULT_PROPS;
+PieChart.displayName = COMPONENT_NAME;