@redsift/dashboard 7.8.0 → 8.0.0-alpha.0

package/CONTRIBUTING.md

@@ -48,11 +48,11 @@ The Design System is following a monorepo architecture, providing multiple packa
 
 - `@redsift/charts`
 
-  This package provides charts components. Charts are based on [d3.js](https://d3js.org/) and are mainly static. For filterable charts, see `@redsift/dashboard`.
+  This package provides charts components. Charts are based on [d3.js](https://d3js.org/) for computation, [react](https://react.dev/) for rendering and events and [react-spring](https://www.react-spring.dev/) for animations and transitions.
 
 - `@redsift/dashboard`
 
-  This package provides dashboard-related components. Charts are based on [dc.js](https://dc-js.github.io/dc.js/), [d3fc](https://d3fc.io/) and [crossfilter](https://crossfilter.github.io/crossfilter/) and datagrids are based on `@redsift/table`. It contains every filterable elements to use inside a dashboard. For static charts, see `@redsift/charts`.
+  This package provides dashboard-related components and decorators to make charts and datagrid filterable using [crossfilter](https://crossfilter.github.io/crossfilter/).
 
 - _Deprecated_ `@redsift/design-system-legacy`
 

package/index.d.ts

@@ -1,17 +1,11 @@
 import * as crossfilter2 from 'crossfilter2';
 import { Crossfilter, Group as Group$1, NaturallyOrderedValue, Dimension as Dimension$1, ComparableObject, OrderedValueSelector } from 'crossfilter2';
-import { PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartVariant } from '@redsift/charts';
-export { ColorTheme, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartVariant } from '@redsift/charts';
-import $k7QOs$react, { Ref, ReactElement, ComponentProps, RefObject, MutableRefObject, Dispatch } from 'react';
+export { ChartSize, ColorTheme } from '@redsift/charts';
+import { Comp, ButtonProps, ValueOf } from '@redsift/design-system';
+import React, { ComponentProps, RefObject, MutableRefObject, Dispatch } from 'react';
 import { GridFilterItem, DataGridProps as DataGridProps$1, GridFilterModel } from '@redsift/table';
 import { GridApi } from '@mui/x-data-grid-pro';
 
-type SuccessDangerColorTheme = {
-    success: string;
-    warning: string;
-    danger: string;
-    neutral?: string;
-};
 type JSONValue = string | number | boolean | {
     [x: string]: JSONValue;
 } | Array<JSONValue> | undefined | null;
@@ -24,226 +18,12 @@ type Group = Group$1<any, NaturallyOrderedValue, unknown>;
 type GroupSelector = (group: Group) => Group;
 type Dimension = Dimension$1<any, string | number | boolean | ComparableObject>;
 type DimensionSelector = OrderedValueSelector<any, NaturallyOrderedValue | NaturallyOrderedValue[]>;
-type ChartDimensions = {
-    width: number;
-    height: number;
-    marginTop?: number;
-    marginRight?: number;
-    marginBottom?: number;
-    marginLeft?: number;
-};
 
 declare const COUNT: (d: Dimension) => crossfilter2.Group<any, crossfilter2.NaturallyOrderedValue, unknown>;
 
 declare const groupReduceSum: (field: string) => (d: Dimension) => crossfilter2.Group<any, crossfilter2.NaturallyOrderedValue, unknown>;
 declare const SUM: (field: string) => (d: Dimension) => crossfilter2.Group<any, crossfilter2.NaturallyOrderedValue, unknown>;
 
-/** Component Type. */
-type Comp<P, T = HTMLElement> = {
-    (props: P & {
-        ref?: Ref<T>;
-    }): ReactElement | null;
-    /** React component type. */
-    readonly $$typeof: symbol;
-    /** Component default props. */
-    defaultProps?: Partial<P>;
-    /** Component name. */
-    displayName?: string;
-    /** Component base class name. */
-    className?: string;
-};
-/** Get types of the values of a record. */
-type ValueOf<T extends Record<any, any>> = T[keyof T];
-
-/**
- * Color palette.
- */
-declare const ColorPalette: {
-    readonly default: "default";
-    readonly success: "success";
-    readonly error: "error";
-    readonly warning: "warning";
-    readonly info: "info";
-    readonly question: "question";
-    readonly 'no-data': "no-data";
-};
-type ColorPalette = ValueOf<typeof ColorPalette>;
-declare const ProductColorPalette: {
-    readonly website: "website";
-    readonly ondmarc: "ondmarc";
-    readonly oninbox: "oninbox";
-    readonly ondomain: "ondomain";
-    readonly hardenize: "hardenize";
-    readonly tools: "tools";
-};
-type ProductColorPalette = ValueOf<typeof ProductColorPalette>;
-
-declare const AlignSelf: {
-    readonly auto: "auto";
-    readonly normal: "normal";
-    readonly start: "start";
-    readonly end: "end";
-    readonly center: "center";
-    readonly 'flex-start': "flex-start";
-    readonly 'flex-end': "flex-end";
-    readonly 'self-start': "self-start";
-    readonly 'self-end': "self-end";
-    readonly baseline: "baseline";
-    readonly stretch: "stretch";
-};
-type AlignSelf = ValueOf<typeof AlignSelf>;
-interface LayoutProps {
-    /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">MDN</a>. */
-    flex?: string;
-    /** When used in a flex layout, specifies how the element will grow to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">MDN</a>. */
-    flexGrow?: number;
-    /** When used in a flex layout, specifies how the element will shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">MDN</a>. */
-    flexShrink?: number;
-    /** When used in a flex layout, specifies the initial main size of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex_basis">MDN</a>. */
-    flexBasis?: string;
-    /** Overrides the alignItems property of a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">MDN</a>. */
-    alignSelf?: AlignSelf;
-    /** Specifies how the element is justified inside a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self">MDN</a>. */
-    justifySelf?: string;
-    /** The layout order for the element within a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">MDN</a>. */
-    order?: number;
-    /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area">MDN</a>. */
-    gridArea?: string;
-    /** When used in a grid layout, specifies the column the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column">MDN</a>. */
-    gridColumn?: string;
-    /** When used in a grid layout, specifies the row the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row">MDN</a>. */
-    gridRow?: string;
-    /** When used in a grid layout, specifies the starting column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start">MDN</a>. */
-    gridColumnStart?: string;
-    /** When used in a grid layout, specifies the ending column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end">MDN</a>. */
-    gridColumnEnd?: string;
-    /** When used in a grid layout, specifies the starting row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start">MDN</a>. */
-    gridRowStart?: string;
-    /** When used in a grid layout, specifies the ending row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end">MDN</a>. */
-    gridRowEnd?: string;
-}
-interface SpacingProps {
-    /** The margin for all four sides of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">MDN</a>. */
-    margin?: string;
-    /** The margin for the bottom side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom">MDN</a>. */
-    marginBottom?: string;
-    /** The margin for the left side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left">MDN</a>. */
-    marginLeft?: string;
-    /** The margin for the right side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">MDN</a>. */
-    marginRight?: string;
-    /** The margin for the top side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top">MDN</a>. */
-    marginTop?: string;
-}
-interface SizingProps {
-    /** The height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height">MDN</a>. */
-    height?: string | number;
-    /** The maximum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height">MDN</a>. */
-    maxHeight?: string;
-    /** The maximum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">MDN</a>. */
-    maxWidth?: string;
-    /** The minimum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">MDN</a>. */
-    minHeight?: string;
-    /** The minimum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">MDN</a>. */
-    minWidth?: string;
-    /** The width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">MDN</a>. */
-    width?: string | number;
-}
-interface PositioningProps {
-    /** Specifies how the element is positioned. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">MDN</a>. */
-    position?: string;
-    /** The top position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top">MDN</a>. */
-    top?: string;
-    /** The bottom position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom">MDN</a>. */
-    bottom?: string;
-    /** The left position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left">MDN</a>. Consider using start instead for RTL support. */
-    left?: string;
-    /** The right position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/right">MDN</a>. Consider using start instead for RTL support. */
-    right?: string;
-    /** The stacking order for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">MDN</a>. */
-    zIndex?: string;
-}
-interface StylingProps extends LayoutProps, SpacingProps, SizingProps, PositioningProps {
-}
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-
-type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
-
-interface PressEvent {
-  /** The type of press event being fired. */
-  type: 'pressstart' | 'pressend' | 'pressup' | 'press',
-  /** The pointer type that triggered the press event. */
-  pointerType: PointerType,
-  /** The target element of the press event. */
-  target: Element,
-  /** Whether the shift keyboard modifier was held during the press event. */
-  shiftKey: boolean,
-  /** Whether the ctrl keyboard modifier was held during the press event. */
-  ctrlKey: boolean,
-  /** Whether the meta keyboard modifier was held during the press event. */
-  metaKey: boolean,
-  /** Whether the alt keyboard modifier was held during the press event. */
-  altKey: boolean
-}
-
-/**
- * Component variant.
- */
-declare const ButtonVariant: {
-    readonly primary: "primary";
-    readonly secondary: "secondary";
-    readonly unstyled: "unstyled";
-};
-type ButtonVariant = ValueOf<typeof ButtonVariant>;
-/**
- * Component color.
- */
-type ButtonColor = ColorPalette | ProductColorPalette;
-/**
- * Component props.
- */
-interface ButtonProps extends ComponentProps<'button'>, StylingProps {
-    /** Color variant. The product colors are available but should only be used to display the Button in the color of another product. To display a Button with a color of the current product, use `default`. */
-    color?: ButtonColor;
-    /** Whether the component take the full width or not. */
-    fullWidth?: boolean;
-    /** Whether the component is active or not. */
-    isActive?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is in a loading state or not. */
-    isLoading?: boolean;
-    /**
-     * Icon path data (`d` property of the `path` SVG element).<br />
-     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
-     * Recommended path data come from mdi/js.<br />
-     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
-     */
-    leftIcon?: string;
-    /** Preferred method to handle click, press and touch. */
-    onPress?: (e: PressEvent) => void;
-    /**
-     * Icon path data (`d` property of the `path` SVG element).<br />
-     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
-     * Recommended path data come from mdi/js.<br />
-     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
-     */
-    rightIcon?: string;
-    /** Button variant. */
-    variant?: ButtonVariant;
-}
-
 /**
  * Component props.
  */
@@ -265,11 +45,11 @@ declare const ChartEmptyState: Comp<ChartEmptyStateProps, HTMLDivElement>;
  */
 type DashboardContextProps = {
     dashboardRef?: RefObject<HTMLDivElement>;
-    data?: JSONArray;
+    data: JSONArray;
     dataGridApiRef?: MutableRefObject<GridApi>;
-    dispatch?: Dispatch<DashboardReducerAction>;
-    ndx?: TNdx;
+    dispatch: Dispatch<DashboardReducerAction>;
     state: DashboardReducerState;
+    toggleUpdateContext?: () => void;
 };
 /**
  * Reducer props.
@@ -299,7 +79,7 @@ interface DashboardProps extends ComponentProps<'div'> {
 declare const Dashboard: Comp<DashboardProps, HTMLDivElement>;
 
 declare const initialState: DashboardReducerState;
-declare const DashboardContext: $k7QOs$react.Context<DashboardContextProps>;
+declare const DashboardContext: React.Context<DashboardContextProps>;
 
 declare const DashboardReducer: (state: DashboardReducerState, action: DashboardReducerAction) => DashboardReducerState;
 
@@ -311,83 +91,9 @@ interface DataGridProps extends Omit<DataGridProps$1, 'rows'> {
     onFilter?: (filterModel: GridFilterModel) => void;
 }
 
-declare const DataGrid: $k7QOs$react.FC<DataGridProps>;
-
-/**
- * Component size.
- */
-declare const HorizontalBarChartSize: {
-    readonly large: "large";
-    readonly medium: "medium";
-    readonly small: "small";
-};
-type HorizontalBarChartSize = ValueOf<typeof HorizontalBarChartSize>;
-/**
- * Component theme.
- */
-declare const HorizontalBarChartTheme: {
-    readonly default: "default";
-    /**
-     * Component theme.
-     */
-    readonly dark: "dark";
-    readonly darker: "darker";
-    readonly monochrome: "monochrome";
-};
-type HorizontalBarChartTheme = ValueOf<typeof HorizontalBarChartTheme>;
-interface LocaleText$4 {
-    emptyChartTitle?: string;
-    emptyChartSubtitle?: string;
-    emptyChartResetLabel?: string;
-    resetLabel?: string;
-}
-/**
- * Component props.
- */
-interface HorizontalBarChartProps extends ComponentProps<'div'> {
-    /** 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, if no context is provided. */
-    data?: JSONArray;
-    /** Which datagrid column the chart is filtering and using which operation. */
-    datagridFilter?: {
-        field: string;
-        operator: 'containsAnyOf' | 'endsWithAnyOf' | 'isAnyOf';
-    };
-    /** Method that will be used by crossfilter to compute the dimensions of the charts. */
-    dimension: DimensionSelector;
-    /** Reset function that is triggered when reset button is pressed in the empty state chart. */
-    emptyChartResetFn?: () => void;
-    /** Method that will be used by crossfilter to compute the groups of the charts. */
-    group: (d: Dimension) => Group;
-    /** Whether the dimension field is an array or not. */
-    isDimensionArray?: boolean;
-    /** Whether the reset button is hidden or not. */
-    isResetable?: boolean;
-    /** Overriden values for internal labels and texts. */
-    localeText?: LocaleText$4;
-    /** Method to call when a filter occured on the chart. */
-    onFilter?: (filters?: string[]) => 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;
-    /** Method to override the data labels. */
-    setLabels?: (key: string) => string | undefined;
-    /** HorizontalBarChart size. */
-    size?: HorizontalBarChartSize;
-    /** 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;
-}
-type StyledHorizontalBarChartProps = Omit<HorizontalBarChartProps, 'columnToFilter' | 'data' | 'dimension' | 'group' | 'localeText'> & {};
-
-declare const HorizontalBarChart: Comp<HorizontalBarChartProps, HTMLDivElement>;
+declare const DataGrid: React.FC<DataGridProps>;
 
-interface LocaleText$3 {
+interface LocaleText$2 {
     maxSizeDisclaimer?: string;
 }
 interface PdfExportButtonProps extends ButtonProps {
@@ -398,7 +104,7 @@ interface PdfExportButtonProps extends ButtonProps {
     /** Text to display at the beginning of the PDF. */
     introduction?: string;
     /** Labels and texts. */
-    localeText?: LocaleText$3;
+    localeText?: LocaleText$2;
     /** Image to put at the top of the PDF (SVG format not supported). */
     logo?: string;
     /** Function to be executed when button is clicked. */
@@ -409,67 +115,12 @@ interface PdfExportButtonProps extends ButtonProps {
 
 declare const PdfExportButton: Comp<PdfExportButtonProps, HTMLButtonElement>;
 
-interface LocaleText$2 {
-    emptyChartTitle?: string;
-    emptyChartSubtitle?: string;
-    emptyChartResetLabel?: string;
-    resetLabel?: string;
-}
-/**
- * Component props.
- */
-interface PieChartProps extends ComponentProps<'div'> {
-    /** 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, if no context is provided. */
-    data?: JSONArray;
-    /** Which datagrid column the chart is filtering and using which operation. */
-    datagridFilter?: {
-        field: string;
-        operator: 'containsAnyOf' | 'endsWithAnyOf' | 'isAnyOf';
-    };
-    /** Method that will be used by crossfilter to compute the dimensions of the charts. */
-    dimension: DimensionSelector;
-    /** Method that will be used by crossfilter to compute the groups of the charts. */
-    group: (d: Dimension) => Group;
-    /** Whether the dimension field is an array or not. */
-    isDimensionArray?: boolean;
-    /** Whether the reset button is hidden or not. */
-    isResetable?: boolean;
-    /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
-    labelVariant?: PieChartLabelVariant;
-    /** Overriden values for internal labels and texts. */
-    localeText?: LocaleText$2;
-    /** Method to call when a filter occured on the chart. */
-    onFilter?: (filters?: string[]) => 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;
-    /** Method to override the data labels. */
-    setLabels?: (key: string) => string | undefined;
-    /** PieChart size. */
-    size?: PieChartSize;
-    /** Main text to be displayed in the middle of the chart. Only for donut variant. */
-    text?: string;
-    /** 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. Only for donut variant. */
-    subtext?: 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;
-    /** PieChart variant. */
-    variant?: PieChartVariant;
-}
-type StyledPieChartProps = Omit<PieChartProps, 'columnToFilter' | 'dimension' | 'group' | 'localeText'> & {
-    $showLabels: boolean;
-    $spaced: boolean;
+type SuccessDangerColorTheme = {
+    success: string;
+    warning: string;
+    danger: string;
+    neutral?: string;
 };
-
-declare const PieChart: Comp<PieChartProps, HTMLDivElement>;
-
 /**
  * Component size.
  */
@@ -483,12 +134,13 @@ type TimeSeriesBarChartSize = ValueOf<typeof TimeSeriesBarChartSize>;
  * Component theme.
  */
 declare const TimeSeriesBarChartTheme: {
-    /**
-     * Component theme.
-     */
     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 TimeSeriesBarChartTheme = ValueOf<typeof TimeSeriesBarChartTheme>;
@@ -542,100 +194,43 @@ type StyledTimeSeriesBarChartProps = Omit<TimeSeriesBarChartProps, 'dimension' |
 
 declare const TimeSeriesBarChart: Comp<TimeSeriesBarChartProps, HTMLDivElement>;
 
-/**
- * Component size.
- */
-declare const ScatterPlotSize: {
-    readonly xlarge: "xlarge";
-    readonly large: "large";
-    readonly medium: "medium";
-    readonly small: "small";
-};
-type ScatterPlotSize = ValueOf<typeof ScatterPlotSize>;
-/**
- * Component's labels variant.
- */
-declare const ScatterPlotLabelVariant: {
-    readonly none: "none";
-    readonly label: "label";
-    readonly labelValue: "labelValue";
-    readonly labelPercent: "labelPercent";
-};
-type ScatterPlotLabelVariant = ValueOf<typeof ScatterPlotLabelVariant>;
-/**
- * Component theme.
- */
-declare const ScatterPlotTheme: {
-    readonly default: "default";
-    readonly dark: "dark";
-    readonly darker: "darker";
-    readonly monochrome: "monochrome";
-};
-type ScatterPlotTheme = ValueOf<typeof ScatterPlotTheme>;
 interface LocaleText {
     emptyChartTitle?: string;
     emptyChartSubtitle?: string;
     emptyChartResetLabel?: string;
     resetLabel?: string;
 }
-/**
- * Component props.
- */
-interface ScatterPlotProps extends ComponentProps<'div'> {
-    /** Defines the fields to display on hover. An array of key/value will indicate which field to display and how to name it. An object of selectable fields and default selected fields can be used to make the annotations customizable by the user.  */
-    annotations?: {
-        key: string;
-        value: string;
-    }[] | {
-        /** List of fields selected by default. Should only contain values that are keys in selectableFields prop. */
-        defaultSelectedFields?: string[];
-        /** List of fields to display inside the tooltip. keys should match the ones in the dataset and values would be the one used to label the checkboxes. */
-        selectableFields: {
-            key: string;
-            value: string;
-        }[];
-    };
-    /** Caption. */
-    caption?: string;
-    /** Dataset to use to generate the chart, if no context is provided. */
-    data?: JSONArray;
-    /** Which datagrid column the chart is filtering for x and y but also for category if provided. */
-    datagridFilter?: {
-        x: string;
-        y: string;
-        category?: string;
+interface WithFiltersProps extends ComponentProps<'div'> {
+    /** In case of a chart based on one dimension (category), which datagrid column the chart is filtering and using which operator. */
+    datagridCategoryDimFilter?: {
+        field: string;
+        operator: 'containsAnyOf' | 'endsWithAnyOf' | 'isAnyOf' | 'startsWithAnyOf';
     };
+    /** In case of a chart based on two dimension coordinates (x, y), which datagrid columns the chart is filtering. */
+    datagridCoordinatesCategoryDimFilter?: [
+        {
+            field: string;
+            operator: 'isBetween';
+        },
+        {
+            field: string;
+            operator: 'isBetween';
+        }
+    ];
     /** Method that will be used by crossfilter to compute the dimensions of the charts. */
-    dimension: OrderedValueSelector<any, [number, number, string]> | OrderedValueSelector<any, [number, number]>;
-    /** Reset function that is triggered when reset button is pressed in the empty state chart. */
-    emptyChartResetFn?: () => void;
+    dimension: DimensionSelector;
+    /** Method that will be used by crossfilter to compute the groups of the charts. */
+    group: (d: Dimension) => Group;
     /** Whether the dimension field is an array or not. */
     isDimensionArray?: boolean;
     /** Whether the reset button is hidden or not. */
     isResetable?: boolean;
-    /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
-    labelVariant?: ScatterPlotLabelVariant;
     /** Overriden values for internal labels and texts. */
     localeText?: LocaleText;
     /** Method to call when a filter occured on the chart. */
-    onFilter?: (filters?: string[]) => 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;
-    /** Method to override the data labels. */
-    setLabels?: (key: string) => string | undefined;
-    /** ScatterPlot size. */
-    size?: ScatterPlotSize | {
-        width: number;
-        height: number;
-        dotSize: number;
-    };
-    /** 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?: ScatterPlotTheme | SuccessDangerColorTheme;
-    /** Title. */
-    title?: string;
+    onFilter?: (filters?: NaturallyOrderedValue[] | any) => void;
 }
-type StyledScatterPlotProps = Omit<ScatterPlotProps, 'columnToFilter' | 'data' | 'dimension' | 'group' | 'localeText'> & {};
 
-declare const ScatterPlot: Comp<ScatterPlotProps, HTMLDivElement>;
+declare const WithFilters: React.FC<WithFiltersProps>;
 
-export { COUNT, ChartDimensions, ChartEmptyState, ChartEmptyStateProps, Dashboard, DashboardContext, DashboardContextProps, DashboardProps, DashboardReducer, DashboardReducerAction, DashboardReducerActionType, DashboardReducerState, DataGrid, DataGridProps, Dimension, DimensionSelector, Group, GroupSelector, HorizontalBarChart, HorizontalBarChartProps, HorizontalBarChartSize, HorizontalBarChartTheme, JSONArray, JSONObject, JSONValue, PdfExportButton, PieChart, PieChartProps, SUM, ScatterPlot, ScatterPlotLabelVariant, ScatterPlotProps, ScatterPlotSize, ScatterPlotTheme, StyledHorizontalBarChartProps, StyledPieChartProps, StyledScatterPlotProps, StyledTimeSeriesBarChartProps, SuccessDangerColorTheme, TNdx, TimeSeriesBarChart, TimeSeriesBarChartProps, TimeSeriesBarChartSize, TimeSeriesBarChartTheme, datetimeEnum, groupReduceSum, initialState };
+export { COUNT, ChartEmptyState, ChartEmptyStateProps, Dashboard, DashboardContext, DashboardContextProps, DashboardProps, DashboardReducer, DashboardReducerAction, DashboardReducerActionType, DashboardReducerState, DataGrid, DataGridProps, Dimension, DimensionSelector, Group, GroupSelector, JSONArray, JSONObject, JSONValue, PdfExportButton, SUM, StyledTimeSeriesBarChartProps, TNdx, TimeSeriesBarChart, TimeSeriesBarChartProps, TimeSeriesBarChartSize, TimeSeriesBarChartTheme, WithFilters, WithFiltersProps, datetimeEnum, groupReduceSum, initialState };