@redsift/charts 8.0.0-alpha.8 → 8.0.0

package/index.d.ts

@@ -1,7 +1,7 @@
 import { BrushBehavior, ScaleLinear as ScaleLinear$1, ScaleOrdinal, Arc as Arc$1 } from 'd3';
 import * as _redsift_design_system from '@redsift/design-system';
 import { ValueOf, Comp, StylingProps } from '@redsift/design-system';
-import { MutableRefObject, ComponentProps, ReactElement, ReactNode } from 'react';
+import { MutableRefObject, ComponentProps, RefObject, ReactElement, ReactNode } from 'react';
 import { PieArcDatum } from 'd3-shape';
 import * as d3_scale from 'd3-scale';
 import { ScaleLinear as ScaleLinear$2, ScaleLogarithmic, ScaleSymLog, ScalePoint as ScalePoint$1, ScaleBand as ScaleBand$1, ScaleTime as ScaleTime$1 } from 'd3-scale';
@@ -162,7 +162,7 @@ interface UseColorProps {
     /** Name of the field that will be used to categorize the data. */
     category: string;
 }
-declare const useColor: ({ data, theme, category }: UseColorProps) => ScaleOrdinal<string, string, never> | undefined;
+declare const useColor: ({ data, theme, category }: UseColorProps) => ScaleOrdinal<string, string, never>;
 
 interface UseFormatCategoricalDataProps {
     /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
@@ -176,7 +176,7 @@ interface UseFormatCategoricalDataProps {
 }
 declare const useFormatCategoricalData: ({ data, caping, others, theme, }: UseFormatCategoricalDataProps) => {
     data: CategoryData;
-    colorScale: d3_scale.ScaleOrdinal<string, string, never> | undefined;
+    colorScale: d3_scale.ScaleOrdinal<string, string, never>;
 };
 
 interface UseZoomProps {
@@ -188,9 +188,10 @@ interface UseZoomProps {
         x: number;
         y: number;
     };
+    size?: any;
     onZoom?: () => void;
 }
-declare const useZoom: ({ svgRef, scaleX, scaleY, defaultTransform, onZoom, }: UseZoomProps) => {
+declare const useZoom: ({ svgRef, scaleX, scaleY, defaultTransform, size, onZoom, }: UseZoomProps) => {
     transform: {
         k: number;
         x: number;
@@ -291,6 +292,8 @@ interface ArcsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'>, Pick<
     arcs: Omit<ArcProps, 'ref'>[];
     /** Whether arcs have internal labels or not. */
     hasLabels?: boolean;
+    /** Native HTML props to forward to each slice. */
+    sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
 }
 type StyledArcsProps = Omit<ArcsProps, 'arcs'> & {};
 
@@ -395,6 +398,10 @@ declare const StyledBar: styled_components.StyledComponent<_redsift_design_syste
 interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, StylingProps {
     /** Caption. */
     caption?: string;
+    /** Native HTML props to pass to the chart. */
+    chartProps?: ComponentProps<'div'>;
+    /** Ref to the chart. */
+    chartRef?: RefObject<HTMLDivElement>;
     /** Id. */
     id?: string;
     /** Method called when the Reset button is displayed (defines whether or not the button should be displayed). */
@@ -425,6 +432,8 @@ type BarChartDimensions = ChartDimensions & {
 interface BarChartProps extends ChartContainerProps {
     /** 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'>;
     /** 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. */
@@ -580,6 +589,8 @@ interface PieChartProps extends ChartContainerProps {
     others?: boolean | string;
     /** PieChart size. */
     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. */
     sliceRole?: ArcProps['role'];
     /** Secondary text to be displayed in the middle of the chart, between the main text and subtext. Recommended to be used with donut variants only. */

package/index.js

@@ -1,5 +1,5 @@
 import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, arc, pie, min, extent, descending, scaleSqrt, max } from 'd3';
-import { RedsiftDataVizColorBlueDefault, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorRedDefault, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreenDark, RedsiftDataVizColorPinkDark, RedsiftDataVizColorAquaDark, RedsiftDataVizColorBrownDark, RedsiftDataVizColorRedDark, RedsiftDataVizColorYellowDark, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorBlueDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorRedDarker, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorGreyDarkerer, RedsiftDataVizColorGreenLight, RedsiftDataVizColorPinkLight, RedsiftDataVizColorAquaLight, RedsiftDataVizColorBrownLight, RedsiftDataVizColorRedLight, RedsiftDataVizColorYellowLight, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorBlueLight, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowLighterer, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorGreyLighterer, Text, Number as Number$1, baseStyling, Flexbox, warnIfNoAccessibleLabelFound, Heading, Button } from '@redsift/design-system';
+import { RedsiftDataVizColorBlueDefault, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorRedDefault, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreenDark, RedsiftDataVizColorPinkDark, RedsiftDataVizColorAquaDark, RedsiftDataVizColorBrownDark, RedsiftDataVizColorRedDark, RedsiftDataVizColorYellowDark, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorBlueDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorRedDarker, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorGreyDarkerer, RedsiftDataVizColorGreenLight, RedsiftDataVizColorPinkLight, RedsiftDataVizColorAquaLight, RedsiftDataVizColorBrownLight, RedsiftDataVizColorRedLight, RedsiftDataVizColorYellowLight, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorBlueLight, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowLighterer, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorGreyLighterer, Text, Number as Number$1, baseStyling, focusRing, Flexbox, warnIfNoAccessibleLabelFound, Heading, Button } from '@redsift/design-system';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useState, useLayoutEffect, forwardRef, useCallback, useContext, useId } from 'react';
 import classNames from 'classnames';
@@ -92,11 +92,8 @@ const useColor = _ref => {
     theme,
     category
   } = _ref;
-  const colorScaleRef = useRef();
-  if (!colorScaleRef.current && data !== undefined) {
-    colorScaleRef.current = getColorScale(theme, data.map(d => d[category]));
-  }
-  return colorScaleRef.current;
+  const colorScale = useMemo(() => getColorScale(theme, data.map(d => d[category])), [theme]);
+  return colorScale;
 };
 
 function ownKeys(object, enumerableOnly) {
@@ -225,7 +222,7 @@ const useFormatCategoricalData = _ref => {
       }
     }
     return computedData;
-  }, [data]);
+  }, [data, caping]);
   const colorScale = useColor({
     data: computedData,
     theme,
@@ -247,6 +244,7 @@ const useZoom = _ref => {
       x: 0,
       y: 0
     },
+    size,
     onZoom
   } = _ref;
   const zx = useRef(scaleX);
@@ -262,7 +260,7 @@ const useZoom = _ref => {
       });
       select(svgRef.current).call(zoom$1);
     }
-  }, [svgRef.current]);
+  }, [svgRef.current, size]);
   return {
     transform,
     scaleX: zx.current,
@@ -351,7 +349,9 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   };
-  const DataPointComponent = /*#__PURE__*/React__default.createElement(StyledDataPoint, _extends({}, forwardedProps, {
+  const DataPointComponent = /*#__PURE__*/React__default.createElement(StyledDataPoint, _extends({
+    tabIndex: onClick ? 0 : undefined
+  }, forwardedProps, {
     className: classNames(className, `_${index}`, {
       selected: isSelected,
       deselected: isDeselected
@@ -364,7 +364,6 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
     onClick: onClick ? () => onClick(data) : undefined,
     onKeyDown: onClick ? e => onKeyDown(e) : undefined,
     role: role ? role : onClick ? 'button' : undefined,
-    tabIndex: onClick ? 0 : undefined,
     $clickable: Boolean(onClick)
   }), children, !showTooltip && !isEmpty ? /*#__PURE__*/React__default.createElement("title", {
     id: `${id}-title`
@@ -408,12 +407,14 @@ const StyledArc = styled(DataPoint)`
           cursor: pointer;
 
           &:hover,
-          &:focus {
+          &:focus,
+          &.focused {
             opacity: 0.8;
             outline: none;
           }
 
-          &:focus-visible {
+          &:focus-visible,
+          &.focused {
             path {
               stroke: var(--redsift-color-default-primary);
               stroke-width: 4px;
@@ -498,7 +499,7 @@ Arc.displayName = COMPONENT_NAME$a;
  */
 const StyledArcs = styled.g``;
 
-const _excluded$i = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "tooltipVariant"];
+const _excluded$i = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "sliceProps", "tooltipVariant"];
 const COMPONENT_NAME$9 = 'Arcs';
 const CLASSNAME$9 = 'redsift-arcs';
 const DEFAULT_PROPS$9 = {};
@@ -513,6 +514,7 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
       labelDecorator,
       onClick,
       role,
+      sliceProps,
       tooltipVariant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$i);
@@ -536,7 +538,7 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
     var _arc$index, _arc$id;
     const arcIndex = (_arc$index = arc.index) !== null && _arc$index !== void 0 ? _arc$index : index;
     const arcId = (_arc$id = arc.id) !== null && _arc$id !== void 0 ? _arc$id : `id${id}__arc-${arcIndex}`;
-    return /*#__PURE__*/React__default.createElement(Arc, _extends({
+    return /*#__PURE__*/React__default.createElement(Arc, _extends({}, sliceProps, {
       color: color,
       hasStroke: hasStroke,
       labelDecorator: labelDecorator,
@@ -591,6 +593,10 @@ const AxisPosition = {
   left: 'left'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -887,6 +893,10 @@ const BarOrientation = {
   vertical: 'vertical'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -903,20 +913,39 @@ const StyledBar = styled(DataPoint)`
           cursor: pointer;
 
           &:hover,
-          &:focus {
+          &:focus,
+          &.focused {
             outline: none;
             rect {
               fill-opacity: 0.7;
             }
           }
 
-          &:focus-visible {
-            rect {
-              stroke: var(--redsift-color-default-primary);
-              stroke-width: 4px;
-              paint-order: stroke;
+          // &:focus-visible {
+          //   rect {
+          //     stroke: var(--redsift-color-default-primary);
+          //     stroke-width: 4px;
+          //     paint-order: stroke;
+          //   }
+          // }
+
+          @media (prefers-reduced-motion: no-preference) {
+            &:focus-visible,
+            &.focused {
+              outline: 2px solid var(--redsift-color-default-primary);
+              transition: outline-offset 75ms ease-out;
+            }
+
+            &:not(&:active)&:focus-visible,
+            &:not(&:active)&.focused {
+              transition-duration: 0.25s;
             }
           }
+
+          &:not(&:active)&:focus-visible,
+          &:not(&:active)&.focused {
+            outline-offset: 0.2rem;
+          }
         ` : '';
 }}}
 `;
@@ -1031,6 +1060,8 @@ const StyledChartContainer = styled.div`
     justify-content: center;
     margin: 8px 0;
     position: relative;
+
+    ${focusRing}
   }
 
   svg {
@@ -1045,7 +1076,7 @@ const StyledChartContainerCaption = styled.p`
   line-height: var(--redsift-typography-caption-line-height);
 `;
 
-const _excluded$f = ["aria-label", "aria-labelledby", "caption", "children", "className", "id", "title", "onReset"];
+const _excluded$f = ["aria-label", "aria-labelledby", "caption", "chartProps", "chartRef", "children", "className", "id", "title", "onReset"];
 const COMPONENT_NAME$6 = 'ChartContainer';
 const CLASSNAME$6 = 'redsift-chart-container';
 const DEFAULT_PROPS$6 = {};
@@ -1054,6 +1085,8 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
       'aria-label': propsAriaLabel,
       'aria-labelledby': propsAriaLabelledby,
       caption,
+      chartProps,
+      chartRef,
       children,
       className,
       id: propsId,
@@ -1081,12 +1114,13 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${ChartContainer.className}-title__reset-button`,
     color: "question",
     variant: "unstyled",
-    onPress: onReset
-  }, stringFormatter.format('reset')) : null) : null, children ? /*#__PURE__*/React__default.createElement("div", {
+    onClick: onReset
+  }, stringFormatter.format('reset')) : null) : null, children ? /*#__PURE__*/React__default.createElement("div", _extends({}, chartProps, {
+    ref: chartRef,
     className: `${ChartContainer.className}__content`,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby
-  }, children) : null, caption ? /*#__PURE__*/React__default.createElement(StyledChartContainerCaption, {
+  }), children) : null, caption ? /*#__PURE__*/React__default.createElement(StyledChartContainerCaption, {
     className: `${ChartContainer.className}__caption`
   }, caption) : null);
 });
@@ -1221,10 +1255,11 @@ const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }), "Loading...");
 });
 
-const _excluded$c = ["areXLabelsRotated", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
+const _excluded$c = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
 const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areXLabelsRotated,
+      barProps,
       caping,
       className,
       data: propsData,
@@ -1265,15 +1300,12 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const chartWidth = width - margins.left - margins.right;
   const numberOfRows = data.length;
   const gap = 5;
-  const scaleRef = useRef();
-  if (!scaleRef.current) {
-    scaleRef.current = scaleLinear().domain([0, Math.max(...data.map(_ref => {
-      let {
-        value
-      } = _ref;
-      return value;
-    }))]).range([0, chartWidth]);
-  }
+  const scale = useMemo(() => scaleLinear().domain([0, Math.max(...data.map(_ref => {
+    let {
+      value
+    } = _ref;
+    return value;
+  }))]).range([0, chartWidth]), [size]);
   const barHeight = (chartHeight - (numberOfRows + 1) * gap) / numberOfRows;
   const total = sum(data, d => d.value);
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
@@ -1288,7 +1320,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement(Axis, {
     position: "bottom",
     length: chartWidth,
-    scale: scaleRef.current,
+    scale: scale,
     x: 0,
     y: chartHeight,
     tickValues: 4,
@@ -1303,7 +1335,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     const from = cache.current ? {
       data: cache.current[index]
     } : undefined;
-    return /*#__PURE__*/React__default.createElement(Bar, {
+    return /*#__PURE__*/React__default.createElement(Bar, _extends({}, barProps, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
       data: to,
       gap: gap,
@@ -1316,13 +1348,13 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       onClick: onBarClick,
       previousData: from,
       role: barRole,
-      scale: scaleRef.current,
+      scale: scale,
       tooltipVariant: tooltipVariant
-    });
+    }));
   }))));
 });
 
-const _excluded$b = ["areXLabelsRotated", "caping", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
+const _excluded$b = ["areXLabelsRotated", "caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
 const COMPONENT_NAME$5 = 'BarChart';
 const CLASSNAME$5 = 'redsift-barchart';
 const DEFAULT_PROPS$5 = {
@@ -1339,6 +1371,7 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areXLabelsRotated,
       caping,
+      chartRef,
       className,
       data: propsData,
       emptyComponent,
@@ -1377,6 +1410,7 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
     areXLabelsRotated: areXLabelsRotated,
     barRole: barRole,
     caping: caping,
+    chartRef: chartRef,
     className: classNames(BarChart.className, className),
     data: propsData,
     id: id,
@@ -1677,6 +1711,10 @@ const PieChartLabelVariant = {
   externalLabelPercent: 'externalLabelPercent'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -1928,7 +1966,7 @@ const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$5 = ["caping", "className", "data", "id", "isSliceSelected", "labelDecorator", "labelVariant", "middleText", "onSliceClick", "others", "size", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
+const _excluded$5 = ["caping", "className", "data", "id", "isSliceSelected", "labelDecorator", "labelVariant", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
 const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
@@ -1942,6 +1980,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
       onSliceClick,
       others,
       size,
+      sliceProps,
       sliceRole,
       subtext,
       text,
@@ -2024,9 +2063,10 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     hasStroke: variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut,
     labelDecorator: labelDecorator,
     onClick: onSliceClick,
+    role: sliceRole,
+    sliceProps: sliceProps,
     tooltipVariant: tooltipVariant,
-    transform: `translate(${width / 2} ${height / 2})`,
-    role: sliceRole
+    transform: `translate(${width / 2} ${height / 2})`
   }))), labelVariant !== PieChartLabelVariant.none && labelVariant !== PieChartLabelVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, {
     data: data.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
@@ -2035,7 +2075,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }) : null);
 });
 
-const _excluded$4 = ["caping", "className", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "labelVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
+const _excluded$4 = ["caping", "chartRef", "className", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "labelVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
 const COMPONENT_NAME$1 = 'PieChart';
 const CLASSNAME$1 = 'redsift-piechart';
 const DEFAULT_PROPS$1 = {
@@ -2053,6 +2093,7 @@ const DEFAULT_PROPS$1 = {
 const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
+      chartRef,
       className,
       data: propsData,
       emptyComponent,
@@ -2095,6 +2136,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }
   return /*#__PURE__*/React__default.createElement(RenderedPieChart, _extends({
     caping: caping,
+    chartRef: chartRef,
     className: classNames(PieChart.className, className),
     data: propsData,
     id: id,
@@ -2136,6 +2178,10 @@ const ScatterPlotLabelVariant = {
   externalLabelPercent: 'externalLabelPercent'
 };
 
+/**
+ * Component props.
+ */
+
 /**
  * Component style.
  */
@@ -2374,6 +2420,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     svgRef,
     scaleX: extendedScaleX,
     scaleY: extendedScaleY,
+    size,
     onZoom: () => {
       if (brushRef.current && svgBrushRef.current) {
         brushRef.current.clear(select(svgBrushRef.current));