@redsift/charts 10.3.0-alpha.3 → 10.3.0-alpha.5

package/index.d.ts

@@ -394,6 +394,8 @@ interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale
     color?: string;
     /** Data. Also state to which the component should end the animation, if any. */
     data: T;
+    /** Href when the component is a navigation link. */
+    href?: string;
     /** Id. Used for accessibility. */
     id?: string;
     /** Position in the list of siblings. Used for placement and selection. */
@@ -542,6 +544,23 @@ interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, Cont
     title?: string | ReactElement;
     /** Theme. */
     theme?: Theme;
+    /** Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. */
+    descriptionForAssistiveTechnology?: string;
+    /** Whether the chart is static or interactive. */
+    mode?: 'static' | 'interactive';
+    /** Small text explaining which kind of chart is presenting and what's its basic composition. */
+    definition?: string;
+    /** Small text explaining the basic composition of the x-axis, if any. */
+    xAxisDefinition?: string;
+    /** Small text explaining the basic composition of the y-axis, if any. */
+    yAxisDefinition?: string;
+    /** Small text explaining how the chart is interactive, if any. */
+    interactionExplanation?: string;
+    /** Table representation of the chart. */
+    dataTableRepresentation?: {
+        header: ReactElement;
+        body: ReactElement;
+    };
 }
 type StyledChartContainerProps = Omit<ChartContainerProps, 'theme'> & {
     $theme: Theme;
@@ -643,7 +662,7 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     /** @deprecated: Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. */
     areXLabelsRotated?: boolean;
     /** Native HTML props to forward to each bar. */
-    barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale' | 'width'>;
+    barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale'>;
     /** Number of categories to use, the rest being put into a new category called "Others". */
     caping?: number;
     /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
@@ -652,6 +671,11 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     dataType?: 'TwoCategoryData' | 'LinearData' | 'CategoryData';
     /** Component to use if the chart is empty (replacing the default one). */
     emptyComponent?: ReactNode;
+    /** Method used to define the href on a bar used as a navigation link. */
+    getBarAnchorProps?: (datum: BarDatum) => {
+        href: string;
+        target?: string;
+    };
     /** Method to determine whether a slice is selected or not. */
     isBarSelected?: (datum: BarDatum) => void;
     /** Method to override the data labels. */
@@ -674,7 +698,7 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     localeText?: LocaleText$3;
     /** Custom margins, used to give more space for axes labels and legend for instance. */
     margins?: MarginProps;
-    /** Method to be called on a click on a bar. */
+    /** Method to be called on a click on a bar. For a navigation link, please use `getBarAnchorProps` instead. */
     onBarClick?: (datum: BarDatum) => void;
     /** Orientation of the bar. */
     orientation?: BarOrientation;
@@ -895,6 +919,11 @@ interface PieChartProps extends ChartContainerProps {
     data?: CategoryData;
     /** Component to use if the chart is empty (replacing the default one). */
     emptyComponent?: ReactNode;
+    /** Method used to define the href on a bar used as a navigation link. */
+    getSliceAnchorProps?: (datum: ArcDatum) => {
+        href: string;
+        target?: string;
+    };
     /** Whether the pie or donut is cut in half or not. */
     isHalf?: boolean;
     /** Method to determine whether a slice is selected or not. */
@@ -917,7 +946,7 @@ interface PieChartProps extends ChartContainerProps {
     legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant'>;
     /** Labels and texts. */
     localeText?: LocaleText$1;
-    /** Method to be called on a click on a slice. */
+    /** Method to be called on a click on a slice. For a navigation link, please use `getSliceAnchorProps` instead. */
     onSliceClick?: (datum: ArcDatum) => void;
     /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
     others?: boolean | string;

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,
@@ -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
@@ -938,6 +941,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, {
@@ -1112,7 +1116,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)`,
@@ -1154,11 +1160,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 +1203,7 @@ const StyledChartContainer = styled.div`
 
   svg {
     display: block;
+    user-select: none;
   }
 
   text {
@@ -1201,6 +1216,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,7 +1252,7 @@ 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 = {};
@@ -1227,12 +1268,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 +1290,53 @@ 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", {
+    id: "hc-linkto-highcharts-data-table-0",
+    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,15 +1351,22 @@ 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;
@@ -1447,7 +1543,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 +1553,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       data: propsData,
       id,
       isBarSelected,
+      getBarAnchorProps,
       labelDecorator,
       margins: propsMargins,
       onBarClick,
@@ -1525,7 +1622,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 +1697,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 +1707,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
     }));
   }))));
 });
@@ -1830,7 +1945,7 @@ 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 +1966,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       data: propsData,
       id,
+      getBarAnchorProps,
       isBarSelected,
       labelDecorator,
       legendDecorator,
@@ -1909,9 +2025,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 +2044,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 +2112,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,9 +2179,12 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement("svg", {
     ref: svgRef,
     width: width,
-    height: height
+    height: height,
+    "aria-label": "Interactive Bar Chart",
+    "aria-hidden": "false"
   }, /*#__PURE__*/React__default.createElement("g", {
-    transform: `translate(${margins.left},${margins.top})`
+    transform: `translate(${margins.left},${margins.top})`,
+    "aria-hidden": "false"
   }, bars.map((bar, index) => {
     const to = {
       data: bar
@@ -2017,25 +2192,27 @@ const RenderedLinearBarChart = /*#__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.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),
+      maxHeight: scaleY(bar.cumulativeValue - bar.value)
+    }, getBarAnchorProps ? getBarAnchorProps(to) : {}, {
       onClick: onBarClick,
       orientation: BarOrientation.vertical,
       previousData: from,
-      role: barRole,
       scale: scaleY,
       scalePosition: scaleX,
-      tooltipVariant: tooltipVariant,
-      width: barWidth
+      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, {
     position: "bottom",
@@ -3168,12 +3345,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 +3432,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 +3463,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 +3481,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 +3490,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,