@redsift/charts 8.0.1 → 8.0.3

package/src/components/PieChart/index.ts

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

package/src/components/PieChart/styles.ts

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

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

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

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

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

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

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