@semcore/d3-chart 3.61.0-prerelease.4 → 3.61.0-prerelease.5

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

@@ -1,56 +1,98 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _core = _interopRequireWildcard(require("@semcore/core"));
-var _react = _interopRequireDefault(require("react"));
+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 _rafTrottle = _interopRequireDefault(require("@semcore/core/lib/utils/rafTrottle"));
+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 _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
-var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
 var _d3Scale = require("d3-scale");
+var _react = _interopRequireDefault(require("react"));
 var _ = require("../..");
-var _AnimatedClipPath = _interopRequireDefault(require("../../AnimatedClipPath"));
 var _AbstractChart2 = require("./AbstractChart");
+var _AnimatedClipPath = _interopRequireDefault(require("../../AnimatedClipPath"));
+var _intergalacticDynamicLocales = require("../../translations/__intergalactic-dynamic-locales");
 var _utils = require("../../utils");
 var _Cigarette = _interopRequireDefault(require("../Cigarette/Cigarette"));
-var _intergalacticDynamicLocales = require("../../translations/__intergalactic-dynamic-locales");
-var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
 // @ts-ignore
 
 // @ts-ignore
 
-var wMin = 2;
+var DEFAULT_MINIMAL_BAR_WIDTH = 2;
+var DEFAULT_GAP = 2;
 var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
-  (0, _inherits2["default"])(CigaretteChartComponent, _AbstractChart);
-  var _super = (0, _createSuper2["default"])(CigaretteChartComponent);
-  function CigaretteChartComponent() {
+  function CigaretteChartComponent(props) {
     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 = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "plotPadding", 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "offset", 0);
+    _this = (0, _callSuper2["default"])(this, CigaretteChartComponent, [props]);
+    (0, _defineProperty2["default"])(_this, "plotRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "plotPadding", 0);
+    (0, _defineProperty2["default"])(_this, "offset", 0);
+    (0, _defineProperty2["default"])(_this, "onPlotMouseMove", (0, _rafTrottle["default"])(function (event) {
+      if (!_this.plotRef.current) return;
+      var _eventToPoint = (0, _utils.eventToPoint)(event, _this.plotRef.current),
+        _eventToPoint2 = (0, _slicedToArray2["default"])(_eventToPoint, 2),
+        pX = _eventToPoint2[0],
+        pY = _eventToPoint2[1];
+      _this.setState(function (prevState) {
+        return {
+          pX: pX,
+          pY: pY
+        };
+      });
+    }));
+    (0, _defineProperty2["default"])(_this, "onPlotMouseLeave", (0, _rafTrottle["default"])(function () {
+      _this.setState(function (prevState) {
+        return {
+          pX: null,
+          pY: null
+        };
+      });
+    }));
+    _this.state = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this.state), {}, {
+      pX: null,
+      pY: null
+    });
     return _this;
   }
-  (0, _createClass2["default"])(CigaretteChartComponent, [{
+  (0, _inherits2["default"])(CigaretteChartComponent, _AbstractChart);
+  return (0, _createClass2["default"])(CigaretteChartComponent, [{
+    key: "activeDataDefinitions",
+    get: function get() {
+      var dataDefinitions = this.state.dataDefinitions;
+      return dataDefinitions.filter(function (_ref7) {
+        var checked = _ref7.checked;
+        return checked;
+      });
+    }
+  }, {
+    key: "activePositiveDataDefinitions",
+    get: function get() {
+      var data = this.asProps.data;
+      return this.activeDataDefinitions.filter(function (_ref8) {
+        var id = _ref8.id;
+        var itemValue = data[id];
+        return typeof itemValue === 'number' && itemValue > 0;
+      });
+    }
+  }, {
     key: "resolveColor",
     value: function resolveColor(id, index) {
       var _this$props$colorMap$, _this$props$colorMap;
@@ -59,7 +101,7 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
   }, {
     key: "getDefaultDataDefinitions",
     value: function getDefaultDataDefinitions() {
-      var dataDefinitions = (0, _get2["default"])((0, _getPrototypeOf2["default"])(CigaretteChartComponent.prototype), "getDefaultDataDefinitions", this).call(this);
+      var dataDefinitions = (0, _superPropGet2["default"])(CigaretteChartComponent, "getDefaultDataDefinitions", this, 3)([]);
       return dataDefinitions.map(function (dataDef) {
         dataDef.columns = dataDef.columns.slice(1);
         return dataDef;
@@ -73,47 +115,141 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
         w: 'fit-content'
       };
     }
+  }, {
+    key: "totalValue",
+    value: function totalValue() {
+      var data = this.asProps.data;
+      return this.activeDataDefinitions.reduce(function (acc, _ref9) {
+        var id = _ref9.id;
+        var itemValue = data[id];
+        if (typeof itemValue === 'number') {
+          acc += itemValue;
+        }
+        return acc;
+      }, 0);
+    }
+  }, {
+    key: "computeCigaretteItems",
+    value: function computeCigaretteItems() {
+      var _this$asProps = this.asProps,
+        plotWidth = _this$asProps.plotWidth,
+        plotHeight = _this$asProps.plotHeight,
+        data = _this$asProps.data,
+        invertAxis = _this$asProps.invertAxis,
+        minimalBarWidth = _this$asProps.minimalBarWidth;
+      var dataDefinitions = invertAxis ? this.activeDataDefinitions : (0, _toConsumableArray2["default"])(this.activeDataDefinitions).reverse();
+      var count = this.activePositiveDataDefinitions.length;
+      var totalGapWidth = DEFAULT_GAP * Math.max(0, count - 1);
+      var availableSpace = Math.max(0, (invertAxis ? plotWidth : plotHeight) - totalGapWidth);
+      var totalValue = this.totalValue();
+      var dataDefinitionsItemSize = dataDefinitions.map(function (_ref0) {
+        var id = _ref0.id;
+        if (totalValue === 0) {
+          return 0;
+        }
+        var itemValue = data[id];
+        if (typeof itemValue !== 'number') return 0;
+        return itemValue / totalValue * availableSpace;
+      });
+      var result = dataDefinitions.map(function (dd, index) {
+        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dd), {}, {
+          value: data[dd.id],
+          dataWidth: dataDefinitionsItemSize[index],
+          visualWidth: dataDefinitionsItemSize[index],
+          isMinVisible: false
+        });
+      });
+      var smallItems = result.filter(function (r) {
+        var value = r.value,
+          dataWidth = r.dataWidth;
+        if (typeof value !== 'number') return false;
+        return value > 0 && dataWidth < minimalBarWidth;
+      });
+      if (smallItems.length === 0) return result;
+      var extraNeeded = 0;
+      var _iterator = (0, _createForOfIteratorHelper2["default"])(smallItems),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var smallItem = _step.value;
+          extraNeeded += minimalBarWidth - smallItem.dataWidth;
+          smallItem.visualWidth = minimalBarWidth;
+          smallItem.isMinVisible = true;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var donors = result.filter(function (r) {
+        return !r.isMinVisible && r.dataWidth > minimalBarWidth;
+      });
+      var donorCapacity = donors.reduce(function (s, d) {
+        return s + (d.dataWidth - minimalBarWidth);
+      }, 0);
+      var _iterator2 = (0, _createForOfIteratorHelper2["default"])(donors),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var donor = _step2.value;
+          var available = donor.dataWidth - minimalBarWidth;
+          var share = available / donorCapacity;
+          var taken = share * extraNeeded;
+          donor.visualWidth = donor.dataWidth - taken;
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      return result;
+    }
   }, {
     key: "xScale",
     get: function get() {
-      var invertAxis = this.asProps.invertAxis;
-      return invertAxis ? this.valueScale : this.categoryScale;
+      var plotWidth = this.asProps.plotWidth;
+      return (0, _d3Scale.scaleLinear)([0, plotWidth]);
     }
   }, {
     key: "yScale",
     get: function get() {
-      var invertAxis = this.asProps.invertAxis;
-      return invertAxis ? this.categoryScale : this.valueScale;
+      var plotHeight = this.asProps.plotHeight;
+      return (0, _d3Scale.scaleLinear)([plotHeight, 0]);
     }
   }, {
     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$asProps2 = this.asProps,
+        invertAxis = _this$asProps2.invertAxis,
+        data = _this$asProps2.data,
+        uid = _this$asProps2.uid,
+        duration = _this$asProps2.duration,
+        patterns = _this$asProps2.patterns,
+        plotHeight = _this$asProps2.plotHeight,
+        plotWidth = _this$asProps2.plotWidth,
+        onClick = _this$asProps2.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) {
+      var items = this.computeCigaretteItems();
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, items.map(function (item, index) {
+        var visualWidth = item.visualWidth,
+          id = item.id;
+        var value = data[id];
+        if (value === _utils.interpolateValue || value === null) {
           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 height = invertAxis ? plotHeight - DEFAULT_GAP * 2 : plotWidth - DEFAULT_GAP * 2;
+        var width = visualWidth;
+        var y = DEFAULT_GAP;
+        var x = _this2.offset;
         var r = height < 28 ? 2 : 4;
-        _this2.offset = _this2.offset + width + wMin;
+        _this2.offset += visualWidth;
+        if (index < items.length - 1) {
+          _this2.offset += DEFAULT_GAP;
+        }
         return /*#__PURE__*/_react["default"].createElement(_Cigarette["default"], {
           key: item.id,
           dataKey: item.id,
@@ -145,15 +281,21 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      var _this3 = this;
-      var _this$asProps2 = this.asProps,
-        data = _this$asProps2.data,
-        showTotalInTooltip = _this$asProps2.showTotalInTooltip,
-        showTooltip = _this$asProps2.showTooltip,
-        invertAxis = _this$asProps2.invertAxis,
-        tooltipTitle = _this$asProps2.tooltipTitle,
-        tooltipViewType = _this$asProps2.tooltipViewType;
-      var dataDefinitions = this.state.dataDefinitions;
+      var _ref = this.asProps,
+        _this3 = this;
+      var _this$asProps3 = this.asProps,
+        data = _this$asProps3.data,
+        invertAxis = _this$asProps3.invertAxis,
+        tooltipTitle = _this$asProps3.tooltipTitle,
+        tooltipViewType = _this$asProps3.tooltipViewType,
+        showPercentValueInTooltip = _this$asProps3.showPercentValueInTooltip,
+        styles = _this$asProps3.styles,
+        showTooltip = _this$asProps3.showTooltip;
+      var _this$state2 = this.state,
+        dataDefinitions = _this$state2.dataDefinitions,
+        pX = _this$state2.pX,
+        pY = _this$state2.pY;
+      var STooltipChildrenWrapper = _baseComponents.Box;
       if (!showTooltip) {
         return null;
       }
@@ -161,54 +303,107 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
         x: invertAxis ? '' : undefined,
         y: invertAxis ? undefined : '',
         wMin: 100,
-        hideHoverLine: true
+        hideHoverLine: true,
+        xIndex: pX !== null ? this.visualScale(pX) : undefined,
+        yIndex: pY !== null ? this.visualScale(pY) : undefined
       }, function (tooltipProps) {
+        var _ref4;
         var dataKey = invertAxis ? tooltipProps.xIndex : tooltipProps.yIndex;
-        var total = _this3.totalValue(data);
+        var showPercentColumn = showPercentValueInTooltip && _this3.totalValue() !== 0;
         if (tooltipViewType === 'single') {
+          var _ref3;
           var item = dataDefinitions.find(function (dataDefItem) {
             return dataDefItem.id === dataKey;
           });
           if (!item) {
-            return null;
+            return {
+              children: null
+            };
           }
           return {
-            children: /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, {
-              justifyContent: "space-between",
-              key: dataKey
-            }, /*#__PURE__*/_react["default"].createElement(_.HoverRect.Tooltip.Dot, {
-              mr: 4,
+            children: (_ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+              "columnsCount": showPercentColumn ? '3' : '2',
+              "__excludeProps": ['data']
+            }, _ref))), /*#__PURE__*/_react["default"].createElement(_.HoverRect.Tooltip.Dot, {
+              mr: 2,
               color: item.color
-            }, item.label), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
-              bold: true
-            }, _this3.tooltipValueFormatter(data[dataKey])))
+            }, 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: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tooltipTitle && /*#__PURE__*/_react["default"].createElement(_.HoverRect.Tooltip.Title, null, "Some tooltip title"), dataDefinitions.map(function (item) {
-            return item.checked && /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, {
-              justifyContent: "space-between",
-              key: item.id,
-              style: {
-                opacity: item.id === dataKey ? 1 : 0.3
-              }
+          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, _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: 4,
-              color: item.color
-            }, item.label), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
-              bold: true
+              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])));
-          }), showTotalInTooltip === true && /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, {
-            mt: 2,
-            justifyContent: "space-between"
-          }, /*#__PURE__*/_react["default"].createElement(_flexBox.Box, {
-            mr: 4
-          }, "Total"), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
-            bold: true
-          }, total)))
+          }), _this3.renderTooltipTotalLine(data))))
         };
       });
     }
+  }, {
+    key: "percentValue",
+    value: function percentValue(data, key) {
+      var percentFormatter = this.asProps.percentFormatter;
+      var total = this.totalValue();
+      var value = data[key];
+      if (typeof value === 'number' && total !== 0) {
+        var rawPercent = 100 * value / total;
+        var formattedPercent = percentFormatter ? percentFormatter(rawPercent) : Math.round(rawPercent);
+        return "".concat(formattedPercent, "%");
+      }
+      if (value === null) {
+        return "0%";
+      }
+      return _AbstractChart2.NOT_A_VALUE;
+    }
+  }, {
+    key: "renderTooltipTotalLine",
+    value: function renderTooltipTotalLine(dataItem) {
+      var _this$asProps4 = this.asProps,
+        showTotalInTooltip = _this$asProps4.showTotalInTooltip,
+        showPercentValueInTooltip = _this$asProps4.showPercentValueInTooltip;
+      if (!showTotalInTooltip) {
+        return null;
+      }
+      var total = this.totalValue();
+      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) ? _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() {
@@ -218,51 +413,57 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps,
-        _ref3;
-      var SChart = _flexBox.Flex;
-      var _this$asProps3 = this.asProps,
-        styles = _this$asProps3.styles,
-        plotWidth = _this$asProps3.plotWidth,
-        plotHeight = _this$asProps3.plotHeight,
-        data = _this$asProps3.data,
-        patterns = _this$asProps3.patterns,
-        invertAxis = _this$asProps3.invertAxis,
-        a11yAltTextConfig = _this$asProps3.a11yAltTextConfig;
+      var _ref2 = this.asProps,
+        _ref6;
+      var SChart = _baseComponents.Flex;
+      var _this$asProps5 = this.asProps,
+        styles = _this$asProps5.styles,
+        plotWidth = _this$asProps5.plotWidth,
+        plotHeight = _this$asProps5.plotHeight,
+        data = _this$asProps5.data,
+        patterns = _this$asProps5.patterns,
+        invertAxis = _this$asProps5.invertAxis,
+        a11yAltTextConfig = _this$asProps5.a11yAltTextConfig;
       var header = this.renderHeader();
       if (invertAxis) {
-        var _ref2;
-        return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SChart, _ref2.cn("SChart", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        var _ref5;
+        return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SChart, _ref5.cn("SChart", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
           "gap": 6,
           "direction": 'column',
           "__excludeProps": ['onClick', 'data']
-        }, _ref))), /*#__PURE__*/_react["default"].createElement(_flexBox.Flex, _ref2.cn("Flex", {
+        }, _ref2))), /*#__PURE__*/_react["default"].createElement(_baseComponents.Flex, _ref5.cn("Flex", {
           "direction": 'column'
-        }), header, /*#__PURE__*/_react["default"].createElement(_.Plot, _ref2.cn("Plot", {
+        }), header, /*#__PURE__*/_react["default"].createElement(_.Plot, _ref5.cn("Plot", {
+          "ref": this.plotRef,
           "data": data,
           "scale": [this.xScale, this.yScale],
           "width": plotWidth,
           "height": plotHeight,
           "dataHints": this.dataHints,
           "patterns": patterns,
-          "a11yAltTextConfig": a11yAltTextConfig
+          "a11yAltTextConfig": a11yAltTextConfig,
+          "onMouseMove": this.onPlotMouseMove,
+          "onMouseLeave": this.onPlotMouseLeave
         }), this.renderTooltip(), this.renderChart())), this.renderLegend());
       }
-      return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SChart, _ref3.cn("SChart", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+      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']
-      }, _ref))), /*#__PURE__*/_react["default"].createElement(_.Plot, _ref3.cn("Plot", {
+      }, _ref2))), /*#__PURE__*/_react["default"].createElement(_.Plot, _ref6.cn("Plot", {
+        "ref": this.plotRef,
         "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(_flexBox.Flex, _ref3.cn("Flex", {
+        "a11yAltTextConfig": a11yAltTextConfig,
+        "onMouseMove": this.onPlotMouseMove,
+        "onMouseLeave": this.onPlotMouseLeave
+      }), 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(_flexBox.Box, _ref3.cn("Box", {}), header), /*#__PURE__*/_react["default"].createElement(_divider["default"], _ref3.cn("Divider", {}))), this.renderLegend()));
+      }), 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()));
     }
   }, {
     key: "getLegendAriaLabel",
@@ -272,44 +473,35 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
       });
     }
   }, {
-    key: "selectedData",
+    key: "visualScale",
     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$asProps4 = this.asProps,
-        plotWidth = _this$asProps4.plotWidth,
-        plotHeight = _this$asProps4.plotHeight,
-        invertAxis = _this$asProps4.invertAxis;
-      var range = invertAxis ? [plotHeight, 0] : [0, plotWidth];
-      return (0, _d3Scale.scaleBand)([0], range);
-    }
-  }, {
-    key: "valueScale",
-    get: function get() {
-      var _this$asProps5 = this.asProps,
-        plotWidth = _this$asProps5.plotWidth,
-        plotHeight = _this$asProps5.plotHeight,
-        invertAxis = _this$asProps5.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]);
+      var cigaretteItems = this.computeCigaretteItems();
+      var _cigaretteItems$reduc = cigaretteItems.reduce(function (acc, _ref1, index) {
+          var id = _ref1.id,
+            visualWidth = _ref1.visualWidth;
+          var range = acc.range,
+            domain = acc.domain;
+          if (visualWidth) {
+            range.push(id);
+            if (domain.length === 0) {
+              domain.push(visualWidth + DEFAULT_GAP);
+              return acc;
+            }
+            if (index !== cigaretteItems.length - 1) {
+              var lastAddedDomain = domain[domain.length - 1];
+              domain.push(lastAddedDomain + visualWidth + DEFAULT_GAP);
+            }
+          }
+          return acc;
+        }, {
+          range: [],
+          domain: []
+        }),
+        range = _cigaretteItems$reduc.range,
+        domain = _cigaretteItems$reduc.domain;
+      return (0, _d3Scale.scaleThreshold)(domain, range);
     }
   }]);
-  return CigaretteChartComponent;
 }(_AbstractChart2.AbstractChart);
 (0, _defineProperty2["default"])(CigaretteChartComponent, "displayName", 'Cigarette.Bar');
 (0, _defineProperty2["default"])(CigaretteChartComponent, "defaultProps", function (props) {
@@ -325,10 +517,11 @@ var CigaretteChartComponent = /*#__PURE__*/function (_AbstractChart) {
     marginY: 0,
     duration: 500,
     plotWidth: !invertAxis && !props.plotWidth ? 44 : props.plotWidth,
-    plotHeight: invertAxis && !props.plotHeight ? 28 : props.plotHeight
+    plotHeight: invertAxis && !props.plotHeight ? 28 : props.plotHeight,
+    showPercentValueInTooltip: false,
+    minimalBarWidth: DEFAULT_MINIMAL_BAR_WIDTH
   };
 });
 (0, _defineProperty2["default"])(CigaretteChartComponent, "enhance", [(0, _resolveColorEnhance["default"])(), (0, _uniqueID["default"])(), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
-var CigaretteChart = (0, _core["default"])(CigaretteChartComponent);
-exports.CigaretteChart = CigaretteChart;
+var CigaretteChart = exports.CigaretteChart = (0, _core.createComponent)(CigaretteChartComponent);
 //# sourceMappingURL=CigaretteChart.js.map