@semcore/d3-chart 3.60.0 → 3.60.1

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

@@ -0,0 +1,408 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 _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 { 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 { LegendTable } from "../ChartLegend/LegendTable/LegendTable.mjs";
+import { Flex } from "@semcore/flex-box";
+import Plot from "../../Plot.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);
+  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", {
+      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, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) {
+        this.setState({
+          dataDefinitions: this.getDefaultDataDefinitions()
+        });
+      }
+    }
+  }, {
+    key: "getDefaultDataDefinitions",
+    value: function getDefaultDataDefinitions() {
+      var _this2 = this;
+      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 dataDefinition = {
+          id: key,
+          label: (_legendData$label = legendData === null || legendData === void 0 ? void 0 : legendData.label) !== null && _legendData$label !== void 0 ? _legendData$label : key,
+          icon: (_legendData$icon = legendData === null || legendData === void 0 ? void 0 : legendData.icon) !== null && _legendData$icon !== void 0 ? _legendData$icon : void 0,
+          checked: (_legendData$defaultCh = legendData === null || legendData === void 0 ? void 0 : legendData.defaultChecked) !== null && _legendData$defaultCh !== void 0 ? _legendData$defaultCh : true,
+          color: _this2.resolveColor(key, index),
+          columns: []
+        };
+        if (legendData !== null && legendData !== void 0 && legendData.additionalInfo || legendData !== null && legendData !== void 0 && legendData.count) {
+          dataDefinition.additionalInfo = legendData.additionalInfo ? {
+            label: legendData.additionalInfo
+          } : legendData.count ? {
+            count: legendData.count
+          } : void 0;
+        }
+        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) {
+            dataValue = data.get(key);
+          }
+          if (dataValue !== interpolateValue) {
+            value = Number(dataValue);
+          }
+          var total = Object.values(data).reduce(function(sum, i) {
+            if (i !== interpolateValue) {
+              return sum + Number(i);
+            }
+            return sum;
+          }, 0);
+          var percent = value !== void 0 ? (value / total * 100).toFixed(2) : void 0;
+          dataDefinition.columns = [/* @__PURE__ */ React.createElement(Text, {
+            key: "".concat(key, "_percent"),
+            use: "secondary"
+          }, 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")];
+        }
+        return dataDefinition;
+      });
+    }
+  }, {
+    key: "dataKeys",
+    get: function get() {
+      var _this$props2 = this.props, data = _this$props2.data, groupKey = _this$props2.groupKey;
+      var dataKeys;
+      if (Array.isArray(data) && groupKey) {
+        dataKeys = Object.keys(data[0]).filter(function(key) {
+          return key !== groupKey;
+        });
+      } else {
+        dataKeys = Object.keys(data);
+      }
+      return dataKeys;
+    }
+  }, {
+    key: "xTicks",
+    get: function get() {
+      var _this$asProps = this.asProps, data = _this$asProps.data, invertAxis = _this$asProps.invertAxis, xTicksCount = _this$asProps.xTicksCount, yTicksCount = _this$asProps.yTicksCount;
+      var scale = this.xScale;
+      if (Array.isArray(data) && "ticks" in scale) {
+        if (invertAxis && yTicksCount) {
+          return scale.ticks(yTicksCount);
+        } else if (xTicksCount) {
+          return scale.ticks(xTicksCount);
+        }
+        return void 0;
+      }
+      return void 0;
+    }
+  }, {
+    key: "yTicks",
+    get: function get() {
+      var _this$asProps2 = this.asProps, data = _this$asProps2.data, invertAxis = _this$asProps2.invertAxis, xTicksCount = _this$asProps2.xTicksCount, yTicksCount = _this$asProps2.yTicksCount;
+      var scale = this.yScale;
+      if (Array.isArray(data) && "ticks" in scale) {
+        if (invertAxis && xTicksCount) {
+          return scale.ticks(xTicksCount);
+        } else if (yTicksCount) {
+          return scale.ticks(yTicksCount);
+        }
+        return void 0;
+      }
+      return void 0;
+    }
+  }, {
+    key: "flatValues",
+    get: function get() {
+      var _this$asProps3 = this.asProps, data = _this$asProps3.data, groupKey = _this$asProps3.groupKey;
+      var values = Array.isArray(data) ? data : Object.values(data);
+      var flatValues = values.reduce(function(result, item) {
+        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];
+            if (key !== groupKey && typeof value === "number") {
+              result.add(value);
+            }
+          });
+        }
+        return result;
+      }, /* @__PURE__ */ new Set());
+      return flatValues;
+    }
+  }, {
+    key: "maxStackedValue",
+    get: function get() {
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey;
+      if (!Array.isArray(data)) {
+        var _max = Object.values(data).reduce(function(sum, val) {
+          if (typeof val === "number") {
+            sum = sum + val;
+          }
+          return sum;
+        }, 0);
+        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];
+          if (key === groupKey) {
+            return sum;
+          }
+          if (typeof val === "number") {
+            return sum + val;
+          }
+          if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {
+            return sum + val.getMilliseconds();
+          }
+          return sum;
+        }, 0);
+        if (barSum > max2) {
+          max2 = barSum;
+        }
+        return max2;
+      }, 0);
+      return max;
+    }
+  }, {
+    key: "totalValue",
+    value: function totalValue(data) {
+      var dataDefinitions = this.state.dataDefinitions;
+      var total = dataDefinitions.reduce(function(sum, legendItem) {
+        var item = data[legendItem.id];
+        if (typeof item === "number") {
+          return sum + item;
+        }
+        if (item instanceof Date && !Number.isNaN(item.getMilliseconds())) {
+          return sum + item.getMilliseconds();
+        }
+        return sum;
+      }, 0);
+      return total;
+    }
+  }, {
+    key: "getValueScale",
+    value: function getValueScale(values) {
+      var max = Math.max.apply(Math, _toConsumableArray(values));
+      var min = Math.min.apply(Math, _toConsumableArray(values));
+      var avg = (max + min) / 2;
+      var count = Math.round(Math.log10(avg));
+      var valueScale = 100 / Math.pow(10, count);
+      return valueScale;
+    }
+  }, {
+    key: "setHighlightedLine",
+    value: function setHighlightedLine(index) {
+      this.setState({
+        highlightedLine: index
+      });
+    }
+  }, {
+    key: "handleChangeVisible",
+    value: function handleChangeVisible(id, isVisible) {
+      this.setState(function(prevState) {
+        var dataDefinitions = prevState.dataDefinitions.map(function(item) {
+          if (item.id === id) {
+            item.checked = isVisible;
+          }
+          return item;
+        });
+        return {
+          dataDefinitions
+        };
+      });
+    }
+  }, {
+    key: "handleWithTrendChange",
+    value: function handleWithTrendChange(isVisible) {
+      this.setState({
+        withTrend: isVisible
+      });
+    }
+  }, {
+    key: "handleMouseEnter",
+    value: function handleMouseEnter(id) {
+      this.setHighlightedLine(this.state.dataDefinitions.findIndex(function(line) {
+        return line.id === id;
+      }));
+    }
+  }, {
+    key: "handleMouseLeave",
+    value: function handleMouseLeave() {
+      this.setHighlightedLine(-1);
+    }
+  }, {
+    key: "resolveColor",
+    value: function resolveColor(id, index) {
+      var _this$props$colorMap$, _this$props$colorMap;
+      return (_this$props$colorMap$ = (_this$props$colorMap = this.props.colorMap) === null || _this$props$colorMap === void 0 ? void 0 : _this$props$colorMap[id]) !== null && _this$props$colorMap$ !== void 0 ? _this$props$colorMap$ : "chart-palette-order-".concat(index + 1);
+    }
+  }, {
+    key: "tooltipValueFormatter",
+    value: function tooltipValueFormatter(value) {
+      var tooltipValueFormatter2 = this.asProps.tooltipValueFormatter;
+      if (tooltipValueFormatter2) {
+        return tooltipValueFormatter2(value);
+      }
+      if (value === void 0 || value === interpolateValue) {
+        return "n/a";
+      }
+      if (value === null) {
+        return "0";
+      }
+      if (value instanceof Date) {
+        return value.toDateString();
+      }
+      return value.toString();
+    }
+  }, {
+    key: "defaultLegendProps",
+    value: function defaultLegendProps() {
+      return {
+        legendType: "Flex"
+      };
+    }
+  }, {
+    key: "renderLegend",
+    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) {
+        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,
+        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),
+        "aria-label": this.getLegendAriaLabel()
+      };
+      if (lProps.legendType === "Table") {
+        return /* @__PURE__ */ React.createElement(LegendTable, commonLegendProps);
+      }
+      if ("withTrend" in lProps) {
+        var flexLegendProps = _objectSpread(_objectSpread({}, commonLegendProps), {}, {
+          withTrend: true,
+          trendLabel: lProps.trendLabel,
+          trendIsVisible: withTrend,
+          onTrendIsVisibleChange: this.handleWithTrendChange
+        });
+        return /* @__PURE__ */ React.createElement(LegendFlex, flexLegendProps);
+      }
+      return /* @__PURE__ */ React.createElement(LegendFlex, commonLegendProps);
+    }
+  }, {
+    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;
+      if (!Array.isArray(data)) {
+        return null;
+      }
+      var xTicks = this.xTicks;
+      var yTicks = this.yTicks;
+      var childrenX = axisXValueFormatter ? function(_ref7) {
+        var value = _ref7.value;
+        return {
+          children: axisXValueFormatter(value)
+        };
+      } : void 0;
+      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, {
+        ticks: yTicks
+      }, 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, {
+        ticks: xTicks
+      }, 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: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      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 _extractAriaProps = extractAriaProps(this.asProps), extractedAriaProps = _extractAriaProps.extractedAriaProps;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref2.cn("SChart", _objectSpread({}, assignProps({
+        "gap": 5,
+        "__excludeProps": ["data"],
+        "role": "group"
+      }, _ref))), this.renderLegend(), /* @__PURE__ */ React.createElement(Plot, _ref2.cn("Plot", _objectSpread({
+        "data": data,
+        "scale": [this.xScale, this.yScale],
+        "width": plotWidth,
+        "height": plotHeight,
+        "dataHints": this.dataHints,
+        "a11yAltTextConfig": a11yAltTextConfig,
+        "patterns": patterns,
+        "duration": duration
+      }, extractedAriaProps)), this.renderAxis(), this.renderTooltip(), this.renderChart()));
+    }
+  }]);
+  return AbstractChart2;
+}(Component);
+_defineProperty(AbstractChart, "style", {});
+_defineProperty(AbstractChart, "defaultProps", {
+  direction: "column",
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true
+});
+export {
+  AbstractChart
+};

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

@@ -0,0 +1,145 @@
+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 _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 { 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 { 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 _super.apply(this, arguments);
+  }
+  _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;
+      if (xScale) {
+        return xScale;
+      }
+      var testItem = data[0][groupKey];
+      var range = [marginY, plotWidth - this.plotPadding];
+      var domain = minMax(data, groupKey);
+      if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
+        return scaleTime(domain, range);
+      }
+      return scaleLinear(domain, range);
+    }
+  }, {
+    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 min = Math.min.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;
+      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, highlightedLine = _this$state.highlightedLine;
+      if (stacked) {
+        return /* @__PURE__ */ React.createElement(StackedArea, {
+          x: groupKey
+        }, dataDefinitions.map(function(item, index) {
+          return item.checked && /* @__PURE__ */ React.createElement(StackedArea.Area, {
+            x: groupKey,
+            y: item.id,
+            key: item.id,
+            color: item.color,
+            transparent: highlightedLine !== -1 && highlightedLine !== index,
+            curve
+          }, showDots && /* @__PURE__ */ React.createElement(StackedArea.Area.Dots, {
+            display: true
+          }));
+        }));
+      }
+      return dataDefinitions.map(function(item, index) {
+        return item.checked && /* @__PURE__ */ React.createElement(Area, {
+          x: groupKey,
+          y: item.id,
+          key: item.id,
+          color: item.color,
+          transparent: highlightedLine !== -1 && highlightedLine !== index,
+          curve
+        }, showDots && /* @__PURE__ */ React.createElement(Area.Dots, {
+          display: true
+        }));
+      });
+    }
+  }, {
+    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;
+      }
+      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)))
+        };
+      });
+    }
+  }, {
+    key: "getLegendAriaLabel",
+    value: function getLegendAriaLabel() {
+      return this.asProps.getI18nText("legendForChart", {
+        chartType: "Area"
+      });
+    }
+  }]);
+  return AreaChartComponent2;
+}(AbstractChart);
+_defineProperty(AreaChartComponent, "displayName", "Chart.Area");
+_defineProperty(AreaChartComponent, "enhance", [i18nEnhance(localizedMessages)]);
+var AreaChart = createComponent(AreaChartComponent);
+export {
+  AreaChart
+};