@massimo-cassandro/minimo 1.31.0 → 1.31.1

package/charts/src/bars.js

@@ -1,5 +1,5 @@
 import { parseStdAxisOpts } from './helpers/parse-std-axis-opts.js';
-import { parseContainer } from './helpers/chart-utils.js';
+import { parseContainer, waitForContainerSize } from './helpers/chart-utils.js';
 import { cartesianAxis } from './helpers/cartesian-axis.js';
 import { legenda } from './helpers/legenda.js';
 
@@ -185,13 +185,15 @@ export async function bars(params) {
     }
 
     // container
-    [, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
+    let containerElement;
+    [containerElement, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
 
-
-    if(!params.width || !params.height) {
+    if(!containerElement && (!params.width || !params.height)) {
       throw `width e/o height mancanti: width: ${params.width}, height: ${params.height}`;
     }
 
+    ({ width: params.width, height: params.height } = await waitForContainerSize(containerElement, { width: params.width, height: params.height }, params.debug));
+
     // =>> legenda
     // costruzione delle opzioni per la legenda
     const legenda_params = {

package/charts/src/goal.js

@@ -1,7 +1,7 @@
 // mostra un triangolo rettangolo disposto orizzontalmente che mostra
 // la porzione di raggiungimento di un obiettivo
 
-import { parseContainer, getElementFromContainer } from './helpers/chart-utils.js';
+import { parseContainer, getElementFromContainer, waitForContainerSize } from './helpers/chart-utils.js';
 import { createTextEl } from './helpers/create-text-element.js';
 
 export async function goal({
@@ -158,11 +158,12 @@ export async function goal({
     // calcolo width
     [, width] = parseContainer({ container: container, width: width, height: height });
 
-
-    if(!width || !height) {
+    if(!container && (!width || !height)) {
       throw `width e/o height mancanti: width: ${width}, height: ${height} (chartHeight: ${chartHeight})`;
     }
 
+    ({ width, height } = await waitForContainerSize(container, { width, height }, debug));
+
     // larghezza iniziale grafico
     // al netto del padding orizzontale pari a 1/2 cursore, in modo che sia visibile interamente
     // quando posizionato agli estremi (anche in presenta di etichetta laterale, nel caso quest'ultima sia più alta del grafico)

package/charts/src/hbars.js

@@ -2,7 +2,7 @@
 // categorie sull'asse verticale (a sinistra), valori sull'asse orizzontale (in basso)
 
 import { parseStdAxisOpts } from './helpers/parse-std-axis-opts.js';
-import { parseContainer } from './helpers/chart-utils.js';
+import { parseContainer, waitForContainerSize } from './helpers/chart-utils.js';
 import { cartesianAxis } from './helpers/cartesian-axis.js';
 import { legenda } from './helpers/legenda.js';
 
@@ -186,13 +186,15 @@ export async function hbars(params) {
     }
 
     // container
-    [, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
+    let containerElement;
+    [containerElement, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
 
-
-    if(!params.width || !params.height) {
+    if(!containerElement && (!params.width || !params.height)) {
       throw `width e/o height mancanti: width: ${params.width}, height: ${params.height}`;
     }
 
+    ({ width: params.width, height: params.height } = await waitForContainerSize(containerElement, { width: params.width, height: params.height }, params.debug));
+
     // =>> legenda
     // costruzione delle opzioni per la legenda
     const legenda_params = {

package/charts/src/helpers/chart-utils.js

@@ -155,3 +155,50 @@ export function parseContainer({ container = null, width = null, height = null }
 
   return [containerElement, width, height];
 }
+
+/**
+ * Attende che il container abbia dimensioni valide, utile quando è temporaneamente
+ * nascosto (es. `display: none` dentro un tab o un pannello non ancora attivo) al
+ * momento della creazione del grafico. Se `width`/`height` sono già entrambe valide
+ * risolve immediatamente, altrimenti osserva il container con un `ResizeObserver` ed
+ * attende che torni visibile. Non ha timeout: se il container non torna mai visibile
+ * la promise resta in sospeso.
+ * @param {Element|null} containerElement - L'elemento container (può essere null).
+ * @param {Object} size - Dimensioni già note.
+ * @param {number|null} size.width - Larghezza già nota (se valida, non si attende il container).
+ * @param {number|null} size.height - Altezza già nota (se valida, non si attende il container).
+ * @param {boolean} [debug=false] - Se true, logga in console quando l'attesa ha inizio. (default: false)
+ * @returns {Promise<{width: number, height: number}>} Le dimensioni effettive una volta disponibili.
+ */
+export function waitForContainerSize(containerElement, { width = null, height = null } = {}, debug = false) {
+  if (width && height) {
+    return Promise.resolve({ width, height });
+  }
+
+  if (!containerElement) {
+    return Promise.resolve({ width, height });
+  }
+
+  return new Promise(resolve => {
+
+    if (debug) {
+      // eslint-disable-next-line no-console
+      console.warn('MinimoCharts → in attesa che il container ottenga dimensioni valide (es. tab/pannello nascosto)', containerElement);
+    }
+
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const observedWidth = width || entry.contentRect.width;
+        const observedHeight = height || entry.contentRect.height;
+
+        if (observedWidth && observedHeight) {
+          observer.disconnect();
+          resolve({ width: observedWidth, height: observedHeight });
+          return;
+        }
+      }
+    });
+
+    observer.observe(containerElement);
+  });
+}

package/charts/src/lines.js

@@ -1,5 +1,5 @@
 import { parseStdAxisOpts } from './helpers/parse-std-axis-opts.js';
-import { parseContainer } from './helpers/chart-utils.js';
+import { parseContainer, waitForContainerSize } from './helpers/chart-utils.js';
 import { cartesianAxis } from './helpers/cartesian-axis.js';
 import { legenda } from './helpers/legenda.js';
 
@@ -196,12 +196,15 @@ export async function lines(params) {
 
 
     // container
-    [, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
+    let containerElement;
+    [containerElement, params.width, params.height] = parseContainer({ container: params.container, width: params.width, height: params.height });
 
-    if(!params.width || !params.height) {
+    if(!containerElement && (!params.width || !params.height)) {
       throw `width e/o height mancanti: width: ${params.width}, height: ${params.height}`;
     }
 
+    ({ width: params.width, height: params.height } = await waitForContainerSize(containerElement, { width: params.width, height: params.height }, params.debug));
+
     // =>> ricalcolo data_lines_attrs (utilizzato anche per le linee della legenda)
     const default_line_width = params.data_lines_attrs['stroke-width']?? 1;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.31.0",
+  "version": "1.31.1",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",