@redsift/charts 8.0.0 → 8.0.1

package/src/components/PieChart/index.ts

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

package/src/components/PieChart/styles.ts

@@ -0,0 +1,97 @@
+import styled, { css } from 'styled-components';
+import { StyledPieChartProps } from './types';
+import { ChartContainer } from '../ChartContainer';
+
+/**
+ * Component style.
+ */
+export const StyledPieChart = styled(ChartContainer)<StyledPieChartProps>`
+  .redsift-piechart__chart-wrapper {
+    position: relative;
+  }
+`;
+
+export const StyledPieChartCenterText = styled.div<{
+  $maxWidth: number;
+  $textSize: number;
+  $smallTextSize: number;
+}>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${({ $maxWidth }) => $maxWidth}px;
+  }
+
+  > b {
+    font-family: var(--redsift-typography-font-family-source-code-pro);
+    color: var(--redsift-color-neutral-black);
+    font-weight: var(--redsift-typography-font-weight-medium);
+    font-size: ${({ $textSize }) => $textSize}px;
+    line-height: ${({ $textSize }) => $textSize}px;
+
+    &:nth-child(2) {
+      font-weight: normal;
+      margin-top: 8px;
+      font-family: var(--redsift-typography-font-family-raleway);
+      font-size: ${({ $smallTextSize }) => $smallTextSize}px;
+      line-height: ${({ $smallTextSize }) => $smallTextSize}px;
+    }
+  }
+  > span {
+    color: var(--redsift-color-neutral-black);
+    font-size: ${({ $textSize }) => $textSize}px;
+    line-height: ${({ $textSize }) => $textSize}px;
+    &:nth-child(3) {
+      margin-top: 4px;
+      font-size: ${({ $smallTextSize }) => $smallTextSize}px;
+      line-height: ${({ $smallTextSize }) => $smallTextSize}px;
+    }
+  }
+  > b + span {
+    font-size: var(--redsift-typography-body-font-size);
+    font-family: var(--redsift-typography-font-family-raleway);
+    line-height: var(--redsift-typography-badge-line-height);
+    color: rgba(0, 0, 0, 0.6);
+    text-align: center;
+  }
+`;
+
+export const StyledPieChartEmptyText = styled.div<{
+  $maxWidth: number;
+  $textSize: number;
+  $isDonut: boolean;
+}>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${({ $maxWidth }) => $maxWidth}px;
+  }
+
+  > span {
+    font-family: var(--redsift-typography-font-family-raleway);
+    color: ${({ $isDonut }) =>
+      $isDonut
+        ? css`var(--redsift-color-neutral-midgrey)`
+        : css`var(--redsift-color-neutral-black)`};
+    font-size: ${({ $textSize }) => $textSize}px;
+    line-height: ${({ $textSize }) => $textSize}px;
+  }
+`;

package/src/components/PieChart/types.ts

@@ -0,0 +1,89 @@
+import {
+  ChartDimensions,
+  ChartSize,
+  ChartTheme,
+  ArcDatum,
+  TooltipVariant,
+  CategoryData,
+} from '../../types';
+import { ValueOf } from '@redsift/design-system';
+import { ArcProps } from '../Arc';
+import { ChartContainerProps } from '../ChartContainer';
+import { ComponentProps, ReactNode } from 'react';
+
+/**
+ * Component variant.
+ */
+export const PieChartVariant = {
+  plain: 'plain',
+  spaced: 'spaced',
+  donut: 'donut',
+  spacedDonut: 'spacedDonut',
+} as const;
+export type PieChartVariant = ValueOf<typeof PieChartVariant>;
+
+/**
+ * Component's labels variant.
+ */
+export const PieChartLabelVariant = {
+  none: 'none',
+  internal: 'internal',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent',
+} as const;
+export type PieChartLabelVariant = ValueOf<typeof PieChartLabelVariant>;
+
+interface LocaleText {
+  emptyChartText: string;
+}
+
+export type PieChartDimensions = ChartDimensions & {
+  smallFontSize: number;
+  fontSize: number;
+  innerRadius: number;
+};
+
+/**
+ * Component props.
+ */
+export interface PieChartProps extends ChartContainerProps {
+  /** Number of categories to use, the rest being put into a new category called "Others". */
+  caping?: number;
+  /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
+  data?: CategoryData;
+  /** Component to use if the chart is empty (replacing the default one). */
+  emptyComponent?: ReactNode;
+  /** Method to determine whether a slice is selected or not. */
+  isSliceSelected?: (datum: ArcDatum) => boolean | undefined;
+  /** Method to override the data labels. */
+  labelDecorator?: (datum: ArcDatum) => string;
+  /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
+  labelVariant?: PieChartLabelVariant;
+  /** Labels and texts. */
+  localeText?: LocaleText;
+  /** Method to be called on a click on a slice. */
+  onSliceClick?: (datum: ArcDatum) => void;
+  /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
+  others?: boolean | string;
+  /** PieChart size. */
+  size?: ChartSize | PieChartDimensions;
+  /** Native HTML props to forward to each slice. */
+  sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
+  /** Slice role. Used to indicate that slices are to be considered buttons or links. If an onClick is provided, the slices will have the role `button` unless specifically set to `link` with this prop. */
+  sliceRole?: ArcProps['role'];
+  /** Secondary text to be displayed in the middle of the chart, between the main text and subtext. Recommended to be used with donut variants only. */
+  middleText?: string;
+  /** Secondary text to be displayed in the middle of the chart, above the main text. Recommended to be used with `donut` variants only. */
+  subtext?: string;
+  /** Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. */
+  text?: string;
+  /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status.  */
+  theme?: ChartTheme;
+  /** PieChart variant. */
+  variant?: PieChartVariant;
+  /** Tooltip variant. */
+  tooltipVariant?: TooltipVariant;
+}
+
+export type StyledPieChartProps = PieChartProps & {};

package/src/components/PieChart/utils.ts

@@ -0,0 +1,38 @@
+import { ChartSize } from '../../types';
+import { PieChartDimensions } from './types';
+
+export const sizeToDimension = (
+  size: ChartSize | PieChartDimensions
+): PieChartDimensions => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+
+  switch (size) {
+    case ChartSize.small:
+      return {
+        width: 200,
+        height: 200,
+        smallFontSize: 13,
+        fontSize: 30,
+        innerRadius: 55,
+      };
+    case ChartSize.large:
+      return {
+        width: 300,
+        height: 300,
+        smallFontSize: 18,
+        fontSize: 38,
+        innerRadius: 80,
+      };
+    case ChartSize.medium:
+    default:
+      return {
+        width: 240,
+        height: 240,
+        smallFontSize: 14,
+        fontSize: 34,
+        innerRadius: 65,
+      };
+  }
+};

package/src/components/ScatterPlot/EmptyScatterPlot.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef, RefObject, useEffect, useRef } from 'react';
+import { scaleLinear as d3scaleLinear } from 'd3';
+
+import { AnyScale, JSONArray } from '../../types';
+import { ScatterPlotProps } from './types';
+import { StyledScatterPlot, StyledScatterPlotEmptyText } from './styles';
+import { Axis } from '../Axis';
+import { sizeToDimension } from './utils';
+
+export const EmptyScatterPlot = forwardRef<HTMLDivElement, ScatterPlotProps>(
+  (props, ref) => {
+    const {
+      className,
+      data: propsData,
+      emptyComponent,
+      localeText,
+      size,
+      ...forwardedProps
+    } = props;
+
+    const cache = useRef<JSONArray>();
+
+    const data = propsData;
+
+    useEffect(() => {
+      cache.current = data;
+    });
+
+    const chartDimensions = sizeToDimension(size!);
+    const width = chartDimensions.width;
+    const height = chartDimensions.height;
+    const margins = { top: 16, left: 48, right: 16, bottom: 48 };
+    const chartWidth = width - margins.left - margins.right;
+
+    return (
+      <StyledScatterPlot
+        {...forwardedProps}
+        className={className}
+        ref={ref as RefObject<HTMLDivElement>}
+      >
+        {emptyComponent ?? (
+          <>
+            <StyledScatterPlotEmptyText
+              $maxWidth={width}
+              $textSize={chartDimensions.fontSize / 2}
+            >
+              <span>{localeText?.emptyChartText}</span>
+            </StyledScatterPlotEmptyText>
+            <svg width={width} height={height}>
+              <g transform={`translate(${margins.left},${margins.top})`}>
+                <Axis
+                  position="bottom"
+                  length={width - 32}
+                  scale={
+                    d3scaleLinear()
+                      .domain([])
+                      .range([0, chartWidth]) as AnyScale
+                  }
+                  x={0}
+                  y={height}
+                  tickValues={4}
+                />
+              </g>
+            </svg>
+          </>
+        )}
+      </StyledScatterPlot>
+    );
+  }
+);

package/src/components/ScatterPlot/LoadingScatterPlot.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef, RefObject } from 'react';
+
+import { ScatterPlotProps } from './types';
+import { StyledScatterPlot } from './styles';
+
+export const LoadingScatterPlot = forwardRef<HTMLDivElement, ScatterPlotProps>(
+  (props, ref) => {
+    const { className, ...forwardedProps } = props;
+
+    return (
+      <StyledScatterPlot
+        {...forwardedProps}
+        className={className}
+        ref={ref as RefObject<HTMLDivElement>}
+      >
+        Loading...
+      </StyledScatterPlot>
+    );
+  }
+);

package/src/components/ScatterPlot/RenderedScatterPlot.tsx

@@ -0,0 +1,275 @@
+import React, { forwardRef, RefObject, useEffect, useRef } from 'react';
+import {
+  BrushBehavior as d3BrushBehavior,
+  descending as d3descending,
+  extent as d3extent,
+  max as d3max,
+  min as d3min,
+  scaleLinear as d3scaleLinear,
+  scaleSqrt as d3scaleSqrt,
+  select as d3select,
+} from 'd3';
+
+import { AnyScale, JSONArray, LabelVariant } from '../../types';
+import {
+  ScatterPlotLabelVariant,
+  ScatterPlotProps,
+  ScatterPlotVariant,
+} from './types';
+import { StyledScatterPlot } from './styles';
+import { useZoom, useColor, useBrush } from '../../hooks';
+import { Axis } from '../Axis';
+import { Legend } from '../Legend';
+import { Dot } from '../Dot';
+import { BASE_NUMBER_OF_TICKS, countBy, group, sizeToDimension } from './utils';
+
+interface RenderedScatterPlotProps
+  extends Required<Pick<ScatterPlotProps, 'data'>>,
+    Omit<ScatterPlotProps, 'data'> {}
+
+export const RenderedScatterPlot = forwardRef<
+  HTMLDivElement,
+  RenderedScatterPlotProps
+>((props, ref) => {
+  const {
+    isBrushable,
+    className,
+    data: propsData,
+    dotRole,
+    id,
+    isDotSelected,
+    labelDecorator,
+    labelVariant,
+    legendProps,
+    onBrush,
+    onBrushEnd,
+    onDotClick,
+    size,
+    theme,
+    tooltipVariant,
+    variant,
+    xAxisVariant,
+    yAxisVariant,
+    ...forwardedProps
+  } = props;
+
+  const cache = useRef<JSONArray>();
+
+  const data = propsData.filter(
+    (datum) =>
+      datum.value &&
+      typeof datum.key[0] === 'number' &&
+      !Number.isNaN(datum.key[0]) &&
+      typeof datum.key[1] === 'number' &&
+      !Number.isNaN(datum.key[1])
+  );
+
+  useEffect(() => {
+    cache.current = data;
+  });
+
+  const chartDimensions = sizeToDimension(size!);
+  const width = chartDimensions.width;
+  const height = chartDimensions.height;
+  const margins = { top: 16, left: 48, right: 16, bottom: 48 };
+  const chartHeight = height - margins.top - margins.bottom;
+  const chartWidth = width - margins.left - margins.right;
+  const minSize = d3min([chartWidth, chartHeight]) as number;
+
+  const extendedScaleX = (() => {
+    const domain = d3extent(data, (d) => d.key[0]) as [number, number];
+    const gap = domain[1] - domain[0];
+    domain[0] -= gap * 0.1;
+    domain[1] += gap * 0.1;
+    return d3scaleLinear().domain(domain).range([0, chartWidth]).nice();
+  })();
+  const extendedScaleY = (() => {
+    const domain = d3extent(data, (d) => d.key[1]) as [number, number];
+    const gap = domain[1] - domain[0];
+    domain[0] -= gap * 0.1;
+    domain[1] += gap * 0.1;
+    return d3scaleLinear().domain(domain).range([chartHeight, 0]).nice();
+  })();
+
+  const hasCategory =
+    data[0] &&
+    data[0].key.length >= 3 &&
+    data[0].key[2] !== null &&
+    data[0].key[2] !== undefined;
+  const countsByCategory = hasCategory ? countBy(data) : undefined;
+  const colorScale = useColor({
+    data: countsByCategory || data,
+    theme: theme!,
+    category: 'key',
+  });
+
+  const svgRef = useRef<SVGSVGElement>();
+  const brushRef = useRef<d3BrushBehavior<unknown>>();
+  const svgBrushRef = useRef<SVGGElement>();
+  const { scaleX, scaleY, transform } = useZoom({
+    svgRef,
+    scaleX: extendedScaleX,
+    scaleY: extendedScaleY,
+    size,
+    onZoom: () => {
+      if (brushRef.current && svgBrushRef.current) {
+        brushRef.current.clear(d3select(svgBrushRef.current));
+
+        onBrushEnd?.(null);
+      }
+    },
+  });
+  useBrush({
+    brushRef,
+    svgRef: svgBrushRef,
+    extent: [
+      [0, 0],
+      [chartWidth, chartHeight],
+    ],
+    scaleX,
+    scaleY,
+    isBrushable,
+    isGridded: variant === ScatterPlotVariant.gridded,
+    onBrush,
+    onBrushEnd,
+  });
+
+  const circles =
+    variant === ScatterPlotVariant.gridded
+      ? group(data, scaleX, scaleY).sort((a, b) =>
+          d3descending(a.points.length, b.points.length)
+        )
+      : data.map((d) => ({
+          category: d.key[2],
+          x: d.key[0],
+          y: d.key[1],
+          data: {
+            key: d.key,
+            value: 1,
+          },
+          points: [d],
+        }));
+  const globalSize =
+    variant === ScatterPlotVariant.gridded
+      ? d3scaleSqrt()
+          .domain([1, Math.max(d3max(circles, (d) => d.points.length)!, 1)])
+          .range([3, minSize / BASE_NUMBER_OF_TICKS / 2])
+      : undefined;
+  const legendWidth = useRef<string>();
+  if (countsByCategory && !legendWidth.current) {
+    legendWidth.current = `${
+      Math.max(
+        ...countsByCategory.map((d) => d.key.length + String(d.value).length)
+      ) *
+        8 +
+      32
+    }px`;
+  }
+
+  return (
+    <StyledScatterPlot
+      {...forwardedProps}
+      id={id}
+      className={className}
+      ref={ref as RefObject<HTMLDivElement>}
+    >
+      <svg
+        ref={svgRef as RefObject<SVGSVGElement>}
+        width={width}
+        height={height}
+      >
+        <g
+          ref={svgBrushRef as RefObject<SVGGElement>}
+          transform={`translate(${margins.left},${margins.top})`}
+        />
+        <g transform={`translate(${margins.left},${margins.top})`}>
+          <g>
+            {circles.map((circle, index) => {
+              const scaleXDomain = scaleX.domain();
+              const scaleYDomain = scaleY.domain();
+
+              if (
+                circle.x! < scaleXDomain[0] ||
+                circle.x! > scaleXDomain[1] ||
+                circle.y! < scaleYDomain[0] ||
+                circle.y! > scaleYDomain[1]
+              ) {
+                return null;
+              }
+
+              const to = {
+                ...circle,
+                data: {
+                  ...circle.data,
+                  percent: circle.category
+                    ? circle.data.value /
+                      countsByCategory?.find(
+                        ({ key }) => key === circle.category
+                      )?.value!
+                    : undefined,
+                },
+                r:
+                  variant === ScatterPlotVariant.gridded
+                    ? globalSize!(circle.points.length) /
+                      (transform.k < 1 ? transform.k : 1)
+                    : 4,
+              };
+
+              return (
+                <Dot
+                  color={colorScale?.(circle.category!)}
+                  data={to}
+                  isSelected={Boolean(isDotSelected?.(to))}
+                  key={`circle _${index}`}
+                  labelDecorator={labelDecorator}
+                  onClick={onDotClick}
+                  role={dotRole}
+                  scaleX={scaleX}
+                  scaleY={scaleY}
+                  tooltipVariant={tooltipVariant}
+                />
+              );
+            })}
+          </g>
+        </g>
+        <g transform={`translate(${margins.left},${margins.top})`}>
+          <Axis
+            position="left"
+            length={chartHeight}
+            scale={scaleY as AnyScale}
+            x={0}
+            y={0}
+            tickValues={8}
+            variant={xAxisVariant}
+          />
+          <Axis
+            position="bottom"
+            length={chartWidth}
+            scale={scaleX as AnyScale}
+            x={0}
+            y={chartHeight}
+            tickValues={8}
+            variant={yAxisVariant}
+          />
+        </g>
+      </svg>
+      {hasCategory && labelVariant !== ScatterPlotLabelVariant.none ? (
+        <Legend
+          data={countsByCategory!.map((d) => ({
+            ...d,
+            color: colorScale?.(d.key)!,
+          }))}
+          variant={
+            labelVariant === ScatterPlotLabelVariant.externalLabelValue
+              ? LabelVariant.value
+              : labelVariant === ScatterPlotLabelVariant.externalLabelPercent
+              ? LabelVariant.percent
+              : LabelVariant.label
+          }
+          width={legendWidth.current}
+          {...legendProps}
+        />
+      ) : null}
+    </StyledScatterPlot>
+  );
+});

package/src/components/ScatterPlot/ScatterPlot.stories.tsx

@@ -0,0 +1,95 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import mock from '../../../../../.storybook/static/mocks/bakery-trimmed.json';
+
+import { DataVizColorPalette } from '@redsift/design-system';
+import { ScatterPlot } from '.';
+import { ScatterPlotLabelVariant, ScatterPlotVariant } from './types';
+import {
+  ChartSize,
+  ColorTheme,
+  CoordinatesCategoryData,
+  CoordinatesCategoryDim,
+  TooltipVariant,
+} from '../../types';
+import { AxisVariant } from '../Axis';
+
+export 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 ScatterPlot> = {
+  title: 'Charts/ScatterPlot',
+  component: ScatterPlot as any,
+  argTypes: {
+    variant: {
+      options: Object.values(ScatterPlotVariant),
+      control: { type: 'select' },
+    },
+    labelVariant: {
+      options: Object.values(ScatterPlotLabelVariant),
+      control: { type: 'select' },
+    },
+    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',
+      },
+    },
+    xAxisVariant: {
+      options: Object.values(AxisVariant),
+      control: { type: 'select' },
+    },
+    yAxisVariant: {
+      options: Object.values(AxisVariant),
+      control: { type: 'select' },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof ScatterPlot>;
+
+const data: CoordinatesCategoryData = mock.map((d) => ({
+  key: [+d.x!, +d.y!, d.Items] as CoordinatesCategoryDim,
+  value: 1,
+}));
+
+export const Controls: Story = {
+  args: {
+    title: 'Scatter Plot',
+    variant: 'gridded',
+    labelVariant: 'externalLabelValue',
+    tooltipVariant: 'value',
+    size: 'medium',
+    theme: 'default',
+    isBrushable: true,
+    xAxisVariant: 'default',
+    yAxisVariant: 'default',
+    data: data,
+  },
+};