@redsift/charts 7.0.2 → 7.1.0

package/index.d.ts

@@ -1,5 +1,5 @@
 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';
@@ -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";
+};
+declare type HorizontalBarChartSize = ValueOf$1<typeof HorizontalBarChartSize>;
+/**
+ * Component theme.
+ */
+declare const HorizontalBarChartTheme: {
+    readonly default: "default";
+    readonly dark: "dark";
+    readonly darker: "darker";
+    readonly monochrome: "monochrome";
+};
+declare type HorizontalBarChartTheme = ValueOf$1<typeof HorizontalBarChartTheme>;
+/**
+ * Tooltip label variant.
+ */
+declare const HorizontalBarChartTooltipVariant: {
+    none: string;
+    label: string;
+    value: string;
+    percent: string;
+};
+declare 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;
+}
+declare 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;
+}
+declare 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>;
+}
+declare 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.
  */
@@ -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. */
@@ -142,18 +249,20 @@ interface PieChartProps extends ComponentProps<'div'> {
 }
 declare 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'> & {
+declare 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 };