@redsift/charts 8.0.1 → 8.0.2

package/dist/package.json

@@ -1,98 +0,0 @@
-{
-  "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

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

package/jest.config.js

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

package/rollup.config.js

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

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

@@ -1,73 +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 { 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

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

package/src/components/Arc/styles.ts

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

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

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

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

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

package/src/components/Arcs/styles.ts

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

package/src/components/Arcs/types.ts

@@ -1,26 +0,0 @@
-import { ComponentProps } from 'react';
-import { ArcProps } from '../Arc/types';
-
-/**
- * Component props.
- */
-export interface ArcsProps
-  extends Omit<ComponentProps<'g'>, 'onClick' | 'role'>,
-    Pick<
-      ArcProps,
-      | 'id'
-      | 'labelDecorator'
-      | 'onClick'
-      | 'role'
-      | 'hasStroke'
-      | 'tooltipVariant'
-    > {
-  /** Arc props. */
-  arcs: Omit<ArcProps, 'ref'>[];
-  /** Whether arcs have internal labels or not. */
-  hasLabels?: boolean;
-  /** Native HTML props to forward to each slice. */
-  sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
-}
-
-export type StyledArcsProps = Omit<ArcsProps, 'arcs'> & {};