@massimo-cassandro/minimo 1.19.0 → 1.19.1

package/charts/TODO charts/???/InfoBox.js

@@ -1,456 +0,0 @@
-import classnames from 'classnames';
-import { useState, useEffect, useRef, Fragment } from 'react';
-import PropTypes from 'prop-types';
-// import styles from '../charts-base.module.scss';
-import { nanoid } from 'nanoid';
-
-
-/*
-InfoBox versione su grafico linee
-
-
-
-function InfoBox({
-  year = new Date().getFullYear(),
-  infoBoxItems = [],
-  infoBoxPositionRefs = [],
-  cfg = {},
-  mode = 'week',
-  data,
-  week,
-  month,
-  dataGroupEl,
-  skipWeek0
-}) {
-  const [content, setContent] = useState(null),
-    infoBoxWrapperRef = useRef();
-
-
-  const weekMode = useMemo(() => {
-      return mode === 'week';
-    }, [mode]),
-    infoBoxWidth = useMemo(() => {
-      return weekMode? 300 : 240;
-    }, [weekMode]);
-
-  useEffect(() => {
-
-    // =>> getDatesOfWeek
-    const getDatesOfWeek = week => {
-      if(week) {
-
-        let startDay, endDay;
-        const daysToFirstMonday =  cfg.jan1DayOfTheWeek === 1? 0 : cfg.jan1DayOfTheWeek === 0? 1 :  8 - cfg.jan1DayOfTheWeek;
-        // primo lunedì dell'anno
-        const firstMonday = daysToFirstMonday === 0 ? cfg.jan1 : new Date(+cfg.jan1 + daysToFirstMonday * 86400e3);
-
-        const dec31 = new Date(year, 11, 31),
-          lastDayOfLastWeek = new Date(+firstMonday + ((week - 1) * 7 * 86400e3) + (86400e3 * 6) );
-
-        // forza il primo giorno della prima settimana al 1 gennaio anche se non è lunedì
-        if(week === 1) {
-          startDay =  cfg.jan1;
-        } else {
-          startDay = new Date(firstMonday.valueOf());
-          startDay = new Date(startDay.setDate(startDay.getDate() + 7 * (week - 2)));
-        }
-
-        // prima settimana con più di 4 gg, viene considerata a se stante
-        endDay = new Date(startDay.valueOf());
-        if(week === 1 && cfg.jan1DayOfTheWeek < 5) {
-          endDay = new Date(endDay.setDate(endDay.getDate() + 7 - cfg.jan1DayOfTheWeek));
-        } else {
-          endDay = new Date(endDay.setDate(endDay.getDate() + 6));
-        }
-
-        // forza l'ultmo giorno dell'ultima settimana al 31 dic anche se non è domenica
-        // e si tratta dell'ultima settimana
-        if(endDay.getFullYear() > year || week === cfg.weeks) {
-          endDay = dec31;
-        }
-
-
-        // nel caso in cui la settimana sia la prima o l'ultima,viene restituito un terzo elemento
-        // a indicare, rispettivamente, se 1 gennaio corrisponde all'inizio reale della 1a settimana
-        // o se 31 dic corrisponde all'ultimo giorno dell'ultima settimana
-
-        if(week === 1) {
-          return [startDay, endDay, +firstMonday === +cfg.jan1];
-
-        } else if (week === cfg.weeks) {
-          return [startDay, endDay, +dec31 === +lastDayOfLastWeek];
-
-        } else {
-          return [startDay, endDay];
-        }
-
-      } else {
-        return null;
-      }
-
-
-    };
-
-    if(data) {
-
-      const weekDates = getDatesOfWeek(data.w),
-        dateToLocalOptions = {
-          month: 'long',
-          day: 'numeric'
-        },
-        setDateRangeText = () => {
-          if(data.w === 0) {
-            return null;
-
-          } else {
-            return <>
-              <span className="text-nowrap">
-                {weekDates[0].toLocaleString('it-IT',
-                  weekDates[0].getMonth() !== weekDates[1].getMonth()? dateToLocalOptions
-                    : {day: 'numeric'}
-                )}
-              </span>
-              {' \u2013 '}
-              <span className="text-nowrap">{weekDates[1].toLocaleString('it-IT', dateToLocalOptions)}</span>
-            </>;
-          }
-        };
-
-      //weeks:
-      //props.data : {
-      //    "w": 0,       <- settimana, 0 = anno prec.
-      //    "s": 519096,  <- budget standard
-      //    "p": 812136,  <- budget positivo
-      //    "n": 43242,   <- budget negativo
-      //    "c": 674824   <- budget consolidato (null se non presente)
-      //    "cp": 612345  <- budget consolidato anno precedente
-      //  }
-
-
-
-      setContent(<>
-
-        //  {weekMode?
-        //   <>
-        //     <div className={styles.infoBoxTitle}>{props.data.w? <>Settimana {props.data.w}</> : <>Anno precedente</>}</div>
-        //     <div className={styles.infoBoxDescr}>{setDateRangeText()}</div>
-        //   </>
-        //   :
-        //   <>{mesi[props.month]}</>
-        // }
-
-        <div className={styles.infoBoxTitle}>{data.w? <>Settimana {data.w}</> : <>Anno precedente</>}</div>
-        <div className={styles.infoBoxDescr}>{setDateRangeText()}</div>
-
-        <table className={styles.infoBoxTable}>
-          <tbody>
-            {infoBoxItems.map((item, idx) => {
-
-              return <tr key={nanoid()}>
-                <th scope="row" className={item.tdClassName}>
-                  {item.flagClassName && <span className={classnames(styles.infoBoxFlag, item.flagClassName)} />}
-                  {item.label}
-                </th>
-                <td className={item.tdClassName}>{data[item.key] != null?
-                  <span className="euro">{data[item.key].toLocaleString('it-IT')}</span>
-                  : '\u2014'}
-                </td>
-                // =>> infobox: incremento
-                {(data[item.key] != null && idx === 0)?
-                  <td className='pl-2 align-baseline' rowSpan={Object.keys(infoBoxItems).length}>
-                    {formatDelta(data.c, data.cp)}
-                  </td>
-                  : ''
-                }
-              </tr>;
-            })}
-          </tbody>
-        </table>
-
-
-        // weekDates[3] (true/false) è presente solo per la prima e l'ultima settimana
-        {weekMode && <>
-          {data.w === 1 && !weekDates[3] &&
-            <div className={styles.infoBoxNote}>
-              NB: sono inclusi anche i giorni precedenti al primo lunedì dell’anno.
-            </div>
-          }
-          {data.w === cfg.weeks && !weekDates[3] &&
-            <div className={styles.infoBoxNote}>
-              NB: sono inclusi anche i giorni successivi alla domenica dell’ultima settimana.
-            </div>
-          }
-        </>}
-
-      </>);
-    }
-  }, [cfg.jan1, cfg.jan1DayOfTheWeek, cfg.weeks, data, infoBoxItems, month, year, weekMode]);
-
-  useEffect(() => {
-    if(dataGroupEl && (week != null || month != null)) {
-
-      const infoBoxMargin = 8; // distanza dalla linea della griglia della settimana in esame
-
-      // lato in cui posizionare InfoBox rispetto all'asse della settimana
-      let side;
-      if(weekMode) {
-        side = week > cfg.weeks/2? 'left' : 'right';
-      } else {
-        side = month > 5? 'left' : 'right';
-      }
-
-      dataGroupEl?.classList.add(styles.dataGroupOn);
-      dataGroupEl?.closest(`.${styles.chart}`)?.classList.add(styles.infoBoxWrapperOn);
-
-      infoBoxWrapperRef.current.setAttribute('transform-origin',
-      `${side === 'left'? 'right' : 'left'} top`
-      );
-
-      infoBoxWrapperRef.current.dataset.side = side;
-      const infoBoxSize = infoBoxWrapperRef.current.querySelector(':scope > div').getBoundingClientRect();
-      // infoBoxWrapperRef.current.setAttribute('height', infoBoxSize.height);
-      // infoBoxWrapperRef.current.setAttribute('width', infoBoxSize.width);
-
-      // let puntoRif;
-      // for(const ref of infoBoxPositionRefs) {
-      //   puntoRif = dataGroupEl.querySelector(`.${styles[ref]}`);
-      //   if(puntoRif) {
-      //     break;
-      //   }
-      // }
-
-      // let y = puntoRif? +puntoRif.getAttribute('cy') : Infinity;
-      // y = Math.min(y, cfg.chart_area.top + cfg.chart_area.height - infoBoxSize.height - 5);
-
-      // posizionamento vicino alle asse X
-      let y = cfg.chart_area.top + cfg.chart_area.height - infoBoxSize.height - 5;
-      infoBoxWrapperRef.current.setAttribute('y', y);
-
-      let transformX = weekMode?
-        cfg.chart_area.left + ((week - (skipWeek0? 1 : 0)) * cfg.xStep) +
-        (side === 'left'? -infoBoxWidth - infoBoxMargin : infoBoxMargin)
-        :
-        cfg.chart_area.left + ((month - 1) * cfg.xStep) +
-        (side === 'left'? -infoBoxWidth - infoBoxMargin: infoBoxMargin) +
-        cfg.xStep / 2;
-
-      infoBoxWrapperRef.current.setAttribute('transform', `translate(${transformX} 0)`);
-
-
-    }
-
-  }, [infoBoxWidth, cfg, dataGroupEl, infoBoxPositionRefs, month, skipWeek0, week, weekMode]);
-
-
-  return (
-    <foreignObject className={styles.infoBoxWrapper}
-      x="0" y="-1000"
-      width={infoBoxWidth}
-      height={300}
-      ref={infoBoxWrapperRef}
-    >
-      <div xmlns="http://www.w3.org/1999/xhtml">
-        {content}
-      </div>
-      // <div xmlns="http://www.w3.org/1999/xhtml" style={{
-      //   position: 'absolute',
-      //   top: 0, left: 0,
-      //   width: '100%', height: '100%',
-      //   backgroundColor: 'rgba(255,0,0, .2)'
-      // }}></div>
-    </foreignObject>
-  );
-
-InfoBox.propTypes = {
-  data                    : PropTypes.object,
-  week                    : PropTypes.number,
-  month                   : PropTypes.number,
-  dataGroupEl             : PropTypes.any,
-  year                    : PropTypes.number,
-  cfg                     : PropTypes.object,
-  mode                    : PropTypes.oneOf(['month', 'week']),
-
-  // array di classi di elementi all'interno di dataGroupEl dai quali ricavare
-  // la coordinata y per il posizionamento di InfoBox
-  // almeno uno deve essere sicuramente presente
-  infoBoxPositionRefs     : PropTypes.arrayOf(PropTypes.string),
-
-  // elementi, etichette, classe td e classe indicatore colorato per la costruzione dell'infoBox
-  // nell'ordine in cui verranno mostrate
-  infoBoxItems            : PropTypes.arrayOf(
-    PropTypes.shape({
-      key                 : PropTypes.string,
-      label               : PropTypes.string,
-      tdClassName         : PropTypes.string,
-      flagClassName       : PropTypes.string,
-      dataPointClassName  : PropTypes.string
-    })
-  )
-
-};
-
-*/
-
-
-function InfoBox({
-  data,
-  dataGroupEl,
-  cfg,
-  // mode, // da eliminare
-  infoBoxWidth,
-  elementsCount,
-  styles,
-  title,
-  year                 = new Date().getFullYear(),
-  infoBoxItems         = [],
-  // infoBoxPositionRefs  = [],
-  extraRows            = null
-}) {
-  const [content, setContent] = useState(null),
-    infoBoxWrapperRef = useRef();
-
-  useEffect(() => {
-
-    if(data) {
-
-
-      setContent(<>
-
-        <div className={styles.infoBoxTitle}>{title}</div>
-
-        <table className={styles.infoBoxTable}>
-          <tbody>
-            {infoBoxItems.map(item => {
-              return <tr key={nanoid()}>
-                <th scope="row" className={classnames(item.tdClassName)}>
-                  {item.flagClassName && <span className={classnames(styles.infoBoxFlag, item.flagClassName)} />}
-                  {item.label}
-                </th>
-                <td className={classnames(item.tdClassName)}>{data[item.key] != null?
-                  <span className="euro">{data[item.key].toLocaleString('it-IT')}</span>
-                  :
-                  '—'}
-                </td>
-              </tr>;
-            })}
-            {extraRows.map(row => {
-              return <tr key={nanoid()}>
-                <th scope="row">{row.label}</th>
-                <td>{row.value? row.value : '—'}  </td>
-              </tr>;
-            })}
-          </tbody>
-        </table>
-
-      </>);
-    }
-  }, [cfg, data, extraRows, infoBoxItems, styles, title, year]);
-
-  useEffect(() => {
-    if(dataGroupEl) {
-
-      const infoBoxMargin = 8; // distanza dalla linea della griglia della settimana in esame
-
-      // lato in cui posizionare InfoBox rispetto all'asse della settimana
-      const xKey = dataGroupEl.dataset.xKey,
-        side = xKey > Math.floor(elementsCount/2)-1? 'left' : 'right';
-
-
-      dataGroupEl.classList.add(styles.dataGroupOn);
-      dataGroupEl.closest(`.${styles.chart}`).classList.add(styles.infoBoxWrapperOn);
-
-      infoBoxWrapperRef.current.setAttribute('transform-origin',
-      `${side === 'left'? 'right' : 'left'} top`
-      );
-
-      infoBoxWrapperRef.current.dataset.side = side;
-      // const infoBoxSize = infoBoxWrapperRef.current.querySelector(':scope > div').getBoundingClientRect();
-      // infoBoxWrapperRef.current.setAttribute('height', infoBoxSize.height);
-      // infoBoxWrapperRef.current.setAttribute('width', infoBoxSize.width);
-
-      // let puntoRif;
-      // for(const ref of infoBoxPositionRefs) {
-      //   puntoRif = dataGroupEl.querySelector(`.${styles[ref]}`);
-      //   if(puntoRif) {
-      //     break;
-      //   }
-      // }
-
-      // let y = puntoRif? +puntoRif.getAttribute('cy') : Infinity;
-      // y = Math.min(y, cfg.chart_area.top + cfg.chart_area.height - infoBoxSize.height - 5);
-
-      // posizionamento vicino alle asse X
-      // let y = cfg.chart_area.top + cfg.chart_area.height - infoBoxSize.height - 5;
-      // infoBoxWrapperRef.current.setAttribute('y', y);
-
-      // il metodo precedente provoca all'inizio un posizionamento errato sull'asse y
-      infoBoxWrapperRef.current.setAttribute('y', cfg.chart_area.top +10);
-
-      let transformX = cfg.chart_area.left + (xKey * cfg.xStep) +
-        (side === 'left'? -infoBoxWidth - infoBoxMargin - cfg.xStep * .8 : infoBoxMargin);
-
-      infoBoxWrapperRef.current.setAttribute('transform', `translate(${transformX} 0)`);
-
-    }
-
-  }, [infoBoxWidth, cfg, dataGroupEl, styles, elementsCount]);
-
-
-  return (
-    <foreignObject className={styles.infoBoxWrapper}
-      x="0" y="-1000"
-      width={infoBoxWidth}
-      height={300}
-      ref={infoBoxWrapperRef}
-    >
-      <div xmlns="http://www.w3.org/1999/xhtml">
-        {content}
-      </div>
-      {/* <div xmlns="http://www.w3.org/1999/xhtml" style={{
-        position: 'absolute',
-        top: 0, left: 0,
-        width: '100%', height: '100%',
-        backgroundColor: 'rgba(255,0,0, .2)'
-      }}></div> */}
-    </foreignObject>
-  );
-}
-
-InfoBox.propTypes = {
-  data                    : PropTypes.object,
-  dataGroupEl             : PropTypes.any,
-  year                    : PropTypes.number,
-  cfg                     : PropTypes.object,
-
-  // da eliminare
-  // mode                    : PropTypes.string,
-
-  // array di classi di elementi all'interno di dataGroupEl dai quali ricavare
-  // la coordinata y per il posizionamento di InfoBox
-  // almeno uno deve essere sicuramente presente
-  // infoBoxPositionRefs     : PropTypes.arrayOf(PropTypes.string),
-
-  // elementi, etichette, classe td e classe indicatore colorato per la costruzione dell'infoBox
-  // nell'ordine in cui verranno mostrate
-  infoBoxItems            : PropTypes.arrayOf(
-    PropTypes.shape({
-      key                 : PropTypes.string,
-      label               : PropTypes.string,
-      tdClassName         : PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-      flagClassName       : PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-    })
-  ),
-
-  // larghezza da assegnare all'elemento foreignObject
-  infoBoxWidth: PropTypes.number,
-
-  // numero di elementi sui quali mostrare infoBox (per la posizione dx o sx)
-  elementsCount: PropTypes.number,
-
-  /** righe extra da aggiungere alla infobox */
-  extraRows: PropTypes.array
-
-};
-
-
-export default InfoBox;

package/charts/TODO charts/???/README-upg OLD/342/206/222NEW.md"

@@ -1,53 +0,0 @@
-nelle funzioni dei singoli grafici aggiungere `const chartInstance = this;` e sostituire i `this` riferiti ad `adaChart` con `chartInstance`
-
-
-****
-
-Tutte le funzioni condivise, ad eccezione di `createSvgCanvas`, sono ora standalone e vanno importate dove necessario. 
-
-`chartUtils`, `textToSvgPath` e `parseStdAxisOpts` vanno importate e utilizzate direttamente, rimuovendo `this.` o `this.utils.` nel caso di quelle in `chart-utils.js`
-
-* `import { parseContainer, truncateDecimal, toRadians, polarToCartesian, classnames, classnamesNull, calcArcCoords, calcAttrD, getElementFromContainer } from '../chart-utils.js';`
-* `import { textToSvgPath } from '../svg-text-to-path.js'`;
-* `import { parseStdAxisOpts } from '../parse-std-axis-opts.js'`;
-
-
-`cartesianAxis`, `createTextEl`, `legenda`, vanno invocate passando come primo parametro l'istanza della classe, esempio:
-
-* `import { cartesianAxis } from '../cartesian-axis.js';`
-* `import { createTextEl } from '../create-text-element.js';`
-* `import { legenda } from '../legenda.js';`
-
-```javascript
-const titleEl = await createTextEl (chartInstance, {
-  text: yAxisTitle,
-  textFill: yAxisTitleAttrs.fill?? '#000',
-  fontAttr: yAxisTitleAttrs,
-  fontFilePath: yAxisTitleFontFilePath,
-  parentElement: titleGroup
-});
-```
-
-****
-
-`createTextEl` non restituisce più bbox ed elemento ma solo quest'ultimo.
-
-```javascript
-// Cambiare 
-
-const [labelBbox, labelEl] = await chartInstance.createTextEl({...})
-
-// in 
-
-const labelEl = await createTextEl(chartInstance, {...}),
-  labelBbox = labelEl.bbox()
-```
-
-****
-
-L'argomento di parseContainer è ora un oggetto (`function parseContainer({container = null, width = null, height = null, emptyContainer = true}) {...}`), la funzione va quindi invocata specificando i parametri
-
-parseContainer ora non svuota più l'elemento
-****
-
-gli argomenti di polarToCartesian non utilizzano più un oggetto per x e y

package/charts/TODO charts/???/README.md

@@ -1 +0,0 @@
-Da fare

package/charts/TODO charts/???/TODO.md

@@ -1,39 +0,0 @@
-decidere se includere anche il grafico settimanale o no
-
-
-documentare modalità di estensione della classe
-
-https://claude.ai/share/551e5453-02fd-4a6c-8147-1197d6908a8d
-
-```javascript
-// my-project/charts/index.js
-import { AdaCharts, barsChart, goalChart } from 'ada-charts'; // re-export originali
-import { myCustomBar } from './my-custom-bar.js';
-import { myTimeline } from './my-timeline.js';
-
-// wrapper per i grafici del progetto (stesso pattern)
-export const myCustomBarChart = (chartInstance, params) =>
-  myCustomBar.call(chartInstance, params);
-
-export const myTimelineChart = (chartInstance, params) =>
-  myTimeline.call(chartInstance, params);
-
-// re-esporta tutto dalla libreria base
-export { AdaCharts, barsChart, goalChart };
-```
-
-custom chart:
-
-```javascript
-// my-project/charts/my-custom-bar.js
-export function myCustomBar(params) {
-  // `this` è l'istanza AdaCharts
-  const { data, color = '#333' } = params;
-
-  // usa i metodi/proprietà di AdaCharts normalmente
-  const svg = this.createSVG(); // o come AdaCharts espone il canvas
-
-  // logica del grafico...
-  return svg;
-}
-```

package/charts/TODO charts/???/base-cfg.js

@@ -1,66 +0,0 @@
-// parametri di configurazione
-
-export default function () {
-
-  const cfg = {
-
-    asseY_steps             : 4,     // suddivisioni asse y
-    legenda           : {
-      h                     : 25,     // altezza spazio legenda
-      lines_width           : 20,     // larghezza righe legenda
-      circles_radius        : 8,     // raggio legenda aree
-      text_gap              : 4,     // spazio tra il simbolo e il testo
-      text_dy               : 4,
-      elements_gap          : 20      // spazio tra gli elementi della legenda
-    },
-
-    eti_asseY_width         : 60, // spazio etichette asse y
-    eti_asseX_height        : 30, // spazio etichette asse x (grafico settimanale)
-    padding                 : 10,      // spazio extra attorno al bordo
-
-    // altezza o larghezza ticks (secondo l'orientamento)
-    ticks                   : 5,
-
-    // spazio tra le barre dello stesso gruppo negli istogrammi
-    bar_gap                 : 3,
-
-    // margine dx e sx tra ogni gruppo di barre dalla sezione
-    bar_margin              : 6,
-
-    // altezza aggiuntiva delle aree di evidenziazione dei mesi (solo g. settimanale)
-    months_bg_extra_height  : 30
-  };
-
-  return cfg;
-}
-
-
-// =>> chart area
-// coordinate del rettangolo interno all'svg entro cui viene disegnato il grafico
-// i lati sx e inferiore corrispondono agli assi
-// la variabile cfg.chart_area contiene le distanze dal bordo dei 4 lati del rettangolo
-// e le dimensioni dei lati
-export function setChartArea(cfg, svgWidth, svgHeight) {
-  return {
-    top       : cfg.legenda.h + cfg.padding,
-    right     : svgWidth - cfg.padding,
-    bottom    : svgHeight - cfg.eti_asseX_height - cfg.padding,
-    left      : cfg.eti_asseY_width + cfg.padding,
-    width     : svgWidth - (cfg.padding * 2) - cfg.eti_asseY_width,
-    height    : svgHeight - (cfg.padding * 2) - cfg.legenda.h - cfg.eti_asseX_height
-  };
-}
-
-// console.log(cfg.chart_area);
-
-// =>> conversione valori in coordinate relative al grafico
-export function valueToYCoord(value, cfg) {
-  // la coordinata y è ricavata dalla proporzione con il valore massimo e altezza del grafico
-  // => cfg.max_value : cfg.chart_area.height = value  : y
-  // arrotondata a 4 cifre decimali
-
-  if(value == null) {
-    return 0;
-  }
-  return  Math.round((cfg.chart_area.top + cfg.chart_area.height - ((value * cfg.chart_area.height) / cfg.max_value)) * 1e4) / 1e4;
-}