@semcore/d3-chart 3.18.1 → 3.18.2

package/lib/es6/component/Chart/AbstractChart.js

@@ -0,0 +1,412 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { assignProps as _assignProps } from "@semcore/core";
+import { makeDataHintsContainer } from '../../a11y/hints';
+import { interpolateValue } from '../../utils';
+import React from 'react';
+import { Component, Root, sstyled } from '@semcore/core';
+import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
+import ChartLegend, { ChartLegendTable } from '../ChartLegend';
+import { Flex } from '@semcore/flex-box';
+// @ts-ignore
+import { Plot, XAxis, YAxis } from '../..';
+import { Text } from '@semcore/typography';
+export var AbstractChart = /*#__PURE__*/function (_Component) {
+  _inherits(AbstractChart, _Component);
+  var _super = _createSuper(AbstractChart);
+  /**
+   * Padding from the end's of chart to the container (except axis sides)
+   */
+
+  function AbstractChart(props) {
+    var _this;
+    _classCallCheck(this, AbstractChart);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "plotPadding", 6);
+    _defineProperty(_assertThisInitialized(_this), "dataHints", makeDataHintsContainer());
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      dataDefinitions: _this.defaultDataDefinitions,
+      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(AbstractChart, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) {
+        this.setState({
+          dataDefinitions: this.defaultDataDefinitions
+        });
+      }
+    }
+  }, {
+    key: "defaultDataDefinitions",
+    get: function get() {
+      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 : undefined,
+          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
+          } : undefined;
+        }
+        if (legendData && 'columns' in legendData) {
+          dataDefinition.columns = legendData.columns || [];
+        } else if (!Array.isArray(data)) {
+          var _ref3;
+          var value = (_ref3 = data instanceof Map ? data.get(key) : Number(data[key])) !== null && _ref3 !== void 0 ? _ref3 : 0;
+          var total = Object.values(data).reduce(function (sum, i) {
+            return sum + Number(i);
+          }, 0);
+          var percent = (value / total * 100).toFixed(2);
+          dataDefinition.columns = [/*#__PURE__*/React.createElement(Text, {
+            key: "".concat(key, "_percent"),
+            use: 'secondary'
+          }, percent, "%"), /*#__PURE__*/React.createElement(Text, {
+            key: "".concat(key, "_value"),
+            use: 'primary'
+          }, value)];
+        }
+        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 undefined;
+      }
+      return undefined;
+    }
+  }, {
+    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 undefined;
+      }
+      return undefined;
+    }
+  }, {
+    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 (_ref4) {
+            var _ref5 = _slicedToArray(_ref4, 2),
+              key = _ref5[0],
+              value = _ref5[1];
+            if (key !== groupKey && typeof value === 'number') {
+              result.add(value);
+            }
+          });
+        }
+        return result;
+      }, 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 (max, item) {
+        var barSum = Object.entries(item).reduce(function (sum, _ref6) {
+          var _ref7 = _slicedToArray(_ref6, 2),
+            key = _ref7[0],
+            val = _ref7[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 > max) {
+          max = barSum;
+        }
+        return max;
+      }, 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: "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: 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 tooltipValueFormatter = this.asProps.tooltipValueFormatter;
+      if (tooltipValueFormatter) {
+        return tooltipValueFormatter(value);
+      }
+      if (value === undefined || value === interpolateValue) {
+        return 'n/a';
+      }
+      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;
+      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,
+        direction: (_lProps$direction = lProps.direction) !== null && _lProps$direction !== void 0 ? _lProps$direction : direction === 'row' || direction === 'row-reverse' ? 'column' : 'row',
+        onChangeVisibleItem: lProps.disableSelectItems ? undefined : callAllEventHandlers(lProps.onChangeVisibleItem, this.handleChangeVisible),
+        onMouseEnterItem: lProps.disableHoverItems ? undefined : callAllEventHandlers(lProps.onMouseEnterItem, this.handleMouseEnter),
+        onMouseLeaveItem: lProps.disableHoverItems ? undefined : callAllEventHandlers(lProps.onMouseLeaveItem, this.handleMouseLeave)
+      };
+      if (lProps.legendType === 'Table') {
+        return /*#__PURE__*/React.createElement(ChartLegendTable, commonLegendProps);
+      }
+      if ('withTrend' in lProps) {
+        var flexLegendProps = _objectSpread(_objectSpread({}, commonLegendProps), {}, {
+          withTrend: true,
+          trendLabel: lProps.trendLabel,
+          trendIsVisible: withTrend,
+          onTrendIsVisibleChange: this.handleWithTrendChange
+        });
+        return /*#__PURE__*/React.createElement(ChartLegend, flexLegendProps);
+      }
+      return /*#__PURE__*/React.createElement(ChartLegend, 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 (_ref8) {
+        var value = _ref8.value;
+        return {
+          children: axisXValueFormatter(value)
+        };
+      } : undefined;
+      var childrenY = axisYValueFormatter ? function (_ref9) {
+        var value = _ref9.value;
+        return {
+          children: axisYValueFormatter(value)
+        };
+      } : undefined;
+      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;
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SChart, _ref2.cn("SChart", _objectSpread({}, _assignProps({
+        "gap": 5
+      }, _ref))), this.renderLegend(), /*#__PURE__*/React.createElement(Plot, _ref2.cn("Plot", {
+        "data": data,
+        "scale": [this.xScale, this.yScale],
+        "width": plotWidth,
+        "height": plotHeight,
+        "dataHints": this.dataHints
+      }), this.renderAxis(), this.renderChart(), this.renderTooltip()));
+    }
+  }]);
+  return AbstractChart;
+}(Component);
+_defineProperty(AbstractChart, "style", {});
+_defineProperty(AbstractChart, "defaultProps", {
+  direction: 'column',
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true
+});
+//# sourceMappingURL=AbstractChart.js.map

package/lib/es6/component/Chart/AbstractChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractChart.js","names":["makeDataHintsContainer","interpolateValue","React","Component","Root","sstyled","callAllEventHandlers","ChartLegend","ChartLegendTable","Flex","Plot","XAxis","YAxis","Text","AbstractChart","_Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","_defineProperty","_assertThisInitialized","dataDefinitions","defaultDataDefinitions","highlightedLine","withTrend","setHighlightedLine","bind","handleChangeVisible","handleMouseEnter","handleMouseLeave","resolveColor","tooltipValueFormatter","handleWithTrendChange","_createClass","key","value","componentDidUpdate","prevProps","data","legendProps","setState","get","_this2","_this$props","dataKeys","map","index","_legendProps$legendMa","_legendData$label","_legendData$icon","_legendData$defaultCh","legendData","legendMap","dataDefinition","id","label","icon","undefined","checked","defaultChecked","color","columns","additionalInfo","count","Array","isArray","_ref3","Map","Number","total","Object","values","reduce","sum","i","percent","toFixed","createElement","concat","use","_this$props2","groupKey","keys","filter","_this$asProps","asProps","invertAxis","xTicksCount","yTicksCount","scale","xScale","ticks","_this$asProps2","yScale","_this$asProps3","flatValues","result","item","add","entries","forEach","_ref4","_ref5","_slicedToArray","Set","_this$asProps4","max","val","barSum","_ref6","_ref7","Date","isNaN","getMilliseconds","totalValue","state","legendItem","isVisible","prevState","findIndex","line","_this$props$colorMap$","_this$props$colorMap","colorMap","toDateString","toString","defaultLegendProps","legendType","renderLegend","_lProps$direction","_this$asProps5","direction","showLegend","length","_this$state","lProps","_objectSpread","commonLegendProps","dataHints","items","size","shape","onChangeVisibleItem","disableSelectItems","onMouseEnterItem","disableHoverItems","onMouseLeaveItem","flexLegendProps","trendLabel","trendIsVisible","onTrendIsVisibleChange","renderAxis","_this$asProps6","showXAxis","showYAxis","axisXValueFormatter","axisYValueFormatter","xTicks","yTicks","childrenX","_ref8","children","childrenY","_ref9","Fragment","Ticks","Grid","render","_ref","_ref2","SChart","_this$asProps7","styles","plotWidth","plotHeight","cn","_assignProps","renderChart","renderTooltip","showTooltip"],"sources":["../../../../src/component/Chart/AbstractChart.tsx"],"sourcesContent":["import { makeDataHintsContainer } from '../../a11y/hints';\nimport { LegendItem } from '../ChartLegend/LegendItem/LegendItem.type';\nimport { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';\nimport { interpolateValue } from '../../utils';\nimport React from 'react';\nimport { Component, Root, sstyled } from '@semcore/core';\nimport { BaseChartProps, BaseLegendProps, ListData, ObjectData } from './AbstractChart.type';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport ChartLegend, { ChartLegendTable } from '../ChartLegend';\nimport { Flex } from '@semcore/flex-box';\n// @ts-ignore\nimport { Plot, XAxis, YAxis } from '../..';\nimport { Text } from '@semcore/typography';\nimport { LegendFlexProps } from '../ChartLegend/LegendFlex/LegendFlex.type';\n\ntype ChartState = {\n  dataDefinitions: Array<LegendItem & { columns: React.ReactNode[] }>;\n  highlightedLine: number;\n  withTrend: boolean;\n};\n\nexport abstract class AbstractChart<\n  D extends ListData | ObjectData,\n  T extends BaseChartProps<D>,\n> extends Component<T, {}, ChartState> {\n  public static style = {};\n  public static defaultProps: Partial<BaseChartProps<any>> = {\n    direction: 'column',\n    showXAxis: true,\n    showYAxis: true,\n    showTooltip: true,\n    showLegend: true,\n  };\n\n  /**\n   * Padding from the end's of chart to the container (except axis sides)\n   */\n  protected plotPadding = 6;\n\n  protected dataHints = makeDataHintsContainer();\n\n  public state: ChartState = {\n    dataDefinitions: this.defaultDataDefinitions,\n    highlightedLine: -1,\n    withTrend: false,\n  };\n\n  constructor(props: T) {\n    super(props);\n\n    this.setHighlightedLine = this.setHighlightedLine.bind(this);\n    this.handleChangeVisible = this.handleChangeVisible.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n    this.resolveColor = this.resolveColor.bind(this);\n    this.tooltipValueFormatter = this.tooltipValueFormatter.bind(this);\n    this.handleWithTrendChange = this.handleWithTrendChange.bind(this);\n  }\n\n  public componentDidUpdate(prevProps: T) {\n    if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) {\n      this.setState({ dataDefinitions: this.defaultDataDefinitions });\n    }\n  }\n\n  protected get defaultDataDefinitions(): Array<LegendItem & { columns: React.ReactNode[] }> {\n    const { data, legendProps } = this.props;\n\n    return this.dataKeys.map((key, index) => {\n      const legendData = legendProps?.legendMap?.[key];\n\n      const dataDefinition: LegendItem & { columns: React.ReactNode[] } = {\n        id: key,\n        label: legendData?.label ?? key,\n        icon: legendData?.icon ?? undefined,\n        checked: legendData?.defaultChecked ?? true,\n        color: this.resolveColor(key, index),\n        columns: [],\n      };\n\n      if (legendData?.additionalInfo || legendData?.count) {\n        dataDefinition.additionalInfo = legendData.additionalInfo\n          ? { label: legendData.additionalInfo }\n          : legendData.count\n          ? { count: legendData.count }\n          : undefined;\n      }\n\n      if (legendData && 'columns' in legendData) {\n        dataDefinition.columns = legendData.columns || [];\n      } else if (!Array.isArray(data)) {\n        const value = (data instanceof Map ? data.get(key) : Number(data[key])) ?? 0;\n        const total = Object.values(data).reduce<number>((sum, i) => sum + Number(i), 0);\n        const percent = ((value / total) * 100).toFixed(2);\n\n        dataDefinition.columns = [\n          <Text key={`${key}_percent`} use={'secondary'}>\n            {percent}%\n          </Text>,\n          <Text key={`${key}_value`} use={'primary'}>\n            {value}\n          </Text>,\n        ];\n      }\n\n      return dataDefinition;\n    });\n  }\n\n  protected abstract get xScale(): ScaleBand<any> | ScaleLinear<any, any> | ScaleTime<any, any>;\n  protected abstract get yScale(): ScaleBand<any> | ScaleLinear<any, any> | ScaleTime<any, any>;\n\n  protected abstract renderChart(): React.ReactNode;\n  protected abstract renderTooltip(): React.ReactNode;\n\n  protected get dataKeys(): string[] {\n    const { data, groupKey } = this.props;\n\n    let dataKeys: string[];\n\n    if (Array.isArray(data) && groupKey) {\n      dataKeys = Object.keys(data[0]).filter((key) => key !== groupKey);\n    } else {\n      dataKeys = Object.keys(data);\n    }\n\n    return dataKeys;\n  }\n\n  protected get xTicks(): number[] | Date[] | undefined {\n    const { data, invertAxis, xTicksCount, yTicksCount } = this.asProps;\n\n    const scale = this.xScale;\n\n    if (Array.isArray(data) && 'ticks' in scale) {\n      if (invertAxis && yTicksCount) {\n        return scale.ticks(yTicksCount);\n      } else if (xTicksCount) {\n        return scale.ticks(xTicksCount);\n      }\n\n      return undefined;\n    }\n\n    return undefined;\n  }\n\n  protected get yTicks(): number[] | Date[] | undefined {\n    const { data, invertAxis, xTicksCount, yTicksCount } = this.asProps;\n\n    const scale = this.yScale;\n\n    if (Array.isArray(data) && 'ticks' in scale) {\n      if (invertAxis && xTicksCount) {\n        return scale.ticks(xTicksCount);\n      } else if (yTicksCount) {\n        return scale.ticks(yTicksCount);\n      }\n\n      return undefined;\n    }\n\n    return undefined;\n  }\n\n  protected get flatValues(): Set<number> {\n    const { data, groupKey } = this.asProps;\n    const values: any[] = Array.isArray(data) ? data : Object.values(data);\n\n    const flatValues = values.reduce<Set<number>>((result, item) => {\n      if (!groupKey && typeof item === 'number') {\n        result.add(item);\n      } else {\n        Object.entries(item).forEach(([key, value]) => {\n          if (key !== groupKey && typeof value === 'number') {\n            result.add(value);\n          }\n        });\n      }\n\n      return result;\n    }, new Set());\n\n    return flatValues;\n  }\n\n  protected get maxStackedValue(): number {\n    const { data, groupKey } = this.asProps;\n\n    if (!Array.isArray(data)) {\n      const max = Object.values(data).reduce<number>((sum, val) => {\n        if (typeof val === 'number') {\n          sum = sum + val;\n        }\n\n        return sum;\n      }, 0);\n\n      return max;\n    }\n\n    const max = data.reduce((max, item) => {\n      const barSum = Object.entries(item).reduce<number>((sum, [key, val]) => {\n        if (key === groupKey) {\n          return sum;\n        }\n\n        if (typeof val === 'number') {\n          return sum + val;\n        }\n\n        if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {\n          return sum + val.getMilliseconds();\n        }\n\n        return sum;\n      }, 0);\n\n      if (barSum > max) {\n        max = barSum;\n      }\n\n      return max;\n    }, 0);\n\n    return max;\n  }\n\n  protected totalValue(data: ObjectData): number {\n    const { dataDefinitions } = this.state;\n\n    const total = dataDefinitions.reduce((sum, legendItem) => {\n      const item = data[legendItem.id];\n\n      if (typeof item === 'number') {\n        return sum + item;\n      }\n\n      if (item instanceof Date && !Number.isNaN(item.getMilliseconds())) {\n        return sum + item.getMilliseconds();\n      }\n\n      return sum;\n    }, 0);\n\n    return total;\n  }\n\n  protected setHighlightedLine(index: number) {\n    this.setState({ highlightedLine: index });\n  }\n\n  protected handleChangeVisible(id: string, isVisible: boolean) {\n    this.setState((prevState) => {\n      const dataDefinitions = prevState.dataDefinitions.map((item) => {\n        if (item.id === id) {\n          item.checked = isVisible;\n        }\n\n        return item;\n      });\n\n      return { dataDefinitions };\n    });\n  }\n\n  protected handleWithTrendChange(isVisible: boolean) {\n    this.setState({ withTrend: isVisible });\n  }\n\n  protected handleMouseEnter(id: string) {\n    this.setHighlightedLine(this.state.dataDefinitions.findIndex((line) => line.id === id));\n  }\n\n  protected handleMouseLeave() {\n    this.setHighlightedLine(-1);\n  }\n\n  protected resolveColor(id: string, index: number) {\n    return this.props.colorMap?.[id] ?? `chart-palette-order-${index + 1}`;\n  }\n\n  protected tooltipValueFormatter(\n    value?: string | number | typeof interpolateValue | Date,\n  ): string {\n    const { tooltipValueFormatter } = this.asProps;\n\n    if (tooltipValueFormatter) {\n      return tooltipValueFormatter(value);\n    }\n\n    if (value === undefined || value === interpolateValue) {\n      return 'n/a';\n    }\n\n    if (value instanceof Date) {\n      return value.toDateString();\n    }\n\n    return value.toString();\n  }\n\n  protected defaultLegendProps(): Partial<BaseLegendProps> {\n    return {\n      legendType: 'Flex',\n    };\n  }\n\n  protected renderLegend() {\n    const { legendProps, direction, showLegend } = this.asProps;\n\n    if (\n      !showLegend ||\n      // we hide Legend for one item on chart except not manually set to show.\n      (this.dataKeys.length === 1 && showLegend === true)\n    ) {\n      return null;\n    }\n\n    const { dataDefinitions, withTrend } = this.state;\n    const lProps = {\n      ...this.defaultLegendProps(),\n      ...legendProps,\n    };\n\n    const commonLegendProps = {\n      dataHints: this.dataHints,\n      items: dataDefinitions,\n      size: lProps.size,\n      shape: lProps.shape,\n      direction:\n        lProps.direction ?? (direction === 'row' || direction === 'row-reverse' ? 'column' : 'row'),\n      onChangeVisibleItem: lProps.disableSelectItems\n        ? undefined\n        : callAllEventHandlers(lProps.onChangeVisibleItem, this.handleChangeVisible),\n      onMouseEnterItem: lProps.disableHoverItems\n        ? undefined\n        : callAllEventHandlers(lProps.onMouseEnterItem, this.handleMouseEnter),\n      onMouseLeaveItem: lProps.disableHoverItems\n        ? undefined\n        : callAllEventHandlers(lProps.onMouseLeaveItem, this.handleMouseLeave),\n    };\n\n    if (lProps.legendType === 'Table') {\n      return <ChartLegendTable {...commonLegendProps} />;\n    }\n\n    if ('withTrend' in lProps) {\n      const flexLegendProps: LegendFlexProps = {\n        ...commonLegendProps,\n        withTrend: true,\n        trendLabel: lProps.trendLabel,\n        trendIsVisible: withTrend,\n        onTrendIsVisibleChange: this.handleWithTrendChange,\n      };\n\n      return <ChartLegend {...flexLegendProps} />;\n    }\n\n    return <ChartLegend {...commonLegendProps} />;\n  }\n\n  protected renderAxis(): React.ReactNode {\n    const { invertAxis, showXAxis, showYAxis, data, axisXValueFormatter, axisYValueFormatter } =\n      this.asProps;\n\n    if (!Array.isArray(data)) {\n      return null;\n    }\n\n    const xTicks = this.xTicks;\n    const yTicks = this.yTicks;\n\n    const childrenX = axisXValueFormatter\n      ? ({ value }: any) => ({ children: axisXValueFormatter(value) })\n      : undefined;\n    const childrenY = axisYValueFormatter\n      ? ({ value }: any) => ({ children: axisYValueFormatter(value) })\n      : undefined;\n\n    return (\n      <>\n        {showYAxis && (\n          <YAxis>\n            {yTicks ? (\n              <YAxis.Ticks ticks={yTicks}>{childrenY}</YAxis.Ticks>\n            ) : (\n              <YAxis.Ticks>{childrenY}</YAxis.Ticks>\n            )}\n            {invertAxis !== true && (yTicks ? <YAxis.Grid ticks={yTicks} /> : <YAxis.Grid />)}\n          </YAxis>\n        )}\n\n        {showXAxis && (\n          <XAxis>\n            {xTicks ? (\n              <XAxis.Ticks ticks={xTicks}>{childrenX}</XAxis.Ticks>\n            ) : (\n              <XAxis.Ticks>{childrenX}</XAxis.Ticks>\n            )}\n            {invertAxis === true && (xTicks ? <XAxis.Grid ticks={xTicks} /> : <XAxis.Grid />)}\n          </XAxis>\n        )}\n      </>\n    );\n  }\n\n  public render() {\n    const SChart = Root;\n    const { styles, plotWidth, plotHeight, data } = this.asProps;\n\n    return sstyled(styles)(\n      <SChart render={Flex} gap={5}>\n        {this.renderLegend()}\n        <Plot\n          data={data}\n          scale={[this.xScale, this.yScale]}\n          width={plotWidth}\n          height={plotHeight}\n          dataHints={this.dataHints}\n        >\n          {this.renderAxis()}\n          {this.renderChart()}\n          {this.renderTooltip()}\n        </Plot>\n      </SChart>,\n    );\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,SAASA,sBAAsB,QAAQ,kBAAkB;AAGzD,SAASC,gBAAgB,QAAQ,aAAa;AAC9C,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAExD,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,OAAOC,WAAW,IAAIC,gBAAgB,QAAQ,gBAAgB;AAC9D,SAASC,IAAI,QAAQ,mBAAmB;AACxC;AACA,SAASC,IAAI,EAAEC,KAAK,EAAEC,KAAK,QAAQ,OAAO;AAC1C,SAASC,IAAI,QAAQ,qBAAqB;AAS1C,WAAsBC,aAAa,0BAAAC,UAAA;EAAAC,SAAA,CAAAF,aAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,aAAA;EAajC;AACF;AACA;;EAWE,SAAAA,cAAYK,KAAQ,EAAE;IAAA,IAAAC,KAAA;IAAAC,eAAA,OAAAP,aAAA;IACpBM,KAAA,GAAAH,MAAA,CAAAK,IAAA,OAAMH,KAAK;IAAEI,eAAA,CAAAC,sBAAA,CAAAJ,KAAA,kBAXS,CAAC;IAAAG,eAAA,CAAAC,sBAAA,CAAAJ,KAAA,gBAEHpB,sBAAsB,EAAE;IAAAuB,eAAA,CAAAC,sBAAA,CAAAJ,KAAA,YAEnB;MACzBK,eAAe,EAAEL,KAAA,CAAKM,sBAAsB;MAC5CC,eAAe,EAAE,CAAC,CAAC;MACnBC,SAAS,EAAE;IACb,CAAC;IAKCR,KAAA,CAAKS,kBAAkB,GAAGT,KAAA,CAAKS,kBAAkB,CAACC,IAAI,CAAAN,sBAAA,CAAAJ,KAAA,EAAM;IAC5DA,KAAA,CAAKW,mBAAmB,GAAGX,KAAA,CAAKW,mBAAmB,CAACD,IAAI,CAAAN,sBAAA,CAAAJ,KAAA,EAAM;IAC9DA,KAAA,CAAKY,gBAAgB,GAAGZ,KAAA,CAAKY,gBAAgB,CAACF,IAAI,CAAAN,sBAAA,CAAAJ,KAAA,EAAM;IACxDA,KAAA,CAAKa,gBAAgB,GAAGb,KAAA,CAAKa,gBAAgB,CAACH,IAAI,CAAAN,sBAAA,CAAAJ,KAAA,EAAM;IACxDA,KAAA,CAAKc,YAAY,GAAGd,KAAA,CAAKc,YAAY,CAACJ,IAAI,CAAAN,sBAAA,CAAAJ,KAAA,EAAM;IAChDA,KAAA,CAAKe,qBAAqB,GAAGf,KAAA,CAAKe,qBAAqB,CAACL,IAAI,CAAAN,sBAAA,CAAAJ,KAAA,EAAM;IAClEA,KAAA,CAAKgB,qBAAqB,GAAGhB,KAAA,CAAKgB,qBAAqB,CAACN,IAAI,CAAAN,sBAAA,CAAAJ,KAAA,EAAM;IAAC,OAAAA,KAAA;EACrE;EAACiB,YAAA,CAAAvB,aAAA;IAAAwB,GAAA;IAAAC,KAAA,EAED,SAAAC,mBAA0BC,SAAY,EAAE;MACtC,IAAIA,SAAS,CAACC,IAAI,KAAK,IAAI,CAACvB,KAAK,CAACuB,IAAI,IAAID,SAAS,CAACE,WAAW,KAAK,IAAI,CAACxB,KAAK,CAACwB,WAAW,EAAE;QAC1F,IAAI,CAACC,QAAQ,CAAC;UAAEnB,eAAe,EAAE,IAAI,CAACC;QAAuB,CAAC,CAAC;MACjE;IACF;EAAC;IAAAY,GAAA;IAAAO,GAAA,EAED,SAAAA,IAAA,EAA2F;MAAA,IAAAC,MAAA;MACzF,IAAAC,WAAA,GAA8B,IAAI,CAAC5B,KAAK;QAAhCuB,IAAI,GAAAK,WAAA,CAAJL,IAAI;QAAEC,WAAW,GAAAI,WAAA,CAAXJ,WAAW;MAEzB,OAAO,IAAI,CAACK,QAAQ,CAACC,GAAG,CAAC,UAACX,GAAG,EAAEY,KAAK,EAAK;QAAA,IAAAC,qBAAA,EAAAC,iBAAA,EAAAC,gBAAA,EAAAC,qBAAA;QACvC,IAAMC,UAAU,GAAGZ,WAAW,aAAXA,WAAW,wBAAAQ,qBAAA,GAAXR,WAAW,CAAEa,SAAS,cAAAL,qBAAA,uBAAtBA,qBAAA,CAAyBb,GAAG,CAAC;QAEhD,IAAMmB,cAA2D,GAAG;UAClEC,EAAE,EAAEpB,GAAG;UACPqB,KAAK,GAAAP,iBAAA,GAAEG,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEI,KAAK,cAAAP,iBAAA,cAAAA,iBAAA,GAAId,GAAG;UAC/BsB,IAAI,GAAAP,gBAAA,GAAEE,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEK,IAAI,cAAAP,gBAAA,cAAAA,gBAAA,GAAIQ,SAAS;UACnCC,OAAO,GAAAR,qBAAA,GAAEC,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEQ,cAAc,cAAAT,qBAAA,cAAAA,qBAAA,GAAI,IAAI;UAC3CU,KAAK,EAAElB,MAAI,CAACZ,YAAY,CAACI,GAAG,EAAEY,KAAK,CAAC;UACpCe,OAAO,EAAE;QACX,CAAC;QAED,IAAIV,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEW,cAAc,IAAIX,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEY,KAAK,EAAE;UACnDV,cAAc,CAACS,cAAc,GAAGX,UAAU,CAACW,cAAc,GACrD;YAAEP,KAAK,EAAEJ,UAAU,CAACW;UAAe,CAAC,GACpCX,UAAU,CAACY,KAAK,GAChB;YAAEA,KAAK,EAAEZ,UAAU,CAACY;UAAM,CAAC,GAC3BN,SAAS;QACf;QAEA,IAAIN,UAAU,IAAI,SAAS,IAAIA,UAAU,EAAE;UACzCE,cAAc,CAACQ,OAAO,GAAGV,UAAU,CAACU,OAAO,IAAI,EAAE;QACnD,CAAC,MAAM,IAAI,CAACG,KAAK,CAACC,OAAO,CAAC3B,IAAI,CAAC,EAAE;UAAA,IAAA4B,KAAA;UAC/B,IAAM/B,KAAK,IAAA+B,KAAA,GAAI5B,IAAI,YAAY6B,GAAG,GAAG7B,IAAI,CAACG,GAAG,CAACP,GAAG,CAAC,GAAGkC,MAAM,CAAC9B,IAAI,CAACJ,GAAG,CAAC,CAAC,cAAAgC,KAAA,cAAAA,KAAA,GAAK,CAAC;UAC5E,IAAMG,KAAK,GAAGC,MAAM,CAACC,MAAM,CAACjC,IAAI,CAAC,CAACkC,MAAM,CAAS,UAACC,GAAG,EAAEC,CAAC;YAAA,OAAKD,GAAG,GAAGL,MAAM,CAACM,CAAC,CAAC;UAAA,GAAE,CAAC,CAAC;UAChF,IAAMC,OAAO,GAAG,CAAExC,KAAK,GAAGkC,KAAK,GAAI,GAAG,EAAEO,OAAO,CAAC,CAAC,CAAC;UAElDvB,cAAc,CAACQ,OAAO,GAAG,cACvB/D,KAAA,CAAA+E,aAAA,CAACpE,IAAI;YAACyB,GAAG,KAAA4C,MAAA,CAAK5C,GAAG,aAAW;YAAC6C,GAAG,EAAE;UAAY,GAC3CJ,OAAO,EAAC,GACX,CAAO,eACP7E,KAAA,CAAA+E,aAAA,CAACpE,IAAI;YAACyB,GAAG,KAAA4C,MAAA,CAAK5C,GAAG,WAAS;YAAC6C,GAAG,EAAE;UAAU,GACvC5C,KAAK,CACD,CACR;QACH;QAEA,OAAOkB,cAAc;MACvB,CAAC,CAAC;IACJ;EAAC;IAAAnB,GAAA;IAAAO,GAAA,EAQD,SAAAA,IAAA,EAAmC;MACjC,IAAAuC,YAAA,GAA2B,IAAI,CAACjE,KAAK;QAA7BuB,IAAI,GAAA0C,YAAA,CAAJ1C,IAAI;QAAE2C,QAAQ,GAAAD,YAAA,CAARC,QAAQ;MAEtB,IAAIrC,QAAkB;MAEtB,IAAIoB,KAAK,CAACC,OAAO,CAAC3B,IAAI,CAAC,IAAI2C,QAAQ,EAAE;QACnCrC,QAAQ,GAAG0B,MAAM,CAACY,IAAI,CAAC5C,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC6C,MAAM,CAAC,UAACjD,GAAG;UAAA,OAAKA,GAAG,KAAK+C,QAAQ;QAAA,EAAC;MACnE,CAAC,MAAM;QACLrC,QAAQ,GAAG0B,MAAM,CAACY,IAAI,CAAC5C,IAAI,CAAC;MAC9B;MAEA,OAAOM,QAAQ;IACjB;EAAC;IAAAV,GAAA;IAAAO,GAAA,EAED,SAAAA,IAAA,EAAsD;MACpD,IAAA2C,aAAA,GAAuD,IAAI,CAACC,OAAO;QAA3D/C,IAAI,GAAA8C,aAAA,CAAJ9C,IAAI;QAAEgD,UAAU,GAAAF,aAAA,CAAVE,UAAU;QAAEC,WAAW,GAAAH,aAAA,CAAXG,WAAW;QAAEC,WAAW,GAAAJ,aAAA,CAAXI,WAAW;MAElD,IAAMC,KAAK,GAAG,IAAI,CAACC,MAAM;MAEzB,IAAI1B,KAAK,CAACC,OAAO,CAAC3B,IAAI,CAAC,IAAI,OAAO,IAAImD,KAAK,EAAE;QAC3C,IAAIH,UAAU,IAAIE,WAAW,EAAE;UAC7B,OAAOC,KAAK,CAACE,KAAK,CAACH,WAAW,CAAC;QACjC,CAAC,MAAM,IAAID,WAAW,EAAE;UACtB,OAAOE,KAAK,CAACE,KAAK,CAACJ,WAAW,CAAC;QACjC;QAEA,OAAO9B,SAAS;MAClB;MAEA,OAAOA,SAAS;IAClB;EAAC;IAAAvB,GAAA;IAAAO,GAAA,EAED,SAAAA,IAAA,EAAsD;MACpD,IAAAmD,cAAA,GAAuD,IAAI,CAACP,OAAO;QAA3D/C,IAAI,GAAAsD,cAAA,CAAJtD,IAAI;QAAEgD,UAAU,GAAAM,cAAA,CAAVN,UAAU;QAAEC,WAAW,GAAAK,cAAA,CAAXL,WAAW;QAAEC,WAAW,GAAAI,cAAA,CAAXJ,WAAW;MAElD,IAAMC,KAAK,GAAG,IAAI,CAACI,MAAM;MAEzB,IAAI7B,KAAK,CAACC,OAAO,CAAC3B,IAAI,CAAC,IAAI,OAAO,IAAImD,KAAK,EAAE;QAC3C,IAAIH,UAAU,IAAIC,WAAW,EAAE;UAC7B,OAAOE,KAAK,CAACE,KAAK,CAACJ,WAAW,CAAC;QACjC,CAAC,MAAM,IAAIC,WAAW,EAAE;UACtB,OAAOC,KAAK,CAACE,KAAK,CAACH,WAAW,CAAC;QACjC;QAEA,OAAO/B,SAAS;MAClB;MAEA,OAAOA,SAAS;IAClB;EAAC;IAAAvB,GAAA;IAAAO,GAAA,EAED,SAAAA,IAAA,EAAwC;MACtC,IAAAqD,cAAA,GAA2B,IAAI,CAACT,OAAO;QAA/B/C,IAAI,GAAAwD,cAAA,CAAJxD,IAAI;QAAE2C,QAAQ,GAAAa,cAAA,CAARb,QAAQ;MACtB,IAAMV,MAAa,GAAGP,KAAK,CAACC,OAAO,CAAC3B,IAAI,CAAC,GAAGA,IAAI,GAAGgC,MAAM,CAACC,MAAM,CAACjC,IAAI,CAAC;MAEtE,IAAMyD,UAAU,GAAGxB,MAAM,CAACC,MAAM,CAAc,UAACwB,MAAM,EAAEC,IAAI,EAAK;QAC9D,IAAI,CAAChB,QAAQ,IAAI,OAAOgB,IAAI,KAAK,QAAQ,EAAE;UACzCD,MAAM,CAACE,GAAG,CAACD,IAAI,CAAC;QAClB,CAAC,MAAM;UACL3B,MAAM,CAAC6B,OAAO,CAACF,IAAI,CAAC,CAACG,OAAO,CAAC,UAAAC,KAAA,EAAkB;YAAA,IAAAC,KAAA,GAAAC,cAAA,CAAAF,KAAA;cAAhBnE,GAAG,GAAAoE,KAAA;cAAEnE,KAAK,GAAAmE,KAAA;YACvC,IAAIpE,GAAG,KAAK+C,QAAQ,IAAI,OAAO9C,KAAK,KAAK,QAAQ,EAAE;cACjD6D,MAAM,CAACE,GAAG,CAAC/D,KAAK,CAAC;YACnB;UACF,CAAC,CAAC;QACJ;QAEA,OAAO6D,MAAM;MACf,CAAC,EAAE,IAAIQ,GAAG,EAAE,CAAC;MAEb,OAAOT,UAAU;IACnB;EAAC;IAAA7D,GAAA;IAAAO,GAAA,EAED,SAAAA,IAAA,EAAwC;MACtC,IAAAgE,cAAA,GAA2B,IAAI,CAACpB,OAAO;QAA/B/C,IAAI,GAAAmE,cAAA,CAAJnE,IAAI;QAAE2C,QAAQ,GAAAwB,cAAA,CAARxB,QAAQ;MAEtB,IAAI,CAACjB,KAAK,CAACC,OAAO,CAAC3B,IAAI,CAAC,EAAE;QACxB,IAAMoE,IAAG,GAAGpC,MAAM,CAACC,MAAM,CAACjC,IAAI,CAAC,CAACkC,MAAM,CAAS,UAACC,GAAG,EAAEkC,GAAG,EAAK;UAC3D,IAAI,OAAOA,GAAG,KAAK,QAAQ,EAAE;YAC3BlC,GAAG,GAAGA,GAAG,GAAGkC,GAAG;UACjB;UAEA,OAAOlC,GAAG;QACZ,CAAC,EAAE,CAAC,CAAC;QAEL,OAAOiC,IAAG;MACZ;MAEA,IAAMA,GAAG,GAAGpE,IAAI,CAACkC,MAAM,CAAC,UAACkC,GAAG,EAAET,IAAI,EAAK;QACrC,IAAMW,MAAM,GAAGtC,MAAM,CAAC6B,OAAO,CAACF,IAAI,CAAC,CAACzB,MAAM,CAAS,UAACC,GAAG,EAAAoC,KAAA,EAAiB;UAAA,IAAAC,KAAA,GAAAP,cAAA,CAAAM,KAAA;YAAd3E,GAAG,GAAA4E,KAAA;YAAEH,GAAG,GAAAG,KAAA;UAChE,IAAI5E,GAAG,KAAK+C,QAAQ,EAAE;YACpB,OAAOR,GAAG;UACZ;UAEA,IAAI,OAAOkC,GAAG,KAAK,QAAQ,EAAE;YAC3B,OAAOlC,GAAG,GAAGkC,GAAG;UAClB;UAEA,IAAIA,GAAG,YAAYI,IAAI,IAAI,CAAC3C,MAAM,CAAC4C,KAAK,CAACL,GAAG,CAACM,eAAe,EAAE,CAAC,EAAE;YAC/D,OAAOxC,GAAG,GAAGkC,GAAG,CAACM,eAAe,EAAE;UACpC;UAEA,OAAOxC,GAAG;QACZ,CAAC,EAAE,CAAC,CAAC;QAEL,IAAImC,MAAM,GAAGF,GAAG,EAAE;UAChBA,GAAG,GAAGE,MAAM;QACd;QAEA,OAAOF,GAAG;MACZ,CAAC,EAAE,CAAC,CAAC;MAEL,OAAOA,GAAG;IACZ;EAAC;IAAAxE,GAAA;IAAAC,KAAA,EAED,SAAA+E,WAAqB5E,IAAgB,EAAU;MAC7C,IAAQjB,eAAe,GAAK,IAAI,CAAC8F,KAAK,CAA9B9F,eAAe;MAEvB,IAAMgD,KAAK,GAAGhD,eAAe,CAACmD,MAAM,CAAC,UAACC,GAAG,EAAE2C,UAAU,EAAK;QACxD,IAAMnB,IAAI,GAAG3D,IAAI,CAAC8E,UAAU,CAAC9D,EAAE,CAAC;QAEhC,IAAI,OAAO2C,IAAI,KAAK,QAAQ,EAAE;UAC5B,OAAOxB,GAAG,GAAGwB,IAAI;QACnB;QAEA,IAAIA,IAAI,YAAYc,IAAI,IAAI,CAAC3C,MAAM,CAAC4C,KAAK,CAACf,IAAI,CAACgB,eAAe,EAAE,CAAC,EAAE;UACjE,OAAOxC,GAAG,GAAGwB,IAAI,CAACgB,eAAe,EAAE;QACrC;QAEA,OAAOxC,GAAG;MACZ,CAAC,EAAE,CAAC,CAAC;MAEL,OAAOJ,KAAK;IACd;EAAC;IAAAnC,GAAA;IAAAC,KAAA,EAED,SAAAV,mBAA6BqB,KAAa,EAAE;MAC1C,IAAI,CAACN,QAAQ,CAAC;QAAEjB,eAAe,EAAEuB;MAAM,CAAC,CAAC;IAC3C;EAAC;IAAAZ,GAAA;IAAAC,KAAA,EAED,SAAAR,oBAA8B2B,EAAU,EAAE+D,SAAkB,EAAE;MAC5D,IAAI,CAAC7E,QAAQ,CAAC,UAAC8E,SAAS,EAAK;QAC3B,IAAMjG,eAAe,GAAGiG,SAAS,CAACjG,eAAe,CAACwB,GAAG,CAAC,UAACoD,IAAI,EAAK;UAC9D,IAAIA,IAAI,CAAC3C,EAAE,KAAKA,EAAE,EAAE;YAClB2C,IAAI,CAACvC,OAAO,GAAG2D,SAAS;UAC1B;UAEA,OAAOpB,IAAI;QACb,CAAC,CAAC;QAEF,OAAO;UAAE5E,eAAe,EAAfA;QAAgB,CAAC;MAC5B,CAAC,CAAC;IACJ;EAAC;IAAAa,GAAA;IAAAC,KAAA,EAED,SAAAH,sBAAgCqF,SAAkB,EAAE;MAClD,IAAI,CAAC7E,QAAQ,CAAC;QAAEhB,SAAS,EAAE6F;MAAU,CAAC,CAAC;IACzC;EAAC;IAAAnF,GAAA;IAAAC,KAAA,EAED,SAAAP,iBAA2B0B,EAAU,EAAE;MACrC,IAAI,CAAC7B,kBAAkB,CAAC,IAAI,CAAC0F,KAAK,CAAC9F,eAAe,CAACkG,SAAS,CAAC,UAACC,IAAI;QAAA,OAAKA,IAAI,CAAClE,EAAE,KAAKA,EAAE;MAAA,EAAC,CAAC;IACzF;EAAC;IAAApB,GAAA;IAAAC,KAAA,EAED,SAAAN,iBAAA,EAA6B;MAC3B,IAAI,CAACJ,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC7B;EAAC;IAAAS,GAAA;IAAAC,KAAA,EAED,SAAAL,aAAuBwB,EAAU,EAAER,KAAa,EAAE;MAAA,IAAA2E,qBAAA,EAAAC,oBAAA;MAChD,QAAAD,qBAAA,IAAAC,oBAAA,GAAO,IAAI,CAAC3G,KAAK,CAAC4G,QAAQ,cAAAD,oBAAA,uBAAnBA,oBAAA,CAAsBpE,EAAE,CAAC,cAAAmE,qBAAA,cAAAA,qBAAA,0BAAA3C,MAAA,CAA2BhC,KAAK,GAAG,CAAC;IACtE;EAAC;IAAAZ,GAAA;IAAAC,KAAA,EAED,SAAAJ,sBACEI,KAAwD,EAChD;MACR,IAAQJ,qBAAqB,GAAK,IAAI,CAACsD,OAAO,CAAtCtD,qBAAqB;MAE7B,IAAIA,qBAAqB,EAAE;QACzB,OAAOA,qBAAqB,CAACI,KAAK,CAAC;MACrC;MAEA,IAAIA,KAAK,KAAKsB,SAAS,IAAItB,KAAK,KAAKtC,gBAAgB,EAAE;QACrD,OAAO,KAAK;MACd;MAEA,IAAIsC,KAAK,YAAY4E,IAAI,EAAE;QACzB,OAAO5E,KAAK,CAACyF,YAAY,EAAE;MAC7B;MAEA,OAAOzF,KAAK,CAAC0F,QAAQ,EAAE;IACzB;EAAC;IAAA3F,GAAA;IAAAC,KAAA,EAED,SAAA2F,mBAAA,EAAyD;MACvD,OAAO;QACLC,UAAU,EAAE;MACd,CAAC;IACH;EAAC;IAAA7F,GAAA;IAAAC,KAAA,EAED,SAAA6F,aAAA,EAAyB;MAAA,IAAAC,iBAAA;MACvB,IAAAC,cAAA,GAA+C,IAAI,CAAC7C,OAAO;QAAnD9C,WAAW,GAAA2F,cAAA,CAAX3F,WAAW;QAAE4F,SAAS,GAAAD,cAAA,CAATC,SAAS;QAAEC,UAAU,GAAAF,cAAA,CAAVE,UAAU;MAE1C,IACE,CAACA,UAAU;MACX;MACC,IAAI,CAACxF,QAAQ,CAACyF,MAAM,KAAK,CAAC,IAAID,UAAU,KAAK,IAAK,EACnD;QACA,OAAO,IAAI;MACb;MAEA,IAAAE,WAAA,GAAuC,IAAI,CAACnB,KAAK;QAAzC9F,eAAe,GAAAiH,WAAA,CAAfjH,eAAe;QAAEG,SAAS,GAAA8G,WAAA,CAAT9G,SAAS;MAClC,IAAM+G,MAAM,GAAAC,aAAA,CAAAA,aAAA,KACP,IAAI,CAACV,kBAAkB,EAAE,GACzBvF,WAAW,CACf;MAED,IAAMkG,iBAAiB,GAAG;QACxBC,SAAS,EAAE,IAAI,CAACA,SAAS;QACzBC,KAAK,EAAEtH,eAAe;QACtBuH,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,KAAK,EAAEN,MAAM,CAACM,KAAK;QACnBV,SAAS,GAAAF,iBAAA,GACPM,MAAM,CAACJ,SAAS,cAAAF,iBAAA,cAAAA,iBAAA,GAAKE,SAAS,KAAK,KAAK,IAAIA,SAAS,KAAK,aAAa,GAAG,QAAQ,GAAG,KAAM;QAC7FW,mBAAmB,EAAEP,MAAM,CAACQ,kBAAkB,GAC1CtF,SAAS,GACTvD,oBAAoB,CAACqI,MAAM,CAACO,mBAAmB,EAAE,IAAI,CAACnH,mBAAmB,CAAC;QAC9EqH,gBAAgB,EAAET,MAAM,CAACU,iBAAiB,GACtCxF,SAAS,GACTvD,oBAAoB,CAACqI,MAAM,CAACS,gBAAgB,EAAE,IAAI,CAACpH,gBAAgB,CAAC;QACxEsH,gBAAgB,EAAEX,MAAM,CAACU,iBAAiB,GACtCxF,SAAS,GACTvD,oBAAoB,CAACqI,MAAM,CAACW,gBAAgB,EAAE,IAAI,CAACrH,gBAAgB;MACzE,CAAC;MAED,IAAI0G,MAAM,CAACR,UAAU,KAAK,OAAO,EAAE;QACjC,oBAAOjI,KAAA,CAAA+E,aAAA,CAACzE,gBAAgB,EAAKqI,iBAAiB,CAAI;MACpD;MAEA,IAAI,WAAW,IAAIF,MAAM,EAAE;QACzB,IAAMY,eAAgC,GAAAX,aAAA,CAAAA,aAAA,KACjCC,iBAAiB;UACpBjH,SAAS,EAAE,IAAI;UACf4H,UAAU,EAAEb,MAAM,CAACa,UAAU;UAC7BC,cAAc,EAAE7H,SAAS;UACzB8H,sBAAsB,EAAE,IAAI,CAACtH;QAAqB,EACnD;QAED,oBAAOlC,KAAA,CAAA+E,aAAA,CAAC1E,WAAW,EAAKgJ,eAAe,CAAI;MAC7C;MAEA,oBAAOrJ,KAAA,CAAA+E,aAAA,CAAC1E,WAAW,EAAKsI,iBAAiB,CAAI;IAC/C;EAAC;IAAAvG,GAAA;IAAAC,KAAA,EAED,SAAAoH,WAAA,EAAwC;MACtC,IAAAC,cAAA,GACE,IAAI,CAACnE,OAAO;QADNC,UAAU,GAAAkE,cAAA,CAAVlE,UAAU;QAAEmE,SAAS,GAAAD,cAAA,CAATC,SAAS;QAAEC,SAAS,GAAAF,cAAA,CAATE,SAAS;QAAEpH,IAAI,GAAAkH,cAAA,CAAJlH,IAAI;QAAEqH,mBAAmB,GAAAH,cAAA,CAAnBG,mBAAmB;QAAEC,mBAAmB,GAAAJ,cAAA,CAAnBI,mBAAmB;MAGxF,IAAI,CAAC5F,KAAK,CAACC,OAAO,CAAC3B,IAAI,CAAC,EAAE;QACxB,OAAO,IAAI;MACb;MAEA,IAAMuH,MAAM,GAAG,IAAI,CAACA,MAAM;MAC1B,IAAMC,MAAM,GAAG,IAAI,CAACA,MAAM;MAE1B,IAAMC,SAAS,GAAGJ,mBAAmB,GACjC,UAAAK,KAAA;QAAA,IAAG7H,KAAK,GAAA6H,KAAA,CAAL7H,KAAK;QAAA,OAAa;UAAE8H,QAAQ,EAAEN,mBAAmB,CAACxH,KAAK;QAAE,CAAC;MAAA,CAAC,GAC9DsB,SAAS;MACb,IAAMyG,SAAS,GAAGN,mBAAmB,GACjC,UAAAO,KAAA;QAAA,IAAGhI,KAAK,GAAAgI,KAAA,CAALhI,KAAK;QAAA,OAAa;UAAE8H,QAAQ,EAAEL,mBAAmB,CAACzH,KAAK;QAAE,CAAC;MAAA,CAAC,GAC9DsB,SAAS;MAEb,oBACE3D,KAAA,CAAA+E,aAAA,CAAA/E,KAAA,CAAAsK,QAAA,QACGV,SAAS,iBACR5J,KAAA,CAAA+E,aAAA,CAACrE,KAAK,QACHsJ,MAAM,gBACLhK,KAAA,CAAA+E,aAAA,CAACrE,KAAK,CAAC6J,KAAK;QAAC1E,KAAK,EAAEmE;MAAO,GAAEI,SAAS,CAAe,gBAErDpK,KAAA,CAAA+E,aAAA,CAACrE,KAAK,CAAC6J,KAAK,QAAEH,SAAS,CACxB,EACA5E,UAAU,KAAK,IAAI,KAAKwE,MAAM,gBAAGhK,KAAA,CAAA+E,aAAA,CAACrE,KAAK,CAAC8J,IAAI;QAAC3E,KAAK,EAAEmE;MAAO,EAAG,gBAAGhK,KAAA,CAAA+E,aAAA,CAACrE,KAAK,CAAC8J,IAAI,OAAG,CAAC,CAEpF,EAEAb,SAAS,iBACR3J,KAAA,CAAA+E,aAAA,CAACtE,KAAK,QACHsJ,MAAM,gBACL/J,KAAA,CAAA+E,aAAA,CAACtE,KAAK,CAAC8J,KAAK;QAAC1E,KAAK,EAAEkE;MAAO,GAAEE,SAAS,CAAe,gBAErDjK,KAAA,CAAA+E,aAAA,CAACtE,KAAK,CAAC8J,KAAK,QAAEN,SAAS,CACxB,EACAzE,UAAU,KAAK,IAAI,KAAKuE,MAAM,gBAAG/J,KAAA,CAAA+E,aAAA,CAACtE,KAAK,CAAC+J,IAAI;QAAC3E,KAAK,EAAEkE;MAAO,EAAG,gBAAG/J,KAAA,CAAA+E,aAAA,CAACtE,KAAK,CAAC+J,IAAI,OAAG,CAAC,CAEpF,CACA;IAEP;EAAC;IAAApI,GAAA;IAAAC,KAAA,EAED,SAAAoI,OAAA,EAAgB;MAAA,IAAAC,IAAA,QAAAnF,OAAA;QAAAoF,KAAA;MACd,IAAMC,MAAM,GAIMrK,IAAI;MAHtB,IAAAsK,cAAA,GAAgD,IAAI,CAACtF,OAAO;QAApDuF,MAAM,GAAAD,cAAA,CAANC,MAAM;QAAEC,SAAS,GAAAF,cAAA,CAATE,SAAS;QAAEC,UAAU,GAAAH,cAAA,CAAVG,UAAU;QAAExI,IAAI,GAAAqI,cAAA,CAAJrI,IAAI;MAE3C,OAAAmI,KAAA,GAAOxK,OAAO,CAAC2K,MAAM,CAAC,eACpB9K,KAAA,CAAA+E,aAAA,CAAC6F,MAAM,EAAAD,KAAA,CAAAM,EAAA,WAAAvC,aAAA,KAAAwC,YAAA;QAAA,OAAoB;MAAC,GAAAR,IAAA,KACzB,IAAI,CAACxC,YAAY,EAAE,eACpBlI,KAAA,CAAA+E,aAAA,CAACvE,IAAI,EAAAmK,KAAA,CAAAM,EAAA;QAAA,QACGzI,IAAI;QAAA,SACH,CAAC,IAAI,CAACoD,MAAM,EAAE,IAAI,CAACG,MAAM,CAAC;QAAA,SAC1BgF,SAAS;QAAA,UACRC,UAAU;QAAA,aACP,IAAI,CAACpC;MAAS,IAExB,IAAI,CAACa,UAAU,EAAE,EACjB,IAAI,CAAC0B,WAAW,EAAE,EAClB,IAAI,CAACC,aAAa,EAAE,CAChB,CACA;IAEb;EAAC;EAAA,OAAAxK,aAAA;AAAA,EAnZOX,SAAS;AAoZlBoB,eAAA,CAvZqBT,aAAa,WAIX,CAAC,CAAC;AAAAS,eAAA,CAJJT,aAAa,kBAK0B;EACzDyH,SAAS,EAAE,QAAQ;EACnBsB,SAAS,EAAE,IAAI;EACfC,SAAS,EAAE,IAAI;EACfyB,WAAW,EAAE,IAAI;EACjB/C,UAAU,EAAE;AACd,CAAC"}

package/lib/es6/component/Chart/AbstractChart.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AbstractChart.type.js.map

package/lib/es6/component/Chart/AbstractChart.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractChart.type.js","names":[],"sources":["../../../../src/component/Chart/AbstractChart.type.ts"],"sourcesContent":["import React from 'react';\nimport { FlexProps } from '@semcore/flex-box';\nimport { LegendItemKey } from '../ChartLegend/LegendItem/LegendItem.type';\nimport Icon from '@semcore/icon';\nimport { BaseChartLegendProps } from '../ChartLegend/BaseLegend.type';\nimport { TrendProps } from '../ChartLegend/LegendFlex/LegendFlex.type';\n\nexport type BaseLegendProps = BaseChartLegendProps & {\n  /**\n   * Disable hover (for transition items legend of each not hovered)\n   */\n  disableHoverItems?: boolean;\n  /**\n   * Disable selectable of data items by checkboxes in Legend\n   */\n  disableSelectItems?: boolean;\n} & (\n    | (TrendProps & {\n        /**\n         * How to render Legend - Flex view. Just list of legend items\n         */\n        legendType?: never | 'Flex';\n        /**\n         * Config for Legend items\n         */\n        legendMap?: LegendDataMap<'Flex'>;\n      })\n    | {\n        /**\n         * How to render Legend - Table view. Table of legend items with some additional information in columns\n         */\n        legendType: 'Table';\n        /**\n         * Config for Legend items\n         */\n        legendMap?: LegendDataMap<'Table'>;\n      }\n  );\n\nexport type ObjectData = Record<string, unknown>;\nexport type ListData = ObjectData[];\n\nexport type BaseChartProps<T extends ListData | ObjectData> = FlexProps & {\n  /**\n   * Chart data. For all charts except Donut(Pie), Radar and Venn should be an Array\n   */\n  data: T;\n  /**\n   * Width of plot\n   */\n  plotWidth: number;\n  /**\n   * Height of plot\n   */\n  plotHeight: number;\n  /**\n   * Margin (for Y axis points) from left side of chart container to Y axis\n   */\n  marginY?: number;\n  /**\n   * Margin (for X axis points) from bottom of chart container to X axis\n   */\n  marginX?: number;\n  /**\n   * invert axis and show horizontal charts (only for Bars!)\n   */\n  invertAxis?: boolean;\n\n  /**\n   * Show X axis\n   * @default true (for charts with axis: Area, Line, Bar, ScatterPlot, ...)\n   */\n  showXAxis?: boolean;\n  /**\n   * Show Y axis\n   * @default true (for charts with axis: Area, Line, Bar, ScatterPlot, ...)\n   */\n  showYAxis?: boolean;\n  /**\n   * Map with colors for data items\n   */\n  colorMap?: Record<string, string>;\n  /**\n   * Show tooltip's.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Show sum of values for selected point in tooltip\n   */\n  showTotalInTooltip?: boolean;\n  /**\n   * Scale for xAxis (see more in d3-scale)\n   */\n  xScale?: unknown;\n  /**\n   * Scale for yAxis (see more in d3-scale)\n   */\n  yScale?: unknown;\n  /**\n   * Count of ticks for X axis\n   */\n  xTicksCount?: number;\n  /**\n   * Count of ticks for Y axis\n   */\n  yTicksCount?: number;\n  /**\n   * Group key for all array-based charts (for get keys of items for legend except that group key)\n   */\n  groupKey?: string;\n  /**\n   * function for format axis item text\n   */\n  axisXValueFormatter?: (value: unknown) => string;\n  axisYValueFormatter?: (value: unknown) => string;\n  /**\n   * Function for format text for tooltip\n   */\n  tooltipValueFormatter?: (value?: unknown) => string;\n} /**\n * By default, we show the Legend for all charts with more the one data item.\n * For hide the Legend, you should set showLegend prop to `false`.\n */ & (\n    | {\n        /**\n         * Don't show legend\n         */\n        showLegend?: false;\n        legendProps?: never;\n      }\n    | {\n        /**\n         *  By default (if showLegend don't set), for one data item on chart,\n         *  Legend component will be hide, and show for more then 1 data item.\n         *  If set `true` - Legend component will show always.\n         */\n        showLegend?: true;\n        /**\n         * Props for Legend\n         */\n        legendProps?: Partial<BaseLegendProps>;\n      }\n  );\n\ntype LegendDataMap<T extends 'Flex' | 'Table'> = Record<\n  LegendItemKey,\n  {\n    /**\n     * Custom label for legend item (by default use keys from data item object)\n     */\n    label?: string;\n    /**\n     * Additional text after label\n     */\n    additionalInfo?: string;\n    /**\n     * Count after label\n     */\n    count?: number;\n    /**\n     * Custom Icon\n     */\n    icon?: typeof Icon;\n    /**\n     * Flag for uncheck some items by default\n     */\n    defaultChecked?: boolean;\n  } & (T extends 'Table' ? { columns?: React.ReactNode[] } : { columns?: never })\n>;\n"],"mappings":""}

package/lib/es6/component/Chart/AreaChart.js

@@ -0,0 +1,152 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import createComponent from '@semcore/core';
+import { scaleLinear, scaleTime } from 'd3-scale';
+// @ts-ignore
+import { Area, minMax, HoverLine, StackedArea } from '../..';
+import { AbstractChart } from './AbstractChart';
+import { Flex, Box } from '@semcore/flex-box';
+import { Text } from '@semcore/typography';
+var AreaChartComponent = /*#__PURE__*/function (_AbstractChart) {
+  _inherits(AreaChartComponent, _AbstractChart);
+  var _super = _createSuper(AreaChartComponent);
+  function AreaChartComponent() {
+    _classCallCheck(this, AreaChartComponent);
+    return _super.apply(this, arguments);
+  }
+  _createClass(AreaChartComponent, [{
+    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,
+        data = _this$asProps2.data,
+        groupKey = _this$asProps2.groupKey;
+      if (yScale) {
+        return yScale;
+      }
+      var flatValues = _get(_getPrototypeOf(AreaChartComponent.prototype), "flatValues", this);
+      var min = Math.min.apply(Math, _toConsumableArray(flatValues));
+      var max = stacked ? _get(_getPrototypeOf(AreaChartComponent.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: 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: 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)))
+        };
+      });
+    }
+  }]);
+  return AreaChartComponent;
+}(AbstractChart);
+_defineProperty(AreaChartComponent, "displayName", 'Chart.Area');
+export var AreaChart = createComponent(AreaChartComponent);
+//# sourceMappingURL=AreaChart.js.map