@redsift/charts 9.4.1 → 9.5.0

package/index.js

@@ -1,4 +1,4 @@
-import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scalePoint, extent, scaleTime, line, arc, pie, min, descending, scaleSqrt, max } from 'd3';
+import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scaleBand, extent, scaleTime, scalePoint, line, arc, pie, min, descending, scaleSqrt, max } from 'd3';
 import { RedsiftColorPresentationBlueDefault, RedsiftColorPresentationGreyDark, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationGreyDefault, RedsiftColorPresentationGreenDark, RedsiftColorPresentationPinkDark, RedsiftColorPresentationAquaDark, RedsiftColorPresentationBrownDark, RedsiftColorPresentationRedDark, RedsiftColorPresentationYellowDark, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationBlueDark, RedsiftColorPresentationGreenDarker, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationRedDarker, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationGreyDarker, RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationGreyDarkerer, RedsiftColorPresentationGreenLight, RedsiftColorPresentationPinkLight, RedsiftColorPresentationAquaLight, RedsiftColorPresentationBrownLight, RedsiftColorPresentationRedLight, RedsiftColorPresentationYellowLight, RedsiftColorPresentationPurpleLight, RedsiftColorPresentationOrangeLight, RedsiftColorPresentationBlueLight, RedsiftColorPresentationGreyLight, RedsiftColorPresentationGreenLighter, RedsiftColorPresentationPinkLighter, RedsiftColorPresentationAquaLighter, RedsiftColorPresentationBrownLighter, RedsiftColorPresentationRedLighter, RedsiftColorPresentationYellowLighter, RedsiftColorPresentationPurpleLighter, RedsiftColorPresentationOrangeLighter, RedsiftColorPresentationBlueLighter, RedsiftColorPresentationGreyLighter, RedsiftColorPresentationGreenLighterer, RedsiftColorPresentationPinkLighterer, RedsiftColorPresentationAquaLighterer, RedsiftColorPresentationBrownLighterer, RedsiftColorPresentationRedLighterer, RedsiftColorPresentationYellowLighterer, RedsiftColorPresentationPurpleLighterer, RedsiftColorPresentationOrangeLighterer, RedsiftColorPresentationBlueLighterer, RedsiftColorPresentationGreyLighterer, useId, Text, Number as Number$1, baseStyling, baseContainer, 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 } from 'react';
@@ -304,12 +304,14 @@ const TooltipVariant = {
   custom: 'custom'
 };
 /** LEGEND */
-const LabelVariant = {
+const LegendVariant = {
+  none: 'none',
   label: 'label',
   value: 'value',
   percent: 'percent',
   custom: 'custom'
 };
+const LabelVariant = LegendVariant;
 
 const ChartSize = {
   small: 'small',
@@ -343,7 +345,7 @@ var k=/^--/;function I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeo
  */
 const StyledDataPoint = styled(it.g)``;
 
-const _excluded$p = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipVariant"];
+const _excluded$p = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant"];
 const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
@@ -355,11 +357,14 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       labelDecorator,
       onClick,
       role,
+      tooltipDecorator,
       tooltipVariant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$p);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  console.log(props);
+  const isTooltipCustom = tooltipVariant === TooltipVariant.custom && tooltipDecorator;
   const text = labelDecorator ? labelDecorator(data, {
     index,
     isSelected: propsIsSelected,
@@ -404,7 +409,11 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   if (showTooltip) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       placement: "right"
-    }, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, /*#__PURE__*/React__default.createElement(Text, {
+    }, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, isTooltipCustom ? tooltipDecorator(data, {
+      index,
+      isSelected: propsIsSelected,
+      color: props.color
+    }) : /*#__PURE__*/React__default.createElement(Text, {
       variant: "caption"
     }, text, hasText && hasValue ? ' - ' : null, hasValue ? /*#__PURE__*/React__default.createElement(Number$1, {
       value: tooltipValue,
@@ -1303,7 +1312,7 @@ const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }), "Loading...");
 });
 
-const _excluded$h = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "orientation", "others", "size", "sortingMethod", "barRole", "theme", "tooltipVariant"];
+const _excluded$h = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "orientation", "others", "size", "sortingMethod", "barRole", "theme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickValues"];
 const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areXLabelsRotated,
@@ -1321,7 +1330,15 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       sortingMethod,
       barRole,
       theme,
-      tooltipVariant
+      tooltipVariant,
+      xAxisVariant: propsXAxisVariant,
+      xAxisPlacement,
+      xAxisTickFormat,
+      xAxisTickValues,
+      yAxisVariant: propsYAxisVariant,
+      yAxisPlacement,
+      yAxisTickFormat,
+      yAxisTickValues
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$h);
   const cache = useRef();
@@ -1339,6 +1356,8 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     cache.current = data;
   });
   const isHorizontal = orientation === BarOrientation.horizontal;
+  const xAxisVariant = propsXAxisVariant ? propsXAxisVariant : isHorizontal ? AxisVariant.default : AxisVariant.tickValue;
+  const yAxisVariant = propsYAxisVariant ? propsYAxisVariant : isHorizontal ? AxisVariant.none : AxisVariant.default;
   const chartDimensions = sizeToDimension$3(size);
   const width = chartDimensions.width;
   const height = chartDimensions.height;
@@ -1361,7 +1380,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     } = _ref;
     return value;
   }))]).range(isHorizontal ? [0, chartWidth] : [chartHeight, 0]), [size]);
-  const scaleCategory = useMemo(() => scalePoint().domain(data.filter(datum => datum.value).map(datum => datum.key)).range([0, (numberOfRows - 1) * barWidth + (numberOfRows - 1) * gap]), [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, {
     id: id,
     className: className,
@@ -1371,32 +1390,45 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     height: height
   }, /*#__PURE__*/React__default.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
-  }, isHorizontal ? /*#__PURE__*/React__default.createElement(Axis, {
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "bottom",
     length: chartWidth,
-    scale: scale,
+    scale: isHorizontal ? scale : scaleCategory,
     x: 0,
     y: chartHeight,
-    tickValues: 4,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 4,
+    variant: xAxisVariant,
+    tickFormat: xAxisTickFormat,
+    tickRotation: areXLabelsRotated ? -45 : 0
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "top",
+    length: chartWidth,
+    scale: isHorizontal ? scale : scaleCategory,
+    x: 0,
+    y: 0,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 4,
+    variant: xAxisVariant,
+    tickFormat: xAxisTickFormat,
     tickRotation: areXLabelsRotated ? -45 : 0
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Axis, {
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "left",
     length: chartHeight,
-    scale: scale,
+    scale: isHorizontal ? scaleCategory : scale,
     x: 0,
     y: chartHeight,
-    tickValues: 4,
-    tickRotation: areXLabelsRotated ? -45 : 0
-  }), /*#__PURE__*/React__default.createElement(Axis, {
-    position: "bottom",
-    length: chartWidth,
-    scale: scaleCategory,
-    x: gap + barWidth / 2,
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 4,
+    variant: yAxisVariant,
+    tickFormat: yAxisTickFormat
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "right",
+    length: chartHeight,
+    scale: isHorizontal ? scaleCategory : scale,
+    x: chartWidth,
     y: chartHeight,
-    tickValues: 4,
-    tickRotation: areXLabelsRotated ? -45 : 0,
-    variant: "tickValue"
-  })), data.filter(datum => datum.value).map((datum, index) => {
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 4,
+    variant: yAxisVariant,
+    tickFormat: yAxisTickFormat
+  }) : null, data.filter(datum => datum.value).map((datum, index) => {
     const percent = datum.value / total;
     const to = {
       data: _objectSpread2(_objectSpread2({}, datum), {}, {
@@ -1428,7 +1460,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$g = ["areXLabelsRotated", "caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipVariant"];
+const _excluded$g = ["areXLabelsRotated", "caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipDecorator", "tooltipVariant"];
 const COMPONENT_NAME$7 = 'BarChart';
 const CLASSNAME$7 = 'redsift-barchart';
 const DEFAULT_PROPS$7 = {
@@ -1441,7 +1473,9 @@ const DEFAULT_PROPS$7 = {
   tooltipVariant: TooltipVariant.value,
   localeText: {
     emptyChartText: 'No Data'
-  }
+  },
+  xAxisPlacement: 'bottom',
+  yAxisPlacement: 'left'
 };
 const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -1461,6 +1495,7 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       barRole,
       theme,
+      tooltipDecorator,
       tooltipVariant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$g);
@@ -1499,6 +1534,7 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
     others: others,
     size: size,
     theme: theme,
+    tooltipDecorator: tooltipDecorator,
     tooltipVariant: tooltipVariant
   }, forwardedProps, {
     ref: ref
@@ -1625,17 +1661,20 @@ const StyledLegendItem = styled.li`
   gap: 8px;
   font-size: var(--redsift-typography-caption-font-size);
 
-  > div {
-    height: 16px;
-    width: 16px;
-    min-width: 16px;
-    background-color: ${_ref => {
+  ${_ref => {
   let {
+    $variant,
     color
   } = _ref;
-  return color;
-}};
-  }
+  return $variant !== LegendVariant.custom ? css`
+          > div {
+            height: 16px;
+            width: 16px;
+            min-width: 16px;
+            background-color: ${color};
+          }
+        ` : '';
+}}}
 
   ${_ref2 => {
   let {
@@ -1673,6 +1712,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     index,
     isSelected: propsIsSelected,
     labelDecorator,
+    legendDecorator,
     onClick,
     role
   } = props;
@@ -1686,6 +1726,8 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  console.log(props);
+  const isLegendCustom = variant === LegendVariant.custom && legendDecorator;
   const text = labelDecorator ? labelDecorator(data, {
     index,
     isSelected: propsIsSelected,
@@ -1718,15 +1760,20 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     onKeyDown: onClick ? e => onKeyDown(e) : undefined,
     role: role ? role : onClick ? 'button' : undefined,
     tabIndex: onClick ? 0 : undefined,
-    $clickable: Boolean(onClick)
-  }), /*#__PURE__*/React__default.createElement("div", null), typeof text === 'string' ? variant === LabelVariant.value ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
+    $clickable: Boolean(onClick),
+    $variant: variant
+  }), isLegendCustom ? legendDecorator(data, {
+    index,
+    isSelected: propsIsSelected,
+    color: props.color
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null), typeof text === 'string' ? variant === LegendVariant.value ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
     as: "b",
     maximumFractionDigits: 2,
     value: data.data.value,
     variant: "inherit"
   }), /*#__PURE__*/React__default.createElement(Text, {
     variant: "caption"
-  }, text)) : variant === LabelVariant.percent && data.data.percent ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
+  }, text)) : variant === LegendVariant.percent && data.data.percent ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
     as: "b",
     maximumFractionDigits: 2,
     type: "percent",
@@ -1736,19 +1783,19 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "caption"
   }, text)) : /*#__PURE__*/React__default.createElement(Text, {
     variant: "caption"
-  }, text) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, text));
+  }, text) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, text)));
 });
 LegendItem.className = CLASSNAME$5;
 LegendItem.defaultProps = DEFAULT_PROPS$5;
 LegendItem.displayName = COMPONENT_NAME$5;
 
-const _excluded$d = ["className", "data", "isLegendItemSelected", "labelDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
+const _excluded$d = ["className", "data", "isLegendItemSelected", "labelDecorator", "legendDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
   _excluded2 = ["color"];
 const COMPONENT_NAME$4 = 'Legend';
 const CLASSNAME$4 = 'redsift-chart-legend';
 const DEFAULT_PROPS$4 = {
   isLegendItemSelected: () => true,
-  variant: LabelVariant.label
+  variant: LegendVariant.label
 };
 const Legend = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -1756,6 +1803,7 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
       data,
       isLegendItemSelected,
       labelDecorator,
+      legendDecorator,
       legendItemRole,
       onLegendItemClick,
       variant,
@@ -1787,6 +1835,7 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
       })),
       key: `legend-item _${index}`,
       labelDecorator: labelDecorator,
+      legendDecorator: legendDecorator,
       onClick: onLegendItemClick,
       role: legendItemRole
     });
@@ -1851,11 +1900,12 @@ Line.displayName = COMPONENT_NAME$3;
 /**
  * Component's labels variant.
  */
-const LineChartLabelVariant = {
+const LineChartLegendVariant = {
   none: 'none',
   externalLabel: 'externalLabel',
   externalLabelValue: 'externalLabelValue',
-  externalLabelPercent: 'externalLabelPercent'
+  externalLabelPercent: 'externalLabelPercent',
+  custom: 'custom'
 };
 
 /**
@@ -2025,7 +2075,7 @@ const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$9 = ["className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onDotClick", "size", "sortingMethod", "theme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "dateParser"];
+const _excluded$9 = ["className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "onDotClick", "size", "sortingMethod", "theme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "dateParser"];
 const isValidDate = value => {
   const date = new Date(value);
   return date instanceof Date && !isNaN(date) && !isNaN(Date.parse(value));
@@ -2038,12 +2088,14 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       id,
       isDotSelected,
       labelDecorator,
-      labelVariant,
+      legendDecorator,
+      legendVariant,
       legendProps,
       onDotClick,
       size,
       sortingMethod,
       theme,
+      tooltipDecorator,
       tooltipVariant,
       xAxisVariant,
       xAxisPlacement,
@@ -2177,6 +2229,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       role: dotRole,
       scaleX: scaleX,
       scaleY: scaleY,
+      tooltipDecorator: tooltipDecorator,
       tooltipVariant: tooltipVariant,
       variant: DotVariant.hollow
     });
@@ -2216,19 +2269,20 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     y: chartHeight,
     tickValues: 8,
     variant: yAxisVariant
-  }) : null))), hasCategory && labelVariant !== LineChartLabelVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+  }) : null))), hasCategory && legendVariant !== LineChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
     data: statsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
-    variant: labelVariant === LineChartLabelVariant.externalLabelValue ? LabelVariant.value : labelVariant === LineChartLabelVariant.externalLabelPercent ? LabelVariant.percent : LabelVariant.label
+    variant: legendVariant === LineChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === LineChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === LineChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
+    legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
   }, legendProps)) : null);
 });
 
-const _excluded$8 = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelVariant", "localeText", "onDotClick", "size", "theme", "tooltipVariant"];
+const _excluded$8 = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "labelVariant", "legendVariant", "localeText", "onDotClick", "size", "theme", "tooltipDecorator", "tooltipVariant"];
 const COMPONENT_NAME$2 = 'LineChart';
 const CLASSNAME$2 = 'redsift-line-chart';
 const DEFAULT_PROPS$2 = {
-  labelVariant: LineChartLabelVariant.externalLabel,
+  // legendVariant: LineChartLegendVariant.externalLabel,
   localeText: {
     emptyChartText: 'No Data'
   },
@@ -2242,6 +2296,7 @@ const DEFAULT_PROPS$2 = {
   yAxisPlacement: 'left'
 };
 const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
+  var _ref;
   const {
       className,
       data: propsData,
@@ -2249,16 +2304,21 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
       emptyComponent,
       id: propsId,
       isDotSelected,
+      labelDecorator,
+      legendDecorator,
       labelVariant,
+      legendVariant: propsLegendVariant,
       localeText,
       onDotClick,
       size,
       theme,
+      tooltipDecorator,
       tooltipVariant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$8);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const legendVariant = (_ref = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : labelVariant) !== null && _ref !== void 0 ? _ref : LineChartLegendVariant.externalLabel;
   if (propsData === undefined || propsData === null) {
     return /*#__PURE__*/React__default.createElement(LoadingLineChart, _extends({
       id: id
@@ -2282,11 +2342,14 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
     dotRole: dotRole,
     id: id,
     isDotSelected: isDotSelected,
-    labelVariant: labelVariant,
+    labelDecorator: labelDecorator,
+    legendDecorator: legendDecorator,
+    legendVariant: legendVariant,
     localeText: localeText,
     onDotClick: onDotClick,
     size: size,
     theme: theme,
+    tooltipDecorator: tooltipDecorator,
     tooltipVariant: tooltipVariant
   }, forwardedProps, {
     ref: ref
@@ -2308,12 +2371,13 @@ const PieChartVariant = {
 /**
  * Component's labels variant.
  */
-const PieChartLabelVariant = {
+const PieChartLegendVariant = {
   none: 'none',
   internal: 'internal',
   externalLabel: 'externalLabel',
   externalLabelValue: 'externalLabelValue',
-  externalLabelPercent: 'externalLabelPercent'
+  externalLabelPercent: 'externalLabelPercent',
+  custom: 'custom'
 };
 
 /**
@@ -2571,7 +2635,7 @@ const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$5 = ["caping", "className", "data", "id", "isHalf", "isSliceSelected", "labelDecorator", "labelVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "sortingMethod", "subtext", "text", "theme", "tooltipVariant", "variant"];
+const _excluded$5 = ["caping", "className", "data", "id", "isHalf", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "sortingMethod", "subtext", "text", "theme", "tooltipVariant", "variant"];
 const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
@@ -2581,7 +2645,8 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
       isHalf,
       isSliceSelected,
       labelDecorator,
-      labelVariant,
+      legendDecorator,
+      legendVariant,
       legendProps,
       middleText: propsMiddleText,
       onSliceClick,
@@ -2697,7 +2762,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
         data: to
       };
     }),
-    hasLabels: labelVariant === PieChartLabelVariant.internal,
+    hasLabels: legendVariant === PieChartLegendVariant.internal,
     hasStroke: isSpaced,
     labelDecorator: labelDecorator,
     onClick: onSliceClick,
@@ -2705,33 +2770,35 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     sliceProps: sliceProps,
     tooltipVariant: tooltipVariant,
     transform: `translate(${width / 2} ${isHalf ? height : height / 2})`
-  }))), labelVariant !== PieChartLabelVariant.none && labelVariant !== PieChartLabelVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+  }))), legendVariant !== PieChartLegendVariant.none && legendVariant !== PieChartLegendVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, _extends({
     data: data.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
-    variant: labelVariant === PieChartLabelVariant.externalLabelValue ? LabelVariant.value : labelVariant === PieChartLabelVariant.externalLabelPercent ? LabelVariant.percent : LabelVariant.label,
+    variant: legendVariant === PieChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === PieChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === PieChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
     width: legendWidth.current,
-    labelDecorator: labelDecorator ? (datum, props) => labelDecorator(datum, props) : undefined
+    labelDecorator: labelDecorator ? (datum, props) => labelDecorator(datum, props) : undefined,
+    legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
   }, legendProps)) : null);
 });
 
-const _excluded$4 = ["caping", "chartRef", "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", "legendDecorator", "labelVariant", "legendVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "subtext", "text", "theme", "tooltipDecorator", "tooltipVariant", "variant"];
 const COMPONENT_NAME$1 = 'PieChart';
 const CLASSNAME$1 = 'redsift-piechart';
 const DEFAULT_PROPS$1 = {
   isSliceSelected: () => true,
-  labelVariant: PieChartLabelVariant.none,
+  // legendVariant: PieChartLegendVariant.none,
   others: true,
   size: ChartSize.medium,
   sortingMethod: 'desc-value',
   theme: ColorTheme.default,
-  variant: PieChartVariant.plain,
+  variant: PieChartVariant.spaced,
   tooltipVariant: TooltipVariant.value,
   localeText: {
     emptyChartText: 'No Data'
   }
 };
 const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
+  var _ref;
   const {
       caping,
       chartRef,
@@ -2741,7 +2808,9 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       id: propsId,
       isSliceSelected,
       labelDecorator,
+      legendDecorator,
       labelVariant,
+      legendVariant: propsLegendVariant,
       localeText,
       middleText,
       onSliceClick,
@@ -2751,12 +2820,14 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       subtext,
       text,
       theme,
+      tooltipDecorator,
       tooltipVariant,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$4);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const legendVariant = (_ref = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : labelVariant) !== null && _ref !== void 0 ? _ref : PieChartLegendVariant.none;
   if (propsData === undefined || propsData === null) {
     return /*#__PURE__*/React__default.createElement(LoadingPieChart, _extends({
       id: id
@@ -2784,7 +2855,8 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     isSliceSelected: isSliceSelected,
     labelDecorator: labelDecorator,
-    labelVariant: labelVariant,
+    legendDecorator: legendDecorator,
+    legendVariant: legendVariant,
     middleText: middleText,
     onSliceClick: onSliceClick,
     others: others,
@@ -2793,6 +2865,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     subtext: subtext,
     text: text,
     theme: theme,
+    tooltipDecorator: tooltipDecorator,
     tooltipVariant: tooltipVariant,
     variant: variant
   }, forwardedProps, {
@@ -2813,11 +2886,12 @@ const ScatterPlotVariant = {
 /**
  * Component's labels variant.
  */
-const ScatterPlotLabelVariant = {
+const ScatterPlotLegendVariant = {
   none: 'none',
   externalLabel: 'externalLabel',
   externalLabelValue: 'externalLabelValue',
-  externalLabelPercent: 'externalLabelPercent'
+  externalLabelPercent: 'externalLabelPercent',
+  custom: 'custom'
 };
 
 /**
@@ -2995,7 +3069,7 @@ var mdiChevronDown = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z
 var mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
 var mdiMouse = "M11,1.07C7.05,1.56 4,4.92 4,9H11M4,15A8,8 0 0,0 12,23A8,8 0 0,0 20,15V11H4M13,1.07V9H20C20,4.92 16.94,1.56 13,1.07Z";
 
-const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "theme", "tooltipVariant", "variant", "xAxisVariant", "xAxisPlacement", "yAxisVariant", "yAxisPlacement"];
+const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "theme", "tooltipDecorator", "tooltipVariant", "variant", "xAxisVariant", "xAxisPlacement", "yAxisVariant", "yAxisPlacement"];
 const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       isBrushable,
@@ -3006,7 +3080,8 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
       id,
       isDotSelected,
       labelDecorator,
-      labelVariant,
+      legendDecorator,
+      legendVariant,
       legendProps,
       onBrush,
       onBrushEnd,
@@ -3014,6 +3089,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       sortingMethod,
       theme,
+      tooltipDecorator,
       tooltipVariant,
       variant,
       xAxisVariant,
@@ -3185,6 +3261,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
       role: dotRole,
       scaleX: scaleX,
       scaleY: scaleY,
+      tooltipDecorator: tooltipDecorator,
       tooltipVariant: tooltipVariant
     });
   }))), /*#__PURE__*/React__default.createElement("g", {
@@ -3221,21 +3298,22 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     y: chartHeight,
     tickValues: 8,
     variant: yAxisVariant
-  }) : null))), hasCategory && labelVariant !== ScatterPlotLabelVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+  }) : null))), hasCategory && legendVariant !== ScatterPlotLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
     data: countsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
-    variant: labelVariant === ScatterPlotLabelVariant.externalLabelValue ? LabelVariant.value : labelVariant === ScatterPlotLabelVariant.externalLabelPercent ? LabelVariant.percent : LabelVariant.label,
-    width: legendWidth.current
+    variant: legendVariant === ScatterPlotLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === ScatterPlotLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === ScatterPlotLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
+    width: legendWidth.current,
+    legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
   }, legendProps)) : null);
 });
 
-const _excluded = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant"];
+const _excluded = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendDecorator", "legendVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipDecorator", "tooltipVariant", "variant"];
 const COMPONENT_NAME = 'ScatterPlot';
 const CLASSNAME = 'redsift-scatterplot';
 const DEFAULT_PROPS = {
   hideControlKeyPanel: false,
-  labelVariant: ScatterPlotLabelVariant.externalLabel,
+  // legendVariant: ScatterPlotLegendVariant.externalLabel,
   localeText: {
     emptyChartText: 'No Data'
   },
@@ -3250,6 +3328,7 @@ const DEFAULT_PROPS = {
   yAxisPlacement: 'left'
 };
 const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
+  var _ref;
   const {
       className,
       data: propsData,
@@ -3257,19 +3336,24 @@ const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
       emptyComponent,
       id: propsId,
       isDotSelected,
+      labelDecorator,
       labelVariant,
+      legendDecorator,
+      legendVariant: propsLegendVariant,
       localeText,
       onBrush,
       onBrushEnd,
       onDotClick,
       size,
       theme,
+      tooltipDecorator,
       tooltipVariant,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const legendVariant = (_ref = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : labelVariant) !== null && _ref !== void 0 ? _ref : ScatterPlotLegendVariant.externalLabel;
   if (propsData === undefined || propsData === null) {
     return /*#__PURE__*/React__default.createElement(LoadingScatterPlot, _extends({
       id: id
@@ -3293,13 +3377,16 @@ const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     dotRole: dotRole,
     id: id,
     isDotSelected: isDotSelected,
-    labelVariant: labelVariant,
+    labelDecorator: labelDecorator,
+    legendDecorator: legendDecorator,
+    legendVariant: legendVariant,
     localeText: localeText,
     onBrush: onBrush,
     onBrushEnd: onBrushEnd,
     onDotClick: onDotClick,
     size: size,
     theme: theme,
+    tooltipDecorator: tooltipDecorator,
     tooltipVariant: tooltipVariant,
     variant: variant
   }, forwardedProps, {
@@ -3310,5 +3397,5 @@ ScatterPlot.className = CLASSNAME;
 ScatterPlot.defaultProps = DEFAULT_PROPS;
 ScatterPlot.displayName = COMPONENT_NAME;
 
-export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, Line, LineChart, LineChartLabelVariant, PieChart, PieChartLabelVariant, PieChartVariant, ScatterPlot, ScatterPlotLabelVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, getSortingMethod, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, LegendVariant, Line, LineChart, LineChartLegendVariant, PieChart, PieChartLegendVariant, PieChartVariant, ScatterPlot, ScatterPlotLegendVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, getSortingMethod, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
 //# sourceMappingURL=index.js.map