@redsift/charts 11.5.0 → 11.6.0-alpha.0

package/_internal/BarChart2.js

@@ -0,0 +1,1419 @@
+import { _ as _objectWithoutProperties, a as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, createContext, useContext, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { useTheme, useMessageFormatter, Flexbox, Text, isComponent, RedsiftColorGreenD1, RedsiftColorRedD1, RedsiftColorNeutralBlack, useId } from '@redsift/design-system';
+import { L as LegendVariant, T as TooltipVariant } from './legend2.js';
+import { C as ChartSize, g as getSortingMethod, i as isValidDate, u as useColor, m as mergeLegends, a as ColorTheme } from './theme.js';
+import { scaleLinear, sum, scaleBand, extent, scaleUtc, scalePoint, utcParse, scaleLog } from 'd3';
+import styled, { css } from 'styled-components';
+import { C as ChartContainer, a as ChartContainerTitle, b as ChartContainerDescription } from './ChartContainer2.js';
+import { A as Axis, a as AxisVariant, g as getAxisType } from './Axis2.js';
+import { u as useFormatCategoricalData } from './useFormatCategoricalData.js';
+import { a as BarOrientation, B as Bar, b as BarDirection } from './Bar2.js';
+import { L as Legend } from './Legend3.js';
+import { L as LegendItem } from './LegendItem2.js';
+
+/**
+ * Component's labels variant.
+ */
+const BarChartLegendVariant = {
+  none: 'none',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent',
+  custom: 'custom'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledBarChart = styled(ChartContainer)``;
+const StyledBarChartSection = styled.g`
+  text.colored {
+    ${_ref => {
+  let {
+    $textColor
+  } = _ref;
+  return css`
+      fill: ${$textColor};
+    `;
+}}
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+  }
+`;
+const StyledBarChartBars = styled.g``;
+const StyledBarChartEmptyText = 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: ${_ref2 => {
+  let {
+    $maxWidth
+  } = _ref2;
+  return $maxWidth;
+}}px;
+  }
+
+  > span {
+    font-family: var(--redsift-typography-font-family-poppins);
+    color: ${_ref3 => {
+  let {
+    $theme
+  } = _ref3;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
+    font-size: ${_ref4 => {
+  let {
+    $textSize
+  } = _ref4;
+  return $textSize;
+}}px;
+    line-height: ${_ref5 => {
+  let {
+    $textSize
+  } = _ref5;
+  return $textSize;
+}}px;
+  }
+`;
+
+const sizeToDimension = size => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case ChartSize.small:
+      return {
+        width: 300,
+        height: 200,
+        fontSize: 30
+      };
+    case ChartSize.large:
+      return {
+        width: 500,
+        height: 400,
+        fontSize: 38
+      };
+    case ChartSize.medium:
+    default:
+      return {
+        width: 400,
+        height: 300,
+        fontSize: 34
+      };
+  }
+};
+const statsBy = (arr, sortingMethod) => {
+  const isKeyArray = Array.isArray(arr[0].key);
+  const counts = arr.reduce((prev, curr) => {
+    if (!curr.value) {
+      return prev;
+    }
+    const currentKey = isKeyArray ? curr.key[1] : 'default';
+    if (!prev[currentKey]) {
+      prev[currentKey] = {
+        value: curr.value,
+        min: curr.value,
+        max: curr.value,
+        values: [curr.value]
+      };
+    } else {
+      prev[currentKey] = {
+        value: prev[currentKey].value + curr.value,
+        min: Math.min(prev[currentKey].min, curr.value),
+        max: Math.max(prev[currentKey].max, curr.value),
+        values: [...prev[currentKey].values, curr.value]
+      };
+    }
+    return prev;
+  }, {});
+  return Object.keys(counts).map(key => ({
+    key: key,
+    value: counts[key].value,
+    min: counts[key].min,
+    max: counts[key].max,
+    values: counts[key].values,
+    first: counts[key].values[0],
+    last: counts[key].values[counts[key].values.length - 1],
+    trending: {
+      overall: (counts[key].values[counts[key].values.length - 1] - counts[key].values[0]) * 100 / counts[key].values[0]
+    }
+  })).sort(getSortingMethod(sortingMethod));
+};
+
+const _excluded$6 = ["className", "emptyComponent", "size", "localeText"];
+const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      emptyComponent,
+      size,
+      localeText
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+  const theme = useTheme();
+  const chartDimensions = sizeToDimension(size);
+  const width = chartDimensions.width;
+  const height = chartDimensions.height;
+  const margins = {
+    top: 16,
+    left: 16,
+    right: 16,
+    bottom: 32
+  };
+  const chartHeight = height - margins.top - margins.bottom;
+  const chartWidth = width - margins.left - margins.right;
+  const scaleRef = useRef();
+  if (!scaleRef.current) {
+    scaleRef.current = scaleLinear().domain([]).range([0, chartWidth]);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledBarChartEmptyText, {
+    $maxWidth: width,
+    $textSize: chartDimensions.fontSize / 2,
+    $theme: theme
+  }, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, /*#__PURE__*/React__default.createElement(Axis, {
+    position: "bottom",
+    length: chartWidth,
+    scale: scaleRef.current,
+    x: 0,
+    y: chartHeight,
+    tickValues: 4
+  })))));
+});
+
+const _excluded$5 = ["className"];
+const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), "Loading...");
+});
+
+var enUS = {
+	"interactive-chart": "Interactive Bar Chart",
+	"static-chart": "Static Bar Chart",
+	"definition-linear": "Linear Bar Chart with {barLength} bars.",
+	"definition-linear-with-categories": "Linear Bar Chart with {categoryLength} categories and {barLength} bars.",
+	"definition-ordinal": "Ordinal Bar Chart with {barLength} bars.",
+	"x-axis-numbers-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying numbers from {start, number} to {end, number}.",
+	"y-axis-numbers-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying numbers from {start, number} to {end, number}.",
+	"x-axis-dates-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying dates from {start} to {end}.",
+	"y-axis-dates-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying dates from {start} to {end}.",
+	"x-axis-categories-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying categories.",
+	"y-axis-categories-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying categories.",
+	"series-legend": "{category}, category {categoryIndex} of {categoryLength} with {barLength} bars"
+};
+
+var frFR = {
+	"interactive-chart": "Diagrammes à bandes interactif",
+	"static-chart": "Diagrammes à bandes statique",
+	"definition-linear": "Diagrammes à bandes contenant {barLength} bandes réparties sur un axe linéraire.",
+	"definition-linear-with-categories": "Diagrammes à bandes contenant {categoryLength} catégories et {barLength} bandes réparties sur un axe linéraire.",
+	"definition-ordinal": "Diagrammes à bandes contenant {barLength} bandes.",
+	"x-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des nombres allant de {start, number} à {end, number}.",
+	"y-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des nombres allant de {start, number} à {end, number}.",
+	"x-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des dates allant de {start} à {end}.",
+	"y-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des dates allant de {start} à {end}.",
+	"x-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des categories.",
+	"y-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des categories.",
+	"series-legend": "{category}, catégorie {categoryIndex} sur {categoryLength} contenant {barLength} bandes"
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+const BarChartContext = /*#__PURE__*/createContext(null);
+function useBarChartContext() {
+  const context = useContext(BarChartContext);
+  if (!context) {
+    throw new Error('useBarChartContext must be used within a BarChart');
+  }
+  return context;
+}
+
+const ChartTypeContext = /*#__PURE__*/React__default.createContext(undefined);
+
+const _excluded$4 = ["areXLabelsRotated", "barProps", "caping", "className", "data", "disableAnimations", "id", "isBarSelected", "getBarAnchorProps", "labelDecorator", "margins", "onBarClick", "orientation", "others", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues"];
+const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      areXLabelsRotated,
+      barProps,
+      caping,
+      className,
+      data: propsData,
+      disableAnimations,
+      id,
+      isBarSelected,
+      getBarAnchorProps,
+      labelDecorator,
+      margins: propsMargins,
+      onBarClick,
+      orientation,
+      others,
+      size,
+      sortingMethod,
+      barRole,
+      colorTheme,
+      tooltipVariant,
+      xAxisVariant: propsXAxisVariant,
+      xAxisPlacement,
+      xAxisTickFormat,
+      xAxisTickPadding,
+      xAxisTickRotation,
+      xAxisTickSize,
+      xAxisTickValues,
+      yAxisVariant: propsYAxisVariant,
+      yAxisPlacement,
+      yAxisTickFormat,
+      yAxisTickPadding,
+      yAxisTickRotation,
+      yAxisTickSize,
+      yAxisTickValues
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+  const cache = useRef();
+  const theme = useTheme();
+  const format = useMessageFormatter(intlMessages);
+  const {
+    data,
+    colorScale
+  } = useFormatCategoricalData({
+    data: propsData,
+    colorTheme: colorTheme,
+    sortingMethod: sortingMethod,
+    caping,
+    others,
+    theme
+  });
+  useEffect(() => {
+    cache.current = data;
+  });
+  const isHorizontal = orientation === BarOrientation.horizontal;
+  const xAxisVariant = propsXAxisVariant ? propsXAxisVariant : isHorizontal ? AxisVariant.default : AxisVariant.tickValue;
+  const yAxisVariant = propsYAxisVariant ? propsYAxisVariant : isHorizontal ? AxisVariant.none : AxisVariant.default;
+  const chartDimensions = sizeToDimension(size);
+  const width = chartDimensions.width;
+  const height = chartDimensions.height;
+  const margins = _objectSpread2({
+    top: 16,
+    left: isHorizontal ? 16 : 64,
+    right: 16,
+    bottom: 32
+  }, propsMargins);
+  const chartHeight = height - margins.top - margins.bottom;
+  const chartWidth = width - margins.left - margins.right;
+  const numberOfRows = data.filter(datum => datum.value).length;
+  const gap = 5;
+  const barHeight = chartHeight / numberOfRows - gap;
+  const barWidth = chartWidth / numberOfRows - gap;
+  const total = sum(data, d => d.value);
+  const scale = useMemo(() => scaleLinear().domain([0, Math.max(...data.map(_ref => {
+    let {
+      value
+    } = _ref;
+    return value;
+  }))]).range(isHorizontal ? [0, chartWidth] : [chartHeight, 0]), [size]);
+  const scaleCategory = useMemo(() => scaleBand().domain(data.filter(datum => datum.value).map(datum => datum.key)).range([0, isHorizontal ? chartHeight : chartWidth]), [size]);
+  const bars = data.filter(datum => datum.value);
+  return /*#__PURE__*/React__default.createElement(ChartTypeContext.Provider, {
+    value: "bar"
+  }, /*#__PURE__*/React__default.createElement(BarChartContext.Provider, {
+    value: {}
+  }, /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({
+    mode: typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? 'interactive' : 'static',
+    definition: format('definition-ordinal', {
+      barLength: bars.length
+    }),
+    xAxisDefinition: isHorizontal ? format('x-axis-numbers-definition', {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1,
+      start: scale.domain()[0],
+      end: scale.domain()[1]
+    }) : format('x-axis-categories-definition', {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1
+    }),
+    yAxisDefinition: isHorizontal ? format('y-axis-categories-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1
+    }) : format('y-axis-numbers-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1,
+      start: scale.domain()[0],
+      end: scale.domain()[1]
+    }),
+    dataTableRepresentation: {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Key"), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, bars.map(datum => /*#__PURE__*/React__default.createElement("tr", {
+        key: datum.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, datum.key), /*#__PURE__*/React__default.createElement("td", null, datum.value))))
+    }
+  }, forwardedProps, {
+    id: id,
+    className: className,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("svg", {
+    width: width,
+    height: height,
+    "aria-label": typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
+    "aria-hidden": "false"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "bottom",
+    length: chartWidth,
+    scale: isHorizontal ? scale : scaleCategory,
+    x: 0,
+    y: chartHeight,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 4,
+    tickPadding: xAxisTickPadding,
+    tickRotation: xAxisTickRotation,
+    tickSize: xAxisTickSize,
+    tickFormat: xAxisTickFormat,
+    variant: xAxisVariant
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "top",
+    length: chartWidth,
+    scale: isHorizontal ? scale : scaleCategory,
+    x: 0,
+    y: 0,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 4,
+    tickPadding: xAxisTickPadding,
+    tickRotation: xAxisTickRotation ? xAxisTickRotation : areXLabelsRotated ? -45 : 0,
+    tickSize: xAxisTickSize,
+    tickFormat: xAxisTickFormat,
+    variant: xAxisVariant
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "left",
+    length: chartHeight,
+    scale: isHorizontal ? scaleCategory : scale,
+    x: 0,
+    y: chartHeight,
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 4,
+    tickPadding: yAxisTickPadding,
+    tickRotation: yAxisTickRotation,
+    tickSize: yAxisTickSize,
+    tickFormat: yAxisTickFormat,
+    variant: yAxisVariant
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "right",
+    length: chartHeight,
+    scale: isHorizontal ? scaleCategory : scale,
+    x: chartWidth,
+    y: chartHeight,
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 4,
+    tickPadding: yAxisTickPadding,
+    tickRotation: yAxisTickRotation,
+    tickSize: yAxisTickSize,
+    tickFormat: yAxisTickFormat,
+    variant: yAxisVariant
+  }) : null), /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, bars.map((datum, index) => {
+    const percent = datum.value / total;
+    const to = {
+      data: _objectSpread2(_objectSpread2({}, datum), {}, {
+        percent
+      })
+    };
+    const from = cache.current ? {
+      data: cache.current[index]
+    } : undefined;
+    return /*#__PURE__*/React__default.createElement(Bar, _extends({
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.key),
+      data: to,
+      dataset: bars,
+      disableAnimations: disableAnimations,
+      gap: gap,
+      id: `id${id}__bar-${index}`,
+      index: index,
+      isSelected: Boolean(isBarSelected(to)),
+      key: `bar _${index}`,
+      labelDecorator: labelDecorator,
+      maxHeight: isHorizontal ? undefined : chartHeight,
+      anchorProps: getBarAnchorProps ? getBarAnchorProps(to) : undefined,
+      onClick: onBarClick,
+      orientation: orientation,
+      previousData: from,
+      scale: scale,
+      scalePosition: scaleCategory,
+      tooltipVariant: tooltipVariant
+    }, barProps, {
+      width: isHorizontal ? undefined : barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? barProps.width : barWidth,
+      height: isHorizontal ? barProps !== null && barProps !== void 0 && barProps.height && typeof barProps.height === 'number' ? barProps.height : barHeight : undefined,
+      role: barRole
+    }));
+  }))))));
+});
+
+const _excluded$3 = ["category"];
+const COMPONENT_NAME$2 = 'BarChartBars';
+const CLASSNAME$2 = 'redsift-bars';
+const BarChartBars = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      category = 'default'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+  const {
+    barProps,
+    barRole,
+    bars,
+    barWidth,
+    cache,
+    categories,
+    colorScale,
+    direction,
+    disableAnimations,
+    format,
+    gap,
+    getBarAnchorProps,
+    hasCategory,
+    id,
+    isBarSelected,
+    labelDecorator,
+    onBarClick,
+    scaleX,
+    scaleY,
+    tooltipVariant,
+    tooltipDecorator,
+    xScaleType
+  } = useBarChartContext();
+  const filteredBarChartBars = bars.filter(bar => bar.category === category && bar.value > 0);
+  const categoryIndex = categories.indexOf(category);
+  const categoryLength = categories.length;
+  return /*#__PURE__*/React__default.createElement(StyledBarChartBars, _extends({
+    key: `${id}-series-${category}`,
+    "aria-hidden": "false",
+    role: "region"
+  }, hasCategory ? {
+    'aria-label': format('series-legend', {
+      category,
+      categoryIndex: categoryIndex + 1,
+      categoryLength,
+      barLength: filteredBarChartBars.length
+    })
+  } : {}, forwardedProps, {
+    ref: ref
+  }), filteredBarChartBars.map((bar, index) => {
+    const to = {
+      data: bar,
+      category
+    };
+    const from = cache.current ? {
+      data: cache.current[index]
+    } : undefined;
+    const groupedBars = bars.filter(b => {
+      return xScaleType === 'Date' || xScaleType === 'dateString' ? b.key.getTime() === bar.key.getTime() : b.key === bar.key;
+    });
+    return /*#__PURE__*/React__default.createElement(Bar, _extends({
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
+      data: to,
+      dataset: bars,
+      groupedData: groupedBars,
+      disableAnimations: disableAnimations,
+      gap: gap,
+      id: `id${id}__bar-${categoryIndex}.${index}`,
+      index: index,
+      isSelected: Boolean(isBarSelected(to)),
+      key: `bar _${categoryIndex}.${index}`,
+      labelDecorator: labelDecorator,
+      maxHeight: scaleY(bar.cumulativeValue - bar.value),
+      anchorProps: getBarAnchorProps ? getBarAnchorProps(to) : undefined,
+      onClick: onBarClick,
+      orientation: BarOrientation.vertical,
+      direction: direction,
+      previousData: from,
+      scale: scaleY,
+      scalePosition: scaleX,
+      tooltipVariant: tooltipVariant,
+      tooltipDecorator: tooltipDecorator
+    }, barProps, {
+      width: barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? barProps.width : barWidth,
+      height: undefined,
+      role: barRole
+    }));
+  }));
+});
+BarChartBars.className = CLASSNAME$2;
+BarChartBars.displayName = COMPONENT_NAME$2;
+const BarChartGroupedTooltip = _ref => {
+  let {
+    dateFormatter,
+    categories,
+    categoryDecorator,
+    categoryColor,
+    datum,
+    groupedData
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    margin: "16px",
+    gap: "0"
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    gap: "8px"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "400",
+    fontSize: "14px"
+  }, "Date:"), /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "700",
+    fontSize: "14px"
+  }, dateFormatter(datum.data.key))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '1px',
+      backgroundColor: '#858585',
+      margin: '8px 0'
+    }
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    gap: "8px"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "400",
+    fontSize: "14px"
+  }, "Total:"), /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "600",
+    fontSize: "14px"
+  }, groupedData === null || groupedData === void 0 ? void 0 : groupedData.reduce((acc, d) => acc + d.value, 0))), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    marginTop: "4px",
+    gap: "8px"
+  }, categories.map(category => {
+    var _groupedData$find;
+    const value = groupedData === null || groupedData === void 0 ? void 0 : (_groupedData$find = groupedData.find(d => d.category === category)) === null || _groupedData$find === void 0 ? void 0 : _groupedData$find.value;
+    const color = categoryColor(category);
+    return value ? /*#__PURE__*/React__default.createElement(Flexbox, {
+      key: category,
+      alignItems: "center",
+      gap: "8px"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        width: '16px',
+        height: '16px',
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/React__default.createElement(Text, {
+      fontWeight: "400",
+      fontSize: "14px",
+      lineHeight: "18px"
+    }, categoryDecorator ? categoryDecorator(category) : category), /*#__PURE__*/React__default.createElement(Text, {
+      fontWeight: "600",
+      fontSize: "14px",
+      lineHeight: "18px"
+    }, value)) : null;
+  })));
+};
+
+const _excluded$2 = ["barProps", "children", "className", "data", "direction", "disableAnimations", "id", "getBarAnchorProps", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "tooltipDecorator", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "xAxisStartDateOffset", "xAxisEndDateOffset", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "xScaleType", "yScaleLogBase", "dateParser"],
+  _excluded2 = ["extraLegendItems"];
+const COMPONENT_TYPES = {
+  AXES: 'Axis',
+  SECTIONS: 'BarChartSection',
+  BARS: 'BarChartBars',
+  LEGENDS: 'Legend'
+};
+const getComponentPosition = child => {
+  var _child$type;
+  if (! /*#__PURE__*/React__default.isValidElement(child)) return null;
+  const displayName = (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName;
+  if (COMPONENT_TYPES.AXES === displayName) return 'axes';
+  if (COMPONENT_TYPES.SECTIONS === displayName) return 'sections';
+  if (COMPONENT_TYPES.BARS === displayName) return 'bars';
+  if (COMPONENT_TYPES.LEGENDS === displayName) return 'legend';
+  return null;
+};
+const getKey = datum => Array.isArray(datum.key) ? datum.key[0] : datum.key;
+const filterData = (hasCategory, data, filterFn) => {
+  if (hasCategory) {
+    return data.filter(filterFn);
+  }
+  return data.filter(filterFn);
+};
+const reduceData = (hasCategory, data, reduceFn, initialValue) => {
+  if (hasCategory) {
+    return data.reduce(reduceFn, initialValue);
+  }
+  return data.reduce(reduceFn, initialValue);
+};
+const isSameKey = (key, previousKey, xScaleType) => xScaleType === 'Date' || xScaleType === 'dateString' ? key.getTime() === previousKey.getTime() : key === previousKey;
+const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+  var _chartDimensions$maxW, _chartDimensions$minW;
+  const {
+      barProps,
+      children,
+      className,
+      data: propsData,
+      direction = BarDirection.up,
+      disableAnimations,
+      id,
+      getBarAnchorProps,
+      isBarSelected,
+      labelDecorator,
+      legendDecorator,
+      legendVariant,
+      legendProps,
+      margins: propsMargins,
+      onBarClick,
+      size,
+      sortingMethod: propsSortingMethod,
+      barRole,
+      colorTheme,
+      tooltipVariant,
+      tooltipDecorator,
+      xAxisVariant: propsXAxisVariant,
+      xAxisPlacement,
+      xAxisTickFormat: propsXAxisTickFormat,
+      xAxisTickPadding,
+      xAxisTickRotation,
+      xAxisTickSize,
+      xAxisTickValues,
+      xAxisMinValue,
+      xAxisMaxValue,
+      xAxisTickRemodelling,
+      xAxisStartDateOffset = -1,
+      xAxisEndDateOffset = 1,
+      yAxisVariant: propsYAxisVariant,
+      yAxisPlacement,
+      yAxisTickFormat,
+      yAxisTickPadding,
+      yAxisTickRotation,
+      yAxisTickSize,
+      yAxisTickValues,
+      yAxisMinValue,
+      yAxisMaxValue,
+      yAxisTickRemodelling,
+      xScaleType: propsXScaleType,
+      yScaleLogBase,
+      dateParser
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  const cache = useRef();
+  const theme = useTheme();
+  const format = useMessageFormatter(intlMessages);
+  const hasCategory = propsData[0] && Array.isArray(propsData[0].key) && propsData[0].key.length >= 2 && propsData[0].key[1] !== null && propsData[0].key[1] !== undefined;
+  const sections = useMemo(() => {
+    const sectionList = [];
+    React__default.Children.forEach(children, child => {
+      if (isComponent('BarChartSection')(child)) {
+        const categories = React__default.Children.toArray(child.props.children).filter(c => isComponent('BarChartBars')(c)).map(c => c.props.category);
+        sectionList.push(categories);
+      }
+    });
+    return sectionList;
+  }, [children]);
+  const hasSections = sections.length > 0;
+  const sortingMethod = hasSections ? sections.flat() : propsSortingMethod;
+  const xScaleType = propsXScaleType ? propsXScaleType : 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' ? filterData(hasCategory, propsData, datum => typeof getKey(datum) === 'number' && !Number.isNaN(getKey(datum))) : xScaleType === 'dateString' ? filterData(hasCategory, propsData, datum => isValidDate(getKey(datum))) : xScaleType === 'Date' ? filterData(hasCategory, propsData, datum => getKey(datum) instanceof Date) : propsData;
+  useEffect(() => {
+    cache.current = data;
+  });
+  const svgRef = useRef();
+  const xAxisVariant = propsXAxisVariant ? propsXAxisVariant : AxisVariant.tickValue;
+  const yAxisVariant = propsYAxisVariant ? propsYAxisVariant : AxisVariant.default;
+  const chartDimensions = sizeToDimension(size);
+  const width = Math.max(Math.min(chartDimensions.width, (_chartDimensions$maxW = chartDimensions.maxWidth) !== null && _chartDimensions$maxW !== void 0 ? _chartDimensions$maxW : Infinity), (_chartDimensions$minW = chartDimensions.minWidth) !== null && _chartDimensions$minW !== void 0 ? _chartDimensions$minW : -Infinity);
+  const height = chartDimensions.height;
+  const margins = _objectSpread2({
+    top: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8,
+    left: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    right: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    bottom: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8
+  }, propsMargins);
+  const chartHeight = height - margins.top - margins.bottom;
+  const chartWidth = width - margins.left - margins.right;
+  const numberOfBars = filterData(hasCategory, data, datum => datum.value).length;
+  const gap = 5;
+  let barWidth = chartWidth / (numberOfBars * 2) - gap;
+  const scaleX = (() => {
+    if (xScaleType === 'number') {
+      var _ref, _ref2;
+      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];
+      domain[0] -= gap * 0.1;
+      domain[1] += gap * 0.1;
+      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(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 === 'function' && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset) : new Date(domain[0]);
+      const endDate = xAxisTickValues && typeof xAxisTickValues === 'function' && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset) : new Date(domain[1]);
+      return barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? scaleUtc().domain([startDate, endDate]).range([barProps.width / 2 + 10, chartWidth - (barProps.width / 2 + 5)]) : scaleUtc().domain([startDate, endDate]).range([barWidth, chartWidth - barWidth]).nice();
+    } else {
+      var _ref5, _ref6;
+      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 xAxisTickFormat = propsXAxisTickFormat !== null && propsXAxisTickFormat !== void 0 ? propsXAxisTickFormat : xScaleType === 'Date' || xScaleType === 'dateString' ? scaleX.tickFormat() : undefined;
+  const statsByCategory = statsBy(data, sortingMethod);
+  const colorScale = useColor({
+    data: statsByCategory,
+    colorTheme: colorTheme,
+    category: d => d.key,
+    theme
+  });
+  const bars = reduceData(hasCategory, filterData(hasCategory, data.sort((a, b) => {
+    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;
+    } else if (xScaleType === 'dateString') {
+      if (Date.parse(currentKeyA) < Date.parse(currentKeyB)) return -1;
+      if (Date.parse(currentKeyA) > Date.parse(currentKeyB)) return 1;
+    } else if (xScaleType === 'Date') {
+      if (currentKeyA.valueOf() < currentKeyB.valueOf()) return -1;
+      if (currentKeyA.valueOf() > currentKeyB.valueOf()) return 1;
+    } 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 hasCategory ? getSortingMethod(sortingMethod !== null && sortingMethod !== void 0 ? sortingMethod : 'asc-key')({
+      key: a.key[1],
+      value: a.value
+    }, {
+      key: b.key[1],
+      value: b.value
+    }) : 0;
+  }), d => d.value !== null), (previousValue, currentValue, currentIndex) => {
+    var _key$;
+    const currentKeyD = hasCategory ? currentValue.key[0] : currentValue.key;
+    const formattedKeyD = xScaleType === 'dateString' ? dateParser ? dateParser(currentKeyD) : utcParse('%Y-%m-%d')(currentKeyD) : currentKeyD;
+    const category = hasCategory ? (_key$ = currentValue.key[1]) !== null && _key$ !== void 0 ? _key$ : 'default' : 'default';
+    const isSameSection = !hasSections ? true : (() => {
+      var _previousValue;
+      const findSectionIndex = cat => sections.findIndex(section => section.includes(cat));
+      const currentSection = findSectionIndex(category);
+      const prevSection = findSectionIndex((_previousValue = previousValue[currentIndex - 1]) === null || _previousValue === void 0 ? void 0 : _previousValue.category);
+      return currentSection !== -1 && currentSection === prevSection;
+    })();
+    previousValue.push({
+      category,
+      key: formattedKeyD,
+      value: currentValue.value,
+      cumulativeValue: currentValue.value
+    });
+    if (hasCategory && currentIndex > 0 && isSameKey(formattedKeyD, previousValue[currentIndex - 1].key, xScaleType) && isSameSection) {
+      previousValue[currentIndex].cumulativeValue = previousValue[currentIndex].cumulativeValue + previousValue[currentIndex - 1].cumulativeValue;
+    }
+    return previousValue;
+  }, []).filter(bar => yScaleLogBase === undefined || bar.cumulativeValue !== 0);
+  const getScaleY = function (direction) {
+    var _ref7, _ref8;
+    let from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let to = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+    let categories = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ['default'];
+    let hasSectionTitle = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+    const domain = extent(bars.filter(bar => categories.includes(bar.category)), 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] * (hasSectionTitle ? 1.2 : 1);
+    if (domain[1] === 0 && domain[0] === 0) {
+      domain[1] = 1;
+    }
+    return (yScaleLogBase ? scaleLog().clamp(true).base(yScaleLogBase) : scaleLinear()).domain(domain).range(direction === 'down' ? [0, chartHeight * to - chartHeight * from] : [chartHeight * to - chartHeight * from, 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 && typeof xAxisTickValues !== 'string' ? typeof xAxisTickValues === 'number' ? xAxisTickValues : Array.isArray(xAxisTickValues) ? xAxisTickValues.length : xAxisTickValues.range(scaleX.domain()[0], scaleX.domain()[1]).length : 1));
+  }
+  const categories = sortingMethod && Array.isArray(sortingMethod) ? sortingMethod : [];
+  const pivotedTable = bars.reduce((acc, item) => {
+    const {
+      key,
+      category,
+      value
+    } = item;
+    if (!categories.includes(category)) {
+      categories.push(category);
+    }
+    const formattedKey = xAxisTickFormat ? xAxisTickFormat(key) : key.toString();
+    let entry = acc.find(e => e.key === formattedKey);
+    if (!entry) {
+      entry = {
+        key: formattedKey
+      };
+      acc.push(entry);
+    }
+    entry[category] = value;
+    return acc;
+  }, []);
+  const scaleY = getScaleY(direction, 0, 1, categories);
+  const _ref9 = legendProps || {},
+    {
+      extraLegendItems
+    } = _ref9,
+    forwardedLegendProps = _objectWithoutProperties(_ref9, _excluded2);
+  const {
+    axisComponents,
+    sectionComponents,
+    barsComponents,
+    legendComponents,
+    titleComponent,
+    descriptionComponent,
+    multipleScaleY
+  } = useMemo(() => {
+    const axisComponents = [];
+    const sectionComponents = [];
+    const barsComponents = [];
+    const legendComponents = [];
+    let titleComponent;
+    let descriptionComponent;
+    const multipleScaleY = [];
+    React__default.Children.forEach(children, (child, index) => {
+      const position = getComponentPosition(child);
+      if (isComponent('ChartContainerTitle')(child)) {
+        titleComponent = child;
+      }
+      if (isComponent('ChartContainerDescription')(child)) {
+        descriptionComponent = child;
+      }
+      if (!position || ! /*#__PURE__*/React__default.isValidElement(child)) return;
+      let enhancedChild = child;
+      if (isComponent('BarChartSection')(child)) {
+        const categories = React__default.Children.toArray(child.props.children).filter(c => isComponent('BarChartBars')(c)).map(c => c.props.category);
+        const scaleY = getScaleY(child.props.direction || 'up', child.props.from, child.props.to, categories, child.props.title !== '');
+        multipleScaleY.push(scaleY);
+        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+          scaleX: scaleX,
+          scaleY: scaleY,
+          key: child.key || `section-${child.props.from}-${child.props.to}-${categories.join('-')}`
+        }, child.props));
+      }
+      if (isComponent('Axis')(child)) {
+        var _ref10;
+        const isX = getAxisType(child.props.position) === 'x';
+        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+          key: child.key || `axis-${child.props.position}-${index}`,
+          chartWidth,
+          chartHeight,
+          scale: isX ? scaleX : scaleY,
+          x: child.props.position === 'right' ? chartWidth : 0,
+          y: child.props.position === 'bottom' ? chartHeight : child.props.position === 'top' ? 0 : chartHeight,
+          disableAnimations,
+          length: isX ? chartWidth : chartHeight,
+          tickValues: (_ref10 = isX ? xAxisTickValues : yAxisTickValues) !== null && _ref10 !== void 0 ? _ref10 : 8,
+          tickPadding: isX ? xAxisTickPadding : yAxisTickPadding,
+          tickRotation: isX ? xAxisTickRotation : yAxisTickRotation,
+          tickSize: isX ? xAxisTickSize : yAxisTickSize,
+          tickFormat: isX ? xAxisTickFormat : yAxisTickFormat,
+          tickRemodelling: isX ? xAxisTickRemodelling : yAxisTickRemodelling,
+          variant: isX ? xAxisVariant : yAxisVariant
+        }, child.props));
+      }
+      if (isComponent('Legend')(child)) {
+        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+          key: child.key || `legend-${index}`,
+          data: (extraLegendItems ? mergeLegends(extraLegendItems, statsByCategory).sort(getSortingMethod(sortingMethod)) : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+            color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
+          }))
+        }, child.props));
+      }
+      switch (position) {
+        case 'axes':
+          axisComponents.push(enhancedChild);
+          break;
+        case 'sections':
+          sectionComponents.push(enhancedChild);
+          break;
+        case 'bars':
+          barsComponents.push(enhancedChild);
+          break;
+        case 'legend':
+          legendComponents.push(enhancedChild);
+          break;
+      }
+    });
+    return {
+      axisComponents,
+      sectionComponents,
+      barsComponents,
+      legendComponents,
+      titleComponent,
+      descriptionComponent,
+      multipleScaleY
+    };
+  }, [children]);
+  return /*#__PURE__*/React__default.createElement(ChartTypeContext.Provider, {
+    value: "bar"
+  }, /*#__PURE__*/React__default.createElement(BarChartContext.Provider, {
+    value: {
+      barProps,
+      barRole,
+      bars: bars,
+      barWidth,
+      cache,
+      categories,
+      chartHeight,
+      chartWidth,
+      colorScale,
+      direction,
+      disableAnimations,
+      format,
+      gap,
+      getBarAnchorProps,
+      hasCategory,
+      id,
+      isBarSelected,
+      labelDecorator,
+      margins,
+      onBarClick,
+      scaleX,
+      scaleY,
+      tooltipVariant,
+      tooltipDecorator,
+      xAxisTickFormat,
+      xAxisTickPadding,
+      xAxisTickRemodelling,
+      xAxisTickRotation,
+      xAxisTickSize,
+      xAxisTickValues,
+      xAxisVariant,
+      xScaleType,
+      yAxisTickValues,
+      yAxisTickPadding,
+      yAxisTickRotation,
+      yAxisTickSize,
+      yAxisTickFormat,
+      yAxisTickRemodelling,
+      yAxisVariant
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({
+    mode: typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? 'interactive' : 'static',
+    definition: hasCategory ? format('definition-linear-with-categories', {
+      categoryLength: categories.length,
+      barLength: bars.length
+    }) : format('definition-linear', {
+      barLength: bars.length
+    }),
+    xAxisDefinition: format(`x-axis-${xScaleType === 'number' ? 'numbers' : 'dates'}-definition`, {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1,
+      start: xAxisTickFormat ? xAxisTickFormat(scaleX.domain()[0]) : scaleX.domain()[0],
+      end: xAxisTickFormat ? xAxisTickFormat(scaleX.domain()[1]) : scaleX.domain()[1]
+    }),
+    yAxisDefinition: multipleScaleY.length > 0 ? multipleScaleY.map(scale => format('y-axis-numbers-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1,
+      start: scale.domain()[0],
+      end: scale.domain()[1]
+    })).join(' ') : format('y-axis-numbers-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1,
+      start: scaleY.domain()[0],
+      end: scaleY.domain()[1]
+    }),
+    dataTableRepresentation: hasCategory ? {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: category,
+        scope: "col"
+      }, category)))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, pivotedTable.map(row => /*#__PURE__*/React__default.createElement("tr", {
+        key: row.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, row.key), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: `${row.key}-${category}-${row[category]}`,
+        scope: "col"
+      }, row[category])))))
+    } : {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, bars.map(datum => {
+        const key = xAxisTickFormat ? xAxisTickFormat(datum.key) : datum.key.toString();
+        return /*#__PURE__*/React__default.createElement("tr", {
+          key: key
+        }, /*#__PURE__*/React__default.createElement("th", {
+          scope: "row"
+        }, key), /*#__PURE__*/React__default.createElement("td", null, datum.value));
+      }))
+    },
+    title: titleComponent,
+    description: descriptionComponent
+  }, forwardedProps, {
+    id: id,
+    className: className,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "8"
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    ref: svgRef,
+    width: width,
+    height: height,
+    "aria-label": typeof onBarClick === 'function' || typeof getBarAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
+    "aria-hidden": "false"
+  }, axisComponents.length === 0 && sectionComponents.length === 0 ? /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`,
+    "aria-hidden": "true"
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "bottom",
+    length: chartWidth,
+    scale: scaleX,
+    x: 0,
+    y: chartHeight,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
+    tickPadding: xAxisTickPadding,
+    tickRotation: xAxisTickRotation,
+    tickSize: xAxisTickSize,
+    tickFormat: xAxisTickFormat,
+    tickRemodelling: xAxisTickRemodelling,
+    variant: xAxisVariant
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "top",
+    length: chartWidth,
+    scale: scaleX,
+    x: 0,
+    y: 0,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
+    tickPadding: xAxisTickPadding,
+    tickRotation: xAxisTickRotation,
+    tickSize: xAxisTickSize,
+    tickFormat: xAxisTickFormat,
+    tickRemodelling: xAxisTickRemodelling,
+    variant: xAxisVariant
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "left",
+    length: chartHeight,
+    scale: scaleY,
+    x: 0,
+    y: chartHeight,
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 8,
+    tickPadding: yAxisTickPadding,
+    tickRotation: yAxisTickRotation,
+    tickSize: yAxisTickSize,
+    tickFormat: yAxisTickFormat,
+    tickRemodelling: yAxisTickRemodelling,
+    variant: yAxisVariant
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "right",
+    length: chartHeight,
+    scale: scaleY,
+    x: chartWidth,
+    y: chartHeight,
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 8,
+    tickPadding: yAxisTickPadding,
+    tickRotation: yAxisTickRotation,
+    tickSize: yAxisTickSize,
+    tickFormat: yAxisTickFormat,
+    tickRemodelling: yAxisTickRemodelling,
+    variant: yAxisVariant
+  }) : null) : /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`,
+    "aria-hidden": "true"
+  }, axisComponents), sectionComponents, barsComponents.length === 0 && sectionComponents.length === 0 ? /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`,
+    "aria-hidden": "true"
+  }, (hasSections ? sections : [categories]).map(section => section.map(category => /*#__PURE__*/React__default.createElement(BarChartBars, {
+    key: category,
+    category: category
+  }))), ' ') : /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`,
+    "aria-hidden": "true"
+  }, barsComponents))), legendComponents.length === 0 && hasCategory && legendVariant !== BarChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+    data: (extraLegendItems ? mergeLegends(extraLegendItems, statsByCategory).sort(getSortingMethod(sortingMethod)) : 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
+  }, forwardedLegendProps)) : legendComponents)));
+});
+
+const _excluded$1 = ["className", "from", "to", "color", "title", "titlePosition", "scaleX", "scaleY", "children", "direction"];
+const COMPONENT_NAME$1 = 'BarChartSection';
+const CLASSNAME$1 = 'redsift-barchart-section';
+const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      from = 0,
+      to = 1,
+      color,
+      title,
+      titlePosition = 'center',
+      scaleX,
+      scaleY,
+      children: propsChildren,
+      direction
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const {
+    textColor,
+    backgroundColor
+  } = useMemo(() => {
+    if (color === 'green') {
+      return {
+        textColor: RedsiftColorGreenD1,
+        backgroundColor: '#F7FBF9'
+      };
+    } else if (color === 'red') {
+      return {
+        textColor: RedsiftColorRedD1,
+        backgroundColor: '#FFF7F7'
+      };
+    } else if (color === undefined) {
+      return {
+        textColor: RedsiftColorNeutralBlack,
+        backgroundColor: undefined
+      };
+    }
+    return color;
+  }, [color]);
+  const theme = useTheme();
+  const context = useBarChartContext();
+  const {
+    chartHeight,
+    chartWidth,
+    margins,
+    disableAnimations,
+    xAxisTickValues,
+    xAxisTickPadding,
+    xAxisTickRotation,
+    xAxisTickSize,
+    xAxisTickFormat,
+    xAxisTickRemodelling,
+    xAxisVariant,
+    yAxisTickValues,
+    yAxisTickPadding,
+    yAxisTickRotation,
+    yAxisTickSize,
+    yAxisTickFormat,
+    yAxisTickRemodelling,
+    yAxisVariant
+  } = context;
+  const sectionHeight = Math.max(0, Math.min(1, to - from)) * chartHeight;
+  const sectionY = Math.max(0, Math.min(1, from)) * chartHeight;
+  const titleX = titlePosition === 'center' ? chartWidth / 2 : titlePosition === 'right' ? chartWidth - 10 : 10;
+  const titleAnchor = titlePosition === 'center' ? 'middle' : titlePosition === 'right' ? 'end' : 'start';
+  const children = useMemo(() => {
+    const renderedChildren = [];
+    React__default.Children.forEach(propsChildren, child => {
+      if (! /*#__PURE__*/React__default.isValidElement(child)) return;
+      const isX = getAxisType(child.props.position) === 'x';
+      let enhancedChild = child;
+      if (isComponent('Axis')(child)) {
+        var _ref;
+        enhancedChild = /*#__PURE__*/React__default.cloneElement(child, _objectSpread2({
+          key: child.key || `axis-${child.props.position}`,
+          chartWidth,
+          chartHeight,
+          sectionHeight,
+          scale: isX ? scaleX : scaleY,
+          x: child.props.position === 'right' ? chartWidth : 0,
+          y: child.props.position === 'bottom' ? sectionHeight : child.props.position === 'top' ? 0 : sectionHeight,
+          disableAnimations,
+          length: isX ? chartWidth : sectionHeight,
+          tickValues: (_ref = isX ? xAxisTickValues : yAxisTickValues) !== null && _ref !== void 0 ? _ref : 8,
+          tickPadding: isX ? xAxisTickPadding : yAxisTickPadding,
+          tickRotation: isX ? xAxisTickRotation : yAxisTickRotation,
+          tickSize: isX ? xAxisTickSize : yAxisTickSize,
+          tickFormat: isX ? xAxisTickFormat : yAxisTickFormat,
+          tickRemodelling: isX ? xAxisTickRemodelling : yAxisTickRemodelling,
+          variant: isX ? xAxisVariant : yAxisVariant,
+          textColor: isX ? undefined : color,
+          tickToColor: (_, index) => index !== 0
+        }, child.props));
+      }
+      renderedChildren.push(enhancedChild);
+    });
+    return renderedChildren;
+  }, [propsChildren]);
+  return /*#__PURE__*/React__default.createElement(BarChartContext.Provider, {
+    value: _objectSpread2(_objectSpread2({}, context), {}, {
+      scaleX: scaleX,
+      scaleY: scaleY,
+      direction,
+      sectionHeight
+    })
+  }, /*#__PURE__*/React__default.createElement(StyledBarChartSection, _extends({}, forwardedProps, {
+    className: classNames(BarChartSection.className, className),
+    transform: `translate(${margins.left},${(margins.top || 0) + sectionY})`,
+    ref: ref,
+    $theme: theme,
+    $textColor: textColor
+  }), backgroundColor ? /*#__PURE__*/React__default.createElement("rect", {
+    x: 0,
+    y: 0,
+    width: chartWidth,
+    height: sectionHeight,
+    fill: backgroundColor
+  }) : null, title && /*#__PURE__*/React__default.createElement("text", {
+    className: "title colored",
+    x: titleX,
+    y: direction === 'up' ? 8 : direction === 'down' ? sectionHeight - 8 : sectionHeight / 2,
+    textAnchor: titleAnchor,
+    fontSize: 12,
+    dominantBaseline: direction === 'up' ? 'hanging' : direction === 'down' ? 'auto' : 'middle'
+  }, title), children));
+});
+BarChartSection.className = CLASSNAME$1;
+BarChartSection.displayName = COMPONENT_NAME$1;
+
+const _excluded = ["barRole", "caping", "chartRef", "className", "colorTheme", "data", "dataType", "emptyComponent", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBarClick", "orientation", "others", "size", "sortingMethod", "theme", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "yAxisPlacement"];
+const COMPONENT_NAME = 'BarChart';
+const CLASSNAME = 'redsift-barchart';
+const BaseBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      barRole,
+      caping,
+      chartRef,
+      className,
+      colorTheme = ColorTheme.default,
+      data: propsData,
+      dataType: propsDataType,
+      emptyComponent,
+      id: propsId,
+      isBarSelected = () => true,
+      labelDecorator,
+      legendDecorator,
+      legendVariant: propsLegendVariant,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
+      onBarClick,
+      orientation = BarOrientation.horizontal,
+      others = true,
+      size = ChartSize.medium,
+      sortingMethod = 'desc-value',
+      theme,
+      tooltipDecorator,
+      tooltipVariant = TooltipVariant.value,
+      xAxisPlacement = 'bottom',
+      yAxisPlacement = 'left'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  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
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  if (propsData.length === 0) {
+    return /*#__PURE__*/React__default.createElement(EmptyBarChart, _extends({
+      data: propsData,
+      emptyComponent: emptyComponent,
+      id: id,
+      localeText: localeText,
+      size: size
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  const dataType = propsDataType ? propsDataType : Array.isArray(propsData[0].key) ? 'TwoCategoryData' : propsData[0].key instanceof Date ? 'LinearData' : typeof propsData[0].key === 'number' ? 'LinearData' : typeof propsData[0].key === 'string' && isValidDate(propsData[0].key) ? 'LinearData' : typeof propsData[0].key === 'string' ? 'CategoryData' : 'CategoryData';
+  if (dataType === 'CategoryData') {
+    return /*#__PURE__*/React__default.createElement(RenderedOrdinalBarChart, _extends({
+      barRole: barRole,
+      caping: caping,
+      chartRef: chartRef,
+      className: classNames(BaseBarChart.className, className),
+      data: propsData,
+      id: id,
+      isBarSelected: isBarSelected,
+      labelDecorator: labelDecorator,
+      onBarClick: onBarClick,
+      orientation: orientation,
+      others: others,
+      size: size,
+      sortingMethod: sortingMethod,
+      theme: theme,
+      tooltipDecorator: tooltipDecorator,
+      colorTheme: colorTheme,
+      tooltipVariant: tooltipVariant,
+      xAxisPlacement: xAxisPlacement,
+      yAxisPlacement: yAxisPlacement
+    }, forwardedProps, {
+      ref: ref
+    }));
+  } else if (dataType === 'LinearData' || dataType === 'TwoCategoryData') {
+    return /*#__PURE__*/React__default.createElement(RenderedLinearBarChart, _extends({
+      barRole: barRole,
+      chartRef: chartRef,
+      className: classNames(BaseBarChart.className, className),
+      data: propsData,
+      id: id,
+      isBarSelected: isBarSelected,
+      labelDecorator: labelDecorator,
+      legendDecorator: legendDecorator,
+      legendVariant: legendVariant,
+      onBarClick: onBarClick,
+      size: size,
+      sortingMethod: sortingMethod,
+      theme: theme,
+      tooltipDecorator: tooltipDecorator,
+      colorTheme: colorTheme,
+      tooltipVariant: tooltipVariant,
+      xAxisPlacement: xAxisPlacement,
+      yAxisPlacement: yAxisPlacement
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  return null;
+});
+BaseBarChart.className = CLASSNAME;
+BaseBarChart.displayName = COMPONENT_NAME;
+const BarChart = Object.assign(BaseBarChart, {
+  Section: BarChartSection,
+  Bars: BarChartBars,
+  Axis: Axis,
+  GroupedTooltip: BarChartGroupedTooltip,
+  Legend: Legend,
+  LegendItem: LegendItem,
+  Title: ChartContainerTitle,
+  Description: ChartContainerDescription
+});
+
+export { BaseBarChart as B, StyledBarChart as S, BarChart as a, BarChartLegendVariant as b, StyledBarChartSection as c, StyledBarChartBars as d, StyledBarChartEmptyText as e };
+//# sourceMappingURL=BarChart2.js.map