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

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

@@ -1,21 +1,14 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _superPropGet from "@babel/runtime/helpers/superPropGet";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
+import { Box, Flex } from '@semcore/base-components';
 import { createComponent, Root, sstyled } from '@semcore/core';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
 import Divider from '@semcore/divider';
-import { Flex, Box } from '@semcore/flex-box';
 import { Text } from '@semcore/typography';
 import { scaleBand, scaleLinear } from 'd3-scale';
 import React from 'react';
@@ -27,258 +20,229 @@ import AnimatedClipPath from '../../AnimatedClipPath';
 import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
 import { interpolateValue, scaleToBand } from '../../utils';
 import Cigarette from '../Cigarette/Cigarette';
-var wMin = 2;
-var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
-  function CigaretteChartComponent() {
-    var _this;
-    _classCallCheck(this, CigaretteChartComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, CigaretteChartComponent, [].concat(args));
-    _defineProperty(_this, "plotPadding", 0);
-    _defineProperty(_this, "offset", 0);
-    return _this;
+const wMin = 2;
+class CigaretteChartComponent extends AbstractChart {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "plotPadding", 0);
+    _defineProperty(this, "offset", 0);
   }
-  _inherits(CigaretteChartComponent, _AbstractChart);
-  return _createClass(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 = _superPropGet(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.createElement(React.Fragment, null, (invertAxis ? dataDefinitions : [...dataDefinitions].reverse()).map((item, index) => {
+      const value = data[item.id];
+      if (!item.checked || value === 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 = 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.createElement(Cigarette, {
+        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.createElement(AnimatedClipPath, {
+      "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 = 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.createElement(React.Fragment, null, (invertAxis ? dataDefinitions : _toConsumableArray(dataDefinitions).reverse()).map(function (item, index) {
-        var value = data[item.id];
-        if (!item.checked || value === interpolateValue || value === null) {
+    return /*#__PURE__*/React.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 = 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.createElement(Cigarette, {
-          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.createElement(AnimatedClipPath, {
-        "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 = Box;
-      if (!showTooltip) {
-        return null;
-      }
-      return /*#__PURE__*/React.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 = sstyled(styles), /*#__PURE__*/React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", _objectSpread({}, _assignProps({
+        return {
+          children: (_ref3 = sstyled(styles), /*#__PURE__*/React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", {
+            ..._assignProps({
               "columnsCount": showPercentColumn ? '3' : '2',
               "__excludeProps": ['data']
-            }, _ref))), /*#__PURE__*/React.createElement(HoverRect.Tooltip.Dot, {
-              mr: 2,
-              color: item.color
-            }, item.label), showPercentColumn && /*#__PURE__*/React.createElement(Text, _ref3.cn("Text", {
-              "textAlign": 'end',
-              "color": 'text-secondary'
-            }), _this3.percentValue(data, item.id)), /*#__PURE__*/React.createElement(Text, _ref3.cn("Text", {
-              "textAlign": 'end',
-              "bold": true
-            }), _this3.tooltipValueFormatter(data[item.id]))))
-          };
-        }
-        return {
-          children: (_ref4 = sstyled(styles), /*#__PURE__*/React.createElement(Flex, _ref4.cn("Flex", {
-            "direction": 'column'
-          }), tooltipTitle && /*#__PURE__*/React.createElement(HoverRect.Tooltip.Title, null, "Some tooltip title"), /*#__PURE__*/React.createElement(STooltipChildrenWrapper, _ref4.cn("STooltipChildrenWrapper", _objectSpread({}, _assignProps2({
-            "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.createElement(React.Fragment, {
-              key: item.id
-            }, /*#__PURE__*/React.createElement(HoverRect.Tooltip.Dot, {
-              mr: 2,
-              color: item.color,
-              style: style
-            }, item.label), showPercentColumn && /*#__PURE__*/React.createElement(Text, {
-              textAlign: "end",
-              color: "text-secondary",
-              style: style
-            }, _this3.percentValue(data, item.id)), /*#__PURE__*/React.createElement(Text, {
-              textAlign: "end",
-              bold: true,
-              style: style
-            }, _this3.tooltipValueFormatter(data[item.id])));
-          }), _this3.renderTooltipTotalLine(data))))
+            }, _ref)
+          }), /*#__PURE__*/React.createElement(HoverRect.Tooltip.Dot, {
+            mr: 2,
+            color: item.color
+          }, item.label), showPercentColumn && /*#__PURE__*/React.createElement(Text, _ref3.cn("Text", {
+            "textAlign": 'end',
+            "color": 'text-secondary'
+          }), this.percentValue(data, item.id)), /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-        mt: 2,
-        mr: 2
-      }, "Total"), showPercentValueInTooltip && total !== 0 && /*#__PURE__*/React.createElement(Text, {
-        mt: 2,
-        textAlign: "end",
-        color: "text-secondary"
-      }, Number.isNaN(total) ? NOT_A_VALUE : '100%'), /*#__PURE__*/React.createElement(Text, {
-        mt: 2,
-        textAlign: "end",
-        bold: true
-      }, Number.isNaN(total) ? 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 = sstyled(styles), /*#__PURE__*/React.createElement(Flex, _ref4.cn("Flex", {
+          "direction": 'column'
+        }), tooltipTitle && /*#__PURE__*/React.createElement(HoverRect.Tooltip.Title, null, "Some tooltip title"), /*#__PURE__*/React.createElement(STooltipChildrenWrapper, _ref4.cn("STooltipChildrenWrapper", {
+          ..._assignProps2({
+            "columnsCount": showPercentColumn ? '3' : '2',
+            "__excludeProps": ['data']
+          }, _ref)
+        }), dataDefinitions.map(item => {
+          const style = {
+            opacity: item.id === dataKey ? 1 : 0.3
+          };
+          return item.checked && /*#__PURE__*/React.createElement(React.Fragment, {
+            key: item.id
+          }, /*#__PURE__*/React.createElement(HoverRect.Tooltip.Dot, {
+            mr: 2,
+            color: item.color,
+            style: style
+          }, item.label), showPercentColumn && /*#__PURE__*/React.createElement(Text, {
+            textAlign: "end",
+            color: "text-secondary",
+            style: style
+          }, this.percentValue(data, item.id)), /*#__PURE__*/React.createElement(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 = 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 = sstyled(styles), /*#__PURE__*/React.createElement(SChart, _ref5.cn("SChart", _objectSpread({}, _assignProps3({
+    const total = this.totalValue(dataItem);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      mt: 2,
+      mr: 2
+    }, "Total"), showPercentValueInTooltip && total !== 0 && /*#__PURE__*/React.createElement(Text, {
+      mt: 2,
+      textAlign: "end",
+      color: "text-secondary"
+    }, Number.isNaN(total) ? NOT_A_VALUE : '100%'), /*#__PURE__*/React.createElement(Text, {
+      mt: 2,
+      textAlign: "end",
+      bold: true
+    }, Number.isNaN(total) ? NOT_A_VALUE : total));
+  }
+  renderHeader() {
+    return this.asProps.header ?? null;
+  }
+  render() {
+    var _ref2 = this.asProps,
+      _ref6;
+    const SChart = Flex;
+    const {
+      styles,
+      plotWidth,
+      plotHeight,
+      data,
+      patterns,
+      invertAxis,
+      a11yAltTextConfig
+    } = this.asProps;
+    const header = this.renderHeader();
+    if (invertAxis) {
+      var _ref5;
+      return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SChart, _ref5.cn("SChart", {
+        ..._assignProps3({
           "gap": 6,
           "direction": 'column',
           "__excludeProps": ['onClick', 'data']
-        }, _ref2))), /*#__PURE__*/React.createElement(Flex, _ref5.cn("Flex", {
-          "direction": 'column'
-        }), header, /*#__PURE__*/React.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 = sstyled(styles), /*#__PURE__*/React.createElement(SChart, _ref6.cn("SChart", _objectSpread({}, _assignProps4({
-        "gap": 6,
-        "__excludeProps": ['onClick', 'data']
-      }, _ref2))), /*#__PURE__*/React.createElement(Plot, _ref6.cn("Plot", {
+        }, _ref2)
+      }), /*#__PURE__*/React.createElement(Flex, _ref5.cn("Flex", {
+        "direction": 'column'
+      }), header, /*#__PURE__*/React.createElement(Plot, _ref5.cn("Plot", {
         "data": data,
         "scale": [this.xScale, this.yScale],
         "width": plotWidth,
@@ -286,61 +250,72 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
         "dataHints": this.dataHints,
         "patterns": patterns,
         "a11yAltTextConfig": a11yAltTextConfig
-      }), this.renderTooltip(), this.renderChart()), /*#__PURE__*/React.createElement(Flex, _ref6.cn("Flex", {
-        "direction": 'column',
-        "gap": 2
-      }), header && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _ref6.cn("Box", {}), header), /*#__PURE__*/React.createElement(Divider, _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 !== 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 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 scaleLinear().range(invertAxis ? [0, plotWidth] : [plotHeight, 0]).domain([0, max]);
-    }
-  }]);
-}(AbstractChart);
+    return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SChart, _ref6.cn("SChart", {
+      ..._assignProps4({
+        "gap": 6,
+        "__excludeProps": ['onClick', 'data']
+      }, _ref2)
+    }), /*#__PURE__*/React.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.createElement(Flex, _ref6.cn("Flex", {
+      "direction": 'column',
+      "gap": 2
+    }), header && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _ref6.cn("Box", {}), header), /*#__PURE__*/React.createElement(Divider, _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 !== interpolateValue) {
+        result.set(dataDefItem.id, value);
+      }
+    });
+    return result;
+  }
+  get categoryScale() {
+    const {
+      plotWidth,
+      plotHeight,
+      invertAxis
+    } = this.asProps;
+    const range = invertAxis ? [plotHeight, 0] : [0, plotWidth];
+    return scaleBand([0], range);
+  }
+  get valueScale() {
+    const {
+      plotWidth,
+      plotHeight,
+      invertAxis
+    } = this.asProps;
+    let max = 0;
+    this.selectedData.forEach(value => {
+      max = max + value;
+    });
+    return scaleLinear().range(invertAxis ? [0, plotWidth] : [plotHeight, 0]).domain([0, max]);
+  }
+}
 _defineProperty(CigaretteChartComponent, "displayName", 'Cigarette.Bar');
-_defineProperty(CigaretteChartComponent, "defaultProps", function (props) {
-  var _props$invertAxis;
-  var invertAxis = (_props$invertAxis = props.invertAxis) !== null && _props$invertAxis !== void 0 ? _props$invertAxis : true;
+_defineProperty(CigaretteChartComponent, "defaultProps", props => {
+  const invertAxis = props.invertAxis ?? true;
   return {
     invertAxis: invertAxis,
     showXAxis: false,
@@ -356,5 +331,5 @@ _defineProperty(CigaretteChartComponent, "defaultProps", function (props) {
   };
 });
 _defineProperty(CigaretteChartComponent, "enhance", [resolveColorEnhance(), uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
-export var CigaretteChart = createComponent(CigaretteChartComponent);
+export const CigaretteChart = createComponent(CigaretteChartComponent);
 //# sourceMappingURL=CigaretteChart.js.map