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

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

@@ -3,46 +3,62 @@ 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 React from "react";
-import { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
-import { LegendFlex } from "../ChartLegend/LegendFlex/LegendFlex.mjs";
+import "../ChartLegend/index.mjs";
 import { LegendTable } from "../ChartLegend/LegendTable/LegendTable.mjs";
-import { Flex } from "@semcore/flex-box";
-import Plot from "../../Plot.mjs";
+import { LegendFlex } from "../ChartLegend/LegendFlex/LegendFlex.mjs";
 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);
+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) {
   function AbstractChart2(props) {
     var _this;
     _classCallCheck(this, AbstractChart2);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "plotPadding", 6);
-    _defineProperty(_assertThisInitialized(_this), "dataHints", makeDataHintsContainer());
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _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 = {
       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;
   }
-  _createClass(AbstractChart2, [{
+  _inherits(AbstractChart2, _Component);
+  return _createClass(AbstractChart2, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) {
@@ -58,7 +74,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 ? void 0 : (_legendProps$legendMa = legendProps.legendMap) === null || _legendProps$legendMa === void 0 ? void 0 : _legendProps$legendMa[key];
+        var legendData = legendProps === null || legendProps === 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,
@@ -77,7 +93,6 @@ 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) {
@@ -99,7 +114,7 @@ var AbstractChart = /* @__PURE__ */ function(_Component) {
           }, percent !== void 0 ? "".concat(percent, "%") : ""), /* @__PURE__ */ React.createElement(Text, {
             key: "".concat(key, "_value"),
             use: value ? "primary" : "secondary"
-          }, (_value = value) !== null && _value !== void 0 ? _value : "n/a")];
+          }, value !== null && value !== void 0 ? value : NOT_A_VALUE)];
         }
         return dataDefinition;
       });
@@ -157,8 +172,8 @@ var AbstractChart = /* @__PURE__ */ function(_Component) {
         if (!groupKey && typeof item === "number") {
           result.add(item);
         } else {
-          Object.entries(item).forEach(function(_ref3) {
-            var _ref4 = _slicedToArray(_ref3, 2), key = _ref4[0], value = _ref4[1];
+          Object.entries(item).forEach(function(_ref5) {
+            var _ref6 = _slicedToArray(_ref5, 2), key = _ref6[0], value = _ref6[1];
             if (key !== groupKey && typeof value === "number") {
               result.add(value);
             }
@@ -182,8 +197,8 @@ var AbstractChart = /* @__PURE__ */ function(_Component) {
         return _max;
       }
       var max = data.reduce(function(max2, item) {
-        var barSum = Object.entries(item).reduce(function(sum, _ref5) {
-          var _ref6 = _slicedToArray(_ref5, 2), key = _ref6[0], val = _ref6[1];
+        var barSum = Object.entries(item).reduce(function(sum, _ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2), key = _ref8[0], val = _ref8[1];
           if (key === groupKey) {
             return sum;
           }
@@ -206,16 +221,26 @@ 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;
     }
   }, {
@@ -283,7 +308,7 @@ var AbstractChart = /* @__PURE__ */ function(_Component) {
         return tooltipValueFormatter2(value);
       }
       if (value === void 0 || value === interpolateValue) {
-        return "n/a";
+        return NOT_A_VALUE;
       }
       if (value === null) {
         return "0";
@@ -305,24 +330,26 @@ 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 (!showLegend || // we hide Legend for one item on chart except not manually set to show.
-      this.dataKeys.length === 1 && showLegend === true) {
+      if (
+        // we hide Legend for one item on chart except not manually set to show.
+        showLegend === void 0 && this.dataKeys.length === 1 || showLegend === false
+      ) {
         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") {
@@ -342,46 +369,95 @@ 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;
+      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;
       if (!Array.isArray(data)) {
         return null;
       }
       var xTicks = this.xTicks;
       var yTicks = this.yTicks;
-      var childrenX = axisXValueFormatter ? function(_ref7) {
-        var value = _ref7.value;
+      var childrenX = axisXValueFormatter ? function(_ref9) {
+        var value = _ref9.value;
         return {
           children: axisXValueFormatter(value)
         };
       } : void 0;
-      var childrenY = axisYValueFormatter ? function(_ref8) {
-        var value = _ref8.value;
+      var childrenY = axisYValueFormatter ? function(_ref0) {
+        var value = _ref0.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, null, childrenY), invertAxis !== true && (yTicks ? /* @__PURE__ */ React.createElement(YAxis.Grid, {
+      }, childrenY) : /* @__PURE__ */ React.createElement(YAxis.Ticks, {
+        multiline: multilineYTicks
+      }, 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, null, childrenX), invertAxis === true && (xTicks ? /* @__PURE__ */ React.createElement(XAxis.Grid, {
+      }, childrenX) : /* @__PURE__ */ React.createElement(XAxis.Ticks, {
+        multiline: multilineXTicks
+      }, 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 _ref = this.asProps, _ref2;
+      var _ref2 = this.asProps, _ref4;
       var SChart = Flex;
-      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 _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 _extractAriaProps = extractAriaProps(this.asProps), extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref2.cn("SChart", _objectSpread({}, assignProps({
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref4.cn("SChart", _objectSpread({}, assignProps({
         "gap": 5,
-        "__excludeProps": ["data"],
+        "__excludeProps": ["data", "eventEmitter"],
         "role": "group"
-      }, _ref))), this.renderLegend(), /* @__PURE__ */ React.createElement(Plot, _ref2.cn("Plot", _objectSpread({
+      }, _ref2))), this.renderLegend(), /* @__PURE__ */ React.createElement(Plot, _ref4.cn("Plot", _objectSpread({
         "data": data,
         "scale": [this.xScale, this.yScale],
         "width": plotWidth,
@@ -389,20 +465,20 @@ var AbstractChart = /* @__PURE__ */ function(_Component) {
         "dataHints": this.dataHints,
         "a11yAltTextConfig": a11yAltTextConfig,
         "patterns": patterns,
-        "duration": duration
-      }, extractedAriaProps)), this.renderAxis(), this.renderTooltip(), this.renderChart()));
+        "duration": duration,
+        "eventEmitter": eventEmitter
+      }, extractedAriaProps)), this.renderAxis(), !showTooltip ? null : this.renderTooltip(), this.renderChart()));
     }
   }]);
-  return AbstractChart2;
-}(Component);
-_defineProperty(AbstractChart, "style", {});
+})(Component);
+_defineProperty(AbstractChart, "style", style);
 _defineProperty(AbstractChart, "defaultProps", {
   direction: "column",
   showXAxis: true,
   showYAxis: true,
-  showTooltip: true,
-  showLegend: true
+  showTooltip: true
 });
 export {
-  AbstractChart
+  AbstractChart,
+  NOT_A_VALUE
 };

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

@@ -1,31 +1,28 @@
 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 _get from "@babel/runtime/helpers/esm/get";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+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 _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from "react";
-import createComponent from "@semcore/core";
+import { createComponent } from "@semcore/core";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { scaleTime, scaleLinear } from "d3-scale";
-import Area from "../../Area.mjs";
-import StackedArea from "../../StackedArea.mjs";
-import { HoverLine } from "../../Hover.mjs";
-import { minMax } from "../../utils.mjs";
+import React from "react";
+import "../../index.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);
+import { minMax } from "../../utils.mjs";
+import StackedArea from "../../StackedArea.mjs";
+import Area from "../../Area.mjs";
+import { HoverLine } from "../../Hover.mjs";
+var AreaChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   function AreaChartComponent2() {
     _classCallCheck(this, AreaChartComponent2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, AreaChartComponent2, arguments);
   }
-  _createClass(AreaChartComponent2, [{
+  _inherits(AreaChartComponent2, _AbstractChart);
+  return _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;
@@ -44,20 +41,18 @@ 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 = _get(_getPrototypeOf(AreaChartComponent2.prototype), "flatValues", this);
+      var flatValues = _superPropGet(AreaChartComponent2, "flatValues", this, 1);
       var min = Math.min.apply(Math, _toConsumableArray(flatValues));
-      var max = stacked ? _get(_getPrototypeOf(AreaChartComponent2.prototype), "maxStackedValue", this) : Math.max.apply(Math, _toConsumableArray(flatValues));
+      var max = stacked ? _superPropGet(AreaChartComponent2, "maxStackedValue", this, 1) : 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;
+      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$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
       if (stacked) {
         return /* @__PURE__ */ React.createElement(StackedArea, {
@@ -69,7 +64,8 @@ var AreaChartComponent = /* @__PURE__ */ function(_AbstractChart) {
             key: item.id,
             color: item.color,
             transparent: highlightedLine !== -1 && highlightedLine !== index,
-            curve
+            curve,
+            onClick: onClickArea
           }, showDots && /* @__PURE__ */ React.createElement(StackedArea.Area.Dots, {
             display: true
           }));
@@ -82,7 +78,8 @@ var AreaChartComponent = /* @__PURE__ */ function(_AbstractChart) {
           key: item.id,
           color: item.color,
           transparent: highlightedLine !== -1 && highlightedLine !== index,
-          curve
+          curve,
+          onClick: onClickArea
         }, showDots && /* @__PURE__ */ React.createElement(Area.Dots, {
           display: true
         }));
@@ -92,38 +89,18 @@ 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, showTotalInTooltip = _this$asProps4.showTotalInTooltip, showTooltip = _this$asProps4.showTooltip;
-      var dataDefinitions = this.state.dataDefinitions;
-      if (!showTooltip) {
-        return null;
-      }
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey;
       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: /* @__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)))
+          children: _this.getTooltipChildren({
+            Tooltip: HoverLine.Tooltip,
+            dataItem
+          })
         };
       });
     }
@@ -135,8 +112,7 @@ var AreaChartComponent = /* @__PURE__ */ function(_AbstractChart) {
       });
     }
   }]);
-  return AreaChartComponent2;
-}(AbstractChart);
+})(AbstractChart);
 _defineProperty(AreaChartComponent, "displayName", "Chart.Area");
 _defineProperty(AreaChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
 var AreaChart = createComponent(AreaChartComponent);