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

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

@@ -1,24 +1,16 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NOT_A_VALUE = exports.AbstractChart = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
 var _assignProps3 = require("@semcore/core/lib/utils/assignProps");
-var _flexBox = require("@semcore/flex-box");
 var _typography = require("@semcore/typography");
 var _react = _interopRequireWildcard(require("react"));
 var _ = require("../..");
@@ -28,518 +20,481 @@ var _ChartLegend = _interopRequireWildcard(require("../ChartLegend"));
 // @ts-ignore
 // @ts-ignore
 /*!__reshadow-styles__:"../../style/abstract-chart.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STooltipChildrenWrapper_1xuth_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_1xuth_gg_._columnsCount_2_1xuth_gg_{grid-template-columns:auto minmax(28px,max-content)}.___STooltipChildrenWrapper_1xuth_gg_._columnsCount_3_1xuth_gg_{grid-template-columns:auto minmax(28px,max-content) minmax(28px,max-content)}", /*__inner_css_end__*/"1xuth_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STooltipChildrenWrapper_135h8_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_135h8_gg_._columnsCount_2_135h8_gg_{grid-template-columns:auto minmax(28px,max-content)}.___STooltipChildrenWrapper_135h8_gg_._columnsCount_3_135h8_gg_{grid-template-columns:auto minmax(28px,max-content) minmax(28px,max-content)}", /*__inner_css_end__*/"135h8_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__STooltipChildrenWrapper": "___STooltipChildrenWrapper_1xuth_gg_",
-  "_columnsCount_2": "_columnsCount_2_1xuth_gg_",
-  "_columnsCount_3": "_columnsCount_3_1xuth_gg_"
+  "__STooltipChildrenWrapper": "___STooltipChildrenWrapper_135h8_gg_",
+  "_columnsCount_2": "_columnsCount_2_135h8_gg_",
+  "_columnsCount_3": "_columnsCount_3_135h8_gg_"
 });
-var NOT_A_VALUE = exports.NOT_A_VALUE = 'n/a';
-var AbstractChart = exports.AbstractChart = /*#__PURE__*/function (_Component) {
-  function AbstractChart(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, AbstractChart);
-    _this = (0, _callSuper2["default"])(this, AbstractChart, [props]);
+const NOT_A_VALUE = exports.NOT_A_VALUE = 'n/a';
+class AbstractChart extends _core.Component {
+  constructor(props) {
+    super(props);
     /**
      * Padding from the end's of chart to the container (except axis sides)
      */
-    (0, _defineProperty2["default"])(_this, "plotPadding", 6);
-    (0, _defineProperty2["default"])(_this, "dataHints", (0, _hints.makeDataHintsContainer)());
-    (0, _defineProperty2["default"])(_this, "state", {
-      dataDefinitions: _this.getDefaultDataDefinitions(),
+    (0, _defineProperty2.default)(this, "plotPadding", 6);
+    (0, _defineProperty2.default)(this, "dataHints", (0, _hints.makeDataHintsContainer)());
+    (0, _defineProperty2.default)(this, "state", {
+      dataDefinitions: this.getDefaultDataDefinitions(),
       highlightedLine: -1,
       withTrend: false
     });
-    _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);
-    return _this;
+    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);
   }
-  (0, _inherits2["default"])(AbstractChart, _Component);
-  return (0, _createClass2["default"])(AbstractChart, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) {
-        this.setState({
-          dataDefinitions: this.getDefaultDataDefinitions()
-        });
-      }
+  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 || (_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;
+  }
+  getDefaultDataDefinitions() {
+    const {
+      data,
+      legendProps
+    } = this.props;
+    return this.dataKeys.map((key, index) => {
+      const legendData = legendProps?.legendMap?.[key];
+      const dataDefinition = {
+        id: key,
+        label: legendData?.label ?? key,
+        icon: legendData?.icon ?? undefined,
+        checked: legendData?.defaultChecked ?? true,
+        color: this.resolveColor(key, index),
+        columns: []
+      };
+      if (legendData?.additionalInfo || 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)) {
+        let value = undefined;
+        let dataValue = data[key];
+        if (data instanceof Map) {
+          dataValue = data.get(key);
         }
-        if (legendData && 'columns' in legendData) {
-          dataDefinition.columns = legendData.columns || [];
-        } else if (!Array.isArray(data)) {
-          var value = undefined;
-          var dataValue = data[key];
-          if (data instanceof Map) {
-            dataValue = data.get(key);
-          }
-          if (dataValue !== _utils.interpolateValue) {
-            value = Number(dataValue);
-          }
-          var total = Object.values(data).reduce(function (sum, i) {
-            if (i !== _utils.interpolateValue) {
-              return sum + Number(i);
-            }
-            return sum;
-          }, 0);
-          var percent = value !== undefined ? (value / total * 100).toFixed(2) : undefined;
-          dataDefinition.columns = [/*#__PURE__*/_react["default"].createElement(_typography.Text, {
-            key: "".concat(key, "_percent"),
-            use: "secondary"
-          }, percent !== undefined ? "".concat(percent, "%") : ''), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
-            key: "".concat(key, "_value"),
-            use: value ? 'primary' : 'secondary'
-          }, value !== null && value !== void 0 ? value : NOT_A_VALUE)];
+        if (dataValue !== _utils.interpolateValue) {
+          value = Number(dataValue);
         }
-        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);
+        const total = Object.values(data).reduce((sum, i) => {
+          if (i !== _utils.interpolateValue) {
+            return sum + Number(i);
+          }
+          return sum;
+        }, 0);
+        const percent = value !== undefined ? (value / total * 100).toFixed(2) : undefined;
+        dataDefinition.columns = [/*#__PURE__*/_react.default.createElement(_typography.Text, {
+          key: `${key}_percent`,
+          use: "secondary"
+        }, percent !== undefined ? `${percent}%` : ''), /*#__PURE__*/_react.default.createElement(_typography.Text, {
+          key: `${key}_value`,
+          use: value ? 'primary' : 'secondary'
+        }, value ?? NOT_A_VALUE)];
       }
-      return dataKeys;
+      return dataDefinition;
+    });
+  }
+  get dataKeys() {
+    const {
+      data,
+      groupKey
+    } = this.props;
+    let dataKeys;
+    if (Array.isArray(data) && groupKey) {
+      dataKeys = Object.keys(data[0]).filter(key => key !== groupKey);
+    } else {
+      dataKeys = Object.keys(data);
     }
-  }, {
-    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 dataKeys;
+  }
+  get xTicks() {
+    const {
+      data,
+      invertAxis,
+      xTicksCount,
+      yTicksCount
+    } = this.asProps;
+    const 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;
     }
-  }, {
-    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;
+  }
+  get yTicks() {
+    const {
+      data,
+      invertAxis,
+      xTicksCount,
+      yTicksCount
+    } = this.asProps;
+    const 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;
     }
-  }, {
-    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 (_ref5) {
-            var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
-              key = _ref6[0],
-              value = _ref6[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 undefined;
+  }
+  get flatValues() {
+    const {
+      data,
+      groupKey
+    } = this.asProps;
+    const values = Array.isArray(data) ? data : Object.values(data);
+    const flatValues = values.reduce((result, item) => {
+      if (!groupKey && typeof item === 'number') {
+        result.add(item);
+      } else {
+        Object.entries(item).forEach(([key, value]) => {
+          if (key !== groupKey && typeof value === 'number') {
+            result.add(value);
           }
-          return sum;
-        }, 0);
-        return _max;
+        });
       }
-      var max = data.reduce(function (max, item) {
-        var barSum = Object.entries(item).reduce(function (sum, _ref7) {
-          var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
-            key = _ref8[0],
-            val = _ref8[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 result;
+    }, new Set());
+    return flatValues;
+  }
+  get maxStackedValue() {
+    const {
+      data,
+      groupKey
+    } = this.asProps;
+    if (!Array.isArray(data)) {
+      const max = Object.values(data).reduce((sum, val) => {
+        if (typeof val === 'number') {
+          sum = sum + val;
         }
-        return max;
+        return sum;
       }, 0);
       return max;
     }
-  }, {
-    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;
+    const max = data.reduce((max, item) => {
+      const barSum = Object.entries(item).reduce((sum, [key, val]) => {
+        if (key === groupKey) {
           return sum;
         }
-        if (typeof item === 'number') {
-          allNotAValue = false;
-          return sum + item;
+        if (typeof val === 'number') {
+          return sum + val;
         }
-        if (item instanceof Date && !Number.isNaN(item.getMilliseconds())) {
-          allNotAValue = false;
-          return sum + item.getMilliseconds();
+        if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {
+          return sum + val.getMilliseconds();
         }
         return sum;
       }, 0);
-      if (allNotAValue) {
-        return Number.NaN;
+      if (barSum > max) {
+        max = barSum;
       }
-      return total;
-    }
-  }, {
-    key: "percentValue",
-    value: function percentValue(data, key) {
-      var total = this.totalValue(data);
-      var value = data[key];
-      if (typeof value === 'number' && total !== 0) {
-        var percent = Math.round(100 * value / total);
-        return "".concat(percent, "%");
+      return max;
+    }, 0);
+    return max;
+  }
+  totalValue(data) {
+    const {
+      dataDefinitions
+    } = this.state;
+    let allNotAValue = true;
+    const total = dataDefinitions.reduce((sum, legendItem) => {
+      const item = data[legendItem.id];
+      if (item === null) {
+        allNotAValue = false;
+        return sum;
       }
-      if (value === null) {
-        return "0%";
+      if (typeof item === 'number') {
+        allNotAValue = false;
+        return sum + item;
       }
-      return NOT_A_VALUE;
-    }
-  }, {
-    key: "getValueScale",
-    value: function getValueScale(values) {
-      var max = Math.max.apply(Math, (0, _toConsumableArray2["default"])(values));
-      var min = Math.min.apply(Math, (0, _toConsumableArray2["default"])(values));
-      var avg = (max + min) / 2;
-      var count = Math.round(Math.log10(avg));
-      var valueScale = 100 / Math.pow(10, count);
-      return valueScale;
+      if (item instanceof Date && !Number.isNaN(item.getMilliseconds())) {
+        allNotAValue = false;
+        return sum + item.getMilliseconds();
+      }
+      return sum;
+    }, 0);
+    if (allNotAValue) {
+      return Number.NaN;
     }
-  }, {
-    key: "setHighlightedLine",
-    value: function setHighlightedLine(index) {
-      this.setState({
-        highlightedLine: index
-      });
+    return total;
+  }
+  percentValue(data, key) {
+    const total = this.totalValue(data);
+    const value = data[key];
+    if (typeof value === 'number' && total !== 0) {
+      const percent = Math.round(100 * value / total);
+      return `${percent}%`;
     }
-  }, {
-    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
-        };
-      });
+    if (value === null) {
+      return `0%`;
     }
-  }, {
-    key: "handleWithTrendChange",
-    value: function handleWithTrendChange(isVisible) {
-      this.setState({
-        withTrend: isVisible
+    return NOT_A_VALUE;
+  }
+  getValueScale(values) {
+    const max = Math.max(...values);
+    const min = Math.min(...values);
+    const avg = (max + min) / 2;
+    const count = Math.round(Math.log10(avg));
+    const valueScale = 100 / 10 ** count;
+    return valueScale;
+  }
+  setHighlightedLine(index) {
+    this.setState({
+      highlightedLine: index
+    });
+  }
+  handleChangeVisible(id, isVisible) {
+    this.setState(prevState => {
+      const dataDefinitions = prevState.dataDefinitions.map(item => {
+        if (item.id === id) {
+          item.checked = isVisible;
+        }
+        return item;
       });
+      return {
+        dataDefinitions
+      };
+    });
+  }
+  handleWithTrendChange(isVisible) {
+    this.setState({
+      withTrend: isVisible
+    });
+  }
+  handleMouseEnter(id) {
+    this.setHighlightedLine(this.state.dataDefinitions.findIndex(line => line.id === id));
+  }
+  handleMouseLeave() {
+    this.setHighlightedLine(-1);
+  }
+  resolveColor(id, index) {
+    return this.props.colorMap?.[id] ?? `chart-palette-order-${index + 1}`;
+  }
+  tooltipValueFormatter(value) {
+    const {
+      tooltipValueFormatter
+    } = this.asProps;
+    if (tooltipValueFormatter) {
+      return tooltipValueFormatter(value);
     }
-  }, {
-    key: "handleMouseEnter",
-    value: function handleMouseEnter(id) {
-      this.setHighlightedLine(this.state.dataDefinitions.findIndex(function (line) {
-        return line.id === id;
-      }));
+    if (value === undefined || value === _utils.interpolateValue) {
+      return NOT_A_VALUE;
     }
-  }, {
-    key: "handleMouseLeave",
-    value: function handleMouseLeave() {
-      this.setHighlightedLine(-1);
+    if (value === null) {
+      return '0';
     }
-  }, {
-    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);
+    if (value instanceof Date) {
+      return value.toDateString();
     }
-  }, {
-    key: "tooltipValueFormatter",
-    value: function tooltipValueFormatter(value) {
-      var tooltipValueFormatter = this.asProps.tooltipValueFormatter;
-      if (tooltipValueFormatter) {
-        return tooltipValueFormatter(value);
-      }
-      if (value === undefined || value === _utils.interpolateValue) {
-        return NOT_A_VALUE;
-      }
-      if (value === null) {
-        return '0';
-      }
-      if (value instanceof Date) {
-        return value.toDateString();
-      }
-      return value.toString();
+    return value.toString();
+  }
+  defaultLegendProps() {
+    return {
+      legendType: 'Flex'
+    };
+  }
+  renderLegend() {
+    const {
+      legendProps,
+      direction,
+      showLegend,
+      patterns
+    } = this.asProps;
+    if (
+    // we hide Legend for one item on chart except not manually set to show.
+    showLegend === undefined && this.dataKeys.length === 1 || showLegend === false) {
+      return null;
     }
-  }, {
-    key: "defaultLegendProps",
-    value: function defaultLegendProps() {
-      return {
-        legendType: 'Flex'
-      };
+    const {
+      dataDefinitions,
+      withTrend
+    } = this.state;
+    const lProps = {
+      ...this.defaultLegendProps(),
+      ...legendProps
+    };
+    const commonLegendProps = {
+      'dataHints': this.dataHints,
+      'items': dataDefinitions,
+      'size': lProps.size,
+      'shape': lProps.shape,
+      'w': lProps.w,
+      'h': lProps.h,
+      patterns,
+      'direction': lProps.direction ?? (direction === 'row' || direction === 'row-reverse' ? 'column' : 'row'),
+      'onChangeVisibleItem': lProps.disableSelectItems ? undefined : (0, _assignProps3.callAllEventHandlers)(lProps.onChangeVisibleItem, this.handleChangeVisible),
+      'onMouseEnterItem': lProps.disableHoverItems ? undefined : (0, _assignProps3.callAllEventHandlers)(lProps.onMouseEnterItem, this.handleMouseEnter),
+      'onMouseLeaveItem': lProps.disableHoverItems ? undefined : (0, _assignProps3.callAllEventHandlers)(lProps.onMouseLeaveItem, this.handleMouseLeave),
+      'aria-label': this.getLegendAriaLabel()
+    };
+    if (lProps.legendType === 'Table') {
+      return /*#__PURE__*/_react.default.createElement(_ChartLegend.ChartLegendTable, commonLegendProps);
     }
-  }, {
-    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 (
-      // we hide Legend for one item on chart except not manually set to show.
-      showLegend === undefined && this.dataKeys.length === 1 || showLegend === false) {
-        return null;
-      }
-      var _this$state = this.state,
-        dataDefinitions = _this$state.dataDefinitions,
-        withTrend = _this$state.withTrend;
-      var lProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, this.defaultLegendProps()), legendProps);
-      var commonLegendProps = {
-        'dataHints': this.dataHints,
-        'items': dataDefinitions,
-        'size': lProps.size,
-        'shape': lProps.shape,
-        'w': lProps.w,
-        'h': lProps.h,
-        patterns: patterns,
-        'direction': (_lProps$direction = lProps.direction) !== null && _lProps$direction !== void 0 ? _lProps$direction : direction === 'row' || direction === 'row-reverse' ? 'column' : 'row',
-        'onChangeVisibleItem': lProps.disableSelectItems ? undefined : (0, _assignProps3.callAllEventHandlers)(lProps.onChangeVisibleItem, this.handleChangeVisible),
-        'onMouseEnterItem': lProps.disableHoverItems ? undefined : (0, _assignProps3.callAllEventHandlers)(lProps.onMouseEnterItem, this.handleMouseEnter),
-        'onMouseLeaveItem': lProps.disableHoverItems ? undefined : (0, _assignProps3.callAllEventHandlers)(lProps.onMouseLeaveItem, this.handleMouseLeave),
-        'aria-label': this.getLegendAriaLabel()
+    if ('withTrend' in lProps) {
+      const flexLegendProps = {
+        ...commonLegendProps,
+        withTrend: true,
+        trendLabel: lProps.trendLabel,
+        trendIsVisible: withTrend,
+        onTrendIsVisibleChange: this.handleWithTrendChange
       };
-      if (lProps.legendType === 'Table') {
-        return /*#__PURE__*/_react["default"].createElement(_ChartLegend.ChartLegendTable, commonLegendProps);
-      }
-      if ('withTrend' in lProps) {
-        var flexLegendProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, commonLegendProps), {}, {
-          withTrend: true,
-          trendLabel: lProps.trendLabel,
-          trendIsVisible: withTrend,
-          onTrendIsVisibleChange: this.handleWithTrendChange
-        });
-        return /*#__PURE__*/_react["default"].createElement(_ChartLegend["default"], flexLegendProps);
-      }
-      return /*#__PURE__*/_react["default"].createElement(_ChartLegend["default"], commonLegendProps);
+      return /*#__PURE__*/_react.default.createElement(_ChartLegend.default, flexLegendProps);
     }
-  }, {
-    key: "renderAxis",
-    value: function renderAxis() {
-      var _this$asProps6 = this.asProps,
-        invertAxis = _this$asProps6.invertAxis,
-        showXAxis = _this$asProps6.showXAxis,
-        showYAxis = _this$asProps6.showYAxis,
-        data = _this$asProps6.data,
-        axisXValueFormatter = _this$asProps6.axisXValueFormatter,
-        axisYValueFormatter = _this$asProps6.axisYValueFormatter,
-        multilineXTicks = _this$asProps6.multilineXTicks,
-        multilineYTicks = _this$asProps6.multilineYTicks;
-      if (!Array.isArray(data)) {
-        return null;
-      }
-      var xTicks = this.xTicks;
-      var yTicks = this.yTicks;
-      var childrenX = axisXValueFormatter ? function (_ref9) {
-        var value = _ref9.value;
-        return {
-          children: axisXValueFormatter(value)
-        };
-      } : undefined;
-      var childrenY = axisYValueFormatter ? function (_ref0) {
-        var value = _ref0.value;
-        return {
-          children: axisYValueFormatter(value)
-        };
-      } : undefined;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showYAxis && /*#__PURE__*/_react["default"].createElement(_.YAxis, null, yTicks ? /*#__PURE__*/_react["default"].createElement(_.YAxis.Ticks, {
-        multiline: multilineYTicks,
-        ticks: yTicks
-      }, childrenY) : /*#__PURE__*/_react["default"].createElement(_.YAxis.Ticks, {
-        multiline: multilineYTicks
-      }, childrenY), invertAxis !== true && (yTicks ? /*#__PURE__*/_react["default"].createElement(_.YAxis.Grid, {
-        ticks: yTicks
-      }) : /*#__PURE__*/_react["default"].createElement(_.YAxis.Grid, null))), showXAxis && /*#__PURE__*/_react["default"].createElement(_.XAxis, null, xTicks ? /*#__PURE__*/_react["default"].createElement(_.XAxis.Ticks, {
-        multiline: multilineXTicks,
-        ticks: xTicks
-      }, childrenX) : /*#__PURE__*/_react["default"].createElement(_.XAxis.Ticks, {
-        multiline: multilineXTicks
-      }, childrenX), invertAxis === true && (xTicks ? /*#__PURE__*/_react["default"].createElement(_.XAxis.Grid, {
-        ticks: xTicks
-      }) : /*#__PURE__*/_react["default"].createElement(_.XAxis.Grid, null))));
+    return /*#__PURE__*/_react.default.createElement(_ChartLegend.default, commonLegendProps);
+  }
+  renderAxis() {
+    const {
+      invertAxis,
+      showXAxis,
+      showYAxis,
+      data,
+      axisXValueFormatter,
+      axisYValueFormatter,
+      multilineXTicks,
+      multilineYTicks
+    } = this.asProps;
+    if (!Array.isArray(data)) {
+      return null;
     }
-  }, {
-    key: "getTooltipChildren",
-    value: function getTooltipChildren(options) {
-      var _ref = this.asProps,
-        _ref3,
-        _dataItem,
-        _this3 = this;
-      var STooltipChildrenWrapper = _flexBox.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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref3.cn("Flex", {
-        "direction": 'column'
-      }), title && /*#__PURE__*/_react["default"].createElement(Tooltip.Title, null, title), /*#__PURE__*/_react["default"].createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    const xTicks = this.xTicks;
+    const yTicks = this.yTicks;
+    const childrenX = axisXValueFormatter ? ({
+      value
+    }) => ({
+      children: axisXValueFormatter(value)
+    }) : undefined;
+    const childrenY = axisYValueFormatter ? ({
+      value
+    }) => ({
+      children: axisYValueFormatter(value)
+    }) : undefined;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showYAxis && /*#__PURE__*/_react.default.createElement(_.YAxis, null, yTicks ? /*#__PURE__*/_react.default.createElement(_.YAxis.Ticks, {
+      multiline: multilineYTicks,
+      ticks: yTicks
+    }, childrenY) : /*#__PURE__*/_react.default.createElement(_.YAxis.Ticks, {
+      multiline: multilineYTicks
+    }, childrenY), invertAxis !== true && (yTicks ? /*#__PURE__*/_react.default.createElement(_.YAxis.Grid, {
+      ticks: yTicks
+    }) : /*#__PURE__*/_react.default.createElement(_.YAxis.Grid, null))), showXAxis && /*#__PURE__*/_react.default.createElement(_.XAxis, null, xTicks ? /*#__PURE__*/_react.default.createElement(_.XAxis.Ticks, {
+      multiline: multilineXTicks,
+      ticks: xTicks
+    }, childrenX) : /*#__PURE__*/_react.default.createElement(_.XAxis.Ticks, {
+      multiline: multilineXTicks
+    }, childrenX), invertAxis === true && (xTicks ? /*#__PURE__*/_react.default.createElement(_.XAxis.Grid, {
+      ticks: xTicks
+    }) : /*#__PURE__*/_react.default.createElement(_.XAxis.Grid, null))));
+  }
+  getTooltipChildren(options) {
+    var _ref = this.asProps,
+      _ref3;
+    const STooltipChildrenWrapper = _baseComponents.Box;
+    const {
+      Tooltip,
+      dataItem
+    } = options;
+    const {
+      styles,
+      groupKey
+    } = this.asProps;
+    const {
+      dataDefinitions
+    } = this.state;
+    const title = dataItem[groupKey]?.toString();
+    return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref3.cn("Flex", {
+      "direction": 'column'
+    }), title && /*#__PURE__*/_react.default.createElement(Tooltip.Title, null, title), /*#__PURE__*/_react.default.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", {
+      ...(0, _core.assignProps)({
         "columnsCount": '2',
         "__excludeProps": ['data']
-      }, _ref))), dataDefinitions.map(function (item) {
-        return item.checked && /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
-          key: item.id
-        }, /*#__PURE__*/_react["default"].createElement(Tooltip.Dot, {
-          mr: 2,
-          color: item.color
-        }, item.label), /*#__PURE__*/_react["default"].createElement(_typography.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_flexBox.Box, {
-        mt: 2,
-        mr: 2
-      }, "Total"), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
-        mt: 2,
+      }, _ref)
+    }), dataDefinitions.map(item => {
+      return item.checked && /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: item.id
+      }, /*#__PURE__*/_react.default.createElement(Tooltip.Dot, {
+        mr: 2,
+        color: item.color
+      }, item.label), /*#__PURE__*/_react.default.createElement(_typography.Text, {
         textAlign: "end",
         bold: true
-      }, Number.isNaN(total) ? NOT_A_VALUE : total));
+      }, this.tooltipValueFormatter(dataItem[item.id])));
+    }), this.renderTooltipTotalLine(dataItem)));
+  }
+  renderTooltipTotalLine(dataItem) {
+    const {
+      showTotalInTooltip
+    } = this.asProps;
+    if (!showTotalInTooltip) {
+      return null;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps,
-        _ref4;
-      var SChart = _flexBox.Flex;
-      var _this$asProps8 = this.asProps,
-        styles = _this$asProps8.styles,
-        plotWidth = _this$asProps8.plotWidth,
-        plotHeight = _this$asProps8.plotHeight,
-        data = _this$asProps8.data,
-        patterns = _this$asProps8.patterns,
-        a11yAltTextConfig = _this$asProps8.a11yAltTextConfig,
-        duration = _this$asProps8.duration,
-        eventEmitter = _this$asProps8.eventEmitter,
-        showTooltip = _this$asProps8.showTooltip;
-      var _extractAriaProps = (0, _ariaProps.extractAriaProps)(this.asProps),
-        extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SChart, _ref4.cn("SChart", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+    const total = this.totalValue(dataItem);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseComponents.Box, {
+      mt: 2,
+      mr: 2
+    }, "Total"), /*#__PURE__*/_react.default.createElement(_typography.Text, {
+      mt: 2,
+      textAlign: "end",
+      bold: true
+    }, Number.isNaN(total) ? NOT_A_VALUE : total));
+  }
+  render() {
+    var _ref2 = this.asProps,
+      _ref4;
+    const SChart = _baseComponents.Flex;
+    const {
+      styles,
+      plotWidth,
+      plotHeight,
+      data,
+      patterns,
+      a11yAltTextConfig,
+      duration,
+      eventEmitter,
+      showTooltip
+    } = this.asProps;
+    const {
+      extractedAriaProps
+    } = (0, _ariaProps.extractAriaProps)(this.asProps);
+    return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SChart, _ref4.cn("SChart", {
+      ...(0, _core.assignProps)({
         "gap": 5,
         "__excludeProps": ['data', 'eventEmitter'],
         "role": 'group'
-      }, _ref2))), this.renderLegend(), /*#__PURE__*/_react["default"].createElement(_.Plot, _ref4.cn("Plot", (0, _objectSpread2["default"])({
-        "data": data,
-        "scale": [this.xScale, this.yScale],
-        "width": plotWidth,
-        "height": plotHeight,
-        "dataHints": this.dataHints,
-        "a11yAltTextConfig": a11yAltTextConfig,
-        "patterns": patterns,
-        "duration": duration,
-        "eventEmitter": eventEmitter
-      }, extractedAriaProps)), this.renderAxis(), !showTooltip ? null : this.renderTooltip(), this.renderChart()));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(AbstractChart, "style", style);
-(0, _defineProperty2["default"])(AbstractChart, "defaultProps", {
+      }, _ref2)
+    }), this.renderLegend(), /*#__PURE__*/_react.default.createElement(_.Plot, _ref4.cn("Plot", {
+      "data": data,
+      "scale": [this.xScale, this.yScale],
+      "width": plotWidth,
+      "height": plotHeight,
+      "dataHints": this.dataHints,
+      "a11yAltTextConfig": a11yAltTextConfig,
+      "patterns": patterns,
+      "duration": duration,
+      "eventEmitter": eventEmitter,
+      ...extractedAriaProps
+    }), this.renderAxis(), !showTooltip ? null : this.renderTooltip(), this.renderChart()));
+  }
+}
+exports.AbstractChart = AbstractChart;
+(0, _defineProperty2.default)(AbstractChart, "style", style);
+(0, _defineProperty2.default)(AbstractChart, "defaultProps", {
   direction: 'column',
   showXAxis: true,
   showYAxis: true,