@redsift/charts 10.3.0-alpha.4 → 10.3.0-alpha.6

package/index.js

@@ -362,12 +362,13 @@ 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 = ["children", "className", "data", "href", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
 const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
       data,
+      href,
       id: propsId,
       index,
       isSelected: propsIsSelected,
@@ -406,20 +407,20 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
   const DataPointComponent = /*#__PURE__*/React__default.createElement(StyledDataPoint, _extends({
-    tabIndex: onClick ? 0 : undefined
+    tabIndex: onClick ? 0 : undefined,
+    "aria-label": showTooltip && !isEmpty ? text : 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 +429,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("a", {
+      href: href
+    }, DataPointComponent) : DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, isTooltipCustom ? tooltipDecorator(data, {
       index,
       isSelected: propsIsSelected,
       color: props.color
@@ -499,24 +502,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 +514,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 +553,6 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Arc.className = CLASSNAME$c;
-Arc.defaultProps = DEFAULT_PROPS$c;
 Arc.displayName = COMPONENT_NAME$c;
 
 /**
@@ -566,7 +563,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 +633,6 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
   })) : null);
 });
 Arcs.className = CLASSNAME$b;
-Arcs.defaultProps = DEFAULT_PROPS$b;
 Arcs.displayName = COMPONENT_NAME$b;
 
 /**
@@ -811,36 +806,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 +922,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 +956,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 +1037,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 +1050,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();
@@ -1112,7 +1086,9 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
       t: 0
     }
   }));
-  return /*#__PURE__*/React__default.createElement(StyledBar, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledBar, _extends({
+    "aria-hidden": "false"
+  }, 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)`,
@@ -1134,7 +1110,6 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   }, text) : null);
 });
 Bar.className = CLASSNAME$9;
-Bar.defaultProps = DEFAULT_PROPS$9;
 Bar.displayName = COMPONENT_NAME$9;
 
 /**
@@ -1154,11 +1129,19 @@ const BarChartLegendVariant = {
 
 var reset$1 = "Reset";
 var enUS = {
+	"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 = {
+	"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
 };
 
@@ -1189,6 +1172,7 @@ const StyledChartContainer = styled.div`
 
   svg {
     display: block;
+    user-select: none;
   }
 
   text {
@@ -1201,6 +1185,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 +1221,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,12 +1236,20 @@ 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 format = useMessageFormatter(intlMessages);
   const ariaLabel = propsAriaLabel ? propsAriaLabel : propsAriaLabelledby || title ? undefined : undefined;
@@ -1241,13 +1258,52 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
     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}. ${format(`${mode}-chart`)}`
+  } : {}, 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, 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", {
+    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, {
+    "aria-hidden": "true",
     $theme: theme,
     alignItems: "center",
     justifyContent: "space-between",
@@ -1262,18 +1318,24 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
     onClick: onReset
   }, 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 +1509,7 @@ 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"];
+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 +1519,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       data: propsData,
       id,
       isBarSelected,
+      getBarAnchorProps,
       labelDecorator,
       margins: propsMargins,
       onBarClick,
@@ -1525,7 +1588,23 @@ 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' ? 'interactive' : 'static',
+    definition: `Bar Chart with ${bars.length} bars.`,
+    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
@@ -1584,7 +1663,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 +1673,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,
+      maxHeight: isHorizontal ? undefined : chartHeight
+    }, getBarAnchorProps ? getBarAnchorProps(to) : {}, {
       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 +1768,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 +1779,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const {
       className,
-      color,
+      color = monochrome,
       data,
       id: propsId,
       variant
@@ -1771,27 +1848,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"];
 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);
@@ -1827,10 +1899,9 @@ 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"];
 const getKey = datum => Array.isArray(datum.key) ? datum.key[0] : datum.key;
 const filterData = (hasCategory, data, filterFn) => {
   if (hasCategory) {
@@ -1851,6 +1922,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       data: propsData,
       id,
+      getBarAnchorProps,
       isBarSelected,
       labelDecorator,
       legendDecorator,
@@ -1909,9 +1981,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 +2000,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 +2068,63 @@ 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;
+  }, []);
+  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({
+    mode: typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? 'interactive' : 'static',
+    definition: `Bar Chart with ${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]}.`,
+    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 +2135,52 @@ 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": "Interactive Bar Chart",
+    "aria-hidden": "false"
+  }, categories.map((category, index) => {
+    const filteredBars = bars.filter(bar => bar.category === category);
+    return /*#__PURE__*/React__default.createElement("g", _extends({
+      key: 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`
+    } : {}), filteredBars.map((bar, index) => {
+      const to = {
+        data: bar
+      };
+      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-${index}`,
+        index: index,
+        isSelected: Boolean(isBarSelected(to)),
+        key: `bar _${index}`,
+        labelDecorator: labelDecorator,
+        maxHeight: scaleY(bar.cumulativeValue - bar.value)
+      }, getBarAnchorProps ? getBarAnchorProps(to) : {}, {
+        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,
@@ -2098,46 +2241,37 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, legendProps)) : 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 +2310,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 +2333,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 +2347,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 +2400,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 +2413,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 +2442,6 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Dot.className = CLASSNAME$4;
-Dot.defaultProps = DEFAULT_PROPS$4;
 Dot.displayName = COMPONENT_NAME$4;
 
 /**
@@ -2317,13 +2452,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 +2462,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 +2489,6 @@ const Line = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Line.className = CLASSNAME$3;
-Line.defaultProps = DEFAULT_PROPS$3;
 Line.displayName = COMPONENT_NAME$3;
 
 /**
@@ -2796,25 +2926,13 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, legendProps)) : 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 +2941,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 +2970,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 +2993,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 +3301,13 @@ 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"];
+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"];
 const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
       className,
       data: propsData,
+      getSliceAnchorProps,
       id,
       isHalf,
       isSliceSelected,
@@ -3254,7 +3388,23 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
       })
     });
   }), total) : propsMiddleText;
-  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({}, forwardedProps, {
+  const filteredPieData = pieData.filter(datum => datum.data.value);
+  return /*#__PURE__*/React__default.createElement(StyledPieChart, _extends({
+    mode: typeof onSliceClick === 'function' || typeof getSliceAnchorProps === 'function' ? 'interactive' : 'static',
+    definition: `Pie Chart with ${filteredPieData.length} slices.`,
+    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
@@ -3269,7 +3419,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     width: width,
     height: isHalf ? height + externalRadiusPadding : height
   }, /*#__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: {
@@ -3287,7 +3437,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
           percent
         })
       });
-      return {
+      return _objectSpread2({
         color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
         createArc,
         previousData: from,
@@ -3296,7 +3446,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
         isSelected: isSliceSelected(to),
         key: `id${id}__bar-${index}`,
         data: to
-      };
+      }, getSliceAnchorProps ? getSliceAnchorProps(to) : {});
     }),
     hasLabels: legendVariant === PieChartLegendVariant.internal,
     hasStroke: isSpaced,
@@ -3317,46 +3467,36 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, legendProps)) : 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 +3516,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       id: id,
       localeText: localeText,
       size: size,
+      sortingMethod: sortingMethod,
       variant: variant
     }, forwardedProps, {
       ref: ref
@@ -3396,6 +3537,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     others: others,
     size: size,
     sliceRole: sliceRole,
+    sortingMethod: sortingMethod,
     subtext: subtext,
     text: text,
     colorTheme: colorTheme,
@@ -3407,7 +3549,6 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 PieChart.className = CLASSNAME$1;
-PieChart.defaultProps = DEFAULT_PROPS$1;
 PieChart.displayName = COMPONENT_NAME$1;
 
 /**
@@ -3878,45 +4019,37 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   }, legendProps)) : 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 +4066,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 +4094,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 };