@redsift/charts 8.0.1 → 8.0.2

package/src/components/LegendItem/LegendItem.tsx

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

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

package/src/components/LegendItem/styles.ts

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

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

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

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

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

@@ -1,201 +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 './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

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