@visionaris-bruno/vs-echarts 9.0.4 → 9.0.7

package/fesm2022/visionaris-bruno-vs-echarts.mjs

@@ -185,6 +185,7 @@ function defaultOptionsOverrides() {
         },
     };
 }
+const defaultValueFormatter = (value) => `${value}`;
 
 // TODO: Exportar valores por defecto de vs-echarts.config.ts por este servicio y actualizar en logica de frontend.
 class VSEchartsConfigService {
@@ -241,7 +242,7 @@ class BaseEchartsComponent {
     /** Resolver de colores dinámico (Callback) */
     colorResolver;
     /** Formateador de valores para etiquetas y tooltips */
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     chartClick = new EventEmitter();
     /** Subject para debouncing de actualizaciones. ReplaySubject asegura no perder el primer renderizado. */
     updateSubject = new ReplaySubject(1);
@@ -683,7 +684,7 @@ function getCellValue(val) {
 /**
  * Formatter generator for 'item' trigger strategy in tooltips.
  */
-function getItemTooltipFormatter(data, formatCellValue, opts) {
+function getItemTooltipFormatter(data, valueFormatter, opts) {
     return (params) => {
         let title = '', subtitle = '', valFormatted = '', percentVal = '';
         const showSerieName = opts?.showSerieName ?? true;
@@ -694,15 +695,16 @@ function getItemTooltipFormatter(data, formatCellValue, opts) {
             return '';
         const rawValue = (row && typeof row === 'object') ? row[dimensionName] : params.value;
         const serieName = showSerieName ? `${params.marker} ${params.seriesName}<br/ >` : '';
-        title = params.name || (row && typeof row === 'object' ? row.category : '');
+        const categoryName = params.name || (row && typeof row === 'object' ? row.category : '');
+        title = categoryName;
         subtitle = serieName;
-        valFormatted = formatCellValue(Number(rawValue ?? 0), dimensionName);
-        // pie/funnel series
+        valFormatted = valueFormatter(Number(rawValue ?? 0), dimensionName);
+        // pie/funnel/ring series
         if (params.percent != undefined) {
             percentVal = ` (${params.percent}%)`;
-            if (data.dimensions.length <= 2) {
-                subtitle = '';
-            }
+            // invertir titulo y subtitulo
+            title = `${params.seriesName}`;
+            subtitle = `${params.marker} ${categoryName}</br>`;
         }
         // sankey
         if (params.dataType != undefined) {
@@ -712,11 +714,11 @@ function getItemTooltipFormatter(data, formatCellValue, opts) {
                 const sourceName = params.data.source.split('___')[0];
                 const targetName = params.data.target.split('___')[0];
                 title = `${sourceName} &rarr; ${targetName}`;
-                valFormatted = formatCellValue(Number(params.value ?? 0), dimensionName);
+                valFormatted = valueFormatter(Number(params.value ?? 0), dimensionName);
             }
             else if (dataType === 'node') {
                 title = params.name.split('___')[0];
-                valFormatted = formatCellValue(Number(params.value ?? 0), dimensionName);
+                valFormatted = valueFormatter(Number(params.value ?? 0), dimensionName);
             }
         }
         // sunburst treemap
@@ -735,7 +737,7 @@ function getItemTooltipFormatter(data, formatCellValue, opts) {
 /**
  * Formatter generator for 'axis' trigger strategy in tooltips.
  */
-function getAxisTooltipFormatter(data, formatCellValue, opts) {
+function getAxisTooltipFormatter(data, valueFormatter, opts) {
     return (params) => {
         if (!params)
             return '';
@@ -753,7 +755,7 @@ function getAxisTooltipFormatter(data, formatCellValue, opts) {
                 continue;
             const itemRow = item.value;
             const rawValue = (itemRow && typeof itemRow === 'object') ? itemRow[dimensionName] : item.value;
-            const valFormatted = formatCellValue(Number(rawValue ?? 0), dimensionName);
+            const valFormatted = valueFormatter(Number(rawValue ?? 0), dimensionName);
             html += `${item.marker} ${item.seriesName}: <b>${valFormatted}</b><br/>`;
         }
         return html;
@@ -762,10 +764,10 @@ function getAxisTooltipFormatter(data, formatCellValue, opts) {
 /**
  * Unified tooltip formatter generator that selects the appropriate strategy based on the trigger.
  */
-function getTooltipFormatter(trigger, data, formatCellValue, opts) {
+function getTooltipFormatter(trigger, data, valueFormatter, opts) {
     return trigger === 'axis'
-        ? getAxisTooltipFormatter(data, formatCellValue, opts)
-        : getItemTooltipFormatter(data, formatCellValue, opts);
+        ? getAxisTooltipFormatter(data, valueFormatter, opts)
+        : getItemTooltipFormatter(data, valueFormatter, opts);
 }
 function getCommons(opts) {
     const palette = opts?.palette ?? getDefaultPalette();
@@ -852,7 +854,7 @@ function getTreeDepth(nodes) {
  */
 class RingBuilder {
     baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     colorResolver;
     result = {};
@@ -948,10 +950,10 @@ class RingBuilder {
             }];
     }
     addTooltip(data, overrides) {
-        merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
-        });
-        const tooltip = getTooltipOptions(overrides);
+        const tooltipOptsOverrides = {};
+        tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger, data, this.valueFormatter);
+        merge(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
         this.result.tooltip = tooltip;
     }
     addLegend() {
@@ -984,15 +986,12 @@ class RingBuilder {
     getResult() {
         return this.result;
     }
-    formatCellValue(value, key) {
-        return this.valueFormatter(value, key);
-    }
 }
 
 class BoxPlotBuilder {
     baseProduct;
     translateService;
-    valueFormatter = (value, key) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     // TODO: Hay que implementar un valor por defecto.
     colorResolver;
@@ -1042,7 +1041,9 @@ class BoxPlotBuilder {
             };
         }
         ;
-        const resumen5NumerosXCat = data.source.map(s => {
+        const resumen5NumerosXCat = data.source
+            .reverse() // reverse para no modificar el orden original
+            .map(s => {
             // filtro category para excluirlo de la lista de métricas
             const values = Object.entries(s)
                 .filter(([key, val]) => key !== 'category' && !isNaN(val))
@@ -1208,9 +1209,8 @@ class BoxPlotBuilder {
  */
 class EChartBuilder {
     baseProduct = undefined;
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
-    // TODO: Hay que implementar un valor por defecto.
     colorResolver;
     result = {};
     constructor(baseProduct) {
@@ -1263,19 +1263,21 @@ class EChartBuilder {
             const dynamicOverrides = {
                 name: friendlyName,
                 encode,
-                label: {
-                    formatter: (params) => {
-                        const row = params.value;
-                        const rawValue = (row && typeof row === 'object') ? row[dimKey] : params.value;
-                        return this.formatCellValue(Number(rawValue ?? 0), dimKey);
-                    }
-                }
             };
             const seriesOption = merge$1(dynamicOverrides, overrides);
             // Inyectar el resolver de color si existe
             if (this.colorResolver && seriesOption.itemStyle) {
                 seriesOption.itemStyle.color = this.colorResolver;
             }
+            // Inyectar el formatter de etiquetas
+            if (seriesOption.label && this.valueFormatter != undefined) {
+                const valueFormatter = this.valueFormatter;
+                seriesOption.label.formatter = (params) => {
+                    const row = params.value;
+                    const rawValue = (row && typeof row === 'object') ? row[dimKey] : params.value;
+                    return valueFormatter(Number(rawValue ?? 0), dimKey);
+                };
+            }
             return seriesOption;
         });
         this.result.series = series;
@@ -1286,11 +1288,11 @@ class EChartBuilder {
      * @param overrides
      */
     addTooltip(data, overrides) {
-        // inyecto formateador a overrides de tooltip 
-        merge$1(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
-        });
-        const tooltip = getTooltipOptions(overrides);
+        const optsOverrides = {};
+        // inyecto formateador personalizado de tooltip
+        optsOverrides.formatter = getTooltipFormatter(overrides.trigger, data, this.valueFormatter.bind(this));
+        merge$1(optsOverrides, overrides);
+        const tooltip = getTooltipOptions(optsOverrides);
         this.result.tooltip = tooltip;
     }
     addPolar() {
@@ -1385,12 +1387,6 @@ class EChartBuilder {
         return this.result;
     }
     ;
-    /**
-     * Formatea un valor utilizando el callback inyectado.
-     */
-    formatCellValue(value, key) {
-        return this.valueFormatter(value, key);
-    }
     // Setters 
     /**
      * Permite inyectar un formateador de valores externo.
@@ -1439,7 +1435,7 @@ class EChartBuilder {
  */
 class PieBuilder {
     baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     colorResolver;
     result = {};
@@ -1551,10 +1547,10 @@ class PieBuilder {
         this.result.series = series;
     }
     addTooltip(data, overrides) {
-        merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
-        });
-        const tooltip = getTooltipOptions(overrides);
+        const tooltipOptsOverrides = {};
+        tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger, data, this.valueFormatter);
+        merge(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
         this.result.tooltip = tooltip;
     }
     addLegend() {
@@ -1588,9 +1584,6 @@ class PieBuilder {
     getResult() {
         return this.result;
     }
-    formatCellValue(value, key) {
-        return this.valueFormatter(value, key);
-    }
 }
 
 /**
@@ -1600,7 +1593,7 @@ class PieBuilder {
  */
 class FunnelBuilder {
     baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     colorResolver;
     result = {};
@@ -1655,10 +1648,12 @@ class FunnelBuilder {
         this.result.series = seriesOption;
     }
     addTooltip(data, overrides) {
-        merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
-        });
-        const tooltip = getTooltipOptions(overrides);
+        const tooltipOptsOverrides = {};
+        if (this.valueFormatter != undefined) {
+            tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger, data, this.valueFormatter);
+        }
+        merge(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
         this.result.tooltip = tooltip;
     }
     addLegend() {
@@ -1692,14 +1687,11 @@ class FunnelBuilder {
     getResult() {
         return this.result;
     }
-    formatCellValue(value, key) {
-        return this.valueFormatter(value, key);
-    }
 }
 
 class SunburstBuilder {
     baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     colorResolver;
     result = {};
@@ -1738,10 +1730,10 @@ class SunburstBuilder {
         this.result.series = serie;
     }
     addTooltip(data, overrides) {
-        merge$1(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter),
-        });
-        const tooltip = getTooltipOptions(overrides);
+        const tooltipOptsOverrides = {};
+        tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter);
+        merge$1(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
         this.result.tooltip = tooltip;
     }
     addCommons() {
@@ -1798,7 +1790,7 @@ class SunburstBuilder {
  */
 class SankeyBuilder {
     baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     colorResolver;
     result = {};
@@ -1902,10 +1894,10 @@ class SankeyBuilder {
         this.result.series = serie;
     }
     addTooltip(data, overrides) {
-        merge$1(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter),
-        });
-        const tooltip = getTooltipOptions(overrides);
+        const tooltipOptsOverrides = {};
+        tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter);
+        merge$1(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
         this.result.tooltip = tooltip;
     }
     addPolar() { }
@@ -3016,7 +3008,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
-// Interfaces de Inputs de Base EChart Component //
+// Interfaces de Inputs de Base EChart Component // 
+// TopLevelFormatterParams
 
 ;
 ;