@massimo-cassandro/minimo 1.1.3 → 1.3.0

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

@@ -0,0 +1,174 @@
+/**
+ * Raccolta di utilità condivise per la gestione dei grafici.
+ */
+
+/**
+ * Tronca un numero a un numero specifico di decimali.
+ * @param {number} number - Il numero da troncare.
+ * @param {number} [decimals=4] - Il numero di decimali da mantenere.
+ * @returns {number} Il numero troncato.
+ */
+export function truncateDecimal(number, decimals = 4) {
+  return +parseFloat((number).toFixed(decimals));
+}
+
+/**
+ * Converte un angolo da gradi in radianti.
+ * @param {number} degrees_angle - L'angolo in gradi.
+ * @returns {number} L'angolo in radianti.
+ */
+export const toRadians = degrees_angle => (degrees_angle * Math.PI) / 180.0;
+
+/**
+ * Trasforma le coordinate polari (centro + raggio) in coordinate cartesiane (x, y).
+ * @param {number} degrees_angle - L'angolo in gradi.
+ * @param {number} cx - Coordinata X del centro.
+ * @param {number} cy - Coordinata Y del centro.
+ * @param {number} circleRadius - Il raggio del cerchio.
+ * @returns {{x: number, y: number}} Le coordinate cartesiane risultanti.
+ */
+export function polarToCartesian(degrees_angle, cx, cy, circleRadius) {
+  const radians = toRadians(degrees_angle);
+
+  return {
+    x: truncateDecimal(Math.abs(cx + circleRadius * Math.cos(radians))),
+    y: truncateDecimal(Math.abs(cy - circleRadius * Math.sin(radians)))
+  };
+
+}
+
+// come il precedente, ma restituisce una stringa
+export function polarToCartesianString(degrees_angle, cx, cy, circleRadius) {
+  const {x,y} = polarToCartesian(degrees_angle, cx, cy, circleRadius);
+
+  return `${x},${y}`;
+}
+
+/**
+ * Concatena i nomi delle classi filtrando i valori falsy.
+ * @param {...any} args - I nomi delle classi o condizioni.
+ * @returns {string} Una stringa di nomi di classi separati da spazio.
+ */
+export function classnames(...args) {
+  return args.filter(Boolean).join(' ');
+}
+
+/**
+ * Concatena i nomi delle classi filtrando i valori falsy; restituisce null se il risultato è una stringa vuota.
+ * @param {...any} args - I nomi delle classi o condizioni.
+ * @returns {string|null} Una stringa di nomi di classi o null.
+ */
+export function classnamesNull(...args) {
+  return args.filter(Boolean).join(' ') || null;
+}
+
+/**
+ * Calcola le coordinate per un elemento `path` di tipo arco (arc).
+ * Lo `start_angle` è il punto di inizio e `percentage` è la lunghezza percentuale dell'arco rispetto a `max_angle`.
+ *
+ * @param {Object} options - Opzioni di configurazione.
+ * @param {number} [options.start_angle=0] - Angolo di partenza in gradi.
+ * @param {number|null} options.percentage - Lunghezza dell'arco in percentuale (da 0 a 1).
+ * @param {number} [options.max_arc=360] - L'estensione massima dell'arco in gradi.
+ * @param {Object} options.center - Coordinate del centro.
+ * @param {number|null} options.center.x - Coordinata X del centro.
+ * @param {number|null} options.center.y - Coordinata Y del centro.
+ * @param {number|null} options.radius - Raggio dell'arco.
+ * @param {boolean} [options.clockwise=true] - Direzione oraria se true.
+ * @returns {{arc_length: number, start: {x: number, y: number}, end: {x: number, y: number}}} Coordinate di inizio, fine e lunghezza.
+ */
+export function calcArcCoords(options) {
+  const default_options = {
+    start_angle: 0,
+    percentage: null,
+    max_arc: 360,
+    center: { x: null, y: null },
+    radius: null,
+    clockwise: true
+  };
+
+  options = { ...default_options, ...options };
+
+  try {
+    if (options.percentage == null ||
+      options.center?.x == null ||
+      options.center?.y == null ||
+      options.start_angle == null ||
+      options.radius == null ||
+      options.max_arc == null
+    ) {
+      throw 'Errore parametri in `calcArcCoords`';
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+
+  // Angolo dell'arco corrispondente alla percentuale data
+  let arc_length = options.max_arc * options.percentage,
+    end_angle = options.start_angle + (options.clockwise ? -arc_length : arc_length);
+
+  if (options.percentage === 1) {
+    end_angle -= .001; // Per evitare errori di arrotondamento nel disegno dell'arco completo
+  }
+
+  return {
+    arc_length: arc_length,
+    start: polarToCartesian(options.start_angle, options.center, options.radius),
+    end: polarToCartesian(end_angle, options.center, options.radius),
+  };
+}
+
+/**
+ * Calcola l'attributo `d` per un elemento SVG path che rappresenta un arco.
+ * Accetta le stesse opzioni di `calcArcCoords`.
+ * * @param {Object} options - Opzioni per il calcolo dell'arco.
+ * @returns {string} La stringa da utilizzare nell'attributo `d` del path SVG.
+ */
+export function calcAttrD(options) {
+  const points = calcArcCoords(options);
+
+  return [
+    `M${points.start.x},${points.start.y}`,
+    `A${options.radius},${options.radius}`,
+    0, // xAxisRotation
+    (points.arc_length <= 180 ? 0 : 1), // largeArcFlag
+    options.clockwise && points.arc_length < 360 ? 1 : 0, // sweepFlag
+    `${points.end.x},${points.end.y}`
+  ].join(' ');
+}
+
+/**
+ * Recupera un elemento DOM da un selettore stringa o lo restituisce se è già un elemento.
+ * @param {string|Element|null} container - Il selettore CSS o l'elemento DOM.
+ * @returns {Element|null} L'elemento DOM o null.
+ */
+export function getElementFromContainer(container) {
+  if (!container) {
+    return null;
+  } else if (typeof container === 'string') {
+    return document.querySelector(container);
+  } else if (container instanceof Element) {
+    return container;
+  } else {
+    return null;
+  }
+}
+
+/**
+ * Analizza il contenitore e restituisce informazioni sulle sue dimensioni, eseguendo alcune azioni di base.
+ * @param {Object} params - Parametri di input.
+ * @param {string|Element|null} [params.container=null] - Il contenitore del grafico.
+ * @param {number|null} [params.width=null] - Larghezza predefinita (opzionale).
+ * @param {number|null} [params.height=null] - Altezza predefinita (opzionale).
+ * @returns {[Element|null, number|null, number|null]} Un array contenente l'elemento, la larghezza e l'altezza.
+ */
+export function parseContainer({ container = null, width = null, height = null }) {
+  const containerElement = getElementFromContainer(container);
+
+  // Calcolo delle dimensioni del grafico
+  width = width || (containerElement ? containerElement.clientWidth : null);
+  height = height || (containerElement ? containerElement.clientHeight : null);
+
+  return [containerElement, width, height];
+}

package/charts/src/helpers/core.js

@@ -0,0 +1,25 @@
+import { default_colors } from './default-chart-colors.js';
+import { createSvgCanvas } from './create-svg-canvas.js';
+
+export class MinimoCharts {
+  constructor(customParams = {}) {
+    this.defaults = {
+      colors: customParams.defaults?.colors ?? Object.values(default_colors),
+      font: {
+        size: 14,
+        weight: 400,
+        fill: '#999',
+        ...customParams.defaults?.font
+      }
+    };
+
+
+    this.debug = customParams.debug ?? false;
+    this.createSvgCanvas = (customParams.createSvgCanvas ?? createSvgCanvas).bind(this);
+
+    this.sharedParams = {}; // per condivisione parametri tra grafici nella stessa applicazione
+  }
+
+  setSharedParams(key, value = null) { this.sharedParams[key] = value; }
+  getSharedParams(key) { return this.sharedParams[key]; }
+}

package/charts/src/helpers/create-svg-canvas.js

@@ -0,0 +1,25 @@
+import { SVG } from '@svgdotjs/svg.js';
+
+
+export function createSvgCanvas(container, debug = false) {
+
+  try {
+
+    const chartInstance = this;
+
+    if(!container) {
+      throw 'Missing container';
+    }
+
+    const svgCanvas = SVG().addTo(container);
+
+    if(debug || chartInstance.debug) {
+      svgCanvas.addClass('debug');
+    }
+    return svgCanvas;
+
+  } catch(e) {
+    console.error( 'Charts → createSvgCanvas', e ); // eslint-disable-line
+  }
+
+}

package/charts/src/helpers/create-text-element.js

@@ -0,0 +1,54 @@
+import { textToSvgPath } from './svg-text-to-path.js';
+import { SVG, Text } from '@svgdotjs/svg.js';
+
+export async function createTextEl (chartInstance, {
+  text,
+  textFill = '#000',
+  fontAttr = {},
+  fontFilePath = null,
+  parentElement = null, // se null viene restituito l'elemento generato (text o path)
+  textToPath = false, // bypassa l'impostazione globale, per usi particolari
+}) {
+
+  let textEl;
+
+
+  if(text == null) {
+    throw '`createTextEl`: missing `text`';
+  }
+
+  // Utilizza i defaults dell'istanza (grazie al bind nel costruttore)
+  // Se fontAttr è nullo, usa un oggetto vuoto per evitare errori di spread
+  fontAttr = { ...chartInstance.defaults.font, ...(fontAttr ?? {}), fill: textFill };
+
+  if(chartInstance.textToPath || textToPath) {
+
+    if(!fontFilePath) {
+      throw `‘createTextEl’: missing ‘fontFilePath’ for text ‘${text}’`;
+    }
+
+    // Qui recuperiamo sia il tracciato che la stringa SVG (come nel tuo originale)
+    const { pathData, pathElementString } = await textToSvgPath(fontFilePath, text, fontAttr.size ?? 16);
+
+    if(parentElement) {
+      textEl = parentElement.path(pathData);
+    } else {
+      // Nota: utilizzando path con pathData direttamente su SVG() a volte dà errore in svg.js 3.x
+      textEl = SVG(pathElementString);
+    }
+
+    textEl.attr({ fill: textFill });
+
+  } else {
+    // Modalità testo standard (non tracciato)
+    if(parentElement) {
+      textEl = parentElement.plain(text);
+    } else {
+      textEl = new Text().plain(text);
+    }
+
+    textEl.font(fontAttr).attr({ lengthAdjust: 'spacingAndGlyphs' });
+  }
+
+  return textEl;
+}

package/charts/src/helpers/default-chart-colors.js

@@ -0,0 +1,17 @@
+
+export const default_colors = {
+  azzurro        : '#2387e2',
+  rosaScuro      : '#fc1484',
+  giallo         : '#f5a623',
+  verdeAcqua     : '#6dbebf',
+  lavanda        : '#9894fd',
+  carminio       : '#af373e',
+  verdeElettrico : '#54f25a',
+  verdeBlu       : '#167bac',
+  acqua          : '#00e6fb',
+  bluElettrico   : '#0b16e9',
+  oliva          : '#9dbf6d',
+  violaElettrico : '#c614fc',
+  lime           : '#d9f440',
+  rosaChiaro     : '#fea4f2',
+};

package/charts/src/helpers/legenda.js

@@ -0,0 +1,96 @@
+import { G } from '@svgdotjs/svg.js';
+import { createTextEl } from './create-text-element.js';
+
+export async function legenda(chartInstance, {
+
+  /** altezza legenda */
+  height = 20,
+
+  /** spazio tra gli elementi della legenda */
+  elements_gap = 20,
+
+  /** dimensioni delle forme della legenda */
+  lines_width = 20,
+  circles_radius = 20,
+
+  /** attributi svg.js dei font del testo della legenda (null utilizza default) */
+  fontAttrs = null,
+
+  /** percorso font file per textToPath */
+  fontFilePath = null,
+
+  /** elementi della legenda */
+  items = [],
+
+
+}) {
+
+  /**
+    elementi di default di items
+  */
+  const items_defaults = {
+
+    shape: 'line', // line || circle
+    attrs: {}, // attributi svg.js di shape
+    text: '__label__', // testo della voce
+  };
+
+  try {
+
+
+    if(!items.length) {
+      throw 'nessuna voce in `items`';
+    }
+
+    items = items.map(i => ({...items_defaults, ...i}));
+
+    const legendaGroup = new G();
+
+
+    let x = 0; // posizionamento x
+    for await (const voce of items) {
+
+      const thisGroup = legendaGroup.group();
+
+      if(voce.shape === 'line') {
+
+        thisGroup.line(
+          x, height  / 2,
+          x + lines_width, height  / 2
+        )
+          .attr(voce.attrs);
+        x = x + lines_width;
+
+      } else if (voce.shape === 'circle') {
+        thisGroup.circle(circles_radius)
+          .attr(voce.attrs)
+          .move(x, (height - circles_radius) / 2);
+
+        x = x + circles_radius;
+
+      } else {
+        throw `parametro 'shape' non corretto in una delle voci (${voce.shape})`;
+      }
+
+      // testo
+      const labelEl = await createTextEl(chartInstance, {
+          text: voce.text,
+          textFill: fontAttrs.fill?? '#000',
+          fontAttr: fontAttrs,
+          fontFilePath: fontFilePath,
+          parentElement: thisGroup
+        }),
+        labelBbox = labelEl.bbox();
+
+      labelEl.move(x + 5, (height - labelBbox.height) / 2);
+
+      x = legendaGroup.bbox().width + elements_gap;
+    }
+
+    return legendaGroup;
+
+  } catch(e) {
+    console.error( 'MinimoCharts → legenda', e ); // eslint-disable-line
+  }
+
+}

package/charts/src/helpers/parse-std-axis-opts.js

@@ -0,0 +1,95 @@
+// prima elaborazione e controlli delle impostazioni comuni a tutti i grafici con assi
+// NB non nel prototypoe della classe, va importato dove richiesto
+/*
+  l'argomento params è un oggetto che deve contenere i parametri con cui vengono effettuati i vari calcoli:
+    width, height, ecc... (vedi default)
+
+    values è un array flat contentente tutti i valori da rappresentare
+
+  restituisce un offetto `parsed` con i nuovi parametri calcolati
+*/
+
+export function parseStdAxisOpts(params = {} ) {
+
+  try {
+
+
+
+    const parsed = {};
+
+    // default
+    params = {
+      max_value: null,
+      min_value: null,
+      values: [], // array flat dei valori per il calcolo di maxValues e minValues, qualora fossero null
+      legenda: null,
+      padding: 0, // spazio intorno ai bordi del grafico
+      width: null, // width e height non possono essere null, vanno verificate prima
+      height: null,
+      eti_asseX_height: null, // non può essere null, va verificato prima
+      eti_asseY_width: null, // non può essere null, va verificato prima
+      stepY_count: null, // non può essere null, va verificato prima
+      stepX_count: null, // non può essere null, va verificato prima
+      ticksLength: 0,
+
+      ...params
+    };
+
+    ['width', 'height', 'eti_asseX_height', 'eti_asseY_width', 'stepY_count', 'stepX_count', 'ticksLength']
+      .forEach(key => {
+        if(params[key] == null) {
+          throw `‘${key}’ non può essere null`;
+        }
+      });
+
+
+
+    // =>> PARAMETRI  calcolati
+    //---------------
+
+    // calcolo valore massimo dei dati se non già impostato in precedenza
+    if(params.max_value == null) {
+      parsed.max_value = Math.max(0, ...params.values.flat());
+    } else {
+      parsed.max_value = params.max_value;
+    }
+
+    // calcolo valore minimo dei dati se non già impostato in precedenza
+    if(params.min_value == null) {
+      parsed.min_value = Math.min(parsed.max_value, ...params.values.flat().filter(v => v != null));
+    } else {
+      parsed.min_value = params.min_value;
+    }
+
+    const legenda_height = params.legenda.height?? 0;
+    const gap_legenda = legenda_height? 10 : 0; // spazio tra legenda e grafico
+
+    // =>> chart area
+    // coordinate e dimensioni del rettangolo interno all'svg entro cui viene disegnato il grafico
+    // i lati sx e inferiore corrispondono agli assi
+    parsed.chart_area = {
+      top       : legenda_height + gap_legenda + params.padding, // coordinata y superiore
+      right     : params.width - params.padding, // coordinata x dx
+      bottom    : params.height - params.eti_asseX_height - params.ticksLength - params.padding, // coordinata y inferiore
+      left      : params.eti_asseY_width + params.ticksLength + params.padding // coordinata x sx
+    };
+    parsed.chart_area.width = parsed.chart_area.right - parsed.chart_area.left;
+    parsed.chart_area.height = parsed.chart_area.bottom - parsed.chart_area.top;
+
+    // valore di ogni step asse y
+    // (usato per il calcolo delle etichette dell'asse Y)
+    parsed.stepY_value = (parsed.max_value - parsed.min_value) / params.stepY_count;
+
+    // lunghezza di ogni step asse y
+    parsed.stepY_size = parsed.chart_area.height / params.stepY_count;
+
+
+    parsed.stepX_size = parsed.chart_area.width / (params.stepX_count - 1);
+
+
+    return parsed;
+
+  } catch(e) {
+    console.error( 'MinimoCharts → parseStdOpts', e ); // eslint-disable-line
+  }
+}

package/charts/src/helpers/svg-text-to-path.js

@@ -0,0 +1,45 @@
+// https://stackblitz.com/edit/vitejs-vite-acphht?file=main.js
+
+import opentype from 'opentype.js';
+
+/*
+// Example usage:
+const fontUrl = './Rubik Moonrocks.ttf';
+const text = 'Hello, World!';
+const fontSize = 16; // in points
+textToSvgPath(fontUrl, text, fontSize)
+  .then(({ svgPathData, svg }) => {
+    //console.log(svgPathData); // SVG path data string
+    console.log(svg); // SVG element as a string
+  })
+  .catch((err) => console.error(err));
+ */
+
+// Function to load the font and convert text to SVG path
+// vedi ada-frontend/ada-charts/test/textToPath-test.mjs
+
+export async function textToSvgPath(fontUrl, text, fontSize) {
+  try {
+    const font = await opentype.load(fontUrl);
+
+    // Define the x and y coordinates where the text should start
+    const x = 0;
+    const y = 50;
+
+    // Get a path representing the text
+    const path = font.getPath(String(text), x, y, fontSize);
+
+    // Convert the path to an SVG path data string
+    const pathData = path.toPathData();
+
+    // Alternatively, convert the path to an SVG
+    const pathElementString = path.toSVG();
+
+    return { pathData, pathElementString };
+
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('textToSvgPath - font loading error:', err);
+    throw err;
+  }
+}