@massimo-cassandro/minimo 1.18.1 → 1.18.3

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/src/charts/settimanale-mensile-src/costruzione-assi.js

@@ -0,0 +1,212 @@
+// costruisce un sistema di assi cartesiani
+// TODO da unificare con ada-frontend/ada-charts/src/components/cartesian-axis.js
+
+export async function costruzioneAssi({
+  cfg,     // oggetto cfg come quello indicato in `charts/andamento-annuale-src/defaults.js`
+  xLabels, // array con le etichette dell'asseX
+  adaChartIstance  // istanza classe
+}) {
+
+  try {
+
+    // =>> ASSE Y
+    // *****************************************
+    const yAxisGroup = cfg.svgCanvas.group();
+    yAxisGroup
+      .attr({ 'data-cfg.debug-info': cfg.debug? 'Gruppo Asse Y' : null })
+      .line(
+        cfg.chart_area.left, cfg.chart_area.top,
+        cfg.chart_area.left, cfg.chart_area.bottom
+      )
+      .attr({
+        'data-cfg.debug-info': cfg.debug? 'Asse Y' : null,
+        class: cfg.axisClassName, // se il valore è null l'attributo viene ignorato
+        ...cfg.axisAttrs
+      });
+
+
+    // =>> ticks ed etichette asse Y (dal basso verso l'alto)
+    const ticksYGroup = yAxisGroup.group().attr({
+      'data-cfg.debug-info': cfg.debug? 'Gruppo ticks Asse Y' : null,
+      class: cfg.ticksClassName, // se il valore è null l'attributo viene ignorato
+    });
+    const labelsYGroup = yAxisGroup.group().attr({
+      'data-cfg.debug-info': cfg.debug? 'Gruppo etichette Asse Y' : null,
+      class: cfg.labelYClassName,
+    });
+
+    cfg.gridGroup = null; // inserita in cfg per poter essere riposizionata
+    if(cfg.horizGrid) {
+      cfg.gridGroup = cfg.svgCanvas.group().attr({
+        'data-cfg.debug-info': cfg.debug? 'Gruppo griglia' : null
+      });
+    }
+
+    for await (const stepIdx of Array.from(Array(cfg.stepY_count + 1).keys())) {
+
+      const y = cfg.chart_area.bottom - (cfg.stepY_size * stepIdx)
+        ,label = cfg.labelYFormatter(cfg.stepY_value * stepIdx);
+
+      // =>> ticks Y
+      ticksYGroup
+        .line(
+          cfg.chart_area.left - cfg.ticksLength, y,
+          cfg.chart_area.left, y
+        )
+        .attr({
+          'data-cfg.debug-info': cfg.debug? 'Ticks asse X' : null,
+          ...cfg.ticksAttrs
+        });
+
+      // =>> etichette Y
+      const [label_bbox, labelEl] = await adaChartIstance.createTextEl ({
+        text: label,
+        textFill: cfg.labelYAttrs.fill?? '#000',
+        fontAttr: cfg.labelYAttrs,
+        fontFilePath: cfg.labelYFontFilePath,
+        parentElement: labelsYGroup
+      });
+
+      labelEl.move(
+        cfg.chart_area.left - cfg.ticksLength - 2 - label_bbox.width, // 2 è un distanziatore tra l'etichetta e la linea
+        y - label_bbox.height / 2
+      );
+
+      // =>> griglia orizzontale
+      if(cfg.horizGrid && stepIdx > 0) { // la prima linea coincide con l'asse X
+        cfg.gridGroup.line(
+          cfg.chart_area.left, y,
+          cfg.chart_area.right, y
+        )
+          .attr(cfg.horizGridAttrs);
+      }
+
+    } // end for await stepIdx
+
+    // =>> titolo asse Y
+    if(cfg.asseYTitle) {
+      const [title_bbox, titleEl] = await adaChartIstance.createTextEl ({
+        text: cfg.asseYTitle,
+        textFill: cfg.asseYTitleAttrs.fill?? '#000',
+        fontAttr: cfg.asseYTitleAttrs,
+        fontFilePath: cfg.asseYTitleFontFilePath,
+        parentElement: yAxisGroup
+      });
+
+      titleEl.move(
+        cfg.padding - (title_bbox.width / 2) + (title_bbox.height / 2),
+        (cfg.chart_area.bottom - title_bbox.height) / 2
+      )
+        .rotate(-90)
+      ;
+    }
+
+
+
+    // =>> ASSE X
+    // *****************************************
+    const xAxisGroup = cfg.svgCanvas.group();
+    xAxisGroup
+      .attr({ 'data-cfg.debug-info': cfg.debug? 'Gruppo Asse X' : null })
+      .line(
+        cfg.chart_area.left, cfg.chart_area.bottom,
+        cfg.chart_area.right, cfg.chart_area.bottom
+      )
+      .attr({
+        'data-cfg.debug-info': cfg.debug? 'Asse X' : null,
+        class: cfg.axisClassName,
+        ...cfg.axisAttrs
+      });
+
+    // =>> ticks, etichette ecc asse X (da sinistra a destra)
+    const ticksXGroup = xAxisGroup.group().attr({
+      'data-cfg.debug-info': cfg.debug? 'Gruppo ticks Asse X' : null,
+      class: cfg.ticksClassName,
+    });
+    const labelsXGroup = xAxisGroup.group().attr({
+      'data-cfg.debug-info': cfg.debug? 'Gruppo etichette Asse X' : null,
+      class: cfg.labelXClassName,
+    });
+
+
+    let labelIdx = 0;
+
+    // coordinata y per il posizionamentoi delle etichette
+    const labelY = cfg.chart_area.bottom + cfg.ticksLength + 2;
+
+    // Y del blocco etichette (comprese le etichette stesse) per utilizzo in altre parti dello script
+    cfg.xLabelsEndY = 0;
+
+    for await (const thisLabel of xLabels) {
+      const x = cfg.chart_area.left + (cfg.stepX_size * labelIdx);
+
+      // =>> ticks X
+      ticksXGroup
+        .line(
+          x, cfg.chart_area.bottom + cfg.ticksLength,
+          x, cfg.chart_area.bottom
+        )
+        .attr({
+          'data-cfg.debug-info': cfg.debug? 'Ticks asse X' : null,
+          ...cfg.ticksAttrs
+        });
+
+      // =>> etichette X
+      if(!cfg.labelXShowEvensOnly || thisLabel % 2 === 0 ) {
+        const [label_bbox, labelEl] = await adaChartIstance.createTextEl ({
+          text: thisLabel,
+          textFill: cfg.labelXAttrs.fill?? '#000',
+          fontAttr: cfg.labelXAttrs,
+          fontFilePath: cfg.labelXFontFilePath,
+          parentElement: labelsXGroup
+        });
+
+        labelEl.move(
+          x - label_bbox.width / 2,
+          labelY
+        );
+
+        // per la seconda riga di etichette
+        cfg.xLabelsEndY = Math.max(cfg.xLabelsEndY, labelY + label_bbox.height);
+      }
+
+      // TODO sotto griglia verticale
+
+      // =>> griglia verticale
+      if(cfg.vertGrid && labelIdx > 0) { // la prima linea coincide con l'asse Y
+        cfg.gridGroup.line(
+          x, cfg.chart_area.bottom,
+          x, cfg.chart_area.top
+        )
+          .attr(cfg.vertGridAttrs);
+      }
+
+
+      labelIdx++;
+
+    } // end for await thisLabel
+
+
+    // =>> titolo asse X
+    if(cfg.asseXTitle) {
+      const [title_bbox, titleEl] = await adaChartIstance.createTextEl ({
+        text: cfg.asseXTitle,
+        textFill: cfg.asseXTitleAttrs.fill?? '#000',
+        fontAttr: cfg.asseXTitleAttrs,
+        fontFilePath: cfg.asseXTitleFontFilePath,
+        parentElement: xAxisGroup
+      });
+
+      titleEl.move(
+        cfg.chart_area.left + (cfg.chart_area.width - title_bbox.width) / 2,
+        cfg.height - cfg.padding - title_bbox.height
+      );
+
+    }
+
+    return cfg;
+
+  } catch(e) {
+    console.error( 'AdaCharts → costruzioneAssi', e ); // eslint-disable-line
+  }
+}

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/src/charts/settimanale-mensile-src/costruzione-linee.js

@@ -0,0 +1,101 @@
+export function costruzioneLinee(cfg) {
+
+  // area range positivo negativo
+  const rangeScenari = cfg.svgCanvas.group().attr({
+    'data-cfg.debug-info': cfg.debug? 'Range positivo-negativo' : null
+  });
+  if(cfg.mostraRangeScenari) {
+    rangeScenari
+      .path(
+        'M ' +
+        cfg.coords.budget_positivo.map(item => `${item.join(',')}`).join(' L') +
+        cfg.coords.budget_negativo.toReversed().map(item => `L${item.join(',')}`).join(' ') +
+        ' Z'
+      )
+      .attr({
+        ...cfg.rangeScenariAttrs
+
+      });
+  }
+  // linee (opzionali) bordi negativo e positivo
+  if(Object.keys(cfg.lineeRangeScenari).length) {
+    rangeScenari
+      .polyline(cfg.coords.budget_positivo)
+      .attr(cfg.lineeRangeScenari);
+
+    rangeScenari
+      .polyline(cfg.coords.budget_negativo)
+      .attr(cfg.lineeRangeScenari);
+
+  }
+
+  // spostamento in primo piano della griglia, sopra il range
+  cfg.gridGroup.front();
+
+  cfg.lineeGroup = cfg.svgCanvas.group()
+    .attr({
+      'data-cfg.debug-info': cfg.debug? 'Linee' : null
+    });
+
+
+  // linee
+  [
+    {
+      data         : cfg.coords.budget_standard,
+      attrs        : cfg.budget_standard_line_attrs,
+      points_attrs : cfg.budget_standard_points_attrs,
+      debug_info   : 'Budget standard'
+    },
+    {
+      data         : cfg.coords.consolidato_prec,
+      attrs        : cfg.consolidato_prec_line_attrs,
+      points_attrs : cfg.consolidato_prec_point_attrs,
+      debug_info   : 'consolidato anno prec.'
+    },
+    {
+      data         : cfg.coords.consolidato,
+      attrs        : cfg.consolidato_line_attrs,
+      points_attrs : cfg.consolidato_points_attrs,
+      debug_info   : 'consolidato'
+    },
+
+    ...(
+      cfg.showConsolidatoForecast
+        ?  [{
+          data         : cfg.coords.consolidato_forecast,
+          attrs        : cfg.consolidato_forecast_line_attrs,
+          points_attrs : cfg.consolidato_forecast_point_attrs,
+          debug_info   : 'consolidato forecast'
+        }]
+        : []
+    )
+  ].forEach(line => {
+
+
+    cfg.lineeGroup
+      .polyline(line.data)
+      .attr({...line.attrs, fill: 'none'});
+
+    if(Object.keys(line.points_attrs??{}).length) {
+
+
+      const thisPointsGroup = cfg.lineeGroup.group()
+        .attr({
+          'data-cfg.debug-info': cfg.debug? `Punti ${line.debug_info}` : null,
+          ...{...line.points_attrs, r: null, cx: null, cy: null},
+        });
+
+      line.data.forEach(point => {
+        thisPointsGroup.circle({
+          r: line.points_attrs.r,
+          cx: point[0],
+          cy: point[1]
+        });
+      });
+    }
+  });
+
+
+
+  return cfg;
+}

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/src/charts/settimanale-mensile-src/defaults.js

@@ -0,0 +1,185 @@
+export const default_opts = {
+  /** mostra info utile per il debug */
+  debug: false,
+
+  /** 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` o `height` sono `null`,
+    quelli mancanti vengono ricavati dallaìe dimensioni del container
+  */
+  width: null,
+  height: null,
+
+  /** TODO resizeObserver
+    Se true, il grafico viene ricalcolato al variare delle dimensioni del container (richiesto)
+    il parametro `width` anche se impostato, viene ignorato
+  */
+  resizeObserver: false,
+
+  /** attributi facoltativi per l'svg */
+  svgAttrs: {},
+
+  /** griglia orizzontale e verticale */
+  horizGrid: true,
+  horizGridAttrs: {},
+
+  vertGrid: true,
+  vertGridAttrs: {},
+
+  /** settimanale o mensile */
+  modo: 'settimanale',
+
+  /**  spazio extra attorno al bordo */
+  padding: 10,
+
+  /**  suddivisioni asse Y */
+  stepY_count: 4,
+
+  /**  px, altezza o larghezza ticks (secondo l'orientamento) */
+  ticksLength: 5,
+
+  /**  parametri legenda (vedi componente ada-charts/src/components/legenda.js) */
+  legenda: {},
+
+  /**
+    larghezza area etichette asse y
+  */
+  eti_asseY_width: 60,
+
+  /**  altezza area etichette asse x */
+  eti_asseX_height: 30,
+
+  /** titoli assi */
+  asseYTitle: null,
+  asseYTitleAttrs: null,
+  asseYTitleFontFilePath: null,
+
+  asseXTitle: null,
+  asseXTitleAttrs: null,
+  asseXTitleFontFilePath: null,
+
+  /**
+    solo settimanale.
+    la settimana zero corrisponde ai dati al 31/12 dell'anno precedente a quello in esame
+    se true la settimana zero non viene rappresentata nel grafico
+    e l'origine x del grafico corrisponde alla settimana 1
+    (il motivo è che la settimana 0 ha generalmente un valore molto più elevato
+    degli altri e rende il grafico illeggibile)
+  */
+  skipWeek0: true,
+
+  /** evidenzia la griglia verticale corrispondente alla settimana / mese correnti */
+  showCurrent: true,
+  currentWeekAttrs: {},
+  currentMonthAttrs: {},
+
+  /**
+    Aree di evidenziazione dei mesi (settimanale)
+  */
+  monthsAreasAttrs: {},
+
+  /**  se true mostra un area di relativa ai valori min/max degli scenari */
+  mostraRangeScenari: true,
+  rangeScenariAttrs: {},
+
+  /**
+    se `lineeRangeScenari` non è un oggetto vuoto, vengono mostrate
+    le linee positive/negativo secondo gli attributi svg.js indicati.
+    Questa opzione è indipendente da `mostraRangeScenari`
+  */
+  lineeRangeScenari: {},
+
+  /**  anno esaminato */
+  anno: new Date().getFullYear(),
+
+  /**  parametri infoBox (vedi componente) */
+  infoBoxItems: null,
+  infoBoxPositionRefs: null,
+
+  /**
+    array dati
+
+    Ogni elemento deve avere questa struttura
+    {
+      w: <num>,   // numero settimana (se settimanale)
+      m: <num>,   // numero mese (se mensile)
+
+      s: <num>,   // valore scenario standard
+      p: <num>,   // valore scenario positivo
+      n: <num>,   // valore scenario negativo
+      c: <num>,   // valore consolidato anno corrente (può essere null)
+      cp: <num>,   // valore consolidato anno precedente
+      cf: <num>    // valore consolidato forecast (può non essere presente o null)
+    }
+  */
+  chartData: [],
+
+  /**
+    classi e attributi dei vari elementi.
+    Per gli attributi, ogni variabile è un oggetto di attributi svg.js, es:
+
+    {
+      stroke: '#414141',
+      'stroke-width': 1,
+      'shape-rendering': 'crispEdges',
+
+      // oppure
+      class: 'xxxx'
+    }
+
+  */
+  axisAttrs: {},
+
+  ticksAttrs: {},
+
+  labelXAttrs: {}, // contiene gli attributi fonts (come in AdaCharts.defaults.font) e l'attributo `fill`
+  labelXFontFilePath: null,  // percorso font per textToPath
+  labelXShowEvensOnly: false,
+
+  // attributi per la seconda riga di etichette X, in sua assenza il default è dati dagli attributi della prima riga
+  label2XAttrs: null,
+  labelX2FontFilePath: null,  // percorso font per textToPath
+  label2TopGap: 2, // spazio aggiuntivo tra la prima e lasecondas riga di etichette
+
+  labelYAttrs: {}, // contiene gli attributi fonts (come in AdaCharts.defaults.font) e l'attributo `fill`
+  labelYFontFilePath: null,  // percorso font per textToPath
+
+  /**
+    attributi delle varie linee
+    se l'oggetto `line***PointsAttrs`, dove presente, non è vuoto,
+    viene aggiunto un cerchio ad ogni punto della linea
+    (NB: non aggiungere `cx` o cy`)
+  */
+  budget_standard_line_attrs: {},
+  budget_standard_points_attrs: {},
+
+  budget_positivo_line_attrs: {},
+  budget_negativo_line_attrs: {},
+
+  consolidato_line_attrs: {},
+  consolidato_points_attrs: {},
+
+  consolidato_prec_line_attrs: {},
+  consolidato_prec_point_attrs: {},
+
+  // TODO verificare
+  showConsolidatoForecast: false, // porzione di consolidato nomn ancora maturato (si usa il budget)
+  consolidato_forecast_line_attrs: {},
+  consolidato_forecast_point_attrs: {},
+
+
+  /**
+    Funzione per formattare le etichette dei valori dell'asse Y.
+    Null per nessuna eleborazione.
+    La funzione di default assume che il valore sia di tipo numerico
+  */
+  labelYFormatter: labelValue =>  Math.ceil(labelValue / 1e3)
+    .toLocaleString('it-IT', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }) +
+    (labelValue > 0? '\u2009K' : ''), // \u2009 = thin space (https://www.compart.com/en/unicode/U+2009)
+};

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/src/charts/settimanale-mensile-src/display-current.js

@@ -0,0 +1,27 @@
+// evidenziazione settiman / mese correnti (solo per anno in corso)
+
+export function displayCurrent(cfg) {
+
+  if(cfg.showCurrent && cfg.anno === new Date().getFullYear()) {
+
+    if(cfg.isSettimanale) {
+
+      const x = cfg.chart_area.left + (cfg.currentWeek - 1) * cfg.stepX_size;
+      cfg.svgCanvas
+        .line(
+          x, cfg.chart_area.top,
+          x, cfg.chart_area.bottom
+        )
+        .attr({
+          'data-cfg.debug-info': cfg.debug? 'Settimana corrente' : null,
+          ...cfg.currentWeekAttrs
+        });
+
+    } else {
+
+      // TODO showCurrent per mese
+    }
+  }
+
+  return cfg;
+}

package/charts/TODO charts/1a-vers DA RIFATTORIZZARE/src/charts/settimanale-mensile-src/grid-areas.js

@@ -0,0 +1,129 @@
+// aree e ed etichette mesi
+import { getWeekOfDate } from '../../week-utils.js';
+
+export async function gridAreas(cfg, adaChartIstance) {
+
+  // =>> settimane di inizio e fine, numero settimane, coordinata x e larghezza dei mesi aull'asse X,
+  //
+  cfg.months_weeks = [];
+  for(let i = 0; i < 12; i++) {
+
+    // NB: i (mese) è base 0, start_week e end_week sono base 1
+
+    let start_week = i === 0 ? (cfg.skipWeek0? 1 : 0) : getWeekOfDate({date: new Date(cfg.anno, i, 1)}),
+      end_week = i=== 11? cfg.weeks : getWeekOfDate({date: new Date(cfg.anno, i+1, 0)});
+
+    // se due mesi adiacenti hanno settimane di fine e inizio diverse
+    // la settimana intermedia viene suddivisa a metà
+
+    if(i > 0 && start_week > cfg.months_weeks[i-1].end_week) {
+      cfg.months_weeks[i-1].end_week += .5;
+      start_week -= .5;
+    }
+
+    cfg.months_weeks.push({
+      // mese: i,
+      start_week: start_week,
+      end_week: end_week,
+    });
+
+  }
+
+  // post elaborazione, aggiunta elementi calcolati
+  // viene eseguita in modo differito per evitare disallineamenti nella correzione
+  // dei mesi con inizio e fine a metà settimana
+  cfg.months_weeks = cfg.months_weeks.map(mese => {
+
+    const weeks_count = mese.end_week - mese.start_week;
+    return {
+      ...mese,
+      weeks_count: weeks_count,
+
+      // coordinata x iniziale della porzione mese dell'asse X
+      x: cfg.chart_area.left + ((mese.start_week - 1) * cfg.stepX_size),
+      width:weeks_count * cfg.stepX_size
+    };
+  });
+
+
+  // if(cfg.debug) {
+  //   const lineeControlloMesi = cfg.svgCanvas.group().attr({
+  //       'data-cfg.debug-info': cfg.debug? 'Linee controllo' : null,
+  //       stroke: '#c00',
+  //       'stroke-width': 2
+  //     }),
+  //     y1 = cfg.chart_area.bottom - 30,
+  //     y2 = cfg.chart_area.bottom + 50;
+
+  //   cfg.months_weeks.forEach((mese, idx) => {
+
+  //     lineeControlloMesi.line(
+  //       mese.x,
+  //       y1,
+  //       mese.x,
+  //       y2
+  //     );
+
+  //     if(idx === 11) {
+  //       lineeControlloMesi.line(
+  //         mese.x + mese.width ,
+  //         y1,
+  //         mese.x + mese.width ,
+  //         y2
+  //       );
+  //     }
+  //   });
+  // }
+
+
+
+  // =>> etichette mesi (in mancanza di `label2XAttrs` usano le stesse impostazioni delle altre etichette asse X, `labelXAttrs`)
+  const etiMesiGroup = cfg.svgCanvas.group().attr({
+    'data-cfg.debug-info': cfg.debug? 'Gruppo etichette mesi asse X' : null,
+  });
+
+  if(cfg.label2XAttrs == null || !Object.keys(cfg.label2XAttrs).length) {
+    cfg.label2XAttrs = cfg.labelXAttrs;
+  }
+  if(!cfg.labelX2FontFilePath) {
+    cfg.labelX2FontFilePath = cfg.labelXFontFilePath;
+  }
+
+
+  let meseIdx = 0;
+  for await (const thisMonth of cfg.months_weeks) {
+
+    const [label_bbox, labelEl] = await adaChartIstance.createTextEl ({
+      text: cfg.mesi[meseIdx],
+      textFill: cfg.label2XAttrs.fill?? '#000',
+      fontAttr: cfg.label2XAttrs,
+      fontFilePath: cfg.labelX2FontFilePath,
+      parentElement: etiMesiGroup
+    });
+
+    labelEl.move(
+      thisMonth.x + (thisMonth.width / 2) - (label_bbox.width / 2),
+      cfg.xLabelsEndY + cfg.label2TopGap// il numero è un distanziatore extra tra le due righe di etichette
+    );
+    meseIdx++;
+  }
+
+  // =>> aree colorate mesi
+  const areeMesiGroup = cfg.svgCanvas.group().attr({
+    'data-cfg.debug-info': cfg.debug? 'Gruppo aree mesi' : null,
+    ...cfg.monthsAreasAttrs
+  })
+    .back(); // mette dietro al resto
+
+
+  cfg.months_weeks
+    .filter((mese, idx) => idx % 2)
+    .forEach(mese => {
+      areeMesiGroup
+        .rect(mese.width, cfg.chart_area.height)
+        .move(mese.x, cfg.chart_area.top);
+    });
+
+
+  return cfg;
+}