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

package/index.d.ts

@@ -386,16 +386,19 @@ declare const getColorScale: ({ colorTheme, domain, isEmpty, theme, }: {
     theme: Theme;
 }) => ScaleOrdinal<string, string>;
 
+type AnchorProps = ComponentProps<'a'> & {
+    as?: any;
+};
 /**
  * Component props.
  */
 interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale'> {
+    /** Anchor props to use when the component is a navigation link. */
+    anchorProps?: AnchorProps;
     /** Color of the DataPoint. */
     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. */
@@ -663,6 +666,8 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     areXLabelsRotated?: boolean;
     /** Native HTML props to forward to each bar. */
     barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale'>;
+    /** Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. */
+    barRole?: BarProps['role'];
     /** 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. */
@@ -671,12 +676,9 @@ 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. */
+    /** Method used to define the anchor props to use when the bar is a navigation link. */
+    getBarAnchorProps?: (datum: BarDatum) => AnchorProps;
+    /** Method to determine whether a bar is selected or not. */
     isBarSelected?: (datum: BarDatum) => void;
     /** Method to override the data labels. */
     labelDecorator?: (datum: BarDatum, props?: {
@@ -708,8 +710,6 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     size?: ChartSize | BarChartDimensions;
     /** Define how to sort categories. */
     sortingMethod?: SortingMethod;
-    /** Bar role. Used to indicate that bars are to be considered buttons or links. If an onClick is provided, the bars will have the role `button` unless specifically set to `link` with this prop. */
-    barRole?: BarProps['role'];
     /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status.  */
     colorTheme?: ChartTheme;
     /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
@@ -818,10 +818,12 @@ type LineChartDimensions = ChartDimensions & {
 interface LineChartProps extends ChartContainerProps, ChartAxesProps {
     /** Dataset to use to generate the chart. */
     data?: TwoCategoryData;
-    /** Slice role. Used to indicate that dots are to be considered buttons or links. If an onClick is provided, the dots will have the role `button` unless specifically set to `link` with this prop. */
+    /** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getSliceAnchorProps` instead. */
     dotRole?: DotProps['role'];
     /** Component to use if the chart is empty (replacing the default one). */
     emptyComponent?: ReactNode;
+    /** Method used to define the anchor props to use when the dot is a navigation link. */
+    getDotAnchorProps?: (datum: DotDatum) => AnchorProps;
     /** Method to determine whether a dot is selected or not. */
     isDotSelected?: (datum: DotDatum) => boolean | undefined;
     /** Method to override the data point labels. */
@@ -844,7 +846,7 @@ interface LineChartProps extends ChartContainerProps, ChartAxesProps {
     localeText?: LocaleText$2;
     /** 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 dot. */
+    /** Method to be called on a click on a dot. For a navigation link, please use `getSliceAnchorProps` instead. */
     onDotClick?: (datum: DotDatum) => void;
     /** LineChart size. */
     size?: ChartSize | LineChartDimensions;
@@ -919,11 +921,8 @@ 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;
-    };
+    /** Method used to define the anchor props to use when the slice is a navigation link. */
+    getSliceAnchorProps?: (datum: ArcDatum) => AnchorProps;
     /** Whether the pie or donut is cut in half or not. */
     isHalf?: boolean;
     /** Method to determine whether a slice is selected or not. */
@@ -954,7 +953,7 @@ interface PieChartProps extends ChartContainerProps {
     size?: ChartSize | PieChartDimensions;
     /** Native HTML props to forward to each slice. */
     sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
-    /** Slice role. Used to indicate that slices are to be considered buttons or links. If an onClick is provided, the slices will have the role `button` unless specifically set to `link` with this prop. */
+    /** Slice role. If an onClick is provided, the slices will have the role `button`. For a navigation link, please use `getSliceAnchorProps` instead. */
     sliceRole?: ArcProps['role'];
     /** Define how to sort categories. */
     sortingMethod?: SortingMethod;
@@ -1102,4 +1101,4 @@ declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div
     $theme: Theme;
 }, never>;
 
-export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartLegendVariant, BarChartProps, BarDatum, BarOrientation, BarProps, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, XScaleType, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { AnchorProps, AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartLegendVariant, BarChartProps, BarDatum, BarOrientation, BarProps, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, XScaleType, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };

package/index.js

@@ -362,13 +362,17 @@ 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", "href", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
+const _excluded$q = ["as", "href"],
+  _excluded2$1 = ["anchorProps", "children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
 const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      anchorProps: {
+        as,
+        href
+      } = {},
       children,
       className,
       data,
-      href,
       id: propsId,
       index,
       isSelected: propsIsSelected,
@@ -379,7 +383,8 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       tooltipVariant,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
+    anchorProps = _objectWithoutProperties(props.anchorProps, _excluded$q),
+    forwardedProps = _objectWithoutProperties(props, _excluded2$1);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const theme = useTheme(propsTheme);
@@ -406,9 +411,12 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   };
+  if (data.data.key === 'Line Chart') {
+    console.log(showTooltip, isEmpty, text);
+  }
   const DataPointComponent = /*#__PURE__*/React__default.createElement(StyledDataPoint, _extends({
     tabIndex: onClick ? 0 : undefined,
-    "aria-label": showTooltip && !isEmpty ? text : undefined,
+    "aria-label": showTooltip && !isEmpty ? labelDecorator ? text : `${data.data.key}, ${data.data.value}` : undefined,
     "aria-labelledby": !showTooltip && !isEmpty ? `${id}-title` : undefined,
     "aria-selected": isSelected ? true : isDeselected ? false : undefined,
     onClick: onClick ? () => onClick(data) : undefined,
@@ -429,9 +437,9 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       placement: "right",
       theme: theme
-    }, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, href !== undefined ? /*#__PURE__*/React__default.createElement("a", {
-      href: href
-    }, DataPointComponent) : DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, isTooltipCustom ? tooltipDecorator(data, {
+    }, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, href !== undefined ? /*#__PURE__*/React__default.createElement(as || 'a', _objectSpread2({
+      href
+    }, anchorProps), DataPointComponent) : DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, isTooltipCustom ? tooltipDecorator(data, {
       index,
       isSelected: propsIsSelected,
       color: props.color
@@ -1591,7 +1599,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   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.`,
+    definition: `Ordinal 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"
@@ -1682,8 +1690,8 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       isSelected: Boolean(isBarSelected(to)),
       key: `bar _${index}`,
       labelDecorator: labelDecorator,
-      maxHeight: isHorizontal ? undefined : chartHeight
-    }, getBarAnchorProps ? getBarAnchorProps(to) : {}, {
+      maxHeight: isHorizontal ? undefined : chartHeight,
+      anchorProps: getBarAnchorProps ? getBarAnchorProps(to) : undefined,
       onClick: onBarClick,
       orientation: orientation,
       previousData: from,
@@ -2091,7 +2099,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, []);
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({
     mode: typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? 'interactive' : 'static',
-    definition: `Bar Chart with ${bars.length} bars.`,
+    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]}.`,
     dataTableRepresentation: hasCategory ? {
@@ -2149,7 +2157,8 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       'aria-label': `${category}, category ${index + 1} of ${categories.length} with ${filteredBars.length} bars`
     } : {}), filteredBars.map((bar, index) => {
       const to = {
-        data: bar
+        data: bar,
+        category
       };
       const from = cache.current ? {
         data: cache.current[index]
@@ -2163,8 +2172,8 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
         isSelected: Boolean(isBarSelected(to)),
         key: `bar _${index}`,
         labelDecorator: labelDecorator,
-        maxHeight: scaleY(bar.cumulativeValue - bar.value)
-      }, getBarAnchorProps ? getBarAnchorProps(to) : {}, {
+        maxHeight: scaleY(bar.cumulativeValue - bar.value),
+        anchorProps: getBarAnchorProps ? getBarAnchorProps(to) : undefined,
         onClick: onBarClick,
         orientation: BarOrientation.vertical,
         previousData: from,
@@ -2676,12 +2685,13 @@ const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$9 = ["className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "dateParser"];
+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"];
 const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       data: propsData,
       dotRole,
+      getDotAnchorProps,
       id,
       isDotSelected,
       labelDecorator,
@@ -2799,16 +2809,19 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       return 0;
     }
     return 0;
-  }).filter(d => d.value !== null).map(d => ({
-    category: d.key[1],
-    x: xScaleType === 'dateString' ? dateParser ? dateParser(d.key[0]) : new Date(Date.parse(d.key[0])) : d.key[0],
-    y: d.value,
-    data: {
-      key: d.key,
-      value: d.value
-    },
-    points: [d]
-  }));
+  }).filter(d => d.value !== null).map(d => {
+    var _d$key$;
+    return {
+      category: (_d$key$ = d.key[1]) !== null && _d$key$ !== void 0 ? _d$key$ : 'default',
+      x: xScaleType === 'dateString' ? dateParser ? dateParser(d.key[0]) : new Date(Date.parse(d.key[0])) : d.key[0],
+      y: d.value,
+      data: {
+        key: d.key,
+        value: d.value
+      },
+      points: [d]
+    };
+  });
   const lines = hasCategory ? Object.values(circles.reduce((prev, curr) => {
     if (!prev[curr.category]) {
       prev[curr.category] = [];
@@ -2817,7 +2830,63 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     return prev;
   }, {})) : [circles];
   const createLine = line().x(d => scaleX(d.x)).y(d => scaleY(d.y));
-  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({}, forwardedProps, {
+  const categories = [];
+  const pivotedTable = circles.reduce((acc, item) => {
+    const {
+      x,
+      category,
+      y
+    } = item;
+    if (!categories.includes(category)) {
+      categories.push(category);
+    }
+    const formattedKey = xAxisTickFormat ? xAxisTickFormat(x) : x.toString();
+    let entry = acc.find(e => e.key === formattedKey);
+    if (!entry) {
+      entry = {
+        key: formattedKey
+      };
+      acc.push(entry);
+    }
+    entry[category] = y;
+    return acc;
+  }, []);
+  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]}.`,
+    dataTableRepresentation: hasCategory ? {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: category,
+        scope: "col"
+      }, category)))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, pivotedTable.map(row => /*#__PURE__*/React__default.createElement("tr", {
+        key: row.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, row.key), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: `${row.key}-${category}-${row[category]}`,
+        scope: "col"
+      }, row[category])))))
+    } : {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, circles.map(datum => {
+        const key = xAxisTickFormat ? xAxisTickFormat(datum.x) : datum.x.toString();
+        return /*#__PURE__*/React__default.createElement("tr", {
+          key: key
+        }, /*#__PURE__*/React__default.createElement("th", {
+          scope: "row"
+        }, key), /*#__PURE__*/React__default.createElement("td", null, datum.y));
+      }))
+    }
+  }, forwardedProps, {
     id: id,
     className: className,
     ref: ref
@@ -2853,6 +2922,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       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,
@@ -3437,16 +3507,17 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
           percent
         })
       });
-      return _objectSpread2({
+      return {
         color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
         createArc,
         previousData: from,
-        id: `id${id}__bar-${index}`,
+        id: `id${id}__arc-${index}`,
         index,
         isSelected: isSliceSelected(to),
-        key: `id${id}__bar-${index}`,
-        data: to
-      }, getSliceAnchorProps ? getSliceAnchorProps(to) : {});
+        key: `id${id}__arc-${index}`,
+        data: to,
+        anchorProps: getSliceAnchorProps ? getSliceAnchorProps(to) : undefined
+      };
     }),
     hasLabels: legendVariant === PieChartLegendVariant.internal,
     hasStroke: isSpaced,