@massimo-cassandro/minimo 1.18.4 → 1.19.1

package/charts/TODO charts/docs/TODO.md

@@ -1 +0,0 @@
-riscrivere le midalità di calcolo di rating display

package/charts/TODO charts/docs/costruzione display rating.md

@@ -1,145 +0,0 @@
-# Display rating
-
-Il **display rating** raffigura un tachimetro la cui scala è suddivisa in un numero predefinito di porzioni uguali, ognuna corrispondente ad un *range* di valori. L'indicatore indica la porzione corrispondente al range di valori da rappresentare.
-
-![esempio](<costruzione display rating imgs/rating-display_esempio.svg>)
-
-> **Figura 1 - esempio**
-
-Dal punto di vista grafico, la scala è generata da tre circonferenze, e si estende su un angolo di 240° rispetto alla circonferenza esterna:
-
-![costruzione grafica](<costruzione display rating imgs/rating-display_costruzione grafica.svg>)
-
-> **Figura 2 - costruzione grafica con suddivisione in 4 o 5 porzioni**
-
-## Costruzione
-
-![costruzione](<costruzione display rating imgs/rating-display_costruzione.svg>)
-
-> **Figura 3 - costruzione scala**
-
-La scala (l'area in giallo) è costruita dall'unione di 3 circonferenze:
-
-* quella esterna, in blu con centro $A$ di coordinate note e raggio noto.  
-* Le due circonferenze interne i cui centri $B$ e $C$ sono disposti in modo equidistante lungo un'asse inclinata di $30^\circ$ rispetto all'asse orizzontale che contiene il punto $A$. La lunghezza del segmento $s$ (definito dall'utente) determina l'ampiezza finale della figura.
-
-La scala viene quindi suddivisa in un numero dato di porzioni. Nell'esempio di figura 4 è stata suddivisa in 4 porzioni, ma il numero può variare.
-
-![schema suddivisione in porzioni](<costruzione display rating imgs/rating-display_costruzione porzione.svg>)
-
-> **Figura 4 - porzione**
-
-L'obiettivo è ricavare le coordinate dei punti di ogni porzione ($D$, $E$, $F$ e $G$ nella figura 4), gli archi di cerchio $\overset{\frown}{DE}$ ed $\overset{\frown}{FG}$ e i due segmenti $\overline{EF}$ e $\overline{DG}$. Le rette che contengono i due segmenti passano per il centro $A$.
-
-L'angolo $\gamma$ corrisponde al gap tra una porzione e l'altra.
-
-Opzionalmente, possono essere costruiti dei *ticks* (vedi figura 2), ovvero dei prolungamenti del segmento iniziale di ogni porzione.
-
-## Sviluppo
-
-> NB tutti i valori fanno riferimento al sistema di coordinate SVG, in cui l'origine degli assi è collocata sul vertice in alto a sinistra del *viewbox*. Inoltre, a differenza del piano cartesiano standard, la direzione positiva dell'asse delle ordinate è orientata verso il basso.
-
-### Parametri iniziali
-
-
-> Il raggio della circonferenza esterna ($r_A$) e le coordinate del centro $A$ sono definite dai valori preimpostati, ovvero le dimensioni del file SVG ($w$ e $h$), l'eventuale padding ($p$) tra l'area del grafico vero e proprio e il *viewbox* del documento e l'eventuale bordo $m$ intorno al display (in grigio in figura 2): 
->
-> $r_A$ = $w / 2 - p - m$
->
-> $x_A$ = $w / 2$
->
-> $y_A$ = $h - (r_A \sin(30^\circ)) - 2p - m$ (\*)
-> 
-> *(\*) la traccia $m$ non viene rappresentata nella parte inferiore del display, quindi si tiene conto una sola volta del suo spessore. La coordinata $y_A$ del centro è data dall'altezza totale meno traccia e padding meno la parte inferiore del grafico corrispondente a $r_A \sin(30^\circ)$*
-
-
-* $d_B = d_C$: distanza tra i centri delle circonferenze interne $b$ e $c$ dal centro di quella esterna $a$, lungo un'asse inclinata di 30° rispetto all'asse orizzontale che contiene il centro $r_A$. Sono definiti dall'utente
-* $s$: spessore finale del display, impostato dall'utente
-* $T_C$: punto di tangenza tra le circonferenze $a$ e $c$, è posizionato esattamente ad un angolo di $210^\circ$
-* $T_B$: punto di tangenza tra le circonferenze $b$ e $c$, è posizionato ad un angolo di $-30^\circ$ (o $330^\circ$) 
-* $a$: circonferenza esterna (blu)
-  * centro in $A$ ($x_A$, $y_A$)
-  * raggio $r_A$
-* $b$: circonferenza interna a destra (in rosso)
-  * centro in $B$  
-  * $x_B = x_A + d_B \cos(30^\circ)$
-  * $y_B = y_A - d_B \sin(30^\circ)$
-  * raggio $r_B = r_A - d_B - s$.
-* $c$: circonferenza interna a sinistra (in verde)
-  * centro in $C$ 
-  * $x_C = x_A + d_C \cos(30^\circ)$
-  * $y_C = y_A - d_C \sin(30^\circ)$
-  * raggio $r_C = r_A - d_C$
-
-![dettaglio calcolo centri](<costruzione display rating imgs/rating-display_dettaglio calcolo centri.svg>)
-
-### Verifica dei valori definiti dall'utente
-
-Le circonferenze interne $b$ e $c$ non devono mai intersecare quella esterna $a$, l'unico punto di contatto possibile è costituito dal punto di tangenza $T_c$ corrispondente al vertice sinistro della scala.
-
-* lo spessore finale $s$ della scala non deve portare il raggio $r_B$ a valori negativi o incoerenti:
-  * $d_B + S < r_A$
-* il centro $C$ deve rimanere all'interno della circonferenza $a$ per permettere la tangenza nel punto $T_C$:
-  * $d_C < r_A$
-
-### Calcolo delle coordinate di una porzione di scala
-
-> **Figura 5 - calcolo centri circonferenze interne**
-
-L'obiettivo è determinare le coordinate dei punti $D$, $E$, $F$, $G$ per ogni porzione della scala, garantendo che i segmenti laterali siano radiali rispetto al centro $A$ e che la curvatura interna segua l'asimmetria delle circonferenze $b$ e $c$.
-
-
-![calcolo coordinate](<costruzione display rating imgs/rating-display_calcolo coordinate porzione.svg>)
-
-> **Figura 6 - calcolo coordinate porzione**
-
-Ogni porzione è delimitata da due rette $z$ passanti per il centro $A$ con angolo $\theta$. L'angolo è definito in base al numero di porzioni $n$ e al valore dell'angolo $\gamma$ che corrisponde al gap tra una porzione l'altra.
-
-I punti che delimitando ogni porzione sono inoltre definiti dalla distanza $\rho$ dal centro $A$.
-
-
-
-
-Quindi:
-
-* i due punti esterni, $D$ ed $E$ sono definiti dall'angolo $\theta$ e dalla distanza $\rho$ che in questo caso corrisponde al raggio della circonferenza $A$ ($r_A$)
-* per i due punti interni $F$ e $G$ la distanza $\rho$ va calcolata con l'espressione:
-
-$$
-\rho(\theta) = d \cdot \cos(\theta - \phi) + \sqrt{r^2 - [d \cdot \sin(\theta - \phi)]^2}
-$$
-
-
-In cui i vari parametri dipendono da quale circonferenza viene utilizzata, in base al valore di $\theta$:
-
-* Se $210^\circ \ge \theta \gt 30^\circ$ (parte verde della curva interna, circonferenza $c$):
-  * $\phi = \phi_2 = 210^\circ$
-  * $d = d_C$ 
-  * $r = r_C = r_A - d_C$
-* Se $330^\circ \le \theta \le 30^\circ$ (parte rossa della curva interna, circonferenza $b$) 
-  * $\phi = \phi_1 = 330^\circ$
-  * $d = d_B$
-  * $r = r_B = r_A - d_B - s$
-
-  
-Riassumendo, per i punti interni abbiamo un quadro di questo tipo:
-
-![calcolo punto interno](<costruzione display rating imgs/rating-display_esempio calcolo punto interno (c. verde).svg>)
-
-> **Figura 7 - esempio calcolo punto interno (circonferenza verde)**
-
-![calcolo punto interno](<costruzione display rating imgs/rating-display_esempio calcolo punto interno (c. rossa).svg>)
-
-> **Figura 8 - esempio calcolo punto interno (circonferenza rossa) nel punto finale della scala. In questo caso gli angoli $\theta$ e $\phi$ sono uguali**
-
-
-in cui:
-
-* $\rho = \rho_1 + \rho_2$: distanza dal centro $A$ al punto interno $G$
-* $\rho_1 = \sqrt{{r_C}^2 - [d \cdot \sin(\theta - \phi)]^2}$, corrisponde alla seconda parte dell'espressione precedente, ed è l'applicazione del teorema di Pitagora sul triangolo rettangolo la cui ipotenusa corrisponde al raggio $r_C$ passante per $G$, mentre  $\rho_1$ è il cateto maggiore
-* $\rho_2 = d \cdot \cos(\theta - \phi)$, corrisponde alla prima parte dell'espressione e corrisponde al cateto minore del triangolo rettangolo avente per ipotenusa la distanza $d$ tra i centri $A$ e $C$
-* $\delta$: angolo adiacente al cateto $\rho_2$, corrisponde al valore assoluto di $\theta - \phi$
-* $\theta$: angolo della *retta di taglio* definita dall'ampiezza della porzione e dal gap $\gamma$
-* $\phi$: angolo fisso del centro di riferimento della circonferenza interna utilizzata, in questo caso $C$, quindi $210^{\circ}$ ($330^{\circ}$ se utilizziamo  $B$)
-* $d$: distanza fissa tra il centro $A$ e il centro interno ($d_C$ o $d_B$)
-* $r$: raggio della circonferenza interna utilizzata ($r_C$ o $r_B$)

package/charts/TODO charts/test/node-test.mjs

@@ -1,92 +0,0 @@
-/* eslint-disable no-console */
-import { MinimoCharts }  from '../index.js';
-import { createSvgCanvasNode } from '../src/create-svg-canvas-node.mjs';
-import * as fs_promises from 'node:fs/promises';
-import path from 'node:path';
-// https://nodejs.org/api/util.html#utilstyletextformat-text-options
-import { styleText } from 'node:util';
-
-import { barsTest } from './src/bars-test.js';
-import { goalTest } from './src/goal-test.js';
-// import { pieNodeTest } from './src/pie-node-test.mjs';
-// import { hBarsNodeTest } from './src/hBars-node-test.mjs';
-// import { signalBarsNodeTest } from './src/signalBars-node-test.mjs';
-// import { ratingDisplayNodeTest } from './src/ratingDisplay-node-test.mjs';
-// import { radialsBarNodeTest } from './src/radialsBar-node-test.mjs';
-// import { settimanaleMensileNodeTest } from './src/settimanale-mensile-node-test.mjs';
-// import { mcnNodeTest } from './src/mcn-node-test.mjs';
-// import { linesNodeTest } from './src/lines-node-test.mjs';
-
-const output_path = new URL(import.meta.resolve('./_output')).pathname;
-
-// const fontFolder = new URL(import.meta.resolve('../../../ada-brochure-business-analysis/2025/assets/fonts/Roboto_Condensed/static')).pathname;
-const fontFolder = new URL(import.meta.resolve('./fonts/nunito-sans_5.2.7_fontsource/ttf')).pathname;
-
-const fontFiles = {
-    extrabold: fontFolder + '/nunito-sans-latin-900-normal.ttf',
-    bold: fontFolder + '/nunito-sans-latin-700-normal.ttf',
-    medium: fontFolder + '/nunito-sans-latin-600-normal.ttf',
-    regular: fontFolder + '/nunito-sans-latin-400-normal.ttf',
-    italic: fontFolder + '/nunito-sans-latin-400-italic.ttf',
-    lightItalic: fontFolder + '/nunito-sans-latin-300-italic.ttf',
-  },
-
-  writeFile = async (svgString, fileName) => {
-    try {
-      await fs_promises.writeFile(path.join(output_path, fileName), svgString);
-    } catch (err) {
-      console.error(err);
-    }
-
-  };
-
-
-// svuota cartella output
-try {
-  await fs_promises.rm(output_path, { recursive: true, force: true });
-  await fs_promises.mkdir(output_path, { recursive: true });
-} catch (err) {
-  console.error('Error clearing output folder:', err);
-}
-
-
-const chartInstance = new MinimoCharts({
-  createSvgCanvas: createSvgCanvasNode,
-  textToPath: true, // converte i font in tracciati
-});
-
-console.log( styleText(['green'], '...barsTest' ));
-barsTest(chartInstance, {
-  yAxisTitleFontFilePath: fontFiles.medium,
-  xAxisTitleFontFilePath: fontFiles.medium,
-  labelXFontFilePath: fontFiles.regular,
-  labelYFontFilePath: fontFiles.regular,
-  width: 800,
-  height: 500,
-  container: null
-}).then(svgString => writeFile(svgString, 'bars.svg'));
-
-
-console.log( styleText(['green'], '...goalTest' ));
-goalTest(chartInstance, {
-  container: null,
-  width: 300,
-
-  currentValueFontFilePath: fontFiles.regular,
-  rightLabelFontAttrs: fontFiles.bold,
-}).then(svgString => writeFile(svgString, 'goal.svg'));
-
-
-
-// await pieNodeTest(cfg);
-// await hBarsNodeTest(cfg);
-// await signalBarsNodeTest(cfg);
-// await ratingDisplayNodeTest(cfg);
-// await radialsBarNodeTest(cfg);
-// await settimanaleMensileNodeTest(cfg);
-// await mcnNodeTest(cfg);
-// await linesNodeTest(cfg);
-
-
-
-console.log(' DONE ');

package/charts/TODO charts/test/test-readme.md

@@ -1,23 +0,0 @@
-# MinimoCharts test
-
-## browser
-
-run (dalla root Ada):
-
-```bash
-# open -n -a "Google Chrome" --args --profile-directory="Profile 1" # facoltativo, scelta profilo chrome
-NODE_ENV=development npx webpack serve --config ./ada-frontend/ada-charts/test/webpack/webpack-MinimoChartsTest.config.mjs
-```
-
-
-## node
-
-Per il test node è necessario scaricare il font indicato nel file di `node-test.mjs`
-
-Il percorso dei font va quindi inserito in `./node-test.mjs` (nella variabile `fontFolder`).
-
-Per avviare il test:
-
-```bash
-node node-test.mjs
-```

package/charts/TODO charts/test/test-src/rating-display-extra-test.js

@@ -1,132 +0,0 @@
-import { MinimoCharts, ratingDisplayChart } from '../../index.js';
-
-const chartInstance = new MinimoCharts();
-
-ratingDisplayChart(chartInstance, {
-  debug: true,
-  container: '#rd-demo',
-  portions: 3,
-
-  value: 8.99,
-  scaleStartValue: 0,
-  rodPositionForceCenter: false,
-
-  displayBackgroundAttrs: {
-    fill: '#efefef',
-    'stroke-width': 4,
-    stroke: '#07914E',
-  },
-
-  displayLabel: [
-    {
-      label: 'Lorem ipsum',
-      font: {
-        family: 'Roboto Condensed',
-        size: 18,
-        // stretch: 'normal',
-        // style: 'italic',
-        // variant: 'normal',
-        weight: 700
-      },
-      fill: '#000',
-      // fontFilePath: path
-    },
-    {
-      label: 'dolor sit amet',
-      font: {
-        family: 'Roboto Condensed',
-        size: 12,
-        // stretch: 'normal',
-        // style: 'italic',
-        // variant: 'normal',
-        weight: 300
-      },
-      fill: '#666',
-      // fontFilePath: path,
-    }
-  ],
-  displayLabelRowGap: 2,
-
-  miniDisplay: [
-    {
-      position: 'sx',
-      value: 3.1,
-      type: 'gauge', // gauge = mini tachimetro, value: mostra il valore indicato in value
-      mdLabel: [
-        {
-          label: 'md#1',
-          font: {
-            family: 'Roboto Condensed',
-            size: 14,
-            // stretch: 'normal',
-            // style: 'italic',
-            // variant: 'normal',
-            weight: 400
-          },
-          fill: '#333',
-          // fontFilePath: path,
-        },
-        {
-          label: 'xyz',
-          font: {
-            family: 'Roboto Condensed',
-            size: 12,
-            // stretch: 'normal',
-            // style: 'italic',
-            // variant: 'normal',
-            weight: 300
-          },
-          fill: '#666',
-          // fontFilePath: path,
-        },
-      ],
-      mdArc: {
-        // fill: '#ddd',
-        'stroke-width': 1,
-        stroke: '#666',
-        class: null,
-      }
-    },
-    {
-      position: 'dx',
-      value: 4,
-      type: 'value', // gauge = mini tachimetro, value: mostra il valore indicato in value
-      typeValueFont: {
-        label: null,
-        font: {
-          family: 'Roboto Condensed',
-          size: 32,
-          // stretch: 'normal',
-          // style: 'italic',
-          // variant: 'normal',
-          weight: 700
-        },
-        fill: '#036',
-        // fontFilePath: path,
-      },
-      mdLabel: [{
-        label: 'md#2',
-        font: {
-          family: 'Roboto Condensed',
-          size: 14,
-          // stretch: 'normal',
-          // style: 'italic',
-          // variant: 'normal',
-          weight: 400
-        },
-        fill: '#333',
-        // fontFilePath: path,
-      }],
-      mdArc: {
-        // fill: '#ddd',
-        'stroke-width': 2,
-        stroke: '#036',
-        class: null,
-      }
-    }
-  ],
-  miniDisplayTopMargin: 0,
-  miniDisplayLabelTopMargin: 0,
-  miniDisplayLabelRowGap: -4,
-
-});

package/charts/TODO charts/test/test-src/rating-display-test.js

@@ -1,155 +0,0 @@
-
-export function ratingDisplayTest(cfg) {
-
-  const ratingDisplayOpts = {
-    displayValue: 3.2,
-    svgAttrs: {class: 'some-class'},
-
-    displayLabel: [
-      {
-        label: 'Lorem ipsum',
-        font: {
-          family: 'Roboto Condensed',
-          size: 18,
-          // stretch: 'normal',
-          // style: 'italic',
-          // variant: 'normal',
-          weight: 700
-        },
-        fill: '#000',
-        // fontFilePath: path
-      },
-      {
-        label: 'dolor sit amet',
-        font: {
-          family: 'Roboto Condensed',
-          size: 12,
-          // stretch: 'normal',
-          // style: 'italic',
-          // variant: 'normal',
-          weight: 300
-        },
-        fill: '#666',
-        // fontFilePath: path,
-      }
-    ],
-    miniDisplay: [
-      {
-        position: 'sx',
-        value: 3.1,
-        type: 'gauge', // gauge = mini tachimetro, value: mostra il valore indicato in value
-        mdLabel: [
-          {
-            label: 'md#1',
-            font: {
-              family: 'Roboto Condensed',
-              size: 14,
-              // stretch: 'normal',
-              // style: 'italic',
-              // variant: 'normal',
-              weight: 400
-            },
-            fill: '#333',
-            // fontFilePath: path,
-          },
-          {
-            label: 'xyz',
-            font: {
-              family: 'Roboto Condensed',
-              size: 12,
-              // stretch: 'normal',
-              // style: 'italic',
-              // variant: 'normal',
-              weight: 300
-            },
-            fill: '#666',
-            // fontFilePath: path,
-          },
-        ],
-        mdArc: {
-          fill: '#ddd',
-          'stroke-width': 2,
-          stroke: '#036',
-          class: null,
-        }
-      },
-      {
-        position: 'dx',
-        value: 4,
-        type: 'value', // gauge = mini tachimetro, value: mostra il valore indicato in value
-        typeValueFont: {
-          label: null,
-          font: {
-            family: 'Roboto Condensed',
-            size: 28,
-            // stretch: 'normal',
-            // style: 'italic',
-            // variant: 'normal',
-            weight: 700
-          },
-          fill: '#760592',
-          // fontFilePath: path,
-        },
-        mdLabel: [
-          {
-            label: 'md#2',
-            font: {
-              family: 'Roboto Condensed',
-              size: 14,
-              // stretch: 'normal',
-              // style: 'italic',
-              // variant: 'normal',
-              weight: 400
-            },
-            fill: '#333',
-            // fontFilePath: path,
-          },
-          {
-            label: '(riga 2)',
-            font: {
-              family: 'Roboto Condensed',
-              size: 12,
-              // stretch: 'normal',
-              // style: 'italic',
-              // variant: 'normal',
-              weight: 300
-            },
-            fill: '#666',
-            // fontFilePath: path,
-          },
-        ],
-        mdArc: {
-          fill: '#ddd',
-          'stroke-width': 3,
-          stroke: '#036',
-        }
-      }
-    ],
-    miniDisplayTopMargin: 5,
-    miniDisplayLabelTopMargin: 0,
-
-  };
-
-  cfg.charts.ratingDisplay({
-    ...ratingDisplayOpts,
-    container: '#ratingDisplay1',
-    scale: 4,
-
-    displayBackgroundAttrs: {
-      fill: '#efefef',
-      'stroke-width': 3,
-      stroke: '#666',
-      class: 'some-class',
-    },
-
-    displayValueForceCenter: false,
-  });
-
-  cfg.charts.ratingDisplay({
-    ...ratingDisplayOpts,
-    debug: true,
-    container: '#ratingDisplay2',
-    scale: 5,
-    displayValueForceCenter: true,
-  });
-}

package/charts/TODO charts/test/textToPath-test.mjs

@@ -1,14 +0,0 @@
-/* eslint-disable no-console */
-import { textToSvgPath } from '../src/svg-text-to-path.js';
-
-const labelFontFilePath = './Roboto_Condensed/static/RobotoCondensed-Bold.ttf',
-  textString = 'Hello World',
-  textSize = 24
-;
-
-const { pathData, pathElementString } = await textToSvgPath(labelFontFilePath, textString, textSize);
-
-
-console.log(pathData);
-console.log('------');
-console.log(pathElementString);

package/charts/TODO.md

@@ -1,7 +0,0 @@
-completare
-aggionare la documentazione e aggiungere i test a demo (vedi vecchia versione in `TODO charts/test`)
-
-implementare tooltip nativo nei file svg, ora viene aggiunto un data-title, ma non è gestito
-
-
-aggiungere export specifico in package.json

package/charts/src/node-helpers/TODO.md

@@ -1,2 +0,0 @@
-documentare modalità d'uso
-richide l'instalalzione di opentype