@redsift/charts 8.0.0-alpha.2 → 8.0.0-alpha.4

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: {
@@ -483,11 +486,29 @@ declare const StyledDot: styled_components.StyledComponent<_redsift_design_syste
 /**
  * Component props.
  */
-interface LegendProps extends ComponentProps<'ul'> {
+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. */
@@ -505,9 +526,6 @@ declare const Legend: Comp<LegendProps, HTMLUListElement>;
 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>;
 
 /**
  * Component variant.
@@ -638,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. */
@@ -674,4 +694,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, 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, 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 };