@semcore/d3-chart 16.5.0 → 16.6.0-prerelease.2

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

@@ -1,5 +1,7 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _callSuper from "@babel/runtime/helpers/esm/callSuper";
@@ -9,34 +11,75 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps } from "@semcore/core";
 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 Divider from "@semcore/divider";
 import { Box, Flex } from "@semcore/flex-box";
 import { Text } from "@semcore/typography";
-import { scaleBand, scaleLinear } from "d3-scale";
+import { scaleLinear, scaleThreshold } from "d3-scale";
 import React from "react";
 import Plot from "../../Plot.mjs";
 import { HoverRect } from "../../Hover.mjs";
-import { interpolateValue, scaleToBand } from "../../utils.mjs";
+import { interpolateValue, eventToPoint } from "../../utils.mjs";
 import { NOT_A_VALUE, AbstractChart } from "./AbstractChart.mjs";
 import AnimatedClipPath from "../../AnimatedClipPath.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
 import Cigarette from "../Cigarette/Cigarette.mjs";
-var wMin = 2;
+var DEFAULT_MINIMAL_BAR_WIDTH = 2;
+var DEFAULT_GAP = 2;
 var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
-  function CigaretteChartComponent2() {
+  function CigaretteChartComponent2(props) {
     var _this;
     _classCallCheck(this, CigaretteChartComponent2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, CigaretteChartComponent2, [].concat(args));
+    _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
+    });
     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;
+      });
+    }
+  }, {
     key: "resolveColor",
     value: function resolveColor(id, index) {
       var _this$props$colorMap$, _this$props$colorMap;
@@ -59,37 +102,122 @@ 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 invertAxis = this.asProps.invertAxis;
-      return invertAxis ? this.valueScale : this.categoryScale;
+      var plotWidth = this.asProps.plotWidth;
+      return 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 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.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) {
+      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 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 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.createElement(Cigarette, {
           key: item.id,
           dataKey: item.id,
@@ -122,8 +250,8 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     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 _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;
       if (!showTooltip) {
         return null;
@@ -132,18 +260,22 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
         x: invertAxis ? "" : void 0,
         y: invertAxis ? void 0 : "",
         wMin: 100,
-        hideHoverLine: true
+        hideHoverLine: true,
+        xIndex: pX !== null ? this.visualScale(pX) : void 0,
+        yIndex: pY !== null ? this.visualScale(pY) : void 0
       }, function(tooltipProps) {
         var _ref4;
         var dataKey = invertAxis ? tooltipProps.xIndex : tooltipProps.yIndex;
-        var showPercentColumn = showPercentValueInTooltip && _this3.totalValue(data) !== 0;
+        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: (_ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", _objectSpread({}, assignProps({
@@ -190,14 +322,30 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
         };
       });
     }
+  }, {
+    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$asProps3 = this.asProps, showTotalInTooltip = _this$asProps3.showTotalInTooltip, showPercentValueInTooltip = _this$asProps3.showPercentValueInTooltip;
+      var _this$asProps4 = this.asProps, showTotalInTooltip = _this$asProps4.showTotalInTooltip, showPercentValueInTooltip = _this$asProps4.showPercentValueInTooltip;
       if (!showTotalInTooltip) {
         return null;
       }
-      var total = this.totalValue(dataItem);
+      var total = this.totalValue();
       return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, {
         mt: 2,
         mr: 2
@@ -222,7 +370,7 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     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 _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 _ref5;
@@ -233,26 +381,32 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
         }, _ref2))), /* @__PURE__ */ React.createElement(Flex, _ref5.cn("Flex", {
           "direction": "column"
         }), header, /* @__PURE__ */ React.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 _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref6.cn("SChart", _objectSpread({}, assignProps({
         "gap": 6,
         "__excludeProps": ["onClick", "data"]
       }, _ref2))), /* @__PURE__ */ React.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
+        "a11yAltTextConfig": a11yAltTextConfig,
+        "onMouseMove": this.onPlotMouseMove,
+        "onMouseLeave": this.onPlotMouseLeave
       }), this.renderTooltip(), this.renderChart()), /* @__PURE__ */ React.createElement(Flex, _ref6.cn("Flex", {
         "direction": "column",
         "gap": 2
@@ -266,35 +420,29 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
       });
     }
   }, {
-    key: "selectedData",
+    key: "visualScale",
     get: function get() {
-      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);
+      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);
+          }
         }
-      });
-      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]);
+        return acc;
+      }, {
+        range: [],
+        domain: []
+      }), range = _cigaretteItems$reduc.range, domain = _cigaretteItems$reduc.domain;
+      return scaleThreshold(domain, range);
     }
   }]);
 })(AbstractChart);
@@ -313,7 +461,8 @@ _defineProperty(CigaretteChartComponent, "defaultProps", function(props) {
     duration: 500,
     plotWidth: !invertAxis && !props.plotWidth ? 44 : props.plotWidth,
     plotHeight: invertAxis && !props.plotHeight ? 28 : props.plotHeight,
-    showPercentValueInTooltip: false
+    showPercentValueInTooltip: false,
+    minimalBarWidth: DEFAULT_MINIMAL_BAR_WIDTH
   };
 });
 _defineProperty(CigaretteChartComponent, "enhance", [resolveColorEnhance(), uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);

package/lib/esm/component/ChartLegend/LegendFlex/LegendFlex.mjs

@@ -18,14 +18,14 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SLegendFlex_qzq5k_gg_._direction_row_qzq5k_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_qzq5k_gg_._direction_column_qzq5k_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
+    ".___SLegendFlex_bsbfx_gg_._direction_row_bsbfx_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_bsbfx_gg_._direction_column_bsbfx_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
     /*__inner_css_end__*/
-    "qzq5k_gg_"
+    "bsbfx_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendFlex": "___SLegendFlex_qzq5k_gg_",
-    "_direction_row": "_direction_row_qzq5k_gg_",
-    "_direction_column": "_direction_column_qzq5k_gg_"
+    "__SLegendFlex": "___SLegendFlex_bsbfx_gg_",
+    "_direction_row": "_direction_row_bsbfx_gg_",
+    "_direction_column": "_direction_column_bsbfx_gg_"
   })
 );
 var LegendFlexRoot = /* @__PURE__ */ (function(_BaseLegend) {

package/lib/esm/component/ChartLegend/LegendItem/LegendItem.mjs

@@ -21,27 +21,27 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendItem_g4xlu_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_g4xlu_gg_:hover{cursor:pointer}.___SLegendItem_g4xlu_gg_.__disabled_g4xlu_gg_:hover{cursor:default}}.___SPointShape_g4xlu_gg_.__color_g4xlu_gg_{background-color:var(--color_g4xlu);margin-right:8px;flex-shrink:0}.___SPointShape_g4xlu_gg_._shape_Circle_g4xlu_gg_._size_l_g4xlu_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_g4xlu_gg_._shape_Circle_g4xlu_gg_._size_m_g4xlu_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_g4xlu_gg_._shape_Line_g4xlu_gg_._size_l_g4xlu_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_g4xlu_gg_._shape_Line_g4xlu_gg_._size_m_g4xlu_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_g4xlu_gg_._shape_Square_g4xlu_gg_._size_l_g4xlu_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_g4xlu_gg_._shape_Square_g4xlu_gg_._size_m_g4xlu_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_g4xlu_gg_._shape_Pattern_g4xlu_gg_{background-color:transparent;margin-right:4px}.___SIcon_g4xlu_gg_{line-height:0;margin-right:4px}.___SIcon_g4xlu_gg_._size_l_g4xlu_gg_{margin-top:4px}.___SIcon_g4xlu_gg_._size_m_g4xlu_gg_{margin-top:2px}.___SLabel_g4xlu_gg_{min-width:0}.___SAdditionalLabel_g4xlu_gg_._size_l_g4xlu_gg_,.___SCount_g4xlu_gg_._size_l_g4xlu_gg_,.___SLabel_g4xlu_gg_._size_l_g4xlu_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_g4xlu_gg_._size_m_g4xlu_gg_,.___SCount_g4xlu_gg_._size_m_g4xlu_gg_,.___SLabel_g4xlu_gg_._size_m_g4xlu_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_g4xlu_gg_,.___SCount_g4xlu_gg_{margin-left:4px}.___SAdditionalLabel_g4xlu_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_g4xlu_gg_::before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary, #6c6e79);height:4px;width:4px;border-radius:2px;margin-right:4px}.___SAdditionalLabel_g4xlu_gg_._size_l_g4xlu_gg_::before{margin-top:10px}.___SAdditionalLabel_g4xlu_gg_._size_m_g4xlu_gg_::before{margin-top:8px}.___SPatternSymbol_g4xlu_gg_{transform:scale(.8)}',
+    '.___SLegendItem_ah6rb_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_ah6rb_gg_:hover{cursor:pointer}.___SLegendItem_ah6rb_gg_.__disabled_ah6rb_gg_:hover{cursor:default}}.___SPointShape_ah6rb_gg_.__color_ah6rb_gg_{background-color:var(--color_ah6rb);margin-right:8px;flex-shrink:0}.___SPointShape_ah6rb_gg_._shape_Circle_ah6rb_gg_._size_l_ah6rb_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_ah6rb_gg_._shape_Circle_ah6rb_gg_._size_m_ah6rb_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_ah6rb_gg_._shape_Line_ah6rb_gg_._size_l_ah6rb_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_ah6rb_gg_._shape_Line_ah6rb_gg_._size_m_ah6rb_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_ah6rb_gg_._shape_Square_ah6rb_gg_._size_l_ah6rb_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_ah6rb_gg_._shape_Square_ah6rb_gg_._size_m_ah6rb_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_ah6rb_gg_._shape_Pattern_ah6rb_gg_{background-color:transparent;margin-right:4px}.___SIcon_ah6rb_gg_{line-height:0;margin-right:4px}.___SIcon_ah6rb_gg_._size_l_ah6rb_gg_{margin-top:4px}.___SIcon_ah6rb_gg_._size_m_ah6rb_gg_{margin-top:2px}.___SLabel_ah6rb_gg_{min-width:0}.___SAdditionalLabel_ah6rb_gg_._size_l_ah6rb_gg_,.___SCount_ah6rb_gg_._size_l_ah6rb_gg_,.___SLabel_ah6rb_gg_._size_l_ah6rb_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_ah6rb_gg_._size_m_ah6rb_gg_,.___SCount_ah6rb_gg_._size_m_ah6rb_gg_,.___SLabel_ah6rb_gg_._size_m_ah6rb_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_ah6rb_gg_,.___SCount_ah6rb_gg_{margin-left:4px}.___SAdditionalLabel_ah6rb_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_ah6rb_gg_::before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary, #6c6e79);height:4px;width:4px;border-radius:2px;margin-right:4px}.___SAdditionalLabel_ah6rb_gg_._size_l_ah6rb_gg_::before{margin-top:10px}.___SAdditionalLabel_ah6rb_gg_._size_m_ah6rb_gg_::before{margin-top:8px}.___SPatternSymbol_ah6rb_gg_{transform:scale(.8)}',
     /*__inner_css_end__*/
-    "g4xlu_gg_"
+    "ah6rb_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendItem": "___SLegendItem_g4xlu_gg_",
-    "_disabled": "__disabled_g4xlu_gg_",
-    "__SPointShape": "___SPointShape_g4xlu_gg_",
-    "_color": "__color_g4xlu_gg_",
-    "--color": "--color_g4xlu",
-    "_shape_Circle": "_shape_Circle_g4xlu_gg_",
-    "_size_l": "_size_l_g4xlu_gg_",
-    "_size_m": "_size_m_g4xlu_gg_",
-    "_shape_Line": "_shape_Line_g4xlu_gg_",
-    "_shape_Square": "_shape_Square_g4xlu_gg_",
-    "_shape_Pattern": "_shape_Pattern_g4xlu_gg_",
-    "__SIcon": "___SIcon_g4xlu_gg_",
-    "__SLabel": "___SLabel_g4xlu_gg_",
-    "__SAdditionalLabel": "___SAdditionalLabel_g4xlu_gg_",
-    "__SCount": "___SCount_g4xlu_gg_",
-    "__SPatternSymbol": "___SPatternSymbol_g4xlu_gg_"
+    "__SLegendItem": "___SLegendItem_ah6rb_gg_",
+    "_disabled": "__disabled_ah6rb_gg_",
+    "__SPointShape": "___SPointShape_ah6rb_gg_",
+    "_color": "__color_ah6rb_gg_",
+    "--color": "--color_ah6rb",
+    "_shape_Circle": "_shape_Circle_ah6rb_gg_",
+    "_size_l": "_size_l_ah6rb_gg_",
+    "_size_m": "_size_m_ah6rb_gg_",
+    "_shape_Line": "_shape_Line_ah6rb_gg_",
+    "_shape_Square": "_shape_Square_ah6rb_gg_",
+    "_shape_Pattern": "_shape_Pattern_ah6rb_gg_",
+    "__SIcon": "___SIcon_ah6rb_gg_",
+    "__SLabel": "___SLabel_ah6rb_gg_",
+    "__SAdditionalLabel": "___SAdditionalLabel_ah6rb_gg_",
+    "__SCount": "___SCount_ah6rb_gg_",
+    "__SPatternSymbol": "___SPatternSymbol_ah6rb_gg_"
   })
 );
 var enhance = [resolveColorEnhance(), uniqueIDEnhancement()];

package/lib/esm/component/ChartLegend/LegendTable/LegendTable.mjs

@@ -14,16 +14,16 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendTable_12151_gg_.__columns-count_12151_gg_{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto .2fr;align-items:center;height:-moz-fit-content;height:fit-content;grid-column-gap:16px;grid-row-gap:8px}.___SColumnItem_12151_gg_._size_l_12151_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_12151_gg_._size_m_12151_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}',
+    '.___SLegendTable_nfmvg_gg_.__columns-count_nfmvg_gg_{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto .2fr;align-items:center;height:-moz-fit-content;height:fit-content;grid-column-gap:16px;grid-row-gap:8px}.___SColumnItem_nfmvg_gg_._size_l_nfmvg_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_nfmvg_gg_._size_m_nfmvg_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}',
     /*__inner_css_end__*/
-    "12151_gg_"
+    "nfmvg_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendTable": "___SLegendTable_12151_gg_",
-    "_columns-count": "__columns-count_12151_gg_",
-    "__SColumnItem": "___SColumnItem_12151_gg_",
-    "_size_l": "_size_l_12151_gg_",
-    "_size_m": "_size_m_12151_gg_"
+    "__SLegendTable": "___SLegendTable_nfmvg_gg_",
+    "_columns-count": "__columns-count_nfmvg_gg_",
+    "__SColumnItem": "___SColumnItem_nfmvg_gg_",
+    "_size_l": "_size_l_nfmvg_gg_",
+    "_size_m": "_size_m_nfmvg_gg_"
   })
 );
 var LegendTableRoot = /* @__PURE__ */ (function(_BaseLegend) {

package/lib/esm/style/bubble.shadow.css

@@ -18,6 +18,10 @@ g[visible='false'] {
   display: none;
 }
 
+SBubble[clickable] {
+  cursor: pointer;
+}
+
 SBubble[color] {
   fill: var(--color);
 }

package/lib/esm/utils.mjs

@@ -5,7 +5,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import EventEmitter from "@semcore/core/lib/utils/eventEmitter";
 import { extent, bisector } from "d3-array";
-import { scaleSqrt, scaleBand, scaleQuantize } from "d3-scale";
+import { scaleSqrt, scaleQuantize, scaleBand } from "d3-scale";
 var eventToPoint = function eventToPoint2(event, svgRoot) {
   var node = event.currentTarget || event.target;
   var rect = svgRoot.getBoundingClientRect();
@@ -240,7 +240,7 @@ var calculateBubbleDomain = function calculateBubbleDomain2(data, key, range) {
   var maxValueShift = valueScale(maxestValue) * pixelRatio;
   min -= minValueShift * 2;
   max += maxValueShift * 2;
-  return [min, max];
+  return [Math.floor(min), Math.floor(max)];
 };
 var PlotEventEmitter = EventEmitter;
 export {

package/lib/types/component/Chart/AbstractChart.d.ts

@@ -5,7 +5,7 @@ import type { BaseChartProps, BaseLegendProps, ListData, ObjectData } from './Ab
 import type { HoverLine, HoverRect } from '../..';
 import { interpolateValue } from '../../utils';
 import type { LegendItem } from '../ChartLegend/LegendItem/LegendItem.type';
-type ChartState = {
+export type ChartState = {
     dataDefinitions: Array<LegendItem & {
         columns: React.ReactNode[];
     }>;
@@ -13,7 +13,7 @@ type ChartState = {
     withTrend: boolean;
 };
 export declare const NOT_A_VALUE = "n/a";
-export declare abstract class AbstractChart<D extends ListData | ObjectData, T extends BaseChartProps<D>, E extends readonly ((...args: any[]) => any)[] = []> extends Component<T, {}, ChartState, E> {
+export declare abstract class AbstractChart<Data extends ListData | ObjectData, Props extends BaseChartProps<Data>, Enhancers extends readonly ((...args: any[]) => any)[] = [], State extends ChartState = ChartState, DefaultProps = {}> extends Component<Props, {}, State, Enhancers, DefaultProps> {
     static style: {
         [key: string]: string;
     };
@@ -23,9 +23,8 @@ export declare abstract class AbstractChart<D extends ListData | ObjectData, T e
      */
     protected plotPadding: number;
     protected dataHints: import("../../a11y/hints").DataStructureHints;
-    state: ChartState;
-    constructor(props: T);
-    componentDidUpdate(prevProps: T): void;
+    constructor(props: Props);
+    componentDidUpdate(prevProps: Props): void;
     protected getDefaultDataDefinitions(): Array<LegendItem & {
         columns: React.ReactNode[];
     }>;
@@ -40,7 +39,6 @@ export declare abstract class AbstractChart<D extends ListData | ObjectData, T e
     protected get flatValues(): Set<number>;
     protected get maxStackedValue(): number;
     protected totalValue(data: ObjectData): number;
-    protected percentValue(data: ObjectData, key: string): string;
     protected getValueScale(values: number[]): number;
     protected setHighlightedLine(index: number): void;
     protected handleChangeVisible(id: string, isVisible: boolean): void;
@@ -59,4 +57,3 @@ export declare abstract class AbstractChart<D extends ListData | ObjectData, T e
     protected renderTooltipTotalLine<D extends ObjectData>(dataItem: D): React.JSX.Element | null;
     render(): React.ReactNode;
 }
-export {};

package/lib/types/component/Chart/CigaretteChart.type.d.ts

@@ -2,8 +2,8 @@ import type { Intergalactic } from '@semcore/core';
 import type React from 'react';
 import type { BaseChartProps } from './AbstractChart.type';
 import type { interpolateValue } from '../../utils';
-type DataKey = string;
-export type CigaretteChartData = Record<DataKey, number | typeof interpolateValue>;
+export type CigaretteChartDataKey = string;
+export type CigaretteChartData = Record<CigaretteChartDataKey, number | typeof interpolateValue>;
 export type CigaretteChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<CigaretteChartData>, 'xScale' | 'yScale'> & {
     /** Title text displayed in the tooltip */
     tooltipTitle?: string;
@@ -11,12 +11,15 @@ export type CigaretteChartProps = Intergalactic.InternalTypings.EfficientOmit<Ba
     tooltipViewType?: 'all' | 'single';
     /** Show percent value in tooltip */
     showPercentValueInTooltip?: boolean;
+    /** Custom percent formatter. */
+    percentFormatter?: (value: number) => number;
     /** Header content for the chart */
     header?: React.ReactNode;
     /** Animation duration in milliseconds */
     duration?: number;
     /** Click handler that receives the data key and event */
-    onClick?: (key: DataKey, event: React.SyntheticEvent) => void;
+    onClick?: (key: CigaretteChartDataKey, event: React.SyntheticEvent) => void;
+    /** Minimal bar width in pixels. Default is `2`. */
+    minimalBarWidth?: number;
 };
 export type CigaretteChartType = Intergalactic.Component<'div', CigaretteChartProps>;
-export {};