@redsift/charts 10.2.0 → 10.3.0-alpha.10

package/CONTRIBUTING.md

@@ -58,6 +58,10 @@ The Design System is following a monorepo architecture, providing multiple packa
 
   This package provides dashboard-related components and decorators to make charts and datagrid filterable using [crossfilter](https://crossfilter.github.io/crossfilter/).
 
+- `@redsift/products`
+
+  This package provides ready-to-use implementation of components with a customize style to fit Red Sift's use cases. It is based on all other packages.
+
 - _Deprecated_ `@redsift/design-system-legacy`
 
   This package contains all components prior to the 6.0.0 version. These components are deprecated and contributing to this package is discouraged since it will be removed in the future.
@@ -133,9 +137,6 @@ import { BadgeProps } from './types';
 
 const COMPONENT_NAME = 'Badge';
 const CLASSNAME = 'redsift-badge';
-const DEFAULT_PROPS: Partial<BadgeProps> = {
-  // default values
-};
 
 /**
  * The Badge component.
@@ -158,7 +159,6 @@ export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) =
   );
 });
 Badge.className = CLASSNAME;
-Badge.defaultProps = DEFAULT_PROPS;
 Badge.displayName = COMPONENT_NAME;
 ```
 

package/index.d.ts

@@ -386,10 +386,15 @@ declare const getColorScale: ({ colorTheme, domain, isEmpty, theme, }: {
     theme: Theme;
 }) => ScaleOrdinal<string, string>;
 
+type AnchorProps = ComponentProps<'a'> & {
+    as?: any;
+};
 /**
  * Component props.
  */
 interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale'> {
+    /** Anchor props to use when the component is a navigation link. */
+    anchorProps?: AnchorProps;
     /** Color of the DataPoint. */
     color?: string;
     /** Data. Also state to which the component should end the animation, if any. */
@@ -411,7 +416,7 @@ interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale
     /** 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';
+    role?: 'img' | 'button' | 'link' | 'option';
     /** Theme. */
     theme?: Theme;
     /** Tooltip variant. */
@@ -542,6 +547,23 @@ interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, Cont
     title?: string | ReactElement;
     /** Theme. */
     theme?: Theme;
+    /** Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. */
+    descriptionForAssistiveTechnology?: string;
+    /** Whether the chart is static or interactive. */
+    mode?: string;
+    /** Small text explaining which kind of chart is presenting and what's its basic composition. */
+    definition?: string;
+    /** Small text explaining the basic composition of the x-axis, if any. */
+    xAxisDefinition?: string;
+    /** Small text explaining the basic composition of the y-axis, if any. */
+    yAxisDefinition?: string;
+    /** Small text explaining how the chart is interactive, if any. */
+    interactionExplanation?: string;
+    /** Table representation of the chart. */
+    dataTableRepresentation?: {
+        header: ReactElement;
+        body: ReactElement;
+    };
 }
 type StyledChartContainerProps = Omit<ChartContainerProps, 'theme'> & {
     $theme: Theme;
@@ -584,7 +606,7 @@ interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick'>, ContainerPr
     data: (Statistic & {
         color: string;
     })[];
-    /** Method to determine whether a slice is selected or not. */
+    /** Method to determine whether a legend is selected or not. */
     isLegendItemSelected?: (datum: LegendItemDatum) => void;
     /** Method to override the data labels. */
     labelDecorator?: (datum: LegendItemDatum, props?: {
@@ -643,7 +665,9 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     /** @deprecated: Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. */
     areXLabelsRotated?: boolean;
     /** Native HTML props to forward to each bar. */
-    barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale' | 'width'>;
+    barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale'>;
+    /** Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. */
+    barRole?: BarProps['role'];
     /** Number of categories to use, the rest being put into a new category called "Others". */
     caping?: number;
     /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
@@ -652,7 +676,9 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     dataType?: 'TwoCategoryData' | 'LinearData' | '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. */
+    /** Method used to define the anchor props to use when the bar is a navigation link. */
+    getBarAnchorProps?: (datum: BarDatum) => AnchorProps;
+    /** Method to determine whether a bar is selected or not. */
     isBarSelected?: (datum: BarDatum) => void;
     /** Method to override the data labels. */
     labelDecorator?: (datum: BarDatum, props?: {
@@ -669,12 +695,14 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
     legendVariant?: BarChartLegendVariant;
     /** Props to forward to the Legend block. Can be used to make the legend selectable. */
-    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'>;
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
+        extraLegendItems?: Statistics;
+    };
     /** Labels and texts. */
     localeText?: LocaleText$3;
     /** Custom margins, used to give more space for axes labels and legend for instance. */
     margins?: MarginProps;
-    /** Method to be called on a click on a bar. */
+    /** Method to be called on a click on a bar. For a navigation link, please use `getBarAnchorProps` instead. */
     onBarClick?: (datum: BarDatum) => void;
     /** Orientation of the bar. */
     orientation?: BarOrientation;
@@ -684,8 +712,6 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     size?: ChartSize | BarChartDimensions;
     /** Define how to sort categories. */
     sortingMethod?: SortingMethod;
-    /** 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?: 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.  */
     colorTheme?: ChartTheme;
     /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
@@ -794,10 +820,12 @@ type LineChartDimensions = ChartDimensions & {
 interface LineChartProps extends ChartContainerProps, ChartAxesProps {
     /** Dataset to use to generate the chart. */
     data?: TwoCategoryData;
-    /** 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. */
+    /** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. */
     dotRole?: DotProps['role'];
     /** Component to use if the chart is empty (replacing the default one). */
     emptyComponent?: ReactNode;
+    /** Method used to define the anchor props to use when the dot is a navigation link. */
+    getDotAnchorProps?: (datum: DotDatum) => AnchorProps;
     /** Method to determine whether a dot is selected or not. */
     isDotSelected?: (datum: DotDatum) => boolean | undefined;
     /** Method to override the data point labels. */
@@ -815,12 +843,14 @@ interface LineChartProps extends ChartContainerProps, ChartAxesProps {
     /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
     legendVariant?: LineChartLegendVariant;
     /** Props to forward to the Legend block. Can be used to make the legend selectable. */
-    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'>;
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
+        extraLegendItems?: Statistics;
+    };
     /** Labels and texts. */
     localeText?: LocaleText$2;
     /** Custom margins, used to give more space for axes labels and legend for instance. */
     margins?: MarginProps;
-    /** Method to be called on a click on a dot. */
+    /** Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. */
     onDotClick?: (datum: DotDatum) => void;
     /** LineChart size. */
     size?: ChartSize | LineChartDimensions;
@@ -895,6 +925,8 @@ interface PieChartProps extends ChartContainerProps {
     data?: CategoryData;
     /** Component to use if the chart is empty (replacing the default one). */
     emptyComponent?: ReactNode;
+    /** Method used to define the anchor props to use when the slice is a navigation link. */
+    getSliceAnchorProps?: (datum: ArcDatum) => AnchorProps;
     /** Whether the pie or donut is cut in half or not. */
     isHalf?: boolean;
     /** Method to determine whether a slice is selected or not. */
@@ -914,10 +946,12 @@ interface PieChartProps extends ChartContainerProps {
     /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
     legendVariant?: PieChartLegendVariant;
     /** Props to forward to the Legend block. Can be used to make the legend selectable. */
-    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant'>;
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant'> & {
+        extraLegendItems?: Statistics;
+    };
     /** Labels and texts. */
     localeText?: LocaleText$1;
-    /** Method to be called on a click on a slice. */
+    /** Method to be called on a click on a slice. For a navigation link, please use `getSliceAnchorProps` instead. */
     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;
@@ -925,7 +959,7 @@ interface PieChartProps extends ChartContainerProps {
     size?: ChartSize | PieChartDimensions;
     /** Native HTML props to forward to each slice. */
     sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
-    /** Slice role. Used to indicate that slices are to be considered buttons or links. If an onClick is provided, the slices will have the role `button` unless specifically set to `link` with this prop. */
+    /** Slice role. If an onClick is provided, the slices will have the role `button`. For a navigation link, please use `getSliceAnchorProps` instead. */
     sliceRole?: ArcProps['role'];
     /** Define how to sort categories. */
     sortingMethod?: SortingMethod;
@@ -1002,7 +1036,9 @@ type ScatterPlotDimensions = ChartDimensions & {
 interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {
     /** 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. */
+    /** Method used to define the anchor props to use when the dot is a navigation link. */
+    getDotAnchorProps?: (datum: DotDatum) => AnchorProps;
+    /** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. */
     dotRole?: DotProps['role'];
     /** Component to use if the chart is empty (replacing the default one). */
     emptyComponent?: ReactNode;
@@ -1027,7 +1063,9 @@ interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {
     /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
     legendVariant?: ScatterPlotLegendVariant;
     /** Props to forward to the Legend block. Can be used to make the legend selectable. */
-    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'>;
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
+        extraLegendItems?: Statistics;
+    };
     /** Labels and texts. */
     localeText?: LocaleText;
     /** Custom margins, used to give more space for axes labels and legend for instance. */
@@ -1036,7 +1074,7 @@ interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {
     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. */
+    /** Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. */
     onDotClick?: (datum: DotDatum) => void;
     /** ScatterPlot size. */
     size?: ChartSize | ScatterPlotDimensions;
@@ -1073,4 +1111,4 @@ declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div
     $theme: Theme;
 }, never>;
 
-export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartLegendVariant, BarChartProps, BarDatum, BarOrientation, BarProps, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, XScaleType, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { AnchorProps, AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartLegendVariant, BarChartProps, BarDatum, BarOrientation, BarProps, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, XScaleType, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };