@redsift/charts 8.0.1 → 8.0.2

package/src/components/ScatterPlot/index.ts

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

package/src/components/ScatterPlot/styles.ts

@@ -1,37 +0,0 @@
-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-raleway);
-    color: var(--redsift-color-neutral-black);
-    font-size: ${({ $textSize }) => $textSize}px;
-    line-height: ${({ $textSize }) => $textSize}px;
-  }
-`;

package/src/components/ScatterPlot/types.ts

@@ -1,97 +0,0 @@
-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 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;
-  /** Y axis variant. */
-  yAxisVariant?: AxisVariant;
-}
-
-export type StyledScatterPlotProps = ScatterPlotProps & {};

package/src/components/ScatterPlot/utils.ts

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

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

package/src/hooks/index.ts

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

package/src/hooks/useBrush.tsx

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

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

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

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

@@ -1,15 +0,0 @@
-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';