@redsift/charts 11.6.0-muiv5-alpha.10 → 11.6.0-muiv5-alpha.11

package/_internal/BarChart2.js

@@ -1,1419 +0,0 @@
-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