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

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

@@ -1,29 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CigaretteChart = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-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 _superPropGet2 = _interopRequireDefault(require("@babel/runtime/helpers/superPropGet"));
-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 _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
 var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
 var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
 var _divider = _interopRequireDefault(require("@semcore/divider"));
-var _flexBox = require("@semcore/flex-box");
 var _typography = require("@semcore/typography");
 var _d3Scale = require("d3-scale");
 var _react = _interopRequireDefault(require("react"));
 var _ = require("../..");
-var _AbstractChart2 = require("./AbstractChart");
+var _AbstractChart = require("./AbstractChart");
 var _AnimatedClipPath = _interopRequireDefault(require("../../AnimatedClipPath"));
 var _intergalacticDynamicLocales = require("../../translations/__intergalactic-dynamic-locales");
 var _utils = require("../../utils");
@@ -32,258 +25,229 @@ var _Cigarette = _interopRequireDefault(require("../Cigarette/Cigarette"));
 
 // @ts-ignore
 
-var wMin = 2;
-var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
-  function CigaretteChartComponent() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, CigaretteChartComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, CigaretteChartComponent, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "plotPadding", 0);
-    (0, _defineProperty2["default"])(_this, "offset", 0);
-    return _this;
+const wMin = 2;
+class CigaretteChartComponent extends _AbstractChart.AbstractChart {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "plotPadding", 0);
+    (0, _defineProperty2.default)(this, "offset", 0);
   }
-  (0, _inherits2["default"])(CigaretteChartComponent, _AbstractChart);
-  return (0, _createClass2["default"])(CigaretteChartComponent, [{
-    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$ : "blue-".concat(5 - index, "00");
-    }
-  }, {
-    key: "getDefaultDataDefinitions",
-    value: function getDefaultDataDefinitions() {
-      var dataDefinitions = (0, _superPropGet2["default"])(CigaretteChartComponent, "getDefaultDataDefinitions", this, 3)([]);
-      return dataDefinitions.map(function (dataDef) {
-        dataDef.columns = dataDef.columns.slice(1);
-        return dataDef;
+  resolveColor(id, index) {
+    return this.props.colorMap?.[id] ?? `blue-${5 - index}00`;
+  }
+  getDefaultDataDefinitions() {
+    const dataDefinitions = super.getDefaultDataDefinitions();
+    return dataDefinitions.map(dataDef => {
+      dataDef.columns = dataDef.columns.slice(1);
+      return dataDef;
+    });
+  }
+  defaultLegendProps() {
+    return {
+      legendType: 'Table',
+      w: 'fit-content'
+    };
+  }
+  get xScale() {
+    const {
+      invertAxis
+    } = this.asProps;
+    return invertAxis ? this.valueScale : this.categoryScale;
+  }
+  get yScale() {
+    const {
+      invertAxis
+    } = this.asProps;
+    return invertAxis ? this.categoryScale : this.valueScale;
+  }
+  renderChart() {
+    const {
+      invertAxis,
+      data,
+      uid,
+      duration,
+      patterns,
+      plotHeight,
+      plotWidth,
+      onClick
+    } = this.asProps;
+    const {
+      dataDefinitions,
+      highlightedLine
+    } = this.state;
+    this.offset = 0;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (invertAxis ? dataDefinitions : [...dataDefinitions].reverse()).map((item, index) => {
+      const value = data[item.id];
+      if (!item.checked || value === _utils.interpolateValue || value === null) {
+        return null;
+      }
+      const absWidth = Math.abs(this.valueScale(value) - Math.max(this.valueScale(this.valueScale.domain()[0]), this.valueScale(0)));
+      const height = (0, _utils.scaleToBand)(this.categoryScale).bandwidth() - 4;
+      const width = value === 0 ? 0 : Math.max(absWidth, wMin * 2) - wMin;
+      const y = 2;
+      const x = index === 0 ? 0 : this.offset;
+      const r = height < 28 ? 2 : 4;
+      this.offset = this.offset + width + wMin;
+      return /*#__PURE__*/_react.default.createElement(_Cigarette.default, {
+        key: item.id,
+        dataKey: item.id,
+        index: index,
+        y: invertAxis ? y : x,
+        x: invertAxis ? x : y,
+        width: invertAxis ? width : height,
+        height: invertAxis ? height : width,
+        uid: uid,
+        hide: !item.checked,
+        duration: duration,
+        r: index === 0 || index === dataDefinitions.length - 1 ? r : 0,
+        color: item.color,
+        patterns: patterns,
+        direction: invertAxis ? 'horizontal' : 'vertical',
+        onClick: onClick,
+        hovered: highlightedLine === index ? true : highlightedLine === -1 ? undefined : false
       });
+    }), /*#__PURE__*/_react.default.createElement(_AnimatedClipPath.default, {
+      "aria-hidden": true,
+      duration: duration,
+      id: uid,
+      x: "0",
+      y: "0",
+      width: invertAxis ? 0 : plotWidth,
+      height: invertAxis ? plotHeight : 0
+    }));
+  }
+  renderTooltip() {
+    var _ref = this.asProps;
+    const {
+      data,
+      invertAxis,
+      tooltipTitle,
+      tooltipViewType,
+      showPercentValueInTooltip,
+      styles,
+      showTooltip
+    } = this.asProps;
+    const {
+      dataDefinitions
+    } = this.state;
+    const STooltipChildrenWrapper = _baseComponents.Box;
+    if (!showTooltip) {
+      return null;
     }
-  }, {
-    key: "defaultLegendProps",
-    value: function defaultLegendProps() {
-      return {
-        legendType: 'Table',
-        w: 'fit-content'
-      };
-    }
-  }, {
-    key: "xScale",
-    get: function get() {
-      var invertAxis = this.asProps.invertAxis;
-      return invertAxis ? this.valueScale : this.categoryScale;
-    }
-  }, {
-    key: "yScale",
-    get: function get() {
-      var invertAxis = this.asProps.invertAxis;
-      return invertAxis ? this.categoryScale : this.valueScale;
-    }
-  }, {
-    key: "renderChart",
-    value: function renderChart() {
-      var _this2 = this;
-      var _this$asProps = this.asProps,
-        invertAxis = _this$asProps.invertAxis,
-        data = _this$asProps.data,
-        uid = _this$asProps.uid,
-        duration = _this$asProps.duration,
-        patterns = _this$asProps.patterns,
-        plotHeight = _this$asProps.plotHeight,
-        plotWidth = _this$asProps.plotWidth,
-        onClick = _this$asProps.onClick;
-      var _this$state = this.state,
-        dataDefinitions = _this$state.dataDefinitions,
-        highlightedLine = _this$state.highlightedLine;
-      this.offset = 0;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (invertAxis ? dataDefinitions : (0, _toConsumableArray2["default"])(dataDefinitions).reverse()).map(function (item, index) {
-        var value = data[item.id];
-        if (!item.checked || value === _utils.interpolateValue || value === null) {
+    return /*#__PURE__*/_react.default.createElement(_.HoverRect.Tooltip, {
+      x: invertAxis ? '' : undefined,
+      y: invertAxis ? undefined : '',
+      wMin: 100,
+      hideHoverLine: true
+    }, tooltipProps => {
+      var _ref4;
+      const dataKey = invertAxis ? tooltipProps.xIndex : tooltipProps.yIndex;
+      const showPercentColumn = showPercentValueInTooltip && this.totalValue(data) !== 0;
+      if (tooltipViewType === 'single') {
+        var _ref3;
+        const item = dataDefinitions.find(dataDefItem => dataDefItem.id === dataKey);
+        if (!item) {
           return null;
         }
-        var absWidth = Math.abs(_this2.valueScale(value) - Math.max(_this2.valueScale(_this2.valueScale.domain()[0]), _this2.valueScale(0)));
-        var height = (0, _utils.scaleToBand)(_this2.categoryScale).bandwidth() - 4;
-        var width = value === 0 ? 0 : Math.max(absWidth, wMin * 2) - wMin;
-        var y = 2;
-        var x = index === 0 ? 0 : _this2.offset;
-        var r = height < 28 ? 2 : 4;
-        _this2.offset = _this2.offset + width + wMin;
-        return /*#__PURE__*/_react["default"].createElement(_Cigarette["default"], {
-          key: item.id,
-          dataKey: item.id,
-          index: index,
-          y: invertAxis ? y : x,
-          x: invertAxis ? x : y,
-          width: invertAxis ? width : height,
-          height: invertAxis ? height : width,
-          uid: uid,
-          hide: !item.checked,
-          duration: duration,
-          r: index === 0 || index === dataDefinitions.length - 1 ? r : 0,
-          color: item.color,
-          patterns: patterns,
-          direction: invertAxis ? 'horizontal' : 'vertical',
-          onClick: onClick,
-          hovered: highlightedLine === index ? true : highlightedLine === -1 ? undefined : false
-        });
-      }), /*#__PURE__*/_react["default"].createElement(_AnimatedClipPath["default"], {
-        "aria-hidden": true,
-        duration: duration,
-        id: uid,
-        x: "0",
-        y: "0",
-        width: invertAxis ? 0 : plotWidth,
-        height: invertAxis ? plotHeight : 0
-      }));
-    }
-  }, {
-    key: "renderTooltip",
-    value: function renderTooltip() {
-      var _ref = this.asProps,
-        _this3 = this;
-      var _this$asProps2 = this.asProps,
-        data = _this$asProps2.data,
-        invertAxis = _this$asProps2.invertAxis,
-        tooltipTitle = _this$asProps2.tooltipTitle,
-        tooltipViewType = _this$asProps2.tooltipViewType,
-        showPercentValueInTooltip = _this$asProps2.showPercentValueInTooltip,
-        styles = _this$asProps2.styles,
-        showTooltip = _this$asProps2.showTooltip;
-      var dataDefinitions = this.state.dataDefinitions;
-      var STooltipChildrenWrapper = _flexBox.Box;
-      if (!showTooltip) {
-        return null;
-      }
-      return /*#__PURE__*/_react["default"].createElement(_.HoverRect.Tooltip, {
-        x: invertAxis ? '' : undefined,
-        y: invertAxis ? undefined : '',
-        wMin: 100,
-        hideHoverLine: true
-      }, function (tooltipProps) {
-        var _ref4;
-        var dataKey = invertAxis ? tooltipProps.xIndex : tooltipProps.yIndex;
-        var showPercentColumn = showPercentValueInTooltip && _this3.totalValue(data) !== 0;
-        if (tooltipViewType === 'single') {
-          var _ref3;
-          var item = dataDefinitions.find(function (dataDefItem) {
-            return dataDefItem.id === dataKey;
-          });
-          if (!item) {
-            return null;
-          }
-          return {
-            children: (_ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        return {
+          children: (_ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", {
+            ...(0, _core.assignProps)({
               "columnsCount": showPercentColumn ? '3' : '2',
               "__excludeProps": ['data']
-            }, _ref))), /*#__PURE__*/_react["default"].createElement(_.HoverRect.Tooltip.Dot, {
-              mr: 2,
-              color: item.color
-            }, item.label), showPercentColumn && /*#__PURE__*/_react["default"].createElement(_typography.Text, _ref3.cn("Text", {
-              "textAlign": 'end',
-              "color": 'text-secondary'
-            }), _this3.percentValue(data, item.id)), /*#__PURE__*/_react["default"].createElement(_typography.Text, _ref3.cn("Text", {
-              "textAlign": 'end',
-              "bold": true
-            }), _this3.tooltipValueFormatter(data[item.id]))))
-          };
-        }
-        return {
-          children: (_ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref4.cn("Flex", {
-            "direction": 'column'
-          }), tooltipTitle && /*#__PURE__*/_react["default"].createElement(_.HoverRect.Tooltip.Title, null, "Some tooltip title"), /*#__PURE__*/_react["default"].createElement(STooltipChildrenWrapper, _ref4.cn("STooltipChildrenWrapper", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-            "columnsCount": showPercentColumn ? '3' : '2',
-            "__excludeProps": ['data']
-          }, _ref))), dataDefinitions.map(function (item) {
-            var style = {
-              opacity: item.id === dataKey ? 1 : 0.3
-            };
-            return item.checked && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-              key: item.id
-            }, /*#__PURE__*/_react["default"].createElement(_.HoverRect.Tooltip.Dot, {
-              mr: 2,
-              color: item.color,
-              style: style
-            }, item.label), showPercentColumn && /*#__PURE__*/_react["default"].createElement(_typography.Text, {
-              textAlign: "end",
-              color: "text-secondary",
-              style: style
-            }, _this3.percentValue(data, item.id)), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
-              textAlign: "end",
-              bold: true,
-              style: style
-            }, _this3.tooltipValueFormatter(data[item.id])));
-          }), _this3.renderTooltipTotalLine(data))))
+            }, _ref)
+          }), /*#__PURE__*/_react.default.createElement(_.HoverRect.Tooltip.Dot, {
+            mr: 2,
+            color: item.color
+          }, item.label), showPercentColumn && /*#__PURE__*/_react.default.createElement(_typography.Text, _ref3.cn("Text", {
+            "textAlign": 'end',
+            "color": 'text-secondary'
+          }), this.percentValue(data, item.id)), /*#__PURE__*/_react.default.createElement(_typography.Text, _ref3.cn("Text", {
+            "textAlign": 'end',
+            "bold": true
+          }), this.tooltipValueFormatter(data[item.id]))))
         };
-      });
-    }
-  }, {
-    key: "renderTooltipTotalLine",
-    value: function renderTooltipTotalLine(dataItem) {
-      var _this$asProps3 = this.asProps,
-        showTotalInTooltip = _this$asProps3.showTotalInTooltip,
-        showPercentValueInTooltip = _this$asProps3.showPercentValueInTooltip;
-      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"), showPercentValueInTooltip && total !== 0 && /*#__PURE__*/_react["default"].createElement(_typography.Text, {
-        mt: 2,
-        textAlign: "end",
-        color: "text-secondary"
-      }, Number.isNaN(total) ? _AbstractChart2.NOT_A_VALUE : '100%'), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
-        mt: 2,
-        textAlign: "end",
-        bold: true
-      }, Number.isNaN(total) ? _AbstractChart2.NOT_A_VALUE : total));
-    }
-  }, {
-    key: "renderHeader",
-    value: function renderHeader() {
-      var _this$asProps$header;
-      return (_this$asProps$header = this.asProps.header) !== null && _this$asProps$header !== void 0 ? _this$asProps$header : null;
+      return {
+        children: (_ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref4.cn("Flex", {
+          "direction": 'column'
+        }), tooltipTitle && /*#__PURE__*/_react.default.createElement(_.HoverRect.Tooltip.Title, null, "Some tooltip title"), /*#__PURE__*/_react.default.createElement(STooltipChildrenWrapper, _ref4.cn("STooltipChildrenWrapper", {
+          ...(0, _core.assignProps)({
+            "columnsCount": showPercentColumn ? '3' : '2',
+            "__excludeProps": ['data']
+          }, _ref)
+        }), dataDefinitions.map(item => {
+          const style = {
+            opacity: item.id === dataKey ? 1 : 0.3
+          };
+          return item.checked && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+            key: item.id
+          }, /*#__PURE__*/_react.default.createElement(_.HoverRect.Tooltip.Dot, {
+            mr: 2,
+            color: item.color,
+            style: style
+          }, item.label), showPercentColumn && /*#__PURE__*/_react.default.createElement(_typography.Text, {
+            textAlign: "end",
+            color: "text-secondary",
+            style: style
+          }, this.percentValue(data, item.id)), /*#__PURE__*/_react.default.createElement(_typography.Text, {
+            textAlign: "end",
+            bold: true,
+            style: style
+          }, this.tooltipValueFormatter(data[item.id])));
+        }), this.renderTooltipTotalLine(data))))
+      };
+    });
+  }
+  renderTooltipTotalLine(dataItem) {
+    const {
+      showTotalInTooltip,
+      showPercentValueInTooltip
+    } = this.asProps;
+    if (!showTotalInTooltip) {
+      return null;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref2 = this.asProps,
-        _ref6;
-      var SChart = _flexBox.Flex;
-      var _this$asProps4 = this.asProps,
-        styles = _this$asProps4.styles,
-        plotWidth = _this$asProps4.plotWidth,
-        plotHeight = _this$asProps4.plotHeight,
-        data = _this$asProps4.data,
-        patterns = _this$asProps4.patterns,
-        invertAxis = _this$asProps4.invertAxis,
-        a11yAltTextConfig = _this$asProps4.a11yAltTextConfig;
-      var header = this.renderHeader();
-      if (invertAxis) {
-        var _ref5;
-        return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SChart, _ref5.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"), showPercentValueInTooltip && total !== 0 && /*#__PURE__*/_react.default.createElement(_typography.Text, {
+      mt: 2,
+      textAlign: "end",
+      color: "text-secondary"
+    }, Number.isNaN(total) ? _AbstractChart.NOT_A_VALUE : '100%'), /*#__PURE__*/_react.default.createElement(_typography.Text, {
+      mt: 2,
+      textAlign: "end",
+      bold: true
+    }, Number.isNaN(total) ? _AbstractChart.NOT_A_VALUE : total));
+  }
+  renderHeader() {
+    return this.asProps.header ?? null;
+  }
+  render() {
+    var _ref2 = this.asProps,
+      _ref6;
+    const SChart = _baseComponents.Flex;
+    const {
+      styles,
+      plotWidth,
+      plotHeight,
+      data,
+      patterns,
+      invertAxis,
+      a11yAltTextConfig
+    } = this.asProps;
+    const header = this.renderHeader();
+    if (invertAxis) {
+      var _ref5;
+      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SChart, _ref5.cn("SChart", {
+        ...(0, _core.assignProps)({
           "gap": 6,
           "direction": 'column',
           "__excludeProps": ['onClick', 'data']
-        }, _ref2))), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref5.cn("Flex", {
-          "direction": 'column'
-        }), header, /*#__PURE__*/_react["default"].createElement(_.Plot, _ref5.cn("Plot", {
-          "data": data,
-          "scale": [this.xScale, this.yScale],
-          "width": plotWidth,
-          "height": plotHeight,
-          "dataHints": this.dataHints,
-          "patterns": patterns,
-          "a11yAltTextConfig": a11yAltTextConfig
-        }), this.renderTooltip(), this.renderChart())), this.renderLegend());
-      }
-      return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SChart, _ref6.cn("SChart", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-        "gap": 6,
-        "__excludeProps": ['onClick', 'data']
-      }, _ref2))), /*#__PURE__*/_react["default"].createElement(_.Plot, _ref6.cn("Plot", {
+        }, _ref2)
+      }), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref5.cn("Flex", {
+        "direction": 'column'
+      }), header, /*#__PURE__*/_react.default.createElement(_.Plot, _ref5.cn("Plot", {
         "data": data,
         "scale": [this.xScale, this.yScale],
         "width": plotWidth,
@@ -291,61 +255,72 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
         "dataHints": this.dataHints,
         "patterns": patterns,
         "a11yAltTextConfig": a11yAltTextConfig
-      }), this.renderTooltip(), this.renderChart()), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref6.cn("Flex", {
-        "direction": 'column',
-        "gap": 2
-      }), header && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_flexBox.Box, _ref6.cn("Box", {}), header), /*#__PURE__*/_react["default"].createElement(_divider["default"], _ref6.cn("Divider", {}))), this.renderLegend()));
-    }
-  }, {
-    key: "getLegendAriaLabel",
-    value: function getLegendAriaLabel() {
-      return this.asProps.getI18nText('legendForChart', {
-        chartType: 'Cigarette'
-      });
+      }), this.renderTooltip(), this.renderChart())), this.renderLegend());
     }
-  }, {
-    key: "selectedData",
-    get: function get() {
-      var data = this.asProps.data;
-      var dataDefinitions = this.state.dataDefinitions;
-      var result = new Map();
-      dataDefinitions.forEach(function (dataDefItem) {
-        var value = data[dataDefItem.id];
-        if (dataDefItem.checked && value !== _utils.interpolateValue) {
-          result.set(dataDefItem.id, value);
-        }
-      });
-      return result;
-    }
-  }, {
-    key: "categoryScale",
-    get: function get() {
-      var _this$asProps5 = this.asProps,
-        plotWidth = _this$asProps5.plotWidth,
-        plotHeight = _this$asProps5.plotHeight,
-        invertAxis = _this$asProps5.invertAxis;
-      var range = invertAxis ? [plotHeight, 0] : [0, plotWidth];
-      return (0, _d3Scale.scaleBand)([0], range);
-    }
-  }, {
-    key: "valueScale",
-    get: function get() {
-      var _this$asProps6 = this.asProps,
-        plotWidth = _this$asProps6.plotWidth,
-        plotHeight = _this$asProps6.plotHeight,
-        invertAxis = _this$asProps6.invertAxis;
-      var max = 0;
-      this.selectedData.forEach(function (value) {
-        max = max + value;
-      });
-      return (0, _d3Scale.scaleLinear)().range(invertAxis ? [0, plotWidth] : [plotHeight, 0]).domain([0, max]);
-    }
-  }]);
-}(_AbstractChart2.AbstractChart);
-(0, _defineProperty2["default"])(CigaretteChartComponent, "displayName", 'Cigarette.Bar');
-(0, _defineProperty2["default"])(CigaretteChartComponent, "defaultProps", function (props) {
-  var _props$invertAxis;
-  var invertAxis = (_props$invertAxis = props.invertAxis) !== null && _props$invertAxis !== void 0 ? _props$invertAxis : true;
+    return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SChart, _ref6.cn("SChart", {
+      ...(0, _core.assignProps)({
+        "gap": 6,
+        "__excludeProps": ['onClick', 'data']
+      }, _ref2)
+    }), /*#__PURE__*/_react.default.createElement(_.Plot, _ref6.cn("Plot", {
+      "data": data,
+      "scale": [this.xScale, this.yScale],
+      "width": plotWidth,
+      "height": plotHeight,
+      "dataHints": this.dataHints,
+      "patterns": patterns,
+      "a11yAltTextConfig": a11yAltTextConfig
+    }), this.renderTooltip(), this.renderChart()), /*#__PURE__*/_react.default.createElement(_baseComponents.Flex, _ref6.cn("Flex", {
+      "direction": 'column',
+      "gap": 2
+    }), header && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseComponents.Box, _ref6.cn("Box", {}), header), /*#__PURE__*/_react.default.createElement(_divider.default, _ref6.cn("Divider", {}))), this.renderLegend()));
+  }
+  getLegendAriaLabel() {
+    return this.asProps.getI18nText('legendForChart', {
+      chartType: 'Cigarette'
+    });
+  }
+  get selectedData() {
+    const {
+      data
+    } = this.asProps;
+    const {
+      dataDefinitions
+    } = this.state;
+    const result = new Map();
+    dataDefinitions.forEach(dataDefItem => {
+      const value = data[dataDefItem.id];
+      if (dataDefItem.checked && value !== _utils.interpolateValue) {
+        result.set(dataDefItem.id, value);
+      }
+    });
+    return result;
+  }
+  get categoryScale() {
+    const {
+      plotWidth,
+      plotHeight,
+      invertAxis
+    } = this.asProps;
+    const range = invertAxis ? [plotHeight, 0] : [0, plotWidth];
+    return (0, _d3Scale.scaleBand)([0], range);
+  }
+  get valueScale() {
+    const {
+      plotWidth,
+      plotHeight,
+      invertAxis
+    } = this.asProps;
+    let max = 0;
+    this.selectedData.forEach(value => {
+      max = max + value;
+    });
+    return (0, _d3Scale.scaleLinear)().range(invertAxis ? [0, plotWidth] : [plotHeight, 0]).domain([0, max]);
+  }
+}
+(0, _defineProperty2.default)(CigaretteChartComponent, "displayName", 'Cigarette.Bar');
+(0, _defineProperty2.default)(CigaretteChartComponent, "defaultProps", props => {
+  const invertAxis = props.invertAxis ?? true;
   return {
     invertAxis: invertAxis,
     showXAxis: false,
@@ -360,6 +335,6 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
     showPercentValueInTooltip: false
   };
 });
-(0, _defineProperty2["default"])(CigaretteChartComponent, "enhance", [(0, _resolveColorEnhance["default"])(), (0, _uniqueID["default"])(), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
-var CigaretteChart = exports.CigaretteChart = (0, _core.createComponent)(CigaretteChartComponent);
+(0, _defineProperty2.default)(CigaretteChartComponent, "enhance", [(0, _resolveColorEnhance.default)(), (0, _uniqueID.default)(), (0, _i18nEnhance.default)(_intergalacticDynamicLocales.localizedMessages)]);
+const CigaretteChart = exports.CigaretteChart = (0, _core.createComponent)(CigaretteChartComponent);
 //# sourceMappingURL=CigaretteChart.js.map