@redsift/charts 8.0.0 → 8.0.1

package/dist/package.json

@@ -0,0 +1,98 @@
+{
+  "author": {
+    "name": "Red Sift"
+  },
+  "bugs": {
+    "url": "https://github.com/redsift/design-system/issues"
+  },
+  "description": "Chart component library as part of Red Sift's Design System. This package is based on d3.js for computation, react for rendering and events and react-spring for animations and transitions.",
+  "homepage": "https://github.com/redsift/design-system",
+  "license": "MIT",
+  "main": "index.js",
+  "module": "index.js",
+  "name": "@redsift/charts",
+  "publishConfig": {
+    "directory": "dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/redsift/design-system"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c",
+    "check-types": "tsc && tsc-strict",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
+    "prepare": "install-peers || exit 0",
+    "prepublishOnly": "yarn build",
+    "test:unit": "NODE_ENV=test jest --verbose",
+    "test:storybook": "test-storybook -c ../../.storybook --url http://localhost:9000/ --coverage",
+    "test": "yarn test:unit && yarn test:storybook"
+  },
+  "types": "types.d.ts",
+  "version": "8.0.1",
+  "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "classnames": "^2.3.1",
+    "d3": "^7.8.0",
+    "d3-shape": "^3.1.0",
+    "react-aria": "^3.23.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-export-default-from": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
+    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.16.7",
+    "@react-spring/web": "^9.7.1",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@testing-library/dom": "^8.5.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "14.2.1",
+    "@types/d3": "^7.4.0",
+    "@types/d3-shape": "^3.1.0",
+    "@types/jest": "^27.5.1",
+    "@types/react": "18.0.12",
+    "@types/react-dom": "18.0.5",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.26.0",
+    "identity-obj-proxy": "^3.0.0",
+    "install-peers-cli": "^2.2.0",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^29.3.0",
+    "msw": "^0.47.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "^2.72.1",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-cleaner": "^1.0.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-dts": "^5.0.0",
+    "rollup-plugin-execute": "^1.1.0",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-ts-paths-resolve": "^1.7.1",
+    "rollup-plugin-typescript-paths": "^1.3.1",
+    "ts-jest": "^28.0.3"
+  },
+  "peerDependencies": {
+    "@redsift/design-system": "^7.8.1",
+    "@redsift/popovers": "^7.8.1",
+    "react": "18",
+    "react-dom": "18",
+    "styled-components": "^5.3.5"
+  }
+}

package/index.ts

@@ -0,0 +1 @@
+export * from './src';

package/jest.config.js

@@ -0,0 +1,3 @@
+var JEST_CONFIG = require('../../configs/jest.config');
+
+module.exports = { ...JEST_CONFIG };

package/package.json

@@ -30,7 +30,7 @@
     "test": "yarn test:unit && yarn test:storybook"
   },
   "types": "types.d.ts",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "dependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -94,6 +94,5 @@
     "react": "18",
     "react-dom": "18",
     "styled-components": "^5.3.5"
-  },
-  "gitHead": "d5b44ad25f944f5869829750628000b346718034"
+  }
 }

package/rollup.config.js

@@ -0,0 +1,13 @@
+import { rollupConfig } from '../../configs/rollup.base.config';
+
+import pkg from './package.json';
+
+const baseRollupConfig = rollupConfig(__dirname, pkg);
+
+// Bundle JS code
+const bundleJS = { ...baseRollupConfig.bundleJS };
+
+// Bundle TS types in D.TS files
+const bundleType = { ...baseRollupConfig.bundleType };
+
+export default [bundleJS, bundleType];

package/src/components/Arc/Arc.test.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { arc as d3arc, pie as d3pie } from 'd3';
+
+import { Arc } from './Arc';
+import { ArcDatum, TooltipVariant, CategoryDatum } from '../../types';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useId: () => '123',
+}));
+
+const createArc = d3arc<ArcDatum>().innerRadius(0).outerRadius(150);
+const createPie = d3pie<CategoryDatum>()
+  .value((d) => d.value)
+  .sort(null);
+const data = [
+  {
+    key: 'Croissant',
+    value: 333,
+  },
+];
+const pieData = createPie(data);
+
+describe('Arc', () => {
+  const onClickSpy = jest.fn();
+
+  afterEach(() => {
+    onClickSpy.mockClear();
+  });
+
+  it('supports click', async () => {
+    const { getByRole } = render(
+      <svg width={500} height={500}>
+        <Arc
+          id="123"
+          index={0}
+          data={pieData[0]}
+          createArc={createArc}
+          onClick={onClickSpy}
+        />
+      </svg>
+    );
+
+    const bar = getByRole('button');
+    fireEvent.click(bar);
+    expect(onClickSpy).toHaveBeenCalledWith(pieData[0]);
+  });
+
+  it('supports keydown', async () => {
+    const { getByRole } = render(
+      <svg width={500} height={500}>
+        <Arc
+          id="123"
+          index={0}
+          data={pieData[0]}
+          createArc={createArc}
+          onClick={onClickSpy}
+        />
+      </svg>
+    );
+
+    const bar = getByRole('button');
+    fireEvent.keyDown(bar, { key: 'Enter', code: 'Enter', charCode: 13 });
+    expect(onClickSpy).toHaveBeenCalledWith(pieData[0]);
+  });
+
+  it('shows a tooltip on hover', async () => {
+    const user = userEvent.setup();
+    const { getByRole } = render(
+      <svg width={500} height={500}>
+        <Arc
+          index={0}
+          // The onClick gives the bar the role "button" which is then used to access the bars.
+          onClick={onClickSpy}
+          data={pieData[0]}
+          createArc={createArc}
+          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');
+  });
+});

package/src/components/Arc/Arc.tsx

@@ -0,0 +1,73 @@
+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 { ArcProps } from './types';
+import { StyledArc } from './styles';
+import { monochrome } from '../../scheme';
+import { config } from '../../config';
+
+const COMPONENT_NAME = 'Arc';
+const CLASSNAME = 'redsift-arc';
+const DEFAULT_PROPS: Partial<ArcProps> = {
+  color: monochrome,
+  index: 0,
+  previousData: {
+    data: {
+      key: '',
+      value: 0,
+    },
+    startAngle: 0,
+    endAngle: 0,
+    padAngle: 0,
+    value: 0,
+    index: 0,
+  },
+};
+
+export const Arc: Comp<ArcProps, SVGGElement> = forwardRef((props, ref) => {
+  const { color, data, isSelected: propsIsSelected, onClick, role } = props;
+
+  const { className, createArc, hasStroke, previousData, ...forwardedProps } =
+    props;
+
+  const interpolator = d3interpolate(previousData, data);
+
+  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 (
+    <StyledArc
+      {...forwardedProps}
+      ref={ref}
+      className={classNames(Arc.className, className)}
+      $clickable={Boolean(onClick)}
+      $hasStroke={Boolean(hasStroke)}
+    >
+      <animated.path
+        d={
+          config.immediate
+            ? (createArc(data) as unknown as string)
+            : (animatedProps.t.to((t) =>
+                createArc(interpolator(t))
+              ) as unknown as string)
+        }
+        fill={isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color}
+      />
+    </StyledArc>
+  );
+});
+Arc.className = CLASSNAME;
+Arc.defaultProps = DEFAULT_PROPS;
+Arc.displayName = COMPONENT_NAME;

package/src/components/Arc/index.ts

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

package/src/components/Arc/styles.ts

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+import { StyledArcProps } from './types';
+import { DataPoint } from '../DataPoint';
+
+/**
+ * Component style.
+ */
+export const StyledArc = styled(DataPoint)<StyledArcProps>`
+  ${({ $hasStroke }) =>
+    $hasStroke
+      ? css`
+          path {
+            stroke-width: 2px;
+            stroke: #fff;
+          }
+        `
+      : ''}
+
+  ${({ $clickable }) =>
+    $clickable
+      ? css`
+          cursor: pointer;
+
+          &:hover,
+          &:focus,
+          &.focused {
+            opacity: 0.8;
+            outline: none;
+          }
+
+          &:focus-visible,
+          &.focused {
+            path {
+              stroke: var(--redsift-color-default-primary);
+              stroke-width: 4px;
+              paint-order: stroke;
+            }
+          }
+        `
+      : ''}}
+`;

package/src/components/Arc/types.ts

@@ -0,0 +1,18 @@
+import { Arc as d3Arc } from 'd3';
+import { ArcDatum } from '../../types';
+import { DataPointProps, StyledDataPointProps } from '../DataPoint';
+
+/**
+ * Component props.
+ */
+export interface ArcProps extends DataPointProps<ArcDatum> {
+  /** Arc generator used to determine the width of the arc. */
+  createArc: d3Arc<any, ArcDatum>;
+  /** Whether the arc has a stroke or not. Used to create a gap between two siblings. */
+  hasStroke?: boolean;
+}
+
+export type StyledArcProps = StyledDataPointProps &
+  Omit<ArcProps, 'createArc'> & {
+    $hasStroke: ArcProps['hasStroke'];
+  };

package/src/components/Arcs/Arcs.stories.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+// @ts-ignore
+import type { StoryObj } from '@storybook/react';
+import { arc as d3arc, pie as d3pie } from 'd3';
+
+import { Arcs, ArcsProps } from '.';
+import { ArcDatum, TooltipVariant, CategoryDatum } from '../../types';
+
+const meta = {
+  title: 'Charts/Core/Arcs',
+  component: Arcs,
+};
+
+export default meta;
+type Story = StoryObj<ArcsProps>;
+
+const createArc = d3arc<ArcDatum>().innerRadius(0).outerRadius(150);
+
+export const Simple: Story = {
+  render: () => {
+    const createPie = d3pie<CategoryDatum>()
+      .value((d) => d.value)
+      .sort(null);
+    const data = [
+      {
+        key: 'Croissant',
+        value: 333,
+      },
+    ];
+    const pieData = createPie(data);
+
+    return (
+      <svg width={500} height={500}>
+        <Arcs
+          hasLabels
+          transform="translate(250,250)"
+          arcs={[
+            {
+              id: '123',
+              createArc,
+              data: pieData[0],
+            },
+          ]}
+        />
+      </svg>
+    );
+  },
+};
+
+export const Clickable: Story = {
+  render: () => {
+    const createPie = d3pie<CategoryDatum>()
+      .value((d) => d.value)
+      .sort(null);
+    const data = [
+      {
+        key: 'Button',
+        value: 150,
+      },
+      {
+        key: 'Link',
+        value: 333,
+      },
+    ];
+    const pieData = createPie(data);
+
+    return (
+      <svg width={500} height={500}>
+        <Arcs
+          hasLabels
+          transform="translate(250,250)"
+          id="123"
+          hasStroke
+          arcs={[
+            {
+              createArc,
+              onClick: (datum) => console.log(datum),
+              data: pieData[0],
+            },
+            {
+              createArc,
+              onClick: (datum) => {
+                window.open(
+                  `https://en.wikipedia.org/wiki/${datum.data.key}`,
+                  '_blank'
+                );
+              },
+              data: pieData[1],
+            },
+          ]}
+        />
+      </svg>
+    );
+  },
+};
+
+export const Selectable: Story = {
+  render: () => {
+    const createPie = d3pie<CategoryDatum>()
+      .value((d) => d.value)
+      .sort(null);
+    const data = [
+      {
+        key: 'Deselected',
+        value: 150,
+      },
+      {
+        key: 'Selected',
+        value: 333,
+      },
+    ];
+    const pieData = createPie(data);
+
+    return (
+      <svg width={500} height={500}>
+        <Arcs
+          hasLabels
+          transform="translate(250,250)"
+          role="option"
+          arcs={[
+            {
+              createArc,
+              isSelected: false,
+              onClick: (datum) =>
+                console.log('Clicked on the non-selected arc', datum),
+              data: pieData[0],
+            },
+            {
+              createArc,
+              isSelected: true,
+              onClick: (datum) =>
+                console.log('Clicked on the selected arc', datum),
+              data: pieData[1],
+            },
+          ]}
+        />
+      </svg>
+    );
+  },
+};
+
+export const WithTooltip: Story = {
+  render: () => {
+    const createPie = d3pie<CategoryDatum>()
+      .value((d) => d.value)
+      .sort(null);
+    const data = Object.keys(TooltipVariant).map((tooltipVariant) => ({
+      key: tooltipVariant,
+      value: 333,
+    }));
+    const pieData = createPie(data);
+
+    return (
+      <svg width={500} height={500}>
+        <Arcs
+          hasLabels
+          transform="translate(250,250)"
+          arcs={Object.keys(TooltipVariant).map((tooltipVariant, index) => ({
+            createArc,
+            hasStroke: true,
+            index,
+            isSelected: true,
+            key: tooltipVariant,
+            labelDecorator: (datum: ArcDatum) =>
+              `${datum.data.key.charAt(0).toUpperCase()}${datum.data.key.slice(
+                1
+              )}`,
+            percent: 0.25,
+            data: pieData[index],
+            tooltipVariant,
+            role: 'option',
+          }))}
+        />
+      </svg>
+    );
+  },
+};

package/src/components/Arcs/Arcs.tsx

@@ -0,0 +1,114 @@
+import React, { RefObject, forwardRef, useId } 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 { ArcsProps } from './types';
+import { StyledArcs } from './styles';
+import { Arc } from '../Arc';
+import { config } from '../../config';
+
+const COMPONENT_NAME = 'Arcs';
+const CLASSNAME = 'redsift-arcs';
+const DEFAULT_PROPS: Partial<ArcsProps> = {};
+
+export const Arcs: Comp<ArcsProps, SVGGElement> = forwardRef((props, ref) => {
+  const {
+    arcs,
+    className,
+    color,
+    hasLabels,
+    hasStroke,
+    id: propsId,
+    labelDecorator,
+    onClick,
+    role,
+    sliceProps,
+    tooltipVariant,
+    ...forwardedProps
+  } = props;
+  const id = propsId ?? useId();
+
+  const animatedProps = useSpring({
+    ...config,
+    to: async (next: (props?: object) => Promise<void>) => {
+      await next({ t: 1 });
+    },
+    from: { t: 0 },
+  });
+
+  return (
+    <StyledArcs
+      {...forwardedProps}
+      className={classNames(Arcs.className, className)}
+      ref={ref as RefObject<SVGGElement>}
+    >
+      <g className="arc-group">
+        {arcs.map((arc, index) => {
+          const arcIndex = arc.index ?? index;
+          const arcId = arc.id ?? `id${id}__arc-${arcIndex}`;
+
+          return (
+            <Arc
+              {...sliceProps}
+              color={color}
+              hasStroke={hasStroke}
+              labelDecorator={labelDecorator}
+              onClick={onClick}
+              role={role}
+              tooltipVariant={tooltipVariant}
+              {...arc}
+              key={arcId}
+              id={arcId}
+              index={arcIndex}
+            />
+          );
+        })}
+      </g>
+      {hasLabels ? (
+        <g className="arc-label-group">
+          {arcs
+            .filter((arc) => {
+              const value = arc.data.data.value;
+              const percent = arc.data.data.percent;
+              return percent ? value > 0 && percent >= 0.1 : value > 0;
+            })
+            .map((arc, index) => {
+              const arcIndex = arc.index ?? index;
+              const arcId = arc.id ?? `id${id}__arc-${arcIndex}`;
+              const arcLabelDecorator = arc.labelDecorator ?? labelDecorator;
+              const interpolator = d3interpolate(arc.from, arc.data);
+
+              return (
+                <animated.text
+                  alignmentBaseline="middle"
+                  className={`arc-label _${index}`}
+                  key={`${arcId}-label`}
+                  textAnchor="middle"
+                  transform={
+                    config.immediate
+                      ? `translate(${arc.createArc.centroid(arc.data)})`
+                      : animatedProps.t.to(
+                          (t) =>
+                            `translate(${arc.createArc.centroid(
+                              interpolator(t)
+                            )})`
+                        )
+                  }
+                >
+                  {arcLabelDecorator
+                    ? arcLabelDecorator(arc.data)
+                    : arc.data.data.key}
+                </animated.text>
+              );
+            })}
+        </g>
+      ) : null}
+    </StyledArcs>
+  );
+});
+Arcs.className = CLASSNAME;
+Arcs.defaultProps = DEFAULT_PROPS;
+Arcs.displayName = COMPONENT_NAME;

package/src/components/Arcs/index.ts

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

package/src/components/Arcs/styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { StyledArcsProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledArcs = styled.g<StyledArcsProps>``;