@redsift/charts 8.0.0-alpha.1 → 8.0.0-alpha.3

package/CONTRIBUTING.md

@@ -355,9 +355,9 @@ yarn dev:website
 
 Then, open [http://localhost:3000](http://localhost:3000) in your browser.
 
-To add documentation for a component, a MDX file should be created in the `packages/website/pages/` folder and more precisely inside the subfolder corresponding to the section the page belongs to (i.e. `packages/website/pages/forms/checkbox.mdx` for the `Checkbox` component inside the `Forms` section).
+To add documentation for a component, a MDX file should be created in the `apps/website/pages/` folder and more precisely inside the subfolder corresponding to the section the page belongs to (i.e. `apps/website/pages/forms/checkbox.mdx` for the `Checkbox` component inside the `Forms` section).
 
-To appear in the website's Side Panel, the page should be listed in `packages/website/components/CustomAppSidePanel/CustomAppSidePanel.tsx`) under the corresponding section.
+To appear in the website's Side Panel, the page should be listed in `apps/website/components/CustomAppSidePanel/CustomAppSidePanel.tsx`) under the corresponding section.
 
 A component page should be structured as following:
 
@@ -380,7 +380,7 @@ To display a prop table, use the `PropsTable` component as following:
 <PropsTable component="Button" />
 ```
 
-To display a demo, first create a demo (a simple `tsx` file) in the demo folder (`packages/website/demo/`) inside a subfolder with the name of the component (i.e. `packages/website/demo/button/coloring` for a coloring demo of the `Button` component). Then use the `DemoBlock` 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" />

package/index.d.ts

@@ -55,6 +55,9 @@ type DotDatum = {
     y: number;
     r: number;
 };
+type LegendItemDatum = {
+    data: CategoryDatum;
+};
 
 /** TOOLTIP */
 declare const TooltipVariant: {
@@ -247,6 +250,15 @@ type StyledDataPointProps = Omit<DataPointProps<any>, 'data'> & {
     $clickable: boolean;
 };
 
+declare const DataPoint: Comp<DataPointProps<any>, SVGGElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledDataPoint: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<DataPointProps<any>, "data"> & {
+    $clickable: boolean;
+}, never>;
+
 /**
  * Component props.
  */
@@ -292,6 +304,15 @@ declare const StyledArcs: styled_components.StyledComponent<"g", any, Omit<ArcsP
 /**
  * Component variant.
  */
+declare const AxisVariant: {
+    readonly none: "none";
+    readonly line: "line";
+    readonly lineTick: "lineTick";
+    readonly tick: "tick";
+    readonly tickValue: "tickValue";
+    readonly default: "default";
+};
+type AxisVariant = ValueOf<typeof AxisVariant>;
 declare const AxisPosition: {
     top: string;
     right: string;
@@ -318,6 +339,8 @@ interface AxisProps extends Omit<ComponentProps<'g'>, 'scale'> {
     tickRotation?: number;
     tickSize?: number;
     tickValues?: TicksSpec;
+    /** Variant. */
+    variant?: AxisVariant;
     /** X position. */
     x?: number;
     /** Y position. */
@@ -390,35 +413,6 @@ 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>;
 
-/**
- * Component props.
- */
-interface LegendProps extends ComponentProps<'ul'> {
-    /** Data. */
-    data: (CategoryDatum & {
-        color: string;
-    })[];
-    /** Variant. */
-    variant?: LabelVariant;
-    /** Width. */
-    width?: string;
-}
-type StyledLegendProps = Omit<LegendProps, 'data'> & {
-    $width?: LegendProps['width'];
-};
-
-declare const Legend: Comp<LegendProps, HTMLUListElement>;
-
-/**
- * Component style.
- */
-declare const StyledLegend: styled_components.StyledComponent<"ul", any, Omit<LegendProps, "data"> & {
-    $width?: string | undefined;
-}, never>;
-declare const StyledLabel: styled_components.StyledComponent<"li", any, {
-    $color: string;
-}, never>;
-
 interface LocaleText$2 {
     emptyChartText: string;
 }
@@ -469,6 +463,70 @@ declare const StyledBarChartEmptyText: styled_components.StyledComponent<"div",
     $textSize: number;
 }, never>;
 
+/**
+ * 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>;
+    /** 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>;
+}
+type StyledDotProps = StyledDataPointProps & Omit<DotProps, 'scaleX' | 'scaleY'>;
+
+declare const Dot: Comp<DotProps, SVGGElement>;
+
+/**
+ * Component style.
+ */
+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>;
+
+/**
+ * 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;
+}
+
+/**
+ * Component props.
+ */
+interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick'> {
+    /** Data. */
+    data: (CategoryDatum & {
+        color: string;
+    })[];
+    /** Method to determine whether a slice is selected or not. */
+    isLegendItemSelected?: (datum: LegendItemDatum) => void;
+    /** Method to override the data labels. */
+    labelDecorator?: (datum: LegendItemDatum) => string;
+    /** Method to be called on a click on a legend item. */
+    onLegendItemClick?: (datum: LegendItemDatum) => void;
+    /** LegendItem role. Used to indicate that legend items are to be considered buttons or links. If an onClick is provided, the legend items will have the role `button` unless specifically set to `link` with this prop. */
+    legendItemRole?: LegendItemProps['role'];
+    /** Variant. */
+    variant?: LabelVariant;
+    /** Width. */
+    width?: string;
+}
+type StyledLegendProps = Omit<LegendProps, 'data'> & {
+    $width?: LegendProps['width'];
+};
+
+declare const Legend: Comp<LegendProps, HTMLUListElement>;
+
+/**
+ * Component style.
+ */
+declare const StyledLegend: styled_components.StyledComponent<"ul", any, Omit<LegendProps, "data"> & {
+    $width?: string | undefined;
+}, never>;
+
 /**
  * Component variant.
  */
@@ -556,16 +614,6 @@ declare const StyledPieChartEmptyText: styled_components.StyledComponent<"div",
     $isDonut: boolean;
 }, never>;
 
-/**
- * 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>;
-    /** 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>;
-}
-
 /**
  * Component variant.
  */
@@ -608,6 +656,8 @@ interface ScatterPlotProps extends ChartContainerProps {
     labelDecorator?: (datum: DotDatum) => string;
     /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
     labelVariant?: ScatterPlotLabelVariant;
+    /** 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;
     /** Method called on brush. */
@@ -626,6 +676,10 @@ interface ScatterPlotProps extends ChartContainerProps {
     tooltipVariant?: TooltipVariant;
     /** Variant. */
     variant?: ScatterPlotVariant;
+    /** X axis variant. */
+    xAxisVariant?: AxisVariant;
+    /** Y axis variant. */
+    yAxisVariant?: AxisVariant;
 }
 type StyledScatterPlotProps = ScatterPlotProps & {};
 
@@ -640,4 +694,4 @@ declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div
     $textSize: number;
 }, never>;
 
-export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoryData, CategoryDatum, CategoryDim, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, Datum, DotDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, 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, StyledLabel, 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, 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 };