@redsift/charts 7.0.2 → 7.1.1-alpha.0

package/index.d.ts

@@ -1,13 +1,13 @@
 import { PieArcDatum as PieArcDatum$1 } from 'd3-shape';
-import { ScaleOrdinal } from 'd3';
+import { ScaleOrdinal, ScaleLinear } from 'd3';
 import { ValueOf as ValueOf$1, Comp } from '@redsift/design-system';
 import { ComponentProps } from 'react';
 import * as styled_components from 'styled-components';
 
 /** Get types of the values of a record. */
-declare type ValueOf<T extends Record<any, any>> = T[keyof T];
+type ValueOf<T extends Record<any, any>> = T[keyof T];
 
-declare type ChartDimensions = {
+type ChartDimensions = {
     width: number;
     height: number;
     marginTop?: number;
@@ -15,19 +15,19 @@ declare type ChartDimensions = {
     marginBottom?: number;
     marginLeft?: number;
 };
-declare type Datum = {
+type Datum = {
     name: string;
     value: number;
 };
-declare type PieArcDatum = PieArcDatum$1<Datum>;
+type PieArcDatum = PieArcDatum$1<Datum>;
 declare const ColorTheme: {
     readonly default: "default";
     readonly dark: "dark";
     readonly darker: "darker";
     readonly monochrome: "monochrome";
 };
-declare type ColorTheme = ValueOf<typeof ColorTheme>;
-declare type SuccessDangerColorTheme = {
+type ColorTheme = ValueOf<typeof ColorTheme>;
+type SuccessDangerColorTheme = {
     success: string;
     warning: string;
     danger: string;
@@ -52,6 +52,111 @@ declare const successDangerScheme: {
 };
 declare const getColorScale: (theme: ColorTheme | SuccessDangerColorTheme, isEmpty?: boolean) => ScaleOrdinal<string, string>;
 
+/**
+ * Component size.
+ */
+declare const HorizontalBarChartSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+type HorizontalBarChartSize = ValueOf$1<typeof HorizontalBarChartSize>;
+/**
+ * Component theme.
+ */
+declare const HorizontalBarChartTheme: {
+    readonly default: "default";
+    readonly dark: "dark";
+    readonly darker: "darker";
+    readonly monochrome: "monochrome";
+};
+type HorizontalBarChartTheme = ValueOf$1<typeof HorizontalBarChartTheme>;
+/**
+ * Tooltip label variant.
+ */
+declare const HorizontalBarChartTooltipVariant: {
+    none: string;
+    label: string;
+    value: string;
+    percent: string;
+};
+type HorizontalBarChartTooltipVariant = ValueOf$1<typeof HorizontalBarChartTooltipVariant>;
+interface LocaleText$1 {
+    emptyChartText: 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, should be a list of objects containing a name and a value. */
+    data: Datum[];
+    /** Labels and texts. */
+    localeText?: LocaleText$1;
+    /** Method to be called on a click on a bar. */
+    onBarClick?: (data: Datum) => 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;
+    /** 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';
+    /** 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;
+    /** 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: string | 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>;
+}
+type StyledHorizontalBarChartAxisBottomProps = Omit<HorizontalBarChartAxisBottomProps, 'areXLabelsRotated' | 'chartHeight' | 'd3scale'> & {};
+
+declare const HorizontalBarChart: Comp<HorizontalBarChartProps, HTMLDivElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledHorizontalBarChart: styled_components.StyledComponent<"div", any, Omit<HorizontalBarChartProps, "data">, never>;
+declare const StyledHorizontalBarChartTitle: styled_components.StyledComponent<"div", 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, {
+    $maxWidth: number;
+    $textSize: number;
+}, never>;
+declare const StyledHorizontalBarChartBar: styled_components.StyledComponent<"g", any, Omit<HorizontalBarChartBarProps, "data" | "color" | "height" | "width" | "chartId" | "gap" | "index" | "isEmpty" | "showTooltip" | "tooltipPercent" | "tooltipLabelOnly"> & {
+    $clickable: boolean;
+}, never>;
+declare const StyledHorizontalBarChartTooltip: styled_components.StyledComponent<"div", any, {}, never>;
+declare const StyledHorizontalBarChartAxisBottom: styled_components.StyledComponent<"g", any, {}, never>;
+
 /**
  * Component size.
  */
@@ -60,7 +165,7 @@ declare const PieChartSize: {
     readonly medium: "medium";
     readonly large: "large";
 };
-declare type PieChartSize = ValueOf$1<typeof PieChartSize>;
+type PieChartSize = ValueOf$1<typeof PieChartSize>;
 /**
  * Component variant.
  */
@@ -70,7 +175,7 @@ declare const PieChartVariant: {
     readonly donut: "donut";
     readonly spacedDonut: "spacedDonut";
 };
-declare type PieChartVariant = ValueOf$1<typeof PieChartVariant>;
+type PieChartVariant = ValueOf$1<typeof PieChartVariant>;
 /**
  * Component's labels variant.
  */
@@ -81,7 +186,7 @@ declare const PieChartLabelVariant: {
     readonly externalLabelValue: "externalLabelValue";
     readonly externalLabelPercent: "externalLabelPercent";
 };
-declare type PieChartLabelVariant = ValueOf$1<typeof PieChartLabelVariant>;
+type PieChartLabelVariant = ValueOf$1<typeof PieChartLabelVariant>;
 /**
  * Component theme.
  */
@@ -91,7 +196,7 @@ declare const PieChartTheme: {
     readonly darker: "darker";
     readonly monochrome: "monochrome";
 };
-declare type PieChartTheme = ValueOf$1<typeof PieChartTheme>;
+type PieChartTheme = ValueOf$1<typeof PieChartTheme>;
 /**
  * Tooltip label variant.
  */
@@ -101,7 +206,7 @@ declare const PieChartTooltipVariant: {
     value: string;
     percent: string;
 };
-declare type PieChartTooltipVariant = ValueOf$1<typeof PieChartTooltipVariant>;
+type PieChartTooltipVariant = ValueOf$1<typeof PieChartTooltipVariant>;
 interface LocaleText {
     emptyChartText: string;
 }
@@ -125,6 +230,8 @@ interface PieChartProps extends ComponentProps<'div'> {
     others?: boolean | string;
     /** PieChart size. */
     size?: PieChartSize;
+    /** 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';
     /** 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. */
@@ -140,20 +247,22 @@ interface PieChartProps extends ComponentProps<'div'> {
     /** Tooltip variant. */
     tooltipVariant?: PieChartTooltipVariant;
 }
-declare type StyledPieChartProps = Omit<PieChartProps, 'data'> & {};
+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: string | null;
     tooltipLabelOnly: boolean;
     isEmpty: boolean;
 }
-declare type StyledPieChartArcProps = Omit<PieChartArcProps, 'color' | 'data' | 'index' | 'path' | 'spaced' | 'showTooltip' | 'tooltipPercent' | 'tooltipLabelOnly' | 'isEmpty'> & {
+type StyledPieChartArcProps = Omit<PieChartArcProps, 'chartId' | 'color' | 'data' | 'index' | 'path' | 'spaced' | 'showTooltip' | 'tooltipPercent' | 'tooltipLabelOnly' | 'isEmpty'> & {
     $spaced: boolean;
     $clickable: boolean;
 };
@@ -179,10 +288,10 @@ declare const StyledPieChartEmptyText: styled_components.StyledComponent<"div",
 declare const StyledPieChartLabel: styled_components.StyledComponent<"li", any, {
     $color: string;
 }, never>;
-declare const StyledPieChartArc: styled_components.StyledComponent<"g", any, Omit<PieChartArcProps, "data" | "path" | "color" | "spaced" | "index" | "showTooltip" | "tooltipPercent" | "tooltipLabelOnly" | "isEmpty"> & {
+declare const StyledPieChartArc: styled_components.StyledComponent<"g", any, Omit<PieChartArcProps, "data" | "path" | "color" | "chartId" | "index" | "isEmpty" | "showTooltip" | "tooltipPercent" | "tooltipLabelOnly" | "spaced"> & {
     $spaced: boolean;
     $clickable: boolean;
 }, never>;
-declare const Tooltip: styled_components.StyledComponent<"div", any, {}, never>;
+declare const StyledPieChartTooltip: styled_components.StyledComponent<"div", any, {}, never>;
 
-export { ChartDimensions, ColorTheme, Datum, PieArcDatum, PieChart, PieChartArcProps, PieChartLabelVariant, PieChartProps, PieChartSize, PieChartTheme, PieChartTooltipVariant, PieChartVariant, StyledPieChart, StyledPieChartArc, StyledPieChartArcProps, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartLabel, StyledPieChartProps, StyledPieChartTitle, SuccessDangerColorTheme, Tooltip, getColorScale, monochrome, scheme, successDangerScheme };
+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, StyledHorizontalBarChartTooltip, StyledPieChart, StyledPieChartArc, StyledPieChartArcProps, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartLabel, StyledPieChartProps, StyledPieChartTitle, StyledPieChartTooltip, SuccessDangerColorTheme, getColorScale, monochrome, scheme, successDangerScheme };