@redsift/charts 11.5.0 → 11.6.0-muiv5-alpha.1

package/components/BarChart/RenderedLinearBarChart.js

@@ -0,0 +1,549 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useMemo, useEffect } from 'react';
+import { extent, scaleLinear, scaleUtc, scalePoint, utcParse, scaleLog } from 'd3';
+import { useTheme, useMessageFormatter, isComponent, Flexbox } from '@redsift/design-system';
+import intlMessages from './intl/index.js';
+import { BarChartLegendVariant } from './types.js';
+import { StyledBarChart } from './styles.js';
+import { sizeToDimension, statsBy } from './utils.js';
+import { isValidDate, getSortingMethod, mergeLegends } from '../../utils/index.js';
+import { BarChartContext } from './context.js';
+import { ChartTypeContext } from '../ChartContainer/context.js';
+import { BarChartBars } from './BarChartBars.js';
+import { BarDirection } from '../Bar/types.js';
+import { useColor } from '../../hooks/useColor.js';
+import { getAxisType, Axis } from '../Axis/Axis.js';
+import { Legend } from '../Legend/Legend.js';
+import { AxisVariant } from '../Axis/types.js';
+import { LegendVariant } from '../../types/legend.js';
+
+const _excluded = ["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);
+  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)));
+});
+
+export { COMPONENT_TYPES, RenderedLinearBarChart, getComponentPosition };
+//# sourceMappingURL=RenderedLinearBarChart.js.map