@redsift/charts 10.3.0-alpha.8 → 10.3.0-alpha.9

package/index.js

@@ -363,7 +363,7 @@ var k=/^--/;function I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeo
 const StyledDataPoint = styled(it.g)``;
 
 const _excluded$q = ["as", "href"],
-  _excluded2$1 = ["anchorProps", "children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
+  _excluded2$5 = ["anchorProps", "children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
 const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       anchorProps: {
@@ -384,7 +384,7 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme
     } = props,
     anchorProps = _objectWithoutProperties(props.anchorProps, _excluded$q),
-    forwardedProps = _objectWithoutProperties(props, _excluded2$1);
+    forwardedProps = _objectWithoutProperties(props, _excluded2$5);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const theme = useTheme(propsTheme);
@@ -1094,9 +1094,7 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
       t: 0
     }
   }));
-  return /*#__PURE__*/React__default.createElement(StyledBar, _extends({
-    "aria-hidden": "false"
-  }, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledBar, _extends({}, forwardedProps, {
     ref: ref,
     className: classNames(Bar.className, className),
     transform: isHorizontal ? `translate(0, ${scalePosition(data.data.key) + gap / 2})` : `translate(${scalePosition(data.data.key) + (isOrdinal ? width + gap / 2 : width / 2)}, ${maxHeight}), rotate(180)`,
@@ -1136,7 +1134,7 @@ 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",
@@ -1145,7 +1143,7 @@ var enUS = {
 };
 
 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",
@@ -1153,9 +1151,9 @@ var frFR = {
 	reset: reset
 };
 
-var intlMessages = {
-  'en-US': enUS,
-  'fr-FR': frFR
+var intlMessages$4 = {
+  'en-US': enUS$4,
+  'fr-FR': frFR$4
 };
 
 /**
@@ -1259,7 +1257,7 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme(propsTheme);
   const [viewAsDataTable, setViewAsDataTable] = useState(false);
   warnIfNoAccessibleLabelFound(props, [title]);
-  const format = useMessageFormatter(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, {
@@ -1271,7 +1269,7 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
     role: "region",
     "aria-hidden": "false"
   }, ariaLabel ? {
-    'aria-label': `${ariaLabel}. ${format(`${mode}-chart`)}`
+    'aria-label': `${ariaLabel}. ${mode}`
   } : {}, ariaLabelledby ? {
     'aria-labelledby': `${ariaLabelledby} id${id}__interactive-or-not`
   } : {}, forwardedProps, {
@@ -1302,15 +1300,15 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
     style: {
       display: 'none'
     }
-  }, format(`${mode}-chart`)), ariaLabel ? /*#__PURE__*/React__default.createElement("p", null, `${ariaLabel}. ${format(`${mode}-chart`)}`) : /*#__PURE__*/React__default.createElement("p", {
+  }, mode), ariaLabel ? /*#__PURE__*/React__default.createElement("p", null, `${ariaLabel}. ${mode}`) : /*#__PURE__*/React__default.createElement("p", {
     "aria-labelledby": `${ariaLabelledby} id${id}__interactive-or-not`
-  }), /*#__PURE__*/React__default.createElement("div", null, definition), /*#__PURE__*/React__default.createElement("div", null, interactionExplanation), /*#__PURE__*/React__default.createElement("div", null, descriptionForAssistiveTechnology !== null && descriptionForAssistiveTechnology !== void 0 ? descriptionForAssistiveTechnology : description), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
+  }), /*#__PURE__*/React__default.createElement("div", null, definition), /*#__PURE__*/React__default.createElement("div", null, interactionExplanation), /*#__PURE__*/React__default.createElement("div", null, descriptionForAssistiveTechnology !== null && descriptionForAssistiveTechnology !== void 0 ? descriptionForAssistiveTechnology : description), 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
-  }))), /*#__PURE__*/React__default.createElement("div", null, xAxisDefinition), /*#__PURE__*/React__default.createElement("div", null, yAxisDefinition))), title || onReset ? /*#__PURE__*/React__default.createElement(StyledChartContainerTitle, {
+  }))) : 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",
@@ -1517,6 +1515,47 @@ const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }), "Loading...");
 });
 
+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 {
@@ -1556,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
@@ -1598,8 +1638,24 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const scaleCategory = useMemo(() => scaleBand().domain(data.filter(datum => datum.value).map(datum => datum.key)).range([0, isHorizontal ? chartHeight : chartWidth]), [size]);
   const bars = data.filter(datum => datum.value);
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({
-    mode: typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? 'interactive' : 'static',
-    definition: `Ordinal Bar Chart with ${bars.length} bars.`,
+    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"
@@ -1618,7 +1674,9 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     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, {
@@ -1859,7 +1917,7 @@ LegendItem.className = CLASSNAME$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 Legend = /*#__PURE__*/forwardRef((props, ref) => {
@@ -1885,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), {}, {
@@ -1909,7 +1967,8 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
 Legend.className = CLASSNAME$6;
 Legend.displayName = COMPONENT_NAME$6;
 
-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"];
+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) {
@@ -1969,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;
@@ -2097,11 +2157,29 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     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' ? 'interactive' : 'static',
-    definition: `Linear Bar Chart with ${hasCategory ? `${categories.length} categories and ` : ''}${bars.length} bars.`,
-    xAxisDefinition: `The chart has 1 X axis displaying ${xScaleType === 'number' ? 'Numbers' : 'Dates'} from ${xScaleType === 'number' ? scaleX.domain()[0] : xAxisTickFormat ? xAxisTickFormat(scaleX.domain()[0]) : scaleX.domain()[0].toString()} to ${xScaleType === 'number' ? scaleX.domain()[1] : xAxisTickFormat ? xAxisTickFormat(scaleX.domain()[1]) : scaleX.domain()[1].toString()}.`,
-    yAxisDefinition: `The chart has 1 Y axis displaying numbers from ${scaleY.domain()[0]} to ${scaleY.domain()[1]}.`,
+    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"
@@ -2144,17 +2222,22 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     ref: svgRef,
     width: width,
     height: height,
-    "aria-label": "Interactive Bar Chart",
+    "aria-label": typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
     "aria-hidden": "false"
-  }, categories.map((category, index) => {
+  }, categories.map((category, categoryIndex) => {
     const filteredBars = bars.filter(bar => bar.category === category);
     return /*#__PURE__*/React__default.createElement("g", _extends({
-      key: category,
+      key: `${id}-series-${category}`,
       transform: `translate(${margins.left},${margins.top})`,
       "aria-hidden": "false",
       role: "region"
     }, hasCategory ? {
-      'aria-label': `${category}, category ${index + 1} of ${categories.length} with ${filteredBars.length} bars`
+      'aria-label': format('series-legend', {
+        category,
+        categoryIndex: categoryIndex + 1,
+        categoryLength: categories.length,
+        barLength: filteredBars.length
+      })
     } : {}), filteredBars.map((bar, index) => {
       const to = {
         data: bar,
@@ -2167,10 +2250,10 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
         color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
         data: to,
         gap: gap,
-        id: `id${id}__bar-${index}`,
+        id: `id${id}__bar-${categoryIndex}.${index}`,
         index: index,
         isSelected: Boolean(isBarSelected(to)),
-        key: `bar _${index}`,
+        key: `bar _${categoryIndex}.${index}`,
         labelDecorator: labelDecorator,
         maxHeight: scaleY(bar.cumulativeValue - bar.value),
         anchorProps: getBarAnchorProps ? getBarAnchorProps(to) : undefined,
@@ -2242,12 +2325,12 @@ 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 = ["barRole", "caping", "chartRef", "className", "colorTheme", "data", "dataType", "emptyComponent", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBarClick", "orientation", "others", "size", "sortingMethod", "theme", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "yAxisPlacement"];
@@ -2685,7 +2768,49 @@ const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-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"];
+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,
@@ -2730,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(() => {
@@ -2851,11 +2977,31 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     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' ? 'interactive' : 'static',
-    definition: `Line Chart with ${hasCategory ? `${lines.length} lines and ` : ''}${circles.length} points.`,
-    xAxisDefinition: `The chart has 1 X axis displaying ${xScaleType === 'number' ? 'Numbers' : 'Dates'} from ${xScaleType === 'number' ? scaleX.domain()[0] : xAxisTickFormat ? xAxisTickFormat(scaleX.domain()[0]) : scaleX.domain()[0].toString()} to ${xScaleType === 'number' ? scaleX.domain()[1] : xAxisTickFormat ? xAxisTickFormat(scaleX.domain()[1]) : scaleX.domain()[1].toString()}.`,
-    yAxisDefinition: `The chart has 1 Y axis displaying numbers from ${scaleY.domain()[0]} to ${scaleY.domain()[1]}.`,
+    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"
@@ -2897,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),
@@ -2907,33 +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)),
-      anchorProps: getDotAnchorProps ? getDotAnchorProps(to) : undefined,
-      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",
@@ -2988,12 +3146,12 @@ 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", "colorTheme", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onDotClick", "size", "sortingMethod", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];
@@ -3371,7 +3529,33 @@ const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-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"];
+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,
@@ -3401,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 {
@@ -3459,9 +3644,16 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     });
   }), total) : propsMiddleText;
   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' ? 'interactive' : 'static',
-    definition: `Pie Chart with ${filteredPieData.length} slices.`,
+    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"
@@ -3487,7 +3679,9 @@ 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: filteredPieData.map((datum, index) => {
       const percent = datum.data.value / total;
@@ -3528,14 +3722,14 @@ 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", "colorTheme", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "sortingMethod", "subtext", "text", "tooltipDecorator", "tooltipVariant", "variant"];
@@ -3817,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,
@@ -3864,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;
@@ -3932,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
@@ -4008,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
       }),
@@ -4081,13 +4367,13 @@ 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", "colorTheme", "data", "dotRole", "emptyComponent", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "tooltipDecorator", "tooltipVariant", "variant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];