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

package/lib/esm/Tooltip.mjs

@@ -20,19 +20,19 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___STooltip_1m894_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);position:relative;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-popper-rounded, 6px);border:1px solid var(--intergalactic-border-secondary, #e0e1e9);box-sizing:border-box;box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));padding:var(--intergalactic-spacing-3x, 12px)}.___STitle_1m894_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SDotGroup_1m894_gg_{display:flex;align-items:center}.___SDot_1m894_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDotCircle_1m894_gg_.__color_1m894_gg_{background-color:var(--color_1m894);width:8px;height:8px;border-radius:50%}.___SFooter_1m894_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9);padding:var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-3x, 12px);border-radius:0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px);margin:var(--intergalactic-spacing-3x, 12px) calc(-1*var(--intergalactic-spacing-3x, 12px)) calc(-1*var(--intergalactic-spacing-3x, 12px))}",
+    ".___STooltip_gj0h7_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);position:relative;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-popper-rounded, 6px);border:1px solid var(--intergalactic-border-secondary, #e0e1e9);box-sizing:border-box;box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));padding:var(--intergalactic-spacing-3x, 12px)}.___STitle_gj0h7_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SDotGroup_gj0h7_gg_{display:flex;align-items:center}.___SDot_gj0h7_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDotCircle_gj0h7_gg_.__color_gj0h7_gg_{background-color:var(--color_gj0h7);width:8px;height:8px;border-radius:50%}.___SFooter_gj0h7_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9);padding:var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-3x, 12px);border-radius:0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px);margin:var(--intergalactic-spacing-3x, 12px) calc(-1*var(--intergalactic-spacing-3x, 12px)) calc(-1*var(--intergalactic-spacing-3x, 12px))}",
     /*__inner_css_end__*/
-    "1m894_gg_"
+    "gj0h7_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STooltip": "___STooltip_1m894_gg_",
-    "__STitle": "___STitle_1m894_gg_",
-    "__SDotGroup": "___SDotGroup_1m894_gg_",
-    "__SDot": "___SDot_1m894_gg_",
-    "__SDotCircle": "___SDotCircle_1m894_gg_",
-    "_color": "__color_1m894_gg_",
-    "--color": "--color_1m894",
-    "__SFooter": "___SFooter_1m894_gg_"
+    "__STooltip": "___STooltip_gj0h7_gg_",
+    "__STitle": "___STitle_gj0h7_gg_",
+    "__SDotGroup": "___SDotGroup_gj0h7_gg_",
+    "__SDot": "___SDot_gj0h7_gg_",
+    "__SDotCircle": "___SDotCircle_gj0h7_gg_",
+    "_color": "__color_gj0h7_gg_",
+    "--color": "--color_gj0h7",
+    "__SFooter": "___SFooter_gj0h7_gg_"
   })
 );
 var TooltipDotRenderContext = /* @__PURE__ */ React.createContext({

package/lib/esm/Venn.mjs

@@ -22,19 +22,19 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SCircle_1bird_gg_,.___SIntersection_1bird_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:2px}.___SCircle_1bird_gg_{fill:var(--intergalactic-chart-palette-order-2, #59ddaa);fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_1bird);transition-timing-function:ease-in-out}@media (hover:hover){.___SCircle_1bird_gg_:hover{fill-opacity:.7}}.___SCircle_1bird_gg_.__color_1bird_gg_{fill:var(--color_1bird)}.___SCircle_1bird_gg_.__pattern_1bird_gg_.__color_1bird_gg_{fill:var(--pattern_1bird);fill-opacity:.7;stroke:var(--color_1bird);stroke-width:1px}@media (hover:hover){.___SCircle_1bird_gg_.__pattern_1bird_gg_.__color_1bird_gg_:hover{fill-opacity:.85}}.___SCircle_1bird_gg_.__transparent_1bird_gg_{opacity:.3}.___SIntersection_1bird_gg_{fill-opacity:0}@media (hover:hover){.___SIntersection_1bird_gg_:hover{fill-opacity:.1}}.___SIntersection_1bird_gg_.__transparent_1bird_gg_{opacity:.3}",
+    ".___SCircle_fyipu_gg_,.___SIntersection_fyipu_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:2px}.___SCircle_fyipu_gg_{fill:var(--intergalactic-chart-palette-order-2, #59ddaa);fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_fyipu);transition-timing-function:ease-in-out}@media (hover:hover){.___SCircle_fyipu_gg_:hover{fill-opacity:.7}}.___SCircle_fyipu_gg_.__color_fyipu_gg_{fill:var(--color_fyipu)}.___SCircle_fyipu_gg_.__pattern_fyipu_gg_.__color_fyipu_gg_{fill:var(--pattern_fyipu);fill-opacity:.7;stroke:var(--color_fyipu);stroke-width:1px}@media (hover:hover){.___SCircle_fyipu_gg_.__pattern_fyipu_gg_.__color_fyipu_gg_:hover{fill-opacity:.85}}.___SCircle_fyipu_gg_.__transparent_fyipu_gg_{opacity:.3}.___SIntersection_fyipu_gg_{fill-opacity:0}@media (hover:hover){.___SIntersection_fyipu_gg_:hover{fill-opacity:.1}}.___SIntersection_fyipu_gg_.__transparent_fyipu_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "1bird_gg_"
+    "fyipu_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SCircle": "___SCircle_1bird_gg_",
-    "_color": "__color_1bird_gg_",
-    "--color": "--color_1bird",
-    "_transparent": "__transparent_1bird_gg_",
-    "__SIntersection": "___SIntersection_1bird_gg_",
-    "--duration": "--duration_1bird",
-    "_pattern": "__pattern_1bird_gg_",
-    "--pattern": "--pattern_1bird"
+    "__SCircle": "___SCircle_fyipu_gg_",
+    "_color": "__color_fyipu_gg_",
+    "--color": "--color_fyipu",
+    "_transparent": "__transparent_fyipu_gg_",
+    "__SIntersection": "___SIntersection_fyipu_gg_",
+    "--duration": "--duration_fyipu",
+    "_pattern": "__pattern_fyipu_gg_",
+    "--pattern": "--pattern_fyipu"
   })
 );
 var VennRoot = /* @__PURE__ */ (function(_Component) {
@@ -236,13 +236,13 @@ function Intersection(props) {
     "onClickCapture": callAllEventHandlers(onClickIntersectionRoot, onClick)
   }));
 }
-var VennTooltip = function VennTooltip2(props) {
+function VennTooltip(props) {
   var _ref = arguments[0], _ref4;
   var SVennTooltip = Tooltip;
   return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SVennTooltip, _ref4.cn("SVennTooltip", _objectSpread({}, assignProps({
     "excludeAnchorProps": true
   }, _ref))));
-};
+}
 var Venn = createElement(VennRoot, {
   Circle,
   Intersection,

package/lib/esm/a11y/PlotA11yModule.mjs

@@ -12,17 +12,17 @@ var styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlotA11yModule_edvf5_gg_{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}.___SPlotA11yModule_edvf5_gg_:focus{-webkit-user-select:all;-moz-user-select:all;user-select:all;pointer-events:all;opacity:1}",
+    ".___SPlotA11yModule_1jy6a_gg_{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}.___SPlotA11yModule_1jy6a_gg_:focus{-webkit-user-select:all;-moz-user-select:all;user-select:all;pointer-events:all;opacity:1}",
     /*__inner_css_end__*/
-    "edvf5_gg_"
+    "1jy6a_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlotA11yModule": "___SPlotA11yModule_edvf5_gg_"
+    "__SPlotA11yModule": "___SPlotA11yModule_1jy6a_gg_"
   })
 );
 var globalWasFocused = false;
 var globalNavWithKeyboard = false;
-var PlotA11yModule = function PlotA11yModule2(props) {
+function PlotA11yModule(props) {
   var _ref = arguments[0], _ref5;
   var SPlotA11yModule = Box;
   var _React$useState = React.useState(globalWasFocused), _React$useState2 = _slicedToArray(_React$useState, 2), wasFocused = _React$useState2[0], setWasFocused = _React$useState2[1];
@@ -110,7 +110,7 @@ var PlotA11yModule = function PlotA11yModule2(props) {
     "tabIndex": 0,
     "onFocus": hadnleHiddenElementsFocus
   }, _ref))), t("disabled"));
-};
+}
 export {
   PlotA11yModule
 };

package/lib/esm/a11y/PlotA11yView.mjs

@@ -15,12 +15,12 @@ var styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlotA11yView_x91v4_gg_{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);color:var(--intergalactic-text-primary, #191b23);border:3px solid var(--intergalactic-border-primary, #c4c7cf);font-size:var(--intergalactic-fs-50, 10px);padding:2px;width:200px;height:200px;max-width:80%;max-height:80%;overflow:auto}.___SPlotA11yView_x91v4_gg_:focus,.___SPlotA11yView_x91v4_gg_:focus-within{-webkit-user-select:all;-moz-user-select:all;user-select:all;pointer-events:all;opacity:1;z-index:var(--intergalactic-z-index-overlay, 500);position:relative;display:block}.___SPlotA11yView_x91v4_gg_ a{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;margin-bottom:var(--intergalactic-spacing-2x, 8px);display:block}.___SPlotA11yView_x91v4_gg_ table,.___SPlotA11yView_x91v4_gg_ td,.___SPlotA11yView_x91v4_gg_ th{border:1px solid var(--intergalactic-border-primary, #c4c7cf)}",
+    ".___SPlotA11yView_5y734_gg_{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);color:var(--intergalactic-text-primary, #191b23);border:3px solid var(--intergalactic-border-primary, #c4c7cf);font-size:var(--intergalactic-fs-50, 10px);padding:2px;width:200px;height:200px;max-width:80%;max-height:80%;overflow:auto}.___SPlotA11yView_5y734_gg_:focus,.___SPlotA11yView_5y734_gg_:focus-within{-webkit-user-select:all;-moz-user-select:all;user-select:all;pointer-events:all;opacity:1;z-index:var(--intergalactic-z-index-overlay, 500);position:relative;display:block}.___SPlotA11yView_5y734_gg_ a{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;margin-bottom:var(--intergalactic-spacing-2x, 8px);display:block}.___SPlotA11yView_5y734_gg_ table,.___SPlotA11yView_5y734_gg_ td,.___SPlotA11yView_5y734_gg_ th{border:1px solid var(--intergalactic-border-primary, #c4c7cf)}",
     /*__inner_css_end__*/
-    "x91v4_gg_"
+    "5y734_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlotA11yView": "___SPlotA11yView_x91v4_gg_"
+    "__SPlotA11yView": "___SPlotA11yView_5y734_gg_"
   })
 );
 var PlotA11yView = function PlotA11yView2(_ref3) {

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

@@ -9,15 +9,31 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, assignProps, Component } from "@semcore/core";
 import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
-import { Flex } from "@semcore/flex-box";
+import { Flex, Box } from "@semcore/flex-box";
 import { Text } from "@semcore/typography";
-import React from "react";
+import React, { Fragment } from "react";
 import Plot from "../../Plot.mjs";
 import { LegendFlex } from "../ChartLegend/LegendFlex/LegendFlex.mjs";
 import { LegendTable } from "../ChartLegend/LegendTable/LegendTable.mjs";
 import { YAxis, XAxis } from "../../Axis.mjs";
 import { interpolateValue } from "../../utils.mjs";
 import { makeDataHintsContainer } from "../../a11y/hints.mjs";
+/*!__reshadow-styles__:"../../style/abstract-chart.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___STooltipChildrenWrapper_1xuth_gg_{display:grid;grid-column-gap:var(--intergalactic-spacing-2x, 8px);-moz-column-gap:var(--intergalactic-spacing-2x, 8px);column-gap:var(--intergalactic-spacing-2x, 8px)}.___STooltipChildrenWrapper_1xuth_gg_._columnsCount_2_1xuth_gg_{grid-template-columns:auto minmax(28px,max-content)}.___STooltipChildrenWrapper_1xuth_gg_._columnsCount_3_1xuth_gg_{grid-template-columns:auto minmax(28px,max-content) minmax(28px,max-content)}",
+    /*__inner_css_end__*/
+    "1xuth_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__STooltipChildrenWrapper": "___STooltipChildrenWrapper_1xuth_gg_",
+    "_columnsCount_2": "_columnsCount_2_1xuth_gg_",
+    "_columnsCount_3": "_columnsCount_3_1xuth_gg_"
+  })
+);
+var NOT_A_VALUE = "n/a";
 var AbstractChart = /* @__PURE__ */ (function(_Component) {
   function AbstractChart2(props) {
     var _this;
@@ -96,7 +112,7 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
           }, percent !== void 0 ? "".concat(percent, "%") : ""), /* @__PURE__ */ React.createElement(Text, {
             key: "".concat(key, "_value"),
             use: value ? "primary" : "secondary"
-          }, value !== null && value !== void 0 ? value : "n/a")];
+          }, value !== null && value !== void 0 ? value : NOT_A_VALUE)];
         }
         return dataDefinition;
       });
@@ -154,8 +170,8 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         if (!groupKey && typeof item === "number") {
           result.add(item);
         } else {
-          Object.entries(item).forEach(function(_ref3) {
-            var _ref4 = _slicedToArray(_ref3, 2), key = _ref4[0], value = _ref4[1];
+          Object.entries(item).forEach(function(_ref5) {
+            var _ref6 = _slicedToArray(_ref5, 2), key = _ref6[0], value = _ref6[1];
             if (key !== groupKey && typeof value === "number") {
               result.add(value);
             }
@@ -179,8 +195,8 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         return _max;
       }
       var max = data.reduce(function(max2, item) {
-        var barSum = Object.entries(item).reduce(function(sum, _ref5) {
-          var _ref6 = _slicedToArray(_ref5, 2), key = _ref6[0], val = _ref6[1];
+        var barSum = Object.entries(item).reduce(function(sum, _ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2), key = _ref8[0], val = _ref8[1];
           if (key === groupKey) {
             return sum;
           }
@@ -203,18 +219,42 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
     key: "totalValue",
     value: function totalValue(data) {
       var dataDefinitions = this.state.dataDefinitions;
+      var allNotAValue = true;
       var total = dataDefinitions.reduce(function(sum, legendItem) {
         var item = data[legendItem.id];
+        if (item === null) {
+          allNotAValue = false;
+          return sum;
+        }
         if (typeof item === "number") {
+          allNotAValue = false;
           return sum + item;
         }
         if (item instanceof Date && !Number.isNaN(item.getMilliseconds())) {
+          allNotAValue = false;
           return sum + item.getMilliseconds();
         }
         return sum;
       }, 0);
+      if (allNotAValue) {
+        return Number.NaN;
+      }
       return total;
     }
+  }, {
+    key: "percentValue",
+    value: function percentValue(data, key) {
+      var total = this.totalValue(data);
+      var value = data[key];
+      if (typeof value === "number" && total !== 0) {
+        var percent = Math.round(100 * value / total);
+        return "".concat(percent, "%");
+      }
+      if (value === null) {
+        return "0%";
+      }
+      return NOT_A_VALUE;
+    }
   }, {
     key: "getValueScale",
     value: function getValueScale(values) {
@@ -280,7 +320,7 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         return tooltipValueFormatter2(value);
       }
       if (value === void 0 || value === interpolateValue) {
-        return "n/a";
+        return NOT_A_VALUE;
       }
       if (value === null) {
         return "0";
@@ -347,14 +387,14 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
       }
       var xTicks = this.xTicks;
       var yTicks = this.yTicks;
-      var childrenX = axisXValueFormatter ? function(_ref7) {
-        var value = _ref7.value;
+      var childrenX = axisXValueFormatter ? function(_ref9) {
+        var value = _ref9.value;
         return {
           children: axisXValueFormatter(value)
         };
       } : void 0;
-      var childrenY = axisYValueFormatter ? function(_ref8) {
-        var value = _ref8.value;
+      var childrenY = axisYValueFormatter ? function(_ref0) {
+        var value = _ref0.value;
         return {
           children: axisYValueFormatter(value)
         };
@@ -375,18 +415,61 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         ticks: xTicks
       }) : /* @__PURE__ */ React.createElement(XAxis.Grid, null))));
     }
+  }, {
+    key: "getTooltipChildren",
+    value: function getTooltipChildren(options) {
+      var _ref = this.asProps, _ref3, _dataItem, _this3 = this;
+      var STooltipChildrenWrapper = Box;
+      var Tooltip = options.Tooltip, dataItem = options.dataItem;
+      var _this$asProps7 = this.asProps, styles = _this$asProps7.styles, groupKey = _this$asProps7.groupKey;
+      var dataDefinitions = this.state.dataDefinitions;
+      var title = (_dataItem = dataItem[groupKey]) === null || _dataItem === void 0 ? void 0 : _dataItem.toString();
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(Flex, _ref3.cn("Flex", {
+        "direction": "column"
+      }), title && /* @__PURE__ */ React.createElement(Tooltip.Title, null, title), /* @__PURE__ */ React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", _objectSpread({}, assignProps({
+        "columnsCount": "2",
+        "__excludeProps": ["data"]
+      }, _ref))), dataDefinitions.map(function(item) {
+        return item.checked && /* @__PURE__ */ React.createElement(Fragment, {
+          key: item.id
+        }, /* @__PURE__ */ React.createElement(Tooltip.Dot, {
+          mr: 2,
+          color: item.color
+        }, item.label), /* @__PURE__ */ React.createElement(Text, {
+          textAlign: "end",
+          bold: true
+        }, _this3.tooltipValueFormatter(dataItem[item.id])));
+      }), this.renderTooltipTotalLine(dataItem)));
+    }
+  }, {
+    key: "renderTooltipTotalLine",
+    value: function renderTooltipTotalLine(dataItem) {
+      var showTotalInTooltip = this.asProps.showTotalInTooltip;
+      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"), /* @__PURE__ */ React.createElement(Text, {
+        mt: 2,
+        textAlign: "end",
+        bold: true
+      }, Number.isNaN(total) ? NOT_A_VALUE : total));
+    }
   }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps, _ref2;
+      var _ref2 = this.asProps, _ref4;
       var SChart = Flex;
-      var _this$asProps7 = this.asProps, styles = _this$asProps7.styles, plotWidth = _this$asProps7.plotWidth, plotHeight = _this$asProps7.plotHeight, data = _this$asProps7.data, patterns = _this$asProps7.patterns, a11yAltTextConfig = _this$asProps7.a11yAltTextConfig, duration = _this$asProps7.duration, eventEmitter = _this$asProps7.eventEmitter;
+      var _this$asProps8 = this.asProps, styles = _this$asProps8.styles, plotWidth = _this$asProps8.plotWidth, plotHeight = _this$asProps8.plotHeight, data = _this$asProps8.data, patterns = _this$asProps8.patterns, a11yAltTextConfig = _this$asProps8.a11yAltTextConfig, duration = _this$asProps8.duration, eventEmitter = _this$asProps8.eventEmitter, showTooltip = _this$asProps8.showTooltip;
       var _extractAriaProps = extractAriaProps(this.asProps), extractedAriaProps = _extractAriaProps.extractedAriaProps;
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref2.cn("SChart", _objectSpread({}, assignProps({
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref4.cn("SChart", _objectSpread({}, assignProps({
         "gap": 5,
         "__excludeProps": ["data", "eventEmitter"],
         "role": "group"
-      }, _ref))), this.renderLegend(), /* @__PURE__ */ React.createElement(Plot, _ref2.cn("Plot", _objectSpread({
+      }, _ref2))), this.renderLegend(), /* @__PURE__ */ React.createElement(Plot, _ref4.cn("Plot", _objectSpread({
         "data": data,
         "scale": [this.xScale, this.yScale],
         "width": plotWidth,
@@ -396,11 +479,11 @@ var AbstractChart = /* @__PURE__ */ (function(_Component) {
         "patterns": patterns,
         "duration": duration,
         "eventEmitter": eventEmitter
-      }, extractedAriaProps)), this.renderAxis(), this.renderTooltip(), this.renderChart()));
+      }, extractedAriaProps)), this.renderAxis(), !showTooltip ? null : this.renderTooltip(), this.renderChart()));
     }
   }]);
 })(Component);
-_defineProperty(AbstractChart, "style", {});
+_defineProperty(AbstractChart, "style", style);
 _defineProperty(AbstractChart, "defaultProps", {
   direction: "column",
   showXAxis: true,
@@ -408,5 +491,6 @@ _defineProperty(AbstractChart, "defaultProps", {
   showTooltip: true
 });
 export {
-  AbstractChart
+  AbstractChart,
+  NOT_A_VALUE
 };

package/lib/esm/component/Chart/AreaChart.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 Area from "../../Area.mjs";
@@ -90,38 +88,18 @@ var AreaChartComponent = /* @__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/BarChart.mjs

@@ -8,16 +8,14 @@ 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 { AbstractChart } from "./AbstractChart.mjs";
 import Line from "../../Line.mjs";
 import GroupBar from "../../GroupBar.mjs";
 import StackBar from "../../StackBar.mjs";
 import { HoverRect } from "../../Hover.mjs";
 import { minMax } from "../../utils.mjs";
-import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
 var BarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   function BarChartComponent2() {
@@ -157,41 +155,21 @@ var BarChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
     key: "renderTooltip",
     value: function renderTooltip() {
       var _this3 = this;
-      var _this$asProps5 = this.asProps, data = _this$asProps5.data, groupKey = _this$asProps5.groupKey, showTotalInTooltip = _this$asProps5.showTotalInTooltip, showTooltip = _this$asProps5.showTooltip, invertAxis = _this$asProps5.invertAxis, onClickHoverRect = _this$asProps5.onClickHoverRect;
-      var dataDefinitions = this.state.dataDefinitions;
-      if (!showTooltip) {
-        return null;
-      }
+      var _this$asProps5 = this.asProps, data = _this$asProps5.data, groupKey = _this$asProps5.groupKey, invertAxis = _this$asProps5.invertAxis, onClickHoverRect = _this$asProps5.onClickHoverRect;
       return /* @__PURE__ */ React.createElement(HoverRect.Tooltip, {
         x: invertAxis ? void 0 : groupKey,
         y: invertAxis ? groupKey : void 0,
         wMin: 100,
         onClick: onClickHoverRect
       }, function(_ref) {
-        var _dataItem$groupKey;
         var xIndex = _ref.xIndex, yIndex = _ref.yIndex;
         var index = invertAxis ? yIndex : xIndex;
         var dataItem = data[index];
-        var total = _this3.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
-            }, _this3.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: _this3.getTooltipChildren({
+            Tooltip: HoverRect.Tooltip,
+            dataItem
+          })
         };
       });
     }

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

@@ -109,10 +109,6 @@ var BubbleChartComponent = /* @__PURE__ */ (function(_AbstractChart) {
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      var showTooltip = this.asProps.showTooltip;
-      if (!showTooltip) {
-        return null;
-      }
       return /* @__PURE__ */ React.createElement(Bubble.Tooltip, null, function(_ref3) {
         var index = _ref3.index, data = _ref3.data;
         return {