@semcore/d3-chart 3.61.0-prerelease.5 → 3.61.0-prerelease.7

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

@@ -3,62 +3,46 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, assignProps, Component } from "@semcore/core";
-import { Box, Flex } from "@semcore/base-components";
-import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
-import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
-import { Text } from "@semcore/typography";
-import React, { Fragment } from "react";
-import "../../index.mjs";
 import { makeDataHintsContainer } from "../../a11y/hints.mjs";
 import { interpolateValue } from "../../utils.mjs";
-import "../ChartLegend/index.mjs";
-import { LegendTable } from "../ChartLegend/LegendTable/LegendTable.mjs";
+import React from "react";
+import { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
 import { LegendFlex } from "../ChartLegend/LegendFlex/LegendFlex.mjs";
-import { YAxis, XAxis } from "../../Axis.mjs";
+import { LegendTable } from "../ChartLegend/LegendTable/LegendTable.mjs";
+import { Flex } from "@semcore/flex-box";
 import Plot from "../../Plot.mjs";
-/*!__reshadow-styles__:"../../style/abstract-chart.shadow.css"*/
-var style = (
-  /*__reshadow_css_start__*/
-  (sstyled.insert(
-    /*__inner_css_start__*/
-    ".___STooltipChildrenWrapper_q3xi3_gg_{display:grid;grid-column-gap:var(--intergalactic-spacing-2x, 8px);-moz-column-gap:var(--intergalactic-spacing-2x, 8px);column-gap:var(--intergalactic-spacing-2x, 8px)}.___STooltipChildrenWrapper_q3xi3_gg_._columnsCount_2_q3xi3_gg_{grid-template-columns:auto minmax(28px,max-content)}.___STooltipChildrenWrapper_q3xi3_gg_._columnsCount_3_q3xi3_gg_{grid-template-columns:auto minmax(28px,max-content) minmax(28px,max-content)}",
-    /*__inner_css_end__*/
-    "q3xi3_gg_"
-  ), /*__reshadow_css_end__*/
-  {
-    "__STooltipChildrenWrapper": "___STooltipChildrenWrapper_q3xi3_gg_",
-    "_columnsCount_2": "_columnsCount_2_q3xi3_gg_",
-    "_columnsCount_3": "_columnsCount_3_q3xi3_gg_"
-  })
-);
-var NOT_A_VALUE = "n/a";
-var AbstractChart = /* @__PURE__ */ (function(_Component) {
+import { YAxis, XAxis } from "../../Axis.mjs";
+import { Text } from "@semcore/typography";
+import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
+var AbstractChart = /* @__PURE__ */ function(_Component) {
+  _inherits(AbstractChart2, _Component);
+  var _super = _createSuper(AbstractChart2);
   function AbstractChart2(props) {
     var _this;
     _classCallCheck(this, AbstractChart2);
-    _this = _callSuper(this, AbstractChart2, [props]);
-    _defineProperty(_this, "plotPadding", 6);
-    _defineProperty(_this, "dataHints", makeDataHintsContainer());
-    _this.setHighlightedLine = _this.setHighlightedLine.bind(_this);
-    _this.handleChangeVisible = _this.handleChangeVisible.bind(_this);
-    _this.handleMouseEnter = _this.handleMouseEnter.bind(_this);
-    _this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
-    _this.resolveColor = _this.resolveColor.bind(_this);
-    _this.tooltipValueFormatter = _this.tooltipValueFormatter.bind(_this);
-    _this.handleWithTrendChange = _this.handleWithTrendChange.bind(_this);
-    _this.state = {
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "plotPadding", 6);
+    _defineProperty(_assertThisInitialized(_this), "dataHints", makeDataHintsContainer());
+    _defineProperty(_assertThisInitialized(_this), "state", {
       dataDefinitions: _this.getDefaultDataDefinitions(),
       highlightedLine: -1,
       withTrend: false
-    };
+    });
+    _this.setHighlightedLine = _this.setHighlightedLine.bind(_assertThisInitialized(_this));
+    _this.handleChangeVisible = _this.handleChangeVisible.bind(_assertThisInitialized(_this));
+    _this.handleMouseEnter = _this.handleMouseEnter.bind(_assertThisInitialized(_this));
+    _this.handleMouseLeave = _this.handleMouseLeave.bind(_assertThisInitialized(_this));
+    _this.resolveColor = _this.resolveColor.bind(_assertThisInitialized(_this));
+    _this.tooltipValueFormatter = _this.tooltipValueFormatter.bind(_assertThisInitialized(_this));
+    _this.handleWithTrendChange = _this.handleWithTrendChange.bind(_assertThisInitialized(_this));
     return _this;
   }
-  _inherits(AbstractChart2, _Component);
-  return _createClass(AbstractChart2, [{
+  _createClass(AbstractChart2, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) {
@@ -74,7 +58,7 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
       var _this$props = this.props, data = _this$props.data, legendProps = _this$props.legendProps;
       return this.dataKeys.map(function(key, index) {
         var _legendProps$legendMa, _legendData$label, _legendData$icon, _legendData$defaultCh;
-        var legendData = legendProps === null || legendProps === void 0 || (_legendProps$legendMa = legendProps.legendMap) === null || _legendProps$legendMa === void 0 ? void 0 : _legendProps$legendMa[key];
+        var legendData = legendProps === null || legendProps === void 0 ? void 0 : (_legendProps$legendMa = legendProps.legendMap) === null || _legendProps$legendMa === void 0 ? void 0 : _legendProps$legendMa[key];
         var dataDefinition = {
           id: key,
           label: (_legendData$label = legendData === null || legendData === void 0 ? void 0 : legendData.label) !== null && _legendData$label !== void 0 ? _legendData$label : key,
@@ -93,6 +77,7 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         if (legendData && "columns" in legendData) {
           dataDefinition.columns = legendData.columns || [];
         } else if (!Array.isArray(data)) {
+          var _value;
           var value = void 0;
           var dataValue = data[key];
           if (data instanceof Map) {
@@ -114,7 +99,7 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
           }, percent !== void 0 ? "".concat(percent, "%") : ""), /* @__PURE__ */ React.createElement(Text, {
             key: "".concat(key, "_value"),
             use: value ? "primary" : "secondary"
-          }, value !== null && value !== void 0 ? value : NOT_A_VALUE)];
+          }, (_value = value) !== null && _value !== void 0 ? _value : "n/a")];
         }
         return dataDefinition;
       });
@@ -172,8 +157,8 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         if (!groupKey && typeof item === "number") {
           result.add(item);
         } else {
-          Object.entries(item).forEach(function(_ref5) {
-            var _ref6 = _slicedToArray(_ref5, 2), key = _ref6[0], value = _ref6[1];
+          Object.entries(item).forEach(function(_ref3) {
+            var _ref4 = _slicedToArray(_ref3, 2), key = _ref4[0], value = _ref4[1];
             if (key !== groupKey && typeof value === "number") {
               result.add(value);
             }
@@ -197,8 +182,8 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         return _max;
       }
       var max = data.reduce(function(max2, item) {
-        var barSum = Object.entries(item).reduce(function(sum, _ref7) {
-          var _ref8 = _slicedToArray(_ref7, 2), key = _ref8[0], val = _ref8[1];
+        var barSum = Object.entries(item).reduce(function(sum, _ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2), key = _ref6[0], val = _ref6[1];
           if (key === groupKey) {
             return sum;
           }
@@ -221,26 +206,16 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
     key: "totalValue",
     value: function totalValue(data) {
       var dataDefinitions = this.state.dataDefinitions;
-      var allNotAValue = true;
       var total = dataDefinitions.reduce(function(sum, legendItem) {
         var item = data[legendItem.id];
-        if (item === null) {
-          allNotAValue = false;
-          return sum;
-        }
         if (typeof item === "number") {
-          allNotAValue = false;
           return sum + item;
         }
         if (item instanceof Date && !Number.isNaN(item.getMilliseconds())) {
-          allNotAValue = false;
           return sum + item.getMilliseconds();
         }
         return sum;
       }, 0);
-      if (allNotAValue) {
-        return Number.NaN;
-      }
       return total;
     }
   }, {
@@ -308,7 +283,7 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         return tooltipValueFormatter2(value);
       }
       if (value === void 0 || value === interpolateValue) {
-        return NOT_A_VALUE;
+        return "n/a";
       }
       if (value === null) {
         return "0";
@@ -330,26 +305,24 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
     value: function renderLegend() {
       var _lProps$direction;
       var _this$asProps5 = this.asProps, legendProps = _this$asProps5.legendProps, direction = _this$asProps5.direction, showLegend = _this$asProps5.showLegend, patterns = _this$asProps5.patterns;
-      if (
-        // we hide Legend for one item on chart except not manually set to show.
-        showLegend === void 0 && this.dataKeys.length === 1 || showLegend === false
-      ) {
+      if (!showLegend || // we hide Legend for one item on chart except not manually set to show.
+      this.dataKeys.length === 1 && showLegend === true) {
         return null;
       }
       var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, withTrend = _this$state.withTrend;
       var lProps = _objectSpread(_objectSpread({}, this.defaultLegendProps()), legendProps);
       var commonLegendProps = {
-        "dataHints": this.dataHints,
-        "items": dataDefinitions,
-        "size": lProps.size,
-        "shape": lProps.shape,
-        "w": lProps.w,
-        "h": lProps.h,
+        dataHints: this.dataHints,
+        items: dataDefinitions,
+        size: lProps.size,
+        shape: lProps.shape,
+        w: lProps.w,
+        h: lProps.h,
         patterns,
-        "direction": (_lProps$direction = lProps.direction) !== null && _lProps$direction !== void 0 ? _lProps$direction : direction === "row" || direction === "row-reverse" ? "column" : "row",
-        "onChangeVisibleItem": lProps.disableSelectItems ? void 0 : callAllEventHandlers(lProps.onChangeVisibleItem, this.handleChangeVisible),
-        "onMouseEnterItem": lProps.disableHoverItems ? void 0 : callAllEventHandlers(lProps.onMouseEnterItem, this.handleMouseEnter),
-        "onMouseLeaveItem": lProps.disableHoverItems ? void 0 : callAllEventHandlers(lProps.onMouseLeaveItem, this.handleMouseLeave),
+        direction: (_lProps$direction = lProps.direction) !== null && _lProps$direction !== void 0 ? _lProps$direction : direction === "row" || direction === "row-reverse" ? "column" : "row",
+        onChangeVisibleItem: lProps.disableSelectItems ? void 0 : callAllEventHandlers(lProps.onChangeVisibleItem, this.handleChangeVisible),
+        onMouseEnterItem: lProps.disableHoverItems ? void 0 : callAllEventHandlers(lProps.onMouseEnterItem, this.handleMouseEnter),
+        onMouseLeaveItem: lProps.disableHoverItems ? void 0 : callAllEventHandlers(lProps.onMouseLeaveItem, this.handleMouseLeave),
         "aria-label": this.getLegendAriaLabel()
       };
       if (lProps.legendType === "Table") {
@@ -369,95 +342,46 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
   }, {
     key: "renderAxis",
     value: function renderAxis() {
-      var _this$asProps6 = this.asProps, invertAxis = _this$asProps6.invertAxis, showXAxis = _this$asProps6.showXAxis, showYAxis = _this$asProps6.showYAxis, data = _this$asProps6.data, axisXValueFormatter = _this$asProps6.axisXValueFormatter, axisYValueFormatter = _this$asProps6.axisYValueFormatter, multilineXTicks = _this$asProps6.multilineXTicks, multilineYTicks = _this$asProps6.multilineYTicks;
+      var _this$asProps6 = this.asProps, invertAxis = _this$asProps6.invertAxis, showXAxis = _this$asProps6.showXAxis, showYAxis = _this$asProps6.showYAxis, data = _this$asProps6.data, axisXValueFormatter = _this$asProps6.axisXValueFormatter, axisYValueFormatter = _this$asProps6.axisYValueFormatter;
       if (!Array.isArray(data)) {
         return null;
       }
       var xTicks = this.xTicks;
       var yTicks = this.yTicks;
-      var childrenX = axisXValueFormatter ? function(_ref9) {
-        var value = _ref9.value;
+      var childrenX = axisXValueFormatter ? function(_ref7) {
+        var value = _ref7.value;
         return {
           children: axisXValueFormatter(value)
         };
       } : void 0;
-      var childrenY = axisYValueFormatter ? function(_ref0) {
-        var value = _ref0.value;
+      var childrenY = axisYValueFormatter ? function(_ref8) {
+        var value = _ref8.value;
         return {
           children: axisYValueFormatter(value)
         };
       } : void 0;
       return /* @__PURE__ */ React.createElement(React.Fragment, null, showYAxis && /* @__PURE__ */ React.createElement(YAxis, null, yTicks ? /* @__PURE__ */ React.createElement(YAxis.Ticks, {
-        multiline: multilineYTicks,
         ticks: yTicks
-      }, childrenY) : /* @__PURE__ */ React.createElement(YAxis.Ticks, {
-        multiline: multilineYTicks
-      }, childrenY), invertAxis !== true && (yTicks ? /* @__PURE__ */ React.createElement(YAxis.Grid, {
+      }, childrenY) : /* @__PURE__ */ React.createElement(YAxis.Ticks, null, childrenY), invertAxis !== true && (yTicks ? /* @__PURE__ */ React.createElement(YAxis.Grid, {
         ticks: yTicks
       }) : /* @__PURE__ */ React.createElement(YAxis.Grid, null))), showXAxis && /* @__PURE__ */ React.createElement(XAxis, null, xTicks ? /* @__PURE__ */ React.createElement(XAxis.Ticks, {
-        multiline: multilineXTicks,
         ticks: xTicks
-      }, childrenX) : /* @__PURE__ */ React.createElement(XAxis.Ticks, {
-        multiline: multilineXTicks
-      }, childrenX), invertAxis === true && (xTicks ? /* @__PURE__ */ React.createElement(XAxis.Grid, {
+      }, childrenX) : /* @__PURE__ */ React.createElement(XAxis.Ticks, null, childrenX), invertAxis === true && (xTicks ? /* @__PURE__ */ React.createElement(XAxis.Grid, {
         ticks: xTicks
       }) : /* @__PURE__ */ React.createElement(XAxis.Grid, null))));
     }
-  }, {
-    key: "getTooltipChildren",
-    value: function getTooltipChildren(options) {
-      var _ref = this.asProps, _ref3, _dataItem, _this3 = this;
-      var STooltipChildrenWrapper = Box;
-      var Tooltip = options.Tooltip, dataItem = options.dataItem;
-      var _this$asProps7 = this.asProps, styles = _this$asProps7.styles, groupKey = _this$asProps7.groupKey;
-      var dataDefinitions = this.state.dataDefinitions;
-      var title = (_dataItem = dataItem[groupKey]) === null || _dataItem === void 0 ? void 0 : _dataItem.toString();
-      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(Flex, _ref3.cn("Flex", {
-        "direction": "column"
-      }), title && /* @__PURE__ */ React.createElement(Tooltip.Title, null, title), /* @__PURE__ */ React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", _objectSpread({}, assignProps({
-        "columnsCount": "2",
-        "__excludeProps": ["data"]
-      }, _ref))), dataDefinitions.map(function(item) {
-        return item.checked && /* @__PURE__ */ React.createElement(Fragment, {
-          key: item.id
-        }, /* @__PURE__ */ React.createElement(Tooltip.Dot, {
-          mr: 2,
-          color: item.color
-        }, item.label), /* @__PURE__ */ React.createElement(Text, {
-          textAlign: "end",
-          bold: true
-        }, _this3.tooltipValueFormatter(dataItem[item.id])));
-      }), this.renderTooltipTotalLine(dataItem)));
-    }
-  }, {
-    key: "renderTooltipTotalLine",
-    value: function renderTooltipTotalLine(dataItem) {
-      var showTotalInTooltip = this.asProps.showTotalInTooltip;
-      if (!showTotalInTooltip) {
-        return null;
-      }
-      var total = this.totalValue(dataItem);
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, {
-        mt: 2,
-        mr: 2
-      }, "Total"), /* @__PURE__ */ React.createElement(Text, {
-        mt: 2,
-        textAlign: "end",
-        bold: true
-      }, Number.isNaN(total) ? NOT_A_VALUE : total));
-    }
   }, {
     key: "render",
     value: function render() {
-      var _ref2 = this.asProps, _ref4;
+      var _ref = this.asProps, _ref2;
       var SChart = Flex;
-      var _this$asProps8 = this.asProps, styles = _this$asProps8.styles, plotWidth = _this$asProps8.plotWidth, plotHeight = _this$asProps8.plotHeight, data = _this$asProps8.data, patterns = _this$asProps8.patterns, a11yAltTextConfig = _this$asProps8.a11yAltTextConfig, duration = _this$asProps8.duration, eventEmitter = _this$asProps8.eventEmitter, showTooltip = _this$asProps8.showTooltip;
+      var _this$asProps7 = this.asProps, styles = _this$asProps7.styles, plotWidth = _this$asProps7.plotWidth, plotHeight = _this$asProps7.plotHeight, data = _this$asProps7.data, patterns = _this$asProps7.patterns, a11yAltTextConfig = _this$asProps7.a11yAltTextConfig, duration = _this$asProps7.duration;
       var _extractAriaProps = extractAriaProps(this.asProps), extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref4.cn("SChart", _objectSpread({}, assignProps({
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref2.cn("SChart", _objectSpread({}, assignProps({
         "gap": 5,
-        "__excludeProps": ["data", "eventEmitter"],
+        "__excludeProps": ["data"],
         "role": "group"
-      }, _ref2))), this.renderLegend(), /* @__PURE__ */ React.createElement(Plot, _ref4.cn("Plot", _objectSpread({
+      }, _ref))), this.renderLegend(), /* @__PURE__ */ React.createElement(Plot, _ref2.cn("Plot", _objectSpread({
         "data": data,
         "scale": [this.xScale, this.yScale],
         "width": plotWidth,
@@ -465,20 +389,20 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         "dataHints": this.dataHints,
         "a11yAltTextConfig": a11yAltTextConfig,
         "patterns": patterns,
-        "duration": duration,
-        "eventEmitter": eventEmitter
-      }, extractedAriaProps)), this.renderAxis(), !showTooltip ? null : this.renderTooltip(), this.renderChart()));
+        "duration": duration
+      }, extractedAriaProps)), this.renderAxis(), this.renderTooltip(), this.renderChart()));
     }
   }]);
-})(Component);
-_defineProperty(AbstractChart, "style", style);
+  return AbstractChart2;
+}(Component);
+_defineProperty(AbstractChart, "style", {});
 _defineProperty(AbstractChart, "defaultProps", {
   direction: "column",
   showXAxis: true,
   showYAxis: true,
-  showTooltip: true
+  showTooltip: true,
+  showLegend: true
 });
 export {
-  AbstractChart,
-  NOT_A_VALUE
+  AbstractChart
 };

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

@@ -1,28 +1,31 @@
 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 _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent } from "@semcore/core";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { scaleTime, scaleLinear } from "d3-scale";
 import React from "react";
-import "../../index.mjs";
-import { AbstractChart } from "./AbstractChart.mjs";
-import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-import { minMax } from "../../utils.mjs";
-import StackedArea from "../../StackedArea.mjs";
+import createComponent from "@semcore/core";
+import { scaleTime, scaleLinear } from "d3-scale";
 import Area from "../../Area.mjs";
+import StackedArea from "../../StackedArea.mjs";
 import { HoverLine } from "../../Hover.mjs";
-var AreaChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
+import { minMax } from "../../utils.mjs";
+import { AbstractChart } from "./AbstractChart.mjs";
+import { Flex, Box } from "@semcore/flex-box";
+import { Text } from "@semcore/typography";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var AreaChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(AreaChartComponent2, _AbstractChart);
+  var _super = _createSuper(AreaChartComponent2);
   function AreaChartComponent2() {
     _classCallCheck(this, AreaChartComponent2);
-    return _callSuper(this, AreaChartComponent2, arguments);
+    return _super.apply(this, arguments);
   }
-  _inherits(AreaChartComponent2, _AbstractChart);
-  return _createClass(AreaChartComponent2, [{
+  _createClass(AreaChartComponent2, [{
     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 ? 40 : _this$asProps$marginY, plotWidth = _this$asProps.plotWidth, data = _this$asProps.data, groupKey = _this$asProps.groupKey;
@@ -41,18 +44,20 @@ var AreaChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     key: "yScale",
     get: function get() {
       var _this$asProps2 = this.asProps, yScale = _this$asProps2.yScale, _this$asProps2$margin = _this$asProps2.marginX, marginX = _this$asProps2$margin === void 0 ? 24 : _this$asProps2$margin, plotHeight = _this$asProps2.plotHeight, stacked = _this$asProps2.stacked;
+      _this$asProps2.data;
+      _this$asProps2.groupKey;
       if (yScale) {
         return yScale;
       }
-      var flatValues = _superPropGet(AreaChartComponent2, "flatValues", this, 1);
+      var flatValues = _get(_getPrototypeOf(AreaChartComponent2.prototype), "flatValues", this);
       var min = Math.min.apply(Math, _toConsumableArray(flatValues));
-      var max = stacked ? _superPropGet(AreaChartComponent2, "maxStackedValue", this, 1) : Math.max.apply(Math, _toConsumableArray(flatValues));
+      var max = stacked ? _get(_getPrototypeOf(AreaChartComponent2.prototype), "maxStackedValue", this) : Math.max.apply(Math, _toConsumableArray(flatValues));
       return scaleLinear().range([plotHeight - marginX, this.plotPadding]).domain([min, max]);
     }
   }, {
     key: "renderChart",
     value: function renderChart() {
-      var _this$asProps3 = this.asProps, groupKey = _this$asProps3.groupKey, curve = _this$asProps3.curve, showDots = _this$asProps3.showDots, stacked = _this$asProps3.stacked, onClickArea = _this$asProps3.onClickArea;
+      var _this$asProps3 = this.asProps, groupKey = _this$asProps3.groupKey, curve = _this$asProps3.curve, showDots = _this$asProps3.showDots, stacked = _this$asProps3.stacked;
       var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
       if (stacked) {
         return /* @__PURE__ */ React.createElement(StackedArea, {
@@ -64,8 +69,7 @@ var AreaChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
             key: item.id,
             color: item.color,
             transparent: highlightedLine !== -1 && highlightedLine !== index,
-            curve,
-            onClick: onClickArea
+            curve
           }, showDots && /* @__PURE__ */ React.createElement(StackedArea.Area.Dots, {
             display: true
           }));
@@ -78,8 +82,7 @@ var AreaChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
           key: item.id,
           color: item.color,
           transparent: highlightedLine !== -1 && highlightedLine !== index,
-          curve,
-          onClick: onClickArea
+          curve
         }, showDots && /* @__PURE__ */ React.createElement(Area.Dots, {
           display: true
         }));
@@ -89,18 +92,38 @@ var AreaChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     key: "renderTooltip",
     value: function renderTooltip() {
       var _this = this;
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey;
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey, showTotalInTooltip = _this$asProps4.showTotalInTooltip, showTooltip = _this$asProps4.showTooltip;
+      var dataDefinitions = this.state.dataDefinitions;
+      if (!showTooltip) {
+        return null;
+      }
       return /* @__PURE__ */ React.createElement(HoverLine.Tooltip, {
         x: groupKey,
         wMin: 100
       }, function(_ref) {
+        var _dataItem$groupKey;
         var xIndex = _ref.xIndex;
         var dataItem = data[xIndex];
+        var total = _this.totalValue(dataItem);
         return {
-          children: _this.getTooltipChildren({
-            Tooltip: HoverLine.Tooltip,
-            dataItem
-          })
+          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HoverLine.Tooltip.Title, null, (_dataItem$groupKey = dataItem[groupKey]) === null || _dataItem$groupKey === void 0 ? void 0 : _dataItem$groupKey.toString()), dataDefinitions.map(function(item) {
+            return item.checked && /* @__PURE__ */ React.createElement(Flex, {
+              justifyContent: "space-between",
+              key: item.id
+            }, /* @__PURE__ */ React.createElement(HoverLine.Tooltip.Dot, {
+              mr: 4,
+              color: item.color
+            }, item.label), /* @__PURE__ */ React.createElement(Text, {
+              bold: true
+            }, _this.tooltipValueFormatter(dataItem[item.id])));
+          }), showTotalInTooltip === true && /* @__PURE__ */ React.createElement(Flex, {
+            mt: 2,
+            justifyContent: "space-between"
+          }, /* @__PURE__ */ React.createElement(Box, {
+            mr: 4
+          }, "Total"), /* @__PURE__ */ React.createElement(Text, {
+            bold: true
+          }, total)))
         };
       });
     }
@@ -112,7 +135,8 @@ var AreaChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
       });
     }
   }]);
-})(AbstractChart);
+  return AreaChartComponent2;
+}(AbstractChart);
 _defineProperty(AreaChartComponent, "displayName", "Chart.Area");
 _defineProperty(AreaChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
 var AreaChart = createComponent(AreaChartComponent);