@redsift/charts 9.2.3-patch → 9.2.3

package/src/components/ScatterPlot/index.ts

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

package/src/components/ScatterPlot/styles.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { StyledScatterPlotProps } from './types';
+import { ChartContainer } from '../ChartContainer';
+
+/**
+ * Component style.
+ */
+export const StyledScatterPlot = styled(ChartContainer)<StyledScatterPlotProps>``;
+
+export const StyledScatterPlotEmptyText = styled.div<{
+  $maxWidth: number;
+  $textSize: 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;
+  }
+
+  > span {
+    font-family: var(--redsift-typography-font-family-poppins);
+    color: var(--redsift-color-neutral-black);
+    font-size: ${({ $textSize }) => $textSize}px;
+    line-height: ${({ $textSize }) => $textSize}px;
+  }
+`;

package/src/components/ScatterPlot/types.ts

@@ -0,0 +1,103 @@
+import {
+  ChartDimensions,
+  ChartSize,
+  ChartTheme,
+  TooltipVariant,
+  DotDatum,
+  CoordinatesCategoryData,
+} from '../../types';
+import { ValueOf } from '@redsift/design-system';
+import { ChartContainerProps } from '../ChartContainer';
+import { MutableRefObject, ReactNode } from 'react';
+import { DotProps } from '../Dot';
+import { ScaleLinear as d3ScaleLinear } from 'd3';
+import { AxisVariant } from '../Axis';
+import { LegendProps } from '../Legend';
+
+/**
+ * Component variant.
+ */
+export const ScatterPlotVariant = {
+  default: 'default',
+  gridded: 'gridded',
+} as const;
+export type ScatterPlotVariant = ValueOf<typeof ScatterPlotVariant>;
+
+/**
+ * Component's labels variant.
+ */
+export const ScatterPlotLabelVariant = {
+  none: 'none',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent',
+} as const;
+export type ScatterPlotLabelVariant = ValueOf<typeof ScatterPlotLabelVariant>;
+
+interface LocaleText {
+  emptyChartText: string;
+}
+
+export type ScatterPlotDimensions = ChartDimensions & {
+  fontSize: number;
+};
+
+/**
+ * Component props.
+ */
+export interface ScatterPlotProps extends ChartContainerProps {
+  /** Dataset to use to generate the chart. */
+  data?: CoordinatesCategoryData;
+  /** Slice role. Used to indicate that dots are to be considered buttons or links. If an onClick is provided, the dots will have the role `button` unless specifically set to `link` with this prop. */
+  dotRole?: DotProps['role'];
+  /** Component to use if the chart is empty (replacing the default one). */
+  emptyComponent?: ReactNode;
+  /** Whether the Control Keys panel is displayed or not. */
+  hideControlKeyPanel?: boolean;
+  /** Whether the scatter plot dots are selectable using brush or not. */
+  isBrushable?: boolean;
+  /** Method to determine whether a dot is selected or not. */
+  isDotSelected?: (datum: DotDatum) => boolean | undefined;
+  /** Method to override the data labels. */
+  labelDecorator?: (datum: DotDatum) => string;
+  /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
+  labelVariant?: ScatterPlotLabelVariant;
+  /** 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 called on brush. */
+  onBrush?: (
+    selection: [[number, number], [number, number]] | null,
+    scaleX: d3ScaleLinear<number, number>,
+    scaleY: d3ScaleLinear<number, number>
+  ) => void;
+  /** Method called on brush end. */
+  onBrushEnd?: (
+    selection: [[number, number], [number, number]] | null,
+    scaleX?: d3ScaleLinear<number, number>,
+    scaleY?: d3ScaleLinear<number, number>
+  ) => void;
+  /** Method to be called on a click on a dot. */
+  onDotClick?: (datum: DotDatum) => void;
+  /** ScatterPlot size. */
+  size?: ChartSize | ScatterPlotDimensions;
+  /** Reference to the SVG tag. */
+  svgRef?: MutableRefObject<SVGSVGElement>;
+  /** 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;
+  /** Tooltip variant. */
+  tooltipVariant?: TooltipVariant;
+  /** Variant. */
+  variant?: ScatterPlotVariant;
+  /** X axis variant. */
+  xAxisVariant?: AxisVariant;
+  /** X axis placement. */
+  xAxisPlacement?: 'bottom' | 'top' | 'both';
+  /** Y axis variant. */
+  yAxisVariant?: AxisVariant;
+  /** Y axis placement. */
+  yAxisPlacement?: 'right' | 'left' | 'both';
+}
+
+export type StyledScatterPlotProps = ScatterPlotProps & {};

package/src/components/ScatterPlot/utils.ts

@@ -0,0 +1,101 @@
+import { ScaleLinear as d3ScaleLinear } from 'd3';
+
+import { CoordinatesCategoryData, CoordinatesCategoryDatum } from '../../types';
+
+import { ChartSize } from '../../types';
+import { ScatterPlotDimensions } from './types';
+
+export const sizeToDimension = (
+  size: ChartSize | ScatterPlotDimensions
+): ScatterPlotDimensions => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+
+  switch (size) {
+    case ChartSize.small:
+      return { width: 600, height: 300, fontSize: 30 };
+    case ChartSize.medium:
+    default:
+      return { width: 750, height: 375, fontSize: 34 };
+    case ChartSize.large:
+      return { width: 900, height: 450, fontSize: 38 };
+  }
+};
+
+export const BASE_NUMBER_OF_TICKS = 20;
+
+export const getClosestLineIndex = (
+  value: number,
+  scale: d3ScaleLinear<number, number, never>
+) => {
+  const ticks = scale.ticks(BASE_NUMBER_OF_TICKS);
+  const delta = ticks[1] - ticks[0];
+  const index = Math.round(value / delta);
+  const roundValue = index * delta;
+  return [index, roundValue];
+};
+
+export const group = (
+  data: CoordinatesCategoryData,
+  x: d3ScaleLinear<number, number, never>,
+  y: d3ScaleLinear<number, number, never>
+) => {
+  const groupDict: Record<
+    string,
+    {
+      category: string;
+      x: number;
+      y: number;
+      data: CoordinatesCategoryDatum;
+      points: CoordinatesCategoryData;
+    }
+  > = {};
+
+  data.forEach((d) => {
+    const [i, rx] = getClosestLineIndex(d.key[0], x);
+    const [j, ry] = getClosestLineIndex(d.key[1], y);
+
+    const key = `${i}_${j}_${d.key[2]}`;
+    if (!(key in groupDict)) {
+      groupDict[key] = {
+        category: d.key[2] as string,
+        x: rx,
+        y: ry,
+        data: {
+          key: d.key,
+          value: 0,
+        },
+        points: [],
+      };
+    }
+
+    groupDict[key].points.push(d);
+    groupDict[key].data.value += 1;
+  });
+
+  return Object.values(groupDict);
+};
+
+export const countBy = (arr: CoordinatesCategoryData) => {
+  const counts = arr.reduce(
+    (prev, curr) => (
+      (prev[curr.key[2] as string] =
+        ++(prev[curr.key[2] as string] as number) || 1),
+      prev
+    ),
+    {} as Record<string, number>
+  );
+
+  return Object.keys(counts)
+    .map((key) => ({ key: key, value: counts[key] as number }))
+    .sort((a, b) =>
+      a.value === b.value
+        ? a.key > b.key
+          ? 1
+          : -1
+        : a.value < b.value
+        ? 1
+        : -1
+    );
+};

package/src/config.ts

@@ -0,0 +1,10 @@
+import { easings } from '@react-spring/web';
+
+export const config = (() => ({
+  config: {
+    duration: 700,
+    easing: easings.easeInOutQuad,
+  },
+  reset: true,
+  immediate: false,
+}))();

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useBrush';
+export * from './useColor';
+export * from './useFormatCategoricalData';
+export * from './useZoom';

package/src/hooks/useBrush.tsx

@@ -0,0 +1,115 @@
+import { MutableRefObject, useEffect, useRef } from 'react';
+import {
+  BrushBehavior as d3BrushBehavior,
+  brush as d3brush,
+  ScaleLinear as d3ScaleLinear,
+  select as d3select,
+} from 'd3';
+
+export interface UseBrushProps {
+  brushRef: MutableRefObject<d3BrushBehavior<unknown> | undefined>;
+  svgRef: MutableRefObject<SVGSVGElement | SVGGElement | undefined>;
+  extent?: [[number, number], [number, number]];
+  scaleX: d3ScaleLinear<number, number>;
+  scaleY: d3ScaleLinear<number, number>;
+  isBrushable?: boolean;
+  isGridded?: boolean;
+  onBrush?: (
+    selection: [[number, number], [number, number]] | null,
+    scaleX: d3ScaleLinear<number, number>,
+    scaleY: d3ScaleLinear<number, number>
+  ) => void;
+  onBrushEnd?: (
+    selection: [[number, number], [number, number]] | null,
+    scaleX: d3ScaleLinear<number, number>,
+    scaleY: d3ScaleLinear<number, number>
+  ) => void;
+}
+
+const getRoundedIntermediaryPoint = (
+  selection: [[number, number], [number, number]],
+  scaleX: d3ScaleLinear<number, number>,
+  scaleY: d3ScaleLinear<number, number>
+) => {
+  if (!selection) {
+    return null;
+  }
+
+  const xTicks = scaleX.ticks(20);
+  const xDelta = xTicks[1] - xTicks[0];
+  const yTicks = scaleY.ticks(20);
+  const yDelta = yTicks[1] - yTicks[0];
+
+  return [
+    [
+      scaleX(
+        Math.round(scaleX.invert(selection[0][0]) / xDelta) * xDelta -
+          xDelta / 2
+      ),
+      scaleY(
+        Math.round(scaleY.invert(selection[0][1]) / yDelta) * yDelta -
+          yDelta / 2
+      ),
+    ],
+    [
+      scaleX(
+        Math.round(scaleX.invert(selection[1][0]) / xDelta) * xDelta -
+          xDelta / 2
+      ),
+
+      scaleY(
+        Math.round(scaleY.invert(selection[1][1]) / yDelta) * yDelta -
+          yDelta / 2
+      ),
+    ],
+  ] as [[number, number], [number, number]];
+};
+
+export const useBrush = ({
+  brushRef: propsBrushRef,
+  svgRef,
+  extent,
+  scaleX,
+  scaleY,
+  isBrushable,
+  isGridded,
+  onBrush,
+  onBrushEnd,
+}: UseBrushProps) => {
+  const brushRef = propsBrushRef || useRef<d3BrushBehavior<unknown>>();
+
+  useEffect(() => {
+    if (svgRef.current && isBrushable) {
+      brushRef.current = d3brush()
+        .extent(extent!)
+        .keyModifiers(false)
+        .filter((event) => event.shiftKey)
+        .on('brush', (event) => {
+          if (!event.sourceEvent || !brushRef.current || !svgRef.current)
+            return;
+
+          if (isGridded) {
+            const selection = getRoundedIntermediaryPoint(
+              event.selection,
+              scaleX,
+              scaleY
+            );
+            d3select(svgRef.current).call(
+              brushRef.current.move as any,
+              selection
+            );
+            onBrush?.(selection, scaleX, scaleY);
+          } else {
+            onBrush?.(event.selection, scaleX, scaleY);
+          }
+        })
+        .on('end', (event) => {
+          if (!event.sourceEvent || !brushRef.current || !svgRef.current)
+            return;
+
+          onBrushEnd?.(event.selection, scaleX, scaleY);
+        });
+      d3select(svgRef.current).call(brushRef.current as any);
+    }
+  });
+};

package/src/hooks/useColor.tsx

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { ScaleOrdinal as d3ScaleOrdinal } from 'd3';
+import { getColorScale } from '../scheme';
+import { ChartTheme, JSONArray } from '../types';
+
+export interface UseColorProps {
+  /** Dataset to use to generate the chart. */
+  data: JSONArray;
+  /** Theme. */
+  theme: ChartTheme;
+  /** Name of the field that will be used to categorize the data. */
+  category: string;
+}
+
+export const useColor = ({ data, theme, category }: UseColorProps) => {
+  const colorScale = useMemo<d3ScaleOrdinal<string, string>>(
+    () =>
+      getColorScale(
+        theme,
+        data.map((d) => d[category] as string)
+      ),
+    [theme]
+  );
+
+  return colorScale;
+};

package/src/hooks/useFormatCategoricalData.tsx

@@ -0,0 +1,68 @@
+import { useMemo } from 'react';
+import { CategoryData, ChartTheme } from '../types';
+import { useColor } from './useColor';
+
+export interface UseFormatCategoricalDataProps {
+  /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
+  data: CategoryData;
+  /** Theme. */
+  theme: ChartTheme;
+  /** Number of categories to use, the rest being put into a new category called "Others". */
+  caping?: number;
+  /** 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;
+}
+
+export const useFormatCategoricalData = ({
+  data,
+  caping,
+  others,
+  theme,
+}: UseFormatCategoricalDataProps) => {
+  const computedData = useMemo(() => {
+    let computedData;
+
+    if (data === undefined || data === null) {
+      return undefined;
+    }
+
+    computedData = [...data!].sort((a, b) =>
+      a.value === b.value
+        ? a.key > b.key
+          ? 1
+          : -1
+        : a.value < b.value
+        ? 1
+        : -1
+    );
+
+    if (caping) {
+      if (typeof others === 'boolean' && !others) {
+        computedData = computedData.slice(0, caping);
+      } else {
+        computedData = computedData.reduce<CategoryData>((acc, curr, index) => {
+          if (index < caping) {
+            acc[index] = curr;
+          } else if (index === caping) {
+            acc[index] = {
+              key: typeof others === 'string' ? others : 'Others',
+              value: curr.value,
+            };
+          } else {
+            acc[caping] = {
+              ...acc[caping],
+              value: acc[caping].value + curr.value,
+            };
+          }
+          return acc;
+        }, []);
+      }
+    }
+
+    return computedData;
+  }, [data, caping]);
+
+  const colorScale = useColor({ data: computedData!, theme, category: 'key' });
+
+  return { data: computedData as CategoryData, colorScale };
+};

package/src/hooks/useZoom.tsx

@@ -0,0 +1,50 @@
+import { MutableRefObject, useEffect, useRef, useState } from 'react';
+import {
+  zoom as d3zoom,
+  interpolateRound as d3interpolateRound,
+  ScaleLinear as d3ScaleLinear,
+  select as d3select,
+} from 'd3';
+
+export interface UseZoomProps {
+  svgRef: MutableRefObject<SVGSVGElement | undefined>;
+  scaleX: d3ScaleLinear<number, number>;
+  scaleY: d3ScaleLinear<number, number>;
+  defaultTransform?: { k: number; x: number; y: number };
+  size?: any;
+  onZoom?: () => void;
+}
+
+export const useZoom = ({
+  svgRef,
+  scaleX,
+  scaleY,
+  defaultTransform = { k: 1, x: 0, y: 0 },
+  size,
+  onZoom,
+}: UseZoomProps) => {
+  const zx = useRef<d3ScaleLinear<number, number>>(scaleX);
+  const zy = useRef<d3ScaleLinear<number, number>>(scaleY);
+  const [transform, setTransform] = useState(defaultTransform);
+
+  useEffect(() => {
+    if (svgRef.current) {
+      const zoom = d3zoom()
+        .filter((event) => !event.shiftKey)
+        .scaleExtent([1 / 2 ** 3, 2 ** 3])
+        .on('zoom', (event) => {
+          onZoom?.();
+          zx.current = event.transform
+            .rescaleX(scaleX)
+            .interpolate(d3interpolateRound);
+          zy.current = event.transform
+            .rescaleY(scaleY)
+            .interpolate(d3interpolateRound);
+          setTransform(event.transform);
+        });
+      d3select(svgRef.current).call(zoom as any);
+    }
+  }, [svgRef.current, size]);
+
+  return { transform, scaleX: zx.current, scaleY: zy.current };
+};

package/src/index.ts

@@ -0,0 +1,15 @@
+export * from './hooks';
+export * from './types';
+export * from './scheme';
+
+export * from './components/Arc';
+export * from './components/Arcs';
+export * from './components/Axis';
+export * from './components/Bar';
+export * from './components/BarChart';
+export * from './components/ChartContainer';
+export * from './components/DataPoint';
+export * from './components/Dot';
+export * from './components/Legend';
+export * from './components/PieChart';
+export * from './components/ScatterPlot';