@redsift/charts 9.2.3-patch → 9.2.3

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,95 @@
+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-poppins);
+    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-poppins);
+      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-poppins);
+    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-poppins);
+    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,94 @@
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+import { PieArcDatum as d3PieArcDatum } from 'd3-shape';
+import {
+  ChartDimensions,
+  ChartSize,
+  ChartTheme,
+  ArcDatum,
+  TooltipVariant,
+  CategoryData,
+  CategoryDatum,
+} from '../../types';
+import { ValueOf } from '@redsift/design-system';
+import { ArcProps } from '../Arc';
+import { ChartContainerProps } from '../ChartContainer';
+import { LegendProps } from '../Legend';
+
+/**
+ * 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;
+  /** Props to forward to the Legend block. Can be used to make the legend selectable. */
+  legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'>;
+  /** 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 | ReactElement | ((data: d3PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
+  /** 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 | ReactElement | ((data: d3PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
+  /** Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. */
+  text?: string | ReactElement | ((data: d3PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
+  /** 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,321 @@
+import React, { forwardRef, RefObject, useEffect, useRef, useState } 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, AxisVariant } from '../Axis';
+import { Legend } from '../Legend';
+import { Dot } from '../Dot';
+import { BASE_NUMBER_OF_TICKS, countBy, group, sizeToDimension } from './utils';
+import { Button, Flexbox, Text } from '@redsift/design-system';
+import { StyledChartContainerCaption } from '../ChartContainer';
+import { mdiChevronDown, mdiChevronRight, mdiMouse } from '@redsift/icons';
+import { Popover } from '@redsift/popovers';
+
+interface RenderedScatterPlotProps extends Required<Pick<ScatterPlotProps, 'data'>>, Omit<ScatterPlotProps, 'data'> {}
+
+export const RenderedScatterPlot = forwardRef<HTMLDivElement, RenderedScatterPlotProps>((props, ref) => {
+  const {
+    isBrushable,
+    caption,
+    className,
+    data: propsData,
+    dotRole,
+    hideControlKeyPanel,
+    id,
+    isDotSelected,
+    labelDecorator,
+    labelVariant,
+    legendProps,
+    onBrush,
+    onBrushEnd,
+    onDotClick,
+    size,
+    theme,
+    tooltipVariant,
+    variant,
+    xAxisVariant,
+    xAxisPlacement,
+    yAxisVariant,
+    yAxisPlacement,
+    ...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: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8,
+    left: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    right: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    bottom: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8,
+  };
+  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`;
+  }
+
+  const [isKeyPanelOpen, setIsKeyPanelOpen] = useState(false);
+
+  return (
+    <StyledScatterPlot {...forwardedProps} id={id} className={className} ref={ref as RefObject<HTMLDivElement>}>
+      <Flexbox flexDirection="column" alignItems="center" gap="8">
+        {!hideControlKeyPanel ? (
+          <Flexbox width={width} position="absolute">
+            <Flexbox
+              flexDirection="column"
+              alignItems="flex-end"
+              position="absolute"
+              top={`${margins.top + 16}px`}
+              right={`${margins.right + 16}px`}
+            >
+              <Popover placement="bottom-end" isOpen={isKeyPanelOpen} onOpen={setIsKeyPanelOpen}>
+                <Popover.Trigger>
+                  <Button
+                    variant="secondary"
+                    leftIcon={mdiMouse}
+                    rightIcon={isKeyPanelOpen ? mdiChevronDown : mdiChevronRight}
+                    color="question"
+                    style={{
+                      border: '1px solid var(--redsift-color-neutral-midgrey)',
+                      gap: '4px',
+                    }}
+                  />
+                </Popover.Trigger>
+                <Popover.Content flexDirection="column" alignItems="flex-start">
+                  <Text margin="8px 16px 0" fontSize="13px">
+                    Zoom - Mouse wheel
+                  </Text>
+                  <Text margin="0 16px" fontSize="13px">
+                    Pan - Left click and drag
+                  </Text>
+                  <Text margin="0 16px 8px" fontSize="13px">
+                    Select - Hold shift, left click and drag
+                  </Text>
+                </Popover.Content>
+              </Popover>
+            </Flexbox>
+          </Flexbox>
+        ) : null}
+        <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})`}>
+            {['bottom', 'both'].includes(xAxisPlacement!) ? (
+              <Axis
+                position="bottom"
+                length={chartWidth}
+                scale={scaleX as AnyScale}
+                x={0}
+                y={chartHeight}
+                tickValues={8}
+                variant={xAxisVariant}
+              />
+            ) : null}
+            {['top', 'both'].includes(xAxisPlacement!) ? (
+              <Axis
+                position="top"
+                length={chartWidth}
+                scale={scaleX as AnyScale}
+                x={0}
+                y={0}
+                tickValues={8}
+                variant={xAxisVariant}
+              />
+            ) : null}
+            {['left', 'both'].includes(yAxisPlacement!) ? (
+              <Axis
+                position="left"
+                length={chartHeight}
+                scale={scaleY as AnyScale}
+                x={0}
+                y={0}
+                tickValues={8}
+                variant={yAxisVariant}
+              />
+            ) : null}
+            {['right', 'both'].includes(yAxisPlacement!) ? (
+              <Axis
+                position="right"
+                length={chartHeight}
+                scale={scaleY as AnyScale}
+                x={chartWidth}
+                y={0}
+                tickValues={8}
+                variant={yAxisVariant}
+              />
+            ) : null}
+          </g>
+        </svg>
+        <StyledChartContainerCaption width={chartWidth - 48}>{caption}</StyledChartContainerCaption>
+      </Flexbox>
+      {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>
+  );
+});