@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.9

package/lib/esm/component/Chart/CompactHorizontalBarChart.mjs

@@ -1,9 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
@@ -12,89 +6,78 @@ import React from "react";
 import CompactHorizontalBar from "../../CompactHorizontalBar.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-var CompactHorizontalBarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
-  function CompactHorizontalBarChartComponent2() {
-    _classCallCheck(this, CompactHorizontalBarChartComponent2);
-    return _callSuper(this, CompactHorizontalBarChartComponent2, arguments);
+class CompactHorizontalBarChartComponent extends AbstractChart {
+  get xScale() {
+    return this.asProps.xScale ?? this.valueScale;
   }
-  _inherits(CompactHorizontalBarChartComponent2, _AbstractChart);
-  return _createClass(CompactHorizontalBarChartComponent2, [{
-    key: "xScale",
-    get: function get() {
-      var _this$asProps$xScale;
-      return (_this$asProps$xScale = this.asProps.xScale) !== null && _this$asProps$xScale !== void 0 ? _this$asProps$xScale : this.valueScale;
-    }
-  }, {
-    key: "yScale",
-    get: function get() {
-      var _this$asProps$yScale;
-      return (_this$asProps$yScale = this.asProps.yScale) !== null && _this$asProps$yScale !== void 0 ? _this$asProps$yScale : this.categoryScale;
-    }
-  }, {
-    key: "defaultLegendProps",
-    value: function defaultLegendProps() {
-      return {};
-    }
-  }, {
-    key: "renderChart",
-    value: function renderChart() {
-      var _this$asProps = this.asProps, x = _this$asProps.x, y = _this$asProps.y, onClickHoverRect = _this$asProps.onClickHoverRect, onClickBar = _this$asProps.onClickBar;
-      return /* @__PURE__ */ React.createElement(CompactHorizontalBar, {
-        x,
-        y
-      }, this.renderCompactHorizontalBarTooltip(), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Hover, {
-        onClick: onClickHoverRect
-      }), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Annotation, null, /* @__PURE__ */ React.createElement(CompactHorizontalBar.Label, null), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Percent, null), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Value, null)), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Bar, {
-        onClick: onClickBar
-      }, /* @__PURE__ */ React.createElement(CompactHorizontalBar.Bar.Background, null), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Bar.Fill, null)));
-    }
-  }, {
-    key: "renderCompactHorizontalBarTooltip",
-    value: function renderCompactHorizontalBarTooltip() {
-      var _this$asProps2 = this.asProps, data = _this$asProps2.data, x = _this$asProps2.x, y = _this$asProps2.y, showTooltip = _this$asProps2.showTooltip;
-      if (!showTooltip) {
-        return null;
-      }
-      return /* @__PURE__ */ React.createElement(CompactHorizontalBar.Tooltip, {
-        wMin: 100
-      }, function(_ref) {
-        var index = _ref.index;
-        return {
-          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CompactHorizontalBar.Tooltip.Title, null, data[index][y]), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Tooltip.Dot, null, data[index][x]))
-        };
-      });
-    }
-  }, {
-    key: "renderTooltip",
-    value: function renderTooltip() {
+  get yScale() {
+    return this.asProps.yScale ?? this.categoryScale;
+  }
+  defaultLegendProps() {
+    return {};
+  }
+  renderChart() {
+    const {
+      x,
+      y,
+      onClickHoverRect,
+      onClickBar
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(CompactHorizontalBar, {
+      x,
+      y
+    }, this.renderCompactHorizontalBarTooltip(), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Hover, {
+      onClick: onClickHoverRect
+    }), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Annotation, null, /* @__PURE__ */ React.createElement(CompactHorizontalBar.Label, null), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Percent, null), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Value, null)), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Bar, {
+      onClick: onClickBar
+    }, /* @__PURE__ */ React.createElement(CompactHorizontalBar.Bar.Background, null), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Bar.Fill, null)));
+  }
+  renderCompactHorizontalBarTooltip() {
+    const {
+      data,
+      x,
+      y,
+      showTooltip
+    } = this.asProps;
+    if (!showTooltip) {
       return null;
     }
-  }, {
-    key: "getLegendAriaLabel",
-    value: function getLegendAriaLabel() {
-      return this.asProps.getI18nText("legendForChart", {
-        chartType: "CompactHorizontalBar"
-      });
-    }
-  }, {
-    key: "categoryScale",
-    get: function get() {
-      var _this$asProps3 = this.asProps, _this$asProps3$margin = _this$asProps3.marginY, marginY = _this$asProps3$margin === void 0 ? 40 : _this$asProps3$margin, plotHeight = _this$asProps3.plotHeight, data = _this$asProps3.data, y = _this$asProps3.y;
-      return scaleBand().range([plotHeight - marginY, marginY]).domain(_toConsumableArray(data).reverse().map(function(d) {
-        return d[y];
-      })).paddingInner(0.6).paddingOuter(0.2);
-    }
-  }, {
-    key: "valueScale",
-    get: function get() {
-      var _this$asProps4 = this.asProps, _this$asProps4$margin = _this$asProps4.marginY, marginY = _this$asProps4$margin === void 0 ? 0 : _this$asProps4$margin, plotWidth = _this$asProps4.plotWidth;
-      var sum = _toConsumableArray(_superPropGet(CompactHorizontalBarChartComponent2, "flatValues", this, 1).values()).reduce(function(acc, d) {
-        return acc + d;
-      }, 0);
-      return scaleLinear().range([marginY, plotWidth]).domain([marginY, sum]);
-    }
-  }]);
-})(AbstractChart);
+    return /* @__PURE__ */ React.createElement(CompactHorizontalBar.Tooltip, {
+      wMin: 100
+    }, ({
+      index
+    }) => {
+      return {
+        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CompactHorizontalBar.Tooltip.Title, null, data[index][y]), /* @__PURE__ */ React.createElement(CompactHorizontalBar.Tooltip.Dot, null, data[index][x]))
+      };
+    });
+  }
+  renderTooltip() {
+    return null;
+  }
+  getLegendAriaLabel() {
+    return this.asProps.getI18nText("legendForChart", {
+      chartType: "CompactHorizontalBar"
+    });
+  }
+  get categoryScale() {
+    const {
+      marginY = 40,
+      plotHeight,
+      data,
+      y
+    } = this.asProps;
+    return scaleBand().range([plotHeight - marginY, marginY]).domain([...data].reverse().map((d) => d[y])).paddingInner(0.6).paddingOuter(0.2);
+  }
+  get valueScale() {
+    const {
+      marginY = 0,
+      plotWidth
+    } = this.asProps;
+    const sum = [...super.flatValues.values()].reduce((acc, d) => acc + d, 0);
+    return scaleLinear().range([marginY, plotWidth]).domain([marginY, sum]);
+  }
+}
 _defineProperty(CompactHorizontalBarChartComponent, "displayName", "Chart.CompactHorizontalBar");
 _defineProperty(CompactHorizontalBarChartComponent, "defaultProps", {
   direction: "column",
@@ -104,7 +87,7 @@ _defineProperty(CompactHorizontalBarChartComponent, "defaultProps", {
   showLegend: false
 });
 _defineProperty(CompactHorizontalBarChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
-var CompactHorizontalBarChart = createComponent(CompactHorizontalBarChartComponent);
+const CompactHorizontalBarChart = createComponent(CompactHorizontalBarChartComponent);
 export {
   CompactHorizontalBarChart
 };

package/lib/esm/component/Chart/DonutChart.mjs

@@ -1,99 +1,89 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Flex } from "@semcore/base-components";
 import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { Flex } from "@semcore/flex-box";
 import { Text } from "@semcore/typography";
 import { scaleLinear } from "d3-scale";
 import React from "react";
 import Donut from "../../Donut.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-var DonutChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
-  function DonutChartComponent2() {
-    _classCallCheck(this, DonutChartComponent2);
-    return _callSuper(this, DonutChartComponent2, arguments);
-  }
-  _inherits(DonutChartComponent2, _AbstractChart);
-  return _createClass(DonutChartComponent2, [{
-    key: "xScale",
-    get: function get() {
-      var xScale = this.asProps.xScale;
-      if (xScale) {
-        return xScale;
-      }
-      return scaleLinear();
+class DonutChartComponent extends AbstractChart {
+  get xScale() {
+    const {
+      xScale
+    } = this.asProps;
+    if (xScale) {
+      return xScale;
     }
-  }, {
-    key: "yScale",
-    get: function get() {
-      var yScale = this.asProps.yScale;
-      if (yScale) {
-        return yScale;
-      }
-      return scaleLinear();
+    return scaleLinear();
+  }
+  get yScale() {
+    const {
+      yScale
+    } = this.asProps;
+    if (yScale) {
+      return yScale;
     }
-  }, {
-    key: "defaultLegendProps",
-    value: function defaultLegendProps() {
+    return scaleLinear();
+  }
+  defaultLegendProps() {
+    return {
+      legendType: "Table"
+    };
+  }
+  renderChart() {
+    const {
+      innerRadius,
+      halfsize,
+      innerLabel,
+      onClickPie
+    } = this.asProps;
+    const {
+      dataDefinitions,
+      highlightedLine
+    } = this.state;
+    const checkedLegendItems = dataDefinitions.filter((item) => item.checked);
+    return /* @__PURE__ */ React.createElement(Donut, {
+      onClick: onClickPie,
+      halfsize,
+      innerRadius
+    }, checkedLegendItems.length === 0 && /* @__PURE__ */ React.createElement(Donut.EmptyData, null), checkedLegendItems.map((item, index) => {
+      return /* @__PURE__ */ React.createElement(Donut.Pie, {
+        key: item.id,
+        dataKey: item.id,
+        name: item.label,
+        color: item.color,
+        active: highlightedLine === index
+      });
+    }), innerLabel && /* @__PURE__ */ React.createElement(Donut.Label, null, innerLabel));
+  }
+  renderTooltip() {
+    const {
+      data
+    } = this.asProps;
+    const {
+      dataDefinitions
+    } = this.state;
+    return /* @__PURE__ */ React.createElement(Donut.Tooltip, null, ({
+      dataKey
+    }) => {
+      const title = dataDefinitions.find((item) => item.id === dataKey);
       return {
-        legendType: "Table"
+        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Donut.Tooltip.Title, null, (title == null ? void 0 : title.label) || dataKey), /* @__PURE__ */ React.createElement(Flex, {
+          justifyContent: "space-between"
+        }, /* @__PURE__ */ React.createElement(Text, {
+          bold: true
+        }, this.tooltipValueFormatter(data[dataKey]))))
       };
-    }
-  }, {
-    key: "renderChart",
-    value: function renderChart() {
-      var _this$asProps = this.asProps, innerRadius = _this$asProps.innerRadius, halfsize = _this$asProps.halfsize, innerLabel = _this$asProps.innerLabel, onClickPie = _this$asProps.onClickPie;
-      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
-      var checkedLegendItems = dataDefinitions.filter(function(item) {
-        return item.checked;
-      });
-      return /* @__PURE__ */ React.createElement(Donut, {
-        onClick: onClickPie,
-        halfsize,
-        innerRadius
-      }, checkedLegendItems.length === 0 && /* @__PURE__ */ React.createElement(Donut.EmptyData, null), checkedLegendItems.map(function(item, index) {
-        return /* @__PURE__ */ React.createElement(Donut.Pie, {
-          key: item.id,
-          dataKey: item.id,
-          name: item.label,
-          color: item.color,
-          active: highlightedLine === index
-        });
-      }), innerLabel && /* @__PURE__ */ React.createElement(Donut.Label, null, innerLabel));
-    }
-  }, {
-    key: "renderTooltip",
-    value: function renderTooltip() {
-      var _this = this;
-      var data = this.asProps.data;
-      var dataDefinitions = this.state.dataDefinitions;
-      return /* @__PURE__ */ React.createElement(Donut.Tooltip, null, function(_ref) {
-        var dataKey = _ref.dataKey;
-        var title = dataDefinitions.find(function(item) {
-          return item.id === dataKey;
-        });
-        return {
-          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Donut.Tooltip.Title, null, (title === null || title === void 0 ? void 0 : title.label) || dataKey), /* @__PURE__ */ React.createElement(Flex, {
-            justifyContent: "space-between"
-          }, /* @__PURE__ */ React.createElement(Text, {
-            bold: true
-          }, _this.tooltipValueFormatter(data[dataKey]))))
-        };
-      });
-    }
-  }, {
-    key: "getLegendAriaLabel",
-    value: function getLegendAriaLabel() {
-      return this.asProps.getI18nText("legendForChart", {
-        chartType: "Donut"
-      });
-    }
-  }]);
-})(AbstractChart);
+    });
+  }
+  getLegendAriaLabel() {
+    return this.asProps.getI18nText("legendForChart", {
+      chartType: "Donut"
+    });
+  }
+}
 _defineProperty(DonutChartComponent, "displayName", "Chart.Donut");
 _defineProperty(DonutChartComponent, "defaultProps", {
   direction: "row-reverse",
@@ -103,7 +93,7 @@ _defineProperty(DonutChartComponent, "defaultProps", {
   marginY: 0
 });
 _defineProperty(DonutChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
-var DonutChart = createComponent(DonutChartComponent);
+const DonutChart = createComponent(DonutChartComponent);
 export {
   DonutChart
 };

package/lib/esm/component/Chart/HistogramChart.mjs

@@ -1,10 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
@@ -16,126 +10,136 @@ import { HoverRect } from "../../Hover.mjs";
 import { minMax } from "../../utils.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-var HistogramChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
-  function HistogramChartComponent2() {
-    _classCallCheck(this, HistogramChartComponent2);
-    return _callSuper(this, HistogramChartComponent2, arguments);
-  }
-  _inherits(HistogramChartComponent2, _AbstractChart);
-  return _createClass(HistogramChartComponent2, [{
-    key: "xScale",
-    get: function get() {
-      var _this$asProps = this.asProps, xScale = _this$asProps.xScale, _this$asProps$marginY = _this$asProps.marginY, marginY = _this$asProps$marginY === void 0 ? 30 : _this$asProps$marginY, _this$asProps$marginX = _this$asProps.marginX, marginX = _this$asProps$marginX === void 0 ? 30 : _this$asProps$marginX, plotWidth = _this$asProps.plotWidth, plotHeight = _this$asProps.plotHeight, invertAxis = _this$asProps.invertAxis, data = _this$asProps.data, groupKey = _this$asProps.groupKey;
-      if (xScale) {
-        return xScale;
-      }
-      var testItem = data[0][groupKey];
-      var range = invertAxis ? [plotHeight - marginX, this.plotPadding] : [marginY, plotWidth - this.plotPadding];
-      if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
-        var _domain = minMax(data, groupKey);
-        return scaleTime(_domain, range);
-      }
-      var domain = data.map(function(item) {
-        return item[groupKey];
-      });
-      return scaleBand(domain, range).paddingInner(0.05).paddingOuter(0.2);
-    }
-  }, {
-    key: "yScale",
-    get: function get() {
-      var _this$asProps2 = this.asProps, yScale = _this$asProps2.yScale, _this$asProps2$margin = _this$asProps2.marginY, marginY = _this$asProps2$margin === void 0 ? 30 : _this$asProps2$margin, _this$asProps2$margin2 = _this$asProps2.marginX, marginX = _this$asProps2$margin2 === void 0 ? 30 : _this$asProps2$margin2, plotHeight = _this$asProps2.plotHeight, plotWidth = _this$asProps2.plotWidth, invertAxis = _this$asProps2.invertAxis, data = _this$asProps2.data;
-      var max;
-      if (this.isStack) {
-        max = data.reduce(function(max2, item) {
-          var barSum = Object.values(item).reduce(function(sum, val) {
-            if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {
-              return sum + val.getMilliseconds();
-            }
-            return sum + val;
-          }, 0);
-          if (barSum > max2) {
-            max2 = barSum;
-          }
-          return max2;
-        }, 0);
-      } else {
-        var flatValues = _superPropGet(HistogramChartComponent2, "flatValues", this, 1);
-        max = Math.max.apply(Math, _toConsumableArray(flatValues));
-      }
-      return yScale !== null && yScale !== void 0 ? yScale : scaleLinear().range(invertAxis ? [marginY, plotWidth - this.plotPadding] : [plotHeight - marginX, this.plotPadding]).domain([0, max]);
+class HistogramChartComponent extends AbstractChart {
+  get xScale() {
+    const {
+      xScale,
+      marginY = 30,
+      marginX = 30,
+      plotWidth,
+      plotHeight,
+      invertAxis,
+      data,
+      groupKey
+    } = this.asProps;
+    if (xScale) {
+      return xScale;
     }
-  }, {
-    key: "isStack",
-    get: function get() {
-      var dataDefinitions = this.state.dataDefinitions;
-      return dataDefinitions.length > 1;
+    const testItem = data[0][groupKey];
+    const range = invertAxis ? [plotHeight - marginX, this.plotPadding] : [marginY, plotWidth - this.plotPadding];
+    if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
+      const domain2 = minMax(data, groupKey);
+      return scaleTime(domain2, range);
     }
-  }, {
-    key: "renderChart",
-    value: function renderChart() {
-      var _this$asProps3 = this.asProps, groupKey = _this$asProps3.groupKey, invertAxis = _this$asProps3.invertAxis;
-      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
-      if (this.isStack) {
-        return /* @__PURE__ */ React.createElement(StackBar, {
-          x: invertAxis ? void 0 : groupKey,
-          y: invertAxis ? groupKey : void 0
-        }, dataDefinitions.map(function(item2, index) {
-          var BarComponent = invertAxis ? StackBar.HorizontalBar : StackBar.Bar;
-          var commonBarComponentProps = {
-            color: item2.color,
-            transparent: highlightedLine !== -1 && highlightedLine !== index
-          };
-          if (invertAxis) {
-            commonBarComponentProps.x = item2.id;
-          } else {
-            commonBarComponentProps.y = item2.id;
+    const domain = data.map((item) => item[groupKey]);
+    return scaleBand(domain, range).paddingInner(0.05).paddingOuter(0.2);
+  }
+  get yScale() {
+    const {
+      yScale,
+      marginY = 30,
+      marginX = 30,
+      plotHeight,
+      plotWidth,
+      invertAxis,
+      data
+    } = this.asProps;
+    let max;
+    if (this.isStack) {
+      max = data.reduce((max2, item) => {
+        const barSum = Object.values(item).reduce((sum, val) => {
+          if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {
+            return sum + val.getMilliseconds();
           }
-          return item2.checked && /* @__PURE__ */ React.createElement(BarComponent, _extends({
-            key: item2.id
-          }, commonBarComponentProps));
-        }));
-      }
-      var item = dataDefinitions[0];
-      return item.checked && /* @__PURE__ */ React.createElement(Bar, {
-        x: invertAxis ? item.id : groupKey,
-        y: invertAxis ? groupKey : item.id,
-        key: item.id,
-        color: item.color
-      });
+          return sum + val;
+        }, 0);
+        if (barSum > max2) {
+          max2 = barSum;
+        }
+        return max2;
+      }, 0);
+    } else {
+      const flatValues = super.flatValues;
+      max = Math.max(...flatValues);
     }
-  }, {
-    key: "renderTooltip",
-    value: function renderTooltip() {
-      var _this = this;
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey, invertAxis = _this$asProps4.invertAxis;
-      return /* @__PURE__ */ React.createElement(HoverRect.Tooltip, {
+    return yScale ?? scaleLinear().range(invertAxis ? [marginY, plotWidth - this.plotPadding] : [plotHeight - marginX, this.plotPadding]).domain([0, max]);
+  }
+  get isStack() {
+    const {
+      dataDefinitions
+    } = this.state;
+    return dataDefinitions.length > 1;
+  }
+  renderChart() {
+    const {
+      groupKey,
+      invertAxis
+    } = this.asProps;
+    const {
+      dataDefinitions,
+      highlightedLine
+    } = this.state;
+    if (this.isStack) {
+      return /* @__PURE__ */ React.createElement(StackBar, {
         x: invertAxis ? void 0 : groupKey,
-        y: invertAxis ? groupKey : void 0,
-        wMin: 100
-      }, function(_ref) {
-        var xIndex = _ref.xIndex, yIndex = _ref.yIndex;
-        var index = invertAxis ? yIndex : xIndex;
-        var dataItem = data[index];
-        return {
-          children: _this.getTooltipChildren({
-            Tooltip: HoverRect.Tooltip,
-            dataItem
-          })
+        y: invertAxis ? groupKey : void 0
+      }, dataDefinitions.map((item2, index) => {
+        const BarComponent = invertAxis ? StackBar.HorizontalBar : StackBar.Bar;
+        const commonBarComponentProps = {
+          color: item2.color,
+          transparent: highlightedLine !== -1 && highlightedLine !== index
         };
-      });
-    }
-  }, {
-    key: "getLegendAriaLabel",
-    value: function getLegendAriaLabel() {
-      return this.asProps.getI18nText("legendForChart", {
-        chartType: "Histogram"
-      });
+        if (invertAxis) {
+          commonBarComponentProps.x = item2.id;
+        } else {
+          commonBarComponentProps.y = item2.id;
+        }
+        return item2.checked && /* @__PURE__ */ React.createElement(BarComponent, _extends({
+          key: item2.id
+        }, commonBarComponentProps));
+      }));
     }
-  }]);
-})(AbstractChart);
+    const item = dataDefinitions[0];
+    return item.checked && /* @__PURE__ */ React.createElement(Bar, {
+      x: invertAxis ? item.id : groupKey,
+      y: invertAxis ? groupKey : item.id,
+      key: item.id,
+      color: item.color
+    });
+  }
+  renderTooltip() {
+    const {
+      data,
+      groupKey,
+      invertAxis
+    } = this.asProps;
+    return /* @__PURE__ */ React.createElement(HoverRect.Tooltip, {
+      x: invertAxis ? void 0 : groupKey,
+      y: invertAxis ? groupKey : void 0,
+      wMin: 100
+    }, ({
+      xIndex,
+      yIndex
+    }) => {
+      const index = invertAxis ? yIndex : xIndex;
+      const dataItem = data[index];
+      return {
+        children: this.getTooltipChildren({
+          Tooltip: HoverRect.Tooltip,
+          dataItem
+        })
+      };
+    });
+  }
+  getLegendAriaLabel() {
+    return this.asProps.getI18nText("legendForChart", {
+      chartType: "Histogram"
+    });
+  }
+}
 _defineProperty(HistogramChartComponent, "displayName", "Chart.Histogram");
 _defineProperty(HistogramChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
-var HistogramChart = createComponent(HistogramChartComponent);
+const HistogramChart = createComponent(HistogramChartComponent);
 export {
   HistogramChart
 };