@redsift/charts 11.1.3 → 11.2.0

package/index.d.ts

@@ -5,6 +5,7 @@ import { PieArcDatum } from 'd3-shape';
 import { MutableRefObject, ComponentProps, ReactElement, RefObject, ReactNode } from 'react';
 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';
+import { TooltipProps } from '@redsift/popovers';
 import * as styled_components from 'styled-components';
 import * as _react_spring_web from '@react-spring/web';
 
@@ -405,6 +406,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;
+    /** Entire dataset in which the data point is a part of. */
+    dataset: any[];
     /** Disable animations. */
     disableAnimations?: boolean;
     /** Id. Used for accessibility. */
@@ -420,7 +423,7 @@ interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale
         color?: string;
     }) => string | ReactElement;
     /** Method called when a click or keydown occurs on the component. */
-    onClick?: (data: T) => void;
+    onClick?: (data: T, dataset: any[]) => void;
     /** State from which the component should start the animation, if any. */
     previousData?: T;
     /** Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable. */
@@ -435,8 +438,10 @@ interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale
         isSelected?: boolean;
         color?: string;
     }) => string | ReactElement;
+    /** Default placement of the tooltip. */
+    tooltipProps?: Partial<Omit<TooltipProps, 'ref'>>;
 }
-type StyledDataPointProps = Omit<DataPointProps<any>, 'data'> & {
+type StyledDataPointProps = Omit<DataPointProps<any>, 'data' | 'dataset'> & {
     $clickable: boolean;
 };
 
@@ -445,7 +450,7 @@ declare const DataPoint: Comp<DataPointProps<any>, SVGGElement>;
 /**
  * Component style.
  */
-declare const StyledDataPoint: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<DataPointProps<any>, "data"> & {
+declare const StyledDataPoint: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
     $clickable: boolean;
 }, never>;
 
@@ -468,7 +473,7 @@ declare const Arc: Comp<ArcProps, SVGGElement>;
 /**
  * Component style.
  */
-declare const StyledArc: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data"> & {
+declare const StyledArc: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
     $clickable: boolean;
 } & Omit<ArcProps, "createArc"> & {
     $hasStroke: boolean | undefined;
@@ -533,7 +538,7 @@ declare const Bar: Comp<BarProps, SVGGElement>;
 /**
  * Component style.
  */
-declare const StyledBar: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data"> & {
+declare const StyledBar: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
     $clickable: boolean;
 } & Omit<BarProps, "scale" | "scalePosition"> & {
     $theme: Theme;
@@ -599,7 +604,7 @@ declare const StyledChartContainerCaption: styled_components.StyledComponent<"p"
 /**
  * Component props.
  */
-interface LegendItemProps extends Pick<DataPointProps<LegendItemDatum>, 'color' | 'data' | 'id' | 'index' | 'isSelected' | 'labelDecorator' | 'onClick' | 'previousData' | 'role' | 'tooltipVariant'>, Omit<ComponentProps<'li'>, 'onClick' | 'role'> {
+interface LegendItemProps extends Pick<DataPointProps<LegendItemDatum>, 'color' | 'data' | 'dataset' | 'id' | 'index' | 'isSelected' | 'labelDecorator' | 'onClick' | 'previousData' | 'role' | 'tooltipVariant'>, Omit<ComponentProps<'li'>, 'onClick' | 'role'> {
     /** Method modifying what's displayed within the legend when the variant is "custom". */
     legendDecorator?: (datum: LegendItemDatum, props?: {
         index?: number;
@@ -633,7 +638,7 @@ interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick'>, ContainerPr
         color?: string;
     }) => string | ReactElement;
     /** Method to be called on a click on a legend item. */
-    onLegendItemClick?: (datum: LegendItemDatum) => void;
+    onLegendItemClick?: (datum: LegendItemDatum, data: LegendItemDatum[]) => void;
     /** LegendItem role. Used to indicate that legend items are to be considered buttons or links. If an onClick is provided, the legend items will have the role `button` unless specifically set to `link` with this prop. */
     legendItemRole?: LegendItemProps['role'];
     /** Variant. */
@@ -719,7 +724,7 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     /** 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. For a navigation link, please use `getBarAnchorProps` instead. */
-    onBarClick?: (datum: BarDatum) => void;
+    onBarClick?: (datum: BarDatum, data: BarDatum[]) => void;
     /** Orientation of the bar. */
     orientation?: BarOrientation;
     /** 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. */
@@ -798,7 +803,7 @@ declare const Dot: Comp<DotProps, SVGGElement>;
 /**
  * Component style.
  */
-declare const StyledDot: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data"> & {
+declare const StyledDot: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
     $clickable: boolean;
 } & Omit<DotProps, "scaleX" | "scaleY"> & {
     $variant: DotVariant | undefined;

package/index.js

@@ -376,7 +376,7 @@ var k=/^--/;function I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeo
 const StyledDataPoint = styled(it.g)``;
 
 const _excluded$q = ["as", "href"],
-  _excluded2$5 = ["anchorProps", "children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
+  _excluded2$5 = ["anchorProps", "children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme", "tooltipProps", "dataset"];
 const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       anchorProps: {
@@ -394,7 +394,9 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       role,
       tooltipDecorator,
       tooltipVariant,
-      theme: propsTheme
+      theme: propsTheme,
+      tooltipProps,
+      dataset
     } = props,
     anchorProps = _objectWithoutProperties(props.anchorProps, _excluded$q),
     forwardedProps = _objectWithoutProperties(props, _excluded2$5);
@@ -420,7 +422,7 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       event.stopPropagation();
       if (event.code === 'Enter' || event.code === 'Space') {
         event.preventDefault();
-        onClick(data);
+        onClick(data, dataset);
       }
     }
   };
@@ -432,7 +434,7 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
     "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,
+    onClick: onClick ? () => onClick(data, dataset) : undefined,
     onKeyDown: onClick ? e => onKeyDown(e) : undefined,
     role: role ? role : onClick ? 'button' : href ? undefined : 'img'
   }, forwardedProps, {
@@ -447,11 +449,11 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
     id: `${id}-title`
   }, `${text}: ${data.data.value}`) : null);
   if (showTooltip) {
-    return /*#__PURE__*/React__default.createElement(Tooltip, {
+    return /*#__PURE__*/React__default.createElement(Tooltip, _extends({
       placement: "right",
       theme: theme,
       delay: 50
-    }, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, href !== undefined ? /*#__PURE__*/React__default.createElement(as || 'a', _objectSpread2({
+    }, tooltipProps), /*#__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,
@@ -569,7 +571,11 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(Arc.className, className),
     $clickable: Boolean(onClick),
     $hasStroke: Boolean(hasStroke),
-    $theme: theme
+    $theme: theme,
+    tooltipProps: {
+      placement: 'client-point',
+      offset: 12
+    }
   }), /*#__PURE__*/React__default.createElement(it.path, {
     d: config.immediate || disableAnimations ? createArc(data) : animatedProps.t.to(t => createArc(interpolator(t))),
     fill: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color
@@ -1768,6 +1774,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React__default.createElement(Bar, _extends({
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
       data: to,
+      dataset: bars,
       disableAnimations: disableAnimations,
       gap: gap,
       id: `id${id}__bar-${index}`,
@@ -1858,7 +1865,7 @@ const StyledLegendItem = styled.li`
 }}}
 `;
 
-const _excluded$h = ["className", "color", "data", "id", "variant"];
+const _excluded$h = ["className", "color", "data", "dataset", "id", "variant"];
 const COMPONENT_NAME$7 = 'LegendItem';
 const CLASSNAME$7 = 'redsift-legend-item';
 const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
@@ -1874,6 +1881,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       color = monochrome,
       data,
+      dataset,
       id: propsId,
       variant
     } = props,
@@ -1896,7 +1904,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
       event.stopPropagation();
       if (event.code === 'Enter' || event.code === 'Space') {
         event.preventDefault();
-        onClick(data);
+        onClick(data, dataset);
       }
     }
   };
@@ -1910,7 +1918,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-labelledby": !isEmpty ? `${id}-title` : undefined,
     "aria-selected": isSelected ? true : isDeselected ? false : undefined,
     id: id,
-    onClick: onClick ? () => onClick(data) : undefined,
+    onClick: onClick ? () => onClick(data, dataset) : undefined,
     onKeyDown: onClick ? e => onKeyDown(e) : undefined,
     role: role ? role : onClick ? 'button' : undefined,
     tabIndex: onClick ? 0 : undefined,
@@ -1977,6 +1985,7 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
           percent: (_datum$percent = datum.percent) !== null && _datum$percent !== void 0 ? _datum$percent : datum.value / total
         })
       },
+      dataset: data,
       color: color,
       variant: variant,
       index: index,
@@ -2283,6 +2292,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       return /*#__PURE__*/React__default.createElement(Bar, _extends({
         color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
         data: to,
+        dataset: bars,
         disableAnimations: disableAnimations,
         gap: gap,
         id: `id${id}__bar-${categoryIndex}.${index}`,
@@ -3119,6 +3129,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
         id: `id${id}__circle-${categoryIndex}.${index}`,
         color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(circle.category),
         data: to,
+        dataset: circles,
         isSelected: Boolean(isDotSelected === null || isDotSelected === void 0 ? void 0 : isDotSelected(to)),
         anchorProps: getDotAnchorProps ? getDotAnchorProps(to) : undefined,
         key: `circle _${categoryIndex}.${index}`,
@@ -3568,6 +3579,17 @@ const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
         endAngle: 2 * Math.PI,
         padAngle: 0
       },
+      dataset: [{
+        data: {
+          key: 'No Data',
+          value: 0
+        },
+        index: 0,
+        value: 0,
+        startAngle: 0,
+        endAngle: 2 * Math.PI,
+        padAngle: 0
+      }],
       color: empty
     }],
     transform: `translate(${width / 2} ${height / 2})`
@@ -3750,6 +3772,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
         isSelected: isSliceSelected(to),
         key: `id${id}__arc-${index}`,
         data: to,
+        dataset: pieData,
         anchorProps: getSliceAnchorProps ? getSliceAnchorProps(to) : undefined
       };
     }),
@@ -4342,6 +4365,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React__default.createElement(Dot, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(circle.category),
       data: to,
+      dataset: circles,
       isSelected: Boolean(isDotSelected === null || isDotSelected === void 0 ? void 0 : isDotSelected(to)),
       key: `circle _${index}`,
       labelDecorator: labelDecorator,