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

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

@@ -1,86 +1,45 @@
-import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled, assignProps, createComponent } from "@semcore/core";
-import { Box, Flex } from "@semcore/base-components";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-import trottle from "@semcore/core/lib/utils/rafTrottle";
-import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import createComponent, { sstyled, assignProps } from "@semcore/core";
+import React from "react";
 import Divider from "@semcore/divider";
+import { Flex, Box } from "@semcore/flex-box";
 import { Text } from "@semcore/typography";
-import { scaleLinear, scaleThreshold } from "d3-scale";
-import React from "react";
-import "../../index.mjs";
-import { NOT_A_VALUE, AbstractChart } from "./AbstractChart.mjs";
+import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import { scaleBand, scaleLinear } from "d3-scale";
+import Plot from "../../Plot.mjs";
+import { HoverRect } from "../../Hover.mjs";
+import { interpolateValue, scaleToBand } from "../../utils.mjs";
 import AnimatedClipPath from "../../AnimatedClipPath.mjs";
-import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-import { eventToPoint, interpolateValue } from "../../utils.mjs";
+import { AbstractChart } from "./AbstractChart.mjs";
 import Cigarette from "../Cigarette/Cigarette.mjs";
-import { HoverRect } from "../../Hover.mjs";
-import Plot from "../../Plot.mjs";
-var DEFAULT_MINIMAL_BAR_WIDTH = 2;
-var DEFAULT_GAP = 2;
-var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
-  function CigaretteChartComponent2(props) {
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var wMin = 2;
+var CigaretteChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(CigaretteChartComponent2, _AbstractChart);
+  var _super = _createSuper(CigaretteChartComponent2);
+  function CigaretteChartComponent2() {
     var _this;
     _classCallCheck(this, CigaretteChartComponent2);
-    _this = _callSuper(this, CigaretteChartComponent2, [props]);
-    _defineProperty(_this, "plotRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "plotPadding", 0);
-    _defineProperty(_this, "offset", 0);
-    _defineProperty(_this, "onPlotMouseMove", trottle(function(event) {
-      if (!_this.plotRef.current) return;
-      var _eventToPoint = eventToPoint(event, _this.plotRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 2), pX = _eventToPoint2[0], pY = _eventToPoint2[1];
-      _this.setState(function(prevState) {
-        return {
-          pX,
-          pY
-        };
-      });
-    }));
-    _defineProperty(_this, "onPlotMouseLeave", trottle(function() {
-      _this.setState(function(prevState) {
-        return {
-          pX: null,
-          pY: null
-        };
-      });
-    }));
-    _this.state = _objectSpread(_objectSpread({}, _this.state), {}, {
-      pX: null,
-      pY: null
-    });
+    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));
+    _defineProperty(_assertThisInitialized(_this), "plotPadding", 0);
+    _defineProperty(_assertThisInitialized(_this), "offset", 0);
     return _this;
   }
-  _inherits(CigaretteChartComponent2, _AbstractChart);
-  return _createClass(CigaretteChartComponent2, [{
-    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;
-      });
-    }
-  }, {
+  _createClass(CigaretteChartComponent2, [{
     key: "resolveColor",
     value: function resolveColor(id, index) {
       var _this$props$colorMap$, _this$props$colorMap;
@@ -89,7 +48,7 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "getDefaultDataDefinitions",
     value: function getDefaultDataDefinitions() {
-      var dataDefinitions = _superPropGet(CigaretteChartComponent2, "getDefaultDataDefinitions", this, 3)([]);
+      var dataDefinitions = _get(_getPrototypeOf(CigaretteChartComponent2.prototype), "getDefaultDataDefinitions", this).call(this);
       return dataDefinitions.map(function(dataDef) {
         dataDef.columns = dataDef.columns.slice(1);
         return dataDef;
@@ -103,122 +62,37 @@ 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 : _toConsumableArray(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 _objectSpread(_objectSpread({}, 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 = _createForOfIteratorHelper(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 = _createForOfIteratorHelper(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 plotWidth = this.asProps.plotWidth;
-      return scaleLinear([0, plotWidth]);
+      var invertAxis = this.asProps.invertAxis;
+      return invertAxis ? this.valueScale : this.categoryScale;
     }
   }, {
     key: "yScale",
     get: function get() {
-      var plotHeight = this.asProps.plotHeight;
-      return scaleLinear([plotHeight, 0]);
+      var invertAxis = this.asProps.invertAxis;
+      return invertAxis ? this.categoryScale : this.valueScale;
     }
   }, {
     key: "renderChart",
     value: function renderChart() {
       var _this2 = this;
-      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$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;
-      var items = this.computeCigaretteItems();
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, items.map(function(item, index) {
-        var visualWidth = item.visualWidth, id = item.id;
-        var value = data[id];
-        if (value === interpolateValue || value === null) {
+      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 null;
         }
-        var height = invertAxis ? plotHeight - DEFAULT_GAP * 2 : plotWidth - DEFAULT_GAP * 2;
-        var width = visualWidth;
-        var y = DEFAULT_GAP;
-        var x = _this2.offset;
+        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 += visualWidth;
-        if (index < items.length - 1) {
-          _this2.offset += DEFAULT_GAP;
-        }
+        _this2.offset = _this2.offset + width + wMin;
         return /* @__PURE__ */ React.createElement(Cigarette, {
           key: item.id,
           dataKey: item.id,
@@ -250,10 +124,9 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      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 = Box;
+      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;
       if (!showTooltip) {
         return null;
       }
@@ -261,105 +134,54 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
         x: invertAxis ? "" : void 0,
         y: invertAxis ? void 0 : "",
         wMin: 100,
-        hideHoverLine: true,
-        xIndex: pX !== null ? this.visualScale(pX) : void 0,
-        yIndex: pY !== null ? this.visualScale(pY) : void 0
+        hideHoverLine: true
       }, function(tooltipProps) {
-        var _ref4;
         var dataKey = invertAxis ? tooltipProps.xIndex : tooltipProps.yIndex;
-        var showPercentColumn = showPercentValueInTooltip && _this3.totalValue() !== 0;
+        var total = _this3.totalValue(data);
         if (tooltipViewType === "single") {
-          var _ref3;
           var item = dataDefinitions.find(function(dataDefItem) {
             return dataDefItem.id === dataKey;
           });
           if (!item) {
-            return {
-              children: null
-            };
+            return null;
           }
           return {
-            children: (_ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", _objectSpread({}, assignProps({
-              "columnsCount": showPercentColumn ? "3" : "2",
-              "__excludeProps": ["data"]
-            }, _ref))), /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Dot, {
-              mr: 2,
+            children: /* @__PURE__ */ React.createElement(Flex, {
+              justifyContent: "space-between",
+              key: dataKey
+            }, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Dot, {
+              mr: 4,
               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]))))
+            }, item.label), /* @__PURE__ */ React.createElement(Text, {
+              bold: true
+            }, _this3.tooltipValueFormatter(data[dataKey])))
           };
         }
         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({}, assignProps({
-            "columnsCount": showPercentColumn ? "3" : "2",
-            "__excludeProps": ["data"]
-          }, _ref))), dataDefinitions.map(function(item2) {
-            var style = {
-              opacity: item2.id === dataKey ? 1 : 0.3
-            };
-            return item2.checked && /* @__PURE__ */ React.createElement(React.Fragment, {
-              key: item2.id
+          children: /* @__PURE__ */ React.createElement(React.Fragment, null, tooltipTitle && /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Title, null, "Some tooltip title"), dataDefinitions.map(function(item2) {
+            return item2.checked && /* @__PURE__ */ React.createElement(Flex, {
+              justifyContent: "space-between",
+              key: item2.id,
+              style: {
+                opacity: item2.id === dataKey ? 1 : 0.3
+              }
             }, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Dot, {
-              mr: 2,
-              color: item2.color,
-              style
-            }, item2.label), showPercentColumn && /* @__PURE__ */ React.createElement(Text, {
-              textAlign: "end",
-              color: "text-secondary",
-              style
-            }, _this3.percentValue(data, item2.id)), /* @__PURE__ */ React.createElement(Text, {
-              textAlign: "end",
-              bold: true,
-              style
+              mr: 4,
+              color: item2.color
+            }, item2.label), /* @__PURE__ */ React.createElement(Text, {
+              bold: true
             }, _this3.tooltipValueFormatter(data[item2.id])));
-          }), _this3.renderTooltipTotalLine(data))))
+          }), showTotalInTooltip === true && /* @__PURE__ */ React.createElement(Flex, {
+            mt: 2,
+            justifyContent: "space-between"
+          }, /* @__PURE__ */ React.createElement(Box, {
+            mr: 4
+          }, "Total"), /* @__PURE__ */ React.createElement(Text, {
+            bold: true
+          }, total)))
         };
       });
     }
-  }, {
-    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 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.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() {
@@ -369,49 +191,43 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "render",
     value: function render() {
-      var _ref2 = this.asProps, _ref6;
+      var _ref = this.asProps, _ref3;
       var SChart = 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 _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 header = this.renderHeader();
       if (invertAxis) {
-        var _ref5;
-        return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref5.cn("SChart", _objectSpread({}, assignProps({
+        var _ref2;
+        return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref2.cn("SChart", _objectSpread({}, assignProps({
           "gap": 6,
           "direction": "column",
           "__excludeProps": ["onClick", "data"]
-        }, _ref2))), /* @__PURE__ */ React.createElement(Flex, _ref5.cn("Flex", {
+        }, _ref))), /* @__PURE__ */ React.createElement(Flex, _ref2.cn("Flex", {
           "direction": "column"
-        }), header, /* @__PURE__ */ React.createElement(Plot, _ref5.cn("Plot", {
-          "ref": this.plotRef,
+        }), header, /* @__PURE__ */ React.createElement(Plot, _ref2.cn("Plot", {
           "data": data,
           "scale": [this.xScale, this.yScale],
           "width": plotWidth,
           "height": plotHeight,
           "dataHints": this.dataHints,
           "patterns": patterns,
-          "a11yAltTextConfig": a11yAltTextConfig,
-          "onMouseMove": this.onPlotMouseMove,
-          "onMouseLeave": this.onPlotMouseLeave
+          "a11yAltTextConfig": a11yAltTextConfig
         }), this.renderTooltip(), this.renderChart())), this.renderLegend());
       }
-      return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref6.cn("SChart", _objectSpread({}, assignProps({
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref3.cn("SChart", _objectSpread({}, assignProps({
         "gap": 6,
         "__excludeProps": ["onClick", "data"]
-      }, _ref2))), /* @__PURE__ */ React.createElement(Plot, _ref6.cn("Plot", {
-        "ref": this.plotRef,
+      }, _ref))), /* @__PURE__ */ React.createElement(Plot, _ref3.cn("Plot", {
         "data": data,
         "scale": [this.xScale, this.yScale],
         "width": plotWidth,
         "height": plotHeight,
         "dataHints": this.dataHints,
         "patterns": patterns,
-        "a11yAltTextConfig": a11yAltTextConfig,
-        "onMouseMove": this.onPlotMouseMove,
-        "onMouseLeave": this.onPlotMouseLeave
-      }), this.renderTooltip(), this.renderChart()), /* @__PURE__ */ React.createElement(Flex, _ref6.cn("Flex", {
+        "a11yAltTextConfig": a11yAltTextConfig
+      }), this.renderTooltip(), this.renderChart()), /* @__PURE__ */ React.createElement(Flex, _ref3.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()));
+      }), header && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, _ref3.cn("Box", {}), header), /* @__PURE__ */ React.createElement(Divider, _ref3.cn("Divider", {}))), this.renderLegend()));
     }
   }, {
     key: "getLegendAriaLabel",
@@ -421,32 +237,39 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
       });
     }
   }, {
-    key: "visualScale",
+    key: "selectedData",
     get: function get() {
-      var cigaretteItems = this.computeCigaretteItems();
-      var _cigaretteItems$reduc = cigaretteItems.reduce(function(acc, _ref1, index) {
-        var id = _ref1.id, visualWidth = _ref1.visualWidth;
-        var range2 = acc.range, domain2 = acc.domain;
-        if (visualWidth) {
-          range2.push(id);
-          if (domain2.length === 0) {
-            domain2.push(visualWidth + DEFAULT_GAP);
-            return acc;
-          }
-          if (index !== cigaretteItems.length - 1) {
-            var lastAddedDomain = domain2[domain2.length - 1];
-            domain2.push(lastAddedDomain + visualWidth + DEFAULT_GAP);
-          }
+      var data = this.asProps.data;
+      var dataDefinitions = this.state.dataDefinitions;
+      var result = /* @__PURE__ */ new Map();
+      dataDefinitions.forEach(function(dataDefItem) {
+        var value = data[dataDefItem.id];
+        if (dataDefItem.checked && value !== interpolateValue) {
+          result.set(dataDefItem.id, value);
         }
-        return acc;
-      }, {
-        range: [],
-        domain: []
-      }), range = _cigaretteItems$reduc.range, domain = _cigaretteItems$reduc.domain;
-      return scaleThreshold(domain, range);
+      });
+      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 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 scaleLinear().range(invertAxis ? [0, plotWidth] : [plotHeight, 0]).domain([0, max]);
     }
   }]);
-})(AbstractChart);
+  return CigaretteChartComponent2;
+}(AbstractChart);
 _defineProperty(CigaretteChartComponent, "displayName", "Cigarette.Bar");
 _defineProperty(CigaretteChartComponent, "defaultProps", function(props) {
   var _props$invertAxis;
@@ -461,9 +284,7 @@ _defineProperty(CigaretteChartComponent, "defaultProps", function(props) {
     marginY: 0,
     duration: 500,
     plotWidth: !invertAxis && !props.plotWidth ? 44 : props.plotWidth,
-    plotHeight: invertAxis && !props.plotHeight ? 28 : props.plotHeight,
-    showPercentValueInTooltip: false,
-    minimalBarWidth: DEFAULT_MINIMAL_BAR_WIDTH
+    plotHeight: invertAxis && !props.plotHeight ? 28 : props.plotHeight
   };
 });
 _defineProperty(CigaretteChartComponent, "enhance", [resolveColorEnhance(), uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);

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

@@ -1,25 +1,26 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent } from "@semcore/core";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { scaleBand, scaleLinear } from "d3-scale";
 import React from "react";
-import "../../index.mjs";
+import createComponent from "@semcore/core";
+import { scaleBand, scaleLinear } from "d3-scale";
+import CompactHorizontalBar from "../../CompactHorizontalBar.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
-import CompactHorizontalBar from "../../CompactHorizontalBar.mjs";
-var CompactHorizontalBarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
+import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
+var CompactHorizontalBarChartComponent = /* @__PURE__ */ function(_AbstractChart) {
+  _inherits(CompactHorizontalBarChartComponent2, _AbstractChart);
+  var _super = _createSuper(CompactHorizontalBarChartComponent2);
   function CompactHorizontalBarChartComponent2() {
     _classCallCheck(this, CompactHorizontalBarChartComponent2);
-    return _callSuper(this, CompactHorizontalBarChartComponent2, arguments);
+    return _super.apply(this, arguments);
   }
-  _inherits(CompactHorizontalBarChartComponent2, _AbstractChart);
-  return _createClass(CompactHorizontalBarChartComponent2, [{
+  _createClass(CompactHorizontalBarChartComponent2, [{
     key: "xScale",
     get: function get() {
       var _this$asProps$xScale;
@@ -89,13 +90,14 @@ var CompactHorizontalBarChartComponent = /* @__PURE__ */ (function(_AbstractChar
     key: "valueScale",
     get: function get() {
       var _this$asProps4 = this.asProps, _this$asProps4$margin = _this$asProps4.marginY, marginY = _this$asProps4$margin === void 0 ? 0 : _this$asProps4$margin, plotWidth = _this$asProps4.plotWidth;
-      var sum = _toConsumableArray(_superPropGet(CompactHorizontalBarChartComponent2, "flatValues", this, 1).values()).reduce(function(acc, d) {
+      var sum = _toConsumableArray(_get(_getPrototypeOf(CompactHorizontalBarChartComponent2.prototype), "flatValues", this).values()).reduce(function(acc, d) {
         return acc + d;
       }, 0);
       return scaleLinear().range([marginY, plotWidth]).domain([marginY, sum]);
     }
   }]);
-})(AbstractChart);
+  return CompactHorizontalBarChartComponent2;
+}(AbstractChart);
 _defineProperty(CompactHorizontalBarChartComponent, "displayName", "Chart.CompactHorizontalBar");
 _defineProperty(CompactHorizontalBarChartComponent, "defaultProps", {
   direction: "column",