@redsift/charts 9.3.3 → 9.4.0

package/index.d.ts

@@ -1,4 +1,4 @@
-import { BrushBehavior, ScaleLinear as ScaleLinear$1, ScaleOrdinal, Arc as Arc$1 } from 'd3';
+import { BrushBehavior, ScaleLinear as ScaleLinear$1, ScaleOrdinal, Arc as Arc$1, ScaleTime as ScaleTime$2, ScalePoint as ScalePoint$2, Line as Line$1 } from 'd3';
 import * as _redsift_design_system from '@redsift/design-system';
 import { ValueOf, Comp, ContainerProps } from '@redsift/design-system';
 import { MutableRefObject, ComponentProps, ReactElement, RefObject, ReactNode } from 'react';
@@ -21,7 +21,7 @@ interface UseBrushProps {
 }
 declare const useBrush: ({ brushRef: propsBrushRef, svgRef, extent, scaleX, scaleY, isBrushable, isGridded, onBrush, onBrushEnd, }: UseBrushProps) => void;
 
-type JSONValue = string | number | boolean | {
+type JSONValue = string | number | boolean | Date | {
     [x: string]: JSONValue;
 } | Array<JSONValue> | undefined | null;
 type JSONObject = {
@@ -33,15 +33,19 @@ type Datum<T> = {
     value: number;
     percent?: number;
 };
+type EmptyDatum<T> = {
+    key: T;
+    value?: number | null;
+    percent?: number;
+};
 type CategoryDim = string;
-type CoordinatesCategoryDim = [
-    number,
-    number,
-    string | undefined | null
-];
+type TwoCategoryDim = [number | string | Date, string | undefined | null];
+type CoordinatesCategoryDim = [number, number, string | undefined | null];
 type CategoryDatum = Datum<CategoryDim>;
+type TwoCategoryDatum = EmptyDatum<TwoCategoryDim>;
 type CoordinatesCategoryDatum = Datum<CoordinatesCategoryDim>;
 type CategoryData = CategoryDatum[];
+type TwoCategoryData = TwoCategoryDatum[];
 type CoordinatesCategoryData = CoordinatesCategoryDatum[];
 type ArcDatum = PieArcDatum<CategoryDatum>;
 type BarDatum = {
@@ -50,13 +54,34 @@ type BarDatum = {
     width?: number;
 };
 type DotDatum = {
-    data: CoordinatesCategoryDatum;
-    x: number;
-    y: number;
+    data: EmptyDatum<CoordinatesCategoryDim | TwoCategoryDim>;
+    x: string | number | Date;
+    y?: number | null;
     r: number;
+    category?: string | null;
+};
+type LinePointDatum = {
+    x?: number | string | Date;
+    y?: number;
+    category?: string | null;
+};
+type Statistic = {
+    key: string;
+    value: number;
+    percent?: number;
+    min?: number;
+    max?: number;
+    values?: number[];
+    first?: number;
+    last?: number;
+    trending?: {
+        overall?: number;
+        latest?: number;
+    };
 };
+type Statistics = Statistic[];
 type LegendItemDatum = {
-    data: CategoryDatum;
+    data: Statistic;
 };
 
 /** TOOLTIP */
@@ -65,6 +90,7 @@ declare const TooltipVariant: {
     label: string;
     value: string;
     percent: string;
+    custom: string;
 };
 type TooltipVariant = ValueOf<typeof TooltipVariant>;
 /** LEGEND */
@@ -72,6 +98,7 @@ declare const LabelVariant: {
     readonly label: "label";
     readonly value: "value";
     readonly percent: "percent";
+    readonly custom: "custom";
 };
 type LabelVariant = ValueOf<typeof LabelVariant>;
 
@@ -160,7 +187,7 @@ interface UseColorProps {
     /** Theme. */
     theme: ChartTheme;
     /** Name of the field that will be used to categorize the data. */
-    category: string;
+    category: string | ((d: JSONObject) => string);
 }
 declare const useColor: ({ data, theme, category }: UseColorProps) => ScaleOrdinal<string, string, never>;
 
@@ -342,6 +369,7 @@ interface AxisProps extends Omit<ComponentProps<'g'>, 'scale'> {
     position?: AxisPosition;
     /** Scale (d3.js) used to generate the axis. */
     scale: AnyScale;
+    tickFormat?: ((d: NumericValue) => string) | ((d: StringValue) => string) | ((d: Date) => string) | ((d: ScaleValue) => string);
     tickPadding?: number;
     tickRotation?: number;
     tickSize?: number;
@@ -426,7 +454,7 @@ declare const StyledChartContainer: styled_components.StyledComponent<"div", any
 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>;
 
-interface LocaleText$2 {
+interface LocaleText$3 {
     emptyChartText: string;
 }
 type BarChartDimensions = ChartDimensions & {
@@ -455,7 +483,7 @@ interface BarChartProps extends ChartContainerProps {
         color?: string;
     }) => string | ReactElement;
     /** Labels and texts. */
-    localeText?: LocaleText$2;
+    localeText?: LocaleText$3;
     /** Method to be called on a click on a bar. */
     onBarClick?: (datum: BarDatum) => void;
     /** Orientation of the bar. */
@@ -484,16 +512,28 @@ declare const StyledBarChartEmptyText: styled_components.StyledComponent<"div",
     $textSize: number;
 }, never>;
 
+/**
+ * Component's variant.
+ */
+declare const DotVariant: {
+    readonly plain: "plain";
+    readonly hollow: "hollow";
+};
+type DotVariant = ValueOf<typeof DotVariant>;
 /**
  * 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>;
+    scaleX: ScaleLinear$1<number, number, never> | ScaleTime$2<number, number, never> | ScalePoint$2<string>;
     /** 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>;
+    /** Variant. */
+    variant?: DotVariant;
 }
-type StyledDotProps = StyledDataPointProps & Omit<DotProps, 'scaleX' | 'scaleY'>;
+type StyledDotProps = StyledDataPointProps & Omit<DotProps, 'scaleX' | 'scaleY'> & {
+    $variant: DotProps['variant'];
+};
 
 declare const Dot: Comp<DotProps, SVGGElement>;
 
@@ -502,14 +542,14 @@ declare const Dot: Comp<DotProps, SVGGElement>;
  */
 declare const StyledDot: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data"> & {
     $clickable: boolean;
-} & Omit<DotProps, "scaleX" | "scaleY">, never>;
+} & Omit<DotProps, "scaleX" | "scaleY"> & {
+    $variant: DotVariant | undefined;
+}, never>;
 
 /**
  * Component props.
  */
 interface LegendItemProps extends Pick<DataPointProps<LegendItemDatum>, 'color' | 'data' | 'id' | 'index' | 'isSelected' | 'labelDecorator' | 'onClick' | 'previousData' | 'role' | 'tooltipVariant'>, Omit<ComponentProps<'li'>, 'onClick' | 'role'> {
-    /** Total used to compute percentage. */
-    total?: number;
     /** Variant. */
     variant?: LabelVariant;
 }
@@ -519,7 +559,7 @@ interface LegendItemProps extends Pick<DataPointProps<LegendItemDatum>, 'color'
  */
 interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick'>, ContainerProps {
     /** Data. */
-    data: (CategoryDatum & {
+    data: (Statistic & {
         color: string;
     })[];
     /** Method to determine whether a slice is selected or not. */
@@ -550,6 +590,104 @@ declare const StyledLegend: styled_components.StyledComponent<"ul", any, Omit<Le
     $width?: string | number | undefined;
 }, never>;
 
+/**
+ * Component props.
+ */
+interface LineProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'>, Pick<DotProps, 'id' | 'isSelected' | 'role'> {
+    /** Line generator used to determine the path of the line. */
+    createLine: Line$1<LinePointDatum>;
+    /** Points used to compute the line path. */
+    data: LinePointDatum[];
+    /** Previous data used for animation. */
+    previousData?: LinePointDatum[];
+}
+type StyledLineProps = Omit<LineProps, 'createLine' | 'data'>;
+
+declare const Line: Comp<LineProps, SVGGElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledLine: styled_components.StyledComponent<"g", any, StyledLineProps, never>;
+
+/**
+ * Component's labels variant.
+ */
+declare const LineChartLabelVariant: {
+    readonly none: "none";
+    readonly externalLabel: "externalLabel";
+    readonly externalLabelValue: "externalLabelValue";
+    readonly externalLabelPercent: "externalLabelPercent";
+};
+type LineChartLabelVariant = ValueOf<typeof LineChartLabelVariant>;
+interface LocaleText$2 {
+    emptyChartText: string;
+}
+type LineChartDimensions = ChartDimensions & {
+    fontSize: number;
+};
+/**
+ * Component props.
+ */
+interface LineChartProps extends ChartContainerProps {
+    /** 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. */
+    dotRole?: DotProps['role'];
+    /** Component to use if the chart is empty (replacing the default one). */
+    emptyComponent?: ReactNode;
+    /** Method to determine whether a dot is selected or not. */
+    isDotSelected?: (datum: DotDatum) => boolean | undefined;
+    /** Method to override the data labels. */
+    labelDecorator?: (datum: DotDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
+    /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
+    labelVariant?: LineChartLabelVariant;
+    /** Props to forward to the Legend block. Can be used to make the legend selectable. */
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'>;
+    /** Labels and texts. */
+    localeText?: LocaleText$2;
+    /** Method to be called on a click on a dot. */
+    onDotClick?: (datum: DotDatum) => void;
+    /** LineChart size. */
+    size?: ChartSize | LineChartDimensions;
+    /** 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;
+    /** X axis variant. */
+    xAxisVariant?: AxisVariant;
+    /** X axis placement. */
+    xAxisPlacement?: 'bottom' | 'top' | 'both';
+    /** X axis tick format. */
+    xAxisTickFormat?: ((d: NumericValue) => string) | ((d: StringValue) => string) | ((d: Date) => string) | ((d: ScaleValue) => string);
+    /** X axis tick values. */
+    xAxisTickValues?: TicksSpec;
+    /** String to Date. */
+    dateParser?: (value: string) => Date;
+    /** Y axis variant. */
+    yAxisVariant?: AxisVariant;
+    /** Y axis placement. */
+    yAxisPlacement?: 'right' | 'left' | 'both';
+}
+type StyledLineChartProps = LineChartProps & {};
+
+declare const LineChart: Comp<LineChartProps, HTMLDivElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledLineChart: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, LineChartProps, never>;
+declare const StyledLineChartEmptyText: styled_components.StyledComponent<"div", any, {
+    $maxWidth: number;
+    $textSize: number;
+}, never>;
+
 /**
  * Component variant.
  */
@@ -737,4 +875,4 @@ declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div
     $textSize: number;
 }, never>;
 
-export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoryData, CategoryDatum, CategoryDim, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, 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, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, 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 };
+export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoryData, CategoryDatum, CategoryDim, 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, Line, LineChart, LineChartDimensions, LineChartLabelVariant, LineChartProps, LinePointDatum, LineProps, NumericValue, PieChart, PieChartDimensions, PieChartLabelVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLabelVariant, ScatterPlotProps, ScatterPlotVariant, 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, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };