@redsift/charts 10.2.0 → 10.3.0-alpha.10

package/index.js

@@ -1,5 +1,5 @@
 import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scaleBand, extent, scaleTime, scalePoint, line, arc, pie, min, descending, scaleSqrt, max } from 'd3';
-import { RedsiftColorPresentationBlueDefault, RedsiftColorPresentationGreyDark, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationGreyDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationGreenDark, RedsiftColorPresentationPinkDark, RedsiftColorPresentationAquaDark, RedsiftColorPresentationBrownDark, RedsiftColorPresentationRedDark, RedsiftColorPresentationYellowDark, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationBlueDark, RedsiftColorPresentationGreenDarker, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationRedDarker, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationGreyDarker, RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationGreyDarkerer, RedsiftColorPresentationGreenLight, RedsiftColorPresentationPinkLight, RedsiftColorPresentationAquaLight, RedsiftColorPresentationBrownLight, RedsiftColorPresentationRedLight, RedsiftColorPresentationYellowLight, RedsiftColorPresentationPurpleLight, RedsiftColorPresentationOrangeLight, RedsiftColorPresentationBlueLight, RedsiftColorPresentationGreyLight, RedsiftColorPresentationGreenLighter, RedsiftColorPresentationPinkLighter, RedsiftColorPresentationAquaLighter, RedsiftColorPresentationBrownLighter, RedsiftColorPresentationRedLighter, RedsiftColorPresentationYellowLighter, RedsiftColorPresentationPurpleLighter, RedsiftColorPresentationOrangeLighter, RedsiftColorPresentationBlueLighter, RedsiftColorPresentationGreyLighter, RedsiftColorPresentationGreenLighterer, RedsiftColorPresentationPinkLighterer, RedsiftColorPresentationAquaLighterer, RedsiftColorPresentationBrownLighterer, RedsiftColorPresentationRedLighterer, RedsiftColorPresentationYellowLighterer, RedsiftColorPresentationPurpleLighterer, RedsiftColorPresentationOrangeLighterer, RedsiftColorPresentationBlueLighterer, RedsiftColorPresentationGreyLighterer, Theme, useId, useTheme, Text, Number as Number$1, baseStyling, baseContainer, focusRing, Flexbox, warnIfNoAccessibleLabelFound, useLocalizedStringFormatter, ThemeProvider, Heading, Button } from '@redsift/design-system';
+import { RedsiftColorPresentationBlueDefault, RedsiftColorPresentationGreyDark, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationGreyDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationGreenDark, RedsiftColorPresentationPinkDark, RedsiftColorPresentationAquaDark, RedsiftColorPresentationBrownDark, RedsiftColorPresentationRedDark, RedsiftColorPresentationYellowDark, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationBlueDark, RedsiftColorPresentationGreenDarker, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationRedDarker, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationGreyDarker, RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationGreyDarkerer, RedsiftColorPresentationGreenLight, RedsiftColorPresentationPinkLight, RedsiftColorPresentationAquaLight, RedsiftColorPresentationBrownLight, RedsiftColorPresentationRedLight, RedsiftColorPresentationYellowLight, RedsiftColorPresentationPurpleLight, RedsiftColorPresentationOrangeLight, RedsiftColorPresentationBlueLight, RedsiftColorPresentationGreyLight, RedsiftColorPresentationGreenLighter, RedsiftColorPresentationPinkLighter, RedsiftColorPresentationAquaLighter, RedsiftColorPresentationBrownLighter, RedsiftColorPresentationRedLighter, RedsiftColorPresentationYellowLighter, RedsiftColorPresentationPurpleLighter, RedsiftColorPresentationOrangeLighter, RedsiftColorPresentationBlueLighter, RedsiftColorPresentationGreyLighter, RedsiftColorPresentationGreenLighterer, RedsiftColorPresentationPinkLighterer, RedsiftColorPresentationAquaLighterer, RedsiftColorPresentationBrownLighterer, RedsiftColorPresentationRedLighterer, RedsiftColorPresentationYellowLighterer, RedsiftColorPresentationPurpleLighterer, RedsiftColorPresentationOrangeLighterer, RedsiftColorPresentationBlueLighterer, RedsiftColorPresentationGreyLighterer, Theme, useId, useTheme, Text, Number as Number$1, baseStyling, baseContainer, focusRing, Flexbox, warnIfNoAccessibleLabelFound, useMessageFormatter, ThemeProvider, Heading, Button } from '@redsift/design-system';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useState, useLayoutEffect, forwardRef, useCallback, useContext } from 'react';
 import classNames from 'classnames';
@@ -362,9 +362,14 @@ var k=/^--/;function I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeo
  */
 const StyledDataPoint = styled(it.g)``;
 
-const _excluded$q = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
+const _excluded$q = ["as", "href"],
+  _excluded2$5 = ["anchorProps", "children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
 const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      anchorProps: {
+        as,
+        href
+      } = {},
       children,
       className,
       data,
@@ -378,7 +383,8 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       tooltipVariant,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
+    anchorProps = _objectWithoutProperties(props.anchorProps, _excluded$q),
+    forwardedProps = _objectWithoutProperties(props, _excluded2$5);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const theme = useTheme(propsTheme);
@@ -405,21 +411,24 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   };
+  if (data.data.key === 'Line Chart') {
+    console.log(showTooltip, isEmpty, text);
+  }
   const DataPointComponent = /*#__PURE__*/React__default.createElement(StyledDataPoint, _extends({
-    tabIndex: onClick ? 0 : undefined
+    tabIndex: onClick ? 0 : undefined,
+    "aria-label": showTooltip && !isEmpty ? labelDecorator ? text : `${data.data.key}, ${data.data.value}` : undefined,
+    "aria-labelledby": !showTooltip && !isEmpty ? `${id}-title` : undefined,
+    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
+    onClick: onClick ? () => onClick(data) : undefined,
+    onKeyDown: onClick ? e => onKeyDown(e) : undefined,
+    role: role ? role : onClick ? 'button' : href ? undefined : 'img'
   }, forwardedProps, {
     className: classNames(className, `_${index}`, {
       selected: isSelected,
       deselected: isDeselected
     }),
     ref: ref,
-    "aria-label": showTooltip && !isEmpty ? `${text}: ${data.data.value}` : undefined,
-    "aria-labelledby": !showTooltip && !isEmpty ? `${id}-title` : undefined,
-    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
     id: id,
-    onClick: onClick ? () => onClick(data) : undefined,
-    onKeyDown: onClick ? e => onKeyDown(e) : undefined,
-    role: role ? role : onClick ? 'button' : undefined,
     $clickable: Boolean(onClick)
   }), children, !showTooltip && !isEmpty ? /*#__PURE__*/React__default.createElement("title", {
     id: `${id}-title`
@@ -428,7 +437,9 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       placement: "right",
       theme: theme
-    }, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, isTooltipCustom ? tooltipDecorator(data, {
+    }, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, href !== undefined ? /*#__PURE__*/React__default.createElement(as || 'a', _objectSpread2({
+      href
+    }, anchorProps), DataPointComponent) : DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, isTooltipCustom ? tooltipDecorator(data, {
       index,
       isSelected: propsIsSelected,
       color: props.color
@@ -499,24 +510,9 @@ const config = (() => ({
 const _excluded$p = ["className", "createArc", "hasStroke", "previousData"];
 const COMPONENT_NAME$c = 'Arc';
 const CLASSNAME$c = 'redsift-arc';
-const DEFAULT_PROPS$c = {
-  color: monochrome,
-  index: 0,
-  previousData: {
-    data: {
-      key: '',
-      value: 0
-    },
-    startAngle: 0,
-    endAngle: 0,
-    padAngle: 0,
-    value: 0,
-    index: 0
-  }
-};
 const Arc = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    color,
+    color = monochrome,
     data,
     isSelected: propsIsSelected,
     onClick,
@@ -526,7 +522,17 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       createArc,
       hasStroke,
-      previousData
+      previousData = {
+        data: {
+          key: '',
+          value: 0
+        },
+        startAngle: 0,
+        endAngle: 0,
+        padAngle: 0,
+        value: 0,
+        index: 0
+      }
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$p);
   const theme = useTheme();
@@ -555,7 +561,6 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Arc.className = CLASSNAME$c;
-Arc.defaultProps = DEFAULT_PROPS$c;
 Arc.displayName = COMPONENT_NAME$c;
 
 /**
@@ -566,7 +571,6 @@ const StyledArcs = styled.g``;
 const _excluded$o = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "sliceProps", "tooltipVariant"];
 const COMPONENT_NAME$b = 'Arcs';
 const CLASSNAME$b = 'redsift-arcs';
-const DEFAULT_PROPS$b = {};
 const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       arcs,
@@ -637,7 +641,6 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
   })) : null);
 });
 Arcs.className = CLASSNAME$b;
-Arcs.defaultProps = DEFAULT_PROPS$b;
 Arcs.displayName = COMPONENT_NAME$b;
 
 /**
@@ -811,36 +814,25 @@ const computeTicks = _ref => {
 const _excluded$n = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "tickFormat", "tickRemodelling", "variant", "x", "y"];
 const COMPONENT_NAME$a = 'Axis';
 const CLASSNAME$a = 'redsift-axis';
-const DEFAULT_PROPS$a = {
-  position: AxisPosition.bottom,
-  legendOffset: -32,
-  legendPosition: 'end',
-  tickPadding: 5,
-  tickRotation: 0,
-  tickSize: 5,
-  variant: AxisVariant.default,
-  x: 0,
-  y: 0
-};
 const getAxisType = position => [AxisPosition.top, AxisPosition.bottom].includes(position) ? 'x' : 'y';
 const Axis = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       length,
       legend,
-      legendOffset,
-      legendPosition,
-      position,
+      legendOffset = -32,
+      legendPosition = 'end',
+      position = AxisPosition.bottom,
       scale,
-      tickPadding,
-      tickRotation,
-      tickSize,
+      tickPadding = 5,
+      tickRotation = 0,
+      tickSize = 5,
       tickValues,
       tickFormat,
       tickRemodelling,
-      variant,
-      x,
-      y
+      variant = AxisVariant.default,
+      x = 0,
+      y = 0
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$n);
   const theme = useTheme();
@@ -938,6 +930,7 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }));
   return /*#__PURE__*/React__default.createElement(StyledAxis, _extends({
+    "aria-hidden": "true",
     className: classNames(Axis.className, className),
     $theme: theme
   }, forwardedProps, {
@@ -971,7 +964,6 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
   }) : null, legendNode);
 });
 Axis.className = CLASSNAME$a;
-Axis.defaultProps = DEFAULT_PROPS$a;
 Axis.displayName = COMPONENT_NAME$a;
 
 /**
@@ -1053,27 +1045,12 @@ const StyledBar = styled(DataPoint)`
 const _excluded$m = ["className", "gap", "height", "maxHeight", "orientation", "previousData", "scale", "scalePosition", "width"];
 const COMPONENT_NAME$9 = 'Bar';
 const CLASSNAME$9 = 'redsift-bar';
-const DEFAULT_PROPS$9 = {
-  color: monochrome,
-  index: 0,
-  gap: 5,
-  height: 40,
-  maxHeight: 100,
-  orientation: BarOrientation.horizontal,
-  previousData: {
-    data: {
-      key: '',
-      value: 0
-    }
-  },
-  width: 40
-};
 const getValue = data => data.cumulativeValue !== undefined ? data.cumulativeValue : data.value;
 const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    color,
+    color = monochrome,
     data,
-    index,
+    index = 0,
     isSelected: propsIsSelected,
     labelDecorator,
     onClick,
@@ -1081,14 +1058,19 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const {
       className,
-      gap,
-      height,
-      maxHeight,
-      orientation,
-      previousData,
+      gap = 5,
+      height = 40,
+      maxHeight = 100,
+      orientation = BarOrientation.horizontal,
+      previousData = {
+        data: {
+          key: '',
+          value: 0
+        }
+      },
       scale,
       scalePosition,
-      width
+      width = 40
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$m);
   const theme = useTheme();
@@ -1134,7 +1116,6 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   }, text) : null);
 });
 Bar.className = CLASSNAME$9;
-Bar.defaultProps = DEFAULT_PROPS$9;
 Bar.displayName = COMPONENT_NAME$9;
 
 /**
@@ -1153,18 +1134,26 @@ const BarChartLegendVariant = {
  */
 
 var reset$1 = "Reset";
-var enUS = {
+var enUS$4 = {
+	"static-chart": "Static chart.",
+	"interactive-chart": "Interactive chart.",
+	"view-as-data-table": "View as data table",
+	"table-summary": "Table representation of chart.",
 	reset: reset$1
 };
 
 var reset = "Réinitialiser";
-var frFR = {
+var frFR$4 = {
+	"static-chart": "Graphique statique.",
+	"interactive-chart": "Graphique intéractif.",
+	"view-as-data-table": "Voir au format table de données",
+	"table-summary": "Représentation du graphique sous forme de table de données.",
 	reset: reset
 };
 
-var intlMessages = {
-  'en-US': enUS,
-  'fr-FR': frFR
+var intlMessages$4 = {
+  'en-US': enUS$4,
+  'fr-FR': frFR$4
 };
 
 /**
@@ -1189,6 +1178,7 @@ const StyledChartContainer = styled.div`
 
   svg {
     display: block;
+    user-select: none;
   }
 
   text {
@@ -1201,6 +1191,32 @@ const StyledChartContainer = styled.div`
     `;
 }}
   }
+
+  table {
+    border-collapse: collapse;
+    border: 1px solid #ebebeb;
+    margin: 10px auto;
+    text-align: center;
+    width: 100%;
+    max-width: 500px;
+
+    td, th, caption {
+        padding: 0.5em;
+    }
+
+    caption {
+      padding: 1em 0;
+      font-size: 1.2em;
+      color: #555;
+    }
+
+    thead tr, tr:nth-child(even) {
+      background: #f8f8f8;
+    }
+
+    th {
+      font-weight: 600; 
+    }
 `;
 const StyledChartContainerTitle = styled(Flexbox)``;
 const StyledChartContainerCaption = styled.p`
@@ -1211,10 +1227,9 @@ const StyledChartContainerCaption = styled.p`
   margin: 8px;
 `;
 
-const _excluded$l = ["aria-label", "aria-labelledby", "description", "chartProps", "chartRef", "children", "className", "id", "title", "onReset", "theme"];
+const _excluded$l = ["aria-label", "aria-labelledby", "description", "chartProps", "chartRef", "children", "className", "id", "title", "onReset", "theme", "mode", "definition", "interactionExplanation", "descriptionForAssistiveTechnology", "dataTableRepresentation", "xAxisDefinition", "yAxisDefinition"];
 const COMPONENT_NAME$8 = 'ChartContainer';
 const CLASSNAME$8 = 'redsift-chart-container';
-const DEFAULT_PROPS$8 = {};
 const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       'aria-label': propsAriaLabel,
@@ -1227,27 +1242,74 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
       id: propsId,
       title,
       onReset,
-      theme: propsTheme
+      theme: propsTheme,
+      mode = 'static',
+      definition,
+      interactionExplanation,
+      descriptionForAssistiveTechnology,
+      dataTableRepresentation,
+      xAxisDefinition,
+      yAxisDefinition
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$l);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const theme = useTheme(propsTheme);
+  const [viewAsDataTable, setViewAsDataTable] = useState(false);
   warnIfNoAccessibleLabelFound(props, [title]);
-  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const format = useMessageFormatter(intlMessages$4);
   const ariaLabel = propsAriaLabel ? propsAriaLabel : propsAriaLabelledby || title ? undefined : undefined;
   const ariaLabelledby = propsAriaLabelledby ? propsAriaLabelledby : title ? `id${id}__title` : undefined;
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     value: {
       theme
     }
-  }, /*#__PURE__*/React__default.createElement(StyledChartContainer, _extends({
-    $theme: theme
-  }, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement("figure", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(StyledChartContainer, _extends({
+    $theme: theme,
+    role: "region",
+    "aria-hidden": "false"
+  }, ariaLabel ? {
+    'aria-label': `${ariaLabel}. ${mode}`
+  } : {}, ariaLabelledby ? {
+    'aria-labelledby': `${ariaLabelledby} id${id}__interactive-or-not`
+  } : {}, forwardedProps, {
     ref: ref,
     className: classNames(ChartContainer.className, className),
     id: id
-  }), title || onReset ? /*#__PURE__*/React__default.createElement(StyledChartContainerTitle, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    id: `id${id}__screen-reader-region-before`,
+    "aria-hidden": "false",
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    "aria-hidden": "false",
+    style: {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      marginTop: '-3px',
+      opacity: '0.01'
+    }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    id: `id${id}__interactive-or-not`,
+    "aria-hidden": "true",
+    style: {
+      display: 'none'
+    }
+  }, format(`${mode}-chart`)), ariaLabel ? /*#__PURE__*/React__default.createElement("p", null, `${ariaLabel}. ${format(`${mode}-chart`)}`) : /*#__PURE__*/React__default.createElement("p", {
+    "aria-labelledby": `${ariaLabelledby} id${id}__interactive-or-not`
+  }), /*#__PURE__*/React__default.createElement("div", null, descriptionForAssistiveTechnology !== null && descriptionForAssistiveTechnology !== void 0 ? descriptionForAssistiveTechnology : description), /*#__PURE__*/React__default.createElement("div", null, interactionExplanation), /*#__PURE__*/React__default.createElement("div", null, definition), dataTableRepresentation ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
+    tabIndex: -1,
+    "aria-expanded": viewAsDataTable,
+    onClick: () => setViewAsDataTable(!viewAsDataTable)
+  }, format('view-as-data-table'), ', ', ariaLabel ? /*#__PURE__*/React__default.createElement("span", null, ariaLabel) : /*#__PURE__*/React__default.createElement("span", {
+    "aria-labelledby": ariaLabelledby
+  }))) : null, /*#__PURE__*/React__default.createElement("div", null, xAxisDefinition), /*#__PURE__*/React__default.createElement("div", null, yAxisDefinition))), title || onReset ? /*#__PURE__*/React__default.createElement(StyledChartContainerTitle, {
+    "aria-hidden": "true",
     $theme: theme,
     alignItems: "center",
     justifyContent: "space-between",
@@ -1260,20 +1322,26 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
     color: "grey",
     variant: "unstyled",
     onClick: onReset
-  }, stringFormatter.format('reset')) : null) : null, /*#__PURE__*/React__default.createElement(Flexbox, {
+  }, format('reset')) : null) : null, /*#__PURE__*/React__default.createElement(Flexbox, {
     flexDirection: "column"
-  }, children ? /*#__PURE__*/React__default.createElement("div", _extends({}, chartProps, {
+  }, children ? /*#__PURE__*/React__default.createElement("div", _extends({
+    "aria-hidden": "false",
+    dir: "ltr"
+  }, chartProps, {
     ref: chartRef,
-    className: `${ChartContainer.className}__content`,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby
+    className: `${ChartContainer.className}__content`
   }), children) : null, description ? /*#__PURE__*/React__default.createElement(StyledChartContainerCaption, {
+    "aria-hidden": "true",
     $theme: theme,
     className: `${ChartContainer.className}__description`
-  }, description) : null)));
+  }, description) : null, viewAsDataTable && dataTableRepresentation ? /*#__PURE__*/React__default.createElement("table", {
+    tabIndex: -1,
+    summary: format('table-summary')
+  }, ariaLabel ? /*#__PURE__*/React__default.createElement("caption", null, ariaLabel) : /*#__PURE__*/React__default.createElement("caption", {
+    "aria-labelledby": ariaLabelledby
+  }), dataTableRepresentation.header, dataTableRepresentation.body) : null)))));
 });
 ChartContainer.className = CLASSNAME$8;
-ChartContainer.defaultProps = DEFAULT_PROPS$8;
 ChartContainer.displayName = COMPONENT_NAME$8;
 
 /**
@@ -1447,7 +1515,48 @@ const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }), "Loading...");
 });
 
-const _excluded$i = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "margins", "onBarClick", "orientation", "others", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues"];
+var interactive$7 = "interactive";
+var enUS$3 = {
+	interactive: interactive$7,
+	"static": "static",
+	"interactive-chart": "Interactive Bar Chart",
+	"static-chart": "Static Bar Chart",
+	"definition-linear": "Linear Bar Chart with {barLength} bars.",
+	"definition-linear-with-categories": "Linear Bar Chart with {categoryLength} categories and {barLength} bars.",
+	"definition-ordinal": "Ordinal Bar Chart with {barLength} bars.",
+	"x-axis-numbers-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying numbers from {start, number} to {end, number}.",
+	"y-axis-numbers-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying numbers from {start, number} to {end, number}.",
+	"x-axis-dates-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying dates from {start, date, ::yyyyMMdd} to {end, date, ::yyyyMMdd}.",
+	"y-axis-dates-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying dates from {start, date, ::yyyyMMdd} to {end, date, ::yyyyMMdd}.",
+	"x-axis-categories-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying categories.",
+	"y-axis-categories-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying categories.",
+	"series-legend": "{category}, category {categoryIndex} of {categoryLength} with {barLength} bars"
+};
+
+var interactive$6 = "interactif";
+var frFR$3 = {
+	interactive: interactive$6,
+	"static": "statique",
+	"interactive-chart": "Diagrammes à bandes interactif",
+	"static-chart": "Diagrammes à bandes statique",
+	"definition-linear": "Diagrammes à bandes contenant {barLength} bandes réparties sur un axe linéraire.",
+	"definition-linear-with-categories": "Diagrammes à bandes contenant {categoryLength} catégories et {barLength} bandes réparties sur un axe linéraire.",
+	"definition-ordinal": "Diagrammes à bandes contenant {barLength} bandes.",
+	"x-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des nombres allant de {start, number} à {end, number}.",
+	"y-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des nombres allant de {start, number} à {end, number}.",
+	"x-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
+	"y-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
+	"x-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des categories.",
+	"y-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des categories.",
+	"series-legend": "{category}, catégorie {categoryIndex} sur {categoryLength} contenant {barLength} bandes"
+};
+
+var intlMessages$3 = {
+  'en-US': enUS$3,
+  'fr-FR': frFR$3
+};
+
+const _excluded$i = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "getBarAnchorProps", "labelDecorator", "margins", "onBarClick", "orientation", "others", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues"];
 const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areXLabelsRotated,
@@ -1457,6 +1566,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       data: propsData,
       id,
       isBarSelected,
+      getBarAnchorProps,
       labelDecorator,
       margins: propsMargins,
       onBarClick,
@@ -1485,6 +1595,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$i);
   const cache = useRef();
   const theme = useTheme();
+  const format = useMessageFormatter(intlMessages$3);
   const {
     data,
     colorScale
@@ -1525,13 +1636,47 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     return value;
   }))]).range(isHorizontal ? [0, chartWidth] : [chartHeight, 0]), [size]);
   const scaleCategory = useMemo(() => scaleBand().domain(data.filter(datum => datum.value).map(datum => datum.key)).range([0, isHorizontal ? chartHeight : chartWidth]), [size]);
-  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
+  const bars = data.filter(datum => datum.value);
+  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({
+    mode: typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive') : format('static'),
+    definition: format('definition-ordinal', {
+      barLength: bars.length
+    }),
+    xAxisDefinition: isHorizontal ? format('x-axis-numbers-definition', {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1,
+      start: scale.domain()[0],
+      end: scale.domain()[1]
+    }) : format('x-axis-categories-definition', {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1
+    }),
+    yAxisDefinition: isHorizontal ? format('y-axis-categories-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1
+    }) : format('y-axis-numbers-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1,
+      start: scale.domain()[0],
+      end: scale.domain()[1]
+    }),
+    dataTableRepresentation: {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Key"), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, bars.map(datum => /*#__PURE__*/React__default.createElement("tr", {
+        key: datum.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, datum.key), /*#__PURE__*/React__default.createElement("td", null, datum.value))))
+    }
+  }, forwardedProps, {
     id: id,
     className: className,
     ref: ref
   }), /*#__PURE__*/React__default.createElement("svg", {
     width: width,
-    height: height
+    height: height,
+    "aria-label": typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
+    "aria-hidden": "false"
   }, /*#__PURE__*/React__default.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
   }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
@@ -1584,7 +1729,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     variant: yAxisVariant
   }) : null), /*#__PURE__*/React__default.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
-  }, data.filter(datum => datum.value).map((datum, index) => {
+  }, bars.map((datum, index) => {
     const percent = datum.value / total;
     const to = {
       data: _objectSpread2(_objectSpread2({}, datum), {}, {
@@ -1594,25 +1739,27 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     const from = cache.current ? {
       data: cache.current[index]
     } : undefined;
-    return /*#__PURE__*/React__default.createElement(Bar, _extends({}, barProps, {
+    return /*#__PURE__*/React__default.createElement(Bar, _extends({
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
       data: to,
       gap: gap,
-      height: isHorizontal ? barHeight : undefined,
       id: `id${id}__bar-${index}`,
       index: index,
       isSelected: Boolean(isBarSelected(to)),
       key: `bar _${index}`,
       labelDecorator: labelDecorator,
       maxHeight: isHorizontal ? undefined : chartHeight,
+      anchorProps: getBarAnchorProps ? getBarAnchorProps(to) : undefined,
       onClick: onBarClick,
       orientation: orientation,
       previousData: from,
-      role: barRole,
       scale: scale,
       scalePosition: scaleCategory,
-      tooltipVariant: tooltipVariant,
-      width: isHorizontal ? undefined : barWidth
+      tooltipVariant: tooltipVariant
+    }, barProps, {
+      width: isHorizontal ? undefined : barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? barProps.width : barWidth,
+      height: isHorizontal ? barProps !== null && barProps !== void 0 && barProps.height && typeof barProps.height === 'number' ? barProps.height : barHeight : undefined,
+      role: barRole
     }));
   }))));
 });
@@ -1687,13 +1834,9 @@ const StyledLegendItem = styled.li`
 const _excluded$h = ["className", "color", "data", "id", "variant"];
 const COMPONENT_NAME$7 = 'LegendItem';
 const CLASSNAME$7 = 'redsift-legend-item';
-const DEFAULT_PROPS$7 = {
-  color: monochrome,
-  index: 0
-};
 const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    index,
+    index = 0,
     isSelected: propsIsSelected,
     labelDecorator,
     legendDecorator,
@@ -1702,7 +1845,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const {
       className,
-      color,
+      color = monochrome,
       data,
       id: propsId,
       variant
@@ -1771,27 +1914,22 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, text) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, text)));
 });
 LegendItem.className = CLASSNAME$7;
-LegendItem.defaultProps = DEFAULT_PROPS$7;
 LegendItem.displayName = COMPONENT_NAME$7;
 
 const _excluded$g = ["className", "data", "isLegendItemSelected", "labelDecorator", "legendDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
-  _excluded2 = ["color"];
+  _excluded2$4 = ["color"];
 const COMPONENT_NAME$6 = 'Legend';
 const CLASSNAME$6 = 'redsift-chart-legend';
-const DEFAULT_PROPS$6 = {
-  isLegendItemSelected: () => true,
-  variant: LegendVariant.label
-};
 const Legend = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       data,
-      isLegendItemSelected,
+      isLegendItemSelected = () => true,
       labelDecorator,
       legendDecorator,
       legendItemRole,
       onLegendItemClick,
-      variant,
+      variant = LegendVariant.label,
       width
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$g);
@@ -1805,7 +1943,7 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
     let {
         color
       } = _ref,
-      datum = _objectWithoutProperties(_ref, _excluded2);
+      datum = _objectWithoutProperties(_ref, _excluded2$4);
     return /*#__PURE__*/React__default.createElement(LegendItem, {
       data: {
         data: _objectSpread2(_objectSpread2({}, datum), {}, {
@@ -1827,10 +1965,10 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Legend.className = CLASSNAME$6;
-Legend.defaultProps = DEFAULT_PROPS$6;
 Legend.displayName = COMPONENT_NAME$6;
 
-const _excluded$f = ["barProps", "className", "data", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "xScaleType", "dateParser"];
+const _excluded$f = ["barProps", "className", "data", "id", "getBarAnchorProps", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "xScaleType", "dateParser"],
+  _excluded2$3 = ["extraLegendItems"];
 const getKey = datum => Array.isArray(datum.key) ? datum.key[0] : datum.key;
 const filterData = (hasCategory, data, filterFn) => {
   if (hasCategory) {
@@ -1851,6 +1989,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       data: propsData,
       id,
+      getBarAnchorProps,
       isBarSelected,
       labelDecorator,
       legendDecorator,
@@ -1889,6 +2028,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$f);
   const cache = useRef();
   const theme = useTheme();
+  const format = useMessageFormatter(intlMessages$3);
   const hasCategory = propsData[0] && Array.isArray(propsData[0].key) && propsData[0].key.length >= 2 && propsData[0].key[1] !== null && propsData[0].key[1] !== undefined;
   const xScaleType = propsXScaleType ? propsXScaleType : getKey(propsData[0]) instanceof Date ? 'Date' : typeof getKey(propsData[0]) === 'number' ? 'number' : typeof getKey(propsData[0]) === 'string' && isValidDate(getKey(propsData[0])) ? 'dateString' : undefined;
   const data = xScaleType === 'number' ? filterData(hasCategory, propsData, datum => typeof getKey(datum) === 'number' && !Number.isNaN(getKey(datum))) : xScaleType === 'dateString' ? filterData(hasCategory, propsData, datum => isValidDate(getKey(datum))) : xScaleType === 'Date' ? filterData(hasCategory, propsData, datum => getKey(datum) instanceof Date) : propsData;
@@ -1909,9 +2049,9 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, propsMargins);
   const chartHeight = height - margins.top - margins.bottom;
   const chartWidth = width - margins.left - margins.right;
-  const numberOfRows = filterData(hasCategory, data, datum => datum.value).length;
+  const numberOfBars = filterData(hasCategory, data, datum => datum.value).length;
   const gap = 5;
-  let barWidth = chartWidth / (numberOfRows * 2) - gap;
+  let barWidth = chartWidth / (numberOfBars * 2) - gap;
   const scaleX = (() => {
     if (xScaleType === 'number') {
       var _ref, _ref2;
@@ -1928,7 +2068,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       domain[0] = (_ref3 = xAxisMinValue) !== null && _ref3 !== void 0 ? _ref3 : domain[0];
       domain[1] = (_ref4 = xAxisMaxValue) !== null && _ref4 !== void 0 ? _ref4 : domain[1];
       const startDate = xAxisTickValues && typeof xAxisTickValues === 'function' && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[0]), -1) : new Date(domain[0]);
-      const endDate = xAxisTickValues && typeof xAxisTickValues === 'function' && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[1]), 0) : new Date(domain[1]);
+      const endDate = xAxisTickValues && typeof xAxisTickValues === 'function' && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[1]), 1) : new Date(domain[1]);
       return scaleTime().domain([startDate, endDate]).range([0, chartWidth]).nice();
     } else {
       var _ref5, _ref6;
@@ -1996,7 +2136,81 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     const minimalGap = Math.min(...bars.map((bar, i) => i > 0 ? Math.abs(bar.key - bars[i - 1].key) : undefined).filter(k => k)) * 0.9;
     barWidth = Math.min(barWidth, chartWidth / ((scaleX.domain()[1] - scaleX.domain()[0]) / minimalGap), chartWidth / (xAxisTickValues && typeof xAxisTickValues !== 'string' ? typeof xAxisTickValues === 'number' ? xAxisTickValues : Array.isArray(xAxisTickValues) ? xAxisTickValues.length : xAxisTickValues.range(scaleX.domain()[0], scaleX.domain()[1]).length : 1));
   }
-  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
+  const categories = [];
+  const pivotedTable = bars.reduce((acc, item) => {
+    const {
+      key,
+      category,
+      value
+    } = item;
+    if (!categories.includes(category)) {
+      categories.push(category);
+    }
+    const formattedKey = xAxisTickFormat ? xAxisTickFormat(key) : key.toString();
+    let entry = acc.find(e => e.key === formattedKey);
+    if (!entry) {
+      entry = {
+        key: formattedKey
+      };
+      acc.push(entry);
+    }
+    entry[category] = value;
+    return acc;
+  }, []);
+  const _ref9 = legendProps || {},
+    {
+      extraLegendItems
+    } = _ref9,
+    forwardedLegendProps = _objectWithoutProperties(_ref9, _excluded2$3);
+  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({
+    mode: typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive') : format('static'),
+    definition: hasCategory ? format('definition-linear-with-categories', {
+      categoryLength: categories.length,
+      barLength: bars.length
+    }) : format('definition-linear', {
+      barLength: bars.length
+    }),
+    xAxisDefinition: format(`x-axis-${xScaleType === 'number' ? 'numbers' : 'dates'}-definition`, {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1,
+      start: scaleX.domain()[0],
+      end: scaleX.domain()[1]
+    }),
+    yAxisDefinition: format('y-axis-numbers-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1,
+      start: scaleY.domain()[0],
+      end: scaleY.domain()[1]
+    }),
+    dataTableRepresentation: hasCategory ? {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: category,
+        scope: "col"
+      }, category)))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, pivotedTable.map(row => /*#__PURE__*/React__default.createElement("tr", {
+        key: row.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, row.key), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: `${row.key}-${category}-${row[category]}`,
+        scope: "col"
+      }, row[category])))))
+    } : {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, bars.map(datum => {
+        const key = xAxisTickFormat ? xAxisTickFormat(datum.key) : datum.key.toString();
+        return /*#__PURE__*/React__default.createElement("tr", {
+          key: key
+        }, /*#__PURE__*/React__default.createElement("th", {
+          scope: "row"
+        }, key), /*#__PURE__*/React__default.createElement("td", null, datum.value));
+      }))
+    }
+  }, forwardedProps, {
     id: id,
     className: className,
     ref: ref
@@ -2007,37 +2221,58 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement("svg", {
     ref: svgRef,
     width: width,
-    height: height
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: `translate(${margins.left},${margins.top})`
-  }, bars.map((bar, index) => {
-    const to = {
-      data: bar
-    };
-    const from = cache.current ? {
-      data: cache.current[index]
-    } : undefined;
-    return /*#__PURE__*/React__default.createElement(Bar, _extends({}, barProps, {
-      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
-      data: to,
-      gap: gap,
-      height: undefined,
-      id: `id${id}__bar-${index}`,
-      index: index,
-      isSelected: Boolean(isBarSelected(to)),
-      key: `bar _${index}`,
-      labelDecorator: labelDecorator,
-      maxHeight: scaleY(bar.cumulativeValue - bar.value),
-      onClick: onBarClick,
-      orientation: BarOrientation.vertical,
-      previousData: from,
-      role: barRole,
-      scale: scaleY,
-      scalePosition: scaleX,
-      tooltipVariant: tooltipVariant,
-      width: barWidth
+    height: height,
+    "aria-label": typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
+    "aria-hidden": "false"
+  }, categories.map((category, categoryIndex) => {
+    const filteredBars = bars.filter(bar => bar.category === category);
+    return /*#__PURE__*/React__default.createElement("g", _extends({
+      key: `${id}-series-${category}`,
+      transform: `translate(${margins.left},${margins.top})`,
+      "aria-hidden": "false",
+      role: "region"
+    }, hasCategory ? {
+      'aria-label': format('series-legend', {
+        category,
+        categoryIndex: categoryIndex + 1,
+        categoryLength: categories.length,
+        barLength: filteredBars.length
+      })
+    } : {}), filteredBars.map((bar, index) => {
+      const to = {
+        data: bar,
+        category
+      };
+      const from = cache.current ? {
+        data: cache.current[index]
+      } : undefined;
+      return /*#__PURE__*/React__default.createElement(Bar, _extends({
+        color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
+        data: to,
+        gap: gap,
+        id: `id${id}__bar-${categoryIndex}.${index}`,
+        index: index,
+        isSelected: Boolean(isBarSelected(to)),
+        key: `bar _${categoryIndex}.${index}`,
+        labelDecorator: labelDecorator,
+        maxHeight: scaleY(bar.cumulativeValue - bar.value),
+        anchorProps: getBarAnchorProps ? getBarAnchorProps(to) : undefined,
+        onClick: onBarClick,
+        orientation: BarOrientation.vertical,
+        previousData: from,
+        scale: scaleY,
+        scalePosition: scaleX,
+        tooltipVariant: tooltipVariant
+      }, barProps, {
+        width: barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? barProps.width : barWidth,
+        height: undefined,
+        role: barRole
+      }));
     }));
-  }), ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`,
+    "aria-hidden": "true"
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "bottom",
     length: chartWidth,
     scale: scaleX,
@@ -2090,54 +2325,45 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
   }) : null))), hasCategory && legendVariant !== BarChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
-    data: statsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+    data: (extraLegendItems ? [...statsByCategory, ...extraLegendItems] : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
     variant: legendVariant === BarChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === BarChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === BarChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
     legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
-  }, legendProps)) : null);
+  }, forwardedLegendProps)) : null);
 });
 
-const _excluded$e = ["caping", "chartRef", "className", "data", "dataType", "emptyComponent", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipDecorator", "colorTheme", "tooltipVariant"];
+const _excluded$e = ["barRole", "caping", "chartRef", "className", "colorTheme", "data", "dataType", "emptyComponent", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBarClick", "orientation", "others", "size", "sortingMethod", "theme", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "yAxisPlacement"];
 const COMPONENT_NAME$5 = 'BarChart';
 const CLASSNAME$5 = 'redsift-barchart';
-const DEFAULT_PROPS$5 = {
-  isBarSelected: () => true,
-  orientation: BarOrientation.horizontal,
-  others: true,
-  size: ChartSize.medium,
-  sortingMethod: 'desc-value',
-  colorTheme: ColorTheme.default,
-  tooltipVariant: TooltipVariant.value,
-  localeText: {
-    emptyChartText: 'No Data'
-  },
-  xAxisPlacement: 'bottom',
-  yAxisPlacement: 'left'
-};
 const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      barRole,
       caping,
       chartRef,
       className,
+      colorTheme = ColorTheme.default,
       data: propsData,
       dataType: propsDataType,
       emptyComponent,
       id: propsId,
-      isBarSelected,
+      isBarSelected = () => true,
       labelDecorator,
       legendDecorator,
       legendVariant: propsLegendVariant,
-      localeText,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
       onBarClick,
-      orientation,
-      others,
-      size,
-      barRole,
+      orientation = BarOrientation.horizontal,
+      others = true,
+      size = ChartSize.medium,
+      sortingMethod = 'desc-value',
       theme,
       tooltipDecorator,
-      colorTheme,
-      tooltipVariant
+      tooltipVariant = TooltipVariant.value,
+      xAxisPlacement = 'bottom',
+      yAxisPlacement = 'left'
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const [_id] = useId();
@@ -2176,10 +2402,13 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       orientation: orientation,
       others: others,
       size: size,
+      sortingMethod: sortingMethod,
       theme: theme,
       tooltipDecorator: tooltipDecorator,
       colorTheme: colorTheme,
-      tooltipVariant: tooltipVariant
+      tooltipVariant: tooltipVariant,
+      xAxisPlacement: xAxisPlacement,
+      yAxisPlacement: yAxisPlacement
     }, forwardedProps, {
       ref: ref
     }));
@@ -2196,10 +2425,13 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       legendVariant: legendVariant,
       onBarClick: onBarClick,
       size: size,
+      sortingMethod: sortingMethod,
       theme: theme,
       tooltipDecorator: tooltipDecorator,
       colorTheme: colorTheme,
-      tooltipVariant: tooltipVariant
+      tooltipVariant: tooltipVariant,
+      xAxisPlacement: xAxisPlacement,
+      yAxisPlacement: yAxisPlacement
     }, forwardedProps, {
       ref: ref
     }));
@@ -2207,7 +2439,6 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
   return null;
 });
 BarChart.className = CLASSNAME$5;
-BarChart.defaultProps = DEFAULT_PROPS$5;
 BarChart.displayName = COMPONENT_NAME$5;
 
 /**
@@ -2261,20 +2492,12 @@ const StyledDot = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$d = ["className", "scaleX", "scaleY", "variant"];
+const _excluded$d = ["className", "labelDecorator", "scaleX", "scaleY", "variant"];
 const COMPONENT_NAME$4 = 'Dot';
 const CLASSNAME$4 = 'redsift-dot';
-const DEFAULT_PROPS$4 = {
-  color: monochrome,
-  index: 0,
-  labelDecorator: datum => {
-    return datum.data.key[2] !== undefined && datum.data.key[2] !== null ? datum.data.key[2] : `${datum.data.key[0]},${datum.data.key[1]}`;
-  },
-  variant: DotVariant.plain
-};
 const Dot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    color,
+    color = monochrome,
     data,
     isSelected: propsIsSelected,
     onClick,
@@ -2282,15 +2505,20 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const {
       className,
+      labelDecorator = datum => {
+        return datum.data.key[2] !== undefined && datum.data.key[2] !== null ? datum.data.key[2] : `${datum.data.key[0]},${datum.data.key[1]}`;
+      },
       scaleX,
       scaleY,
-      variant
+      variant = DotVariant.plain
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const theme = useTheme();
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
-  return /*#__PURE__*/React__default.createElement(StyledDot, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledDot, _extends({
+    labelDecorator: labelDecorator
+  }, forwardedProps, {
     ref: ref,
     className: classNames(Dot.className, className),
     $clickable: Boolean(onClick),
@@ -2306,7 +2534,6 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Dot.className = CLASSNAME$4;
-Dot.defaultProps = DEFAULT_PROPS$4;
 Dot.displayName = COMPONENT_NAME$4;
 
 /**
@@ -2317,13 +2544,9 @@ const StyledLine = styled('g')``;
 const _excluded$c = ["className", "createLine", "previousData"];
 const COMPONENT_NAME$3 = 'Line';
 const CLASSNAME$3 = 'redsift-line';
-const DEFAULT_PROPS$3 = {
-  color: monochrome,
-  previousData: []
-};
 const Line = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    color,
+    color = monochrome,
     data,
     isSelected: propsIsSelected,
     role
@@ -2331,7 +2554,7 @@ const Line = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       createLine,
-      previousData
+      previousData = []
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$c);
   const interpolator = interpolate(previousData, data);
@@ -2358,7 +2581,6 @@ const Line = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Line.className = CLASSNAME$3;
-Line.defaultProps = DEFAULT_PROPS$3;
 Line.displayName = COMPONENT_NAME$3;
 
 /**
@@ -2546,12 +2768,55 @@ const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$9 = ["className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "dateParser"];
+var interactive$5 = "interactive";
+var enUS$2 = {
+	interactive: interactive$5,
+	"static": "static",
+	"interactive-chart": "Interactive Line Chart",
+	"static-chart": "Static Line Chart",
+	"definition-linear": "Linear Line Chart with {circleLength} circles.",
+	"definition-linear-with-categories": "Linear Line Chart with {categoryLength} categories and {circleLength} circles.",
+	"definition-ordinal": "Ordinal Line Chart with {circleLength} circles.",
+	"x-axis-numbers-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying numbers from {start, number} to {end, number}.",
+	"y-axis-numbers-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying numbers from {start, number} to {end, number}.",
+	"x-axis-dates-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying dates from {start, date, ::yyyyMMdd} to {end, date, ::yyyyMMdd}.",
+	"y-axis-dates-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying dates from {start, date, ::yyyyMMdd} to {end, date, ::yyyyMMdd}.",
+	"x-axis-categories-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying categories.",
+	"y-axis-categories-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying categories.",
+	"series-legend": "{category}, line {categoryIndex} of {categoryLength} with {circleLength} circles"
+};
+
+var interactive$4 = "interactif";
+var frFR$2 = {
+	interactive: interactive$4,
+	"static": "statique",
+	"interactive-chart": "Graphique en courbe interactif",
+	"static-chart": "Graphique en courbe statique",
+	"definition-linear": "Graphique en courbe contenant {circleLength} points répartis sur un axe linéraire.",
+	"definition-linear-with-categories": "Graphique en courbe contenant {categoryLength} courbes et {circleLength} points répartis sur un axe linéraire.",
+	"definition-ordinal": "Graphique en courbe contenant {circleLength} points.",
+	"x-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des nombres allant de {start, number} à {end, number}.",
+	"y-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des nombres allant de {start, number} à {end, number}.",
+	"x-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
+	"y-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
+	"x-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des categories.",
+	"y-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des categories.",
+	"series-legend": "{category}, courbe {categoryIndex} sur {categoryLength} contenant {circleLength} points"
+};
+
+var intlMessages$2 = {
+  'en-US': enUS$2,
+  'fr-FR': frFR$2
+};
+
+const _excluded$9 = ["className", "data", "dotRole", "getDotAnchorProps", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "dateParser"],
+  _excluded2$2 = ["extraLegendItems"];
 const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       data: propsData,
       dotRole,
+      getDotAnchorProps,
       id,
       isDotSelected,
       labelDecorator,
@@ -2590,6 +2855,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$9);
   const cache = useRef();
   const theme = useTheme();
+  const format = useMessageFormatter(intlMessages$2);
   const xScaleType = propsData[0].key[0] instanceof Date ? 'Date' : typeof propsData[0].key[0] === 'number' ? 'number' : typeof propsData[0].key[0] === 'string' && isValidDate(propsData[0].key[0]) ? 'dateString' : typeof propsData[0].key[0] === 'string' ? 'string' : undefined;
   const data = xScaleType === 'number' ? propsData.filter(datum => typeof datum.key[0] === 'number' && !Number.isNaN(datum.key[0])) : xScaleType === 'dateString' ? propsData.filter(datum => isValidDate(datum.key[0])) : xScaleType === 'string' ? propsData.filter(datum => typeof datum.key[0] === 'string') : xScaleType === 'Date' ? propsData.filter(datum => datum.key[0] instanceof Date) : propsData;
   useEffect(() => {
@@ -2669,16 +2935,19 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       return 0;
     }
     return 0;
-  }).filter(d => d.value !== null).map(d => ({
-    category: d.key[1],
-    x: xScaleType === 'dateString' ? dateParser ? dateParser(d.key[0]) : new Date(Date.parse(d.key[0])) : d.key[0],
-    y: d.value,
-    data: {
-      key: d.key,
-      value: d.value
-    },
-    points: [d]
-  }));
+  }).filter(d => d.value !== null).map(d => {
+    var _d$key$;
+    return {
+      category: (_d$key$ = d.key[1]) !== null && _d$key$ !== void 0 ? _d$key$ : 'default',
+      x: xScaleType === 'dateString' ? dateParser ? dateParser(d.key[0]) : new Date(Date.parse(d.key[0])) : d.key[0],
+      y: d.value,
+      data: {
+        key: d.key,
+        value: d.value
+      },
+      points: [d]
+    };
+  });
   const lines = hasCategory ? Object.values(circles.reduce((prev, curr) => {
     if (!prev[curr.category]) {
       prev[curr.category] = [];
@@ -2687,7 +2956,83 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     return prev;
   }, {})) : [circles];
   const createLine = line().x(d => scaleX(d.x)).y(d => scaleY(d.y));
-  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({}, forwardedProps, {
+  const categories = [];
+  const pivotedTable = circles.reduce((acc, item) => {
+    const {
+      x,
+      category,
+      y
+    } = item;
+    if (!categories.includes(category)) {
+      categories.push(category);
+    }
+    const formattedKey = xAxisTickFormat ? xAxisTickFormat(x) : x.toString();
+    let entry = acc.find(e => e.key === formattedKey);
+    if (!entry) {
+      entry = {
+        key: formattedKey
+      };
+      acc.push(entry);
+    }
+    entry[category] = y;
+    return acc;
+  }, []);
+  const _ref11 = legendProps || {},
+    {
+      extraLegendItems
+    } = _ref11,
+    forwardedLegendProps = _objectWithoutProperties(_ref11, _excluded2$2);
+  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({
+    mode: typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? format('interactive') : format('static'),
+    definition: hasCategory ? format('definition-linear-with-categories', {
+      categoryLength: categories.length,
+      circleLength: circles.length
+    }) : format('definition-linear', {
+      circleLength: circles.length
+    }),
+    xAxisDefinition: xScaleType !== 'string' ? format(`x-axis-${xScaleType === 'number' ? 'numbers' : 'dates'}-definition`, {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1,
+      start: scaleX.domain()[0],
+      end: scaleX.domain()[1]
+    }) : format('x-axis-categories-definition', {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1
+    }),
+    yAxisDefinition: format('y-axis-numbers-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1,
+      start: scaleY.domain()[0],
+      end: scaleY.domain()[1]
+    }),
+    dataTableRepresentation: hasCategory ? {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: category,
+        scope: "col"
+      }, category)))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, pivotedTable.map(row => /*#__PURE__*/React__default.createElement("tr", {
+        key: row.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, row.key), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: `${row.key}-${category}-${row[category]}`,
+        scope: "col"
+      }, row[category])))))
+    } : {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, circles.map(datum => {
+        const key = xAxisTickFormat ? xAxisTickFormat(datum.x) : datum.x.toString();
+        return /*#__PURE__*/React__default.createElement("tr", {
+          key: key
+        }, /*#__PURE__*/React__default.createElement("th", {
+          scope: "row"
+        }, key), /*#__PURE__*/React__default.createElement("td", null, datum.y));
+      }))
+    }
+  }, forwardedProps, {
     id: id,
     className: className,
     ref: ref
@@ -2698,9 +3043,12 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement("svg", {
     ref: svgRef,
     width: width,
-    height: height
+    height: height,
+    "aria-label": typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
+    "aria-hidden": "false"
   }, /*#__PURE__*/React__default.createElement("g", {
-    transform: `translate(${margins.left},${margins.top})`
+    transform: `translate(${margins.left},${margins.top})`,
+    "aria-hidden": "true"
   }, lines.map((line, index) => {
     return /*#__PURE__*/React__default.createElement(Line, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(line[0].category),
@@ -2708,32 +3056,42 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       createLine: createLine,
       key: `line _${index}`
     });
-  })), /*#__PURE__*/React__default.createElement("g", {
-    transform: `translate(${margins.left},${margins.top})`
-  }, circles.map((circle, index) => {
-    const scaleXDomain = scaleX.domain();
-    const scaleYDomain = scaleY.domain();
-    if (xScaleType === 'number' && (circle.x < scaleXDomain[0] || circle.x > scaleXDomain[1] || circle.y < scaleYDomain[0] || circle.y > scaleYDomain[1])) {
-      return null;
-    }
-    const to = _objectSpread2(_objectSpread2({}, circle), {}, {
-      r: 4
-    });
-    return /*#__PURE__*/React__default.createElement(Dot, {
-      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(circle.category),
-      data: to,
-      isSelected: Boolean(isDotSelected === null || isDotSelected === void 0 ? void 0 : isDotSelected(to)),
-      key: `circle _${index}`,
-      labelDecorator: labelDecorator,
-      onClick: onDotClick,
-      role: dotRole,
-      scaleX: scaleX,
-      scaleY: scaleY,
-      tooltipDecorator: tooltipDecorator,
-      tooltipVariant: tooltipVariant,
-      variant: DotVariant.hollow
-    });
-  })), /*#__PURE__*/React__default.createElement("g", {
+  })), categories.map((category, categoryIndex) => {
+    const filteredCircles = circles.filter(circle => circle.category === category);
+    return /*#__PURE__*/React__default.createElement("g", _extends({
+      key: `${id}-series-${category}`,
+      transform: `translate(${margins.left},${margins.top})`,
+      "aria-hidden": "false",
+      role: "region"
+    }, hasCategory ? {
+      'aria-label': `${category}, category ${categoryIndex + 1} of ${categories.length} with ${filteredCircles.length} circles`
+    } : {}), filteredCircles.map((circle, index) => {
+      const scaleXDomain = scaleX.domain();
+      const scaleYDomain = scaleY.domain();
+      if (xScaleType === 'number' && (circle.x < scaleXDomain[0] || circle.x > scaleXDomain[1] || circle.y < scaleYDomain[0] || circle.y > scaleYDomain[1])) {
+        return null;
+      }
+      const to = _objectSpread2(_objectSpread2({}, circle), {}, {
+        r: 4
+      });
+      return /*#__PURE__*/React__default.createElement(Dot, {
+        id: `id${id}__circle-${categoryIndex}.${index}`,
+        color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(circle.category),
+        data: to,
+        isSelected: Boolean(isDotSelected === null || isDotSelected === void 0 ? void 0 : isDotSelected(to)),
+        anchorProps: getDotAnchorProps ? getDotAnchorProps(to) : undefined,
+        key: `circle _${categoryIndex}.${index}`,
+        labelDecorator: labelDecorator,
+        onClick: onDotClick,
+        role: dotRole,
+        scaleX: scaleX,
+        scaleY: scaleY,
+        tooltipDecorator: tooltipDecorator,
+        tooltipVariant: tooltipVariant,
+        variant: DotVariant.hollow
+      });
+    }));
+  }), /*#__PURE__*/React__default.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
   }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "bottom",
@@ -2788,33 +3146,21 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
   }) : null))), hasCategory && legendVariant !== LineChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
-    data: statsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+    data: (extraLegendItems ? [...statsByCategory, ...extraLegendItems] : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
     variant: legendVariant === LineChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === LineChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === LineChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
     legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
-  }, legendProps)) : null);
+  }, forwardedLegendProps)) : null);
 });
 
-const _excluded$8 = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onDotClick", "size", "colorTheme", "tooltipDecorator", "tooltipVariant"];
+const _excluded$8 = ["className", "colorTheme", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onDotClick", "size", "sortingMethod", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];
 const COMPONENT_NAME$2 = 'LineChart';
 const CLASSNAME$2 = 'redsift-line-chart';
-const DEFAULT_PROPS$2 = {
-  localeText: {
-    emptyChartText: 'No Data'
-  },
-  size: ChartSize.medium,
-  sortingMethod: 'desc-value',
-  colorTheme: ColorTheme.dark,
-  tooltipVariant: TooltipVariant.none,
-  xAxisVariant: AxisVariant.default,
-  xAxisPlacement: 'bottom',
-  yAxisVariant: AxisVariant.default,
-  yAxisPlacement: 'left'
-};
 const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
+      colorTheme = ColorTheme.dark,
       data: propsData,
       dotRole,
       emptyComponent,
@@ -2823,12 +3169,18 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
       labelDecorator,
       legendDecorator,
       legendVariant: propsLegendVariant,
-      localeText,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
       onDotClick,
-      size,
-      colorTheme,
+      size = ChartSize.medium,
+      sortingMethod = 'desc-value',
       tooltipDecorator,
-      tooltipVariant
+      tooltipVariant = TooltipVariant.none,
+      xAxisPlacement = 'bottom',
+      xAxisVariant = AxisVariant.default,
+      yAxisPlacement = 'left',
+      yAxisVariant = AxisVariant.default
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$8);
   const [_id] = useId();
@@ -2846,13 +3198,19 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
       data: propsData,
       emptyComponent: emptyComponent,
       localeText: localeText,
-      size: size
+      size: size,
+      sortingMethod: sortingMethod,
+      xAxisPlacement: xAxisPlacement,
+      xAxisVariant: xAxisVariant,
+      yAxisPlacement: yAxisPlacement,
+      yAxisVariant: yAxisVariant
     }, forwardedProps, {
       ref: ref
     }));
   }
   return /*#__PURE__*/React__default.createElement(RenderedLineChart, _extends({
     className: classNames(LineChart.className, className),
+    colorTheme: colorTheme,
     data: propsData,
     dotRole: dotRole,
     id: id,
@@ -2863,15 +3221,18 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
     localeText: localeText,
     onDotClick: onDotClick,
     size: size,
-    colorTheme: colorTheme,
+    sortingMethod: sortingMethod,
     tooltipDecorator: tooltipDecorator,
-    tooltipVariant: tooltipVariant
+    tooltipVariant: tooltipVariant,
+    xAxisPlacement: xAxisPlacement,
+    xAxisVariant: xAxisVariant,
+    yAxisPlacement: yAxisPlacement,
+    yAxisVariant: yAxisVariant
   }, forwardedProps, {
     ref: ref
   }));
 });
 LineChart.className = CLASSNAME$2;
-LineChart.defaultProps = DEFAULT_PROPS$2;
 LineChart.displayName = COMPONENT_NAME$2;
 
 /**
@@ -3168,12 +3529,39 @@ const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$5 = ["caping", "className", "data", "id", "isHalf", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "sortingMethod", "subtext", "text", "colorTheme", "tooltipVariant", "variant"];
+var interactive$3 = "interactive";
+var definition$2 = "Pie Chart with {sliceLength} slices.";
+var enUS$1 = {
+	interactive: interactive$3,
+	"static": "static",
+	"interactive-chart": "Interactive Line Chart",
+	"static-chart": "Static Line Chart",
+	definition: definition$2
+};
+
+var interactive$2 = "interactif";
+var definition$1 = "Diagramme circulaire contenant {sliceLength} secteurs.";
+var frFR$1 = {
+	interactive: interactive$2,
+	"static": "statique",
+	"interactive-chart": "Diagramme circulaire interactif",
+	"static-chart": "Diagramme circulaire statique",
+	definition: definition$1
+};
+
+var intlMessages$1 = {
+  'en-US': enUS$1,
+  'fr-FR': frFR$1
+};
+
+const _excluded$5 = ["caping", "className", "data", "getSliceAnchorProps", "id", "isHalf", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "sortingMethod", "subtext", "text", "colorTheme", "tooltipVariant", "variant"],
+  _excluded2$1 = ["extraLegendItems"];
 const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
       className,
       data: propsData,
+      getSliceAnchorProps,
       id,
       isHalf,
       isSliceSelected,
@@ -3197,6 +3585,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$5);
   const cache = useRef();
   const theme = useTheme();
+  const format = useMessageFormatter(intlMessages$1);
   const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;
   const isSpaced = variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut;
   const {
@@ -3254,7 +3643,30 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
       })
     });
   }), total) : propsMiddleText;
-  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({}, forwardedProps, {
+  const filteredPieData = pieData.filter(datum => datum.data.value);
+  const _ref = legendProps || {},
+    {
+      extraLegendItems
+    } = _ref,
+    forwardedLegendProps = _objectWithoutProperties(_ref, _excluded2$1);
+  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({
+    mode: typeof onSliceClick === 'function' || typeof getSliceAnchorProps === 'function' ? format('interactive') : format('static'),
+    definition: format('definition', {
+      sliceLength: filteredPieData.length
+    }),
+    dataTableRepresentation: {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Key"), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, filteredPieData.map(datum => /*#__PURE__*/React__default.createElement("tr", {
+        key: datum.data.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, datum.data.key), /*#__PURE__*/React__default.createElement("td", null, datum.data.value))))
+    }
+  }, forwardedProps, {
     className: className,
     id: id,
     ref: ref
@@ -3267,9 +3679,11 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     $theme: theme
   }, subtext ? /*#__PURE__*/React__default.createElement("b", null, text) : /*#__PURE__*/React__default.createElement("span", null, text), middleText ? /*#__PURE__*/React__default.createElement("b", null, middleText) : null, /*#__PURE__*/React__default.createElement("span", null, subtext)) : null, /*#__PURE__*/React__default.createElement("svg", {
     width: width,
-    height: isHalf ? height + externalRadiusPadding : height
+    height: isHalf ? height + externalRadiusPadding : height,
+    "aria-label": typeof onSliceClick === 'function' || typeof getSliceAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
+    "aria-hidden": "false"
   }, /*#__PURE__*/React__default.createElement(Arcs, {
-    arcs: pieData.filter(datum => datum.data.value).map((datum, index) => {
+    arcs: filteredPieData.map((datum, index) => {
       const percent = datum.data.value / total;
       const from = previousPieData ? previousPieData[index] : {
         data: {
@@ -3291,11 +3705,12 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
         color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
         createArc,
         previousData: from,
-        id: `id${id}__bar-${index}`,
+        id: `id${id}__arc-${index}`,
         index,
         isSelected: isSliceSelected(to),
-        key: `id${id}__bar-${index}`,
-        data: to
+        key: `id${id}__arc-${index}`,
+        data: to,
+        anchorProps: getSliceAnchorProps ? getSliceAnchorProps(to) : undefined
       };
     }),
     hasLabels: legendVariant === PieChartLegendVariant.internal,
@@ -3307,56 +3722,46 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     tooltipVariant: tooltipVariant,
     transform: `translate(${width / 2} ${isHalf ? height : height / 2})`
   }))), legendVariant !== PieChartLegendVariant.none && legendVariant !== PieChartLegendVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, _extends({
-    data: data.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+    data: (extraLegendItems ? [...data, ...extraLegendItems] : data).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
     variant: legendVariant === PieChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === PieChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === PieChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
     width: legendWidth.current,
     labelDecorator: labelDecorator ? (datum, props) => labelDecorator(datum, props) : undefined,
     legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
-  }, legendProps)) : null);
+  }, forwardedLegendProps)) : null);
 });
 
-const _excluded$4 = ["caping", "chartRef", "className", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "subtext", "text", "colorTheme", "tooltipDecorator", "tooltipVariant", "variant"];
+const _excluded$4 = ["caping", "chartRef", "className", "colorTheme", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "sortingMethod", "subtext", "text", "tooltipDecorator", "tooltipVariant", "variant"];
 const COMPONENT_NAME$1 = 'PieChart';
 const CLASSNAME$1 = 'redsift-piechart';
-const DEFAULT_PROPS$1 = {
-  isSliceSelected: () => true,
-  // legendVariant: PieChartLegendVariant.none,
-  others: true,
-  size: ChartSize.medium,
-  sortingMethod: 'desc-value',
-  colorTheme: ColorTheme.default,
-  variant: PieChartVariant.spaced,
-  tooltipVariant: TooltipVariant.value,
-  localeText: {
-    emptyChartText: 'No Data'
-  }
-};
 const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
       chartRef,
       className,
+      colorTheme = ColorTheme.default,
       data: propsData,
       emptyComponent,
       id: propsId,
-      isSliceSelected,
+      isSliceSelected = () => true,
       labelDecorator,
       legendDecorator,
       legendVariant: propsLegendVariant,
-      localeText,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
       middleText,
       onSliceClick,
-      others,
-      size,
+      others = true,
+      size = ChartSize.medium,
       sliceRole,
+      sortingMethod = 'desc-value',
       subtext,
       text,
-      colorTheme,
       tooltipDecorator,
-      tooltipVariant,
-      variant
+      tooltipVariant = TooltipVariant.value,
+      variant = PieChartVariant.spaced
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$4);
   const [_id] = useId();
@@ -3376,6 +3781,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       id: id,
       localeText: localeText,
       size: size,
+      sortingMethod: sortingMethod,
       variant: variant
     }, forwardedProps, {
       ref: ref
@@ -3396,6 +3802,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     others: others,
     size: size,
     sliceRole: sliceRole,
+    sortingMethod: sortingMethod,
     subtext: subtext,
     text: text,
     colorTheme: colorTheme,
@@ -3407,7 +3814,6 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 PieChart.className = CLASSNAME$1;
-PieChart.defaultProps = DEFAULT_PROPS$1;
 PieChart.displayName = COMPONENT_NAME$1;
 
 /**
@@ -3605,18 +4011,56 @@ const EmptyScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
+var interactive$1 = "interactive";
+var definition = "Linear Scatter Plot with {circleLength} circles.";
+var enUS = {
+	interactive: interactive$1,
+	"static": "static",
+	"interactive-chart": "Interactive Scatter Plot",
+	"static-chart": "Static Scatter Plot",
+	definition: definition,
+	"definition-with-categories": "Linear Scatter Plot with {categoryLength} categories and {circleLength} circles.",
+	"x-axis-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying numbers from {start, number} to {end, number}.",
+	"y-axis-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying numbers from {start, number} to {end, number}."
+};
+
+var interactive = "interactif";
+var frFR = {
+	interactive: interactive,
+	"static": "statique",
+	"interactive-chart": "Graphique en courbe interactif",
+	"static-chart": "Graphique en courbe statique",
+	"definition-linear": "Graphique en courbe contenant {circleLength} points répartis sur un axe linéraire.",
+	"definition-linear-with-categories": "Graphique en courbe contenant {categoryLength} courbes et {circleLength} points répartis sur un axe linéraire.",
+	"definition-ordinal": "Graphique en courbe contenant {circleLength} points.",
+	"x-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des nombres allant de {start, number} à {end, number}.",
+	"y-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des nombres allant de {start, number} à {end, number}.",
+	"x-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
+	"y-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
+	"x-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des categories.",
+	"y-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des categories.",
+	"series-legend": "{category}, courbe {categoryIndex} sur {categoryLength} contenant {circleLength} points"
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
 // Material Design Icons v7.2.96
 var mdiChevronDown = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
 var mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
 var mdiMouse = "M11,1.07C7.05,1.56 4,4.92 4,9H11M4,15A8,8 0 0,0 12,23A8,8 0 0,0 20,15V11H4M13,1.07V9H20C20,4.92 16.94,1.56 13,1.07Z";
 
-const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "variant"];
+const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "getDotAnchorProps", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "variant"],
+  _excluded2 = ["extraLegendItems"];
 const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       isBrushable,
       className,
       data: propsData,
       dotRole,
+      getDotAnchorProps,
       hideControlKeyPanel,
       id,
       isDotSelected,
@@ -3652,6 +4096,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
   const cache = useRef();
   const theme = useTheme();
+  const format = useMessageFormatter(intlMessages);
   const data = propsData.filter(datum => datum.value && typeof datum.key[0] === 'number' && !Number.isNaN(datum.key[0]) && typeof datum.key[1] === 'number' && !Number.isNaN(datum.key[1]));
   useEffect(() => {
     cache.current = data;
@@ -3720,23 +4165,76 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     onBrush,
     onBrushEnd
   });
-  const circles = variant === ScatterPlotVariant.gridded ? group(data, scaleX, scaleY).sort((a, b) => descending(a.points.length, b.points.length)) : data.map(d => ({
-    category: d.key[2],
-    x: d.key[0],
-    y: d.key[1],
-    data: {
-      key: d.key,
-      value: 1
-    },
-    points: [d]
-  }));
+  const circles = variant === ScatterPlotVariant.gridded ? group(data, scaleX, scaleY).sort((a, b) => {
+    if (a.y !== b.y) {
+      return b.y - a.y;
+    }
+    if (a.x !== b.x) {
+      return a.x - b.x;
+    }
+    return descending(a.points.length, b.points.length);
+  }) : data.map(d => {
+    var _d$key$;
+    return {
+      category: (_d$key$ = d.key[2]) !== null && _d$key$ !== void 0 ? _d$key$ : 'default',
+      x: d.key[0],
+      y: d.key[1],
+      data: {
+        key: d.key,
+        value: 1
+      },
+      points: [d]
+    };
+  });
   const globalSize = variant === ScatterPlotVariant.gridded ? scaleSqrt().domain([1, Math.max(max(circles, d => d.points.length), 1)]).range([3, minSize / BASE_NUMBER_OF_TICKS / 2]) : undefined;
   const legendWidth = useRef();
   if (countsByCategory && !legendWidth.current) {
     legendWidth.current = `${Math.max(...countsByCategory.map(d => d.key.length + String(d.value).length)) * 8 + 32}px`;
   }
   const [isKeyPanelOpen, setIsKeyPanelOpen] = useState(false);
-  return /*#__PURE__*/React__default.createElement(StyledScatterPlot, _extends({}, forwardedProps, {
+  const categories = [];
+  // const pivotedTable = circles.reduce((acc, item) => {
+  //   const { x, category, y } = item;
+  //   if (!categories.includes(category)) {
+  //     categories.push(category);
+  //   }
+  //   const formattedKey = xAxisTickFormat ? xAxisTickFormat(x as any) : x.toString();
+
+  //   let entry = acc.find((e) => e.key === formattedKey);
+  //   if (!entry) {
+  //     entry = { key: formattedKey };
+  //     acc.push(entry);
+  //   }
+
+  //   entry[category] = y;
+
+  //   return acc;
+  // }, [] as Array<Record<string, string | number | null | undefined> & { key: string }>);
+
+  const _ref = legendProps || {},
+    {
+      extraLegendItems
+    } = _ref,
+    forwardedLegendProps = _objectWithoutProperties(_ref, _excluded2);
+  return /*#__PURE__*/React__default.createElement(StyledScatterPlot, _extends({
+    mode: typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? format('interactive') : format('static'),
+    definition: hasCategory ? format('definition-with-categories', {
+      categoryLength: categories.length,
+      circleLength: circles.length
+    }) : format('definition', {
+      circleLength: circles.length
+    }),
+    xAxisDefinition: format('x-axis-definition', {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1,
+      start: scaleX.domain()[0],
+      end: scaleX.domain()[1]
+    }),
+    yAxisDefinition: format('y-axis-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1,
+      start: scaleY.domain()[0],
+      end: scaleY.domain()[1]
+    })
+  }, forwardedProps, {
     id: id,
     className: className,
     ref: ref
@@ -3796,10 +4294,10 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     }
     const to = _objectSpread2(_objectSpread2({}, circle), {}, {
       data: _objectSpread2(_objectSpread2({}, circle.data), {}, {
-        percent: circle.category ? circle.data.value / (countsByCategory === null || countsByCategory === void 0 ? void 0 : (_countsByCategory$fin = countsByCategory.find(_ref => {
+        percent: circle.category ? circle.data.value / (countsByCategory === null || countsByCategory === void 0 ? void 0 : (_countsByCategory$fin = countsByCategory.find(_ref2 => {
           let {
             key
-          } = _ref;
+          } = _ref2;
           return key === circle.category;
         })) === null || _countsByCategory$fin === void 0 ? void 0 : _countsByCategory$fin.value) : undefined
       }),
@@ -3869,54 +4367,46 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: yAxisTickFormat,
     variant: yAxisVariant
   }) : null))), hasCategory && legendVariant !== ScatterPlotLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
-    data: countsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+    data: (extraLegendItems ? [...countsByCategory, ...extraLegendItems] : countsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
     variant: legendVariant === ScatterPlotLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === ScatterPlotLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === ScatterPlotLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
     width: legendWidth.current,
     legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
-  }, legendProps)) : null);
+  }, forwardedLegendProps)) : null);
 });
 
-const _excluded = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "colorTheme", "tooltipDecorator", "tooltipVariant", "variant"];
+const _excluded = ["className", "colorTheme", "data", "dotRole", "emptyComponent", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "tooltipDecorator", "tooltipVariant", "variant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];
 const COMPONENT_NAME = 'ScatterPlot';
 const CLASSNAME = 'redsift-scatterplot';
-const DEFAULT_PROPS = {
-  hideControlKeyPanel: false,
-  // legendVariant: ScatterPlotLegendVariant.externalLabel,
-  localeText: {
-    emptyChartText: 'No Data'
-  },
-  size: ChartSize.medium,
-  sortingMethod: 'desc-value',
-  colorTheme: ColorTheme.default,
-  tooltipVariant: TooltipVariant.none,
-  variant: ScatterPlotVariant.default,
-  xAxisVariant: AxisVariant.default,
-  xAxisPlacement: 'bottom',
-  yAxisVariant: AxisVariant.default,
-  yAxisPlacement: 'left'
-};
 const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
+      colorTheme = ColorTheme.default,
       data: propsData,
       dotRole,
       emptyComponent,
+      hideControlKeyPanel = false,
       id: propsId,
       isDotSelected,
       labelDecorator,
       legendDecorator,
       legendVariant: propsLegendVariant,
-      localeText,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
       onBrush,
       onBrushEnd,
       onDotClick,
-      size,
-      colorTheme,
+      size = ChartSize.medium,
+      sortingMethod = 'desc-value',
       tooltipDecorator,
-      tooltipVariant,
-      variant
+      tooltipVariant = TooltipVariant.none,
+      variant = ScatterPlotVariant.default,
+      xAxisPlacement = 'bottom',
+      xAxisVariant = AxisVariant.default,
+      yAxisPlacement = 'left',
+      yAxisVariant = AxisVariant.default
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
   const [_id] = useId();
@@ -3933,16 +4423,24 @@ const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React__default.createElement(EmptyScatterPlot, _extends({
       data: propsData,
       emptyComponent: emptyComponent,
+      hideControlKeyPanel: hideControlKeyPanel,
       localeText: localeText,
-      size: size
+      size: size,
+      sortingMethod: sortingMethod,
+      xAxisPlacement: xAxisPlacement,
+      xAxisVariant: xAxisVariant,
+      yAxisPlacement: yAxisPlacement,
+      yAxisVariant: yAxisVariant
     }, forwardedProps, {
       ref: ref
     }));
   }
   return /*#__PURE__*/React__default.createElement(RenderedScatterPlot, _extends({
     className: classNames(ScatterPlot.className, className),
+    colorTheme: colorTheme,
     data: propsData,
     dotRole: dotRole,
+    hideControlKeyPanel: hideControlKeyPanel,
     id: id,
     isDotSelected: isDotSelected,
     labelDecorator: labelDecorator,
@@ -3953,16 +4451,19 @@ const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     onBrushEnd: onBrushEnd,
     onDotClick: onDotClick,
     size: size,
-    colorTheme: colorTheme,
+    sortingMethod: sortingMethod,
     tooltipDecorator: tooltipDecorator,
     tooltipVariant: tooltipVariant,
-    variant: variant
+    variant: variant,
+    xAxisPlacement: xAxisPlacement,
+    xAxisVariant: xAxisVariant,
+    yAxisPlacement: yAxisPlacement,
+    yAxisVariant: yAxisVariant
   }, forwardedProps, {
     ref: ref
   }));
 });
 ScatterPlot.className = CLASSNAME;
-ScatterPlot.defaultProps = DEFAULT_PROPS;
 ScatterPlot.displayName = COMPONENT_NAME;
 
 export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarChartLegendVariant, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, LegendVariant, Line, LineChart, LineChartLegendVariant, PieChart, PieChartLegendVariant, PieChartVariant, ScatterPlot, ScatterPlotLegendVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };