@redsift/charts 7.8.1 → 8.0.0-alpha.1

package/index.d.ts

@@ -1,9 +1,120 @@
-import { PieArcDatum as PieArcDatum$1 } from 'd3-shape';
+import { BrushBehavior, ScaleLinear as ScaleLinear$1, ScaleOrdinal, Arc as Arc$1 } from 'd3';
 import * as _redsift_design_system from '@redsift/design-system';
-import { ValueOf, Comp } from '@redsift/design-system';
-import { ScaleOrdinal, ScaleLinear } from 'd3';
-import { ComponentProps } from 'react';
+import { ValueOf, Comp, StylingProps } from '@redsift/design-system';
+import { MutableRefObject, ComponentProps, ReactElement, ReactNode } from 'react';
+import { PieArcDatum } from 'd3-shape';
+import * as d3_scale from 'd3-scale';
+import { ScaleLinear as ScaleLinear$2, ScaleLogarithmic, ScaleSymLog, ScalePoint as ScalePoint$1, ScaleBand as ScaleBand$1, ScaleTime as ScaleTime$1 } from 'd3-scale';
 import * as styled_components from 'styled-components';
+import * as _react_spring_web from '@react-spring/web';
+
+interface UseBrushProps {
+    brushRef: MutableRefObject<BrushBehavior<unknown> | undefined>;
+    svgRef: MutableRefObject<SVGSVGElement | SVGGElement | undefined>;
+    extent?: [[number, number], [number, number]];
+    scaleX: ScaleLinear$1<number, number>;
+    scaleY: ScaleLinear$1<number, number>;
+    isBrushable?: boolean;
+    isGridded?: boolean;
+    onBrush?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear$1<number, number>, scaleY: ScaleLinear$1<number, number>) => void;
+    onBrushEnd?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear$1<number, number>, scaleY: ScaleLinear$1<number, number>) => void;
+}
+declare const useBrush: ({ brushRef: propsBrushRef, svgRef, extent, scaleX, scaleY, isBrushable, isGridded, onBrush, onBrushEnd, }: UseBrushProps) => void;
+
+type JSONValue = string | number | boolean | {
+    [x: string]: JSONValue;
+} | Array<JSONValue> | undefined | null;
+type JSONObject = {
+    [x: string]: JSONValue;
+};
+type JSONArray = Array<JSONObject>;
+type Datum<T> = {
+    key: T;
+    value: number;
+    percent?: number;
+};
+type CategoryDim = string;
+type CoordinatesCategoryDim = [
+    number,
+    number,
+    string | undefined | null
+];
+type CategoryDatum = Datum<CategoryDim>;
+type CoordinatesCategoryDatum = Datum<CoordinatesCategoryDim>;
+type CategoryData = CategoryDatum[];
+type CoordinatesCategoryData = CoordinatesCategoryDatum[];
+type ArcDatum = PieArcDatum<CategoryDatum>;
+type BarDatum = {
+    data: CategoryDatum;
+    height?: number;
+    width?: number;
+};
+type DotDatum = {
+    data: CoordinatesCategoryDatum;
+    x: number;
+    y: number;
+    r: number;
+};
+
+/** TOOLTIP */
+declare const TooltipVariant: {
+    none: string;
+    label: string;
+    value: string;
+    percent: string;
+};
+type TooltipVariant = ValueOf<typeof TooltipVariant>;
+/** LEGEND */
+declare const LabelVariant: {
+    readonly label: "label";
+    readonly value: "value";
+    readonly percent: "percent";
+};
+type LabelVariant = ValueOf<typeof LabelVariant>;
+
+type Coordinates = {
+    x: number;
+    y: number;
+};
+type NumericValue = {
+    valueOf(): number;
+};
+type StringValue = {
+    toString(): string;
+};
+type ScaleValue = NumericValue | StringValue | Date;
+interface ScaleLinear<Output> extends ScaleLinear$2<number, Output, never> {
+    type: 'linear';
+    stacked: boolean;
+}
+interface ScaleLog extends ScaleLogarithmic<number, number> {
+    type: 'log';
+}
+interface ScaleSymlog extends ScaleSymLog<number, number> {
+    type: 'symlog';
+}
+interface ScalePoint<Input extends StringValue> extends ScalePoint$1<Input> {
+    type: 'point';
+}
+interface ScaleBand<Input extends StringValue> extends ScaleBand$1<Input> {
+    type: 'band';
+}
+interface ScaleTime<Input> extends ScaleTime$1<Input, number> {
+    type: 'time';
+    useUTC: boolean;
+}
+interface ScaleTypeToScale<Input, Output> {
+    linear: Input extends NumericValue ? ScaleLinear<Output> : never;
+    log: Input extends NumericValue ? ScaleLog : never;
+    symlog: Input extends NumericValue ? ScaleSymlog : never;
+    point: Input extends StringValue ? ScalePoint<Input> : never;
+    band: Input extends StringValue ? ScaleBand<Input> : never;
+    time: Input extends StringValue | Date ? ScaleTime<Input> : never;
+}
+type Scale<Input, Output> = ScaleTypeToScale<Input, Output>[keyof ScaleTypeToScale<Input, Output>];
+type AnyScale = Scale<any, any>;
+type ScaleWithBandwidth = ScaleBand<any> | ScalePoint<any>;
+type TicksSpec = number | string | ScaleValue[];
 
 type ChartDimensions = {
     width: number;
@@ -13,15 +124,21 @@ type ChartDimensions = {
     marginBottom?: number;
     marginLeft?: number;
 };
-type Datum = {
-    name: string;
-    value: number;
+declare const ChartSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
 };
-type PieArcDatum = PieArcDatum$1<Datum>;
+type ChartSize = ValueOf<typeof ChartSize>;
+
 declare const ColorTheme: {
     readonly default: "default";
     readonly dark: "dark";
     readonly darker: "darker";
+    readonly darkerer: "darkerer";
+    readonly light: "light";
+    readonly lighter: "lighter";
+    readonly lighterer: "lighterer";
     readonly monochrome: "monochrome";
 };
 type ColorTheme = ValueOf<typeof ColorTheme>;
@@ -31,14 +148,65 @@ type SuccessDangerColorTheme = {
     danger: string;
     neutral?: string;
 };
+type CustomColorTheme = Record<string, string>;
+type ChartTheme = ColorTheme | SuccessDangerColorTheme | CustomColorTheme;
+
+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;
+}
+declare const useColor: ({ data, theme, category }: UseColorProps) => ScaleOrdinal<string, string, never> | undefined;
+
+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;
+}
+declare const useFormatCategoricalData: ({ data, caping, others, theme, }: UseFormatCategoricalDataProps) => {
+    data: CategoryData;
+    colorScale: d3_scale.ScaleOrdinal<string, string, never> | undefined;
+};
 
-declare const monochrome = "#B6DAEE";
+interface UseZoomProps {
+    svgRef: MutableRefObject<SVGSVGElement | undefined>;
+    scaleX: ScaleLinear$1<number, number>;
+    scaleY: ScaleLinear$1<number, number>;
+    defaultTransform?: {
+        k: number;
+        x: number;
+        y: number;
+    };
+    onZoom?: () => void;
+}
+declare const useZoom: ({ svgRef, scaleX, scaleY, defaultTransform, onZoom, }: UseZoomProps) => {
+    transform: {
+        k: number;
+        x: number;
+        y: number;
+    };
+    scaleX: ScaleLinear$1<number, number, never>;
+    scaleY: ScaleLinear$1<number, number, never>;
+};
+
+declare const monochrome = "#73C5EB";
+declare const empty = "#BFBFBF";
 declare const scheme: {
     default: string[];
     dark: string[];
     darker: string[];
+    darkerer: string[];
     light: string[];
     lighter: string[];
+    lighterer: string[];
     monochrome: string[];
     empty: string[];
 };
@@ -48,123 +216,259 @@ declare const successDangerScheme: {
     danger: string;
     neutral: string;
 };
-declare const getColorScale: (theme: ColorTheme | SuccessDangerColorTheme, isEmpty?: boolean) => ScaleOrdinal<string, string>;
+declare const getColorScale: (theme: ChartTheme, domain?: string[], isEmpty?: boolean) => ScaleOrdinal<string, string>;
 
 /**
- * Component size.
+ * Component props.
  */
-declare const HorizontalBarChartSize: {
-    readonly small: "small";
-    readonly medium: "medium";
-    readonly large: "large";
+interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale'> {
+    /** Color of the DataPoint. */
+    color?: string;
+    /** Data. Also state to which the component should end the animation, if any. */
+    data: T;
+    /** Id. Used for accessibility. */
+    id?: string;
+    /** Position in the list of siblings. Used for placement and selection. */
+    index?: number;
+    /** Whether the component is selected or not. Used only if the component is selectable. Set to `undefined` to make nor selected nor unselected. */
+    isSelected?: boolean;
+    /** Method modifying the label before displaying it. */
+    labelDecorator?: (data: T) => string;
+    /** Method called when a click or keydown occurs on the component. */
+    onClick?: (data: T) => void;
+    /** State from which the component should start the animation, if any. */
+    previousData?: T;
+    /** Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable. */
+    role?: 'button' | 'link' | 'option';
+    /** Tooltip variant. */
+    tooltipVariant?: TooltipVariant;
+}
+type StyledDataPointProps = Omit<DataPointProps<any>, 'data'> & {
+    $clickable: boolean;
 };
-type HorizontalBarChartSize = ValueOf<typeof HorizontalBarChartSize>;
+
 /**
- * Component theme.
+ * Component props.
  */
-declare const HorizontalBarChartTheme: {
-    readonly default: "default"; /**
-     * Component theme.
-     */
-    readonly dark: "dark";
-    readonly darker: "darker";
-    readonly monochrome: "monochrome";
+interface ArcProps extends DataPointProps<ArcDatum> {
+    /** Arc generator used to determine the width of the arc. */
+    createArc: Arc$1<any, ArcDatum>;
+    /** Whether the arc has a stroke or not. Used to create a gap between two siblings. */
+    hasStroke?: boolean;
+}
+type StyledArcProps = StyledDataPointProps & Omit<ArcProps, 'createArc'> & {
+    $hasStroke: ArcProps['hasStroke'];
 };
-type HorizontalBarChartTheme = ValueOf<typeof HorizontalBarChartTheme>;
+
+declare const Arc: Comp<ArcProps, SVGGElement>;
+
 /**
- * Tooltip label variant.
+ * Component style.
  */
-declare const HorizontalBarChartTooltipVariant: {
-    none: string;
-    label: string;
-    value: string;
-    percent: string;
+declare const StyledArc: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data"> & {
+    $clickable: boolean;
+} & Omit<ArcProps, "createArc"> & {
+    $hasStroke: boolean | undefined;
+}, never>;
+
+/**
+ * Component props.
+ */
+interface ArcsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'>, Pick<ArcProps, 'id' | 'labelDecorator' | 'onClick' | 'role' | 'hasStroke' | 'tooltipVariant'> {
+    /** Arc props. */
+    arcs: Omit<ArcProps, 'ref'>[];
+    /** Whether arcs have internal labels or not. */
+    hasLabels?: boolean;
+}
+type StyledArcsProps = Omit<ArcsProps, 'arcs'> & {};
+
+declare const Arcs: Comp<ArcsProps, SVGGElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledArcs: styled_components.StyledComponent<"g", any, Omit<ArcsProps, "arcs">, never>;
+
+/**
+ * Component variant.
+ */
+declare const AxisPosition: {
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
 };
-type HorizontalBarChartTooltipVariant = ValueOf<typeof HorizontalBarChartTooltipVariant>;
-interface LocaleText$1 {
+type AxisPosition = ValueOf<typeof AxisPosition>;
+/**
+ * Component props.
+ */
+interface AxisProps extends Omit<ComponentProps<'g'>, 'scale'> {
+    areLabelsRotated?: boolean;
+    format?: string;
+    legend?: string;
+    legendOffset?: number;
+    legendPosition?: 'start' | 'middle' | 'end';
+    /** Length of the axis. */
+    length?: number;
+    /** Position of axis. top|bottom means this is an x axis, right|left means this is an y axis. */
+    position?: AxisPosition;
+    /** Scale (d3.js) used to generate the axis. */
+    scale: AnyScale;
+    tickPadding?: number;
+    tickRotation?: number;
+    tickSize?: number;
+    tickValues?: TicksSpec;
+    /** X position. */
+    x?: number;
+    /** Y position. */
+    y?: number;
+}
+type StyledAxisProps = Omit<AxisProps, 'areXLabelsRotated' | 'size' | 'scale'> & {};
+
+declare const Axis: Comp<AxisProps, SVGGElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledAxis: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<AxisProps, "size" | "scale" | "areXLabelsRotated">, never>;
+
+/**
+ * Component variant.
+ */
+declare const BarOrientation: {
+    horizontal: string;
+    vertical: string;
+};
+type BarOrientation = ValueOf<typeof BarOrientation>;
+/**
+ * Component props.
+ */
+interface BarProps extends DataPointProps<BarDatum> {
+    /** Gap between two siblings. */
+    gap?: number;
+    /** Height of the bar in horizontal orientation. */
+    height?: number;
+    /** Orientation of the bar. */
+    orientation?: BarOrientation;
+    /** A linear continuous scale defined over a numeric domain used to determine the width or height of the bar (depending on the orientation). */
+    scale: ScaleLinear$1<number, number, never>;
+    /** Width of the bar in vertical orientation. */
+    width?: number;
+}
+type StyledBarProps = StyledDataPointProps & Omit<BarProps, 'scale'>;
+
+declare const Bar: Comp<BarProps, SVGGElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledBar: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data"> & {
+    $clickable: boolean;
+} & Omit<BarProps, "scale">, never>;
+
+/**
+ * Component props.
+ */
+interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, StylingProps {
+    /** Caption. */
+    caption?: string;
+    /** Id. */
+    id?: string;
+    /** Method called when the Reset button is displayed (defines whether or not the button should be displayed). */
+    onReset?: () => void;
+    /** Title. */
+    title?: string | ReactElement;
+}
+type StyledChartContainerProps = ChartContainerProps & {};
+
+declare const ChartContainer: Comp<ChartContainerProps, HTMLDivElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledChartContainer: styled_components.StyledComponent<"div", any, ChartContainerProps, never>;
+declare const StyledChartContainerTitle: styled_components.StyledComponent<_redsift_design_system.Comp<_redsift_design_system.FlexboxProps, HTMLDivElement>, any, ChartContainerProps, never>;
+declare const StyledChartContainerCaption: styled_components.StyledComponent<"p", any, ChartContainerProps, never>;
+
+/**
+ * Component props.
+ */
+interface LegendProps extends ComponentProps<'ul'> {
+    /** Data. */
+    data: (CategoryDatum & {
+        color: string;
+    })[];
+    /** Variant. */
+    variant?: LabelVariant;
+    /** Width. */
+    width?: string;
+}
+type StyledLegendProps = Omit<LegendProps, 'data'> & {
+    $width?: LegendProps['width'];
+};
+
+declare const Legend: Comp<LegendProps, HTMLUListElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledLegend: styled_components.StyledComponent<"ul", any, Omit<LegendProps, "data"> & {
+    $width?: string | undefined;
+}, never>;
+declare const StyledLabel: styled_components.StyledComponent<"li", any, {
+    $color: string;
+}, never>;
+
+interface LocaleText$2 {
     emptyChartText: string;
 }
+type BarChartDimensions = ChartDimensions & {
+    fontSize: number;
+};
 /**
  * Component props.
  */
-interface HorizontalBarChartProps extends ComponentProps<'div'> {
+interface BarChartProps extends ChartContainerProps {
     /** Whether the x axis labels are rotated or not. */
     areXLabelsRotated?: boolean;
     /** Number of categories to use, the rest being put into a new category called "Others". */
     caping?: number;
-    /** Caption. */
-    caption?: string;
-    /** Dataset to use to generate the chart, should be a list of objects containing a name and a value. */
-    data: Datum[];
+    /** 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. */
+    isBarSelected?: (datum: BarDatum) => void;
+    /** Method to override the data labels. */
+    labelDecorator?: (datum: BarDatum) => string;
     /** Labels and texts. */
-    localeText?: LocaleText$1;
+    localeText?: LocaleText$2;
     /** Method to be called on a click on a bar. */
-    onBarClick?: (data: Datum) => void;
+    onBarClick?: (datum: BarDatum) => 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;
-    /** HorizontalBarChart size. */
-    size?: HorizontalBarChartSize;
+    /** BarChart size. */
+    size?: ChartSize | BarChartDimensions;
     /** Bar role. Used to indicate that bars are to be considered buttons or links. If an onClick is provided, the bars will have the role `button` unless specifically set to `link` with this prop. */
-    barRole?: 'button' | 'link';
+    barRole?: BarProps['role'];
     /** 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?: HorizontalBarChartTheme | SuccessDangerColorTheme;
-    /** Title. */
-    title?: string;
+    theme?: ChartTheme;
     /** Tooltip variant. */
-    tooltipVariant?: HorizontalBarChartTooltipVariant;
-}
-type StyledHorizontalBarChartProps = Omit<HorizontalBarChartProps, 'data'> & {};
-interface HorizontalBarChartBarProps extends ComponentProps<'g'> {
-    chartId: string;
-    color: string;
-    data: Datum;
-    gap: number;
-    height: number;
-    index: number;
-    isEmpty: boolean;
-    onClick?: () => void;
-    role?: HorizontalBarChartProps['barRole'];
-    showTooltip: boolean;
-    tooltipLabelOnly: boolean;
-    tooltipPercent: number | null;
-    width: number;
-}
-type StyledHorizontalBarChartBarProps = Omit<HorizontalBarChartBarProps, 'chartId' | 'color' | 'data' | 'gap' | 'height' | 'index' | 'isEmpty' | 'showTooltip' | 'tooltipPercent' | 'tooltipLabelOnly' | 'width'> & {
-    $clickable: boolean;
-};
-interface HorizontalBarChartAxisBottomProps extends ComponentProps<'g'> {
-    areXLabelsRotated: boolean;
-    chartHeight: number;
-    d3scale: ScaleLinear<number, number>;
+    tooltipVariant?: TooltipVariant;
 }
-type StyledHorizontalBarChartAxisBottomProps = Omit<HorizontalBarChartAxisBottomProps, 'areXLabelsRotated' | 'chartHeight' | 'd3scale'> & {};
+type StyledBarChartProps = BarChartProps & {};
 
-declare const HorizontalBarChart: Comp<HorizontalBarChartProps, HTMLDivElement>;
+declare const BarChart: Comp<BarChartProps, HTMLDivElement>;
 
 /**
  * Component style.
  */
-declare const StyledHorizontalBarChart: styled_components.StyledComponent<"div", any, Omit<HorizontalBarChartProps, "data">, never>;
-declare const StyledHorizontalBarChartTitle: styled_components.StyledComponent<_redsift_design_system.Comp<_redsift_design_system.FlexboxProps, HTMLDivElement>, any, Omit<HorizontalBarChartProps, "data">, never>;
-declare const StyledHorizontalBarChartCaption: styled_components.StyledComponent<"p", any, Omit<HorizontalBarChartProps, "data">, never>;
-declare const StyledHorizontalBarChartEmptyText: styled_components.StyledComponent<"div", any, {
+declare const StyledBarChart: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, BarChartProps, never>;
+declare const StyledBarChartEmptyText: styled_components.StyledComponent<"div", any, {
     $maxWidth: number;
     $textSize: number;
 }, never>;
-declare const StyledHorizontalBarChartBar: styled_components.StyledComponent<"g", any, Omit<HorizontalBarChartBarProps, "height" | "width" | "gap" | "data" | "color" | "chartId" | "index" | "isEmpty" | "showTooltip" | "tooltipPercent" | "tooltipLabelOnly"> & {
-    $clickable: boolean;
-}, never>;
-declare const StyledHorizontalBarChartAxisBottom: styled_components.StyledComponent<"g", any, {}, never>;
 
-/**
- * Component size.
- */
-declare const PieChartSize: {
-    readonly small: "small";
-    readonly medium: "medium";
-    readonly large: "large";
-};
-type PieChartSize = ValueOf<typeof PieChartSize>;
 /**
  * Component variant.
  */
@@ -186,51 +490,40 @@ declare const PieChartLabelVariant: {
     readonly externalLabelPercent: "externalLabelPercent";
 };
 type PieChartLabelVariant = ValueOf<typeof PieChartLabelVariant>;
-/**
- * Component theme.
- */
-declare const PieChartTheme: {
-    readonly default: "default";
-    readonly dark: "dark";
-    readonly darker: "darker";
-    readonly monochrome: "monochrome";
-};
-type PieChartTheme = ValueOf<typeof PieChartTheme>;
-/**
- * Tooltip label variant.
- */
-declare const PieChartTooltipVariant: {
-    none: string;
-    label: string;
-    value: string;
-    percent: string;
-};
-type PieChartTooltipVariant = ValueOf<typeof PieChartTooltipVariant>;
-interface LocaleText {
+interface LocaleText$1 {
     emptyChartText: string;
 }
+type PieChartDimensions = ChartDimensions & {
+    smallFontSize: number;
+    fontSize: number;
+    innerRadius: number;
+};
 /**
  * Component props.
  */
-interface PieChartProps extends ComponentProps<'div'> {
+interface PieChartProps extends ChartContainerProps {
     /** Number of categories to use, the rest being put into a new category called "Others". */
     caping?: number;
-    /** Caption. */
-    caption?: string;
-    /** Dataset to use to generate the chart, should be a list of objects containing a name and a value. */
-    data: Datum[];
+    /** 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;
+    localeText?: LocaleText$1;
     /** Method to be called on a click on a slice. */
-    onSliceClick?: (data: Datum) => void;
+    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?: PieChartSize;
+    size?: ChartSize | PieChartDimensions;
     /** 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?: 'button' | 'link';
+    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. */
@@ -238,42 +531,20 @@ interface PieChartProps extends ComponentProps<'div'> {
     /** 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?: PieChartTheme | SuccessDangerColorTheme;
-    /** Title. */
-    title?: string;
+    theme?: ChartTheme;
     /** PieChart variant. */
     variant?: PieChartVariant;
     /** Tooltip variant. */
-    tooltipVariant?: PieChartTooltipVariant;
-}
-type StyledPieChartProps = Omit<PieChartProps, 'data'> & {};
-interface PieChartArcProps extends ComponentProps<'g'> {
-    chartId: string;
-    color: string;
-    data: Datum;
-    index: number;
-    onClick?: () => void;
-    path: string;
-    role?: PieChartProps['sliceRole'];
-    spaced?: boolean;
-    showTooltip: boolean;
-    tooltipPercent: number | null;
-    tooltipLabelOnly: boolean;
-    isEmpty: boolean;
+    tooltipVariant?: TooltipVariant;
 }
-type StyledPieChartArcProps = Omit<PieChartArcProps, 'chartId' | 'color' | 'data' | 'index' | 'path' | 'spaced' | 'showTooltip' | 'tooltipPercent' | 'tooltipLabelOnly' | 'isEmpty'> & {
-    $spaced: boolean;
-    $clickable: boolean;
-};
+type StyledPieChartProps = PieChartProps & {};
 
 declare const PieChart: Comp<PieChartProps, HTMLDivElement>;
 
 /**
  * Component style.
  */
-declare const StyledPieChart: styled_components.StyledComponent<"div", any, Omit<PieChartProps, "data">, never>;
-declare const StyledPieChartTitle: styled_components.StyledComponent<_redsift_design_system.Comp<_redsift_design_system.FlexboxProps, HTMLDivElement>, any, Omit<PieChartProps, "data">, never>;
-declare const StyledPieChartCaption: styled_components.StyledComponent<"p", any, Omit<PieChartProps, "data">, never>;
+declare const StyledPieChart: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, PieChartProps, never>;
 declare const StyledPieChartCenterText: styled_components.StyledComponent<"div", any, {
     $maxWidth: number;
     $textSize: number;
@@ -284,12 +555,89 @@ declare const StyledPieChartEmptyText: styled_components.StyledComponent<"div",
     $textSize: number;
     $isDonut: boolean;
 }, never>;
-declare const StyledPieChartLabel: styled_components.StyledComponent<"li", any, {
-    $color: string;
-}, never>;
-declare const StyledPieChartArc: styled_components.StyledComponent<"g", any, Omit<PieChartArcProps, "data" | "path" | "color" | "chartId" | "index" | "isEmpty" | "showTooltip" | "tooltipPercent" | "tooltipLabelOnly" | "spaced"> & {
-    $spaced: boolean;
-    $clickable: boolean;
+
+/**
+ * Component props.
+ */
+interface DotProps extends DataPointProps<DotDatum> {
+    /** A linear continuous scale defined over a numeric domain used to determine the x position based on the coordinates. */
+    scaleX: ScaleLinear$1<number, number, never>;
+    /** A linear continuous scale defined over a numeric domain used to determine the y position based on the coordinates. */
+    scaleY: ScaleLinear$1<number, number, never>;
+}
+
+/**
+ * Component variant.
+ */
+declare const ScatterPlotVariant: {
+    readonly default: "default";
+    readonly gridded: "gridded";
+};
+type ScatterPlotVariant = ValueOf<typeof ScatterPlotVariant>;
+/**
+ * Component's labels variant.
+ */
+declare const ScatterPlotLabelVariant: {
+    readonly none: "none";
+    readonly externalLabel: "externalLabel";
+    readonly externalLabelValue: "externalLabelValue";
+    readonly externalLabelPercent: "externalLabelPercent";
+};
+type ScatterPlotLabelVariant = ValueOf<typeof ScatterPlotLabelVariant>;
+interface LocaleText {
+    emptyChartText: string;
+}
+type ScatterPlotDimensions = ChartDimensions & {
+    fontSize: number;
+};
+/**
+ * Component props.
+ */
+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;
+    /** Labels and texts. */
+    localeText?: LocaleText;
+    /** Method called on brush. */
+    onBrush?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear$1<number, number>, scaleY: ScaleLinear$1<number, number>) => void;
+    /** Method called on brush end. */
+    onBrushEnd?: (selection: [[number, number], [number, number]] | null, scaleX?: ScaleLinear$1<number, number>, scaleY?: ScaleLinear$1<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;
+}
+type StyledScatterPlotProps = ScatterPlotProps & {};
+
+declare const ScatterPlot: Comp<ScatterPlotProps, HTMLDivElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledScatterPlot: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, ScatterPlotProps, never>;
+declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div", any, {
+    $maxWidth: number;
+    $textSize: number;
 }, never>;
 
-export { ChartDimensions, ColorTheme, Datum, HorizontalBarChart, HorizontalBarChartAxisBottomProps, HorizontalBarChartBarProps, HorizontalBarChartProps, HorizontalBarChartSize, HorizontalBarChartTheme, HorizontalBarChartTooltipVariant, PieArcDatum, PieChart, PieChartArcProps, PieChartLabelVariant, PieChartProps, PieChartSize, PieChartTheme, PieChartTooltipVariant, PieChartVariant, StyledHorizontalBarChart, StyledHorizontalBarChartAxisBottom, StyledHorizontalBarChartAxisBottomProps, StyledHorizontalBarChartBar, StyledHorizontalBarChartBarProps, StyledHorizontalBarChartCaption, StyledHorizontalBarChartEmptyText, StyledHorizontalBarChartProps, StyledHorizontalBarChartTitle, StyledPieChart, StyledPieChartArc, StyledPieChartArcProps, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartLabel, StyledPieChartProps, StyledPieChartTitle, SuccessDangerColorTheme, getColorScale, monochrome, scheme, successDangerScheme };
+export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoryData, CategoryDatum, CategoryDim, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, Datum, DotDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendProps, NumericValue, PieChart, PieChartDimensions, PieChartLabelVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLabelVariant, ScatterPlotProps, ScatterPlotVariant, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledLabel, StyledLegend, StyledLegendProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };