@redsift/charts 8.0.1 → 8.0.2

package/src/components/Axis/types.ts

@@ -1,56 +0,0 @@
-import { ComponentProps } from 'react';
-import { ValueOf } from '@redsift/design-system';
-import { AnyScale, TicksSpec } from '../../types';
-
-/**
- * Component variant.
- */
-export const AxisVariant = {
-  none: 'none',
-  line: 'line',
-  lineTick: 'lineTick',
-  tick: 'tick',
-  tickValue: 'tickValue',
-  default: 'default',
-} as const;
-export type AxisVariant = ValueOf<typeof AxisVariant>;
-
-export const AxisPosition = {
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-};
-export type AxisPosition = ValueOf<typeof AxisPosition>;
-
-/**
- * Component props.
- */
-export interface AxisProps extends Omit<ComponentProps<'g'>, 'scale'> {
-  areLabelsRotated?: boolean;
-  format?: string;
-  legend?: string;
-  legendOffset?: number;
-  legendPosition?: 'start' | 'middle' | 'end';
-  /** Length of the axis. */
-  length?: number;
-  /** Position of axis. top|bottom means this is an x axis, right|left means this is an y axis. */
-  position?: AxisPosition;
-  /** Scale (d3.js) used to generate the axis. */
-  scale: AnyScale;
-  tickPadding?: number;
-  tickRotation?: number;
-  tickSize?: number;
-  tickValues?: TicksSpec;
-  /** Variant. */
-  variant?: AxisVariant;
-  /** X position. */
-  x?: number;
-  /** Y position. */
-  y?: number;
-}
-
-export type StyledAxisProps = Omit<
-  AxisProps,
-  'areXLabelsRotated' | 'size' | 'scale'
-> & {};

package/src/components/Bar/Bar.stories.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-// @ts-ignore
-import type { StoryObj } from '@storybook/react';
-import { scaleLinear as d3scaleLinear } from 'd3';
-
-import { Bar, BarOrientation, BarProps } from '.';
-import { BarDatum, TooltipVariant } from '../../types';
-
-const meta = {
-  title: 'Charts/Core/Bar',
-  component: Bar,
-};
-
-export default meta;
-type Story = StoryObj<BarProps>;
-
-const scale = d3scaleLinear().domain([0, 1000]).range([0, 500]);
-
-export const Simple: Story = {
-  render: () => (
-    <>
-      {Object.keys(BarOrientation).map((orientation) => (
-        <svg width={500} height={500} key={orientation}>
-          <Bar
-            orientation={orientation}
-            data={{
-              data: {
-                key: 'Croissant',
-                value: 333,
-              },
-            }}
-            scale={scale}
-          />
-        </svg>
-      ))}
-    </>
-  ),
-};
-
-export const Clickable: Story = {
-  render: () => (
-    <>
-      {Object.keys(BarOrientation).map((orientation) => (
-        <svg width={500} height={500} key={orientation}>
-          <Bar
-            index={0}
-            isSelected={false}
-            onClick={(datum) => console.log(datum)}
-            orientation={orientation}
-            data={{
-              data: {
-                key: 'Button',
-                value: 150,
-              },
-            }}
-            scale={scale}
-          />
-          <Bar
-            index={1}
-            isSelected
-            onClick={(datum) => {
-              window.open(
-                `https://en.wikipedia.org/wiki/${datum.data.key}`,
-                '_blank'
-              );
-            }}
-            orientation={orientation}
-            data={{
-              data: {
-                key: 'Link',
-                value: 333,
-              },
-            }}
-            role="link"
-            scale={scale}
-          />
-        </svg>
-      ))}
-    </>
-  ),
-};
-
-export const Selectable: Story = {
-  render: () => (
-    <>
-      {Object.keys(BarOrientation).map((orientation) => (
-        <svg width={500} height={500} key={orientation}>
-          <Bar
-            index={0}
-            isSelected={false}
-            orientation={orientation}
-            data={{
-              data: {
-                key: 'Deselected',
-                value: 150,
-              },
-            }}
-            role="option"
-            scale={scale}
-          />
-          <Bar
-            index={1}
-            isSelected
-            orientation={orientation}
-            data={{
-              data: {
-                key: 'Selected',
-                value: 333,
-              },
-            }}
-            role="option"
-            scale={scale}
-          />
-        </svg>
-      ))}
-    </>
-  ),
-};
-
-export const WithTooltip: Story = {
-  render: () => (
-    <>
-      {Object.keys(BarOrientation).map((orientation) => (
-        <svg width={500} height={500} key={orientation}>
-          {Object.keys(TooltipVariant).map((tooltipVariant, index) => (
-            <Bar
-              index={index}
-              isSelected
-              key={tooltipVariant}
-              labelDecorator={(datum: BarDatum) =>
-                `${datum.data.key
-                  .charAt(0)
-                  .toUpperCase()}${datum.data.key.slice(1)}`
-              }
-              orientation={orientation}
-              data={{
-                data: {
-                  key: tooltipVariant,
-                  value: 333,
-                  percent: 0.05,
-                },
-              }}
-              tooltipVariant={tooltipVariant as TooltipVariant}
-              role="option"
-              scale={scale}
-            />
-          ))}
-        </svg>
-      ))}
-    </>
-  ),
-};

package/src/components/Bar/Bar.test.tsx

@@ -1,158 +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 { Bar } from './Bar';
-import { TooltipVariant } from '../../types';
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useId: () => '123',
-}));
-
-const scale = d3scaleLinear().domain([0, 1000]).range([0, 500]);
-
-describe('Bar', () => {
-  const onClickSpy = jest.fn();
-
-  afterEach(() => {
-    onClickSpy.mockClear();
-  });
-
-  it('supports click', async () => {
-    const { getByRole } = render(
-      <svg width={500} height={500}>
-        <Bar
-          id="123"
-          index={0}
-          data={{
-            data: {
-              key: 'Croissant',
-              value: 333,
-            },
-          }}
-          scale={scale}
-          onClick={onClickSpy}
-        />
-      </svg>
-    );
-
-    const bar = getByRole('button');
-    fireEvent.click(bar);
-    expect(onClickSpy).toHaveBeenCalledWith({
-      data: { key: 'Croissant', value: 333 },
-    });
-  });
-
-  it('supports keydown', async () => {
-    const { getByRole } = render(
-      <svg width={500} height={500}>
-        <Bar
-          id="123"
-          index={0}
-          data={{
-            data: {
-              key: 'Croissant',
-              value: 333,
-            },
-          }}
-          scale={scale}
-          onClick={onClickSpy}
-          orientation="vertical"
-        />
-      </svg>
-    );
-
-    const bar = getByRole('button');
-    fireEvent.keyDown(bar, { key: 'Enter', code: 'Enter', charCode: 13 });
-    expect(onClickSpy).toHaveBeenCalledWith({
-      data: { key: 'Croissant', value: 333 },
-    });
-  });
-
-  it('shows a tooltip on hover', async () => {
-    const user = userEvent.setup();
-    const { getByRole } = render(
-      <svg width={500} height={500}>
-        <Bar
-          id="123"
-          index={0}
-          // The onClick gives the bar the role "button" which is then used to access the bars.
-          onClick={onClickSpy}
-          data={{
-            data: {
-              key: 'Croissant',
-              value: 333,
-            },
-          }}
-          scale={scale}
-          tooltipVariant={TooltipVariant.label}
-        />
-      </svg>
-    );
-
-    const bar = getByRole('button');
-    await user.hover(bar);
-    await waitFor(() => {
-      expect(screen.getByRole('tooltip', { exact: true })).toBeInTheDocument();
-    });
-    const tooltip = screen.getByRole('tooltip');
-    expect(tooltip.textContent).toContain('Croissant');
-  });
-
-  it.each`
-    Type                                      | props                                                                                                          | result
-    ${'with label'}                           | ${{ data: { data: { key: 'Croissant', value: 333 } }, tooltipVariant: TooltipVariant.label }}                  | ${'Croissant'}
-    ${'with value'}                           | ${{ data: { data: { key: 'Croissant', value: 333 } }, tooltipVariant: TooltipVariant.value }}                  | ${'Croissant - 333'}
-    ${'with percent'}                         | ${{ data: { data: { key: 'Croissant', value: 333, percent: 0.05 } }, tooltipVariant: TooltipVariant.percent }} | ${'Croissant - 5%'}
-    ${'with empty value if there is a label'} | ${{ data: { data: { key: 'Croissant', value: 0 } }, tooltipVariant: TooltipVariant.value }}                    | ${'Croissant'}
-  `('it shows a tooltip on hover $Type', async function ({ props, result }) {
-    const user = userEvent.setup();
-    const { getByRole } = render(
-      <svg width={500} height={500}>
-        <Bar
-          id="123"
-          index={0}
-          // The onClick gives the bar the role "button" which is then used to access the bars.
-          onClick={onClickSpy}
-          scale={scale}
-          {...props}
-        />
-      </svg>
-    );
-
-    const bar = getByRole('button');
-    await user.hover(bar);
-    await waitFor(() => {
-      expect(screen.getByRole('tooltip', { exact: true })).toBeInTheDocument();
-    });
-    const tooltip = screen.getByRole('tooltip');
-    expect(tooltip.textContent).toBe(result);
-  });
-
-  it.each`
-    Type                                        | props
-    ${'with variant label when label is empty'} | ${{ data: { data: { key: '', value: 333 } }, tooltipVariant: TooltipVariant.label }}
-  `('it does not show a tooltip on hover $Type', async function ({ props }) {
-    const user = userEvent.setup();
-    const { getByRole } = render(
-      <svg width={500} height={500}>
-        <Bar
-          id="123"
-          index={0}
-          // The onClick gives the bar the role "button" which is then used to access the bars.
-          onClick={onClickSpy}
-          scale={scale}
-          {...props}
-        />
-      </svg>
-    );
-
-    const bar = getByRole('button');
-    await user.hover(bar);
-    expect(() => screen.getByRole('tooltip')).toThrow(
-      'Unable to find an accessible element with the role "tooltip"'
-    );
-  });
-});

package/src/components/Bar/Bar.tsx

@@ -1,112 +0,0 @@
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-import { animated, useSpring } from '@react-spring/web';
-import { interpolate as d3interpolate } from 'd3';
-
-import { Comp } from '@redsift/design-system';
-
-import { BarOrientation, BarProps } from './types';
-import { StyledBar } from './styles';
-import { monochrome } from '../../scheme';
-import { config } from '../../config';
-
-const COMPONENT_NAME = 'Bar';
-const CLASSNAME = 'redsift-bar';
-const DEFAULT_PROPS: Partial<BarProps> = {
-  color: monochrome,
-  index: 0,
-  gap: 5,
-  height: 40,
-  orientation: BarOrientation.horizontal,
-  previousData: {
-    data: {
-      key: '',
-      value: 0,
-    },
-  },
-  width: 40,
-};
-
-export const Bar: Comp<BarProps, SVGGElement> = forwardRef((props, ref) => {
-  const {
-    color,
-    data,
-    index,
-    isSelected: propsIsSelected,
-    labelDecorator,
-    onClick,
-    role,
-  } = props;
-
-  const {
-    className,
-    gap,
-    height,
-    orientation,
-    previousData,
-    scale,
-    width,
-    ...forwardedProps
-  } = props;
-
-  const interpolator = d3interpolate(
-    previousData!.data?.value || 0,
-    data.data.value
-  );
-
-  const text = labelDecorator ? labelDecorator(data) : data.data.key;
-  const isSelectable = role === 'option';
-  const isDeselected = isSelectable && propsIsSelected === false;
-
-  const animatedProps = useSpring({
-    ...config,
-    to: async (next: (props?: object) => Promise<void>) => {
-      await next({ t: 1 });
-    },
-    from: { t: 0 },
-  });
-
-  return (
-    <StyledBar
-      {...forwardedProps}
-      ref={ref}
-      className={classNames(Bar.className, className)}
-      transform={
-        orientation === BarOrientation.horizontal
-          ? `translate(0, ${gap! * (index! + 1) + height! * index!})`
-          : `translate(${gap! * (index! + 1) + width! * index!}, 0)`
-      }
-      $clickable={Boolean(onClick)}
-    >
-      {orientation === BarOrientation.horizontal ? (
-        <animated.rect
-          height={height}
-          fill={isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color}
-          width={
-            config.immediate
-              ? scale(data.data.value)
-              : animatedProps.t.to((t) => scale(interpolator(t)))
-          }
-        />
-      ) : (
-        <animated.rect
-          height={
-            config.immediate
-              ? scale(data.data.value)
-              : animatedProps.t.to((t) => scale(interpolator(t)))
-          }
-          fill={isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color}
-          width={width}
-        />
-      )}
-      {orientation === BarOrientation.horizontal ? (
-        <text x="10" y={height! / 2} dy="0.35em" aria-hidden={true}>
-          {text}
-        </text>
-      ) : null}
-    </StyledBar>
-  );
-});
-Bar.className = CLASSNAME;
-Bar.defaultProps = DEFAULT_PROPS;
-Bar.displayName = COMPONENT_NAME;

package/src/components/Bar/index.ts

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

package/src/components/Bar/styles.ts

@@ -1,54 +0,0 @@
-import styled, { css } from 'styled-components';
-import { StyledBarProps } from './types';
-import { DataPoint } from '../DataPoint';
-
-/**
- * Component style.
- */
-export const StyledBar = styled(DataPoint)<StyledBarProps>`
-  rect {
-    fill-opacity: 0.9;
-  }
-
-  ${({ $clickable }) =>
-    $clickable
-      ? css`
-          cursor: pointer;
-
-          &:hover,
-          &:focus,
-          &.focused {
-            outline: none;
-            rect {
-              fill-opacity: 0.7;
-            }
-          }
-
-          // &:focus-visible {
-          //   rect {
-          //     stroke: var(--redsift-color-default-primary);
-          //     stroke-width: 4px;
-          //     paint-order: stroke;
-          //   }
-          // }
-
-          @media (prefers-reduced-motion: no-preference) {
-            &:focus-visible,
-            &.focused {
-              outline: 2px solid var(--redsift-color-default-primary);
-              transition: outline-offset 75ms ease-out;
-            }
-
-            &:not(&:active)&:focus-visible,
-            &:not(&:active)&.focused {
-              transition-duration: 0.25s;
-            }
-          }
-
-          &:not(&:active)&:focus-visible,
-          &:not(&:active)&.focused {
-            outline-offset: 0.2rem;
-          }
-        `
-      : ''}}
-`;

package/src/components/Bar/types.ts

@@ -1,31 +0,0 @@
-import { ScaleLinear as d3ScaleLinear } from 'd3';
-import { ValueOf } from '@redsift/design-system';
-import { BarDatum } from '../../types';
-import { DataPointProps, StyledDataPointProps } from '../DataPoint';
-
-/**
- * Component variant.
- */
-export const BarOrientation = {
-  horizontal: 'horizontal',
-  vertical: 'vertical',
-};
-export type BarOrientation = ValueOf<typeof BarOrientation>;
-
-/**
- * Component props.
- */
-export interface BarProps extends DataPointProps<BarDatum> {
-  /** Gap between two siblings. */
-  gap?: number;
-  /** Height of the bar in horizontal orientation. */
-  height?: number;
-  /** Orientation of the bar. */
-  orientation?: BarOrientation;
-  /** A linear continuous scale defined over a numeric domain used to determine the width or height of the bar (depending on the orientation). */
-  scale: d3ScaleLinear<number, number, never>;
-  /** Width of the bar in vertical orientation. */
-  width?: number;
-}
-
-export type StyledBarProps = StyledDataPointProps & Omit<BarProps, 'scale'>;

package/src/components/BarChart/BarChart.stories.tsx

@@ -1,80 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { DataVizColorPalette } from '@redsift/design-system';
-import { BarChart } from '.';
-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 BarChart> = {
-  title: 'Charts/BarChart',
-  component: BarChart as any,
-  argTypes: {
-    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 BarChart>;
-
-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: 'Bar Chart',
-    tooltipVariant: 'value',
-    size: 'medium',
-    theme: 'success-warning-danger-neutral' as ChartTheme,
-    caping: 4,
-    others: true,
-    onBarClick: (datum) => console.log(datum),
-    data: data,
-  },
-};