@redsift/charts 9.2.4 → 9.3.0-muiv5

package/index.d.ts

@@ -1,7 +1,7 @@
 import { BrushBehavior, ScaleLinear as ScaleLinear$1, ScaleOrdinal, Arc as Arc$1 } from 'd3';
 import * as _redsift_design_system from '@redsift/design-system';
-import { ValueOf, Comp, StylingProps } from '@redsift/design-system';
-import { MutableRefObject, ComponentProps, RefObject, ReactElement, ReactNode } from 'react';
+import { ValueOf, Comp, ContainerProps } from '@redsift/design-system';
+import { MutableRefObject, ComponentProps, ReactElement, RefObject, ReactNode } from 'react';
 import { PieArcDatum } from 'd3-shape';
 import * as d3_scale from 'd3-scale';
 import { ScaleLinear as ScaleLinear$2, ScaleLogarithmic, ScaleSymLog, ScalePoint as ScalePoint$1, ScaleBand as ScaleBand$1, ScaleTime as ScaleTime$1 } from 'd3-scale';
@@ -237,7 +237,11 @@ interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale
     /** Whether the component is selected or not. Used only if the component is selectable. Set to `undefined` to make nor selected nor unselected. */
     isSelected?: boolean;
     /** Method modifying the label before displaying it. */
-    labelDecorator?: (data: T) => string;
+    labelDecorator?: (data: T, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
     /** Method called when a click or keydown occurs on the component. */
     onClick?: (data: T) => void;
     /** State from which the component should start the animation, if any. */
@@ -374,6 +378,8 @@ interface BarProps extends DataPointProps<BarDatum> {
     gap?: number;
     /** Height of the bar in horizontal orientation. */
     height?: number;
+    /** Maximum height of the bar. */
+    maxHeight?: number;
     /** Orientation of the bar. */
     orientation?: BarOrientation;
     /** A linear continuous scale defined over a numeric domain used to determine the width or height of the bar (depending on the orientation). */
@@ -395,9 +401,7 @@ declare const StyledBar: styled_components.StyledComponent<_redsift_design_syste
 /**
  * Component props.
  */
-interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, StylingProps {
-    /** Caption. */
-    caption?: string;
+interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, ContainerProps {
     /** Native HTML props to pass to the chart. */
     chartProps?: ComponentProps<'div'>;
     /** Ref to the chart. */
@@ -445,11 +449,17 @@ interface BarChartProps extends ChartContainerProps {
     /** Method to determine whether a slice is selected or not. */
     isBarSelected?: (datum: BarDatum) => void;
     /** Method to override the data labels. */
-    labelDecorator?: (datum: BarDatum) => string;
+    labelDecorator?: (datum: BarDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
     /** Labels and texts. */
     localeText?: LocaleText$2;
     /** Method to be called on a click on a bar. */
     onBarClick?: (datum: BarDatum) => void;
+    /** Orientation of the bar. */
+    orientation?: BarOrientation;
     /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
     others?: boolean | string;
     /** BarChart size. */
@@ -507,7 +517,7 @@ interface LegendItemProps extends Pick<DataPointProps<LegendItemDatum>, 'color'
 /**
  * Component props.
  */
-interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick'> {
+interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick'>, ContainerProps {
     /** Data. */
     data: (CategoryDatum & {
         color: string;
@@ -515,15 +525,17 @@ interface LegendProps extends Omit<ComponentProps<'ul'>, 'onClick'> {
     /** Method to determine whether a slice is selected or not. */
     isLegendItemSelected?: (datum: LegendItemDatum) => void;
     /** Method to override the data labels. */
-    labelDecorator?: (datum: LegendItemDatum) => string;
+    labelDecorator?: (datum: LegendItemDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
     /** Method to be called on a click on a legend item. */
     onLegendItemClick?: (datum: LegendItemDatum) => void;
     /** LegendItem role. Used to indicate that legend items are to be considered buttons or links. If an onClick is provided, the legend items will have the role `button` unless specifically set to `link` with this prop. */
     legendItemRole?: LegendItemProps['role'];
     /** Variant. */
     variant?: LabelVariant;
-    /** Width. */
-    width?: string;
 }
 type StyledLegendProps = Omit<LegendProps, 'data'> & {
     $width?: LegendProps['width'];
@@ -535,7 +547,7 @@ declare const Legend: Comp<LegendProps, HTMLUListElement>;
  * Component style.
  */
 declare const StyledLegend: styled_components.StyledComponent<"ul", any, Omit<LegendProps, "data"> & {
-    $width?: string | undefined;
+    $width?: string | number | undefined;
 }, never>;
 
 /**
@@ -577,14 +589,20 @@ interface PieChartProps extends ChartContainerProps {
     data?: CategoryData;
     /** Component to use if the chart is empty (replacing the default one). */
     emptyComponent?: ReactNode;
+    /** Whether the pie or donut is cut in half or not. */
+    isHalf?: boolean;
     /** Method to determine whether a slice is selected or not. */
     isSliceSelected?: (datum: ArcDatum) => boolean | undefined;
     /** Method to override the data labels. */
-    labelDecorator?: (datum: ArcDatum) => string;
+    labelDecorator?: (datum: ArcDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
     /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
     labelVariant?: PieChartLabelVariant;
     /** Props to forward to the Legend block. Can be used to make the legend selectable. */
-    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'>;
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant'>;
     /** Labels and texts. */
     localeText?: LocaleText$1;
     /** Method to be called on a click on a slice. */
@@ -670,7 +688,11 @@ interface ScatterPlotProps extends ChartContainerProps {
     /** Method to determine whether a dot is selected or not. */
     isDotSelected?: (datum: DotDatum) => boolean | undefined;
     /** Method to override the data labels. */
-    labelDecorator?: (datum: DotDatum) => string;
+    labelDecorator?: (datum: DotDatum, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
     /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
     labelVariant?: ScatterPlotLabelVariant;
     /** Props to forward to the Legend block. Can be used to make the legend selectable. */

package/index.js

@@ -1,5 +1,5 @@
-import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, arc, pie, min, extent, descending, scaleSqrt, max } from 'd3';
-import { 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, focusRing, Flexbox, warnIfNoAccessibleLabelFound, Heading, Button } from '@redsift/design-system';
+import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scalePoint, arc, pie, min, extent, 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';
 import classNames from 'classnames';
@@ -332,7 +332,11 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$k);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
-  const text = labelDecorator ? labelDecorator(data) : data.data.key;
+  const text = labelDecorator ? labelDecorator(data, {
+    index,
+    isSelected: propsIsSelected,
+    color: props.color
+  }) : data.data.key;
   const hasText = text && tooltipVariant !== TooltipVariant.none;
   const tooltipValue = tooltipVariant === TooltipVariant.value ? data.data.value : tooltipVariant === TooltipVariant.percent && data.data.percent ? data.data.percent : undefined;
   const hasValue = tooltipValue && [TooltipVariant.value, TooltipVariant.percent].includes(tooltipVariant);
@@ -829,23 +833,23 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
     keys: tick => tick.key,
     initial: tick => ({
       opacity: 1,
-      transform: `translate(${tick.x},${tick.y})`,
-      textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`
+      transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
+      textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
     }),
     from: tick => ({
       opacity: 0,
-      transform: `translate(${tick.x},${tick.y})`,
-      textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`
+      transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
+      textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
     }),
     enter: tick => ({
       opacity: 1,
-      transform: `translate(${tick.x},${tick.y})`,
-      textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`
+      transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
+      textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
     }),
     update: tick => ({
       opacity: 1,
-      transform: `translate(${tick.x},${tick.y})`,
-      textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`
+      transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
+      textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
     }),
     leave: {
       opacity: 0
@@ -854,7 +858,7 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(StyledAxis, _extends({
     className: classNames(Axis.className, className)
   }, forwardedProps, {
-    transform: `translate(${x},${y})`,
+    transform: `translate(${x},${y})${axis === 'x' ? '' : ',rotate(180)'}`,
     ref: axisRef
   }), variant === AxisVariant.default || variant === AxisVariant.tick || variant === AxisVariant.lineTick || variant === AxisVariant.tickValue ? transition((transitionProps, tick, _state, tickIndex) => {
     return /*#__PURE__*/React__default.createElement(it.g, {
@@ -952,7 +956,7 @@ const StyledBar = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$g = ["className", "gap", "height", "orientation", "previousData", "scale", "width"];
+const _excluded$g = ["className", "gap", "height", "maxHeight", "orientation", "previousData", "scale", "width"];
 const COMPONENT_NAME$7 = 'Bar';
 const CLASSNAME$7 = 'redsift-bar';
 const DEFAULT_PROPS$7 = {
@@ -960,6 +964,7 @@ const DEFAULT_PROPS$7 = {
   index: 0,
   gap: 5,
   height: 40,
+  maxHeight: 100,
   orientation: BarOrientation.horizontal,
   previousData: {
     data: {
@@ -984,6 +989,7 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       gap,
       height,
+      maxHeight,
       orientation,
       previousData,
       scale,
@@ -991,9 +997,14 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$g);
   const interpolator = interpolate(((_data = previousData.data) === null || _data === void 0 ? void 0 : _data.value) || 0, data.data.value);
-  const text = labelDecorator ? labelDecorator(data) : data.data.key;
+  const text = labelDecorator ? labelDecorator(data, {
+    index,
+    isSelected: propsIsSelected,
+    color
+  }) : data.data.key;
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
+  const isHorizontal = orientation === BarOrientation.horizontal;
   const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
     to: async next => {
       await next({
@@ -1007,17 +1018,17 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(StyledBar, _extends({}, forwardedProps, {
     ref: ref,
     className: classNames(Bar.className, className),
-    transform: orientation === BarOrientation.horizontal ? `translate(0, ${gap * (index + 1) + height * index})` : `translate(${gap * (index + 1) + width * index}, 0)`,
+    transform: isHorizontal ? `translate(0, ${gap * (index + 1) + height * index})` : `translate(${gap * (index + 1) + width * index + width}, ${maxHeight}), rotate(180)`,
     $clickable: Boolean(onClick)
-  }), orientation === BarOrientation.horizontal ? /*#__PURE__*/React__default.createElement(it.rect, {
+  }), isHorizontal ? /*#__PURE__*/React__default.createElement(it.rect, {
     height: height,
     fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color,
     width: config.immediate ? scale(data.data.value) : animatedProps.t.to(t => scale(interpolator(t)))
   }) : /*#__PURE__*/React__default.createElement(it.rect, {
-    height: config.immediate ? scale(data.data.value) : animatedProps.t.to(t => scale(interpolator(t))),
+    height: config.immediate ? maxHeight - scale(data.data.value) : animatedProps.t.to(t => maxHeight - scale(interpolator(t))),
     fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color,
     width: width
-  }), orientation === BarOrientation.horizontal ? /*#__PURE__*/React__default.createElement("text", {
+  }), isHorizontal ? /*#__PURE__*/React__default.createElement("text", {
     x: "10",
     y: height / 2,
     dy: "0.35em",
@@ -1049,8 +1060,6 @@ var intlMessages = {
 const StyledChartContainer = styled.div`
   ${baseStyling}
 
-  margin: 8px;
-  padding: 8px;
   color: var(--redsift-color-neutral-black);
 
   .redsift-chart-container__content {
@@ -1060,9 +1069,10 @@ const StyledChartContainer = styled.div`
     font-family: var(--redsift-typography-font-family-poppins);
     font-size: 11px;
     justify-content: center;
-    margin: 8px 0;
     position: relative;
 
+    ${baseContainer}
+
     ${focusRing}
   }
 
@@ -1261,7 +1271,7 @@ const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }), "Loading...");
 });
 
-const _excluded$c = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
+const _excluded$c = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipVariant"];
 const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areXLabelsRotated,
@@ -1273,6 +1283,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       isBarSelected,
       labelDecorator,
       onBarClick,
+      orientation,
       others,
       size,
       barRole,
@@ -1293,12 +1304,13 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     cache.current = data;
   });
+  const isHorizontal = orientation === BarOrientation.horizontal;
   const chartDimensions = sizeToDimension$2(size);
   const width = chartDimensions.width;
   const height = chartDimensions.height;
   const margins = {
     top: 16,
-    left: 16,
+    left: isHorizontal ? 16 : 64,
     right: 16,
     bottom: 32
   };
@@ -1306,14 +1318,16 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const chartWidth = width - margins.left - margins.right;
   const numberOfRows = data.filter(datum => datum.value).length;
   const gap = 5;
+  const barHeight = (chartHeight - (numberOfRows + 1) * gap) / numberOfRows;
+  const barWidth = (chartWidth - (numberOfRows + 1) * gap) / numberOfRows;
+  const total = sum(data, d => d.value);
   const scale = useMemo(() => scaleLinear().domain([0, Math.max(...data.map(_ref => {
     let {
       value
     } = _ref;
     return value;
-  }))]).range([0, chartWidth]), [size]);
-  const barHeight = (chartHeight - (numberOfRows + 1) * gap) / numberOfRows;
-  const total = sum(data, d => d.value);
+  }))]).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]);
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
     id: id,
     className: className,
@@ -1323,7 +1337,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     height: height
   }, /*#__PURE__*/React__default.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
-  }, /*#__PURE__*/React__default.createElement(Axis, {
+  }, isHorizontal ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "bottom",
     length: chartWidth,
     scale: scale,
@@ -1331,7 +1345,24 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     y: chartHeight,
     tickValues: 4,
     tickRotation: areXLabelsRotated ? -45 : 0
-  }), data.filter(datum => datum.value).map((datum, index) => {
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Axis, {
+    position: "left",
+    length: chartHeight,
+    scale: 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,
+    y: chartHeight,
+    tickValues: 4,
+    tickRotation: areXLabelsRotated ? -45 : 0,
+    variant: "tickValue"
+  })), data.filter(datum => datum.value).map((datum, index) => {
     const percent = datum.value / total;
     const to = {
       data: _objectSpread2(_objectSpread2({}, datum), {}, {
@@ -1345,26 +1376,30 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
       data: to,
       gap: gap,
-      height: barHeight,
+      height: isHorizontal ? barHeight : undefined,
       id: `id${id}__bar-${index}`,
       index: index,
       isSelected: Boolean(isBarSelected(to)),
       key: `bar _${index}`,
       labelDecorator: labelDecorator,
+      maxHeight: isHorizontal ? undefined : chartHeight,
       onClick: onBarClick,
+      orientation: orientation,
       previousData: from,
       role: barRole,
       scale: scale,
-      tooltipVariant: tooltipVariant
+      tooltipVariant: tooltipVariant,
+      width: isHorizontal ? undefined : barWidth
     }));
   }))));
 });
 
-const _excluded$b = ["areXLabelsRotated", "caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "others", "size", "barRole", "theme", "tooltipVariant"];
+const _excluded$b = ["areXLabelsRotated", "caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipVariant"];
 const COMPONENT_NAME$5 = 'BarChart';
 const CLASSNAME$5 = 'redsift-barchart';
 const DEFAULT_PROPS$5 = {
   isBarSelected: () => true,
+  orientation: BarOrientation.horizontal,
   others: true,
   size: ChartSize.medium,
   theme: ColorTheme.default,
@@ -1386,6 +1421,7 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       labelDecorator,
       localeText,
       onBarClick,
+      orientation,
       others,
       size,
       barRole,
@@ -1424,6 +1460,7 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
     isBarSelected: isBarSelected,
     labelDecorator: labelDecorator,
     onBarClick: onBarClick,
+    orientation: orientation,
     others: others,
     size: size,
     theme: theme,
@@ -1513,15 +1550,10 @@ Dot.displayName = COMPONENT_NAME$4;
  * Component style.
  */
 const StyledLegend = styled.ul`
-  max-width: 262px;
-  ${_ref => {
-  let {
-    $width
-  } = _ref;
-  return $width !== undefined ? css`
-          width: ${$width};
-        ` : null;
-}}
+  display: flex;
+  flex-direction: column;
+
+  ${baseContainer}
 `;
 
 /**
@@ -1595,7 +1627,11 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$9);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
-  const text = labelDecorator ? labelDecorator(data) : data.data.key;
+  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;
@@ -1624,7 +1660,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     role: role ? role : onClick ? 'button' : undefined,
     tabIndex: onClick ? 0 : undefined,
     $clickable: Boolean(onClick)
-  }), /*#__PURE__*/React__default.createElement("div", null), variant === LabelVariant.value ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
+  }), /*#__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, {
     as: "b",
     maximumFractionDigits: 2,
     value: data.data.value,
@@ -1641,7 +1677,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "caption"
   }, text)) : /*#__PURE__*/React__default.createElement(Text, {
     variant: "caption"
-  }, text));
+  }, text) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, text));
 });
 LegendItem.className = CLASSNAME$3;
 LegendItem.defaultProps = DEFAULT_PROPS$3;
@@ -1881,7 +1917,7 @@ const LoadingPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }), "Loading...");
 });
 
-const sizeToDimension$1 = size => {
+const sizeToDimension$1 = (size, isHalf) => {
   if (typeof size !== 'string') {
     return size;
   }
@@ -1889,7 +1925,7 @@ const sizeToDimension$1 = size => {
     case ChartSize.small:
       return {
         width: 200,
-        height: 200,
+        height: 200 * (isHalf ? 0.5 : 1),
         smallFontSize: 13,
         fontSize: 30,
         innerRadius: 55
@@ -1897,7 +1933,7 @@ const sizeToDimension$1 = size => {
     case ChartSize.large:
       return {
         width: 300,
-        height: 300,
+        height: 300 * (isHalf ? 0.5 : 1),
         smallFontSize: 18,
         fontSize: 38,
         innerRadius: 80
@@ -1906,7 +1942,7 @@ const sizeToDimension$1 = size => {
     default:
       return {
         width: 240,
-        height: 240,
+        height: 240 * (isHalf ? 0.5 : 1),
         smallFontSize: 14,
         fontSize: 34,
         innerRadius: 65
@@ -1974,13 +2010,14 @@ const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$5 = ["caping", "className", "data", "id", "isSliceSelected", "labelDecorator", "labelVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
+const _excluded$5 = ["caping", "className", "data", "id", "isHalf", "isSliceSelected", "labelDecorator", "labelVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
 const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
       className,
       data: propsData,
       id,
+      isHalf,
       isSliceSelected,
       labelDecorator,
       labelVariant,
@@ -2000,6 +2037,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$5);
   const cache = useRef();
   const isDonut = variant === PieChartVariant.donut || variant === PieChartVariant.spacedDonut;
+  const isSpaced = variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut;
   const {
     data,
     colorScale
@@ -2018,9 +2056,9 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     smallFontSize,
     fontSize,
     innerRadius
-  } = sizeToDimension$1(size);
+  } = sizeToDimension$1(size, isHalf);
   const externalRadiusPadding = 8;
-  const createPie = pie().value(d => d.value).sort(null);
+  const createPie = pie().value(d => d.value).sort(null).startAngle(isHalf ? Math.PI * -0.5 : 0).endAngle(isHalf ? Math.PI * 0.5 : Math.PI * 2);
   const createArc = arc().innerRadius(isDonut ? innerRadius : 0).outerRadius(width / 2 - externalRadiusPadding);
   const pieData = createPie(data);
   const previousPieData = cache.current ? createPie(cache.current) : undefined;
@@ -2065,7 +2103,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     $smallTextSize: smallFontSize
   }, subtext ? /*#__PURE__*/React__default.createElement("b", null, text) : /*#__PURE__*/React__default.createElement("span", null, text), middleText ? /*#__PURE__*/React__default.createElement("b", null, middleText) : null, /*#__PURE__*/React__default.createElement("span", null, subtext)) : null, /*#__PURE__*/React__default.createElement("svg", {
     width: width,
-    height: height
+    height: isHalf ? height + externalRadiusPadding : height
   }, /*#__PURE__*/React__default.createElement(Arcs, {
     arcs: pieData.filter(datum => datum.data.value).map((datum, index) => {
       const percent = datum.data.value / total;
@@ -2074,8 +2112,8 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
           key: '',
           value: 0
         },
-        startAngle: 0,
-        endAngle: 0,
+        startAngle: isHalf ? Math.PI * -0.5 : 0,
+        endAngle: isHalf ? Math.PI * -0.5 : 0,
         padAngle: 0,
         value: 0,
         index: index
@@ -2097,20 +2135,20 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
       };
     }),
     hasLabels: labelVariant === PieChartLabelVariant.internal,
-    hasStroke: variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut,
+    hasStroke: isSpaced,
     labelDecorator: labelDecorator,
     onClick: onSliceClick,
     role: sliceRole,
     sliceProps: sliceProps,
     tooltipVariant: tooltipVariant,
-    transform: `translate(${width / 2} ${height / 2})`
+    transform: `translate(${width / 2} ${isHalf ? height : height / 2})`
   }))), labelVariant !== PieChartLabelVariant.none && labelVariant !== PieChartLabelVariant.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,
     width: legendWidth.current,
-    labelDecorator: labelDecorator ? datum => labelDecorator(datum) : undefined
+    labelDecorator: labelDecorator ? (datum, props) => labelDecorator(datum, props) : undefined
   }, legendProps)) : null);
 });
 
@@ -2393,11 +2431,10 @@ 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", "caption", "className", "data", "dotRole", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant", "xAxisVariant", "xAxisPlacement", "yAxisVariant", "yAxisPlacement"];
+const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant", "xAxisVariant", "xAxisPlacement", "yAxisVariant", "yAxisPlacement"];
 const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       isBrushable,
-      caption,
       className,
       data: propsData,
       dotRole,
@@ -2608,7 +2645,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     length: chartHeight,
     scale: scaleY,
     x: 0,
-    y: 0,
+    y: chartHeight,
     tickValues: 8,
     variant: yAxisVariant
   }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
@@ -2616,12 +2653,10 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     length: chartHeight,
     scale: scaleY,
     x: chartWidth,
-    y: 0,
+    y: chartHeight,
     tickValues: 8,
     variant: yAxisVariant
-  }) : null)), /*#__PURE__*/React__default.createElement(StyledChartContainerCaption, {
-    width: chartWidth - 48
-  }, caption)), hasCategory && labelVariant !== ScatterPlotLabelVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+  }) : null))), hasCategory && labelVariant !== ScatterPlotLabelVariant.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)
     })),