@redsift/charts 10.3.0-alpha.7 → 10.3.0-alpha.9

package/index.d.ts

@@ -386,16 +386,19 @@ 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. */
     data: T;
-    /** Href when the component is a navigation link. */
-    href?: string;
     /** Id. Used for accessibility. */
     id?: string;
     /** Position in the list of siblings. Used for placement and selection. */
@@ -547,7 +550,7 @@ interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, Cont
     /** 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?: 'static' | '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. */
@@ -603,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?: {
@@ -663,6 +666,8 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     areXLabelsRotated?: boolean;
     /** Native HTML props to forward to each bar. */
     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. */
@@ -671,12 +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 used to define the href on a bar used as a navigation link. */
-    getBarAnchorProps?: (datum: BarDatum) => {
-        href: string;
-        target?: string;
-    };
-    /** 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?: {
@@ -693,7 +695,9 @@ 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. */
@@ -708,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".  */
@@ -818,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. */
@@ -839,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;
@@ -919,11 +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 href on a bar used as a navigation link. */
-    getSliceAnchorProps?: (datum: ArcDatum) => {
-        href: string;
-        target?: string;
-    };
+    /** 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. */
@@ -943,7 +946,9 @@ 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. For a navigation link, please use `getSliceAnchorProps` instead. */
@@ -954,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;
@@ -1031,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;
@@ -1056,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. */
@@ -1065,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;
@@ -1102,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 };