@semcore/d3-chart 17.0.0-prerelease.9 → 17.0.0

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

@@ -1,30 +1,71 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps } from "@semcore/core";
+import { sstyled, assignProps, createComponent } from "@semcore/core";
 import { Box, Flex } from "@semcore/base-components";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import trottle from "@semcore/core/lib/utils/rafTrottle";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import Divider from "@semcore/divider";
 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 "../../index.mjs";
 import { AbstractChart, NOT_A_VALUE } from "./AbstractChart.mjs";
 import AnimatedClipPath from "../../AnimatedClipPath.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import { eventToPoint, interpolateValue } from "../../utils.mjs";
 import Cigarette from "../Cigarette/Cigarette.mjs";
-const wMin = 2;
+import { HoverRect } from "../../Hover.mjs";
+import Plot from "../../Plot.mjs";
+const DEFAULT_MINIMAL_BAR_WIDTH = 2;
+const DEFAULT_GAP = 2;
 class CigaretteChartComponent extends AbstractChart {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "plotRef", /* @__PURE__ */ React.createRef());
     _defineProperty(this, "plotPadding", 0);
     _defineProperty(this, "offset", 0);
+    _defineProperty(this, "onPlotMouseMove", trottle((event) => {
+      if (!this.plotRef.current) return;
+      const [pX, pY] = eventToPoint(event, this.plotRef.current);
+      this.setState((prevState) => ({
+        pX,
+        pY
+      }));
+    }));
+    _defineProperty(this, "onPlotMouseLeave", trottle(() => {
+      this.setState((prevState) => ({
+        pX: null,
+        pY: null
+      }));
+    }));
+    this.state = {
+      ...this.state,
+      pX: null,
+      pY: null
+    };
+  }
+  get activeDataDefinitions() {
+    const {
+      dataDefinitions
+    } = this.state;
+    return dataDefinitions.filter(({
+      checked
+    }) => checked);
+  }
+  get activePositiveDataDefinitions() {
+    const {
+      data
+    } = this.asProps;
+    return this.activeDataDefinitions.filter(({
+      id
+    }) => {
+      const itemValue = data[id];
+      return typeof itemValue === "number" && itemValue > 0;
+    });
   }
   resolveColor(id, index) {
-    var _a;
-    return ((_a = this.props.colorMap) == null ? void 0 : _a[id]) ?? `blue-${5 - index}00`;
+    return this.props.colorMap?.[id] ?? `blue-${5 - index}00`;
   }
   getDefaultDataDefinitions() {
     const dataDefinitions = super.getDefaultDataDefinitions();
@@ -39,17 +80,86 @@ class CigaretteChartComponent extends AbstractChart {
       w: "fit-content"
     };
   }
+  totalValue() {
+    const {
+      data
+    } = this.asProps;
+    return this.activeDataDefinitions.reduce((acc, {
+      id
+    }) => {
+      const itemValue = data[id];
+      if (typeof itemValue === "number") {
+        acc += itemValue;
+      }
+      return acc;
+    }, 0);
+  }
+  computeCigaretteItems() {
+    const {
+      plotWidth,
+      plotHeight,
+      data,
+      invertAxis,
+      minimalBarWidth
+    } = this.asProps;
+    const dataDefinitions = invertAxis ? this.activeDataDefinitions : [...this.activeDataDefinitions].reverse();
+    const count = this.activePositiveDataDefinitions.length;
+    const totalGapWidth = DEFAULT_GAP * Math.max(0, count - 1);
+    const availableSpace = Math.max(0, (invertAxis ? plotWidth : plotHeight) - totalGapWidth);
+    const totalValue = this.totalValue();
+    const dataDefinitionsItemSize = dataDefinitions.map(({
+      id
+    }) => {
+      if (totalValue === 0) {
+        return 0;
+      }
+      const itemValue = data[id];
+      if (typeof itemValue !== "number") return 0;
+      return itemValue / totalValue * availableSpace;
+    });
+    const result = dataDefinitions.map((dd, index) => ({
+      ...dd,
+      value: data[dd.id],
+      dataWidth: dataDefinitionsItemSize[index],
+      visualWidth: dataDefinitionsItemSize[index],
+      isMinVisible: false
+    }));
+    const smallItems = result.filter((r) => {
+      const {
+        value,
+        dataWidth
+      } = r;
+      if (typeof value !== "number") return false;
+      return value > 0 && dataWidth < minimalBarWidth;
+    });
+    if (smallItems.length === 0) return result;
+    let extraNeeded = 0;
+    for (const smallItem of smallItems) {
+      extraNeeded += minimalBarWidth - smallItem.dataWidth;
+      smallItem.visualWidth = minimalBarWidth;
+      smallItem.isMinVisible = true;
+    }
+    const donors = result.filter((r) => !r.isMinVisible && r.dataWidth > minimalBarWidth);
+    const donorCapacity = donors.reduce((s, d) => s + (d.dataWidth - minimalBarWidth), 0);
+    for (const donor of donors) {
+      const available = donor.dataWidth - minimalBarWidth;
+      const share = available / donorCapacity;
+      const taken = share * extraNeeded;
+      donor.visualWidth = donor.dataWidth - taken;
+    }
+    return result;
+  }
   get xScale() {
     const {
-      invertAxis
+      plotWidth
     } = this.asProps;
-    return invertAxis ? this.valueScale : this.categoryScale;
+    return scaleLinear([0, plotWidth]);
   }
   get yScale() {
     const {
-      invertAxis
+      plotHeight
     } = this.asProps;
-    return invertAxis ? this.categoryScale : this.valueScale;
+    return scaleLinear([plotHeight, 0]);
   }
   renderChart() {
     const {
@@ -67,18 +177,25 @@ class CigaretteChartComponent extends AbstractChart {
       highlightedLine
     } = this.state;
     this.offset = 0;
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, (invertAxis ? dataDefinitions : [...dataDefinitions].reverse()).map((item, index) => {
-      const value = data[item.id];
-      if (!item.checked || value === interpolateValue || value === null) {
+    const items = this.computeCigaretteItems();
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, items.map((item, index) => {
+      const {
+        visualWidth,
+        id
+      } = item;
+      const value = data[id];
+      if (value === interpolateValue || value === null) {
         return null;
       }
-      const absWidth = Math.abs(this.valueScale(value) - Math.max(this.valueScale(this.valueScale.domain()[0]), this.valueScale(0)));
-      const height = scaleToBand(this.categoryScale).bandwidth() - 4;
-      const width = value === 0 ? 0 : Math.max(absWidth, wMin * 2) - wMin;
-      const y = 2;
-      const x = index === 0 ? 0 : this.offset;
+      const height = invertAxis ? plotHeight - DEFAULT_GAP * 2 : plotWidth - DEFAULT_GAP * 2;
+      const width = visualWidth;
+      const y = DEFAULT_GAP;
+      const x = this.offset;
       const r = height < 28 ? 2 : 4;
-      this.offset = this.offset + width + wMin;
+      this.offset += visualWidth;
+      if (index < items.length - 1) {
+        this.offset += DEFAULT_GAP;
+      }
       return /* @__PURE__ */ React.createElement(Cigarette, {
         key: item.id,
         dataKey: item.id,
@@ -119,7 +236,9 @@ class CigaretteChartComponent extends AbstractChart {
       showTooltip
     } = this.asProps;
     const {
-      dataDefinitions
+      dataDefinitions,
+      pX,
+      pY
     } = this.state;
     const STooltipChildrenWrapper = Box;
     if (!showTooltip) {
@@ -129,16 +248,20 @@ class CigaretteChartComponent extends 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
     }, (tooltipProps) => {
       var _ref4;
       const dataKey = invertAxis ? tooltipProps.xIndex : tooltipProps.yIndex;
-      const showPercentColumn = showPercentValueInTooltip && this.totalValue(data) !== 0;
+      const showPercentColumn = showPercentValueInTooltip && this.totalValue() !== 0;
       if (tooltipViewType === "single") {
         var _ref3;
         const item = dataDefinitions.find((dataDefItem) => dataDefItem.id === dataKey);
         if (!item) {
-          return null;
+          return {
+            children: null
+          };
         }
         return {
           children: (_ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(STooltipChildrenWrapper, _ref3.cn("STooltipChildrenWrapper", {
@@ -189,6 +312,22 @@ class CigaretteChartComponent extends AbstractChart {
       };
     });
   }
+  percentValue(data, key) {
+    const {
+      percentFormatter
+    } = this.asProps;
+    const total = this.totalValue();
+    const value = data[key];
+    if (typeof value === "number" && total !== 0) {
+      const rawPercent = 100 * value / total;
+      const formattedPercent = percentFormatter ? percentFormatter(rawPercent) : Math.round(rawPercent);
+      return `${formattedPercent}%`;
+    }
+    if (value === null) {
+      return `0%`;
+    }
+    return NOT_A_VALUE;
+  }
   renderTooltipTotalLine(dataItem) {
     const {
       showTotalInTooltip,
@@ -197,7 +336,7 @@ class CigaretteChartComponent extends AbstractChart {
     if (!showTotalInTooltip) {
       return null;
     }
-    const total = this.totalValue(dataItem);
+    const total = this.totalValue();
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, {
       mt: 2,
       mr: 2
@@ -238,13 +377,16 @@ class CigaretteChartComponent extends AbstractChart {
       }), /* @__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", {
@@ -253,13 +395,16 @@ class CigaretteChartComponent extends AbstractChart {
         "__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
@@ -270,42 +415,36 @@ class CigaretteChartComponent extends AbstractChart {
       chartType: "Cigarette"
     });
   }
-  get selectedData() {
+  get visualScale() {
+    const cigaretteItems = this.computeCigaretteItems();
     const {
-      data
-    } = this.asProps;
-    const {
-      dataDefinitions
-    } = this.state;
-    const result = /* @__PURE__ */ new Map();
-    dataDefinitions.forEach((dataDefItem) => {
-      const value = data[dataDefItem.id];
-      if (dataDefItem.checked && value !== interpolateValue) {
-        result.set(dataDefItem.id, value);
+      range,
+      domain
+    } = cigaretteItems.reduce((acc, {
+      id,
+      visualWidth
+    }, index) => {
+      const {
+        range: range2,
+        domain: domain2
+      } = acc;
+      if (visualWidth) {
+        range2.push(id);
+        if (domain2.length === 0) {
+          domain2.push(visualWidth + DEFAULT_GAP);
+          return acc;
+        }
+        if (index !== cigaretteItems.length - 1) {
+          const lastAddedDomain = domain2[domain2.length - 1];
+          domain2.push(lastAddedDomain + visualWidth + DEFAULT_GAP);
+        }
       }
+      return acc;
+    }, {
+      range: [],
+      domain: []
     });
-    return result;
-  }
-  get categoryScale() {
-    const {
-      plotWidth,
-      plotHeight,
-      invertAxis
-    } = this.asProps;
-    const range = invertAxis ? [plotHeight, 0] : [0, plotWidth];
-    return scaleBand([0], range);
-  }
-  get valueScale() {
-    const {
-      plotWidth,
-      plotHeight,
-      invertAxis
-    } = this.asProps;
-    let max = 0;
-    this.selectedData.forEach((value) => {
-      max = max + value;
-    });
-    return scaleLinear().range(invertAxis ? [0, plotWidth] : [plotHeight, 0]).domain([0, max]);
+    return scaleThreshold(domain, range);
   }
 }
 _defineProperty(CigaretteChartComponent, "displayName", "Cigarette.Bar");
@@ -322,7 +461,8 @@ _defineProperty(CigaretteChartComponent, "defaultProps", (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/Chart/CompactHorizontalBarChart.mjs

@@ -3,9 +3,10 @@ import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { scaleBand, scaleLinear } from "d3-scale";
 import React from "react";
-import CompactHorizontalBar from "../../CompactHorizontalBar.mjs";
+import "../../index.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import CompactHorizontalBar from "../../CompactHorizontalBar.mjs";
 class CompactHorizontalBarChartComponent extends AbstractChart {
   get xScale() {
     return this.asProps.xScale ?? this.valueScale;

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

@@ -5,9 +5,10 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { Text } from "@semcore/typography";
 import { scaleLinear } from "d3-scale";
 import React from "react";
-import Donut from "../../Donut.mjs";
+import "../../index.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import Donut from "../../Donut.mjs";
 class DonutChartComponent extends AbstractChart {
   get xScale() {
     const {
@@ -70,7 +71,7 @@ class DonutChartComponent extends AbstractChart {
     }) => {
       const title = dataDefinitions.find((item) => item.id === dataKey);
       return {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Donut.Tooltip.Title, null, (title == null ? void 0 : title.label) || dataKey), /* @__PURE__ */ React.createElement(Flex, {
+        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Donut.Tooltip.Title, null, title?.label || dataKey), /* @__PURE__ */ React.createElement(Flex, {
           justifyContent: "space-between"
         }, /* @__PURE__ */ React.createElement(Text, {
           bold: true

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

@@ -4,12 +4,13 @@ import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { scaleTime, scaleBand, scaleLinear } from "d3-scale";
 import React from "react";
-import Bar from "../../Bar.mjs";
-import StackBar from "../../StackBar.mjs";
-import { HoverRect } from "../../Hover.mjs";
-import { minMax } from "../../utils.mjs";
+import "../../index.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import { minMax } from "../../utils.mjs";
+import StackBar from "../../StackBar.mjs";
+import Bar from "../../Bar.mjs";
+import { HoverRect } from "../../Hover.mjs";
 class HistogramChartComponent extends AbstractChart {
   get xScale() {
     const {

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

@@ -3,11 +3,12 @@ import { createComponent } from "@semcore/core";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { scaleTime, scaleLinear } from "d3-scale";
 import React from "react";
-import Line from "../../Line.mjs";
-import { HoverLine } from "../../Hover.mjs";
-import { minMax } from "../../utils.mjs";
+import "../../index.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import { minMax } from "../../utils.mjs";
+import Line from "../../Line.mjs";
+import { HoverLine } from "../../Hover.mjs";
 class LineChartComponent extends AbstractChart {
   get xScale() {
     const {
@@ -66,7 +67,7 @@ class LineChartComponent extends AbstractChart {
         onClick: onClickLine
       }, showDots && /* @__PURE__ */ React.createElement(Line.Dots, {
         display: true
-      }), (area == null ? void 0 : area[item.id]) && /* @__PURE__ */ React.createElement(Line.Area, {
+      }), area?.[item.id] && /* @__PURE__ */ React.createElement(Line.Area, {
         area: area[item.id],
         y0: "y0",
         y1: "y1",

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

@@ -4,8 +4,9 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { scaleLinear } from "d3-scale";
 import React from "react";
 import { AbstractChart } from "./AbstractChart.mjs";
-import Radar from "../../Radar.mjs";
+import "../../index.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import Radar from "../../Radar.mjs";
 class RadarChartComponent extends AbstractChart {
   renderChart() {
     const {
@@ -48,11 +49,9 @@ class RadarChartComponent extends AbstractChart {
     }, ({
       index
     }) => {
-      var _a;
       return {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radar.Tooltip.Title, null, (_a = data[groupKey]) == null ? void 0 : _a[index]), dataDefinitions.map((item) => {
-          var _a2;
-          const value = (_a2 = data[item.id]) == null ? void 0 : _a2[index];
+        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radar.Tooltip.Title, null, data[groupKey]?.[index]), dataDefinitions.map((item) => {
+          const value = data[item.id]?.[index];
           return item.checked && /* @__PURE__ */ React.createElement(Radar.Tooltip.Dot, {
             color: item.color,
             key: item.id

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

@@ -4,10 +4,11 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { Text } from "@semcore/typography";
 import { scaleTime, scaleLinear } from "d3-scale";
 import React from "react";
-import ScatterPlot from "../../ScatterPlot.mjs";
-import { getScatterPlotRadius, minMax } from "../../utils.mjs";
+import "../../index.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import { getScatterPlotRadius, minMax } from "../../utils.mjs";
+import ScatterPlot from "../../ScatterPlot.mjs";
 class ScatterPlotChartComponent extends AbstractChart {
   get dataKeys() {
     const {

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

@@ -4,9 +4,10 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { Text } from "@semcore/typography";
 import { scaleLinear } from "d3-scale";
 import React from "react";
-import Venn from "../../Venn.mjs";
+import "../../index.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import Venn from "../../Venn.mjs";
 class VennChartComponent extends AbstractChart {
   get xScale() {
     const {
@@ -81,8 +82,7 @@ class VennChartComponent extends AbstractChart {
         return null;
       }
       const name = intersectionKeys.map((id) => {
-        var _a;
-        return ((_a = dataDefinitions.find((legendItem) => legendItem.id === id)) == null ? void 0 : _a.label) || "";
+        return dataDefinitions.find((legendItem) => legendItem.id === id)?.label || "";
       }).join(" & ");
       return /* @__PURE__ */ React.createElement(Venn.Intersection, {
         key: intersectionKey,

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

@@ -5,36 +5,31 @@ class BaseLegend extends Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "onChangeLegendItem", (shape) => (id, checked) => {
-      var _a, _b, _c, _d, _e, _f;
       if (shape !== "Checkbox") return;
-      (_b = (_a = this.props).onChangeVisibleItem) == null ? void 0 : _b.call(_a, id, checked);
+      this.props.onChangeVisibleItem?.(id, checked);
       if (checked) {
-        (_d = (_c = this.props).onMouseEnterItem) == null ? void 0 : _d.call(_c, id);
+        this.props.onMouseEnterItem?.(id);
       } else {
-        (_f = (_e = this.props).onMouseLeaveItem) == null ? void 0 : _f.call(_e, id);
+        this.props.onMouseLeaveItem?.(id);
       }
     });
     _defineProperty(this, "onFocusLegendItem", (checked) => (id) => {
-      var _a, _b, _c, _d;
       if (!checked) {
-        return (_b = (_a = this.props).onMouseLeaveItem) == null ? void 0 : _b.call(_a, id);
+        return this.props.onMouseLeaveItem?.(id);
       }
-      (_d = (_c = this.props).onMouseEnterItem) == null ? void 0 : _d.call(_c, id);
+      this.props.onMouseEnterItem?.(id);
     });
     _defineProperty(this, "onBlurLegendItem", (id) => {
-      var _a, _b;
-      (_b = (_a = this.props).onMouseLeaveItem) == null ? void 0 : _b.call(_a, id);
+      this.props.onMouseLeaveItem?.(id);
     });
     _defineProperty(this, "bindOnMouseEnterItem", (id) => {
       return (e) => {
-        var _a, _b;
-        (_b = (_a = this.props).onMouseEnterItem) == null ? void 0 : _b.call(_a, id, e);
+        this.props.onMouseEnterItem?.(id, e);
       };
     });
     _defineProperty(this, "bindOnMouseLeaveItem", (id) => {
       return (e) => {
-        var _a, _b;
-        (_b = (_a = this.props).onMouseLeaveItem) == null ? void 0 : _b.call(_a, id, e);
+        this.props.onMouseLeaveItem?.(id, e);
       };
     });
   }
@@ -53,7 +48,7 @@ class BaseLegend extends Component {
     } = this.asProps;
     const dataHintsHandler = dataHints ? makeDataHintsHandlers(dataHints) : void 0;
     items.forEach((legendItem) => {
-      dataHintsHandler == null ? void 0 : dataHintsHandler.labelKey("value", legendItem.id, legendItem.label);
+      dataHintsHandler?.labelKey("value", legendItem.id, legendItem.label);
     });
   }
   getItem(index) {

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps } from "@semcore/core";
+import { sstyled, assignProps, createComponent } from "@semcore/core";
 import { Flex } from "@semcore/base-components";
 import Checkbox from "@semcore/checkbox";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
@@ -8,7 +8,6 @@ import React from "react";
 import { localizedMessages } from "../../../translations/__intergalactic-dynamic-locales.mjs";
 import { BaseLegend } from "../BaseLegend.mjs";
 import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
-/*!__reshadow-styles__:"./legend-flex.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
 import { Flex, Box } from "@semcore/base-components";
 import Checkbox from "@semcore/checkbox";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
@@ -9,7 +9,6 @@ import React from "react";
 import { StaticShapes } from "./LegendItem.type.mjs";
 import { PatternSymbol } from "../../../Pattern.mjs";
 import { getChartDefaultColorName } from "../../../utils.mjs";
-/*!__reshadow-styles__:"./legend-item.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(

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

@@ -1,10 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps } from "@semcore/core";
+import { sstyled, assignProps, createComponent } from "@semcore/core";
 import { Box } from "@semcore/base-components";
 import React from "react";
 import { BaseLegend } from "../BaseLegend.mjs";
 import { LegendItemComponent } from "../LegendItem/LegendItem.mjs";
-/*!__reshadow-styles__:"./legend-table.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -23,7 +22,6 @@ const style = (
 );
 class LegendTableRoot extends BaseLegend {
   render() {
-    var _a;
     var _ref = this.asProps, _ref3;
     const SLegendTable = Box;
     const {
@@ -32,7 +30,7 @@ class LegendTableRoot extends BaseLegend {
       size = "m",
       items
     } = this.asProps;
-    const columnsCount = (_a = items[0]) == null ? void 0 : _a.columns.length;
+    const columnsCount = items[0]?.columns.length;
     return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLegendTable, _ref3.cn("SLegendTable", {
       ...assignProps({
         "columns-count": columnsCount + 1,

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

@@ -1,5 +1,7 @@
 import { LegendFlex } from "./LegendFlex/LegendFlex.mjs";
+import { LegendTable } from "./LegendTable/LegendTable.mjs";
 export {
   LegendFlex as ChartLegend,
+  LegendTable as ChartLegendTable,
   LegendFlex as default
 };