@redsift/charts 9.6.0 → 10.0.0-alpha.0

package/CONTRIBUTING.md

@@ -311,7 +311,7 @@ export const StyledBadge = styled.div<StyledBadgeProps>`
     $color
       ? css`
           color: var(--redsift-color-neutral-white);
-          background-color: var(--redsift-color-${$color}-primary);
+          background-color: var(--redsift-color-presentation-color-${$color}-standard);
         `
       : ''}
 `;
@@ -381,7 +381,7 @@ To display a prop table, use the `PropsTable` component as following:
 To display a demo, first create a demo (a simple `tsx` file) in the demo folder (`apps/website/demo/`) inside a subfolder with the name of the component (i.e. `apps/website/demo/button/coloring` for a coloring demo of the `Button` component). Then use the `DemoBlock` as following:
 
 ```ts
-<DemoBlock path="button/coloring" />
+<DemoBlock withThemeSwitcher path="button/coloring" />
 ```
 
 To display simple code, use the `CodeBlock` as following:

package/index.d.ts

@@ -1,6 +1,6 @@
 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 { ValueOf, Theme, Comp, ContainerProps } from '@redsift/design-system';
 import { PieArcDatum } from 'd3-shape';
 import { MutableRefObject, ComponentProps, ReactElement, RefObject, ReactNode } from 'react';
 import * as d3_scale from 'd3-scale';
@@ -66,14 +66,18 @@ interface AxisProps extends Omit<ComponentProps<'g'>, 'scale'> {
     /** Y position. */
     y?: number;
 }
-type StyledAxisProps = Omit<AxisProps, 'areXLabelsRotated' | 'size' | 'scale'> & {};
+type StyledAxisProps = Omit<AxisProps, 'areXLabelsRotated' | 'size' | 'scale'> & {
+    $theme: Theme;
+};
 
 declare const Axis: Comp<AxisProps, SVGGElement>;
 
 /**
  * Component style.
  */
-declare const StyledAxis: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<AxisProps, "size" | "scale" | "areXLabelsRotated">, never>;
+declare const StyledAxis: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<AxisProps, "size" | "scale" | "areXLabelsRotated"> & {
+    $theme: Theme;
+}, never>;
 
 type ChartAxesProps = {
     /** String to Date. */
@@ -282,12 +286,14 @@ type ChartTheme = ColorTheme | SuccessDangerColorTheme | CustomColorTheme;
 interface UseColorProps {
     /** Dataset to use to generate the chart. */
     data: JSONArray;
-    /** Theme. */
-    theme: ChartTheme;
+    /** Color palette to use. */
+    colorTheme: ChartTheme;
     /** Name of the field that will be used to categorize the data. */
     category: string | ((d: JSONObject) => string);
+    /** Theme */
+    theme: Theme;
 }
-declare const useColor: ({ data, theme, category }: UseColorProps) => ScaleOrdinal<string, string, never>;
+declare const useColor: ({ data, colorTheme, category, theme }: UseColorProps) => ScaleOrdinal<string, string, never>;
 
 type SortingMethod = 'none' | 'asc-key' | 'desc-key' | 'asc-value' | 'desc-value' | string[] | ((a: CategoryDatum, b: CategoryDatum) => 1 | -1);
 declare const getSortingMethod: (sortingMethod: SortingMethod) => (a: CategoryDatum, b: CategoryDatum) => 1 | -1;
@@ -295,16 +301,18 @@ declare const getSortingMethod: (sortingMethod: SortingMethod) => (a: CategoryDa
 interface UseFormatCategoricalDataProps {
     /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
     data: CategoryData;
-    /** Theme. */
-    theme: ChartTheme;
+    /** Color palette to use. */
+    colorTheme: ChartTheme;
     /** Define how to sort categories. */
     sortingMethod: SortingMethod;
     /** Number of categories to use, the rest being put into a new category called "Others". */
     caping?: number;
     /** 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;
+    /** Theme */
+    theme: Theme;
 }
-declare const useFormatCategoricalData: ({ data, caping, sortingMethod, others, theme, }: UseFormatCategoricalDataProps) => {
+declare const useFormatCategoricalData: ({ data, caping, sortingMethod, others, colorTheme, theme, }: UseFormatCategoricalDataProps) => {
     data: CategoryData;
     colorScale: d3_scale.ScaleOrdinal<string, string, never>;
 };
@@ -348,9 +356,15 @@ declare const successDangerScheme: {
     success: string;
     warning: string;
     danger: string;
-    neutral: string;
+    neutralLight: string;
+    neutralDark: string;
 };
-declare const getColorScale: (theme: ChartTheme, domain?: string[], isEmpty?: boolean) => ScaleOrdinal<string, string>;
+declare const getColorScale: ({ colorTheme, domain, isEmpty, theme, }: {
+    colorTheme: ChartTheme;
+    domain?: string[] | undefined;
+    isEmpty?: boolean | undefined;
+    theme: Theme;
+}) => ScaleOrdinal<string, string>;
 
 /**
  * Component props.
@@ -378,6 +392,8 @@ interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale
     previousData?: T;
     /** Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable. */
     role?: 'button' | 'link' | 'option';
+    /** Theme. */
+    theme?: Theme;
     /** Tooltip variant. */
     tooltipVariant?: TooltipVariant;
     /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
@@ -411,6 +427,7 @@ interface ArcProps extends DataPointProps<ArcDatum> {
 }
 type StyledArcProps = StyledDataPointProps & Omit<ArcProps, 'createArc'> & {
     $hasStroke: ArcProps['hasStroke'];
+    $theme: Theme;
 };
 
 declare const Arc: Comp<ArcProps, SVGGElement>;
@@ -422,6 +439,7 @@ declare const StyledArc: styled_components.StyledComponent<_redsift_design_syste
     $clickable: boolean;
 } & Omit<ArcProps, "createArc"> & {
     $hasStroke: boolean | undefined;
+    $theme: Theme;
 }, never>;
 
 /**
@@ -469,7 +487,9 @@ interface BarProps extends DataPointProps<BarDatum> {
     /** Width of the bar in vertical orientation. */
     width?: number;
 }
-type StyledBarProps = StyledDataPointProps & Omit<BarProps, 'scale'>;
+type StyledBarProps = StyledDataPointProps & Omit<BarProps, 'scale'> & {
+    $theme: Theme;
+};
 
 declare const Bar: Comp<BarProps, SVGGElement>;
 
@@ -478,7 +498,9 @@ declare const Bar: Comp<BarProps, SVGGElement>;
  */
 declare const StyledBar: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data"> & {
     $clickable: boolean;
-} & Omit<BarProps, "scale">, never>;
+} & Omit<BarProps, "scale"> & {
+    $theme: Theme;
+}, never>;
 
 /**
  * Component props.
@@ -496,17 +518,27 @@ interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, Cont
     onReset?: () => void;
     /** Title. */
     title?: string | ReactElement;
+    /** Theme. */
+    theme?: Theme;
 }
-type StyledChartContainerProps = ChartContainerProps & {};
+type StyledChartContainerProps = Omit<ChartContainerProps, 'theme'> & {
+    $theme: Theme;
+};
 
 declare const ChartContainer: Comp<ChartContainerProps, HTMLDivElement>;
 
 /**
  * Component style.
  */
-declare const StyledChartContainer: styled_components.StyledComponent<"div", any, ChartContainerProps, never>;
-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>;
+declare const StyledChartContainer: styled_components.StyledComponent<"div", any, Omit<ChartContainerProps, "theme"> & {
+    $theme: Theme;
+}, never>;
+declare const StyledChartContainerTitle: styled_components.StyledComponent<_redsift_design_system.Comp<_redsift_design_system.FlexboxProps, HTMLDivElement>, any, Omit<ChartContainerProps, "theme"> & {
+    $theme: Theme;
+}, never>;
+declare const StyledChartContainerCaption: styled_components.StyledComponent<"p", any, Omit<ChartContainerProps, "theme"> & {
+    $theme: Theme;
+}, never>;
 
 interface LocaleText$3 {
     emptyChartText: string;
@@ -553,7 +585,7 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     /** 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.  */
-    theme?: ChartTheme;
+    colorTheme?: ChartTheme;
     /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
     tooltipDecorator?: (data: BarDatum, props?: {
         index?: number;
@@ -562,6 +594,8 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     }) => string | ReactElement;
     /** Tooltip variant. */
     tooltipVariant?: TooltipVariant;
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledBarChartProps = BarChartProps & {};
 
@@ -574,6 +608,7 @@ declare const StyledBarChart: styled_components.StyledComponent<_redsift_design_
 declare const StyledBarChartEmptyText: styled_components.StyledComponent<"div", any, {
     $maxWidth: number;
     $textSize: number;
+    $theme: Theme;
 }, never>;
 
 /**
@@ -597,6 +632,7 @@ interface DotProps extends DataPointProps<DotDatum> {
 }
 type StyledDotProps = StyledDataPointProps & Omit<DotProps, 'scaleX' | 'scaleY'> & {
     $variant: DotProps['variant'];
+    $theme: Theme;
 };
 
 declare const Dot: Comp<DotProps, SVGGElement>;
@@ -608,6 +644,7 @@ declare const StyledDot: styled_components.StyledComponent<_redsift_design_syste
     $clickable: boolean;
 } & Omit<DotProps, "scaleX" | "scaleY"> & {
     $variant: DotVariant | undefined;
+    $theme: _redsift_design_system.Theme;
 }, never>;
 
 /**
@@ -727,8 +764,6 @@ interface LineChartProps extends ChartContainerProps, ChartAxesProps {
         isSelected?: boolean;
         color?: string;
     }) => string | ReactElement;
-    /** @deprecated Use legendVariant instead. */
-    labelVariant?: LineChartLegendVariant;
     /** 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. */
@@ -746,7 +781,7 @@ interface LineChartProps extends ChartContainerProps, ChartAxesProps {
     /** 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;
+    colorTheme?: ChartTheme;
     /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
     tooltipDecorator?: (data: DotDatum, props?: {
         index?: number;
@@ -755,6 +790,8 @@ interface LineChartProps extends ChartContainerProps, ChartAxesProps {
     }) => string | ReactElement;
     /** Tooltip variant. */
     tooltipVariant?: TooltipVariant;
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledLineChartProps = LineChartProps & {};
 
@@ -767,6 +804,7 @@ declare const StyledLineChart: styled_components.StyledComponent<_redsift_design
 declare const StyledLineChartEmptyText: styled_components.StyledComponent<"div", any, {
     $maxWidth: number;
     $textSize: number;
+    $theme: Theme;
 }, never>;
 
 /**
@@ -825,8 +863,6 @@ interface PieChartProps extends ChartContainerProps {
         isSelected?: boolean;
         color?: string;
     }) => string | ReactElement;
-    /** @deprecated Use legendVariant instead. */
-    labelVariant?: PieChartLegendVariant;
     /** 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. */
@@ -852,7 +888,7 @@ interface PieChartProps extends ChartContainerProps {
     /** Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. */
     text?: string | ReactElement | ((data: PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
     /** 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;
+    colorTheme?: ChartTheme;
     /** PieChart variant. */
     variant?: PieChartVariant;
     /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
@@ -863,6 +899,8 @@ interface PieChartProps extends ChartContainerProps {
     }) => string | ReactElement;
     /** Tooltip variant. */
     tooltipVariant?: TooltipVariant;
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledPieChartProps = PieChartProps & {};
 
@@ -876,11 +914,13 @@ declare const StyledPieChartCenterText: styled_components.StyledComponent<"div",
     $maxWidth: number;
     $textSize: number;
     $smallTextSize: number;
+    $theme: Theme;
 }, never>;
 declare const StyledPieChartEmptyText: styled_components.StyledComponent<"div", any, {
     $maxWidth: number;
     $textSize: number;
     $isDonut: boolean;
+    $theme: Theme;
 }, never>;
 
 /**
@@ -936,8 +976,6 @@ interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {
         isSelected?: boolean;
         color?: string;
     }) => string | ReactElement;
-    /** @deprecated Use legendVariant instead. */
-    labelVariant?: ScatterPlotLegendVariant;
     /** 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. */
@@ -959,7 +997,7 @@ interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {
     /** 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;
+    colorTheme?: ChartTheme;
     /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
     tooltipDecorator?: (data: DotDatum, props?: {
         index?: number;
@@ -970,6 +1008,8 @@ interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {
     tooltipVariant?: TooltipVariant;
     /** Variant. */
     variant?: ScatterPlotVariant;
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledScatterPlotProps = ScatterPlotProps & {};
 
@@ -982,6 +1022,7 @@ declare const StyledScatterPlot: styled_components.StyledComponent<_redsift_desi
 declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div", any, {
     $maxWidth: number;
     $textSize: number;
+    $theme: Theme;
 }, never>;
 
 export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, 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, 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, empty, getColorScale, getSortingMethod, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };