@massimo-cassandro/minimo 1.19.0 → 1.19.1

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/index.js

@@ -1,92 +0,0 @@
-// NB: i grafici non utilizzati in questa verione della brochure sono disabilitati
-
-import { pie } from './src/charts/pie.js';
-// import { hbars } from './src/charts/hbars.js';
-import { signalBars } from './src/charts/signal-bars.js';
-import { ratingDisplay } from './src/charts/rating-display.js';
-// import { radialBars } from './src/charts/radial-bars.js';
-import { settimanaleMensile } from './src/charts/settimanale-mensile.js';
-import { mcn } from './src/charts/mcn.js';
-import { lines } from './src/charts/lines.js';
-import { bars } from './src/charts/bars.js';
-
-import { utils } from './src/chart-utils.js';
-import { default_colors } from './src/default-chart-colors.js';
-import { createSvgCanvas } from './src/create-svg-canvas.js';
-import { createTextEl } from './src/create-text-element.js';
-
-import { legenda } from './src/components/legenda.js';
-import { cartesianAxis } from './src/components/cartesian-axis.js';
-
-class AdaCharts {
-
-  constructor(customParams = {}) {
-
-    this.defaults??= {};
-
-    this.defaults.colors = customParams.defaults?.colors?? Object.values(default_colors);
-
-    this.defaults.font = {
-
-      // pattern per defaults.font
-      // i valori commentati sono quelli di default
-      // se non vanno modificati, non serve impostarli
-      ...{
-        // family: 'sans-serif',
-        // size: 14,
-        // stretch: 'normal',
-        // style: 'normal',
-        // variant: 'normal',
-        // weight: 400
-      },
-      ...(customParams.defaults?.font?? {})
-    };
-
-
-    /** se true converte i font in tracciati */
-    // NB: non usare per versioni browser (usa node)
-    this.textToPath = customParams.textToPath?? false;
-
-    this.debug = customParams.debug?? false;
-
-    // istanza svgjs per web
-    this.createSvgCanvas = customParams.createSvgCanvas?? createSvgCanvas;
-
-    // parametri generati condivisi
-    this.sharedParams = {};
-  }
-
-  setSharedParams(key, value = null) {
-    this.sharedParams[key] = value;
-  }
-
-  getSharedParams(key) {
-    return this.sharedParams[key];
-  }
-
-}
-
-AdaCharts.prototype.utils = utils;
-AdaCharts.prototype.createTextEl = createTextEl;
-AdaCharts.prototype.legenda = legenda;
-AdaCharts.prototype.cartesianAxis = cartesianAxis;
-
-
-AdaCharts.prototype.pie = pie;
-// AdaCharts.prototype.hbars = hbars;
-AdaCharts.prototype.signalBars = signalBars;
-AdaCharts.prototype.ratingDisplay = ratingDisplay;
-// AdaCharts.prototype.radialBars = radialBars;
-AdaCharts.prototype.settimanaleMensile = settimanaleMensile;
-AdaCharts.prototype.mcn = mcn;
-AdaCharts.prototype.lines = lines;
-AdaCharts.prototype.bars = bars;
-
-
-export { AdaCharts };
-
-
-// esportazione singoli metodi
-// https://cube.dev/blog/how-to-build-tree-shakeable-javascript-libraries
-// https://www.freecodecamp.org/news/what-is-a-pure-function-in-javascript-acb887375dfe/
-// export const barsChart = /* #__PURE__ */ AdaCharts.bars;

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/src/charts/hbars.js

@@ -1,356 +0,0 @@
-// horizontal bars
-
-export async function hbars({
-
-  /** colori specifici */
-  colors = null,
-
-  /** container (selettore o elemento DOM), se null viene restituito il codice SVG */
-  container = null,
-
-  /**
-    larghezza e altezza del grafico (px),
-    Se il container è presente e i parametro `width` e `height` sono `null`,
-    vengono utilizzate le dimensioni  del container.
-    Se uno dei due valori non è impostato o ricavabile, viene generato un errore.
-    NB: il padding del container viene considerato nelle dimensioni del grafico,
-    è preferibile non impostarlo.
-    Il valore 'auto' di height fa sì che l'altezza dell'svg sia calcolata sulla base
-    del numero di barre e dei valori `barsGap` e `barsHeight`
-  */
-  width = null, // null || <value>
-  height = 300, // <value> || null || 'auto'
-
-  /** valori numerici da associare alle barre del grafico */
-  values = [],
-
-  /** etichette delle varie barre, l'indice di ogni elemento corrisponde a quello di `values` a cui si riferisce */
-  labels = [],
-
-
-  /** Indica se mostrare o no i valori delle barre (mostrati dopo la barra) */
-  showValues = true,
-
-  /**
-    Modalità di rappresentazione del valore mostrato.
-    Se 'percent', il valore mostrato è la percentuale rispetto al totale dei valori
-  */
-  showValuesAs = 'number', // number, numbers, percent, euro
-
-  /** In caso di visualizzazione dei valori (showValues === true), numero di decimali da mostrare */
-  showValuesFractionDigits = 2,
-
-  /** In caso di visualizzazione dei valori (showValues === true), formattazione locale da utilizzare */
-  showValuesLocale =  'it-IT',
-
-  /**
-    Impostazioni font per le etichette e i valori
-    Impostare solo se non si vogliono usare i colori di default
-    se impostato è un oggetto analogo a quello definito in index.js
-    Possono essere impostati solo i valori che si vogliono modificare
-  */
-  labelsFont = null,
-  valuesFont = null,
-
-  /** path del file font per la conversione in tracciati */
-  labelsFontFilePath = null,
-  valuesFontFilePath = null,
-
-  /** text fill color */
-  labelsFill = '#000',
-  valuesFill = '#000',
-
-  /** direzione della barra */
-  barsDirection = 'right', // right || left
-
-  /** larghezza minima labels */
-  minLabelslWidth = 0,
-
-  /** spazio tra un'etichetta di testo e il grafico */
-  textBarsGap = 8,
-
-  /** spazio tra una barra e la successiva */
-  barsGap = 10,
-
-  /** altezza barre */
-  barsHeight = 40,
-
-  /** corner radius */
-  barsCornerRadius = 5,
-
-  /** spessore e colore traccia (0 per non visualizzare) */
-  barsStrokeWidth = 0,
-  barsStrokeColor = '#000',
-
-  /** se false le classi vengono ignorate */
-  useClasses = false,
-
-  /** array di eventuali classi da associare ai corrispondenti valori in base al loro indice */
-  valClasses = null,
-
-  // TODO animazione
-  /** se true, attiva l'animazione */ // NB non attivo
-  // animazione      = false, // non implementato
-
-  /** frame per secondo dell'animazione */ // NB non attivo
-  // fps = 60
-}) {
-
-  try {
-
-    if(values.filter(v => isNaN(v)).length) {
-      throw 'There are non-numeric values';
-    }
-
-    if(!values.length) {
-      throw 'At least one value is needed';
-    }
-
-    if(isNaN(barsStrokeWidth)) {
-      throw '`barsStrokeWidth` must be a number';
-    } else {
-      barsStrokeWidth = +barsStrokeWidth;
-    }
-
-    const toRight = barsDirection === 'right';
-
-    [, width, height] = this.utils.parseContainer(container, width, height);
-
-
-    if(barsGap == null) {
-      throw '`barsGap` must be set';
-    }
-
-    if(height === 'auto') {
-      height = (values.length * barsHeight) +
-        ((values.length - 1) * barsGap) +
-        // la traccia insiste per metà sulla parte interna della barra, quindi va calcolata una sola volta
-        (values.length * barsStrokeWidth);
-
-      if(!barsHeight) {
-        throw 'With `height = \'auto\'`, `barsHeight` must be set';
-      }
-
-    } else { // determinazione altezza barre
-      barsHeight = (
-        height -
-        ((values.length - 1) * barsGap)
-      ) / values.length - barsStrokeWidth;
-    }
-
-
-    if(!width || !height) {
-      throw `Missing width and/or height: width: ${width}, height: ${height}`;
-    }
-
-    // colori forniti o di default
-    colors??= this.defaults.colors;
-
-    // fonts
-    labelsFont = {...this.defaults.font, ...(labelsFont??{}) };
-    valuesFont = {...this.defaults.font, ...(valuesFont??{}) };
-
-    // somma di tutti i valori per calcolo persentuale
-    const totValues = values.reduce((tot, current) => tot + current, 0);
-
-    // definizione etichette valori
-    let valueLabels = [];
-    if(showValues) {
-      valueLabels = values.map(v => {
-
-        if(showValuesAs === 'percent') {
-          v = v / totValues;
-        }
-
-        let labelStyle;
-        switch (showValuesAs) {
-          case 'number':
-          case 'numbers':
-            labelStyle =  {
-              style: 'decimal'
-            };
-            break;
-
-          case 'percent':
-            labelStyle =  {
-              style: 'percent'
-            };
-            break;
-
-          case 'euro':
-            labelStyle =  {
-              currency: 'EUR',
-              style: 'currency'
-            };
-            break;
-
-          // no default
-        }
-
-        return v.toLocaleString(showValuesLocale, {
-          minimumFractionDigits: showValuesFractionDigits,
-          maximumFractionDigits: showValuesFractionDigits,
-          ...labelStyle
-        });
-      });
-    }
-
-    const svgCanvas = this.createSvgCanvas(container); //.size(width, height);
-    svgCanvas.viewbox(0, 0, width, height);
-
-    // =>> etichette (labels) & etichette valori (valueLabels)
-    // calcolo dimensioni del testo per ricavare lo spazio utile per le barre
-    // e posizionamento delle etichette
-
-    // valori per il calcolo dellìingombro massimo
-    let max_labels_width = 0, max_value_labels_width = 0;
-
-    // posizionamento iniziale, dopo il rendering verrà ridefinito in base all'altezza del testo
-    let labelY = (barsHeight + barsStrokeWidth) / 2;
-    // valore provvisorio, verrà reimpostato a fine ciclo (deve tenere conto di tutte le etichette)
-    const labelX = toRight? 0 : width;
-
-    const labels_elements = [], value_labels_elements = []; // per allineamenti successivi
-
-
-
-    for await (const [idx,] of values.entries()) {
-
-      // svgCanvas.line(0, labelY, width, labelY).stroke({ width: 1, color: '#f06'}); // linea di riferimento per allineamento
-
-      const thisLabel = labels[idx],
-        thisValueLabel = valueLabels[idx];
-
-      if(thisLabel) {
-
-
-        let [bbox, labelEl] = await this.createTextEl({
-          text: thisLabel,
-          textFill: labelsFill,
-          fontAttr: {
-            ...labelsFont,
-            // 'text-anchor': toRight? 'end' : null
-          },
-          fontFilePath: labelsFontFilePath,
-          parentElement: svgCanvas
-        });
-
-        labelEl.move(labelX, labelY - (bbox.height/2));
-
-        max_labels_width = Math.max(max_labels_width, bbox.width, minLabelslWidth);
-
-        labels_elements.push({label: labelEl, w: bbox.width}); // per il riposizionamento X successivo
-      }
-
-      // etichette valori
-      if(thisValueLabel && showValues) {
-
-        let [bbox, labelEl] = await this.createTextEl({
-          text: thisValueLabel,
-          textFill: valuesFill,
-          fontAttr: {
-            ...valuesFont,
-            // 'text-anchor': toRight? null : 'end'
-          },
-          fontFilePath: valuesFontFilePath,
-          parentElement: svgCanvas
-        });
-
-        labelEl.move(labelX, labelY - (bbox.height/2));
-
-        max_value_labels_width = Math.max(max_value_labels_width, bbox.width);
-        value_labels_elements.push({label: labelEl, w: bbox.width});
-      }
-
-
-      labelY += barsHeight + barsStrokeWidth + barsGap;
-    } // end for values
-
-    // linea di riferimento per allineamento:
-    // svgCanvas.line(max_labels_width, 0, max_labels_width, height).stroke({ width: 2, color: '#4faa0d'});
-
-    // =>> riposizionamento `labels_elements`
-    // da sx a dx: allineate a destra sull'asse Y dell'etichetta più lunga
-    // da dx a sx: allineate a sinistra sull'asse Y della larghezza dell'svg - lunghezza etichetta più lunga
-    // NB da effettuare prima dell'aggiunta di `textBarsGap`
-    // if(this.textToPath) {
-
-    // NB VERSIONE che in modalità testo usa il metodo ax, non applicabile con i tracciati
-    // eliminato per avere un'unica versione
-    //   labels_elements.forEach(l => {
-    //     l.label.x(toRight? max_labels_width - l.w : width - max_labels_width);
-    //   });
-
-    // } else {
-    //   labels_elements.forEach(l => {
-    //     l.ax(toRight? max_labels_width : width - max_labels_width);
-    //   });
-    // }
-    labels_elements.forEach(l => {
-      l.label.x(toRight? max_labels_width - l.w : width - max_labels_width);
-    });
-
-
-
-    // =>> aggiunta `textBarsGap` a `max_labels_width` e `max_value_labels_width`
-    if(max_labels_width) {
-      max_labels_width += textBarsGap;
-    }
-    if(max_value_labels_width) {
-      max_value_labels_width += textBarsGap;
-    }
-
-    // =>> costruzione barre e posizionamento etichette valori
-
-    // dimensioni barre
-    const maxBarsWidth = width - max_labels_width - max_value_labels_width,
-      maxBarsValue = values.reduce((max, current) => max > current? max : current, 0);
-
-    let barY = barsStrokeWidth / 2;
-    values.forEach((v, idx) => {
-
-      const barWidth = (v / maxBarsValue * maxBarsWidth) - barsStrokeWidth,
-
-        barX = toRight? max_labels_width : width - barWidth - max_labels_width,
-        bar = svgCanvas.rect({
-          x: barX,
-          y: barY,
-          width: barWidth,
-          height: barsHeight,
-          fill: colors[idx]?? '#ccc',
-        })
-          .radius(barsCornerRadius);
-
-      if( barsStrokeWidth > 0 && barsStrokeColor) {
-        bar.stroke({ color: barsStrokeColor, width: barsStrokeWidth });
-      }
-
-      if(useClasses && valClasses[idx]) {
-        bar.addClass(valClasses[idx]);
-      }
-
-      // =>> riposizionamento value_labels_elements (vedi precedente =>> riposizionamento `labels_elements`)
-      const thisValueLabel = value_labels_elements[idx];
-      if(thisValueLabel != null && showValues) {
-        thisValueLabel.label.x(
-          toRight
-            ? max_labels_width + barWidth + textBarsGap
-            : barX - textBarsGap - thisValueLabel.w
-        )
-          .front();
-      }
-
-
-      barY += barsHeight + barsGap + barsStrokeWidth;
-    });
-
-    if(!container) {
-      return svgCanvas.svg();
-    }
-
-
-  } catch(e) {
-    console.error( 'AdaCharts → hbars', e ); // eslint-disable-line
-  }
-
-}

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/src/charts/pie.js

@@ -1,245 +0,0 @@
-
-export function pie({
-
-  /** container (selettore o elementio DOM), se null viene restituito il codice SVG */
-  container = null,
-
-  /** raggio del cerchio */
-  radius = 60,
-
-  /** raggio cerchio interno, da impostare nel caso si voglia creare un grafico a ciambella */
-  innerRadius = null,
-
-  /** valori da associare alle "fette" del grafico */
-  values = [],
-
-  /**
-    array dei colori delle fette da associare ai corrispondenti valori in base al loro indice.
-    Impostare solo se non si vogliono usare i colori di default
-  */
-  colors = null,
-
-  /** se false le classi vengono ignorate */
-  useClasses = false,
-
-  /** array di eventuali classi da associare ai corrispondenti valori in base al loro indice */
-  valClasses = null,
-
-  /** valore angolo (in gradi) da cui avviare il disegno */
-  startAt = 90,
-
-  /** verso del grafico */
-  clockwise = true,
-
-  /** se true, attiva l'animazione */ // NB non attivo
-  // animazione      = false, // non implementato
-
-  /** frame per secondo dell'animazione */ // NB non attivo
-  // fps = 60
-} = {}) {
-
-  // TODO animazione
-  const animazione = false;
-
-  try {
-
-    // colori forniti o di default
-    colors??= this.defaults.colors;
-
-    this.utils.parseContainer(container);
-
-    const svgCanvas = this.createSvgCanvas(container);
-
-
-    const isDonut = innerRadius != null
-      ,donutWidth = radius - innerRadius
-      ,baseColor = '#ccc' // colore neutro per gli elementi di sfondo
-      ,circleCenter = { x: radius, y: radius }
-
-      // restituisce l'attributo `d` dell'arco di cerchio descritto dall'angolo
-      // corrispondente alla percentuale data e alle percentuali del punto finale
-      ,generateAttrD = (params) => {
-
-        let d = [
-          `M${params.start.x},${params.start.y}`,
-          `A${radius},${radius}`,
-          0, //xAxisRotation,
-          (params.arcAngle <= 180 ? 0 : 1), // largeArcFlag
-          clockwise && params.arcAngle < 360? 1 : 0, // sweepFlag
-          `${params.end.x},${params.end.y}`,
-          ...(isDonut? [] : [
-            `L${circleCenter.x},${circleCenter.y}`,
-            'Z'
-          ])
-        ].join(' ');
-
-        return d;
-      }
-
-      // CALCOLO PARAMETRI
-      ,calcolaParametri = (perc, angolo_inizio) => {
-
-        let parametri = {};
-
-        // angolo corrispondente alla percentuale indicata
-        parametri.arcAngle = 360/100 * perc;
-
-        parametri.angolo_fine = clockwise? angolo_inizio - parametri.arcAngle :
-          angolo_inizio + parametri.arcAngle;
-
-        // questo non dovrebbe servire mai,
-        // ma potrebbe verificarsi per somma di arrotondamenti
-        angolo_inizio = angolo_inizio >= 360? Math.abs(360 - angolo_inizio) : angolo_inizio;
-        parametri.angolo_fine = parametri.angolo_fine >= 360? Math.abs(360 - parametri.angolo_fine) : parametri.angolo_fine;
-
-        if(perc === 100) {
-          angolo_inizio = 0;
-          parametri.angolo_fine = 359.9999;
-
-        } else if(perc === 0) {
-          parametri.angolo_fine = angolo_inizio;
-        }
-
-        // coordinate inizio e fine
-        parametri.start = this.utils.polarToCartesian(angolo_inizio, circleCenter, radius);
-        parametri.end = this.utils.polarToCartesian(parametri.angolo_fine, circleCenter, radius);
-
-        parametri.perc = perc; // serve per eliminare eventuali valori nulli
-        parametri.angolo_inizio = angolo_inizio; // per debug
-
-        // console.log(parametri);
-
-        return parametri;
-      }
-    ;
-
-
-
-    // determinazione sezioni della torta
-    let angolo_inizio = startAt; // angolo di partenza del grafico (viene aggiornato per ogni arco)
-    const totale = values.reduce((a,b) => a + b, 0),
-      pieSlices = values.map( (val, idx) => {
-        let params= calcolaParametri(val / totale * 100, angolo_inizio);
-        angolo_inizio = params.angolo_fine;
-
-
-        // associazione colore e classe
-        params.color = colors? colors[idx] : null;
-        params.className = (valClasses != null && useClasses)? valClasses[idx]?? null : null;
-
-        return params;
-      }).filter(item => item.perc > 0);
-
-
-    if(isDonut) {
-      svgCanvas.viewbox(-donutWidth/2, -donutWidth/2, radius * 2 + donutWidth, radius * 2 + donutWidth);
-    } else {
-      svgCanvas.viewbox(0, 0, radius * 2, radius * 2);
-    }
-
-    svgCanvas.circle({
-      ...(isDonut
-        ? {'stroke-width': donutWidth, stroke: baseColor,  fill: 'none'}
-        : {fill: baseColor}
-      ),
-      cx: radius,
-      cy: radius,
-      r: radius
-    });
-
-    const sectionsGroup = svgCanvas.group(useClasses? {class: 'mChart-pie-sections-wrapper'}: {});
-
-    if(!animazione) {
-
-      pieSlices.forEach(params => {
-        sectionsGroup.path(generateAttrD(params))
-          .attr({
-            ...(useClasses? {class: this.utils.classnames('mChart-pie-section', params.className)} : {}),
-            ...(isDonut
-              ? {'stroke-width': donutWidth, stroke: params.color, fill: 'none'}
-              : {fill: params.color}
-            )
-          });
-      });
-    }
-
-    if(!container) {
-      return svgCanvas.svg();
-    }
-  } catch(e) {
-    console.error( 'AdaCharts → pie', e ); // eslint-disable-line
-  }
-}
-
-
-
-// TODO animazione
-// if(animazione) {
-
-//   let idx = 0;
-
-//   const animazione_arco = () => {
-
-//     let animationRequest,
-//       parametri_arco=pieSlices[idx],
-//       arco, d, arco_path,
-//       this_perc = 0,
-//       start_timestamp = Date.now(),
-//       fine_animazione = false,
-//       elapsed, now,
-//       fps = fps,
-//       fpsInterval = 1000/fps;
-
-
-//     const step = () => {
-//       now = Date.now();
-//       elapsed = now - start_timestamp;
-
-//       if((this_perc >= parametri_arco.perc) ) {
-//         this_perc = parametri_arco.perc;
-//         fine_animazione = true;
-//       }
-
-//       // request another frame
-//       animationRequest = window.requestAnimationFrame(step);
-
-//       // if enough time has elapsed, draw the next frame
-//       if (elapsed > fpsInterval) {
-
-//         // Get ready for next frame by setting start_timestamp=now, but...
-//         // Also, adjust for fpsInterval not being multiple of 16.67
-//         start_timestamp = now - (elapsed % fpsInterval);
-
-//         if( this_perc === 0 ) {
-//           arco = generateArcPathTag(
-//             calcolaParametri(0, parametri_arco.angolo_inizio),
-//             colors[idx]
-//           );
-//           chart_container.insertAdjacentHTML('afterbegin', arco.chart_segment );
-//           arco_path = chart_container.querySelector(`.chart-arc.item-${idx}`);
-
-//         } else {
-//           arco = calcolaParametri(this_perc, parametri_arco.angolo_inizio);
-//           d = generateAttrD(arco);
-//           arco_path.setAttribute('d', d);
-//         }
-
-//         if(fine_animazione) {
-//           window.cancelAnimationFrame(animationRequest);
-//           idx++;
-//           if(idx < pieSlices.length) {
-//             animazione_arco();
-//           }
-//         } else {
-//           this_perc++;
-//         }
-//       }
-
-//     };// end step
-
-//     step();
-//   }; // end animazione_arco
-
-//   animazione_arco();
-
-// } // end if animazione