@redsift/charts 7.0.1 → 7.1.0

package/index.js

@@ -1,4 +1,4 @@
-import { scaleOrdinal, pie, arc, sum } from 'd3';
+import { scaleOrdinal, select, axisBottom, scaleLinear, sum, pie, arc } from 'd3';
 import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useLayoutEffect, useId } from 'react';
 import styled, { css } from 'styled-components';
 import ReactDOM from 'react-dom';
@@ -10,21 +10,76 @@ const ColorTheme = {
   monochrome: 'monochrome'
 };
 
-const monochrome = '#B6DAEE';
+/**
+ * Do not edit directly
+ * Generated on Wed, 14 Dec 2022 17:05:36 GMT
+ */
+const RedsiftDataVizColorPurpleDefault = '#C1AAEA';
+const RedsiftDataVizColorPurpleDark = '#A78ADB';
+const RedsiftDataVizColorPurpleDarker = '#8D6CC9';
+const RedsiftDataVizColorPurpleLight = '#D9CAF5';
+const RedsiftDataVizColorPurpleLighter = '#F0E9FC';
+const RedsiftDataVizColorBlueDefault = '#B6DAEE';
+const RedsiftDataVizColorBlueDark = '#97C5DE';
+const RedsiftDataVizColorBlueDarker = '#73ADCC';
+const RedsiftDataVizColorBlueLight = '#D8EDF8';
+const RedsiftDataVizColorBlueLighter = '#F6FBFE';
+const RedsiftDataVizColorGreenDefault = '#B3E3C5';
+const RedsiftDataVizColorGreenDark = '#90D2A9';
+const RedsiftDataVizColorGreenDarker = '#6DBE8B';
+const RedsiftDataVizColorGreenLight = '#D3F0DE';
+const RedsiftDataVizColorGreenLighter = '#EDFAF1';
+const RedsiftDataVizColorRedDefault = '#EAADAC';
+const RedsiftDataVizColorRedDark = '#D18785';
+const RedsiftDataVizColorRedDarker = '#BA6361';
+const RedsiftDataVizColorRedLight = '#FFD3D2';
+const RedsiftDataVizColorRedLighter = '#FFE5E5';
+const RedsiftDataVizColorPinkDefault = '#E2A7D7';
+const RedsiftDataVizColorPinkDark = '#D185C3';
+const RedsiftDataVizColorPinkDarker = '#BD63AC';
+const RedsiftDataVizColorPinkLight = '#EFC8E8';
+const RedsiftDataVizColorPinkLighter = '#F9E6F6';
+const RedsiftDataVizColorCyanDefault = '#AFF5F3';
+const RedsiftDataVizColorCyanDark = '#8CEAE6';
+const RedsiftDataVizColorCyanDarker = '#6CDCD8';
+const RedsiftDataVizColorCyanLight = '#D4FCFA';
+const RedsiftDataVizColorCyanLighter = '#E1FFFF';
+const RedsiftDataVizColorOrangeDefault = '#F2D39E';
+const RedsiftDataVizColorOrangeDark = '#D8B475';
+const RedsiftDataVizColorOrangeDarker = '#BD954F';
+const RedsiftDataVizColorOrangeLight = '#FFE8C0';
+const RedsiftDataVizColorOrangeLighter = '#FFF0D7';
+const RedsiftDataVizColorYellowDefault = '#F6EFC7';
+const RedsiftDataVizColorYellowDark = '#DED4A0';
+const RedsiftDataVizColorYellowDarker = '#C6BB7A';
+const RedsiftDataVizColorYellowLight = '#FFFBE1';
+const RedsiftDataVizColorYellowLighter = '#FFFDF0';
+const RedsiftDataVizColorBrownDefault = '#E6C2A0';
+const RedsiftDataVizColorBrownDark = '#CDA279';
+const RedsiftDataVizColorBrownDarker = '#B58556';
+const RedsiftDataVizColorBrownLight = '#FFE3C9';
+const RedsiftDataVizColorBrownLighter = '#FFEEDE';
+const RedsiftDataVizColorGreyDefault = '#E5E5E5';
+const RedsiftDataVizColorGreyDark = '#BDBDBD';
+const RedsiftDataVizColorGreyDarker = '#666666';
+const RedsiftDataVizColorGreyLight = '#F5F5F5';
+const RedsiftDataVizColorGreyLighter = '#FFFFFF';
+
+const monochrome = RedsiftDataVizColorBlueDefault;
 const scheme = {
-  default: ['#C1AAEA', '#B6DAEE', '#B3E3C5', '#EAADAC', '#E2A7D7', '#AFF5F3', '#F2D39E', '#F6EFC7', '#E6C2A0', '#E5E5E5'],
-  dark: ['#A78ADB', '#97C5DE', '#90D2A9', '#D18785', '#D185C3', '#8CEAE6', '#D8B475', '#DED4A0', '#CDA279', '#BDBDBD'],
-  darker: ['#8D6CC9', '#73ADCC', '#6DBE8B', '#BA6361', '#BD63AC', '#6CDCD8', '#BD954F', '#C6BB7A', '#B58556', '#666666'],
-  light: ['#D9CAF5', '#D8EDF8', '#D3F0DE', '#FFD3D2', '#EFC8E8', '#D4FCFA', '#FFE8C0', '#FFFBE1', '#FFE3C9', '#F5F5F5'],
-  lighter: ['#F0E9FC', '#F6FBFE', '#EDFAF1', '#FFE5E5', '#F9E6F6', '#E1FFFF', '#FFF0D7', '#FFFDF0', '#FFEEDE', '#FFFFFF'],
+  default: [RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorRedDefault, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorCyanDefault, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorGreyDefault],
+  dark: [RedsiftDataVizColorPurpleDark, RedsiftDataVizColorBlueDark, RedsiftDataVizColorGreenDark, RedsiftDataVizColorRedDark, RedsiftDataVizColorPinkDark, RedsiftDataVizColorCyanDark, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorYellowDark, RedsiftDataVizColorBrownDark, RedsiftDataVizColorGreyDark],
+  darker: [RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorRedDarker, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorCyanDarker, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorGreyDarker],
+  light: [RedsiftDataVizColorPurpleLight, RedsiftDataVizColorBlueLight, RedsiftDataVizColorGreenLight, RedsiftDataVizColorRedLight, RedsiftDataVizColorPinkLight, RedsiftDataVizColorCyanLight, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorYellowLight, RedsiftDataVizColorBrownLight, RedsiftDataVizColorGreyLight],
+  lighter: [RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorRedLighter, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorCyanLighter, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorGreyLighter],
   monochrome: [monochrome],
-  empty: ['#BDBDBD']
+  empty: [RedsiftDataVizColorGreyDark]
 };
 const successDangerScheme = {
-  success: '#90D2A9',
-  warning: '#D8B475',
-  danger: '#D18785',
-  neutral: '#BDBDBD'
+  success: RedsiftDataVizColorGreenDark,
+  warning: RedsiftDataVizColorOrangeDark,
+  danger: RedsiftDataVizColorRedDark,
+  neutral: RedsiftDataVizColorGreyDark
 };
 const getColorScale = (theme, isEmpty) => {
   let d3colors = scaleOrdinal(scheme.default);
@@ -117,38 +172,19 @@ function _objectWithoutProperties(source, excluded) {
 /**
  * Component size.
  */
-const PieChartSize = {
+const HorizontalBarChartSize = {
   small: 'small',
   medium: 'medium',
   large: 'large'
 };
-/**
- * Component variant.
- */
-const PieChartVariant = {
-  plain: 'plain',
-  spaced: 'spaced',
-  donut: 'donut',
-  spacedDonut: 'spacedDonut'
-};
-/**
- * Component's labels variant.
- */
-const PieChartLabelVariant = {
-  none: 'none',
-  internal: 'internal',
-  externalLabel: 'externalLabel',
-  externalLabelValue: 'externalLabelValue',
-  externalLabelPercent: 'externalLabelPercent'
-};
 /**
  * Component theme.
  */
-const PieChartTheme = ColorTheme;
+const HorizontalBarChartTheme = ColorTheme;
 /**
  * Tooltip label variant.
  */
-const PieChartTooltipVariant = {
+const HorizontalBarChartTooltipVariant = {
   none: 'none',
   label: 'label',
   value: 'value',
@@ -158,12 +194,12 @@ const PieChartTooltipVariant = {
 /**
  * Component style.
  */
-const StyledPieChart = styled.div`
+const StyledHorizontalBarChart = styled.div`
   margin: 8px;
   padding: 8px;
   color: var(--redsift-color-neutral-black);
 
-  .redsift-piechart__container {
+  .redsift-horizontal-barchart__container {
     display: flex;
     align-items: center;
     gap: 16px;
@@ -172,27 +208,32 @@ const StyledPieChart = styled.div`
     justify-content: center;
     margin: 8px 0;
 
-    .redsift-piechart-container__chart {
+    .redsift-horizontal-barchart-container__chart {
       position: relative;
     }
   }
+
   svg {
     display: block;
+
+    g {
+      margin: 8px;
+    }
   }
 `;
-const StyledPieChartTitle = styled.div`
+const StyledHorizontalBarChartTitle = styled.div`
   font-family: var(--redsift-typography-h4-font-family);
   font-size: var(--redsift-typography-h4-font-size);
   font-weight: var(--redsift-typography-h4-font-weight);
   line-height: var(--redsift-typography-h4-line-height);
 `;
-const StyledPieChartCaption = styled.p`
+const StyledHorizontalBarChartCaption = styled.p`
   font-family: var(--redsift-typography-caption-font-family);
   font-size: var(--redsift-typography-caption-font-size);
   font-weight: var(--redsift-typography-caption-font-weight);
   line-height: var(--redsift-typography-caption-line-height);
 `;
-const StyledPieChartCenterText = styled.div`
+const StyledHorizontalBarChartEmptyText = styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -213,10 +254,9 @@ const StyledPieChartCenterText = styled.div`
 }}px;
   }
 
-  > b {
-    font-family: var(--redsift-typography-font-family-source-code-pro);
+  > span {
+    font-family: var(--redsift-typography-font-family-raleway);
     color: var(--redsift-color-neutral-black);
-    font-weight: var(--redsift-typography-font-weight-medium);
     font-size: ${_ref2 => {
   let {
     $textSize
@@ -229,160 +269,39 @@ const StyledPieChartCenterText = styled.div`
   } = _ref3;
   return $textSize;
 }}px;
-
-    &:nth-child(2) {
-      font-weight: normal;
-      margin-top: 8px;
-      font-family: var(--redsift-typography-font-family-raleway);
-      font-size: ${_ref4 => {
-  let {
-    $smallTextSize
-  } = _ref4;
-  return $smallTextSize;
-}}px;
-      line-height: ${_ref5 => {
-  let {
-    $smallTextSize
-  } = _ref5;
-  return $smallTextSize;
-}}px;
-    }
-  }
-  > span {
-    color: var(--redsift-color-neutral-black);
-    font-size: ${_ref6 => {
-  let {
-    $textSize
-  } = _ref6;
-  return $textSize;
-}}px;
-    line-height: ${_ref7 => {
-  let {
-    $textSize
-  } = _ref7;
-  return $textSize;
-}}px;
-    &:nth-child(3) {
-      margin-top: 4px;
-      font-size: ${_ref8 => {
-  let {
-    $smallTextSize
-  } = _ref8;
-  return $smallTextSize;
-}}px;
-      line-height: ${_ref9 => {
-  let {
-    $smallTextSize
-  } = _ref9;
-  return $smallTextSize;
-}}px;
-    }
-  }
-  > b + span {
-    font-size: var(--redsift-typography-body-font-size);
-    font-family: var(--redsift-typography-font-family-raleway);
-    line-height: var(--redsift-typography-badge-line-height);
-    color: rgba(0, 0, 0, 0.6);
-    text-align: center;
-  }
-`;
-const StyledPieChartEmptyText = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-
-  > * {
-    max-width: ${_ref10 => {
-  let {
-    $maxWidth
-  } = _ref10;
-  return $maxWidth;
-}}px;
-  }
-
-  > span {
-    font-family: var(--redsift-typography-font-family-raleway);
-    color: ${_ref11 => {
-  let {
-    $isDonut
-  } = _ref11;
-  return $isDonut ? css`var(--redsift-color-neutral-midgrey)` : css`var(--redsift-color-neutral-black)`;
-}};
-    font-size: ${_ref12 => {
-  let {
-    $textSize
-  } = _ref12;
-  return $textSize;
-}}px;
-    line-height: ${_ref13 => {
-  let {
-    $textSize
-  } = _ref13;
-  return $textSize;
-}}px;
   }
 `;
-const StyledPieChartLabel = styled.li`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  max-width: 262px;
-  font-family: var(--redsift-typography-font-family-raleway);
-  font-weight: var(--redsift-typography-font-weight-regular);
-  font-size: var(--redsift-typography-caption-font-size);
-
-  > div {
-    height: 16px;
-    width: 16px;
-    min-width: 16px;
-    background-color: ${_ref14 => {
-  let {
-    $color
-  } = _ref14;
-  return $color;
-}};
-  }
-
-  > b {
-    font-family: var(--redsift-typography-font-family-source-code-pro);
-    font-weight: var(--redsift-typography-font-weight-bold);
-    font-size: var(--redsift-typography-caption-font-size);
+const StyledHorizontalBarChartBar = styled.g`
+  rect {
+    fill-opacity: 0.9;
   }
-`;
-const StyledPieChartArc = styled.g`
-  ${_ref15 => {
-  let {
-    $spaced
-  } = _ref15;
-  return $spaced ? css`
-          path {
-            stroke-width: 2px;
-            stroke: #fff;
-          }
-        ` : '';
-}}
 
-  ${_ref16 => {
+  ${_ref4 => {
   let {
     $clickable
-  } = _ref16;
+  } = _ref4;
   return $clickable ? css`
           cursor: pointer;
-          &:hover {
-            opacity: 0.8;
+
+          &:hover,
+          &:focus {
+            outline: none;
+            rect {
+              fill-opacity: 0.7;
+            }
+          }
+
+          &:focus-visible {
+            rect {
+              stroke: var(--redsift-color-default-primary);
+              stroke-width: 4px;
+              paint-order: stroke;
+            }
           }
         ` : '';
 }}}
 `;
-const Tooltip = styled.div`
+const StyledHorizontalBarChartTooltip = styled.div`
   font-family: var(--redsift-typography-font-family-raleway);
   border: 1px solid rgb(0 0 0 / 20%);
   padding: 10px;
@@ -390,6 +309,18 @@ const Tooltip = styled.div`
     0 1px 3px 0 rgb(0 0 0 / 12%);
   background-color: var(--redsift-color-neutral-white);
 `;
+const StyledHorizontalBarChartAxisBottom = styled.g`
+  line.grid-line {
+    fill: none;
+    stroke: #ccc;
+    shape-rendering: crispEdges;
+  }
+
+  text {
+    font-family: var(--redsift-typography-font-family-source-code-pro);
+    font-size: 10px;
+  }
+`;
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -1015,36 +946,620 @@ var Popup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return React.createElement(React.Fragment, null, renderTrigger(), isOpen && ReactDOM.createPortal(content, getRootPopup()));
 });
 
-const _excluded$1 = ["color", "data", "index", "onClick", "path", "spaced", "showTooltip", "tooltipPercent", "tooltipLabelOnly", "isEmpty"];
-const COMPONENT_NAME$1 = 'RedSiftPieChartArc';
-const CLASSNAME$1 = 'redsift-piechart-arc';
-const DEFAULT_PROPS$1 = {};
-const PieChartArc = /*#__PURE__*/forwardRef((props, ref) => {
+const _excluded$4 = ["chartId", "color", "data", "gap", "height", "index", "isEmpty", "onClick", "role", "showTooltip", "tooltipLabelOnly", "tooltipPercent", "width"];
+const COMPONENT_NAME$4 = 'RedSiftHorizontalBarChartBar';
+const CLASSNAME$4 = 'redsift-horizontal-barchart-bar';
+const DEFAULT_PROPS$4 = {};
+const HorizontalBarChartBar = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      chartId,
       color,
       data,
+      gap,
+      height,
       index,
+      isEmpty,
       onClick,
-      path,
-      spaced,
+      role,
       showTooltip,
-      tooltipPercent,
       tooltipLabelOnly,
-      isEmpty
+      tooltipPercent,
+      width
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+  const onKeyDown = event => {
+    if (onClick) {
+      event.stopPropagation();
+      if (event.code === 'Enter' || event.code === 'Space') {
+        event.preventDefault();
+        onClick();
+      }
+    }
+  };
+  const Bar = /*#__PURE__*/React.createElement(StyledHorizontalBarChartBar, _extends$1({
+    ref: ref
+  }, forwardedProps, {
+    "aria-label": showTooltip && !isEmpty ? `${data.name}: ${data.value}` : undefined,
+    "aria-labelledby": !showTooltip && !isEmpty ? `id${chartId}__slice-${index}-title` : undefined,
+    id: `id${chartId}__slice-${index}`,
+    className: `row _${index}`,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    role: role ? role : onClick ? 'button' : undefined,
+    tabIndex: onClick ? 0 : undefined,
+    transform: `translate(0,${gap * (index + 1) + height * index})`,
+    $clickable: Boolean(onClick)
+  }), /*#__PURE__*/React.createElement("rect", {
+    height: height,
+    width: width,
+    fill: color
+  }), /*#__PURE__*/React.createElement("text", {
+    x: "10",
+    y: height / 2,
+    dy: "0.35em",
+    "aria-hidden": true
+  }, data.name), !showTooltip && !isEmpty && /*#__PURE__*/React.createElement("title", null, `${data.name}: ${data.value}`));
+  if (showTooltip) {
+    const tooltipValue = tooltipPercent !== null ? `${tooltipPercent}%` : data.value;
+    return /*#__PURE__*/React.createElement(Popup, {
+      on: "hover",
+      arrow: false,
+      position: "right center",
+      trigger: Bar
+    }, /*#__PURE__*/React.createElement(StyledHorizontalBarChartTooltip, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
+  }
+  return Bar;
+});
+HorizontalBarChartBar.className = CLASSNAME$4;
+HorizontalBarChartBar.defaultProps = DEFAULT_PROPS$4;
+HorizontalBarChartBar.displayName = COMPONENT_NAME$4;
+
+const _excluded$3 = ["areXLabelsRotated", "chartHeight", "d3scale"];
+const COMPONENT_NAME$3 = 'RedSiftHorizontalBarChartAxisBottom';
+const CLASSNAME$3 = 'redsift-horizontal-barchart-axis-bottom';
+const DEFAULT_PROPS$3 = {};
+const HorizontalBarChartAxisBottom = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      areXLabelsRotated,
+      chartHeight,
+      d3scale
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+  const axisRef = ref || useRef();
+  useEffect(() => {
+    if (axisRef.current) {
+      select(axisRef.current).call(axisBottom(d3scale).ticks(5));
+      select(axisRef.current).selectAll('g.tick').select('line.grid-line').remove();
+      select(axisRef.current).selectAll('g.tick').append('line').attr('class', 'grid-line').attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', () => -chartHeight);
+      if (areXLabelsRotated) {
+        select(axisRef.current).attr('text-anchor', 'end').selectAll('text').attr('transform', 'translate(-6,5) rotate(-45)');
+      }
+    }
+  }, [d3scale]);
+  return /*#__PURE__*/React.createElement(StyledHorizontalBarChartAxisBottom, _extends$1({
+    className: "axis"
+  }, forwardedProps, {
+    ref: axisRef
+  }));
+});
+HorizontalBarChartAxisBottom.className = CLASSNAME$3;
+HorizontalBarChartAxisBottom.defaultProps = DEFAULT_PROPS$3;
+HorizontalBarChartAxisBottom.displayName = COMPONENT_NAME$3;
+
+const _excluded$2 = ["aria-label", "aria-labelledby", "areXLabelsRotated", "caping", "caption", "className", "data", "onBarClick", "others", "size", "barRole", "theme", "title", "tooltipVariant", "localeText"];
+const COMPONENT_NAME$2 = 'RedSiftHorizontalBarChart';
+const CLASSNAME$2 = 'redsift-horizontal-barchart';
+const DEFAULT_PROPS$2 = {
+  others: true,
+  size: HorizontalBarChartSize.medium,
+  theme: HorizontalBarChartTheme.default,
+  tooltipVariant: HorizontalBarChartTooltipVariant.value,
+  localeText: {
+    emptyChartText: 'No Data'
+  }
+};
+const sizeToDimension$1 = size => {
+  switch (size) {
+    case HorizontalBarChartSize.small:
+      return {
+        width: 300,
+        height: 200
+      };
+    case HorizontalBarChartSize.large:
+      return {
+        width: 500,
+        height: 400
+      };
+    case HorizontalBarChartSize.medium:
+    default:
+      return {
+        width: 400,
+        height: 300
+      };
+  }
+};
+const sizeToFontSize$1 = size => {
+  switch (size) {
+    case HorizontalBarChartSize.small:
+      return 30;
+    case HorizontalBarChartSize.large:
+      return 38;
+    case HorizontalBarChartSize.medium:
+    default:
+      return 34;
+  }
+};
+const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const id = useId();
+  const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      areXLabelsRotated,
+      caping,
+      caption,
+      className,
+      data: propData,
+      onBarClick,
+      others,
+      size,
+      barRole,
+      theme,
+      title,
+      tooltipVariant,
+      localeText
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  const {
+    emptyChartText
+  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS$2.localeText), localeText);
+  const isEmpty = propData.every(d => d.value === 0);
+  let data = propData.sort((a, b) => a.value < b.value ? 1 : -1);
+  if (caping) {
+    if (typeof others === 'boolean' && !others) {
+      data = data.slice(0, caping);
+    } else {
+      data = data.reduce((acc, curr, index) => {
+        if (index < caping) {
+          acc[index] = curr;
+        } else if (index === caping) {
+          acc[index] = {
+            name: typeof others === 'string' ? others : 'Others',
+            value: curr.value
+          };
+        } else {
+          acc[caping] = _objectSpread2(_objectSpread2({}, acc[caping]), {}, {
+            value: acc[caping].value + curr.value
+          });
+        }
+        return acc;
+      }, []);
+    }
+  }
+  if (isEmpty) {
+    data = [];
+  }
+
+  // Get charts dimensions based on the selected size.
+  const chartDimensions = sizeToDimension$1(size);
+  const width = chartDimensions.width - 16;
+  const height = chartDimensions.height;
+  const chartHeight = height - 48 - (areXLabelsRotated ? 30 : 0);
+  const margins = {
+    top: 16,
+    left: 16,
+    right: 16,
+    bottom: 32
+  };
+  const numberOfRows = data.length;
+  const gap = 5;
+
+  // Set color scheme.
+  const d3colors = getColorScale(theme, isEmpty);
+
+  // Initialize the chart.
+  const scaleX = scaleLinear().domain([0, Math.max(...data.map(_ref => {
+    let {
+      value
+    } = _ref;
+    return value;
+  }))]).range([0, width - 32]);
+  const barHeight = (chartHeight - (numberOfRows + 1) * gap) / numberOfRows;
+  const total = sum(data, d => d.value);
+  return /*#__PURE__*/React.createElement(StyledHorizontalBarChart, _extends$1({
+    ref: ref
+  }, forwardedProps, {
+    className: className
+  }), title ? /*#__PURE__*/React.createElement(StyledHorizontalBarChartTitle, {
+    className: `${HorizontalBarChart.className}__title`,
+    id: `id${id}__title`
+  }, title) : null, /*#__PURE__*/React.createElement("div", {
+    className: `${HorizontalBarChart.className}__container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${HorizontalBarChart.className}-container__chart`,
+    "aria-label": ariaLabel ? ariaLabel : ariaLabelledby || title ? undefined : 'Horizontal Bar Chart',
+    "aria-labelledby": ariaLabelledby ? ariaLabelledby : title ? `id${id}__title` : undefined
+  }, isEmpty ? /*#__PURE__*/React.createElement(StyledHorizontalBarChartEmptyText, {
+    $maxWidth: width,
+    $textSize: sizeToFontSize$1(size) / 2
+  }, /*#__PURE__*/React.createElement("span", null, emptyChartText)) : null, /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, /*#__PURE__*/React.createElement(HorizontalBarChartAxisBottom, {
+    areXLabelsRotated: !!areXLabelsRotated,
+    chartHeight: chartHeight,
+    d3scale: scaleX,
+    transform: `translate(0,${chartHeight})`
+  }), data.map((_ref2, index) => {
+    let {
+      value,
+      name
+    } = _ref2;
+    const percent = (value / total * 100).toFixed(2);
+    return /*#__PURE__*/React.createElement(HorizontalBarChartBar, {
+      chartId: id,
+      color: d3colors(name),
+      data: {
+        value,
+        name
+      },
+      gap: gap,
+      height: barHeight,
+      index: index,
+      isEmpty: isEmpty,
+      key: `row _${index}`,
+      onClick: onBarClick ? () => onBarClick(data[index]) : undefined,
+      role: barRole,
+      showTooltip: tooltipVariant !== HorizontalBarChartTooltipVariant.none && !isEmpty,
+      tooltipLabelOnly: tooltipVariant == HorizontalBarChartTooltipVariant.label,
+      tooltipPercent: tooltipVariant === HorizontalBarChartTooltipVariant.percent ? percent : null,
+      width: Math.abs(scaleX(value))
+    });
+  }))))), caption ? /*#__PURE__*/React.createElement(StyledHorizontalBarChartCaption, {
+    className: `${HorizontalBarChart.className}__caption`
+  }, caption) : null);
+});
+HorizontalBarChart.className = CLASSNAME$2;
+HorizontalBarChart.defaultProps = DEFAULT_PROPS$2;
+HorizontalBarChart.displayName = COMPONENT_NAME$2;
+
+/**
+ * Component size.
+ */
+const PieChartSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+};
+/**
+ * Component variant.
+ */
+const PieChartVariant = {
+  plain: 'plain',
+  spaced: 'spaced',
+  donut: 'donut',
+  spacedDonut: 'spacedDonut'
+};
+/**
+ * Component's labels variant.
+ */
+const PieChartLabelVariant = {
+  none: 'none',
+  internal: 'internal',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent'
+};
+/**
+ * Component theme.
+ */
+const PieChartTheme = ColorTheme;
+/**
+ * Tooltip label variant.
+ */
+const PieChartTooltipVariant = {
+  none: 'none',
+  label: 'label',
+  value: 'value',
+  percent: 'percent'
+};
+
+/**
+ * Component style.
+ */
+const StyledPieChart = styled.div`
+  margin: 8px;
+  padding: 8px;
+  color: var(--redsift-color-neutral-black);
+
+  .redsift-piechart__container {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    font-family: var(--redsift-typography-font-family-source-code-pro);
+    font-size: 11px;
+    justify-content: center;
+    margin: 8px 0;
+
+    .redsift-piechart-container__chart {
+      position: relative;
+    }
+  }
+  svg {
+    display: block;
+  }
+`;
+const StyledPieChartTitle = styled.div`
+  font-family: var(--redsift-typography-h4-font-family);
+  font-size: var(--redsift-typography-h4-font-size);
+  font-weight: var(--redsift-typography-h4-font-weight);
+  line-height: var(--redsift-typography-h4-line-height);
+`;
+const StyledPieChartCaption = styled.p`
+  font-family: var(--redsift-typography-caption-font-family);
+  font-size: var(--redsift-typography-caption-font-size);
+  font-weight: var(--redsift-typography-caption-font-weight);
+  line-height: var(--redsift-typography-caption-line-height);
+`;
+const StyledPieChartCenterText = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${_ref => {
+  let {
+    $maxWidth
+  } = _ref;
+  return $maxWidth;
+}}px;
+  }
+
+  > b {
+    font-family: var(--redsift-typography-font-family-source-code-pro);
+    color: var(--redsift-color-neutral-black);
+    font-weight: var(--redsift-typography-font-weight-medium);
+    font-size: ${_ref2 => {
+  let {
+    $textSize
+  } = _ref2;
+  return $textSize;
+}}px;
+    line-height: ${_ref3 => {
+  let {
+    $textSize
+  } = _ref3;
+  return $textSize;
+}}px;
+
+    &:nth-child(2) {
+      font-weight: normal;
+      margin-top: 8px;
+      font-family: var(--redsift-typography-font-family-raleway);
+      font-size: ${_ref4 => {
+  let {
+    $smallTextSize
+  } = _ref4;
+  return $smallTextSize;
+}}px;
+      line-height: ${_ref5 => {
+  let {
+    $smallTextSize
+  } = _ref5;
+  return $smallTextSize;
+}}px;
+    }
+  }
+  > span {
+    color: var(--redsift-color-neutral-black);
+    font-size: ${_ref6 => {
+  let {
+    $textSize
+  } = _ref6;
+  return $textSize;
+}}px;
+    line-height: ${_ref7 => {
+  let {
+    $textSize
+  } = _ref7;
+  return $textSize;
+}}px;
+    &:nth-child(3) {
+      margin-top: 4px;
+      font-size: ${_ref8 => {
+  let {
+    $smallTextSize
+  } = _ref8;
+  return $smallTextSize;
+}}px;
+      line-height: ${_ref9 => {
+  let {
+    $smallTextSize
+  } = _ref9;
+  return $smallTextSize;
+}}px;
+    }
+  }
+  > b + span {
+    font-size: var(--redsift-typography-body-font-size);
+    font-family: var(--redsift-typography-font-family-raleway);
+    line-height: var(--redsift-typography-badge-line-height);
+    color: rgba(0, 0, 0, 0.6);
+    text-align: center;
+  }
+`;
+const StyledPieChartEmptyText = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${_ref10 => {
+  let {
+    $maxWidth
+  } = _ref10;
+  return $maxWidth;
+}}px;
+  }
+
+  > span {
+    font-family: var(--redsift-typography-font-family-raleway);
+    color: ${_ref11 => {
+  let {
+    $isDonut
+  } = _ref11;
+  return $isDonut ? css`var(--redsift-color-neutral-midgrey)` : css`var(--redsift-color-neutral-black)`;
+}};
+    font-size: ${_ref12 => {
+  let {
+    $textSize
+  } = _ref12;
+  return $textSize;
+}}px;
+    line-height: ${_ref13 => {
+  let {
+    $textSize
+  } = _ref13;
+  return $textSize;
+}}px;
+  }
+`;
+const StyledPieChartLabel = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  max-width: 262px;
+  font-family: var(--redsift-typography-font-family-raleway);
+  font-weight: var(--redsift-typography-font-weight-regular);
+  font-size: var(--redsift-typography-caption-font-size);
+
+  > div {
+    height: 16px;
+    width: 16px;
+    min-width: 16px;
+    background-color: ${_ref14 => {
+  let {
+    $color
+  } = _ref14;
+  return $color;
+}};
+  }
+
+  > b {
+    font-family: var(--redsift-typography-font-family-source-code-pro);
+    font-weight: var(--redsift-typography-font-weight-bold);
+    font-size: var(--redsift-typography-caption-font-size);
+  }
+`;
+const StyledPieChartArc = styled.g`
+  ${_ref15 => {
+  let {
+    $spaced
+  } = _ref15;
+  return $spaced ? css`
+          path {
+            stroke-width: 2px;
+            stroke: #fff;
+          }
+        ` : '';
+}}
+
+  ${_ref16 => {
+  let {
+    $clickable
+  } = _ref16;
+  return $clickable ? css`
+          cursor: pointer;
+
+          &:hover,
+          &:focus {
+            opacity: 0.8;
+            outline: none;
+          }
+
+          &:focus-visible {
+            path {
+              stroke: var(--redsift-color-default-primary);
+              stroke-width: 4px;
+              paint-order: stroke;
+            }
+          }
+        ` : '';
+}}}
+`;
+const StyledPieChartTooltip = styled.div`
+  font-family: var(--redsift-typography-font-family-raleway);
+  border: 1px solid rgb(0 0 0 / 20%);
+  padding: 10px;
+  box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%),
+    0 1px 3px 0 rgb(0 0 0 / 12%);
+  background-color: var(--redsift-color-neutral-white);
+`;
+
+const _excluded$1 = ["chartId", "color", "data", "index", "onClick", "path", "role", "spaced", "showTooltip", "tooltipPercent", "tooltipLabelOnly", "isEmpty"];
+const COMPONENT_NAME$1 = 'RedSiftPieChartArc';
+const CLASSNAME$1 = 'redsift-piechart-arc';
+const DEFAULT_PROPS$1 = {};
+const PieChartArc = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      chartId,
+      color,
+      data,
+      index,
+      onClick,
+      path,
+      role,
+      spaced,
+      showTooltip,
+      tooltipPercent,
+      tooltipLabelOnly,
+      isEmpty
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const onKeyDown = event => {
+    if (onClick) {
+      event.stopPropagation();
+      if (event.code === 'Enter' || event.code === 'Space') {
+        event.preventDefault();
+        onClick();
+      }
+    }
+  };
   const Arc = /*#__PURE__*/React.createElement(StyledPieChartArc, _extends$1({
     ref: ref
   }, forwardedProps, {
-    role: onClick ? 'button' : undefined,
+    "aria-label": showTooltip && !isEmpty ? `${data.name}: ${data.value}` : undefined,
+    "aria-labelledby": !showTooltip && !isEmpty ? `id${chartId}__slice-${index}-title` : undefined,
     className: `pie-slice _${index}`,
+    id: `id${chartId}__slice-${index}`,
     onClick: onClick,
+    onKeyDown: onKeyDown,
+    role: role ? role : onClick ? 'button' : undefined,
+    tabIndex: onClick ? 0 : undefined,
     $clickable: Boolean(onClick),
     $spaced: Boolean(spaced)
   }), /*#__PURE__*/React.createElement("path", {
     d: path,
     fill: color
-  }), !showTooltip && !isEmpty && /*#__PURE__*/React.createElement("title", null, `${data.name}: ${data.value}`));
+  }), !showTooltip && !isEmpty ? /*#__PURE__*/React.createElement("title", {
+    id: `id${chartId}__slice-${index}-title`
+  }, `${data.name}: ${data.value}`) : null);
   if (showTooltip) {
     const tooltipValue = tooltipPercent !== null ? `${tooltipPercent}%` : data.value;
     return /*#__PURE__*/React.createElement(Popup, {
@@ -1052,7 +1567,7 @@ const PieChartArc = /*#__PURE__*/forwardRef((props, ref) => {
       arrow: false,
       position: "right center",
       trigger: Arc
-    }, /*#__PURE__*/React.createElement(Tooltip, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
+    }, /*#__PURE__*/React.createElement(StyledPieChartTooltip, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
   }
   return Arc;
 });
@@ -1060,7 +1575,7 @@ PieChartArc.className = CLASSNAME$1;
 PieChartArc.defaultProps = DEFAULT_PROPS$1;
 PieChartArc.displayName = COMPONENT_NAME$1;
 
-const _excluded = ["aria-label", "aria-labelledby", "caping", "caption", "className", "data", "labelVariant", "onSliceClick", "others", "size", "text", "middleText", "subtext", "theme", "title", "variant", "tooltipVariant", "localeText"];
+const _excluded = ["aria-label", "aria-labelledby", "caping", "caption", "className", "data", "labelVariant", "onSliceClick", "others", "size", "sliceRole", "text", "middleText", "subtext", "theme", "title", "variant", "tooltipVariant", "localeText"];
 const COMPONENT_NAME = 'RedSiftPieChart';
 const CLASSNAME = 'redsift-piechart';
 const DEFAULT_PROPS = {
@@ -1140,6 +1655,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       onSliceClick,
       others,
       size,
+      sliceRole,
       text,
       middleText,
       subtext,
@@ -1228,6 +1744,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, pieData.map((datum, index) => {
     const percent = (datum.data.value / total * 100).toFixed(2);
     return /*#__PURE__*/React.createElement(PieChartArc, {
+      chartId: id,
       color: d3colors(datum.data.name),
       data: datum.data,
       isEmpty: isEmpty,
@@ -1235,6 +1752,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       key: `pie-slice _${index}`,
       onClick: onSliceClick ? () => onSliceClick(data[index]) : undefined,
       showTooltip: tooltipVariant !== PieChartTooltipVariant.none && !isEmpty,
+      role: sliceRole,
       tooltipLabelOnly: tooltipVariant == PieChartTooltipVariant.label,
       tooltipPercent: tooltipVariant === PieChartTooltipVariant.percent ? percent : null,
       path: createArc(datum),
@@ -1244,7 +1762,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     className: "pie-label-group"
   }, pieData.filter(datum => {
     const value = datum.data.value;
-    return value > 0 && value / total >= 0.10;
+    return value > 0 && value / total >= 0.1;
   }).map((datum, index) => /*#__PURE__*/React.createElement("text", {
     className: `pie-slice pie-label _${index}`,
     key: `pie-slice pie-label _${index}`,
@@ -1267,5 +1785,5 @@ PieChart.className = CLASSNAME;
 PieChart.defaultProps = DEFAULT_PROPS;
 PieChart.displayName = COMPONENT_NAME;
 
-export { ColorTheme, PieChart, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartTooltipVariant, PieChartVariant, StyledPieChart, StyledPieChartArc, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartLabel, StyledPieChartTitle, Tooltip, getColorScale, monochrome, scheme, successDangerScheme };
+export { ColorTheme, HorizontalBarChart, HorizontalBarChartSize, HorizontalBarChartTheme, HorizontalBarChartTooltipVariant, PieChart, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartTooltipVariant, PieChartVariant, StyledHorizontalBarChart, StyledHorizontalBarChartAxisBottom, StyledHorizontalBarChartBar, StyledHorizontalBarChartCaption, StyledHorizontalBarChartEmptyText, StyledHorizontalBarChartTitle, StyledHorizontalBarChartTooltip, StyledPieChart, StyledPieChartArc, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartLabel, StyledPieChartTitle, StyledPieChartTooltip, getColorScale, monochrome, scheme, successDangerScheme };
 //# sourceMappingURL=index.js.map