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

package/lib/esm/a11y/PlotA11yView.mjs

@@ -13,15 +13,15 @@ const styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlotA11yView_9ugu2_gg_{position:relative;display:block;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);z-index:var(--intergalactic-z-index-overlay, 500);padding:2px;width:200px;height:200px;max-width:80%;max-height:80%;overflow:auto}.___SPlotA11yView_9ugu2_gg_ a{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;margin-bottom:var(--intergalactic-spacing-2x, 8px);display:block}.___SPlotA11yView_9ugu2_gg_ table,.___SPlotA11yView_9ugu2_gg_ td,.___SPlotA11yView_9ugu2_gg_ th{border:1px solid var(--intergalactic-border-primary, #c4c7cf)}",
+    ".___SPlotA11yView_1h3zj_gg_{position:relative;display:block;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);z-index:var(--intergalactic-z-index-overlay, 500);padding:2px;width:200px;height:200px;max-width:80%;max-height:80%;overflow:auto}.___SPlotA11yView_1h3zj_gg_ a{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;margin-bottom:var(--intergalactic-spacing-2x, 8px);display:block}.___SPlotA11yView_1h3zj_gg_ table,.___SPlotA11yView_1h3zj_gg_ td,.___SPlotA11yView_1h3zj_gg_ th{border:1px solid var(--intergalactic-border-primary, #c4c7cf)}",
     /*__inner_css_end__*/
-    "9ugu2_gg_"
+    "1h3zj_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlotA11yView": "___SPlotA11yView_9ugu2_gg_"
+    "__SPlotA11yView": "___SPlotA11yView_1h3zj_gg_"
   })
 );
-const PlotA11yView = ({
+function PlotA11yView({
   id,
   payload: providedData,
   hints,
@@ -31,7 +31,7 @@ const PlotA11yView = ({
   config: providedConfig,
   locale,
   onCloseHandler
-}) => {
+}) {
   var _ref = arguments[0], _ref2;
   const SPlotA11yView = Box;
   const translations = useAsyncI18nMessages(localizedMessages, locale);
@@ -42,22 +42,17 @@ const PlotA11yView = ({
   const [summary, setSummary] = React.useState(null);
   const [generatingSummary, setGeneratingSummary] = React.useState(true);
   React.useEffect(() => {
-    var _a, _b;
-    (_a = rootRef.current) == null ? void 0 : _a.focus();
+    rootRef.current?.focus();
     function focusOutHandler(event) {
-      var _a2;
       if (event.relatedTarget === null) {
         return requestIdleCallback(onCloseHandler);
       }
       if (!(event.relatedTarget instanceof HTMLElement)) return;
-      if ((_a2 = rootRef.current) == null ? void 0 : _a2.contains(event.relatedTarget)) return;
+      if (rootRef.current?.contains(event.relatedTarget)) return;
       requestIdleCallback(onCloseHandler);
     }
-    (_b = rootRef.current) == null ? void 0 : _b.addEventListener("focusout", focusOutHandler);
-    return () => {
-      var _a2;
-      return (_a2 = rootRef.current) == null ? void 0 : _a2.removeEventListener("focusout", focusOutHandler);
-    };
+    rootRef.current?.addEventListener("focusout", focusOutHandler);
+    return () => rootRef.current?.removeEventListener("focusout", focusOutHandler);
   }, []);
   React.useEffect(() => {
     if (config.disable) {
@@ -78,15 +73,13 @@ const PlotA11yView = ({
   const handleClose = React.useCallback(() => {
     onCloseHandler();
     requestIdleCallback(() => {
-      var _a;
-      (_a = triggerRef.current) == null ? void 0 : _a.focus();
+      triggerRef.current?.focus();
     });
   }, []);
   const handleSkip = React.useCallback((event) => {
-    var _a;
     event.preventDefault();
     if (!plotRef.current) return;
-    (_a = heavyFindNextFocusableElement(plotRef.current)) == null ? void 0 : _a.focus();
+    heavyFindNextFocusableElement(plotRef.current)?.focus();
     onCloseHandler();
   }, []);
   const handleSkipKeyboard = React.useCallback((event) => {
@@ -94,9 +87,8 @@ const PlotA11yView = ({
     handleSkip(event);
   }, [handleSkip]);
   const handleGoToTable = React.useCallback((event) => {
-    var _a;
     event.preventDefault();
-    (_a = dataTableRef.current) == null ? void 0 : _a.focus();
+    dataTableRef.current?.focus();
   }, []);
   const handleGoToTableKeyboard = React.useCallback((event) => {
     if (!(event.key === "Enter" || event.key === " ")) return;
@@ -164,7 +156,8 @@ const PlotA11yView = ({
     "config": config,
     "intl": intl
   })));
-};
+}
+;
 export {
   PlotA11yView
 };

package/lib/esm/a11y/focus.mjs

@@ -3,7 +3,7 @@ const findNextFocusableElementInChildren = (element) => {
   if (element && isFocusable(element)) {
     return element;
   }
-  const children = element == null ? void 0 : element.children;
+  const children = element?.children;
   if (children) {
     for (let i = 0; i < children.length; i++) {
       const childChild = children.item(i);
@@ -27,7 +27,7 @@ const heavyFindNextFocusableElement = (base) => {
   const parents = makeParentsChain(base);
   for (let i = 0; i < parents.length; i++) {
     const parent = parents[i];
-    let siblings = Array.from((parent == null ? void 0 : parent.children) ?? []);
+    let siblings = Array.from(parent?.children ?? []);
     if (siblings.indexOf(parents[i - 1] || base) !== -1) {
       siblings = siblings.slice(siblings.indexOf(parents[i - 1] || base) + 1);
     }

package/lib/esm/a11y/hints.mjs

@@ -99,15 +99,15 @@ const makeDataSummarizationConfig = (config) => ({
     weak: 1 / 10,
     medium: 1 / 5,
     strong: Number.POSITIVE_INFINITY,
-    ...(config == null ? void 0 : config.trendTangens) ?? {}
+    ...config?.trendTangens ?? {}
   },
   movingAverage: {
     longSize: void 0,
     shortSize: void 0,
     notableDiff: void 0,
-    ...(config == null ? void 0 : config.movingAverage) ?? {}
+    ...config?.movingAverage ?? {}
   },
-  additionalFields: [...(config == null ? void 0 : config.additionalFields) ?? []]
+  additionalFields: [...config?.additionalFields ?? []]
 });
 export {
   makeDataHintsContainer,

package/lib/esm/a11y/insights.mjs

@@ -24,7 +24,6 @@ const movingAverage = (data, frame) => {
   return result;
 };
 const extractDataInsights = (data, hints, config) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   let insights = [];
   let dataType = config.dataType ?? hints.dataType;
   const dataRange = [];
@@ -66,8 +65,8 @@ const extractDataInsights = (data, hints, config) => {
       entitiesCount = Object.keys(valuesKeys).length;
       const fromKey = firstRow[labelsKey];
       const toKey = lastRow[labelsKey];
-      const from = ((_b = (_a = hints.titles).getHorizontalAxesTitle) == null ? void 0 : _b.call(_a, fromKey)) ?? hints.titles.horizontalAxes[fromKey] ?? fromKey;
-      const to = ((_d = (_c = hints.titles).getHorizontalAxesTitle) == null ? void 0 : _d.call(_c, toKey)) ?? hints.titles.horizontalAxes[toKey] ?? toKey;
+      const from = hints.titles.getHorizontalAxesTitle?.(fromKey) ?? hints.titles.horizontalAxes[fromKey] ?? fromKey;
+      const to = hints.titles.getHorizontalAxesTitle?.(toKey) ?? hints.titles.horizontalAxes[toKey] ?? toKey;
       if (entitiesCount > 0) {
         dataRange.push({
           from,
@@ -115,10 +114,9 @@ const extractDataInsights = (data, hints, config) => {
           label,
           type
         }) => {
-          var _a2, _b2;
           for (let i = 0; i < trendStrengths.length; i++) {
-            const normalizedHeight = Math.abs(value.from - value.to) / (((_a2 = hints.pointsDensity) == null ? void 0 : _a2.verticalAxes) ?? 1);
-            const normalizedWidth = width / (((_b2 = hints.pointsDensity) == null ? void 0 : _b2.horizontalAxes) ?? 1);
+            const normalizedHeight = Math.abs(value.from - value.to) / (hints.pointsDensity?.verticalAxes ?? 1);
+            const normalizedWidth = width / (hints.pointsDensity?.horizontalAxes ?? 1);
             const tang = normalizedHeight / normalizedWidth;
             const trendStrength = trendStrengths[i];
             if (tang <= config.trendTangens[trendStrength] || i === trendStrengths.length - 1) {
@@ -169,8 +167,8 @@ const extractDataInsights = (data, hints, config) => {
             i = Math.min(i, data.length - 1);
             const fromKey2 = data[lastSwitch][labelsKey];
             const toKey2 = data[i][labelsKey];
-            const from2 = ((_f = (_e = hints.titles).getHorizontalAxesTitle) == null ? void 0 : _f.call(_e, fromKey2)) ?? hints.titles.horizontalAxes[fromKey2] ?? fromKey2;
-            const to2 = ((_h = (_g = hints.titles).getHorizontalAxesTitle) == null ? void 0 : _h.call(_g, toKey2)) ?? hints.titles.horizontalAxes[toKey2] ?? toKey2;
+            const from2 = hints.titles.getHorizontalAxesTitle?.(fromKey2) ?? hints.titles.horizontalAxes[fromKey2] ?? fromKey2;
+            const to2 = hints.titles.getHorizontalAxesTitle?.(toKey2) ?? hints.titles.horizontalAxes[toKey2] ?? toKey2;
             localTrends.push(recordTrend({
               type: "trend",
               value: {
@@ -284,7 +282,7 @@ const extractDataInsights = (data, hints, config) => {
             for (const yNeighbour of [y - 1, y, y + 1]) {
               if (xNeighbour === void 0 || yNeighbour === void 0) continue;
               if (xNeighbour === x && yNeighbour === y) continue;
-              if (!((_i = grid[xNeighbour]) == null ? void 0 : _i[yNeighbour])) continue;
+              if (!grid[xNeighbour]?.[yNeighbour]) continue;
               pointHandled = true;
               grid[x][y].clusterId = grid[xNeighbour][yNeighbour].clusterId;
               break;
@@ -386,7 +384,8 @@ const extractDataInsights = (data, hints, config) => {
         x: 1,
         y: 1
       }], {
-        width: 1
+        width: 1,
+        height: 1
       });
       for (const clustersInsight of clustersInsights) {
         const {
@@ -430,7 +429,7 @@ const extractDataInsights = (data, hints, config) => {
         const key = allRowsIds[i];
         const groupKeyValue = getPropByPath(row, groupKeys[0]);
         groupedValues[key] = groupedValues[key] ?? {
-          groupName: ((_k = (_j = hints.titles).getHorizontalAxesTitle) == null ? void 0 : _k.call(_j, groupKeyValue)) ?? groupKeyValue,
+          groupName: hints.titles.getHorizontalAxesTitle?.(groupKeyValue) ?? groupKeyValue,
           rows: []
         };
         groupedValues[key].rows.push(row);
@@ -442,12 +441,11 @@ const extractDataInsights = (data, hints, config) => {
       }
       fields = fields.filter((key) => !grouppingKeys[key]);
       const groups = Object.entries(groupedValues).map(([groupKey, group]) => {
-        var _a2, _b2;
         const values = [];
         for (const row of group.rows) {
           for (const field of fields) {
             values.push({
-              label: hints.titles.valuesAxes[field] ?? ((_b2 = (_a2 = hints.titles).getVerticalAxesTitle) == null ? void 0 : _b2.call(_a2, field)) ?? field,
+              label: hints.titles.valuesAxes[field] ?? hints.titles.getVerticalAxesTitle?.(field) ?? field,
               value: getPropByPath(row, field)
             });
           }
@@ -483,13 +481,10 @@ const extractDataInsights = (data, hints, config) => {
     if (fields.length === 0) {
       fields.push(...Object.keys(keysMap));
     }
-    const values = fields.map((field) => {
-      var _a2, _b2;
-      return {
-        label: hints.titles.valuesAxes[field] ?? ((_b2 = (_a2 = hints.titles).getValueAxesTitle) == null ? void 0 : _b2.call(_a2, field)) ?? field,
-        value: getPropByPath(data, field)
-      };
-    });
+    const values = fields.map((field) => ({
+      label: hints.titles.valuesAxes[field] ?? hints.titles.getValueAxesTitle?.(field) ?? field,
+      value: getPropByPath(data, field)
+    }));
     entitiesCount = values.length;
     values.sort((a, b) => {
       if (typeof a.value !== "number" || typeof b.value !== "number") return 0;

package/lib/esm/a11y/intl.mjs

@@ -1,4 +1,4 @@
-import { createIntl, createIntlCache } from "@formatjs/intl";
+import { createIntlCache, createIntl } from "@formatjs/intl";
 import { normalizeLocale } from "./locale.mjs";
 const messagesCache = createIntlCache();
 const intlCache = {};

package/lib/esm/a11y/locale.mjs

@@ -1,10 +1,9 @@
 const normalizeLocale = (providedLocale, translations = {}) => {
-  var _a;
   const translationNames = {};
   for (const locale2 in translations) {
     translationNames[locale2.toLowerCase()] = locale2;
   }
-  providedLocale = providedLocale ?? isAvailableLocale((_a = globalThis == null ? void 0 : globalThis.navigator) == null ? void 0 : _a.language, translations) ?? "en";
+  providedLocale = providedLocale ?? isAvailableLocale(globalThis?.navigator?.language, translations) ?? "en";
   let locale = providedLocale.toLowerCase();
   if (locale.includes("-") && !translations[locale]) {
     const [localeBase] = locale.split("-");

package/lib/esm/a11y/serialize.mjs

@@ -134,12 +134,12 @@ const serialize = ({
   if (insights.length === 0) return null;
   const intl = getIntl(locale, translations, availableLocales);
   const dataRangeSummary = intl.formatList(dataRange.map((range) => {
-    const from = (valuesFormatter == null ? void 0 : valuesFormatter(range.from, range.label)) ?? defaultValueFormatter(intl, range.from, {
+    const from = valuesFormatter?.(range.from, range.label) ?? defaultValueFormatter(intl, range.from, {
       siblingsTimeMark: range.to,
       datesWithTime,
       maxListSymbols
     });
-    const to = (valuesFormatter == null ? void 0 : valuesFormatter(range.to, range.label)) ?? defaultValueFormatter(intl, range.to, {
+    const to = valuesFormatter?.(range.to, range.label) ?? defaultValueFormatter(intl, range.to, {
       siblingsTimeMark: range.from,
       datesWithTime,
       maxListSymbols
@@ -149,7 +149,7 @@ const serialize = ({
     }, {
       from,
       to,
-      label: (titlesFormatter == null ? void 0 : titlesFormatter(range.label)) ?? range.label
+      label: titlesFormatter?.(range.label) ?? range.label
     });
   }));
   if (dataType === "time-series") {
@@ -173,12 +173,12 @@ const serialize = ({
       const mainSummary = intl.formatMessage({
         id: "time-series-general-trend"
       }, {
-        dataKey: (titlesFormatter == null ? void 0 : titlesFormatter(summaryDataKey)) ?? summaryDataKey,
+        dataKey: titlesFormatter?.(summaryDataKey) ?? summaryDataKey,
         trend: intl.formatMessage({
           id: `trend-${primaryTrend.change.strength}`
         }),
-        from: (valuesFormatter == null ? void 0 : valuesFormatter(primaryTrend.change.from, dataKey)) ?? intl.formatNumber(primaryTrend.change.from),
-        to: (valuesFormatter == null ? void 0 : valuesFormatter(primaryTrend.change.to, dataKey)) ?? intl.formatNumber(primaryTrend.change.to)
+        from: valuesFormatter?.(primaryTrend.change.from, dataKey) ?? intl.formatNumber(primaryTrend.change.from),
+        to: valuesFormatter?.(primaryTrend.change.to, dataKey) ?? intl.formatNumber(primaryTrend.change.to)
       });
       const secondarySummaries = secondaryTrends.map((trend) => intl.formatMessage({
         id: "time-series-local-trend"
@@ -186,12 +186,12 @@ const serialize = ({
         trend: intl.formatMessage({
           id: `trend-${trend.change.strength}`
         }),
-        from: (valuesFormatter == null ? void 0 : valuesFormatter(trend.from, trend.dataKey)) ?? defaultValueFormatter(intl, trend.from, {
+        from: valuesFormatter?.(trend.from, trend.dataKey) ?? defaultValueFormatter(intl, trend.from, {
           siblingsTimeMark: trend.to,
           datesWithTime,
           maxListSymbols
         }),
-        to: (valuesFormatter == null ? void 0 : valuesFormatter(trend.to, trend.dataKey)) ?? defaultValueFormatter(intl, trend.to, {
+        to: valuesFormatter?.(trend.to, trend.dataKey) ?? defaultValueFormatter(intl, trend.to, {
           siblingsTimeMark: trend.from,
           datesWithTime,
           maxListSymbols
@@ -212,7 +212,7 @@ const serialize = ({
     }, {
       entities,
       entitiesList: intl.formatList(entitiesList),
-      label: (titlesFormatter == null ? void 0 : titlesFormatter(dataTitle)) ?? dataTitle
+      label: titlesFormatter?.(dataTitle) ?? dataTitle
     });
     if (dataRangeSummary.length > 0) {
       return `${summary}
@@ -237,7 +237,7 @@ ${dataRangeSummary}`;
       minSize
     });
     const entitiesList = biggestClusters.map((clusterInsight) => {
-      const labels = formatLimitedSizeList(clusterInsight.labels.map((label) => (titlesFormatter == null ? void 0 : titlesFormatter(label)) ?? label), intl, maxListSymbols);
+      const labels = formatLimitedSizeList(clusterInsight.labels.map((label) => titlesFormatter?.(label) ?? label), intl, maxListSymbols);
       const anonymous = clusterInsight.labels.length === 0 || labels === String(clusterInsight.size);
       return intl.formatMessage({
         id: anonymous ? "entity-type-clusters-label-anonymous" : "entity-type-clusters-label"
@@ -247,10 +247,10 @@ ${dataRangeSummary}`;
         }),
         labels,
         size: clusterInsight.size,
-        x: (valuesFormatter == null ? void 0 : valuesFormatter(clusterInsight.center.x, clusterInsight.labels)) ?? intl.formatNumber(clusterInsight.center.x),
-        xLabel: (titlesFormatter == null ? void 0 : titlesFormatter(clusterInsight.center.xLabel)) ?? clusterInsight.center.xLabel,
-        y: (valuesFormatter == null ? void 0 : valuesFormatter(clusterInsight.center.y, clusterInsight.labels)) ?? intl.formatNumber(clusterInsight.center.y),
-        yLabel: (titlesFormatter == null ? void 0 : titlesFormatter(clusterInsight.center.yLabel)) ?? clusterInsight.center.yLabel
+        x: valuesFormatter?.(clusterInsight.center.x, clusterInsight.labels) ?? intl.formatNumber(clusterInsight.center.x),
+        xLabel: titlesFormatter?.(clusterInsight.center.xLabel) ?? clusterInsight.center.xLabel,
+        y: valuesFormatter?.(clusterInsight.center.y, clusterInsight.labels) ?? intl.formatNumber(clusterInsight.center.y),
+        yLabel: titlesFormatter?.(clusterInsight.center.yLabel) ?? clusterInsight.center.yLabel
       });
     });
     if (insights.length > clustersLimit) {
@@ -265,7 +265,7 @@ ${dataRangeSummary}`;
     }, {
       entities,
       entitiesList: intl.formatList(entitiesList),
-      label: (titlesFormatter == null ? void 0 : titlesFormatter(dataTitle)) ?? dataTitle
+      label: titlesFormatter?.(dataTitle) ?? dataTitle
     });
     if (dataRangeSummary.length > 0) {
       return `${summary}
@@ -290,7 +290,7 @@ ${dataRangeSummary}`;
     }, {
       entities,
       entitiesList,
-      label: (titlesFormatter == null ? void 0 : titlesFormatter(dataTitle)) ?? dataTitle
+      label: titlesFormatter?.(dataTitle) ?? dataTitle
     });
   } else if (dataType === "grouped-values" || dataType === "indexed-groups") {
     const groupInsights = insights;
@@ -338,7 +338,7 @@ ${dataRangeSummary}`;
     }, {
       entities,
       entitiesList: intl.formatList(entitiesList),
-      label: (titlesFormatter == null ? void 0 : titlesFormatter(dataTitle)) ?? dataTitle
+      label: titlesFormatter?.(dataTitle) ?? dataTitle
     });
     return summary;
   }

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

@@ -1,29 +1,31 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { Component, sstyled, assignProps } from "@semcore/core";
-import { Flex, Box } from "@semcore/base-components";
+import { sstyled, Component, assignProps } from "@semcore/core";
+import { Box, Flex } from "@semcore/base-components";
 import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
 import { Text } from "@semcore/typography";
 import React, { Fragment } from "react";
-import Plot from "../../Plot.mjs";
-import { LegendFlex } from "../ChartLegend/LegendFlex/LegendFlex.mjs";
+import "../../index.mjs";
+import { makeDataHintsContainer } from "../../a11y/hints.mjs";
+import { interpolateValue } from "../../utils.mjs";
+import "../ChartLegend/index.mjs";
 import { LegendTable } from "../ChartLegend/LegendTable/LegendTable.mjs";
+import { LegendFlex } from "../ChartLegend/LegendFlex/LegendFlex.mjs";
 import { YAxis, XAxis } from "../../Axis.mjs";
-import { interpolateValue } from "../../utils.mjs";
-import { makeDataHintsContainer } from "../../a11y/hints.mjs";
+import Plot from "../../Plot.mjs";
 /*!__reshadow-styles__:"../../style/abstract-chart.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___STooltipChildrenWrapper_135h8_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_135h8_gg_._columnsCount_2_135h8_gg_{grid-template-columns:auto minmax(28px,max-content)}.___STooltipChildrenWrapper_135h8_gg_._columnsCount_3_135h8_gg_{grid-template-columns:auto minmax(28px,max-content) minmax(28px,max-content)}",
+    ".___STooltipChildrenWrapper_16iik_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_16iik_gg_._columnsCount_2_16iik_gg_{grid-template-columns:auto minmax(28px,max-content)}.___STooltipChildrenWrapper_16iik_gg_._columnsCount_3_16iik_gg_{grid-template-columns:auto minmax(28px,max-content) minmax(28px,max-content)}",
     /*__inner_css_end__*/
-    "135h8_gg_"
+    "16iik_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STooltipChildrenWrapper": "___STooltipChildrenWrapper_135h8_gg_",
-    "_columnsCount_2": "_columnsCount_2_135h8_gg_",
-    "_columnsCount_3": "_columnsCount_3_135h8_gg_"
+    "__STooltipChildrenWrapper": "___STooltipChildrenWrapper_16iik_gg_",
+    "_columnsCount_2": "_columnsCount_2_16iik_gg_",
+    "_columnsCount_3": "_columnsCount_3_16iik_gg_"
   })
 );
 const NOT_A_VALUE = "n/a";
@@ -32,11 +34,6 @@ class AbstractChart extends Component {
     super(props);
     _defineProperty(this, "plotPadding", 6);
     _defineProperty(this, "dataHints", makeDataHintsContainer());
-    _defineProperty(this, "state", {
-      dataDefinitions: this.getDefaultDataDefinitions(),
-      highlightedLine: -1,
-      withTrend: false
-    });
     this.setHighlightedLine = this.setHighlightedLine.bind(this);
     this.handleChangeVisible = this.handleChangeVisible.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
@@ -44,6 +41,11 @@ class AbstractChart extends Component {
     this.resolveColor = this.resolveColor.bind(this);
     this.tooltipValueFormatter = this.tooltipValueFormatter.bind(this);
     this.handleWithTrendChange = this.handleWithTrendChange.bind(this);
+    this.state = {
+      dataDefinitions: this.getDefaultDataDefinitions(),
+      highlightedLine: -1,
+      withTrend: false
+    };
   }
   componentDidUpdate(prevProps) {
     if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) {
@@ -58,17 +60,16 @@ class AbstractChart extends Component {
       legendProps
     } = this.props;
     return this.dataKeys.map((key, index) => {
-      var _a;
-      const legendData = (_a = legendProps == null ? void 0 : legendProps.legendMap) == null ? void 0 : _a[key];
+      const legendData = legendProps?.legendMap?.[key];
       const dataDefinition = {
         id: key,
-        label: (legendData == null ? void 0 : legendData.label) ?? key,
-        icon: (legendData == null ? void 0 : legendData.icon) ?? void 0,
-        checked: (legendData == null ? void 0 : legendData.defaultChecked) ?? true,
+        label: legendData?.label ?? key,
+        icon: legendData?.icon ?? void 0,
+        checked: legendData?.defaultChecked ?? true,
         color: this.resolveColor(key, index),
         columns: []
       };
-      if ((legendData == null ? void 0 : legendData.additionalInfo) || (legendData == null ? void 0 : legendData.count)) {
+      if (legendData?.additionalInfo || legendData?.count) {
         dataDefinition.additionalInfo = legendData.additionalInfo ? {
           label: legendData.additionalInfo
         } : legendData.count ? {
@@ -233,18 +234,6 @@ class AbstractChart extends Component {
     }
     return total;
   }
-  percentValue(data, key) {
-    const total = this.totalValue(data);
-    const value = data[key];
-    if (typeof value === "number" && total !== 0) {
-      const percent = Math.round(100 * value / total);
-      return `${percent}%`;
-    }
-    if (value === null) {
-      return `0%`;
-    }
-    return NOT_A_VALUE;
-  }
   getValueScale(values) {
     const max = Math.max(...values);
     const min = Math.min(...values);
@@ -283,8 +272,7 @@ class AbstractChart extends Component {
     this.setHighlightedLine(-1);
   }
   resolveColor(id, index) {
-    var _a;
-    return ((_a = this.props.colorMap) == null ? void 0 : _a[id]) ?? `chart-palette-order-${index + 1}`;
+    return this.props.colorMap?.[id] ?? `chart-palette-order-${index + 1}`;
   }
   tooltipValueFormatter(value) {
     const {
@@ -402,7 +390,6 @@ class AbstractChart extends Component {
     }) : /* @__PURE__ */ React.createElement(XAxis.Grid, null))));
   }
   getTooltipChildren(options) {
-    var _a;
     var _ref = this.asProps, _ref3;
     const STooltipChildrenWrapper = Box;
     const {
@@ -416,7 +403,7 @@ class AbstractChart extends Component {
     const {
       dataDefinitions
     } = this.state;
-    const title = (_a = dataItem[groupKey]) == null ? void 0 : _a.toString();
+    const title = dataItem[groupKey]?.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", {

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

@@ -3,12 +3,13 @@ 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 Area from "../../Area.mjs";
-import StackedArea from "../../StackedArea.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 StackedArea from "../../StackedArea.mjs";
+import Area from "../../Area.mjs";
+import { HoverLine } from "../../Hover.mjs";
 class AreaChartComponent extends AbstractChart {
   get xScale() {
     const {

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

@@ -5,13 +5,14 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { scaleTime, scaleBand, scaleLinear } from "d3-scale";
 import React from "react";
 import { AbstractChart } from "./AbstractChart.mjs";
-import { YAxis, XAxis } from "../../Axis.mjs";
+import "../../index.mjs";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
 import Line from "../../Line.mjs";
 import GroupBar from "../../GroupBar.mjs";
 import StackBar from "../../StackBar.mjs";
 import { HoverRect } from "../../Hover.mjs";
+import { YAxis, XAxis } from "../../Axis.mjs";
 import { minMax } from "../../utils.mjs";
-import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
 class BarChartComponent extends AbstractChart {
   constructor(...args) {
     super(...args);
@@ -61,7 +62,7 @@ class BarChartComponent extends AbstractChart {
     const {
       withTrend
     } = this.state;
-    const trendItem = trend == null ? void 0 : trend[key];
+    const trendItem = trend?.[key];
     if (withTrend && trendItem) {
       return /* @__PURE__ */ React.createElement(Line, {
         data: trendItem,

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

@@ -4,10 +4,11 @@ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { Text } from "@semcore/typography";
 import { scaleLinear } from "d3-scale";
 import React from "react";
-import Bubble from "../../Bubble.mjs";
-import { calculateBubbleDomain } from "../../utils.mjs";
+import "../../index.mjs";
 import { AbstractChart } from "./AbstractChart.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import { calculateBubbleDomain } from "../../utils.mjs";
+import Bubble from "../../Bubble.mjs";
 class BubbleChartComponent extends AbstractChart {
   get dataKeys() {
     const {
@@ -21,21 +22,20 @@ class BubbleChartComponent extends AbstractChart {
       data
     } = this.props;
     return data.map((item, index) => {
-      var _a;
       const key = index.toString();
-      const legendData = (_a = legendProps == null ? void 0 : legendProps.legendMap) == null ? void 0 : _a[key];
+      const legendData = legendProps?.legendMap?.[key];
       if (item.color === void 0) {
         item.color = this.resolveColor(key, index);
       }
       const dataDefinition = {
         id: key,
-        label: (legendData == null ? void 0 : legendData.label) ?? item.label ?? key,
-        icon: (legendData == null ? void 0 : legendData.icon) ?? void 0,
-        checked: (legendData == null ? void 0 : legendData.defaultChecked) ?? true,
+        label: legendData?.label ?? item.label ?? key,
+        icon: legendData?.icon ?? void 0,
+        checked: legendData?.defaultChecked ?? true,
         color: item.color,
         columns: []
       };
-      if ((legendData == null ? void 0 : legendData.additionalInfo) || (legendData == null ? void 0 : legendData.count)) {
+      if (legendData?.additionalInfo || legendData?.count) {
         dataDefinition.additionalInfo = legendData.additionalInfo ? {
           label: legendData.additionalInfo
         } : legendData.count ? {