@redsift/charts 9.2.3 → 9.2.4

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,95 +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-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

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

@@ -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,321 +0,0 @@
-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>
-  );
-});