@esfaenza/es-charts 20.3.13 → 20.3.14

package/fesm2022/esfaenza-es-charts.mjs

@@ -1819,6 +1819,7 @@ class PieChartService {
         //#region Carico il Grafico
         this.ChartRoot?.dispose();
         this.ChartRoot = am5.Root.new(settings.Name);
+        this.applyLocale(settings);
         let ChartContainer = this.ChartRoot.container.children.push(am5.Container.new(this.ChartRoot, {
             width: am5.percent(100),
             height: am5.percent(100),
@@ -1955,9 +1956,14 @@ class PieChartService {
             else if (settings.LabelsTruncate)
                 series.labels.template.setAll({ oversizedBehavior: "truncate" });
         }
+        // I dati vanno assegnati PRIMA di calcolare il totale e registrare gli handler: altrimenti i dataItems
+        // non esistono ancora e il totale verrebbe calcolato su una serie vuota (restando a 0)
+        series.data.setAll(dataConverted.values);
         // Configurazione "Mostra Totale"
         if (settings.Total?.Show) {
-            let label = this.ChartInstance.children.push(am5.Label.new(this.ChartRoot, {
+            // La label va agganciata al seriesContainer (la cui origine e il centro della torta) e centrata su
+            // di esso: cosi compare esattamente al centro della ciambella, come nella versione amCharts4
+            let label = this.ChartInstance.seriesContainer.children.push(am5.Label.new(this.ChartRoot, {
                 centerX: am5.p50,
                 centerY: am5.p50,
                 textAlign: "center"
@@ -1969,7 +1975,9 @@ class PieChartService {
                         return;
                     total += di.get("valueWorking") ?? di.get("value") ?? 0;
                 });
-                let sumString = (Math.trunc(total * 100) / 100).toString();
+                // Tronco a 2 decimali e formatto coi separatori del locale (es. "11.506.370,17")
+                let truncated = Math.trunc(total * 100) / 100;
+                let sumString = this.ChartRoot.numberFormatter.format(truncated, "#,###.00");
                 let fs = 28;
                 if (sumString.length >= 9)
                     fs = 18;
@@ -1978,7 +1986,7 @@ class PieChartService {
                 else if (sumString.length == 7)
                     fs = 23;
                 label.set("html", `<div style="text-align:center">
-                        <div style="font-size:${settings.Total?.TitleSize || 18}px">Totale</div>
+                        <div style="font-size:${settings.Total?.TitleSize || 18}px">Totale:</div>
                         <div style="font-weight:bold;font-size:${settings.Total?.NumberSize || fs}px">
                             <span>${sumString}${settings.Total?.UnitOfMeasure ? " " + settings.Total.UnitOfMeasure : ""}</span>
                         </div>
@@ -1990,11 +1998,11 @@ class PieChartService {
                 di.on("valueWorking", updateTotal);
             });
         }
-        series.data.setAll(dataConverted.values);
         if (settings.Legend) {
+            // Valore formattato coi separatori del locale e due decimali (es. "4.662.970,79"), come in amCharts4
             series.setAll({
-                legendLabelText: "{category}:",
-                legendValueText: "{value}"
+                legendLabelText: "{category}",
+                legendValueText: "{value.formatNumber('#,###.00')}"
             });
             this.ChartLegend.data.setAll(series.dataItems);
         }
@@ -2005,6 +2013,16 @@ class PieChartService {
         }
         return this;
     }
+    /**
+     * Applica il locale italiano al root del grafico quando richiesto, cosi che il numberFormatter usi i
+     * separatori corretti (es. 4.662.970,79). Senza questo amCharts5 userebbe il formato di default (4,662,970).
+     *
+     * @param {PieChartSettings} settings Impostazioni del grafico (da cui si legge il Locale)
+     */
+    applyLocale(settings) {
+        if ((settings.Locale ?? "").toLowerCase().startsWith("it"))
+            this.ChartRoot.locale = am5locales_it_IT;
+    }
     /** @ignore */
     setSelection(from, to) { }
     /** @ignore */