@redsift/charts 8.0.0 → 8.0.1

package/src/components/Axis/types.ts

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

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

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

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

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

package/src/components/Bar/styles.ts

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

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

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