@semcore/d3-chart 17.2.0-prerelease.7 → 17.3.0-prerelease.0

package/lib/esm/ScatterPlot.mjs

@@ -13,19 +13,19 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SScatterPlot_15u7e_gg_{fill:var(--intergalactic-chart-palette-order-1,#666bdb);transition-property:cx,cy;transition-duration:var(--duration_15u7e);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SScatterPlot_15u7e_gg_:hover{opacity:.8}}.___SScatterPlot_15u7e_gg_.__color_15u7e_gg_{fill:var(--color_15u7e)}.___SScatterPlot_15u7e_gg_.__pattern_15u7e_gg_.__color_15u7e_gg_{fill:var(--pattern_15u7e);stroke:var(--color_15u7e);stroke-width:1px}.___SScatterPlot_15u7e_gg_.__transparent_15u7e_gg_{opacity:.3}.___SValue_15u7e_gg_{text-anchor:middle;font-size:var(--intergalactic-fs-50,10px);stroke:var(--intergalactic-chart-palette-order-9,#5c5cc4)}.___SValue_15u7e_gg_.__color_15u7e_gg_{stroke:var(--color_15u7e)}.___SValue_15u7e_gg_.__transparent_15u7e_gg_{opacity:.3}",
+    ".___SScatterPlot_14241_gg_{fill:var(--intergalactic-chart-palette-order-1,oklch(.58 .168 278.2));transition-property:cx,cy;transition-duration:var(--duration_14241);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SScatterPlot_14241_gg_:hover{opacity:.8}}.___SScatterPlot_14241_gg_.__color_14241_gg_{fill:var(--color_14241)}.___SScatterPlot_14241_gg_.__pattern_14241_gg_.__color_14241_gg_{fill:var(--pattern_14241);stroke:var(--color_14241);stroke-width:1px}.___SScatterPlot_14241_gg_.__transparent_14241_gg_{opacity:.3}.___SValue_14241_gg_{text-anchor:middle;font-size:var(--intergalactic-fs-50,10px);stroke:var(--intergalactic-chart-palette-order-9,oklch(.53 .157 279.2))}.___SValue_14241_gg_.__color_14241_gg_{stroke:var(--color_14241)}.___SValue_14241_gg_.__transparent_14241_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "15u7e_gg_"
+    "14241_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SScatterPlot": "___SScatterPlot_15u7e_gg_",
-    "_color": "__color_15u7e_gg_",
-    "--color": "--color_15u7e",
-    "_pattern": "__pattern_15u7e_gg_",
-    "--pattern": "--pattern_15u7e",
-    "_transparent": "__transparent_15u7e_gg_",
-    "__SValue": "___SValue_15u7e_gg_",
-    "--duration": "--duration_15u7e"
+    "__SScatterPlot": "___SScatterPlot_14241_gg_",
+    "_color": "__color_14241_gg_",
+    "--color": "--color_14241",
+    "_pattern": "__pattern_14241_gg_",
+    "--pattern": "--pattern_14241",
+    "_transparent": "__transparent_14241_gg_",
+    "__SValue": "___SValue_14241_gg_",
+    "--duration": "--duration_14241"
   })
 );
 class ScatterPlotRoot extends Component {

package/lib/esm/Tooltip.mjs

@@ -12,19 +12,19 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___STooltip_123dv_gg_{font-size:var(--intergalactic-fs-100,12px);line-height:var(--intergalactic-lh-100,133%);position:relative;background-color:var(--intergalactic-bg-primary-neutral,#fff);border-radius:var(--intergalactic-popper-rounded,6px);border:1px solid var(--intergalactic-border-secondary,#00151012);box-sizing:border-box;box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);padding:var(--intergalactic-spacing-3x,12px)}@supports (color:color(display-p3 0 0 0%)){.___STooltip_123dv_gg_{border:1px solid var(--intergalactic-border-secondary,#00151012);box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012)}@media (color-gamut:p3){.___STooltip_123dv_gg_{border:1px solid var(--intergalactic-border-secondary,color(display-p3 .01753 .08157 .06372/.07));box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 color(display-p3 .01753 .08157 .06372/.07))}}}.___STitle_123dv_gg_{color:var(--intergalactic-text-secondary,#00030095);margin-bottom:var(--intergalactic-spacing-2x,8px)}@supports (color:color(display-p3 0 0 0%)){.___STitle_123dv_gg_{color:var(--intergalactic-text-secondary,#00030095)}@media (color-gamut:p3){.___STitle_123dv_gg_{color:var(--intergalactic-text-secondary,color(display-p3 .00228 .01289 .00252/.583))}}}.___SDotGroup_123dv_gg_{display:flex;align-items:center}.___SDot_123dv_gg_{margin-right:var(--intergalactic-spacing-2x,8px)}.___SDotCircle_123dv_gg_.__color_123dv_gg_{background-color:var(--color_123dv);width:8px;height:8px;border-radius:50%}.___SFooter_123dv_gg_{background:var(--intergalactic-bg-secondary-neutral,#f8f9f8);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(var(--intergalactic-spacing-3x, 12px)*-1) calc(var(--intergalactic-spacing-3x, 12px)*-1)}",
+    ".___STooltip_j5bmf_gg_{font-size:var(--intergalactic-fs-100,12px);line-height:var(--intergalactic-lh-100,133%);position:relative;background-color:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));border-radius:var(--intergalactic-popper-rounded,6px);border:1px solid var(--intergalactic-border-secondary,#00151012);box-sizing:border-box;box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 #00151012);padding:var(--intergalactic-spacing-3x,12px)}@media (color-gamut:p3){.___STooltip_j5bmf_gg_{border:1px solid var(--intergalactic-border-secondary,oklch(.176 .033 175.7/.07));box-shadow:var(--intergalactic-box-shadow-popper,1px 1px 10px 0 oklch(.176 .033 175.7/.07))}}.___STitle_j5bmf_gg_{color:var(--intergalactic-text-secondary,#00030095);margin-bottom:var(--intergalactic-spacing-2x,8px)}@media (color-gamut:p3){.___STitle_j5bmf_gg_{color:var(--intergalactic-text-secondary,oklch(.088 .026 147.7/.583))}}.___SDotGroup_j5bmf_gg_{display:flex;align-items:center}.___SDot_j5bmf_gg_{margin-right:var(--intergalactic-spacing-2x,8px)}.___SDotCircle_j5bmf_gg_.__color_j5bmf_gg_{background-color:var(--color_j5bmf);width:8px;height:8px;border-radius:50%}.___SFooter_j5bmf_gg_{background:var(--intergalactic-bg-secondary-neutral,oklch(.98 .001 180));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(var(--intergalactic-spacing-3x, 12px)*-1) calc(var(--intergalactic-spacing-3x, 12px)*-1)}",
     /*__inner_css_end__*/
-    "123dv_gg_"
+    "j5bmf_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STooltip": "___STooltip_123dv_gg_",
-    "__STitle": "___STitle_123dv_gg_",
-    "__SDotGroup": "___SDotGroup_123dv_gg_",
-    "__SDot": "___SDot_123dv_gg_",
-    "__SDotCircle": "___SDotCircle_123dv_gg_",
-    "_color": "__color_123dv_gg_",
-    "--color": "--color_123dv",
-    "__SFooter": "___SFooter_123dv_gg_"
+    "__STooltip": "___STooltip_j5bmf_gg_",
+    "__STitle": "___STitle_j5bmf_gg_",
+    "__SDotGroup": "___SDotGroup_j5bmf_gg_",
+    "__SDot": "___SDot_j5bmf_gg_",
+    "__SDotCircle": "___SDotCircle_j5bmf_gg_",
+    "_color": "__color_j5bmf_gg_",
+    "--color": "--color_j5bmf",
+    "__SFooter": "___SFooter_j5bmf_gg_"
   })
 );
 const TooltipDotRenderContext = /* @__PURE__ */ React.createContext({

package/lib/esm/Venn.mjs

@@ -16,19 +16,19 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SCircle_iobh3_gg_{fill:var(--intergalactic-chart-palette-order-2,#38e3b5);stroke:var(--intergalactic-chart-grid-border,#fff);stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_iobh3);transition-timing-function:ease-in-out}@media (hover:hover){.___SCircle_iobh3_gg_:hover{fill-opacity:.7}}.___SCircle_iobh3_gg_.__color_iobh3_gg_{fill:var(--color_iobh3)}.___SCircle_iobh3_gg_.__pattern_iobh3_gg_.__color_iobh3_gg_{fill:var(--pattern_iobh3);fill-opacity:.7;stroke:var(--color_iobh3);stroke-width:1px}@media (hover:hover){.___SCircle_iobh3_gg_.__pattern_iobh3_gg_.__color_iobh3_gg_:hover{fill-opacity:.85}}.___SCircle_iobh3_gg_.__transparent_iobh3_gg_{opacity:.3}.___SIntersection_iobh3_gg_{stroke:var(--intergalactic-chart-grid-border,#fff);stroke-width:2px;fill-opacity:0}@media (hover:hover){.___SIntersection_iobh3_gg_:hover{fill-opacity:.1}}.___SIntersection_iobh3_gg_.__transparent_iobh3_gg_{opacity:.3}",
+    ".___SCircle_1gs70_gg_{fill:var(--intergalactic-chart-palette-order-2,oklch(.82 .15 170));stroke:var(--intergalactic-chart-grid-border,#fff);stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_1gs70);transition-timing-function:ease-in-out}@media (hover:hover){.___SCircle_1gs70_gg_:hover{fill-opacity:.7}}.___SCircle_1gs70_gg_.__color_1gs70_gg_{fill:var(--color_1gs70)}.___SCircle_1gs70_gg_.__pattern_1gs70_gg_.__color_1gs70_gg_{fill:var(--pattern_1gs70);fill-opacity:.7;stroke:var(--color_1gs70);stroke-width:1px}@media (hover:hover){.___SCircle_1gs70_gg_.__pattern_1gs70_gg_.__color_1gs70_gg_:hover{fill-opacity:.85}}.___SCircle_1gs70_gg_.__transparent_1gs70_gg_{opacity:.3}.___SIntersection_1gs70_gg_{stroke:var(--intergalactic-chart-grid-border,#fff);stroke-width:2px;fill-opacity:0}@media (hover:hover){.___SIntersection_1gs70_gg_:hover{fill-opacity:.1}}.___SIntersection_1gs70_gg_.__transparent_1gs70_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "iobh3_gg_"
+    "1gs70_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SCircle": "___SCircle_iobh3_gg_",
-    "_color": "__color_iobh3_gg_",
-    "--color": "--color_iobh3",
-    "_transparent": "__transparent_iobh3_gg_",
-    "__SIntersection": "___SIntersection_iobh3_gg_",
-    "--duration": "--duration_iobh3",
-    "_pattern": "__pattern_iobh3_gg_",
-    "--pattern": "--pattern_iobh3"
+    "__SCircle": "___SCircle_1gs70_gg_",
+    "_color": "__color_1gs70_gg_",
+    "--color": "--color_1gs70",
+    "_transparent": "__transparent_1gs70_gg_",
+    "__SIntersection": "___SIntersection_1gs70_gg_",
+    "--duration": "--duration_1gs70",
+    "_pattern": "__pattern_1gs70_gg_",
+    "--pattern": "--pattern_1gs70"
   })
 );
 class VennRoot extends Component {

package/lib/esm/a11y/PlotA11yModule.mjs

@@ -10,12 +10,12 @@ const styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlotA11yModule_19nt6_gg_{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}",
+    ".___SPlotA11yModule_18sta_gg_{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}",
     /*__inner_css_end__*/
-    "19nt6_gg_"
+    "18sta_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlotA11yModule": "___SPlotA11yModule_19nt6_gg_"
+    "__SPlotA11yModule": "___SPlotA11yModule_18sta_gg_"
   })
 );
 function PlotA11yModule(props) {

package/lib/esm/a11y/PlotA11yView.mjs

@@ -13,12 +13,12 @@ const styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlotA11yView_ufc1r_gg_{position:relative;display:block;background-color:var(--intergalactic-bg-primary-neutral,#fff);color:var(--intergalactic-text-primary,#010500e5);border:3px solid var(--intergalactic-border-primary,#000c0829);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}@supports (color:color(display-p3 0 0 0%)){.___SPlotA11yView_ufc1r_gg_{border:3px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SPlotA11yView_ufc1r_gg_{border:3px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___SPlotA11yView_ufc1r_gg_ a{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;margin-bottom:var(--intergalactic-spacing-2x,8px);display:block}.___SPlotA11yView_ufc1r_gg_ :is(table,td,th){border:1px solid var(--intergalactic-border-primary,#000c0829)}@supports (color:color(display-p3 0 0 0%)){.___SPlotA11yView_ufc1r_gg_ :is(table,td,th){border:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SPlotA11yView_ufc1r_gg_ :is(table,td,th){border:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}",
+    ".___SPlotA11yView_1hm9h_gg_{position:relative;display:block;background-color:var(--intergalactic-bg-primary-neutral,oklch(1 0 0));color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));border:3px solid var(--intergalactic-border-primary,#000c0829);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}@media (color-gamut:p3){.___SPlotA11yView_1hm9h_gg_{border:3px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SPlotA11yView_1hm9h_gg_ a{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;margin-bottom:var(--intergalactic-spacing-2x,8px);display:block}.___SPlotA11yView_1hm9h_gg_ :is(table,td,th){border:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SPlotA11yView_1hm9h_gg_ :is(table,td,th){border:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}",
     /*__inner_css_end__*/
-    "ufc1r_gg_"
+    "1hm9h_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlotA11yView": "___SPlotA11yView_ufc1r_gg_"
+    "__SPlotA11yView": "___SPlotA11yView_1hm9h_gg_"
   })
 );
 function PlotA11yView({

package/lib/esm/a11y/serialize.mjs

@@ -237,7 +237,12 @@ ${dataRangeSummary}`;
       minSize
     });
     const entitiesList = biggestClusters.map((clusterInsight) => {
-      const labels = formatLimitedSizeList(clusterInsight.labels.map((label) => titlesFormatter?.(label) ?? label), intl, maxListSymbols);
+      const labels = formatLimitedSizeList(clusterInsight.labels.reduce((acc, label) => {
+        if (typeof label === "string") {
+          acc.push(titlesFormatter?.(label) ?? label);
+        }
+        return acc;
+      }, []), 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"

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

@@ -1,8 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import cssToIntDefault from "@semcore/core/lib/utils/cssToIntDefault";
+import trottle from "@semcore/core/lib/utils/rafTrottle";
 import { Text } from "@semcore/typography";
 import React, { Fragment } from "react";
 import "../../index.mjs";
@@ -18,14 +22,15 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___STooltipChildrenWrapper_1snkx_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_1snkx_gg_._columnsCount_2_1snkx_gg_{grid-template-columns:auto minmax(28px,max-content)}.___STooltipChildrenWrapper_1snkx_gg_._columnsCount_3_1snkx_gg_{grid-template-columns:auto minmax(28px,max-content) minmax(28px,max-content)}",
+    ".___SChart_giu6t_gg_{width:100%;height:100%;min-width:0;min-height:0}.___STooltipChildrenWrapper_giu6t_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_giu6t_gg_._columnsCount_2_giu6t_gg_{grid-template-columns:auto minmax(28px,max-content)}.___STooltipChildrenWrapper_giu6t_gg_._columnsCount_3_giu6t_gg_{grid-template-columns:auto minmax(28px,max-content) minmax(28px,max-content)}",
     /*__inner_css_end__*/
-    "1snkx_gg_"
+    "giu6t_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STooltipChildrenWrapper": "___STooltipChildrenWrapper_1snkx_gg_",
-    "_columnsCount_2": "_columnsCount_2_1snkx_gg_",
-    "_columnsCount_3": "_columnsCount_3_1snkx_gg_"
+    "__SChart": "___SChart_giu6t_gg_",
+    "__STooltipChildrenWrapper": "___STooltipChildrenWrapper_giu6t_gg_",
+    "_columnsCount_2": "_columnsCount_2_giu6t_gg_",
+    "_columnsCount_3": "_columnsCount_3_giu6t_gg_"
   })
 );
 const NOT_A_VALUE = "n/a";
@@ -34,6 +39,13 @@ class AbstractChart extends Component {
     super(props);
     _defineProperty(this, "plotPadding", 6);
     _defineProperty(this, "dataHints", makeDataHintsContainer());
+    _defineProperty(this, "chartRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "legendRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "observer", void 0);
+    this.handleResize = trottle(this.handleResize.bind(this));
+    if (canUseDOM() && (!props.plotWidth || !props.plotHeight)) {
+      this.observer = new ResizeObserver(this.handleResize);
+    }
     this.setHighlightedLine = this.setHighlightedLine.bind(this);
     this.handleChangeVisible = this.handleChangeVisible.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
@@ -44,9 +56,14 @@ class AbstractChart extends Component {
     this.state = {
       dataDefinitions: this.getDefaultDataDefinitions(),
       highlightedLine: -1,
-      withTrend: false
+      withTrend: false,
+      plotWidth: 0,
+      plotHeight: 0
     };
   }
+  componentDidMount() {
+    this.observer?.observe(this.chartRef.current);
+  }
   componentDidUpdate(prevProps) {
     if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) {
       this.setState({
@@ -54,6 +71,15 @@ class AbstractChart extends Component {
       });
     }
   }
+  componentWillUnmount() {
+    this.observer?.disconnect();
+  }
+  get plotWidth() {
+    return this.asProps.plotWidth ?? this.state.plotWidth;
+  }
+  get plotHeight() {
+    return this.asProps.plotHeight ?? this.state.plotHeight;
+  }
   getDefaultDataDefinitions() {
     const {
       data,
@@ -333,7 +359,9 @@ class AbstractChart extends Component {
       "aria-label": this.getLegendAriaLabel()
     };
     if (lProps.legendType === "Table") {
-      return /* @__PURE__ */ React.createElement(LegendTable, commonLegendProps);
+      return /* @__PURE__ */ React.createElement(LegendTable, _extends({}, commonLegendProps, {
+        ref: this.legendRef
+      }));
     }
     if ("withTrend" in lProps) {
       const flexLegendProps = {
@@ -343,9 +371,13 @@ class AbstractChart extends Component {
         trendIsVisible: withTrend,
         onTrendIsVisibleChange: this.handleWithTrendChange
       };
-      return /* @__PURE__ */ React.createElement(LegendFlex, flexLegendProps);
+      return /* @__PURE__ */ React.createElement(LegendFlex, _extends({}, flexLegendProps, {
+        ref: this.legendRef
+      }));
     }
-    return /* @__PURE__ */ React.createElement(LegendFlex, commonLegendProps);
+    return /* @__PURE__ */ React.createElement(LegendFlex, _extends({}, commonLegendProps, {
+      ref: this.legendRef
+    }));
   }
   renderAxis() {
     const {
@@ -445,8 +477,6 @@ class AbstractChart extends Component {
     const SChart = Flex;
     const {
       styles,
-      plotWidth,
-      plotHeight,
       data,
       patterns,
       a11yAltTextConfig,
@@ -454,6 +484,10 @@ class AbstractChart extends Component {
       eventEmitter,
       showTooltip
     } = this.asProps;
+    const {
+      plotWidth,
+      plotHeight
+    } = this;
     const {
       extractedAriaProps
     } = extractAriaProps(this.asProps);
@@ -461,7 +495,8 @@ class AbstractChart extends Component {
       ...assignProps({
         "gap": 5,
         "__excludeProps": ["data", "eventEmitter"],
-        "role": "group"
+        "role": "group",
+        "ref": this.chartRef
       }, _ref2)
     }), this.renderLegend(), /* @__PURE__ */ React.createElement(Plot, _ref4.cn("Plot", {
       "data": data,
@@ -476,6 +511,45 @@ class AbstractChart extends Component {
       ...extractedAriaProps
     }), this.renderAxis(), !showTooltip ? null : this.renderTooltip(), this.renderChart()));
   }
+  handleResize(entities) {
+    const {
+      aspect,
+      direction,
+      onResize,
+      plotWidth,
+      plotHeight
+    } = this.asProps;
+    const chartElement = this.chartRef.current;
+    if (!chartElement) return;
+    const legendElement = this.legendRef.current;
+    const computedStyles = window.getComputedStyle(chartElement);
+    let width = chartElement.clientWidth;
+    let height = chartElement.clientHeight;
+    if (legendElement) {
+      const gap = cssToIntDefault(computedStyles.gap, 0);
+      if (direction?.includes("column")) {
+        height = height - legendElement.clientHeight - gap;
+      } else {
+        width = width - legendElement.clientWidth - gap;
+      }
+    }
+    if (aspect) {
+      const minHeight = cssToIntDefault(computedStyles.getPropertyValue("min-height"), -1);
+      const maxHeight = cssToIntDefault(computedStyles.getPropertyValue("max-height"), -1);
+      height = width / aspect;
+      if (minHeight !== -1 && height < minHeight) {
+        height = minHeight;
+      }
+      if (maxHeight !== -1 && height > maxHeight) {
+        height = maxHeight;
+      }
+    }
+    this.setState({
+      plotWidth: plotWidth ? 0 : width,
+      plotHeight: plotHeight ? 0 : height
+    });
+    onResize?.([width, height], entities);
+  }
 }
 _defineProperty(AbstractChart, "style", style);
 export {

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

@@ -15,10 +15,12 @@ class AreaChartComponent extends AbstractChart {
     const {
       xScale,
       marginY = 40,
-      plotWidth,
       data,
       groupKey
     } = this.asProps;
+    const {
+      plotWidth
+    } = this;
     if (xScale) {
       return xScale;
     }
@@ -34,9 +36,11 @@ class AreaChartComponent extends AbstractChart {
     const {
       yScale,
       marginX = 24,
-      plotHeight,
       stacked
     } = this.asProps;
+    const {
+      plotHeight
+    } = this;
     if (yScale) {
       return yScale;
     }

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

@@ -225,12 +225,14 @@ class BarChartComponent extends AbstractChart {
     const {
       marginY = 40,
       marginX = 24,
-      plotWidth,
-      plotHeight,
       invertAxis,
       data,
       groupKey
     } = this.asProps;
+    const {
+      plotWidth,
+      plotHeight
+    } = this;
     const testItem = data[0][groupKey];
     const range = invertAxis ? [plotHeight - marginX, this.plotPadding] : [marginY, plotWidth - this.plotPadding];
     if (testItem instanceof Date && !Number.isNaN(testItem.getMilliseconds())) {
@@ -244,11 +246,13 @@ class BarChartComponent extends AbstractChart {
     const {
       marginY = 40,
       marginX = 24,
-      plotWidth,
-      plotHeight,
       invertAxis,
       type
     } = this.asProps;
+    const {
+      plotWidth,
+      plotHeight
+    } = this;
     const max = type === "stack" ? super.maxStackedValue : Math.max(...super.flatValues);
     return scaleLinear().range(invertAxis ? [marginY, plotWidth - this.plotPadding] : [plotHeight - marginX, this.plotPadding]).domain([0, max]);
   }

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

@@ -49,9 +49,11 @@ class BubbleChartComponent extends AbstractChart {
     const {
       xScale,
       marginY = 30,
-      plotWidth,
       data
     } = this.asProps;
+    const {
+      plotWidth
+    } = this;
     if (xScale) {
       return xScale;
     }
@@ -63,9 +65,11 @@ class BubbleChartComponent extends AbstractChart {
     const {
       yScale,
       marginX = 30,
-      plotHeight,
       data
     } = this.asProps;
+    const {
+      plotHeight
+    } = this;
     if (yScale) {
       return yScale;
     }

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

@@ -96,12 +96,14 @@ class CigaretteChartComponent extends AbstractChart {
   }
   computeCigaretteItems() {
     const {
-      plotWidth,
-      plotHeight,
       data,
       invertAxis,
       minimalBarWidth
     } = this.asProps;
+    const {
+      plotWidth,
+      plotHeight
+    } = this;
     const dataDefinitions = invertAxis ? this.activeDataDefinitions : [...this.activeDataDefinitions].reverse();
     const count = this.activePositiveDataDefinitions.length;
     const totalGapWidth = DEFAULT_GAP * Math.max(0, count - 1);
@@ -152,13 +154,13 @@ class CigaretteChartComponent extends AbstractChart {
   get xScale() {
     const {
       plotWidth
-    } = this.asProps;
+    } = this;
     return scaleLinear([0, plotWidth]);
   }
   get yScale() {
     const {
       plotHeight
-    } = this.asProps;
+    } = this;
     return scaleLinear([plotHeight, 0]);
   }
   renderChart() {
@@ -168,14 +170,16 @@ class CigaretteChartComponent extends AbstractChart {
       uid,
       duration,
       patterns,
-      plotHeight,
-      plotWidth,
       onClick
     } = this.asProps;
     const {
       dataDefinitions,
       highlightedLine
     } = this.state;
+    const {
+      plotWidth,
+      plotHeight
+    } = this;
     this.offset = 0;
     const items = this.computeCigaretteItems();
     return /* @__PURE__ */ React.createElement(React.Fragment, null, items.map((item, index) => {
@@ -358,21 +362,25 @@ class CigaretteChartComponent extends AbstractChart {
     const SChart = Flex;
     const {
       styles,
-      plotWidth,
-      plotHeight,
       data,
       patterns,
+      direction,
       invertAxis,
       a11yAltTextConfig
     } = this.asProps;
+    const {
+      plotWidth,
+      plotHeight
+    } = this;
     const header = this.renderHeader();
     if (invertAxis) {
       var _ref5;
       return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref5.cn("SChart", {
         ...assignProps({
           "gap": 6,
-          "direction": "column",
-          "__excludeProps": ["onClick", "data"]
+          "direction": direction,
+          "__excludeProps": ["onClick", "data"],
+          "ref": this.chartRef
         }, _ref2)
       }), /* @__PURE__ */ React.createElement(Flex, _ref5.cn("Flex", {
         "direction": "column"
@@ -392,7 +400,8 @@ class CigaretteChartComponent extends AbstractChart {
     return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SChart, _ref6.cn("SChart", {
       ...assignProps({
         "gap": 6,
-        "__excludeProps": ["onClick", "data"]
+        "__excludeProps": ["onClick", "data"],
+        "ref": this.chartRef
       }, _ref2)
     }), /* @__PURE__ */ React.createElement(Plot, _ref6.cn("Plot", {
       "ref": this.plotRef,
@@ -462,7 +471,8 @@ _defineProperty(CigaretteChartComponent, "defaultProps", (props) => {
     plotWidth: !invertAxis && !props.plotWidth ? 44 : props.plotWidth,
     plotHeight: invertAxis && !props.plotHeight ? 28 : props.plotHeight,
     showPercentValueInTooltip: false,
-    minimalBarWidth: DEFAULT_MINIMAL_BAR_WIDTH
+    minimalBarWidth: DEFAULT_MINIMAL_BAR_WIDTH,
+    direction: invertAxis ? "column" : "row"
   };
 });
 _defineProperty(CigaretteChartComponent, "enhance", [resolveColorEnhance(), uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);

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

@@ -64,17 +64,21 @@ class CompactHorizontalBarChartComponent extends AbstractChart {
   get categoryScale() {
     const {
       marginY = 40,
-      plotHeight,
       data,
       y
     } = this.asProps;
+    const {
+      plotHeight
+    } = this;
     return scaleBand().range([plotHeight - marginY, marginY]).domain([...data].reverse().map((d) => d[y])).paddingInner(0.6).paddingOuter(0.2);
   }
   get valueScale() {
     const {
-      marginY = 0,
-      plotWidth
+      marginY = 0
     } = this.asProps;
+    const {
+      plotWidth
+    } = this;
     const sum = [...super.flatValues.values()].reduce((acc, d) => acc + d, 0);
     return scaleLinear().range([marginY, plotWidth]).domain([marginY, sum]);
   }

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

@@ -17,12 +17,14 @@ class HistogramChartComponent extends AbstractChart {
       xScale,
       marginY = 30,
       marginX = 30,
-      plotWidth,
-      plotHeight,
       invertAxis,
       data,
       groupKey
     } = this.asProps;
+    const {
+      plotWidth,
+      plotHeight
+    } = this;
     if (xScale) {
       return xScale;
     }
@@ -40,11 +42,13 @@ class HistogramChartComponent extends AbstractChart {
       yScale,
       marginY = 30,
       marginX = 30,
-      plotHeight,
-      plotWidth,
       invertAxis,
       data
     } = this.asProps;
+    const {
+      plotWidth,
+      plotHeight
+    } = this;
     let max;
     if (this.isStack) {
       max = data.reduce((max2, item) => {

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

@@ -14,10 +14,12 @@ class LineChartComponent extends AbstractChart {
     const {
       xScale,
       marginY = 30,
-      plotWidth,
       data,
       groupKey
     } = this.asProps;
+    const {
+      plotWidth
+    } = this;
     if (xScale) {
       return xScale;
     }
@@ -32,9 +34,11 @@ class LineChartComponent extends AbstractChart {
   get yScale() {
     const {
       yScale,
-      marginX = 30,
-      plotHeight
+      marginX = 30
     } = this.asProps;
+    const {
+      plotHeight
+    } = this;
     if (yScale) {
       return yScale;
     }

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

@@ -22,11 +22,13 @@ class ScatterPlotChartComponent extends AbstractChart {
     const {
       xScale,
       marginY = 30,
-      plotWidth,
       data,
       groupKey,
       valueKey
     } = this.asProps;
+    const {
+      plotWidth
+    } = this;
     if (xScale) {
       return xScale;
     }
@@ -43,9 +45,11 @@ class ScatterPlotChartComponent extends AbstractChart {
     const {
       yScale,
       marginX = 30,
-      plotHeight,
       valueKey
     } = this.asProps;
+    const {
+      plotHeight
+    } = this;
     if (yScale) {
       return yScale;
     }

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

@@ -13,14 +13,14 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SLegendFlex_1fc9g_gg_._direction_row_1fc9g_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_1fc9g_gg_._direction_column_1fc9g_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
+    ".___SLegendFlex_e76xg_gg_._direction_row_e76xg_gg_{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:8px 16px}.___SLegendFlex_e76xg_gg_._direction_column_e76xg_gg_{align-items:flex-start;flex-wrap:wrap;gap:8px}",
     /*__inner_css_end__*/
-    "1fc9g_gg_"
+    "e76xg_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendFlex": "___SLegendFlex_1fc9g_gg_",
-    "_direction_row": "_direction_row_1fc9g_gg_",
-    "_direction_column": "_direction_column_1fc9g_gg_"
+    "__SLegendFlex": "___SLegendFlex_e76xg_gg_",
+    "_direction_row": "_direction_row_e76xg_gg_",
+    "_direction_column": "_direction_column_e76xg_gg_"
   })
 );
 class LegendFlexRoot extends BaseLegend {