@visionaris-bruno/vs-echarts 6.0.0 → 6.1.1

package/README.md

@@ -16,10 +16,6 @@ Para instalar la librería en tu proyecto Angular, utiliza npm:
 npm install @visionaris-bruno/vs-echarts
 ```
 
-> **Nota para el equipo de Visionaris**: Para desarrollo local vinculando el código fuente (hot-reload), recuerda:
-> 1. Ejecutar `npm install` en la raíz de `reusable/vs-ng-library` para asegurar que las dependencias de la librería estén presentes.
-> 2. Consultar los archivos `tsconfig.dev.json` de la aplicación principal para verificar los mapeos de rutas (`paths`).
-
 ## 🛠️ Uso Básico
 
 ```typescript
@@ -40,3 +36,10 @@ import { EchartsRingComponent } from '@visionaris-bruno/vs-echarts';
 ```
 
 ## 📖 Documentación Detallada
+
+- [Arquitectura y Patrón Builder](docs/architecture.md)
+
+## 💻 Desarrollo Local
+
+Para desarrollo local y vinculación de código fuente (hot-reload), consulta la [Guía de Desarrollo Local](docs/development.md).
+

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

@@ -2,7 +2,7 @@ import { provideEchartsCore, NgxEchartsDirective } from 'ngx-echarts';
 import * as echarts from 'echarts/core';
 import { BarChart, PieChart, LineChart } from 'echarts/charts';
 import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GraphicComponent, ToolboxComponent, PolarComponent } from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, ViewChild, Directive, Component } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
@@ -47,6 +47,7 @@ function initializeEcharts() {
         GridComponent,
         LegendComponent,
         CanvasRenderer,
+        SVGRenderer,
         GraphicComponent,
         ToolboxComponent,
         PolarComponent,
@@ -155,8 +156,16 @@ class BaseEchartsComponent {
     /** Estado de selección para filtros cruzados */
     selectedCategoryIndex = null;
     selectedSeriesIndex = null;
+    /** Opciones de inicializacion de echarts
+     *
+     * NgxEchartsDirective.initOpts
+     */
+    initOptions = {
+        renderer: 'svg', // svg se visualiza mejor en el reescalado de tableros.
+    };
     /** Opciones configuradas para ngx-echarts */
     chartOptions = {};
+    mergeOptions = {};
     constructor() {
         this.updateSubscription = this.updateSubject.pipe(debounceTime(150)).subscribe(options => {
             this.updateOptions(options);
@@ -175,7 +184,7 @@ class BaseEchartsComponent {
     onChartInit(instance) {
         this.chartInstance = instance;
         this.setupBaseInteractions();
-        this.updateChartOptions();
+        this.updateChartOptions({ notMerge: true });
     }
     /**
      * Configura interacciones base como el clic en el fondo para limpiar selección.
@@ -261,7 +270,7 @@ class BaseEchartsComponent {
      */
     onInputChanges(changes) {
         if (changes['data'] || changes['optionsOverrides'] || changes['palette'] || changes['colorResolver'] || changes['valueFormatter']) {
-            this.updateChartOptions();
+            this.updateChartOptions({ notMerge: true });
         }
     }
     /**
@@ -614,13 +623,13 @@ function getCommons(opts) {
  *
  */
 class RingBuilder {
-    product;
+    baseProduct;
     valueFormatter = (value) => value.toLocaleString();
     palette = [];
     colorResolver;
     result = {};
-    constructor(product) {
-        this.product = product;
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
     }
     reset() {
         this.result = {};
@@ -770,7 +779,7 @@ class VSECDirector {
         this.builder.setValueFormatter(valueFormatter);
         this.builder.setPalette(palette);
         this.builder.setValueFormatter(valueFormatter);
-        const product = this.builder.product;
+        const product = this.builder.baseProduct;
         const seriesOverrides = merge$1(product.baseOptions.series, overrides[product.chartKey].series);
         // chart components
         this.builder.addCommons();
@@ -792,7 +801,7 @@ class VSECDirector {
         this.builder.setValueFormatter(valueFormatter);
         this.builder.setPalette(palette);
         this.builder.setValueFormatter(valueFormatter);
-        const product = this.builder.product;
+        const product = this.builder.baseProduct;
         const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
         // chart components
         this.builder.addCommons();
@@ -815,7 +824,7 @@ class VSECDirector {
         this.builder.setValueFormatter(valueFormatter);
         this.builder.setPalette(palette);
         this.builder.setValueFormatter(valueFormatter);
-        const product = this.builder.product;
+        const product = this.builder.baseProduct;
         const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
         // chart components
         this.builder.addCommons();
@@ -832,7 +841,7 @@ class VSECDirector {
         this.builder.setValueFormatter(valueFormatter);
         this.builder.setPalette(palette);
         this.builder.setColorResolver(colorResolver);
-        const product = this.builder.product;
+        const product = this.builder.baseProduct;
         const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
         // chart components
         this.builder.addCommons();
@@ -876,13 +885,13 @@ class EchartsRingComponent extends BaseEchartsComponent {
         animationType: 'scale',
         animationEasing: 'elasticOut',
     };
-    product = {
+    baseProduct = {
         chartKey: 'ring',
         baseOptions: {
             series: this.baseSeriesOptions,
         }
     };
-    builder = new RingBuilder(this.product);
+    builder = new RingBuilder(this.baseProduct);
     director = new VSECDirector(this.builder);
     lastSelectedSeriesIndex = null;
     lastSelectedDataIndex = null;
@@ -973,7 +982,8 @@ class EchartsRingComponent extends BaseEchartsComponent {
         this.currentGraphicText = text;
         this.updateChartOptions();
     }
-    updateChartOptions() {
+    updateChartOptions(opts) {
+        const notMerge = opts?.notMerge ?? false;
         if (!this.chartInstance)
             return;
         if (!this.data)
@@ -1014,18 +1024,21 @@ class EchartsRingComponent extends BaseEchartsComponent {
                 selected: { ...this.currentLegendSelected }
             };
         }
-        // Gatillar actualización en ngx-echarts
-        this.triggerUpdate(options);
+        if (notMerge) {
+            // Gatillar actualización en ngx-echarts
+            this.triggerUpdate(options);
+        }
+        this.mergeOptions = { ...options };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsRingComponent, isStandalone: true, selector: "vs-echarts-ring", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"chartOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartLegendSelectChanged)=\"onLegendSelectChanged($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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsRingComponent, isStandalone: true, selector: "vs-echarts-ring", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"chartOptions\" \n  [merge]=\"mergeOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartLegendSelectChanged)=\"onLegendSelectChanged($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: EchartsRingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-ring', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"chartOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartLegendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"chartOptions\" \n  [merge]=\"mergeOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartLegendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -1036,14 +1049,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Puede verse utilizado en graficos como Lineas y Bars. Siempre que se pueda priorizar utilizar este.
  */
 class EChartBuilder {
-    product = undefined;
+    baseProduct = undefined;
     valueFormatter = (value) => value.toLocaleString();
     palette = [];
     // TODO: Hay que implementar un valor por defecto.
     colorResolver;
     result = {};
-    constructor(product) {
-        this.product = product;
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
     }
     reset() {
         this.result = {};
@@ -1242,13 +1255,13 @@ class EchartsBarComponent extends BaseEchartsComponent {
         }
     };
     // va a tener que estar en el base como "abstract".
-    product = {
+    baseProduct = {
         chartKey: 'bar',
         baseOptions: {
             series: this.baseSeriesOptions,
         }
     };
-    builder = new EChartBuilder(this.product);
+    builder = new EChartBuilder(this.baseProduct);
     director = new VSECDirector(this.builder);
     constructor() {
         super();
@@ -1356,14 +1369,14 @@ class EchartsBarComponent extends BaseEchartsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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: EchartsBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
 class EChartsHBarComponent extends EchartsBarComponent {
@@ -1373,13 +1386,13 @@ class EChartsHBarComponent extends EchartsBarComponent {
             borderRadius: [0, 4, 4, 0],
         }
     });
-    variantProduct = {
+    variantBaseProduct = {
         chartKey: 'hBar',
         baseOptions: {
             series: this.variantSeriesOptionsBase,
         }
     };
-    builder = new EChartBuilder(this.variantProduct);
+    builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     make(makeOpts) {
         makeOpts.axisTypes = {
@@ -1389,14 +1402,14 @@ class EChartsHBarComponent extends EchartsBarComponent {
         this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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: EChartsHBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
 class EChartsBarStackedComponent extends EchartsBarComponent {
@@ -1410,23 +1423,23 @@ class EChartsBarStackedComponent extends EchartsBarComponent {
             focus: 'series',
         }
     });
-    variantProduct = {
+    variantBaseProduct = {
         chartKey: 'barStacked',
         baseOptions: {
             series: this.variantSeriesOptionsBase,
         }
     };
-    builder = new EChartBuilder(this.variantProduct);
+    builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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: EChartsBarStackedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
 class EChartsHBarStackedComponent extends EchartsBarComponent {
@@ -1440,13 +1453,13 @@ class EChartsHBarStackedComponent extends EchartsBarComponent {
             focus: 'series',
         }
     });
-    variantProduct = {
+    variantBaseProduct = {
         chartKey: 'hBarStacked',
         baseOptions: {
             series: this.variantSeriesOptionsBase,
         }
     };
-    builder = new EChartBuilder(this.variantProduct);
+    builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     make(makeOpts) {
         makeOpts.axisTypes = {
@@ -1456,14 +1469,14 @@ class EChartsHBarStackedComponent extends EchartsBarComponent {
         this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarStackedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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: EChartsHBarStackedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
 class EChartsBarStackedRadialComponent extends EchartsBarComponent {
@@ -1478,26 +1491,26 @@ class EChartsBarStackedRadialComponent extends EchartsBarComponent {
         },
         coordinateSystem: 'polar',
     });
-    variantProduct = {
+    variantBaseProduct = {
         chartKey: 'barStackedRadial',
         baseOptions: {
             series: this.variantSeriesOptionsBase,
         }
     };
-    builder = new EChartBuilder(this.variantProduct);
+    builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     make(makeOpts) {
         this.director.makeBarRadial(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedRadialComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedRadialComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedRadialComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></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: EChartsBarStackedRadialComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
 /**
@@ -1608,13 +1621,13 @@ class EchartsLineComponent extends BaseEchartsComponent {
             }
         },
     };
-    product = {
+    baseProduct = {
         chartKey: 'line',
         baseOptions: {
             series: this.baseSeriesOptions,
         }
     };
-    builder = new EChartBuilder(this.product);
+    builder = new EChartBuilder(this.baseProduct);
     director = new VSECDirector(this.builder);
     constructor() {
         super();
@@ -1673,13 +1686,13 @@ class EChartsAreaComponent extends EchartsLineComponent {
         smooth: true,
         areaStyle: {},
     });
-    variantProduct = {
+    variantBaseProduct = {
         chartKey: 'area',
         baseOptions: {
             series: this.variantSeriesOptionsBase,
         }
     };
-    builder = new EChartBuilder(this.variantProduct);
+    builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"chartOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (legendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>", 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"] }] });
@@ -1698,13 +1711,13 @@ class EChartsAreaStackComponent extends EchartsLineComponent {
         areaStyle: {},
         stack: 'total',
     });
-    variantProduct = {
+    variantBaseProduct = {
         chartKey: 'areaStack',
         baseOptions: {
             series: this.variantSeriesOptionsBase,
         }
     };
-    builder = new EChartBuilder(this.variantProduct);
+    builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaStackComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaStackComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"chartOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (legendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>", 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"] }] });