@redsift/charts 10.1.0-alpha.2 → 10.1.0-alpha.4

package/index.js

@@ -1069,8 +1069,8 @@ const DEFAULT_PROPS$9 = {
   },
   width: 40
 };
+const getValue = data => data.cumulativeValue !== undefined ? data.cumulativeValue : data.value;
 const Bar = /*#__PURE__*/forwardRef((props, ref) => {
-  var _data;
   const {
     color,
     data,
@@ -1093,7 +1093,7 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$m);
   const theme = useTheme();
-  const interpolator = interpolate(((_data = previousData.data) === null || _data === void 0 ? void 0 : _data.value) || 0, data.data.value);
+  const interpolator = interpolate(getValue(previousData.data) || 0, getValue(data.data));
   const text = labelDecorator ? labelDecorator(data, {
     index,
     isSelected: propsIsSelected,
@@ -1124,7 +1124,7 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
     fill: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
     width: config.immediate ? scale(data.data.value) : animatedProps.t.to(t => scale(interpolator(t)))
   }) : /*#__PURE__*/React__default.createElement(it.rect, {
-    height: config.immediate ? maxHeight - scale(data.data.value) : animatedProps.t.to(t => maxHeight - scale(interpolator(t))),
+    height: config.immediate ? maxHeight - scale(getValue(data.data)) : animatedProps.t.to(t => Math.max(0, maxHeight - scale(interpolator(t)))),
     fill: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
     width: width
   }), isHorizontal ? /*#__PURE__*/React__default.createElement("text", {
@@ -1138,6 +1138,21 @@ Bar.className = CLASSNAME$9;
 Bar.defaultProps = DEFAULT_PROPS$9;
 Bar.displayName = COMPONENT_NAME$9;
 
+/**
+ * Component's labels variant.
+ */
+const BarChartLegendVariant = {
+  none: 'none',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent',
+  custom: 'custom'
+};
+
+/**
+ * Component props.
+ */
+
 var reset$1 = "Reset";
 var enUS = {
 	reset: reset$1
@@ -1603,7 +1618,222 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$h = ["barProps", "className", "data", "id", "isBarSelected", "labelDecorator", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "dateParser"];
+/**
+ * Component style.
+ */
+const StyledLegend = styled.ul`
+  display: flex;
+  flex-direction: column;
+
+  ${baseContainer}
+`;
+
+/**
+ * Component style.
+ */
+const StyledLegendItem = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--redsift-typography-caption-font-size);
+
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+  `;
+}}
+
+  ${_ref2 => {
+  let {
+    $variant,
+    color
+  } = _ref2;
+  return $variant !== LegendVariant.custom ? css`
+          > div {
+            height: 16px;
+            width: 16px;
+            min-width: 16px;
+            background-color: ${color};
+          }
+        ` : '';
+}}}
+
+  ${_ref3 => {
+  let {
+    $clickable
+  } = _ref3;
+  return $clickable ? css`
+          cursor: pointer;
+
+          &:hover,
+          &:focus {
+            outline: none;
+            > div {
+              opacity: 0.7;
+            }
+          }
+
+          &:focus-visible {
+            > div {
+              outline: 4px solid var(--redsift-color-primary-n);
+            }
+          }
+        ` : '';
+}}}
+`;
+
+const _excluded$h = ["className", "color", "data", "id", "variant"];
+const COMPONENT_NAME$7 = 'LegendItem';
+const CLASSNAME$7 = 'redsift-legend-item';
+const DEFAULT_PROPS$7 = {
+  color: monochrome,
+  index: 0
+};
+const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    index,
+    isSelected: propsIsSelected,
+    labelDecorator,
+    legendDecorator,
+    onClick,
+    role
+  } = props;
+  const {
+      className,
+      color,
+      data,
+      id: propsId,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+  const theme = useTheme();
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const isLegendCustom = variant === LegendVariant.custom && legendDecorator;
+  const text = labelDecorator ? labelDecorator(data, {
+    index,
+    isSelected: propsIsSelected,
+    color
+  }) : data.data.key;
+  const isEmpty = data.data.value === 0;
+  const isSelectable = role === 'option';
+  const isSelected = isSelectable && propsIsSelected === true;
+  const isDeselected = isSelectable && propsIsSelected === false;
+  const onKeyDown = event => {
+    if (onClick) {
+      event.stopPropagation();
+      if (event.code === 'Enter' || event.code === 'Space') {
+        event.preventDefault();
+        onClick(data);
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(StyledLegendItem, _extends({}, forwardedProps, {
+    className: classNames(LegendItem.className, className, `_${index}`, {
+      selected: isSelected,
+      deselected: isDeselected
+    }),
+    color: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
+    ref: ref,
+    "aria-labelledby": !isEmpty ? `${id}-title` : undefined,
+    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
+    id: id,
+    onClick: onClick ? () => onClick(data) : undefined,
+    onKeyDown: onClick ? e => onKeyDown(e) : undefined,
+    role: role ? role : onClick ? 'button' : undefined,
+    tabIndex: onClick ? 0 : undefined,
+    $clickable: Boolean(onClick),
+    $variant: variant,
+    $theme: theme
+  }), 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 === 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",
+    value: data.data.percent,
+    variant: "inherit"
+  }), /*#__PURE__*/React__default.createElement(Text, {
+    variant: "caption"
+  }, text)) : /*#__PURE__*/React__default.createElement(Text, {
+    variant: "caption"
+  }, text) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, text)));
+});
+LegendItem.className = CLASSNAME$7;
+LegendItem.defaultProps = DEFAULT_PROPS$7;
+LegendItem.displayName = COMPONENT_NAME$7;
+
+const _excluded$g = ["className", "data", "isLegendItemSelected", "labelDecorator", "legendDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
+  _excluded2 = ["color"];
+const COMPONENT_NAME$6 = 'Legend';
+const CLASSNAME$6 = 'redsift-chart-legend';
+const DEFAULT_PROPS$6 = {
+  isLegendItemSelected: () => true,
+  variant: LegendVariant.label
+};
+const Legend = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      data,
+      isLegendItemSelected,
+      labelDecorator,
+      legendDecorator,
+      legendItemRole,
+      onLegendItemClick,
+      variant,
+      width
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+  const total = sum(data, d => d.value);
+  return /*#__PURE__*/React__default.createElement(StyledLegend, _extends({}, forwardedProps, {
+    className: classNames(Legend.className, className),
+    ref: ref,
+    $width: width
+  }), data.map((_ref, index) => {
+    var _datum$percent;
+    let {
+        color
+      } = _ref,
+      datum = _objectWithoutProperties(_ref, _excluded2);
+    return /*#__PURE__*/React__default.createElement(LegendItem, {
+      data: {
+        data: _objectSpread2(_objectSpread2({}, datum), {}, {
+          percent: (_datum$percent = datum.percent) !== null && _datum$percent !== void 0 ? _datum$percent : datum.value / total
+        })
+      },
+      color: color,
+      variant: variant,
+      index: index,
+      isSelected: Boolean(isLegendItemSelected({
+        data: datum
+      })),
+      key: `legend-item _${index}`,
+      labelDecorator: labelDecorator,
+      legendDecorator: legendDecorator,
+      onClick: onLegendItemClick,
+      role: legendItemRole
+    });
+  }));
+});
+Legend.className = CLASSNAME$6;
+Legend.defaultProps = DEFAULT_PROPS$6;
+Legend.displayName = COMPONENT_NAME$6;
+
+const _excluded$f = ["barProps", "className", "data", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "dateParser"];
+const getKey = datum => Array.isArray(datum.key) ? datum.key[0] : datum.key;
+const isSameKey = (key, previousKey, xScaleType) => xScaleType === 'Date' || xScaleType === 'dateString' ? key.getTime() === previousKey.getTime() : key === previousKey;
 const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       barProps,
@@ -1612,6 +1842,9 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       id,
       isBarSelected,
       labelDecorator,
+      legendDecorator,
+      legendVariant,
+      legendProps,
       margins: propsMargins,
       onBarClick,
       size,
@@ -1641,11 +1874,11 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       yAxisTickRemodelling,
       dateParser
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   const cache = useRef();
   const theme = useTheme();
-  const xScaleType = propsData[0].key instanceof Date ? 'Date' : typeof propsData[0].key === 'number' ? 'number' : typeof propsData[0].key === 'string' && isValidDate(propsData[0].key) ? 'dateString' : undefined;
-  const data = xScaleType === 'number' ? propsData.filter(datum => typeof datum.key === 'number' && !Number.isNaN(datum.key)) : xScaleType === 'dateString' ? propsData.filter(datum => isValidDate(datum.key)) : xScaleType === 'Date' ? propsData.filter(datum => datum.key instanceof Date) : propsData;
+  const xScaleType = getKey(propsData[0]) instanceof Date ? 'Date' : typeof getKey(propsData[0]) === 'number' ? 'number' : typeof getKey(propsData[0]) === 'string' && isValidDate(getKey(propsData[0])) ? 'dateString' : undefined;
+  const data = xScaleType === 'number' ? propsData.filter(datum => typeof getKey(datum) === 'number' && !Number.isNaN(getKey(datum))) : xScaleType === 'dateString' ? propsData.filter(datum => isValidDate(getKey(datum))) : xScaleType === 'Date' ? propsData.filter(datum => getKey(datum) instanceof Date) : propsData;
   useEffect(() => {
     cache.current = data;
   });
@@ -1669,7 +1902,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const scaleX = (() => {
     if (xScaleType === 'number') {
       var _ref, _ref2;
-      const domain = extent(data, d => d.key);
+      const domain = extent(data, d => getKey(d));
       domain[0] = (_ref = xAxisMinValue) !== null && _ref !== void 0 ? _ref : domain[0];
       domain[1] = (_ref2 = xAxisMaxValue) !== null && _ref2 !== void 0 ? _ref2 : domain[1];
       const gap = domain[1] - domain[0];
@@ -1678,7 +1911,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       return scaleLinear().domain(domain).range([0, chartWidth]).nice();
     } else if (xScaleType === 'dateString' || xScaleType === 'Date') {
       var _ref3, _ref4;
-      const domain = xScaleType === 'dateString' ? extent(data, d => Date.parse(d.key)) : extent(data, d => d.key.valueOf());
+      const domain = xScaleType === 'dateString' ? extent(data, d => Date.parse(getKey(d))) : extent(data, d => getKey(d).valueOf());
       domain[0] = (_ref3 = xAxisMinValue) !== null && _ref3 !== void 0 ? _ref3 : domain[0];
       domain[1] = (_ref4 = xAxisMaxValue) !== null && _ref4 !== void 0 ? _ref4 : domain[1];
       const startDate = xAxisTickValues && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[0]), -1) : new Date(domain[0]);
@@ -1686,23 +1919,14 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       return scaleTime().domain([startDate, endDate]).range([0, chartWidth]).nice();
     } else {
       var _ref5, _ref6;
-      const domain = xAxisTickValues && Array.isArray(xAxisTickValues) ? xAxisTickValues : data.map(d => d.key);
+      const domain = xAxisTickValues && Array.isArray(xAxisTickValues) ? xAxisTickValues : data.map(d => getKey(d));
       domain[0] = (_ref5 = xAxisMinValue) !== null && _ref5 !== void 0 ? _ref5 : domain[0];
       domain[1] = (_ref6 = xAxisMaxValue) !== null && _ref6 !== void 0 ? _ref6 : domain[1];
       return scalePoint().domain(domain).range([0, chartWidth]);
     }
   })();
-  const scaleY = (() => {
-    var _ref7, _ref8;
-    const domain = extent(data, d => d.value);
-    domain[0] = (_ref7 = yAxisMinValue) !== null && _ref7 !== void 0 ? _ref7 : domain[0];
-    domain[1] = (_ref8 = yAxisMaxValue) !== null && _ref8 !== void 0 ? _ref8 : domain[1];
-    if (domain[1] === 0 && domain[0] === 0) {
-      domain[1] = 1;
-    }
-    return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
-  })();
   const xAxisTickFormat = propsXAxisTickFormat !== null && propsXAxisTickFormat !== void 0 ? propsXAxisTickFormat : xScaleType === 'Date' || xScaleType === 'dateString' ? scaleX.tickFormat() : undefined;
+  const hasCategory = data[0] && Array.isArray(data[0].key) && data[0].key.length >= 2 && data[0].key[1] !== null && data[0].key[1] !== undefined;
   const statsByCategory = statsBy$1(data, sortingMethod);
   const colorScale = useColor({
     data: statsByCategory,
@@ -1711,37 +1935,54 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     theme
   });
   const bars = data.sort((a, b) => {
-    const currentKeyA = a.key;
-    const currentKeyB = b.key;
+    const currentKeyA = hasCategory ? a.key[0] : a.key;
+    const currentKeyB = hasCategory ? b.key[0] : b.key;
     if (xScaleType === 'number') {
       if (currentKeyA < currentKeyB) return -1;
       if (currentKeyA > currentKeyB) return 1;
-      return 0;
+      return hasCategory ? a.key[1] < b.key[1] ? 1 : -1 : 0;
     } else if (xScaleType === 'dateString') {
       if (Date.parse(currentKeyA) < Date.parse(currentKeyB)) return -1;
       if (Date.parse(currentKeyA) > Date.parse(currentKeyB)) return 1;
-      return 0;
+      return hasCategory ? a.key[1] < b.key[1] ? 1 : -1 : 0;
     } else if (xScaleType === 'Date') {
       if (currentKeyA.valueOf() < currentKeyB.valueOf()) return -1;
       if (currentKeyA.valueOf() > currentKeyB.valueOf()) return 1;
-      return 0;
+      return hasCategory ? a.key[1] < b.key[1] ? 1 : -1 : 0;
     } else if (xScaleType === 'string' && xAxisTickValues && Array.isArray(xAxisTickValues)) {
       if (xAxisTickValues.indexOf(currentKeyA) < xAxisTickValues.indexOf(currentKeyB)) return -1;
       if (xAxisTickValues.indexOf(currentKeyA) > xAxisTickValues.indexOf(currentKeyB)) return 1;
-      return 0;
+      return hasCategory ? a.key[1] < b.key[1] ? 1 : -1 : 0;
     }
-    return 0;
-  }).filter(d => d.value !== null).map(d => {
-    const currentKeyD = d.key;
-    return {
-      category: 'default',
-      key: xScaleType === 'dateString' ? dateParser ? dateParser(currentKeyD) : new Date(Date.parse(currentKeyD)) : currentKeyD,
-      value: d.value
-    };
-  });
+    return hasCategory ? a.key[1] < b.key[1] ? 1 : -1 : 0;
+  }).filter(d => d.value !== null).reduce((previousValue, currentValue, currentIndex) => {
+    var _key$;
+    const currentKeyD = hasCategory ? currentValue.key[0] : currentValue.key;
+    const formattedKeyD = xScaleType === 'dateString' ? dateParser ? dateParser(currentKeyD) : new Date(Date.parse(currentKeyD)) : currentKeyD;
+    previousValue.push({
+      category: hasCategory ? (_key$ = currentValue.key[1]) !== null && _key$ !== void 0 ? _key$ : 'default' : 'default',
+      key: formattedKeyD,
+      value: currentValue.value,
+      cumulativeValue: currentValue.value
+    });
+    if (hasCategory && currentIndex > 0 && isSameKey(formattedKeyD, previousValue[currentIndex - 1].key, xScaleType)) {
+      previousValue[currentIndex].cumulativeValue = previousValue[currentIndex].cumulativeValue + previousValue[currentIndex - 1].cumulativeValue;
+    }
+    return previousValue;
+  }, []);
+  const scaleY = (() => {
+    var _ref7, _ref8;
+    const domain = extent(bars, d => d.cumulativeValue);
+    domain[0] = (_ref7 = yAxisMinValue) !== null && _ref7 !== void 0 ? _ref7 : domain[0];
+    domain[1] = (_ref8 = yAxisMaxValue) !== null && _ref8 !== void 0 ? _ref8 : domain[1];
+    if (domain[1] === 0 && domain[0] === 0) {
+      domain[1] = 1;
+    }
+    return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
+  })();
   if (xScaleType) {
     const minimalGap = Math.min(...bars.map((bar, i) => i > 0 ? Math.abs(bar.key - bars[i - 1].key) : undefined).filter(k => k)) * 0.9;
-    barWidth = Math.min(barWidth, chartWidth / ((scaleX.domain()[1] - scaleX.domain()[0]) / minimalGap), chartWidth / (xAxisTickValues ? xAxisTickValues.range(scaleX.domain()[0], scaleX.domain()[1]).length : 1));
+    barWidth = Math.min(barWidth, chartWidth / ((scaleX.domain()[1] - scaleX.domain()[0]) / minimalGap), chartWidth / (xAxisTickValues ? typeof xAxisTickValues === 'number' ? xAxisTickValues : xAxisTickValues.range(scaleX.domain()[0], scaleX.domain()[1]).length : 1));
   }
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
     id: id,
@@ -1759,7 +2000,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     transform: `translate(${margins.left},${margins.top})`
   }, bars.map((bar, index) => {
     const to = {
-      data: _objectSpread2({}, bar)
+      data: bar
     };
     const from = cache.current ? {
       data: cache.current[index]
@@ -1774,7 +2015,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       isSelected: Boolean(isBarSelected(to)),
       key: `bar _${index}`,
       labelDecorator: labelDecorator,
-      maxHeight: chartHeight,
+      maxHeight: scaleY(bar.cumulativeValue - bar.value),
       onClick: onBarClick,
       orientation: BarOrientation.vertical,
       previousData: from,
@@ -1836,13 +2077,19 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: yAxisTickFormat,
     tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
-  }) : null))));
+  }) : null))), hasCategory && legendVariant !== BarChartLegendVariant.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: legendVariant === BarChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === BarChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === BarChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
+    legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
+  }, legendProps)) : null);
 });
 
-const _excluded$g = ["caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipDecorator", "colorTheme", "tooltipVariant"];
-const COMPONENT_NAME$7 = 'BarChart';
-const CLASSNAME$7 = 'redsift-barchart';
-const DEFAULT_PROPS$7 = {
+const _excluded$e = ["caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipDecorator", "colorTheme", "tooltipVariant"];
+const COMPONENT_NAME$5 = 'BarChart';
+const CLASSNAME$5 = 'redsift-barchart';
+const DEFAULT_PROPS$5 = {
   isBarSelected: () => true,
   orientation: BarOrientation.horizontal,
   others: true,
@@ -1866,6 +2113,8 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       id: propsId,
       isBarSelected,
       labelDecorator,
+      legendDecorator,
+      legendVariant: propsLegendVariant,
       localeText,
       onBarClick,
       orientation,
@@ -1877,9 +2126,10 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       colorTheme,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const legendVariant = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : BarChartLegendVariant.externalLabel;
   if (propsData === undefined || propsData === null) {
     return /*#__PURE__*/React__default.createElement(LoadingBarChart, _extends({
       id: id
@@ -1920,7 +2170,7 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
     }, forwardedProps, {
       ref: ref
     }));
-  } else if (dataType === 'LinearData') {
+  } else if (dataType === 'LinearData' || dataType === 'TwoCategoryData') {
     return /*#__PURE__*/React__default.createElement(RenderedLinearBarChart, _extends({
       barRole: barRole,
       chartRef: chartRef,
@@ -1929,6 +2179,8 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       id: id,
       isBarSelected: isBarSelected,
       labelDecorator: labelDecorator,
+      legendDecorator: legendDecorator,
+      legendVariant: legendVariant,
       onBarClick: onBarClick,
       size: size,
       theme: theme,
@@ -1941,9 +2193,9 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }
   return null;
 });
-BarChart.className = CLASSNAME$7;
-BarChart.defaultProps = DEFAULT_PROPS$7;
-BarChart.displayName = COMPONENT_NAME$7;
+BarChart.className = CLASSNAME$5;
+BarChart.defaultProps = DEFAULT_PROPS$5;
+BarChart.displayName = COMPONENT_NAME$5;
 
 /**
  * Component's variant.
@@ -1996,10 +2248,10 @@ const StyledDot = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$f = ["className", "scaleX", "scaleY", "variant"];
-const COMPONENT_NAME$6 = 'Dot';
-const CLASSNAME$6 = 'redsift-dot';
-const DEFAULT_PROPS$6 = {
+const _excluded$d = ["className", "scaleX", "scaleY", "variant"];
+const COMPONENT_NAME$4 = 'Dot';
+const CLASSNAME$4 = 'redsift-dot';
+const DEFAULT_PROPS$4 = {
   color: monochrome,
   index: 0,
   labelDecorator: datum => {
@@ -2021,7 +2273,7 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
       scaleY,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const theme = useTheme();
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
@@ -2040,222 +2292,9 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
     strokeWidth: variant === DotVariant.hollow ? '2' : '0'
   }));
 });
-Dot.className = CLASSNAME$6;
-Dot.defaultProps = DEFAULT_PROPS$6;
-Dot.displayName = COMPONENT_NAME$6;
-
-/**
- * Component style.
- */
-const StyledLegend = styled.ul`
-  display: flex;
-  flex-direction: column;
-
-  ${baseContainer}
-`;
-
-/**
- * Component style.
- */
-const StyledLegendItem = styled.li`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: var(--redsift-typography-caption-font-size);
-
-  ${_ref => {
-  let {
-    $theme
-  } = _ref;
-  return css`
-    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
-  `;
-}}
-
-  ${_ref2 => {
-  let {
-    $variant,
-    color
-  } = _ref2;
-  return $variant !== LegendVariant.custom ? css`
-          > div {
-            height: 16px;
-            width: 16px;
-            min-width: 16px;
-            background-color: ${color};
-          }
-        ` : '';
-}}}
-
-  ${_ref3 => {
-  let {
-    $clickable
-  } = _ref3;
-  return $clickable ? css`
-          cursor: pointer;
-
-          &:hover,
-          &:focus {
-            outline: none;
-            > div {
-              opacity: 0.7;
-            }
-          }
-
-          &:focus-visible {
-            > div {
-              outline: 4px solid var(--redsift-color-primary-n);
-            }
-          }
-        ` : '';
-}}}
-`;
-
-const _excluded$e = ["className", "color", "data", "id", "variant"];
-const COMPONENT_NAME$5 = 'LegendItem';
-const CLASSNAME$5 = 'redsift-legend-item';
-const DEFAULT_PROPS$5 = {
-  color: monochrome,
-  index: 0
-};
-const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    index,
-    isSelected: propsIsSelected,
-    labelDecorator,
-    legendDecorator,
-    onClick,
-    role
-  } = props;
-  const {
-      className,
-      color,
-      data,
-      id: propsId,
-      variant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
-  const theme = useTheme();
-  const [_id] = useId();
-  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
-  const isLegendCustom = variant === LegendVariant.custom && legendDecorator;
-  const text = labelDecorator ? labelDecorator(data, {
-    index,
-    isSelected: propsIsSelected,
-    color
-  }) : data.data.key;
-  const isEmpty = data.data.value === 0;
-  const isSelectable = role === 'option';
-  const isSelected = isSelectable && propsIsSelected === true;
-  const isDeselected = isSelectable && propsIsSelected === false;
-  const onKeyDown = event => {
-    if (onClick) {
-      event.stopPropagation();
-      if (event.code === 'Enter' || event.code === 'Space') {
-        event.preventDefault();
-        onClick(data);
-      }
-    }
-  };
-  return /*#__PURE__*/React__default.createElement(StyledLegendItem, _extends({}, forwardedProps, {
-    className: classNames(LegendItem.className, className, `_${index}`, {
-      selected: isSelected,
-      deselected: isDeselected
-    }),
-    color: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
-    ref: ref,
-    "aria-labelledby": !isEmpty ? `${id}-title` : undefined,
-    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
-    id: id,
-    onClick: onClick ? () => onClick(data) : undefined,
-    onKeyDown: onClick ? e => onKeyDown(e) : undefined,
-    role: role ? role : onClick ? 'button' : undefined,
-    tabIndex: onClick ? 0 : undefined,
-    $clickable: Boolean(onClick),
-    $variant: variant,
-    $theme: theme
-  }), 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 === 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",
-    value: data.data.percent,
-    variant: "inherit"
-  }), /*#__PURE__*/React__default.createElement(Text, {
-    variant: "caption"
-  }, text)) : /*#__PURE__*/React__default.createElement(Text, {
-    variant: "caption"
-  }, 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", "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: LegendVariant.label
-};
-const Legend = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      className,
-      data,
-      isLegendItemSelected,
-      labelDecorator,
-      legendDecorator,
-      legendItemRole,
-      onLegendItemClick,
-      variant,
-      width
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
-  const total = sum(data, d => d.value);
-  return /*#__PURE__*/React__default.createElement(StyledLegend, _extends({}, forwardedProps, {
-    className: classNames(Legend.className, className),
-    ref: ref,
-    $width: width
-  }), data.map((_ref, index) => {
-    var _datum$percent;
-    let {
-        color
-      } = _ref,
-      datum = _objectWithoutProperties(_ref, _excluded2);
-    return /*#__PURE__*/React__default.createElement(LegendItem, {
-      data: {
-        data: _objectSpread2(_objectSpread2({}, datum), {}, {
-          percent: (_datum$percent = datum.percent) !== null && _datum$percent !== void 0 ? _datum$percent : datum.value / total
-        })
-      },
-      color: color,
-      variant: variant,
-      index: index,
-      isSelected: Boolean(isLegendItemSelected({
-        data: datum
-      })),
-      key: `legend-item _${index}`,
-      labelDecorator: labelDecorator,
-      legendDecorator: legendDecorator,
-      onClick: onLegendItemClick,
-      role: legendItemRole
-    });
-  }));
-});
-Legend.className = CLASSNAME$4;
-Legend.defaultProps = DEFAULT_PROPS$4;
-Legend.displayName = COMPONENT_NAME$4;
+Dot.className = CLASSNAME$4;
+Dot.defaultProps = DEFAULT_PROPS$4;
+Dot.displayName = COMPONENT_NAME$4;
 
 /**
  * Component style.
@@ -2748,7 +2787,6 @@ const _excluded$8 = ["className", "data", "dotRole", "emptyComponent", "id", "is
 const COMPONENT_NAME$2 = 'LineChart';
 const CLASSNAME$2 = 'redsift-line-chart';
 const DEFAULT_PROPS$2 = {
-  // legendVariant: LineChartLegendVariant.externalLabel,
   localeText: {
     emptyChartText: 'No Data'
   },
@@ -3914,5 +3952,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, 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, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarChartLegendVariant, 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, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
 //# sourceMappingURL=index.js.map