@redsift/charts 9.2.3-patch → 9.2.3

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

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

@@ -0,0 +1,136 @@
+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('@redsift/design-system', () => ({
+  ...jest.requireActual('@redsift/design-system'),
+  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

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

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

package/src/components/Dot/styles.ts

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

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

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

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

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

package/src/components/Legend/styles.ts

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

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { LegendItem } from './LegendItem';
+
+jest.mock('@redsift/design-system', () => ({
+  ...jest.requireActual('@redsift/design-system'),
+  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 },
+    });
+  });
+});