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

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

@@ -11,14 +11,14 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import Divider from "@semcore/divider";
-import { Flex, Box } from "@semcore/flex-box";
+import { Box, Flex } from "@semcore/flex-box";
 import { Text } from "@semcore/typography";
 import { scaleBand, scaleLinear } from "d3-scale";
 import React from "react";
 import Plot from "../../Plot.mjs";
 import { HoverRect } from "../../Hover.mjs";
 import { interpolateValue, scaleToBand } from "../../utils.mjs";
-import { AbstractChart } from "./AbstractChart.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";
@@ -121,9 +121,10 @@ 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 _ref = this.asProps, _this3 = this;
+      var _this$asProps2 = this.asProps, data = _this$asProps2.data, invertAxis = _this$asProps2.invertAxis, tooltipTitle = _this$asProps2.tooltipTitle, tooltipViewType = _this$asProps2.tooltipViewType, showPercentValueInTooltip = _this$asProps2.showPercentValueInTooltip, styles = _this$asProps2.styles, showTooltip = _this$asProps2.showTooltip;
       var dataDefinitions = this.state.dataDefinitions;
+      var STooltipChildrenWrapper = Box;
       if (!showTooltip) {
         return null;
       }
@@ -133,9 +134,11 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
         wMin: 100,
         hideHoverLine: true
       }, function(tooltipProps) {
+        var _ref4;
         var dataKey = invertAxis ? tooltipProps.xIndex : tooltipProps.yIndex;
-        var total = _this3.totalValue(data);
+        var showPercentColumn = showPercentValueInTooltip && _this3.totalValue(data) !== 0;
         if (tooltipViewType === "single") {
+          var _ref3;
           var item = dataDefinitions.find(function(dataDefItem) {
             return dataDefItem.id === dataKey;
           });
@@ -143,42 +146,71 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
             return null;
           }
           return {
-            children: /* @__PURE__ */ React.createElement(Flex, {
-              justifyContent: "space-between",
-              key: dataKey
-            }, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Dot, {
-              mr: 4,
+            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,
               color: item.color
-            }, item.label), /* @__PURE__ */ React.createElement(Text, {
-              bold: true
-            }, _this3.tooltipValueFormatter(data[dataKey])))
+            }, item.label), showPercentColumn && /* @__PURE__ */ React.createElement(Text, _ref3.cn("Text", {
+              "textAlign": "end",
+              "color": "text-secondary"
+            }), _this3.percentValue(data, item.id)), /* @__PURE__ */ React.createElement(Text, _ref3.cn("Text", {
+              "textAlign": "end",
+              "bold": true
+            }), _this3.tooltipValueFormatter(data[item.id]))))
           };
         }
         return {
-          children: /* @__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
-              }
+          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
             }, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Dot, {
-              mr: 4,
-              color: item2.color
-            }, item2.label), /* @__PURE__ */ React.createElement(Text, {
-              bold: true
+              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
             }, _this3.tooltipValueFormatter(data[item2.id])));
-          }), 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)))
+          }), _this3.renderTooltipTotalLine(data))))
         };
       });
     }
+  }, {
+    key: "renderTooltipTotalLine",
+    value: function renderTooltipTotalLine(dataItem) {
+      var _this$asProps3 = this.asProps, showTotalInTooltip = _this$asProps3.showTotalInTooltip, showPercentValueInTooltip = _this$asProps3.showPercentValueInTooltip;
+      if (!showTotalInTooltip) {
+        return null;
+      }
+      var total = this.totalValue(dataItem);
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, {
+        mt: 2,
+        mr: 2
+      }, "Total"), showPercentValueInTooltip && total !== 0 && /* @__PURE__ */ React.createElement(Text, {
+        mt: 2,
+        textAlign: "end",
+        color: "text-secondary"
+      }, Number.isNaN(total) ? NOT_A_VALUE : "100%"), /* @__PURE__ */ React.createElement(Text, {
+        mt: 2,
+        textAlign: "end",
+        bold: true
+      }, Number.isNaN(total) ? NOT_A_VALUE : total));
+    }
   }, {
     key: "renderHeader",
     value: function renderHeader() {
@@ -188,19 +220,19 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps, _ref3;
+      var _ref2 = this.asProps, _ref6;
       var SChart = 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 _this$asProps4 = this.asProps, styles = _this$asProps4.styles, plotWidth = _this$asProps4.plotWidth, plotHeight = _this$asProps4.plotHeight, data = _this$asProps4.data, patterns = _this$asProps4.patterns, invertAxis = _this$asProps4.invertAxis, a11yAltTextConfig = _this$asProps4.a11yAltTextConfig;
       var header = this.renderHeader();
       if (invertAxis) {
-        var _ref2;
-        return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref2.cn("SChart", _objectSpread({}, assignProps({
+        var _ref5;
+        return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref5.cn("SChart", _objectSpread({}, assignProps({
           "gap": 6,
           "direction": "column",
           "__excludeProps": ["onClick", "data"]
-        }, _ref))), /* @__PURE__ */ React.createElement(Flex, _ref2.cn("Flex", {
+        }, _ref2))), /* @__PURE__ */ React.createElement(Flex, _ref5.cn("Flex", {
           "direction": "column"
-        }), header, /* @__PURE__ */ React.createElement(Plot, _ref2.cn("Plot", {
+        }), header, /* @__PURE__ */ React.createElement(Plot, _ref5.cn("Plot", {
           "data": data,
           "scale": [this.xScale, this.yScale],
           "width": plotWidth,
@@ -210,10 +242,10 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
           "a11yAltTextConfig": a11yAltTextConfig
         }), this.renderTooltip(), this.renderChart())), this.renderLegend());
       }
-      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref3.cn("SChart", _objectSpread({}, assignProps({
+      return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref6.cn("SChart", _objectSpread({}, assignProps({
         "gap": 6,
         "__excludeProps": ["onClick", "data"]
-      }, _ref))), /* @__PURE__ */ React.createElement(Plot, _ref3.cn("Plot", {
+      }, _ref2))), /* @__PURE__ */ React.createElement(Plot, _ref6.cn("Plot", {
         "data": data,
         "scale": [this.xScale, this.yScale],
         "width": plotWidth,
@@ -221,10 +253,10 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
         "dataHints": this.dataHints,
         "patterns": patterns,
         "a11yAltTextConfig": a11yAltTextConfig
-      }), this.renderTooltip(), this.renderChart()), /* @__PURE__ */ React.createElement(Flex, _ref3.cn("Flex", {
+      }), this.renderTooltip(), this.renderChart()), /* @__PURE__ */ React.createElement(Flex, _ref6.cn("Flex", {
         "direction": "column",
         "gap": 2
-      }), header && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, _ref3.cn("Box", {}), header), /* @__PURE__ */ React.createElement(Divider, _ref3.cn("Divider", {}))), this.renderLegend()));
+      }), header && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, _ref6.cn("Box", {}), header), /* @__PURE__ */ React.createElement(Divider, _ref6.cn("Divider", {}))), this.renderLegend()));
     }
   }, {
     key: "getLegendAriaLabel",
@@ -250,14 +282,14 @@ var CigaretteChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "categoryScale",
     get: function get() {
-      var _this$asProps4 = this.asProps, plotWidth = _this$asProps4.plotWidth, plotHeight = _this$asProps4.plotHeight, invertAxis = _this$asProps4.invertAxis;
+      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$asProps5 = this.asProps, plotWidth = _this$asProps5.plotWidth, plotHeight = _this$asProps5.plotHeight, invertAxis = _this$asProps5.invertAxis;
+      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;
@@ -280,7 +312,8 @@ _defineProperty(CigaretteChartComponent, "defaultProps", function(props) {
     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
   };
 });
 _defineProperty(CigaretteChartComponent, "enhance", [resolveColorEnhance(), uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);

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

@@ -69,11 +69,8 @@ var DonutChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     key: "renderTooltip",
     value: function renderTooltip() {
       var _this = this;
-      var _this$asProps2 = this.asProps, data = _this$asProps2.data, showTooltip = _this$asProps2.showTooltip;
+      var data = this.asProps.data;
       var dataDefinitions = this.state.dataDefinitions;
-      if (!showTooltip) {
-        return null;
-      }
       return /* @__PURE__ */ React.createElement(Donut.Tooltip, null, function(_ref) {
         var dataKey = _ref.dataKey;
         var title = dataDefinitions.find(function(item) {

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

@@ -8,8 +8,6 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { Flex, Box } from "@semcore/flex-box";
-import { Text } from "@semcore/typography";
 import { scaleTime, scaleBand, scaleLinear } from "d3-scale";
 import React from "react";
 import Bar from "../../Bar.mjs";
@@ -109,40 +107,20 @@ var HistogramChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     key: "renderTooltip",
     value: function renderTooltip() {
       var _this = this;
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey, showTotalInTooltip = _this$asProps4.showTotalInTooltip, showTooltip = _this$asProps4.showTooltip, invertAxis = _this$asProps4.invertAxis;
-      var dataDefinitions = this.state.dataDefinitions;
-      if (!showTooltip) {
-        return null;
-      }
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey, invertAxis = _this$asProps4.invertAxis;
       return /* @__PURE__ */ React.createElement(HoverRect.Tooltip, {
         x: invertAxis ? void 0 : groupKey,
         y: invertAxis ? groupKey : void 0,
         wMin: 100
       }, function(_ref) {
-        var _dataItem$groupKey;
         var xIndex = _ref.xIndex, yIndex = _ref.yIndex;
         var index = invertAxis ? yIndex : xIndex;
         var dataItem = data[index];
-        var total = _this.totalValue(dataItem);
         return {
-          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Title, null, (_dataItem$groupKey = dataItem[groupKey]) === null || _dataItem$groupKey === void 0 ? void 0 : _dataItem$groupKey.toString()), dataDefinitions.map(function(item) {
-            return item.checked && /* @__PURE__ */ React.createElement(Flex, {
-              justifyContent: "space-between",
-              key: item.id
-            }, /* @__PURE__ */ React.createElement(HoverRect.Tooltip.Dot, {
-              mr: 4,
-              color: item.color
-            }, item.label), /* @__PURE__ */ React.createElement(Text, {
-              bold: true
-            }, _this.tooltipValueFormatter(dataItem[item.id])));
-          }), 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)))
+          children: _this.getTooltipChildren({
+            Tooltip: HoverRect.Tooltip,
+            dataItem
+          })
         };
       });
     }

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

@@ -7,8 +7,6 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
-import { Flex, Box } from "@semcore/flex-box";
-import { Text } from "@semcore/typography";
 import { scaleTime, scaleLinear } from "d3-scale";
 import React from "react";
 import Line from "../../Line.mjs";
@@ -77,38 +75,18 @@ var LineChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     key: "renderTooltip",
     value: function renderTooltip() {
       var _this = this;
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey, showTotalInTooltip = _this$asProps4.showTotalInTooltip, showTooltip = _this$asProps4.showTooltip;
-      var dataDefinitions = this.state.dataDefinitions;
-      if (!showTooltip) {
-        return null;
-      }
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, groupKey = _this$asProps4.groupKey;
       return /* @__PURE__ */ React.createElement(HoverLine.Tooltip, {
         x: groupKey,
         wMin: 100
       }, function(_ref) {
-        var _dataItem$groupKey;
         var xIndex = _ref.xIndex;
         var dataItem = data[xIndex];
-        var total = _this.totalValue(dataItem);
         return {
-          children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HoverLine.Tooltip.Title, null, (_dataItem$groupKey = dataItem[groupKey]) === null || _dataItem$groupKey === void 0 ? void 0 : _dataItem$groupKey.toString()), dataDefinitions.map(function(item) {
-            return item.checked && /* @__PURE__ */ React.createElement(Flex, {
-              justifyContent: "space-between",
-              key: item.id
-            }, /* @__PURE__ */ React.createElement(HoverLine.Tooltip.Dot, {
-              mr: 4,
-              color: item.color
-            }, item.label), /* @__PURE__ */ React.createElement(Text, {
-              bold: true
-            }, _this.tooltipValueFormatter(dataItem[item.id])));
-          }), 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)))
+          children: _this.getTooltipChildren({
+            Tooltip: HoverLine.Tooltip,
+            dataItem
+          })
         };
       });
     }

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

@@ -92,11 +92,8 @@ var ScatterPlotChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     key: "renderTooltip",
     value: function renderTooltip() {
       var _this = this;
-      var _this$asProps5 = this.asProps, data = _this$asProps5.data, groupKey = _this$asProps5.groupKey, showTooltip = _this$asProps5.showTooltip;
+      var _this$asProps5 = this.asProps, data = _this$asProps5.data, groupKey = _this$asProps5.groupKey;
       var dataDefinitions = this.state.dataDefinitions;
-      if (!showTooltip) {
-        return null;
-      }
       return dataDefinitions.filter(function(item) {
         return item.checked;
       }).map(function(item) {

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

@@ -105,10 +105,6 @@ var VennChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      var showTooltip = this.asProps.showTooltip;
-      if (!showTooltip) {
-        return null;
-      }
       return /* @__PURE__ */ React.createElement(Venn.Tooltip, null, function(_ref) {
         var name = _ref.name, dataKey = _ref.dataKey, data = _ref.data;
         return {

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

@@ -18,14 +18,14 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SLegendFlex_119wy_gg_._direction_row_119wy_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_119wy_gg_._direction_column_119wy_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
+    ".___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}",
     /*__inner_css_end__*/
-    "119wy_gg_"
+    "qzq5k_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendFlex": "___SLegendFlex_119wy_gg_",
-    "_direction_row": "_direction_row_119wy_gg_",
-    "_direction_column": "_direction_column_119wy_gg_"
+    "__SLegendFlex": "___SLegendFlex_qzq5k_gg_",
+    "_direction_row": "_direction_row_qzq5k_gg_",
+    "_direction_column": "_direction_column_qzq5k_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_o0eu9_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_o0eu9_gg_:hover{cursor:pointer}.___SLegendItem_o0eu9_gg_.__disabled_o0eu9_gg_:hover{cursor:default}}.___SPointShape_o0eu9_gg_.__color_o0eu9_gg_{background-color:var(--color_o0eu9);margin-right:8px;flex-shrink:0}.___SPointShape_o0eu9_gg_._shape_Circle_o0eu9_gg_._size_l_o0eu9_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_o0eu9_gg_._shape_Circle_o0eu9_gg_._size_m_o0eu9_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_o0eu9_gg_._shape_Line_o0eu9_gg_._size_l_o0eu9_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_o0eu9_gg_._shape_Line_o0eu9_gg_._size_m_o0eu9_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_o0eu9_gg_._shape_Square_o0eu9_gg_._size_l_o0eu9_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_o0eu9_gg_._shape_Square_o0eu9_gg_._size_m_o0eu9_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_o0eu9_gg_._shape_Pattern_o0eu9_gg_{background-color:transparent;margin-right:4px}.___SIcon_o0eu9_gg_{line-height:0;margin-right:4px}.___SIcon_o0eu9_gg_._size_l_o0eu9_gg_{margin-top:4px}.___SIcon_o0eu9_gg_._size_m_o0eu9_gg_{margin-top:2px}.___SLabel_o0eu9_gg_{min-width:0}.___SAdditionalLabel_o0eu9_gg_._size_l_o0eu9_gg_,.___SCount_o0eu9_gg_._size_l_o0eu9_gg_,.___SLabel_o0eu9_gg_._size_l_o0eu9_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_o0eu9_gg_._size_m_o0eu9_gg_,.___SCount_o0eu9_gg_._size_m_o0eu9_gg_,.___SLabel_o0eu9_gg_._size_m_o0eu9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_o0eu9_gg_,.___SCount_o0eu9_gg_{margin-left:4px}.___SAdditionalLabel_o0eu9_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_o0eu9_gg_::before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary, #6c6e79);height:4px;width:4px;border-radius:2px;margin-right:4px}.___SAdditionalLabel_o0eu9_gg_._size_l_o0eu9_gg_::before{margin-top:10px}.___SAdditionalLabel_o0eu9_gg_._size_m_o0eu9_gg_::before{margin-top:8px}.___SPatternSymbol_o0eu9_gg_{transform:scale(.8)}',
+    '.___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)}',
     /*__inner_css_end__*/
-    "o0eu9_gg_"
+    "g4xlu_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendItem": "___SLegendItem_o0eu9_gg_",
-    "_disabled": "__disabled_o0eu9_gg_",
-    "__SPointShape": "___SPointShape_o0eu9_gg_",
-    "_color": "__color_o0eu9_gg_",
-    "--color": "--color_o0eu9",
-    "_shape_Circle": "_shape_Circle_o0eu9_gg_",
-    "_size_l": "_size_l_o0eu9_gg_",
-    "_size_m": "_size_m_o0eu9_gg_",
-    "_shape_Line": "_shape_Line_o0eu9_gg_",
-    "_shape_Square": "_shape_Square_o0eu9_gg_",
-    "_shape_Pattern": "_shape_Pattern_o0eu9_gg_",
-    "__SIcon": "___SIcon_o0eu9_gg_",
-    "__SLabel": "___SLabel_o0eu9_gg_",
-    "__SAdditionalLabel": "___SAdditionalLabel_o0eu9_gg_",
-    "__SCount": "___SCount_o0eu9_gg_",
-    "__SPatternSymbol": "___SPatternSymbol_o0eu9_gg_"
+    "__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_"
   })
 );
 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_104fb_gg_.__columns-count_104fb_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_104fb_gg_._size_l_104fb_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_104fb_gg_._size_m_104fb_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}',
+    '.___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}',
     /*__inner_css_end__*/
-    "104fb_gg_"
+    "12151_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendTable": "___SLegendTable_104fb_gg_",
-    "_columns-count": "__columns-count_104fb_gg_",
-    "__SColumnItem": "___SColumnItem_104fb_gg_",
-    "_size_l": "_size_l_104fb_gg_",
-    "_size_m": "_size_m_104fb_gg_"
+    "__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_"
   })
 );
 var LegendTableRoot = /* @__PURE__ */ (function(_BaseLegend) {

package/lib/esm/style/abstract-chart.shadow.css

@@ -0,0 +1,12 @@
+STooltipChildrenWrapper {
+  display: grid;
+  column-gap: var(--intergalactic-spacing-2x, 8px);
+
+  &[columnsCount='2'] {
+    grid-template-columns: auto minmax(28px, max-content);
+  }
+
+  &[columnsCount='3'] {
+    grid-template-columns: auto minmax(28px, max-content) minmax(28px, max-content);
+  }
+}

package/lib/types/a11y/PlotA11yModule.d.ts

@@ -9,4 +9,4 @@ export type A11yViewProps = {
     config: PartialDataSummarizationConfig;
     plotRef: React.RefObject<HTMLElement>;
 };
-export declare const PlotA11yModule: React.FC<A11yViewProps>;
+export declare function PlotA11yModule(props: A11yViewProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

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

@@ -2,6 +2,7 @@ import { Component } from '@semcore/core';
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 import React from 'react';
 import type { BaseChartProps, BaseLegendProps, ListData, ObjectData } from './AbstractChart.type';
+import type { HoverLine, HoverRect } from '../..';
 import { interpolateValue } from '../../utils';
 import type { LegendItem } from '../ChartLegend/LegendItem/LegendItem.type';
 type ChartState = {
@@ -11,8 +12,11 @@ type ChartState = {
     highlightedLine: number;
     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> {
-    static style: {};
+    static style: {
+        [key: string]: string;
+    };
     static defaultProps: Partial<BaseChartProps<any>>;
     /**
      * Padding from the end's of chart to the container (except axis sides)
@@ -36,6 +40,7 @@ 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;
@@ -47,6 +52,11 @@ export declare abstract class AbstractChart<D extends ListData | ObjectData, T e
     protected defaultLegendProps(): Partial<BaseLegendProps>;
     protected renderLegend(): React.JSX.Element | null;
     protected renderAxis(): React.ReactNode;
+    protected getTooltipChildren<D extends ObjectData>(options: {
+        Tooltip: typeof HoverLine['Tooltip'] | typeof HoverRect['Tooltip'];
+        dataItem: D;
+    }): React.ReactNode;
+    protected renderTooltipTotalLine<D extends ObjectData>(dataItem: D): React.JSX.Element | null;
     render(): React.ReactNode;
 }
 export {};

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

@@ -13,7 +13,7 @@ export type BubbleChartData = Array<{
     label?: string;
     color?: string;
 }>;
-export type BubbleChartProps = BaseChartProps<BubbleChartData> & {
+export type BubbleChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<BubbleChartData>, 'showTotalInTooltip'> & {
     /** Field name that groups the data points */
     groupKey?: never;
     /** Custom x-axis scale */

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

@@ -9,6 +9,8 @@ export type CigaretteChartProps = Intergalactic.InternalTypings.EfficientOmit<Ba
     tooltipTitle?: string;
     /** Controls whether the tooltip shows all data or single item data */
     tooltipViewType?: 'all' | 'single';
+    /** Show percent value in tooltip */
+    showPercentValueInTooltip?: boolean;
     /** Header content for the chart */
     header?: React.ReactNode;
     /** Animation duration in milliseconds */

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

@@ -5,7 +5,7 @@ import type React from 'react';
 import type { BaseChartProps } from './AbstractChart.type';
 type BarKey = string;
 export type CompactHorizontalBarChartData = Array<Record<BarKey, number | string>>;
-export type CompactHorizontalBarChartProps = BaseChartProps<CompactHorizontalBarChartData> & {
+export type CompactHorizontalBarChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<CompactHorizontalBarChartData>, 'showTotalInTooltip'> & {
     /** Field name from data array for the x-axis values */
     x: string;
     /** Field name from data array for the y-axis values */

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

@@ -5,7 +5,7 @@ import type React from 'react';
 import type { BaseChartProps } from './AbstractChart.type';
 export type DataKey = string;
 export type DonutChartData = Record<DataKey, number>;
-export type DonutChartProps = BaseChartProps<DonutChartData> & {
+export type DonutChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<DonutChartData>, 'showTotalInTooltip'> & {
     /** Internal */
     groupKey?: never;
     /** Custom x-axis scale */

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

@@ -3,7 +3,7 @@ import type { Flex } from '@semcore/flex-box';
 import type { ScaleLinear } from 'd3-scale';
 import type { BaseChartProps } from './AbstractChart.type';
 export type RadarChartData = Record<string, string[] | number[]>;
-export type RadarChartProps = BaseChartProps<RadarChartData> & {
+export type RadarChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<RadarChartData>, 'showTotalInTooltip' | 'showPercentValueInTooltip'> & {
     groupKey: string;
     scale?: ScaleLinear<any, any>;
     xScale?: never;

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

@@ -4,7 +4,7 @@ import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import type { BaseChartProps } from './AbstractChart.type';
 import type { interpolateValue } from '../../utils';
 export type ScatterPlotChartData = Array<Record<string, number | typeof interpolateValue | Date>>;
-export type ScatterPlotChartProps = BaseChartProps<ScatterPlotChartData> & {
+export type ScatterPlotChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<ScatterPlotChartData>, 'showTotalInTooltip'> & {
     /** Field name that groups the data points */
     groupKey: string;
     /** Custom x-axis scale */

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

@@ -4,7 +4,7 @@ import type { ScaleLinear } from 'd3-scale';
 import type { BaseChartProps } from './AbstractChart.type';
 export type DataKey = string;
 export type VennChartData = Record<DataKey, number>;
-export type VennChartProps = BaseChartProps<VennChartData> & {
+export type VennChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<VennChartData>, 'showTotalInTooltip'> & {
     /** Internal */
     groupKey?: never;
     /** Custom x-axis scale */