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

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

@@ -1,15 +1,8 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, assignProps, Component } from "@semcore/core";
+import { Component, sstyled, assignProps } from "@semcore/core";
+import { Flex, Box } from "@semcore/base-components";
 import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
-import { Flex, Box } from "@semcore/flex-box";
 import { Text } from "@semcore/typography";
 import React, { Fragment } from "react";
 import Plot from "../../Plot.mjs";
@@ -19,470 +12,484 @@ import { YAxis, XAxis } from "../../Axis.mjs";
 import { interpolateValue } from "../../utils.mjs";
 import { makeDataHintsContainer } from "../../a11y/hints.mjs";
 /*!__reshadow-styles__:"../../style/abstract-chart.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (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)}",
+    ".___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__*/
-    "1xuth_gg_"
+    "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 = "n/a";
-var AbstractChart = /* @__PURE__ */ (function(_Component) {
-  function AbstractChart2(props) {
-    var _this;
-    _classCallCheck(this, AbstractChart2);
-    _this = _callSuper(this, AbstractChart2, [props]);
-    _defineProperty(_this, "plotPadding", 6);
-    _defineProperty(_this, "dataHints", makeDataHintsContainer());
-    _defineProperty(_this, "state", {
-      dataDefinitions: _this.getDefaultDataDefinitions(),
+const NOT_A_VALUE = "n/a";
+class AbstractChart extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "plotPadding", 6);
+    _defineProperty(this, "dataHints", makeDataHintsContainer());
+    _defineProperty(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);
   }
-  _inherits(AbstractChart2, _Component);
-  return _createClass(AbstractChart2, [{
-    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 : void 0,
-          checked: (_legendData$defaultCh = legendData === null || legendData === void 0 ? void 0 : legendData.defaultChecked) !== null && _legendData$defaultCh !== void 0 ? _legendData$defaultCh : true,
-          color: _this2.resolveColor(key, index),
-          columns: []
-        };
-        if (legendData !== null && legendData !== void 0 && legendData.additionalInfo || legendData !== null && legendData !== void 0 && legendData.count) {
-          dataDefinition.additionalInfo = legendData.additionalInfo ? {
-            label: legendData.additionalInfo
-          } : legendData.count ? {
-            count: legendData.count
-          } : void 0;
+  }
+  getDefaultDataDefinitions() {
+    const {
+      data,
+      legendProps
+    } = this.props;
+    return this.dataKeys.map((key, index) => {
+      var _a;
+      const legendData = (_a = legendProps == null ? void 0 : legendProps.legendMap) == null ? void 0 : _a[key];
+      const dataDefinition = {
+        id: key,
+        label: (legendData == null ? void 0 : legendData.label) ?? key,
+        icon: (legendData == null ? void 0 : legendData.icon) ?? void 0,
+        checked: (legendData == null ? void 0 : legendData.defaultChecked) ?? true,
+        color: this.resolveColor(key, index),
+        columns: []
+      };
+      if ((legendData == null ? void 0 : legendData.additionalInfo) || (legendData == null ? void 0 : legendData.count)) {
+        dataDefinition.additionalInfo = legendData.additionalInfo ? {
+          label: legendData.additionalInfo
+        } : legendData.count ? {
+          count: legendData.count
+        } : void 0;
+      }
+      if (legendData && "columns" in legendData) {
+        dataDefinition.columns = legendData.columns || [];
+      } else if (!Array.isArray(data)) {
+        let value = void 0;
+        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 = void 0;
-          var dataValue = data[key];
-          if (data instanceof Map) {
-            dataValue = data.get(key);
-          }
-          if (dataValue !== interpolateValue) {
-            value = Number(dataValue);
-          }
-          var total = Object.values(data).reduce(function(sum, i) {
-            if (i !== interpolateValue) {
-              return sum + Number(i);
-            }
-            return sum;
-          }, 0);
-          var percent = value !== void 0 ? (value / total * 100).toFixed(2) : void 0;
-          dataDefinition.columns = [/* @__PURE__ */ React.createElement(Text, {
-            key: "".concat(key, "_percent"),
-            use: "secondary"
-          }, percent !== void 0 ? "".concat(percent, "%") : ""), /* @__PURE__ */ React.createElement(Text, {
-            key: "".concat(key, "_value"),
-            use: value ? "primary" : "secondary"
-          }, value !== null && value !== void 0 ? value : NOT_A_VALUE)];
+        if (dataValue !== 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 !== interpolateValue) {
+            return sum + Number(i);
+          }
+          return sum;
+        }, 0);
+        const percent = value !== void 0 ? (value / total * 100).toFixed(2) : void 0;
+        dataDefinition.columns = [/* @__PURE__ */ React.createElement(Text, {
+          key: `${key}_percent`,
+          use: "secondary"
+        }, percent !== void 0 ? `${percent}%` : ""), /* @__PURE__ */ React.createElement(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 void 0;
+    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 void 0;
     }
-  }, {
-    key: "yTicks",
-    get: function get() {
-      var _this$asProps2 = this.asProps, data = _this$asProps2.data, invertAxis = _this$asProps2.invertAxis, xTicksCount = _this$asProps2.xTicksCount, yTicksCount = _this$asProps2.yTicksCount;
-      var scale = this.yScale;
-      if (Array.isArray(data) && "ticks" in scale) {
-        if (invertAxis && xTicksCount) {
-          return scale.ticks(xTicksCount);
-        } else if (yTicksCount) {
-          return scale.ticks(yTicksCount);
-        }
-        return void 0;
+    return void 0;
+  }
+  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 void 0;
     }
-  }, {
-    key: "flatValues",
-    get: function get() {
-      var _this$asProps3 = this.asProps, data = _this$asProps3.data, groupKey = _this$asProps3.groupKey;
-      var values = Array.isArray(data) ? data : Object.values(data);
-      var flatValues = values.reduce(function(result, item) {
-        if (!groupKey && typeof item === "number") {
-          result.add(item);
-        } else {
-          Object.entries(item).forEach(function(_ref5) {
-            var _ref6 = _slicedToArray(_ref5, 2), key = _ref6[0], value = _ref6[1];
-            if (key !== groupKey && typeof value === "number") {
-              result.add(value);
-            }
-          });
-        }
-        return result;
-      }, /* @__PURE__ */ new Set());
-      return flatValues;
-    }
-  }, {
-    key: "maxStackedValue",
-    get: function get() {
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey;
-      if (!Array.isArray(data)) {
-        var _max = Object.values(data).reduce(function(sum, val) {
-          if (typeof val === "number") {
-            sum = sum + val;
+    return void 0;
+  }
+  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(max2, item) {
-        var barSum = Object.entries(item).reduce(function(sum, _ref7) {
-          var _ref8 = _slicedToArray(_ref7, 2), key = _ref8[0], val = _ref8[1];
-          if (key === groupKey) {
-            return sum;
-          }
-          if (typeof val === "number") {
-            return sum + val;
-          }
-          if (val instanceof Date && !Number.isNaN(val.getMilliseconds())) {
-            return sum + val.getMilliseconds();
-          }
-          return sum;
-        }, 0);
-        if (barSum > max2) {
-          max2 = barSum;
+      return result;
+    }, /* @__PURE__ */ new Set());
+    return flatValues;
+  }
+  get maxStackedValue() {
+    const {
+      data,
+      groupKey
+    } = this.asProps;
+    if (!Array.isArray(data)) {
+      const max2 = Object.values(data).reduce((sum, val) => {
+        if (typeof val === "number") {
+          sum = sum + val;
         }
-        return max2;
+        return sum;
       }, 0);
-      return max;
+      return max2;
     }
-  }, {
-    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((max2, 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 > max2) {
+        max2 = 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 max2;
+    }, 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, _toConsumableArray(values));
-      var min = Math.min.apply(Math, _toConsumableArray(values));
-      var avg = (max + min) / 2;
-      var count = Math.round(Math.log10(avg));
-      var valueScale = 100 / Math.pow(10, count);
-      return valueScale;
+      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
-        };
-      });
+    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) {
+    var _a;
+    return ((_a = this.props.colorMap) == null ? void 0 : _a[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 === void 0 || value === 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 tooltipValueFormatter2 = this.asProps.tooltipValueFormatter;
-      if (tooltipValueFormatter2) {
-        return tooltipValueFormatter2(value);
-      }
-      if (value === void 0 || value === 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 === void 0 && 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 ? void 0 : callAllEventHandlers(lProps.onChangeVisibleItem, this.handleChangeVisible),
+      "onMouseEnterItem": lProps.disableHoverItems ? void 0 : callAllEventHandlers(lProps.onMouseEnterItem, this.handleMouseEnter),
+      "onMouseLeaveItem": lProps.disableHoverItems ? void 0 : callAllEventHandlers(lProps.onMouseLeaveItem, this.handleMouseLeave),
+      "aria-label": this.getLegendAriaLabel()
+    };
+    if (lProps.legendType === "Table") {
+      return /* @__PURE__ */ React.createElement(LegendTable, commonLegendProps);
     }
-  }, {
-    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 === void 0 && this.dataKeys.length === 1 || showLegend === false
-      ) {
-        return null;
-      }
-      var _this$state = this.state, dataDefinitions = _this$state.dataDefinitions, withTrend = _this$state.withTrend;
-      var lProps = _objectSpread(_objectSpread({}, this.defaultLegendProps()), legendProps);
-      var commonLegendProps = {
-        "dataHints": this.dataHints,
-        "items": dataDefinitions,
-        "size": lProps.size,
-        "shape": lProps.shape,
-        "w": lProps.w,
-        "h": lProps.h,
-        patterns,
-        "direction": (_lProps$direction = lProps.direction) !== null && _lProps$direction !== void 0 ? _lProps$direction : direction === "row" || direction === "row-reverse" ? "column" : "row",
-        "onChangeVisibleItem": lProps.disableSelectItems ? void 0 : callAllEventHandlers(lProps.onChangeVisibleItem, this.handleChangeVisible),
-        "onMouseEnterItem": lProps.disableHoverItems ? void 0 : callAllEventHandlers(lProps.onMouseEnterItem, this.handleMouseEnter),
-        "onMouseLeaveItem": lProps.disableHoverItems ? void 0 : callAllEventHandlers(lProps.onMouseLeaveItem, this.handleMouseLeave),
-        "aria-label": this.getLegendAriaLabel()
+    if ("withTrend" in lProps) {
+      const flexLegendProps = {
+        ...commonLegendProps,
+        withTrend: true,
+        trendLabel: lProps.trendLabel,
+        trendIsVisible: withTrend,
+        onTrendIsVisibleChange: this.handleWithTrendChange
       };
-      if (lProps.legendType === "Table") {
-        return /* @__PURE__ */ React.createElement(LegendTable, commonLegendProps);
-      }
-      if ("withTrend" in lProps) {
-        var flexLegendProps = _objectSpread(_objectSpread({}, commonLegendProps), {}, {
-          withTrend: true,
-          trendLabel: lProps.trendLabel,
-          trendIsVisible: withTrend,
-          onTrendIsVisibleChange: this.handleWithTrendChange
-        });
-        return /* @__PURE__ */ React.createElement(LegendFlex, flexLegendProps);
-      }
-      return /* @__PURE__ */ React.createElement(LegendFlex, commonLegendProps);
+      return /* @__PURE__ */ React.createElement(LegendFlex, 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)
-        };
-      } : void 0;
-      var childrenY = axisYValueFormatter ? function(_ref0) {
-        var value = _ref0.value;
-        return {
-          children: axisYValueFormatter(value)
-        };
-      } : void 0;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, showYAxis && /* @__PURE__ */ React.createElement(YAxis, null, yTicks ? /* @__PURE__ */ React.createElement(YAxis.Ticks, {
-        multiline: multilineYTicks,
-        ticks: yTicks
-      }, childrenY) : /* @__PURE__ */ React.createElement(YAxis.Ticks, {
-        multiline: multilineYTicks
-      }, childrenY), invertAxis !== true && (yTicks ? /* @__PURE__ */ React.createElement(YAxis.Grid, {
-        ticks: yTicks
-      }) : /* @__PURE__ */ React.createElement(YAxis.Grid, null))), showXAxis && /* @__PURE__ */ React.createElement(XAxis, null, xTicks ? /* @__PURE__ */ React.createElement(XAxis.Ticks, {
-        multiline: multilineXTicks,
-        ticks: xTicks
-      }, childrenX) : /* @__PURE__ */ React.createElement(XAxis.Ticks, {
-        multiline: multilineXTicks
-      }, childrenX), invertAxis === true && (xTicks ? /* @__PURE__ */ React.createElement(XAxis.Grid, {
-        ticks: xTicks
-      }) : /* @__PURE__ */ React.createElement(XAxis.Grid, null))));
+    return /* @__PURE__ */ React.createElement(LegendFlex, 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 = Box;
-      var Tooltip = options.Tooltip, dataItem = options.dataItem;
-      var _this$asProps7 = this.asProps, styles = _this$asProps7.styles, groupKey = _this$asProps7.groupKey;
-      var dataDefinitions = this.state.dataDefinitions;
-      var title = (_dataItem = dataItem[groupKey]) === null || _dataItem === void 0 ? void 0 : _dataItem.toString();
-      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(Flex, _ref3.cn("Flex", {
-        "direction": "column"
-      }), title && /* @__PURE__ */ React.createElement(Tooltip.Title, null, title), /* @__PURE__ */ React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", _objectSpread({}, assignProps({
+    const xTicks = this.xTicks;
+    const yTicks = this.yTicks;
+    const childrenX = axisXValueFormatter ? ({
+      value
+    }) => ({
+      children: axisXValueFormatter(value)
+    }) : void 0;
+    const childrenY = axisYValueFormatter ? ({
+      value
+    }) => ({
+      children: axisYValueFormatter(value)
+    }) : void 0;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, showYAxis && /* @__PURE__ */ React.createElement(YAxis, null, yTicks ? /* @__PURE__ */ React.createElement(YAxis.Ticks, {
+      multiline: multilineYTicks,
+      ticks: yTicks
+    }, childrenY) : /* @__PURE__ */ React.createElement(YAxis.Ticks, {
+      multiline: multilineYTicks
+    }, childrenY), invertAxis !== true && (yTicks ? /* @__PURE__ */ React.createElement(YAxis.Grid, {
+      ticks: yTicks
+    }) : /* @__PURE__ */ React.createElement(YAxis.Grid, null))), showXAxis && /* @__PURE__ */ React.createElement(XAxis, null, xTicks ? /* @__PURE__ */ React.createElement(XAxis.Ticks, {
+      multiline: multilineXTicks,
+      ticks: xTicks
+    }, childrenX) : /* @__PURE__ */ React.createElement(XAxis.Ticks, {
+      multiline: multilineXTicks
+    }, childrenX), invertAxis === true && (xTicks ? /* @__PURE__ */ React.createElement(XAxis.Grid, {
+      ticks: xTicks
+    }) : /* @__PURE__ */ React.createElement(XAxis.Grid, null))));
+  }
+  getTooltipChildren(options) {
+    var _a;
+    var _ref = this.asProps, _ref3;
+    const STooltipChildrenWrapper = Box;
+    const {
+      Tooltip,
+      dataItem
+    } = options;
+    const {
+      styles,
+      groupKey
+    } = this.asProps;
+    const {
+      dataDefinitions
+    } = this.state;
+    const title = (_a = dataItem[groupKey]) == null ? void 0 : _a.toString();
+    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(Flex, _ref3.cn("Flex", {
+      "direction": "column"
+    }), title && /* @__PURE__ */ React.createElement(Tooltip.Title, null, title), /* @__PURE__ */ React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", {
+      ...assignProps({
         "columnsCount": "2",
         "__excludeProps": ["data"]
-      }, _ref))), dataDefinitions.map(function(item) {
-        return item.checked && /* @__PURE__ */ React.createElement(Fragment, {
-          key: item.id
-        }, /* @__PURE__ */ React.createElement(Tooltip.Dot, {
-          mr: 2,
-          color: item.color
-        }, item.label), /* @__PURE__ */ React.createElement(Text, {
-          textAlign: "end",
-          bold: true
-        }, _this3.tooltipValueFormatter(dataItem[item.id])));
-      }), this.renderTooltipTotalLine(dataItem)));
-    }
-  }, {
-    key: "renderTooltipTotalLine",
-    value: function renderTooltipTotalLine(dataItem) {
-      var showTotalInTooltip = this.asProps.showTotalInTooltip;
-      if (!showTotalInTooltip) {
-        return null;
-      }
-      var total = this.totalValue(dataItem);
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, {
-        mt: 2,
-        mr: 2
-      }, "Total"), /* @__PURE__ */ React.createElement(Text, {
-        mt: 2,
+      }, _ref)
+    }), dataDefinitions.map((item) => {
+      return item.checked && /* @__PURE__ */ React.createElement(Fragment, {
+        key: item.id
+      }, /* @__PURE__ */ React.createElement(Tooltip.Dot, {
+        mr: 2,
+        color: item.color
+      }, item.label), /* @__PURE__ */ React.createElement(Text, {
         textAlign: "end",
         bold: true
-      }, 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 = 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 = extractAriaProps(this.asProps), extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref4.cn("SChart", _objectSpread({}, assignProps({
+    const total = this.totalValue(dataItem);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, {
+      mt: 2,
+      mr: 2
+    }, "Total"), /* @__PURE__ */ React.createElement(Text, {
+      mt: 2,
+      textAlign: "end",
+      bold: true
+    }, Number.isNaN(total) ? NOT_A_VALUE : total));
+  }
+  render() {
+    var _ref2 = this.asProps, _ref4;
+    const SChart = Flex;
+    const {
+      styles,
+      plotWidth,
+      plotHeight,
+      data,
+      patterns,
+      a11yAltTextConfig,
+      duration,
+      eventEmitter,
+      showTooltip
+    } = this.asProps;
+    const {
+      extractedAriaProps
+    } = extractAriaProps(this.asProps);
+    return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref4.cn("SChart", {
+      ...assignProps({
         "gap": 5,
         "__excludeProps": ["data", "eventEmitter"],
         "role": "group"
-      }, _ref2))), this.renderLegend(), /* @__PURE__ */ React.createElement(Plot, _ref4.cn("Plot", _objectSpread({
-        "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()));
-    }
-  }]);
-})(Component);
+      }, _ref2)
+    }), this.renderLegend(), /* @__PURE__ */ React.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()));
+  }
+}
 _defineProperty(AbstractChart, "style", style);
 _defineProperty(AbstractChart, "defaultProps", {
   direction: "column",