@redsift/charts 8.0.1 → 8.0.2

package/src/components/Dot/Dot.stories.tsx

@@ -1,157 +0,0 @@
-import React from 'react';
-// @ts-ignore
-import type { StoryObj } from '@storybook/react';
-import { scaleLinear as d3scaleLinear } from 'd3';
-
-import { Dot, DotProps } from '.';
-import { DotDatum, TooltipVariant } from '../../types';
-
-const meta = {
-  title: 'Charts/Core/Dot',
-  component: Dot,
-};
-
-export default meta;
-type Story = StoryObj<DotProps>;
-
-const scaleX = d3scaleLinear().domain([0, 200]).range([0, 200]);
-const scaleY = d3scaleLinear().domain([0, 200]).range([200, 0]);
-
-export const Simple: Story = {
-  render: () => (
-    <svg width={200} height={200}>
-      <Dot
-        id="123"
-        index={0}
-        data={{
-          x: 50,
-          y: 50,
-          r: 10,
-          data: {
-            key: [50, 50, 'Croissant'],
-            value: 333,
-          },
-        }}
-        scaleX={scaleX}
-        scaleY={scaleY}
-      />
-    </svg>
-  ),
-};
-
-export const Clickable: Story = {
-  render: () => (
-    <svg width={200} height={200}>
-      <Dot
-        index={0}
-        isSelected={false}
-        onClick={(datum) => console.log(datum)}
-        data={{
-          x: 50,
-          y: 50,
-          r: 10,
-          data: {
-            key: [50, 50, 'Croissant'],
-            value: 333,
-          },
-        }}
-        scaleX={scaleX}
-        scaleY={scaleY}
-      />
-      <Dot
-        index={1}
-        isSelected
-        onClick={(datum) => {
-          window.open(
-            `https://en.wikipedia.org/wiki/${datum.data.key}`,
-            '_blank'
-          );
-        }}
-        data={{
-          x: 100,
-          y: 100,
-          r: 10,
-          data: {
-            key: [10, 100, 'Croissant'],
-            value: 333,
-          },
-        }}
-        role="link"
-        scaleX={scaleX}
-        scaleY={scaleY}
-      />
-    </svg>
-  ),
-};
-
-export const Selectable: Story = {
-  render: () => (
-    <svg width={200} height={200}>
-      <Dot
-        index={0}
-        isSelected={false}
-        data={{
-          x: 50,
-          y: 50,
-          r: 10,
-          data: {
-            key: [50, 50, 'Croissant'],
-            value: 333,
-          },
-        }}
-        role="option"
-        scaleX={scaleX}
-        scaleY={scaleY}
-      />
-      <Dot
-        index={1}
-        isSelected
-        data={{
-          x: 100,
-          y: 100,
-          r: 10,
-          data: {
-            key: [10, 100, 'Croissant'],
-            value: 333,
-          },
-        }}
-        role="option"
-        scaleX={scaleX}
-        scaleY={scaleY}
-      />
-    </svg>
-  ),
-};
-
-export const WithTooltip: Story = {
-  render: () => (
-    <svg width={200} height={200}>
-      {Object.keys(TooltipVariant).map((tooltipVariant, index) => (
-        <Dot
-          index={index}
-          isSelected
-          key={tooltipVariant}
-          labelDecorator={(datum: DotDatum) =>
-            `${datum.data.key[2]!.charAt(
-              0
-            ).toUpperCase()}${datum.data.key[2]!.slice(1)}`
-          }
-          data={{
-            x: 50,
-            y: 50,
-            r: 10,
-            data: {
-              key: [50, 50, 'Croissant'],
-              value: 333,
-              percent: 0.05,
-            },
-          }}
-          tooltipVariant={tooltipVariant as TooltipVariant}
-          role="option"
-          scaleX={scaleX}
-          scaleY={scaleY}
-        />
-      ))}
-    </svg>
-  ),
-};

package/src/components/Dot/Dot.test.tsx

@@ -1,136 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { scaleLinear as d3scaleLinear } from 'd3';
-
-import { Dot } from './Dot';
-import { TooltipVariant } from '../../types';
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useId: () => '123',
-}));
-
-const scaleX = d3scaleLinear().domain([0, 200]).range([0, 200]);
-const scaleY = d3scaleLinear().domain([0, 200]).range([200, 0]);
-
-describe('Dot', () => {
-  const onClickSpy = jest.fn();
-
-  afterEach(() => {
-    onClickSpy.mockClear();
-  });
-
-  it('supports click', async () => {
-    const { getByRole } = render(
-      <svg width={200} height={200}>
-        <Dot
-          id="123"
-          index={0}
-          data={{
-            x: 50,
-            y: 50,
-            r: 2,
-            data: {
-              key: [50, 50, 'Croissant'],
-              value: 333,
-            },
-          }}
-          onClick={onClickSpy}
-          scaleX={scaleX}
-          scaleY={scaleY}
-        />
-      </svg>
-    );
-
-    const point = getByRole('button');
-    fireEvent.click(point);
-    expect(onClickSpy).toHaveBeenCalledWith({
-      x: 50,
-      y: 50,
-      r: 2,
-      data: {
-        key: [50, 50, 'Croissant'],
-        value: 333,
-      },
-    });
-  });
-
-  it('supports keydown', async () => {
-    const { getByRole } = render(
-      <svg width={200} height={200}>
-        <Dot
-          id="123"
-          index={0}
-          data={{
-            x: 50,
-            y: 50,
-            r: 2,
-            data: {
-              key: [50, 50, 'Croissant'],
-              value: 333,
-            },
-          }}
-          onClick={onClickSpy}
-          scaleX={scaleX}
-          scaleY={scaleY}
-        />
-      </svg>
-    );
-
-    const point = getByRole('button');
-    fireEvent.keyDown(point, { key: 'Enter', code: 'Enter', charCode: 13 });
-    expect(onClickSpy).toHaveBeenCalledWith({
-      x: 50,
-      y: 50,
-      r: 2,
-      data: {
-        key: [50, 50, 'Croissant'],
-        value: 333,
-      },
-    });
-    fireEvent.keyDown(point, { key: 'Space', code: 'Space', charCode: 32 });
-    expect(onClickSpy).toHaveBeenCalledWith({
-      x: 50,
-      y: 50,
-      r: 2,
-      data: {
-        key: [50, 50, 'Croissant'],
-        value: 333,
-      },
-    });
-  });
-
-  it('shows a tooltip on hover', async () => {
-    const user = userEvent.setup();
-    const { getByRole } = render(
-      <svg width={200} height={200}>
-        <Dot
-          index={0}
-          // The onClick gives the point the role "button" which is then used to access the points.
-          onClick={onClickSpy}
-          data={{
-            x: 50,
-            y: 50,
-            r: 2,
-            data: {
-              key: [50, 50, 'Croissant'],
-              value: 333,
-            },
-          }}
-          tooltipVariant={TooltipVariant.label}
-          scaleX={scaleX}
-          scaleY={scaleY}
-        />
-      </svg>
-    );
-
-    const point = getByRole('button');
-    await user.hover(point);
-    await waitFor(() => {
-      expect(screen.getByRole('tooltip', { exact: true })).toBeInTheDocument();
-    });
-    const tooltip = screen.getByRole('tooltip');
-    expect(tooltip.textContent).toContain('Croissant');
-  });
-});

package/src/components/Dot/Dot.tsx

@@ -1,49 +0,0 @@
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-
-import { Comp } from '@redsift/design-system';
-
-import { DotProps } from './types';
-import { StyledDot } from './styles';
-import { monochrome } from '../../scheme';
-import { DotDatum } from '../../types';
-
-const COMPONENT_NAME = 'Dot';
-const CLASSNAME = 'redsift-dot';
-const DEFAULT_PROPS: Partial<DotProps> = {
-  color: monochrome,
-  index: 0,
-  labelDecorator: (datum: DotDatum) => {
-    return datum.data.key[2] !== undefined && datum.data.key[2] !== null
-      ? datum.data.key[2]
-      : `${datum.data.key[0]},${datum.data.key[1]}`;
-  },
-};
-
-export const Dot: Comp<DotProps, SVGGElement> = forwardRef((props, ref) => {
-  const { color, data, isSelected: propsIsSelected, onClick, role } = props;
-
-  const { className, scaleX, scaleY, ...forwardedProps } = props;
-
-  const isSelectable = role === 'option';
-  const isDeselected = isSelectable && propsIsSelected === false;
-
-  return (
-    <StyledDot
-      {...forwardedProps}
-      ref={ref}
-      className={classNames(Dot.className, className)}
-      $clickable={Boolean(onClick)}
-    >
-      <circle
-        cx={scaleX(data.x)}
-        cy={scaleY(data.y)}
-        r={data.r}
-        fill={isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color}
-      />
-    </StyledDot>
-  );
-});
-Dot.className = CLASSNAME;
-Dot.defaultProps = DEFAULT_PROPS;
-Dot.displayName = COMPONENT_NAME;

package/src/components/Dot/index.ts

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

package/src/components/Dot/styles.ts

@@ -1,33 +0,0 @@
-import styled, { css } from 'styled-components';
-import { StyledDotProps } from './types';
-import { DataPoint } from '../DataPoint';
-
-/**
- * Component style.
- */
-export const StyledDot = styled(DataPoint)<StyledDotProps>`
-  circle {
-    fill-opacity: 0.7;
-  }
-
-  ${({ $clickable }) =>
-    $clickable
-      ? css`
-          cursor: pointer;
-
-          &:hover,
-          &:focus {
-            opacity: 0.5;
-            outline: none;
-          }
-
-          &:focus-visible {
-            circle {
-              stroke: var(--redsift-color-default-primary);
-              stroke-width: 4px;
-              paint-order: stroke;
-            }
-          }
-        `
-      : ''}}
-`;

package/src/components/Dot/types.ts

@@ -1,16 +0,0 @@
-import { ScaleLinear as d3ScaleLinear } from 'd3';
-import { DotDatum } from '../../types';
-import { DataPointProps, StyledDataPointProps } from '../DataPoint';
-
-/**
- * Component props.
- */
-export interface DotProps extends DataPointProps<DotDatum> {
-  /** A linear continuous scale defined over a numeric domain used to determine the x position based on the coordinates. */
-  scaleX: d3ScaleLinear<number, number, never>;
-  /** A linear continuous scale defined over a numeric domain used to determine the y position based on the coordinates. */
-  scaleY: d3ScaleLinear<number, number, never>;
-}
-
-export type StyledDotProps = StyledDataPointProps &
-  Omit<DotProps, 'scaleX' | 'scaleY'>;

package/src/components/Legend/Legend.stories.tsx

@@ -1,108 +0,0 @@
-import React, { useState } from 'react';
-// @ts-ignore
-import type { StoryObj } from '@storybook/react';
-
-import { Legend, LegendProps } from '.';
-import { LabelVariant } from '../../types';
-import { Flexbox } from '@redsift/design-system';
-
-const meta = {
-  title: 'Charts/Core/Legend',
-  component: Legend,
-};
-
-export default meta;
-type Story = StoryObj<LegendProps>;
-
-const mockData = [
-  {
-    key: 'Coffee',
-    value: 5471,
-    color: '#56D58E',
-  },
-  {
-    key: 'Bread',
-    value: 3325,
-    color: '#D95CBA',
-  },
-  {
-    key: 'Tea',
-    value: 1435,
-    color: '#63EAE4',
-  },
-  {
-    key: 'Pastry',
-    value: 856,
-    color: '#C78348',
-  },
-  {
-    key: 'Croissant',
-    value: 771,
-    color: '#E06363',
-  },
-  {
-    key: 'Sandwich',
-    value: 771,
-    color: '#FFF741',
-  },
-  {
-    key: 'Hot chocolate',
-    value: 588,
-    color: '#965EDE',
-  },
-  {
-    key: 'Cookies',
-    value: 540,
-    color: '#FCBB54',
-  },
-  {
-    key: 'Toast',
-    value: 318,
-    color: '#73C5EB',
-  },
-];
-
-export const Simple: Story = {
-  render: () => <Legend data={mockData} />,
-};
-
-export const AllVariants = () => (
-  <Flexbox flexDirection="column" alignItems="center">
-    {Object.keys(LabelVariant).map((labelVariant) => (
-      <Legend
-        data={mockData}
-        key={labelVariant}
-        variant={labelVariant as LabelVariant}
-      />
-    ))}
-  </Flexbox>
-);
-
-export const Clickable: Story = {
-  render: () => (
-    <Legend data={mockData} onLegendItemClick={(datum) => console.log(datum)} />
-  ),
-};
-
-export const Selectable: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<string[]>([]);
-
-    return (
-      <Legend
-        data={mockData}
-        onLegendItemClick={(datum) => {
-          if (selected.includes(datum.data.key)) {
-            setSelected(selected.filter((s) => s !== datum.data.key));
-          } else {
-            setSelected([...selected, datum.data.key]);
-          }
-        }}
-        isLegendItemSelected={(datum) =>
-          !selected.length || selected.includes(datum.data.key)
-        }
-        legendItemRole="option"
-      />
-    );
-  },
-};

package/src/components/Legend/Legend.tsx

@@ -1,61 +0,0 @@
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-import { sum as d3sum } from 'd3';
-
-import { Comp } from '@redsift/design-system';
-
-import { LegendProps } from './types';
-import { StyledLegend } from './styles';
-import { LabelVariant } from '../../types';
-import { LegendItem } from '../LegendItem';
-
-const COMPONENT_NAME = 'Legend';
-const CLASSNAME = 'redsift-chart-legend';
-const DEFAULT_PROPS: Partial<LegendProps> = {
-  isLegendItemSelected: () => true,
-  variant: LabelVariant.label,
-};
-
-export const Legend: Comp<LegendProps, HTMLUListElement> = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      data,
-      isLegendItemSelected,
-      labelDecorator,
-      legendItemRole,
-      onLegendItemClick,
-      variant,
-      width,
-      ...forwardedProps
-    } = props;
-    const total = d3sum(data, (d) => d.value);
-
-    return (
-      <StyledLegend
-        {...forwardedProps}
-        className={classNames(Legend.className, className)}
-        ref={ref}
-        $width={width}
-      >
-        {data.map(({ color, ...datum }, index) => (
-          <LegendItem
-            data={{ data: datum }}
-            color={color}
-            total={total}
-            variant={variant}
-            index={index}
-            isSelected={Boolean(isLegendItemSelected!({ data: datum }))}
-            key={`legend-item _${index}`}
-            labelDecorator={labelDecorator}
-            onClick={onLegendItemClick}
-            role={legendItemRole}
-          />
-        ))}
-      </StyledLegend>
-    );
-  }
-);
-Legend.className = CLASSNAME;
-Legend.defaultProps = DEFAULT_PROPS;
-Legend.displayName = COMPONENT_NAME;

package/src/components/Legend/index.ts

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

package/src/components/Legend/styles.ts

@@ -1,15 +0,0 @@
-import styled, { css } from 'styled-components';
-import { StyledLegendProps } from './types';
-
-/**
- * Component style.
- */
-export const StyledLegend = styled.ul<StyledLegendProps>`
-  max-width: 262px;
-  ${({ $width }) =>
-    $width !== undefined
-      ? css`
-          width: ${$width};
-        `
-      : null}
-`;

package/src/components/Legend/types.ts

@@ -1,27 +0,0 @@
-import { ComponentProps } from 'react';
-import { CategoryDatum, LabelVariant, LegendItemDatum } from '../../types';
-import { LegendItemProps } from '../LegendItem';
-
-/**
- * Component props.
- */
-export interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick'> {
-  /** Data. */
-  data: (CategoryDatum & { color: string })[];
-  /** Method to determine whether a slice is selected or not. */
-  isLegendItemSelected?: (datum: LegendItemDatum) => void;
-  /** Method to override the data labels. */
-  labelDecorator?: (datum: LegendItemDatum) => string;
-  /** Method to be called on a click on a legend item. */
-  onLegendItemClick?: (datum: LegendItemDatum) => void;
-  /** LegendItem role. Used to indicate that legend items are to be considered buttons or links. If an onClick is provided, the legend items will have the role `button` unless specifically set to `link` with this prop. */
-  legendItemRole?: LegendItemProps['role'];
-  /** Variant. */
-  variant?: LabelVariant;
-  /** Width. */
-  width?: string;
-}
-
-export type StyledLegendProps = Omit<LegendProps, 'data'> & {
-  $width?: LegendProps['width'];
-};

package/src/components/LegendItem/LegendItem.test.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-
-import { LegendItem } from './LegendItem';
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useId: () => '123',
-}));
-
-describe('LegendItem', () => {
-  const onClickSpy = jest.fn();
-
-  afterEach(() => {
-    onClickSpy.mockClear();
-  });
-
-  it('supports click', async () => {
-    const { getByRole } = render(
-      <svg width={500} height={500}>
-        <LegendItem
-          id="123"
-          index={0}
-          data={{
-            data: {
-              key: 'Croissant',
-              value: 333,
-            },
-          }}
-          onClick={onClickSpy}
-        />
-      </svg>
-    );
-
-    const legendItem = getByRole('button');
-    fireEvent.click(legendItem);
-    expect(onClickSpy).toHaveBeenCalledWith({
-      data: { key: 'Croissant', value: 333 },
-    });
-  });
-
-  it('supports keydown', async () => {
-    const { getByRole } = render(
-      <svg width={500} height={500}>
-        <LegendItem
-          id="123"
-          index={0}
-          data={{
-            data: {
-              key: 'Croissant',
-              value: 333,
-            },
-          }}
-          onClick={onClickSpy}
-        />
-      </svg>
-    );
-
-    const legendItem = getByRole('button');
-    fireEvent.keyDown(legendItem, {
-      key: 'Enter',
-      code: 'Enter',
-      charCode: 13,
-    });
-    expect(onClickSpy).toHaveBeenCalledWith({
-      data: { key: 'Croissant', value: 333 },
-    });
-  });
-});