@visionaris-bruno/vs-echarts 9.1.0 → 9.2.0

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

@@ -4,7 +4,7 @@ import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart
 import { TooltipComponent, GridComponent, CalendarComponent, LegendComponent, GraphicComponent, PolarComponent, DatasetComponent, DataZoomComponent, VisualMapComponent } from 'echarts/components';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Injectable, EventEmitter, inject, Output, Input, ViewChild, Directive, Component } from '@angular/core';
+import { Inject, Injectable, InjectionToken, EventEmitter, inject, Output, Input, ViewChild, Directive, Component } from '@angular/core';
 import langES from 'echarts/lib/i18n/langES.js';
 import langDE from 'echarts/lib/i18n/langDE.js';
 import langFR from 'echarts/lib/i18n/langFR.js';
@@ -17,6 +17,55 @@ import { CommonModule } from '@angular/common';
 import { merge as merge$1 } from 'lodash';
 import { TranslateService } from '@ngx-translate/core';
 
+// TODO: Exportar valores por defecto de vs-echarts.config.ts por este servicio y actualizar en logica de frontend.
+let activeLocale = undefined;
+function getActiveLocale() {
+    return activeLocale;
+}
+function setActiveLocale(locale) {
+    activeLocale = locale;
+}
+class VSEchartsConfigService {
+    vsEchartsConfig;
+    mapping = {
+        es: 'ES',
+        en: 'EN',
+        us: 'EN',
+        de: 'DE',
+        fr: 'FR',
+        it: 'IT',
+        pt: 'PT-br',
+        br: 'PT-br',
+    };
+    constructor(vsEchartsConfig) {
+        this.vsEchartsConfig = vsEchartsConfig;
+        if (this.vsEchartsConfig?.locale) {
+            setActiveLocale(this.vsEchartsConfig.locale);
+        }
+    }
+    setLocale(language) {
+        if (!language) {
+            this.vsEchartsConfig.locale = 'ES';
+            setActiveLocale('ES');
+            return;
+        }
+        const echartsLocale = this.mapping[language.toLowerCase()] || 'ES';
+        this.vsEchartsConfig.locale = echartsLocale;
+        setActiveLocale(echartsLocale);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VSEchartsConfigService, deps: [{ token: VS_ECHARTS_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VSEchartsConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VSEchartsConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VS_ECHARTS_CONFIG]
+                }] }] });
+
 /**
  * Global Design Tokens for ECharts
  */
@@ -44,7 +93,7 @@ function getDefaultPalette() {
  * pero por algun motivo esto es distinto en este tipo de graficos.
  *
  * apache echarts version: 5.6.0
-*/
+ * */
 const fixPieDataIndexInside = (e) => {
     /** selected serie index */
     const ssi = e.fromActionPayload.seriesIndex;
@@ -56,11 +105,47 @@ const fixPieDataIndexInside = (e) => {
     e.fromActionPayload.dataIndexInside = fixedDataIndex; // aplico corrección de index inside.
     return e;
 };
+/**
+ * Retorna valor con formato local establecido por configuracion de biblioteca.
+ * Utilizara el del navegador si el locale y activeLocale es indefinido.
+ * @param value
+ * @param opts
+ * @returns
+ */
+const valueToLocale = (value, opts) => {
+    const locale = opts?.locale ?? getActiveLocale();
+    const officialLocale = locale ? localeMapper[locale] : undefined;
+    // 1. Si ya es una instancia de Date
+    if (value instanceof Date) {
+        return value.toLocaleString(officialLocale);
+    }
+    // 2. Si es un string, intentamos ver si es una fecha válida
+    if (typeof value === 'string') {
+        const parsedDate = Date.parse(value);
+        if (!isNaN(parsedDate)) {
+            return new Date(parsedDate).toLocaleString(officialLocale);
+        }
+        // Si no era una fecha válida, devolvemos el string tal cual
+        return value;
+    }
+    // 3. Si es un número o bigint
+    if (typeof value === 'number' || typeof value === 'bigint') {
+        return value.toLocaleString(officialLocale);
+    }
+    // Fallback por si llega algo inesperado (null, undefined, etc.)
+    return String(value);
+};
+const defaultValueFormatter = (value) => {
+    return valueToLocale(value);
+};
 
 /// <reference path="./typings.d.ts" />
 const VS_ECHARTS_CONFIG = new InjectionToken('VS_ECHARTS_CONFIG', {
     providedIn: 'root',
-    factory: () => ({ renderer: 'svg' }),
+    factory: () => ({
+        renderer: 'svg',
+        locale: 'AR',
+    }),
 });
 /**
  * Inicialización centralizada de ECharts para evitar duplicación y efectos secundarios
@@ -105,6 +190,47 @@ function provideVSEcharts() {
     initializeEcharts();
     return provideEchartsCore({ echarts });
 }
+// 2. Diccionario de mapeo interno a códigos BCP 47 oficiales
+const localeMapper = {
+    ZH: 'zh-CN', // Chino Simplificado (puedes cambiarlo a zh-TW si prefieres)
+    EN: 'en-US', // Inglés (o en-GB)
+    AR: 'ar-EG', // Árabe
+    CS: 'cs-CZ', // Checo
+    DE: 'de-DE', // Alemán
+    EL: 'el-GR', // Griego
+    ES: 'es-ES', // Español
+    FA: 'fa-IR', // Persa
+    FI: 'fi-FI', // Finlandés
+    FR: 'fr-FR', // Francés
+    HU: 'hu-HU', // Húngaro
+    IT: 'it-IT', // Italiano
+    JA: 'ja-JP', // Japonés
+    KO: 'ko-KR', // Coreano
+    LV: 'lv-LV', // Letón
+    'nb-NO': 'nb-NO', // Noruego Bokmål (ya es estándar)
+    NL: 'nl-NL', // Neerlandés
+    PL: 'pl-PL', // Polaco
+    'PT-br': 'pt-BR', // Portugués de Brasil (corregido a camelCase estándar)
+    RO: 'ro-RO', // Rumano
+    RU: 'ru-RU', // Ruso
+    SI: 'si-LK', // Cingalés
+    SV: 'sv-SE', // Sueco
+    TH: 'th-TH', // Tailandés
+    TR: 'tr-TR', // Turco
+    UK: 'uk-UA', // Ucraniano
+    VI: 'vi-VN', // Vietnamita
+};
+// 3. Función formateadora universal (para números)
+function formatNumberByLocale(value, customLocale, options) {
+    // Obtenemos el locale oficial, si no existe por alguna razón, usamos el del sistema
+    const officialLocale = localeMapper[customLocale] || undefined;
+    return value.toLocaleString(officialLocale, options);
+}
+// 4. Función formateadora universal (para fechas)
+function formatDateByLocale(date, customLocale, options) {
+    const officialLocale = localeMapper[customLocale] || undefined;
+    return date.toLocaleString(officialLocale, options);
+}
 function defaultOptionsOverrides() {
     return {
         tooltip: {
@@ -183,6 +309,9 @@ function defaultOptionsOverrides() {
         sankey: {
             series: {}
         },
+        boxplot: {
+            series: {},
+        },
         hBoxplot: {
             series: {}
         },
@@ -191,44 +320,6 @@ 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 {
-    vsEchartsConfig;
-    mapping = {
-        es: 'ES',
-        en: 'EN',
-        us: 'EN',
-        de: 'DE',
-        fr: 'FR',
-        it: 'IT',
-        pt: 'PT-br',
-        br: 'PT-br',
-    };
-    constructor(vsEchartsConfig) {
-        this.vsEchartsConfig = vsEchartsConfig;
-    }
-    setLocale(language) {
-        if (!language) {
-            this.vsEchartsConfig.locale = 'ES';
-            return;
-        }
-        const echartsLocale = this.mapping[language.toLowerCase()] || 'ES';
-        this.vsEchartsConfig.locale = echartsLocale;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VSEchartsConfigService, deps: [{ token: VS_ECHARTS_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VSEchartsConfigService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: VSEchartsConfigService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [VS_ECHARTS_CONFIG]
-                }] }] });
 
 /**
  * BaseEchartsComponent
@@ -445,12 +536,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  *
  * @see {@link VisionarisFrontEnd/docs/technical/echarts-architecture.md}
  */
-// Pre-cached native formatter for performance in axis ticks
-const compactFormatter = new Intl.NumberFormat('es-AR', {
-    notation: 'compact',
-    compactDisplay: 'short',
-    maximumFractionDigits: 1
-});
+const formattersCache = new Map();
+function getCompactFormatter() {
+    const locale = getActiveLocale();
+    const officialLocale = locale ? localeMapper[locale] : undefined;
+    const cacheKey = officialLocale || 'default';
+    let formatter = formattersCache.get(cacheKey);
+    if (!formatter) {
+        formatter = new Intl.NumberFormat(officialLocale, {
+            notation: 'compact',
+            compactDisplay: 'short',
+            maximumFractionDigits: 1
+        });
+        formattersCache.set(cacheKey, formatter);
+    }
+    return formatter;
+}
+// Wrap with custom formatter implementation to keep identical signature/API dynamically
+const compactFormatter = {
+    format: (value) => getCompactFormatter().format(value)
+};
 /**
  * Formats a value using native browser SI suffixes (k, M, B).
  */
@@ -998,7 +1103,7 @@ class RingBuilder {
     }
 }
 
-class BoxPlotBuilder {
+class BoxplotBuilder {
     baseProduct;
     translateService;
     valueFormatter = defaultValueFormatter;
@@ -1137,15 +1242,30 @@ class BoxPlotBuilder {
         ;
         this.result.tooltip = getTooltipOptions(merge$1(overrides, { formatter: tooltipFormatter }));
     }
-    addDataZoom() {
+    addDataZoom(opts) {
+        const axisTypes = opts?.axisTypes || { x: 'value', y: 'category' };
+        const isVertical = axisTypes.x === 'category';
         this.result.dataZoom = [
             {
-                type: 'inside'
+                type: 'inside',
+                ...(isVertical ? { yAxisIndex: 0 } : { xAxisIndex: 0 })
             },
             {
                 type: 'slider',
-                height: 20,
-                bottom: 10
+                ...(isVertical
+                    ? {
+                        yAxisIndex: 0,
+                        orient: 'horizontal',
+                        bottom: 10,
+                        height: 20
+                    }
+                    : {
+                        xAxisIndex: 0,
+                        orient: 'horizontal',
+                        bottom: 10,
+                        height: 20
+                    }),
+                labelFormatter: (value) => formatAxisValue(value)
             }
         ];
     }
@@ -2305,7 +2425,7 @@ class VSECDirector {
         this.builder.addTooltip(data, overrides.tooltip);
     }
     makeBoxplot(data, overrides, opts = {}) {
-        if (this.builder instanceof BoxPlotBuilder == false) {
+        if (this.builder instanceof BoxplotBuilder == false) {
             return;
         }
         const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
@@ -2331,7 +2451,8 @@ class VSECDirector {
         this.builder.addXAxis(data, overrides.axis, axisTypes.x);
         this.builder.addYAxis(data, overrides.axis, axisTypes.y);
         this.builder.addTooltip(data, overrides.tooltip);
-        this.builder.addDataZoom();
+        const dzConfigOpts = { axisTypes };
+        this.builder.addDataZoom(dzConfigOpts);
     }
     makeHeatmapCalendar(data, overrides, opts = {}) {
         if (this.builder instanceof HeatmapCalendarBuilder == false) {
@@ -3121,20 +3242,52 @@ 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  (chartClick)=\"onChartClick($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
-class EChartsHBoxplotComponent extends BaseEchartsComponent {
+class EChartsBoxplotComponent extends BaseEchartsComponent {
     baseSeriesOptions = {
         type: 'boxplot',
         itemStyle: {
             color: '#b8c5f2'
         },
     };
+    baseProduct = {
+        chartKey: 'boxplot',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        }
+    };
+    builder = new BoxplotBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    make() {
+        const makeOpts = {
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+            valueFormatter: this.valueFormatter,
+            axisTypes: {
+                x: 'category',
+                y: 'value',
+            },
+        };
+        this.director.makeBoxplot(this.data, this.optionsOverrides, makeOpts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBoxplotComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBoxplotComponent, isStandalone: true, selector: "vs-echarts-boxplot", usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBoxplotComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-boxplot', imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], 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"] }]
+        }] });
+
+class EChartsHBoxplotComponent extends EChartsBoxplotComponent {
     baseProduct = {
         chartKey: 'hBoxplot',
         baseOptions: {
             series: this.baseSeriesOptions,
         }
     };
-    builder = new BoxPlotBuilder(this.baseProduct);
+    builder = new BoxplotBuilder(this.baseProduct);
     director = new VSECDirector(this.builder);
     make() {
         const makeOpts = {
@@ -3187,7 +3340,7 @@ class EChartsHeatmapCalendar extends BaseEchartsComponent {
                 top: this.calendarPaddings.visualMapTop,
                 formatter: (dv) => {
                     const value = dv ?? '';
-                    return value.toLocaleString();
+                    return valueToLocale(value);
                 },
             }, // dinamico
             calendar: {
@@ -3272,5 +3425,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsHBoxplotComponent, EChartsHeatmapCalendar, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsSankeyComponent, EchartsScatterComponent, VSEchartsConfigService, defaultOptionsOverrides, provideVSEcharts };
+export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsBoxplotComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsHBoxplotComponent, EChartsHeatmapCalendar, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsSankeyComponent, EchartsScatterComponent, VSEchartsConfigService, defaultOptionsOverrides, getActiveLocale, provideVSEcharts, setActiveLocale };
 //# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map