@visionaris-bruno/vs-echarts 5.9.2 → 6.0.0

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

@@ -3,33 +3,14 @@ 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 merge from 'lodash/merge';
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, ViewChild, Directive, Component } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import merge from 'lodash/merge';
 import { CommonModule } from '@angular/common';
+import { merge as merge$1 } from 'lodash';
 
-/**
- * ECharts Options Standard Library
- *
- * Biblioteca de fragmentos de configuración y tokens de diseño para asegurar
- * una estética cohesiva en todos los gráficos de Visionaris.
- *
- * @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
-});
-/**
- * Formats a value using native browser SI suffixes (k, M, B).
- */
-function formatAxisValue(value) {
-    return compactFormatter.format(value);
-}
 /**
  * Global Design Tokens for ECharts
  */
@@ -48,265 +29,6 @@ const EChartsTokens = {
 function getDefaultPalette() {
     return [...EChartsTokens.defaultPalette];
 }
-/**
- * Common legend configuration with scroll to prevent "cannibalization".
- * Atomic Pattern: Provides the scrollable container with Visionaris styling.
- */
-function getLegendOptions(overrides) {
-    const defaults = {
-        show: true,
-        type: 'scroll',
-        orient: 'horizontal',
-        bottom: 0,
-        left: 'center',
-        height: 60,
-        textStyle: {
-            color: '#333',
-            fontSize: EChartsTokens.fontSize,
-            fontFamily: EChartsTokens.fontFamily
-        },
-        pageButtonPosition: 'end',
-        pageIconColor: EChartsTokens.primaryColor,
-        pageIconInactiveColor: '#ccc',
-        pageIconSize: 12,
-        pageTextStyle: {
-            color: '#666'
-        }
-    };
-    return merge({}, defaults, overrides);
-}
-function getCategoryAxisOptions(overrides) {
-    const categories = overrides?.data ?? [];
-    const autoRotate = categories.length > 10 ? 45 : 0;
-    const defaults = {
-        type: 'category',
-        triggerEvent: true,
-        data: categories,
-        axisLabel: {
-            rotate: autoRotate,
-            interval: 0,
-            fontFamily: EChartsTokens.fontFamily,
-            color: EChartsTokens.axisColor,
-            fontSize: EChartsTokens.fontSize,
-            margin: 8,
-            fontWeight: 'normal',
-            overflow: 'break',
-            width: 1000,
-        },
-        axisLine: {
-            lineStyle: {
-                color: EChartsTokens.lineColor
-            }
-        }
-    };
-    return merge({}, defaults, overrides);
-}
-function getValueAxisOptions(overrides) {
-    const defaults = {
-        type: 'value',
-        splitLine: {
-            show: true,
-            lineStyle: {
-                type: 'dashed',
-                color: '#f0f0f0'
-            }
-        },
-        axisLabel: {
-            formatter: (value) => formatAxisValue(value),
-            color: EChartsTokens.axisColor,
-            fontSize: EChartsTokens.fontSize
-        }
-    };
-    return merge({}, defaults, overrides);
-}
-/**
- * Callback function to dynamically position the tooltip inside the chart container boundaries.
- */
-function getTooltipPositionCallback(point, params, dom, rect, size) {
-    const [x, y] = point;
-    const tooltipWidth = size?.contentSize?.[0] || dom?.offsetWidth || 150;
-    const tooltipHeight = size?.contentSize?.[1] || dom?.offsetHeight || 100;
-    const containerWidth = size?.viewSize?.[0] || 400;
-    const containerHeight = size?.viewSize?.[1] || 300;
-    const offset = 15; // Safe distance from cursor
-    let posX = x - tooltipWidth / 2;
-    let posY = y - tooltipHeight - offset; // default: above the cursor
-    // Left and right boundary checks
-    if (posX < 0) {
-        // Overflows left boundary: place to the right of the cursor
-        posX = x + offset;
-    }
-    else if (posX + tooltipWidth > containerWidth) {
-        // Overflows right boundary: place to the left of the cursor
-        posX = x - tooltipWidth - offset;
-    }
-    // Final safety clamp to container boundaries
-    if (posX + tooltipWidth > containerWidth) {
-        posX = Math.max(0, containerWidth - tooltipWidth);
-    }
-    if (posX < 0) {
-        posX = 0;
-    }
-    // Top and bottom boundary checks
-    if (posY < 0) {
-        // Overflows top boundary: place below the cursor
-        posY = y + offset;
-    }
-    else if (posY + tooltipHeight > containerHeight) {
-        // Overflows bottom boundary: place above the cursor
-        posY = y - tooltipHeight - offset;
-    }
-    // Final safety clamp to container boundaries
-    if (posY + tooltipHeight > containerHeight) {
-        posY = Math.max(0, containerHeight - tooltipHeight);
-    }
-    if (posY < 0) {
-        posY = 0;
-    }
-    return [posX, posY];
-}
-/**
- * Common Tooltip configuration.
- * Atomic Pattern: Enforces consistent glassmorphism and pointer styles.
- */
-function getTooltipOptions(overrides) {
-    const trigger = overrides?.trigger || 'axis';
-    const isAxis = trigger === 'axis';
-    const defaults = {
-        show: true,
-        trigger: trigger,
-        position: getTooltipPositionCallback,
-        backgroundColor: EChartsTokens.tooltipBg,
-        borderColor: '#eee',
-        borderWidth: 1,
-        textStyle: {
-            color: '#333',
-            fontSize: 12
-        },
-        extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 8px;',
-        ...(isAxis ? {
-            axisPointer: {
-                type: 'shadow'
-            }
-        } : {})
-    };
-    return merge({}, defaults, overrides);
-}
-/**
- * Applies a visual selection effect to line-based series.
- * Highlights the selected series and point, and dims everything else.
- *
- * @param series The series array to modify
- * @param selectedCategoryIndex Index of the selected category
- * @param selectedSeriesIndex Index of the selected series
- * @returns Modified series array
- */
-function applyLineSelectionStyle(series, selectedCategoryIndex, selectedSeriesIndex) {
-    if (selectedCategoryIndex === null || !series)
-        return series;
-    return series.map((s, sIdx) => {
-        const isSelectedSeries = sIdx === selectedSeriesIndex;
-        // Serie seleccionada: Línea con opacidad 1 para que destaque la tendencia.
-        // Serie NO seleccionada: Opacidad 0.20 para atenuar fuertemente.
-        const seriesOpacity = isSelectedSeries ? 1 : 0.20;
-        return {
-            ...s,
-            emphasis: {
-                disabled: true // Deshabilitar el énfasis (hover) cuando hay una selección activa
-            },
-            itemStyle: {
-                ...s.itemStyle,
-                opacity: seriesOpacity
-            },
-            lineStyle: {
-                ...s.lineStyle,
-                opacity: seriesOpacity
-            },
-            ...(s.areaStyle ? {
-                areaStyle: {
-                    ...s.areaStyle,
-                    opacity: isSelectedSeries ? 0.6 : 0.1
-                }
-            } : {}),
-            // Personalizamos los puntos individualmente
-            data: (s.data || []).map((val, idx) => {
-                const isSelectedPoint = isSelectedSeries && idx === selectedCategoryIndex;
-                const isOtherPointInSelectedSeries = isSelectedSeries && idx !== selectedCategoryIndex;
-                const originalPoint = (val && typeof val === 'object') ? val : { value: val };
-                if (isSelectedPoint) {
-                    return {
-                        ...originalPoint,
-                        z: 10, // Asegurar que el punto seleccionado esté por encima de los demás
-                        itemStyle: {
-                            ...originalPoint.itemStyle,
-                            opacity: 1,
-                            borderWidth: 2,
-                            borderColor: '#fff',
-                            shadowBlur: 10,
-                            shadowColor: 'rgba(0,0,0,0.5)'
-                        },
-                        symbolSize: 12
-                    };
-                }
-                else if (isOtherPointInSelectedSeries) {
-                    // Puntos de la serie seleccionada que NO son el clicado: un poco más pequeños y traslúcidos
-                    return {
-                        ...originalPoint,
-                        itemStyle: {
-                            ...originalPoint.itemStyle,
-                            opacity: 0.5
-                        },
-                        symbolSize: 6
-                    };
-                }
-                // Puntos de otras series o por defecto
-                return val;
-            })
-        };
-    });
-}
-/**
- * Formatter generator for 'item' trigger strategy in tooltips.
- */
-function getItemTooltipFormatter(data, formatCellValue) {
-    return (params) => {
-        const seriesObj = data.series[params.seriesIndex];
-        const key = seriesObj?.originalKey || (data.categoryKeys ? data.categoryKeys[params.dataIndex] : String(params.dataIndex));
-        const valFormatted = formatCellValue(params.value, key);
-        return `<div style="text-align: center;"><b>${params.name}</b><br/>${params.marker} ${params.seriesName}<br/><b>${valFormatted}</b></div>`;
-    };
-}
-/**
- * Formatter generator for 'axis' trigger strategy in tooltips.
- */
-function getAxisTooltipFormatter(data, formatCellValue) {
-    return (params) => {
-        if (!params)
-            return '';
-        const items = Array.isArray(params) ? params : [params];
-        if (items.length === 0)
-            return '';
-        const firstItem = items[0];
-        let html = `<b>${firstItem.name}</b><br/>`;
-        for (const item of items) {
-            const seriesObj = data.series[item.seriesIndex];
-            if (!seriesObj)
-                continue;
-            const key = seriesObj.originalKey || (data.categoryKeys ? data.categoryKeys[item.dataIndex] : String(item.dataIndex));
-            const valFormatted = formatCellValue(item.value, key);
-            html += `${item.marker} ${item.seriesName}: <b>${valFormatted}</b><br/>`;
-        }
-        return html;
-    };
-}
-/**
- * Unified tooltip formatter generator that selects the appropriate strategy based on the trigger.
- */
-function getTooltipFormatter(trigger, data, formatCellValue) {
-    return trigger === 'axis'
-        ? getAxisTooltipFormatter(data, formatCellValue)
-        : getItemTooltipFormatter(data, formatCellValue);
-}
 
 /**
  * Inicialización centralizada de ECharts para evitar duplicación y efectos secundarios
@@ -367,75 +89,40 @@ function defaultOptionsOverrides() {
         area: {
             series: {
                 smooth: true,
-                areaStyle: {},
             },
         },
         areaStack: {
             series: {
                 smooth: true,
-                areaStyle: {},
-                stack: 'total',
             },
         },
         bar: {
-            // tooltip: {},
             series: {
                 showBackground: true,
             },
         },
         barStacked: {
-            // tooltip: {
-            //   trigger: 'axis',
-            // },
             series: {
                 showBackground: false,
-                stack: 'total',
-                itemStyle: {
-                    borderRadius: [0, 0, 0, 0],
-                },
-                emphasis: {
-                    focus: 'series',
-                }
             }
         },
         barStackedRadial: {
             series: {
                 showBackground: false,
-                stack: 'total',
-                itemStyle: {
-                    borderRadius: [0, 0, 0, 0],
-                },
-                emphasis: {
-                    focus: 'series',
-                },
-                coordinateSystem: 'polar',
             }
         },
         hBar: {
-            orientation: 'h',
-            // tooltip: {},
             series: {
                 showBackground: true,
-                itemStyle: {
-                    borderRadius: [0, 4, 4, 0],
-                }
             }
         },
         hBarStacked: {
-            orientation: 'h',
-            // tooltip: {
-            //   trigger: 'axis',
-            // },
             series: {
-                stack: 'total',
                 showBackground: false,
-                itemStyle: {
-                    borderRadius: [0, 0, 0, 0],
-                },
-                emphasis: {
-                    focus: 'series',
-                }
             }
+        },
+        ring: {
+            series: {}
         }
     };
 }
@@ -460,21 +147,21 @@ class BaseEchartsComponent {
     /** Formateador de valores para etiquetas y tooltips */
     valueFormatter;
     chartClick = new EventEmitter();
-    /** Opciones configuradas para ngx-echarts */
-    chartOptions = {};
     /** Subject para debouncing de actualizaciones. ReplaySubject asegura no perder el primer renderizado. */
     updateSubject = new ReplaySubject(1);
     updateSubscription;
-    constructor() {
-        this.updateSubscription = this.updateSubject.pipe(debounceTime(150)).subscribe(options => {
-            this.updateOptions(options);
-        });
-    }
     chartInstance;
     currentLegendSelected = null;
     /** Estado de selección para filtros cruzados */
     selectedCategoryIndex = null;
     selectedSeriesIndex = null;
+    /** Opciones configuradas para ngx-echarts */
+    chartOptions = {};
+    constructor() {
+        this.updateSubscription = this.updateSubject.pipe(debounceTime(150)).subscribe(options => {
+            this.updateOptions(options);
+        });
+    }
     ngOnChanges(changes) {
         this.onInputChanges(changes);
     }
@@ -583,124 +270,371 @@ class BaseEchartsComponent {
     triggerUpdate(options) {
         this.updateSubject.next(options);
     }
-    /**
-     * Método público para forzar el redimensionado desde el padre
-     */
-    resize() {
-        this.chartInstance?.resize();
+    /**
+     * Método público para forzar el redimensionado desde el padre
+     */
+    resize() {
+        this.chartInstance?.resize();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BaseEchartsComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.19", type: BaseEchartsComponent, isStandalone: true, inputs: { data: "data", optionsOverrides: ["optionsOverrides", "optionsOverrides", (values) => {
+                    return merge(defaultOptionsOverrides(), values || {});
+                }], palette: "palette", colorResolver: "colorResolver", valueFormatter: "valueFormatter" }, outputs: { chartClick: "chartClick" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BaseEchartsComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { chartContainer: [{
+                type: ViewChild,
+                args: ['chartContainer', { static: true }]
+            }], data: [{
+                type: Input
+            }], optionsOverrides: [{
+                type: Input,
+                args: [{
+                        "transform": (values) => {
+                            return merge(defaultOptionsOverrides(), values || {});
+                        }
+                    }]
+            }], palette: [{
+                type: Input
+            }], colorResolver: [{
+                type: Input
+            }], valueFormatter: [{
+                type: Input
+            }], chartClick: [{
+                type: Output
+            }] } });
+
+/**
+ * ECharts Builder utils
+ *
+ * Biblioteca de fragmentos de configuración y tokens de diseño para asegurar
+ * una estética cohesiva en todos los gráficos de Visionaris.
+ *
+ * @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
+});
+/**
+ * Formats a value using native browser SI suffixes (k, M, B).
+ */
+function formatAxisValue(value) {
+    return compactFormatter.format(value);
+}
+/**
+ * Common legend configuration with scroll to prevent "cannibalization".
+ * Atomic Pattern: Provides the scrollable container with Visionaris styling.
+ */
+function getLegendOptions(overrides) {
+    const defaults = {
+        show: true,
+        type: 'scroll',
+        orient: 'horizontal',
+        bottom: 0,
+        left: 'center',
+        height: 60,
+        textStyle: {
+            color: '#333',
+            fontSize: EChartsTokens.fontSize,
+            fontFamily: EChartsTokens.fontFamily
+        },
+        pageButtonPosition: 'end',
+        pageIconColor: EChartsTokens.primaryColor,
+        pageIconInactiveColor: '#ccc',
+        pageIconSize: 12,
+        pageTextStyle: {
+            color: '#666'
+        }
+    };
+    return merge({}, defaults, overrides);
+}
+function getCategoryAxisOptions(overrides) {
+    const categories = overrides?.data ?? [];
+    const autoRotate = categories.length > 10 ? 45 : 0;
+    const defaults = {
+        type: 'category',
+        triggerEvent: true,
+        data: categories,
+        axisLabel: {
+            rotate: autoRotate,
+            interval: 0,
+            fontFamily: EChartsTokens.fontFamily,
+            color: EChartsTokens.axisColor,
+            fontSize: EChartsTokens.fontSize,
+            margin: 8,
+            fontWeight: 'normal',
+            overflow: 'break',
+            width: 1000,
+        },
+        axisLine: {
+            lineStyle: {
+                color: EChartsTokens.lineColor
+            }
+        }
+    };
+    return merge({}, defaults, overrides);
+}
+function getValueAxisOptions(overrides) {
+    const defaults = {
+        type: 'value',
+        splitLine: {
+            show: true,
+            lineStyle: {
+                type: 'dashed',
+                color: '#f0f0f0'
+            }
+        },
+        axisLabel: {
+            formatter: (value) => formatAxisValue(value),
+            color: EChartsTokens.axisColor,
+            fontSize: EChartsTokens.fontSize
+        }
+    };
+    return merge({}, defaults, overrides);
+}
+/**
+ * Callback function to dynamically position the tooltip inside the chart container boundaries.
+ */
+function getTooltipPositionCallback(point, params, dom, rect, size) {
+    const [x, y] = point;
+    const tooltipWidth = size?.contentSize?.[0] || dom?.offsetWidth || 150;
+    const tooltipHeight = size?.contentSize?.[1] || dom?.offsetHeight || 100;
+    const containerWidth = size?.viewSize?.[0] || 400;
+    const containerHeight = size?.viewSize?.[1] || 300;
+    const offset = 15; // Safe distance from cursor
+    let posX = x - tooltipWidth / 2;
+    let posY = y - tooltipHeight - offset; // default: above the cursor
+    // Left and right boundary checks
+    if (posX < 0) {
+        // Overflows left boundary: place to the right of the cursor
+        posX = x + offset;
+    }
+    else if (posX + tooltipWidth > containerWidth) {
+        // Overflows right boundary: place to the left of the cursor
+        posX = x - tooltipWidth - offset;
+    }
+    // Final safety clamp to container boundaries
+    if (posX + tooltipWidth > containerWidth) {
+        posX = Math.max(0, containerWidth - tooltipWidth);
+    }
+    if (posX < 0) {
+        posX = 0;
+    }
+    // Top and bottom boundary checks
+    if (posY < 0) {
+        // Overflows top boundary: place below the cursor
+        posY = y + offset;
+    }
+    else if (posY + tooltipHeight > containerHeight) {
+        // Overflows bottom boundary: place above the cursor
+        posY = y - tooltipHeight - offset;
+    }
+    // Final safety clamp to container boundaries
+    if (posY + tooltipHeight > containerHeight) {
+        posY = Math.max(0, containerHeight - tooltipHeight);
+    }
+    if (posY < 0) {
+        posY = 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BaseEchartsComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.19", type: BaseEchartsComponent, isStandalone: true, inputs: { data: "data", optionsOverrides: ["optionsOverrides", "optionsOverrides", (values) => {
-                    return merge(defaultOptionsOverrides(), values || {});
-                }], palette: "palette", colorResolver: "colorResolver", valueFormatter: "valueFormatter" }, outputs: { chartClick: "chartClick" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
+    return [posX, posY];
+}
+/**
+ * Common Tooltip configuration.
+ * Atomic Pattern: Enforces consistent glassmorphism and pointer styles.
+ */
+function getTooltipOptions(overrides) {
+    const trigger = overrides?.trigger || 'axis';
+    const isAxis = trigger === 'axis';
+    const defaults = {
+        show: true,
+        trigger: trigger,
+        position: getTooltipPositionCallback,
+        backgroundColor: EChartsTokens.tooltipBg,
+        borderColor: '#eee',
+        borderWidth: 1,
+        textStyle: {
+            color: '#333',
+            fontSize: 12
+        },
+        extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 8px;',
+        ...(isAxis ? {
+            axisPointer: {
+                type: 'shadow'
+            }
+        } : {})
+    };
+    return merge({}, defaults, overrides);
+}
+/**
+ * Applies a visual selection effect to line-based series.
+ * Highlights the selected series and point, and dims everything else.
+ *
+ * @param series The series array to modify
+ * @param selectedCategoryIndex Index of the selected category
+ * @param selectedSeriesIndex Index of the selected series
+ * @returns Modified series array
+ */
+function applyLineSelectionStyle$1(series, selectedCategoryIndex, selectedSeriesIndex) {
+    if (selectedCategoryIndex === null || !series)
+        return series;
+    return series.map((s, sIdx) => {
+        const isSelectedSeries = sIdx === selectedSeriesIndex;
+        // Serie seleccionada: Línea con opacidad 1 para que destaque la tendencia.
+        // Serie NO seleccionada: Opacidad 0.20 para atenuar fuertemente.
+        const seriesOpacity = isSelectedSeries ? 1 : 0.20;
+        return {
+            ...s,
+            emphasis: {
+                disabled: true // Deshabilitar el énfasis (hover) cuando hay una selección activa
+            },
+            itemStyle: {
+                ...s.itemStyle,
+                opacity: seriesOpacity
+            },
+            lineStyle: {
+                ...s.lineStyle,
+                opacity: seriesOpacity
+            },
+            ...(s.areaStyle ? {
+                areaStyle: {
+                    ...s.areaStyle,
+                    opacity: isSelectedSeries ? 0.6 : 0.1
+                }
+            } : {}),
+            // Personalizamos los puntos individualmente
+            data: (s.data || []).map((val, idx) => {
+                const isSelectedPoint = isSelectedSeries && idx === selectedCategoryIndex;
+                const isOtherPointInSelectedSeries = isSelectedSeries && idx !== selectedCategoryIndex;
+                const originalPoint = (val && typeof val === 'object') ? val : { value: val };
+                if (isSelectedPoint) {
+                    return {
+                        ...originalPoint,
+                        z: 10, // Asegurar que el punto seleccionado esté por encima de los demás
+                        itemStyle: {
+                            ...originalPoint.itemStyle,
+                            opacity: 1,
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                            shadowBlur: 10,
+                            shadowColor: 'rgba(0,0,0,0.5)'
+                        },
+                        symbolSize: 12
+                    };
+                }
+                else if (isOtherPointInSelectedSeries) {
+                    // Puntos de la serie seleccionada que NO son el clicado: un poco más pequeños y traslúcidos
+                    return {
+                        ...originalPoint,
+                        itemStyle: {
+                            ...originalPoint.itemStyle,
+                            opacity: 0.5
+                        },
+                        symbolSize: 6
+                    };
+                }
+                // Puntos de otras series o por defecto
+                return val;
+            })
+        };
+    });
+}
+/**
+ * Formatter generator for 'item' trigger strategy in tooltips.
+ */
+function getItemTooltipFormatter(data, formatCellValue) {
+    return (params) => {
+        const seriesObj = data.series[params.seriesIndex];
+        const key = seriesObj?.originalKey || (data.categoryKeys ? data.categoryKeys[params.dataIndex] : String(params.dataIndex));
+        const valFormatted = formatCellValue(params.value, key);
+        return `<div style="text-align: center;"><b>${params.name}</b><br/>${params.marker} ${params.seriesName}<br/><b>${valFormatted}</b></div>`;
+    };
+}
+/**
+ * Formatter generator for 'axis' trigger strategy in tooltips.
+ */
+function getAxisTooltipFormatter(data, formatCellValue) {
+    return (params) => {
+        if (!params)
+            return '';
+        const items = Array.isArray(params) ? params : [params];
+        if (items.length === 0)
+            return '';
+        const firstItem = items[0];
+        let html = `<b>${firstItem.name}</b><br/>`;
+        for (const item of items) {
+            const seriesObj = data.series[item.seriesIndex];
+            if (!seriesObj)
+                continue;
+            const key = seriesObj.originalKey || (data.categoryKeys ? data.categoryKeys[item.dataIndex] : String(item.dataIndex));
+            const valFormatted = formatCellValue(item.value, key);
+            html += `${item.marker} ${item.seriesName}: <b>${valFormatted}</b><br/>`;
+        }
+        return html;
+    };
+}
+/**
+ * Unified tooltip formatter generator that selects the appropriate strategy based on the trigger.
+ */
+function getTooltipFormatter(trigger, data, formatCellValue) {
+    return trigger === 'axis'
+        ? getAxisTooltipFormatter(data, formatCellValue)
+        : getItemTooltipFormatter(data, formatCellValue);
+}
+function getCommons(opts) {
+    const palette = opts?.palette ?? getDefaultPalette();
+    const common = {
+        backgroundColor: 'transparent',
+        textStyle: {
+            fontFamily: "'Inter', 'Roboto', 'Open Sans', sans-serif",
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            top: '20px',
+            containLabel: true,
+        },
+    };
+    // Aplicar paleta global: Prioridad Palette Inyectada > Default Visionaris
+    common.color = (palette && palette.length > 0) ? palette : getDefaultPalette();
+    return common;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BaseEchartsComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true
-                }]
-        }], ctorParameters: () => [], propDecorators: { chartContainer: [{
-                type: ViewChild,
-                args: ['chartContainer', { static: true }]
-            }], data: [{
-                type: Input
-            }], optionsOverrides: [{
-                type: Input,
-                args: [{
-                        "transform": (values) => {
-                            return merge(defaultOptionsOverrides(), values || {});
-                        }
-                    }]
-            }], palette: [{
-                type: Input
-            }], colorResolver: [{
-                type: Input
-            }], valueFormatter: [{
-                type: Input
-            }], chartClick: [{
-                type: Output
-            }] } });
 
 /**
- * BaseEchartBuilder
+ * RingBuilder
  *
- * Clase base para la construcción de opciones de ECharts.
- * Implementa lógica compartida de paletas y opciones comunes.
+ * Builder concreto para el grafico de Ring.
  *
- * @see {@link vs-echarts/docs/internal-architecture.md}
  */
-class BaseEchartBuilder {
+class RingBuilder {
+    product;
     valueFormatter = (value) => value.toLocaleString();
     palette = [];
-    // TODO: Hay que implementar un valor por defecto.
     colorResolver;
-    constructor() { }
-    /**
-     * Permite inyectar un formateador de valores externo.
-     */
-    setValueFormatter(formatter) {
-        if (formatter) {
-            this.valueFormatter = formatter;
-        }
-    }
-    /**
-     * Permite inyectar una paleta de colores básica.
-     */
-    setPalette(palette) {
-        if (palette) {
-            this.palette = palette;
-        }
+    result = {};
+    constructor(product) {
+        this.product = product;
     }
-    /**
-     * Permite inyectar un resolver de colores dinámico.
-     */
-    setColorResolver(resolver) {
-        if (resolver) {
-            this.colorResolver = resolver;
-        }
+    reset() {
+        this.result = {};
     }
-    /**
-     * Retorna configuraciones comunes para todos los gráficos.
-     *
-     * TODO: particionar en configuraciones concretas con sus
-     * respectivos overrides.
-     */
-    getCommonOptions(overrides) {
-        const common = {
-            backgroundColor: 'transparent',
-            textStyle: {
-                fontFamily: "'Inter', 'Roboto', 'Open Sans', sans-serif"
-            },
-            grid: {
-                left: '3%',
-                right: '4%',
-                bottom: '15%',
-                top: '20px',
-                containLabel: true
-            }
+    addCommons() {
+        const opts = {
+            palette: this.palette,
         };
-        // Aplicar paleta global: Prioridad Palette Inyectada > Default Visionaris
-        common.color = (this.palette && this.palette.length > 0) ? this.palette : getDefaultPalette();
-        return common;
-    }
-    /**
-     * Formatea un valor utilizando el callback inyectado.
-     */
-    formatCellValue(value, key) {
-        return this.valueFormatter(value, key);
+        const common = getCommons(opts);
+        merge(this.result, common);
     }
-}
-
-/**
- * RingBuilder
- *
- * Especializado en construir opciones para gráficos de tipo Ring (Donas concéntricas).
- * @see {@link vs-echarts/docs/charts/ring-patterns.md}
- */
-class RingBuilder extends BaseEchartBuilder {
-    build(data, overrides) {
+    addSeries(data, overrides) {
         if (!data || !data.series.length)
-            return {};
+            return;
         const totalRings = data.series.length; // Cada serie es un anillo
         // Configuración dinámica de radios y márgenes
         const margin = totalRings > 1 ? Math.max(0.5, 2.5 - (totalRings * 0.1)) : 0;
@@ -718,81 +652,194 @@ class RingBuilder extends BaseEchartBuilder {
                 value: s.data[catIndex],
                 originalMeassureKey: s.originalKey || (data.categoryKeys ? data.categoryKeys[catIndex] : '')
             }));
-            const seriesOption = {
+            const dynamicRingSeriesOptions = {
                 name: s.name,
-                type: 'pie',
                 radius: [`${inner}%`, `${outer}%`],
-                center: ['50%', '50%'],
-                avoidLabelOverlap: true,
-                minAngle: 3,
-                selectedMode: 'single',
-                selectedOffset: 4,
                 itemStyle: {
                     borderRadius: borderRadius,
-                    borderColor: '#fff',
-                    borderWidth: borderWidth
+                    borderWidth: borderWidth,
                 },
-                label: { show: false },
                 emphasis: {
-                    scale: true,
-                    scaleSize: 2,
                     itemStyle: {
-                        borderColor: '#fff',
-                        borderWidth: borderWidth
-                    }
+                        borderWidth: borderWidth,
+                    },
                 },
                 select: {
                     itemStyle: {
-                        borderColor: '#fff',
-                        borderWidth: borderWidth
-                    }
+                        borderWidth: borderWidth,
+                    },
                 },
-                animationType: 'scale',
-                animationEasing: 'elasticOut',
                 data: pieData,
-                id: `ring_${ringIndex}`
+                id: `ring_${ringIndex}`,
             };
+            const seriesOption = merge(dynamicRingSeriesOptions, overrides);
             // Inyectar el resolver de color si existe
-            if (this.colorResolver) {
+            if (this.colorResolver && seriesOption.itemStyle) {
                 seriesOption.itemStyle.color = this.colorResolver;
             }
             return seriesOption;
         });
-        const common = this.getCommonOptions(overrides);
-        return {
-            ...common,
-            tooltip: {
-                ...getTooltipOptions({ trigger: 'item' }),
-                formatter: (params) => {
-                    const key = params.data.originalMeassureKey || '';
-                    const valFormatted = this.formatCellValue(params.value, key);
-                    const seriesHeader = totalRings > 1 ? `<b>${params.seriesName}</b><br/>` : '';
-                    return `${seriesHeader}${params.name}<br/>${params.marker} <b>${valFormatted}</b> (${params.percent}%)`;
-                }
+        this.result.series = series;
+    }
+    addGraphic() {
+        // Add graphic element for the center KPI
+        this.result.graphic = [{
+                id: 'center-kpi',
+                type: 'text',
+                left: 'center',
+                top: 'middle',
+                z: 100,
+                transition: ['style'],
+                style: {
+                    text: '',
+                    fontSize: 22,
+                    fontWeight: 'bold',
+                    fill: '#333',
+                    stroke: '#fff',
+                    lineWidth: 1,
+                    paintOrder: 'stroke',
+                    textAlign: 'center',
+                    textVerticalAlign: 'middle',
+                    opacity: 0,
+                },
+            }];
+    }
+    addTooltip(data, overrides) {
+        const totalRings = data.series.length;
+        merge(overrides, {
+            formatter: (params) => {
+                const key = params.data.originalMeassureKey || '';
+                const valFormatted = this.formatCellValue(params.value, key);
+                const seriesHeader = totalRings > 1 ? `<b>${params.seriesName}</b><br/>` : '';
+                return `${seriesHeader}${params.name}<br/>${params.marker} <b>${valFormatted}</b> (${params.percent}%)`;
             },
-            legend: getLegendOptions(),
-            graphic: [{
-                    id: 'center-kpi',
-                    type: 'text',
-                    left: 'center',
-                    top: 'middle',
-                    z: 100,
-                    transition: ['style'],
-                    style: {
-                        text: '',
-                        fontSize: 22,
-                        fontWeight: 'bold',
-                        fill: '#333',
-                        stroke: '#fff',
-                        lineWidth: 1,
-                        paintOrder: 'stroke',
-                        textAlign: 'center',
-                        textVerticalAlign: 'middle',
-                        opacity: 0
-                    }
-                }],
-            series: series,
-        };
+        });
+        const tooltip = getTooltipOptions(overrides);
+        this.result.tooltip = tooltip;
+    }
+    addLegend() {
+        this.result.legend = getLegendOptions();
+    }
+    // No-ops for ring charts
+    addPolar() { }
+    addXAxis(data, overrides, type) { }
+    addYAxis(data, overrides, type) { }
+    addRadiusAxis(data, overrides) { }
+    addAngleAxis(data, overrides) { }
+    // Callback setters
+    setValueFormatter(formatter) {
+        if (formatter) {
+            this.valueFormatter = formatter;
+        }
+    }
+    setPalette(palette) {
+        if (palette) {
+            this.palette = palette;
+        }
+    }
+    setColorResolver(resolver) {
+        if (resolver) {
+            this.colorResolver = resolver;
+        }
+    }
+    getResult() {
+        return this.result;
+    }
+    formatCellValue(value, key) {
+        return this.valueFormatter(value, key);
+    }
+}
+
+/**
+ * Director de Builds.
+ */
+class VSECDirector {
+    builder = undefined;
+    constructor(builder) {
+        this.builder = builder;
+    }
+    makeBar(data, overrides, opts = {}) {
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
+            x: 'category',
+            y: 'value',
+            // TODO agregar radius y angle axis
+        } } = opts;
+        this.builder.reset();
+        // El orden importa, primero callbaks y despues componentes.
+        //chart callbacks
+        this.builder.setValueFormatter(valueFormatter);
+        this.builder.setPalette(palette);
+        this.builder.setValueFormatter(valueFormatter);
+        const product = this.builder.product;
+        const seriesOverrides = merge$1(product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        this.builder.addSeries(data, seriesOverrides);
+        this.builder.addXAxis(data, overrides.axis, axisTypes.x);
+        this.builder.addYAxis(data, overrides.axis, axisTypes.y);
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addLegend();
+    }
+    makeBarRadial(data, overrides, opts = {}) {
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
+            x: 'category',
+            y: 'value',
+            // TODO agregar radius y angle axis
+        } } = opts;
+        this.builder.reset();
+        // El orden importa, primero callbaks y despues componentes.
+        //chart callbacks
+        this.builder.setValueFormatter(valueFormatter);
+        this.builder.setPalette(palette);
+        this.builder.setValueFormatter(valueFormatter);
+        const product = this.builder.product;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        this.builder.addSeries(data, seriesOverrides);
+        this.builder.addPolar();
+        this.builder.addAngleAxis(data, overrides['axis']);
+        this.builder.addRadiusAxis(data, overrides['axis']);
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addLegend();
+    }
+    makeLine(data, overrides, opts = {}) {
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
+            x: 'category',
+            y: 'value',
+            // TODO agregar radius y angle axis
+        } } = opts;
+        this.builder.reset();
+        // El orden importa, primero callbaks y despues componentes.
+        //chart callbacks
+        this.builder.setValueFormatter(valueFormatter);
+        this.builder.setPalette(palette);
+        this.builder.setValueFormatter(valueFormatter);
+        const product = this.builder.product;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        this.builder.addSeries(data, seriesOverrides);
+        this.builder.addXAxis(data, overrides.axis, axisTypes.x);
+        this.builder.addYAxis(data, overrides.axis, axisTypes.y);
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addLegend();
+    }
+    makeRing(data, overrides, opts = {}) {
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
+        this.builder.reset();
+        // El orden importa, primero callbacks y despues componentes.
+        this.builder.setValueFormatter(valueFormatter);
+        this.builder.setPalette(palette);
+        this.builder.setColorResolver(colorResolver);
+        const product = this.builder.product;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        this.builder.addSeries(data, seriesOverrides);
+        this.builder.addGraphic();
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addLegend();
     }
 }
 
@@ -803,14 +850,49 @@ class RingBuilder extends BaseEchartBuilder {
  * @see {@link vs-echarts/docs/charts/ring-patterns.md}
  */
 class EchartsRingComponent extends BaseEchartsComponent {
+    baseSeriesOptions = {
+        type: 'pie',
+        center: ['50%', '50%'],
+        avoidLabelOverlap: true,
+        minAngle: 3,
+        selectedMode: 'single',
+        selectedOffset: 4,
+        itemStyle: {
+            borderColor: '#fff',
+        },
+        label: { show: false },
+        emphasis: {
+            scale: true,
+            scaleSize: 2,
+            itemStyle: {
+                borderColor: '#fff',
+            },
+        },
+        select: {
+            itemStyle: {
+                borderColor: '#fff',
+            },
+        },
+        animationType: 'scale',
+        animationEasing: 'elasticOut',
+    };
+    product = {
+        chartKey: 'ring',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        }
+    };
+    builder = new RingBuilder(this.product);
+    director = new VSECDirector(this.builder);
     lastSelectedSeriesIndex = null;
     lastSelectedDataIndex = null;
     selectedPercent = null;
     currentGraphicText = '';
-    builder;
     constructor() {
         super();
-        this.builder = new RingBuilder();
+    }
+    make(makeOpts) {
+        this.director.makeRing(this.data, this.optionsOverrides, makeOpts);
     }
     onInputChanges(changes) {
         // Reset selection only if data changed
@@ -897,15 +979,14 @@ class EchartsRingComponent extends BaseEchartsComponent {
         if (!this.data)
             return;
         // 1. Configuramos el builder (Formateadores, Colores, etc se manejan en la base)
-        // Pero aquí necesitamos llamar a super o duplicar la lógica de inyección de inputs
-        if (this.valueFormatter)
-            this.builder.setValueFormatter(this.valueFormatter);
-        if (this.palette)
-            this.builder.setPalette(this.palette);
-        if (this.colorResolver)
-            this.builder.setColorResolver(this.colorResolver);
+        const makeOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+        };
+        this.make(makeOpts);
         // 2. Obtenemos las bases del chart usando el builder
-        let options = this.builder.build(this.data, this.optionsOverrides);
+        let options = this.builder.getResult();
         // 3. Persistencia de GRAPHIC (KPI central)
         if (options.graphic && Array.isArray(options.graphic)) {
             const graphic = options.graphic[0];
@@ -948,359 +1029,276 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
         }], ctorParameters: () => [] });
 
 /**
- * VerticalBandsBuilder
+ * Builder principal.
+ *
+ * Es muy completo, tiene soporte para ejes y sistema cartesiano polar.
  *
- * Especializado en construir opciones para gráficos de barras verticales.
- * @see {@link vs-echarts/docs/charts/vertical-bands-patterns.md}
+ * Puede verse utilizado en graficos como Lineas y Bars. Siempre que se pueda priorizar utilizar este.
  */
-class VerticalBandsBuilder extends BaseEchartBuilder {
-    constructor() {
-        super();
+class EChartBuilder {
+    product = undefined;
+    valueFormatter = (value) => value.toLocaleString();
+    palette = [];
+    // TODO: Hay que implementar un valor por defecto.
+    colorResolver;
+    result = {};
+    constructor(product) {
+        this.product = product;
+    }
+    reset() {
+        this.result = {};
+    }
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        merge$1(this.result, getCommons(opts));
     }
-    build(data, overrides) {
+    /**
+     *
+     * @param data
+     * @param overrides
+     * @returns
+     */
+    addSeries(data, overrides) {
         if (!data || !data.series.length)
-            return {};
+            return;
         const series = data.series.map((s) => {
-            const seriesOption = {
+            const dynamicOverrides = {
                 name: s.name,
-                type: 'bar',
-                barMaxWidth: 50,
-                barGap: '15%',
-                barCategoryGap: '35%',
-                animation: true,
-                animationDuration: 1000,
-                animationEasing: 'cubicOut',
-                itemStyle: {
-                    borderRadius: [4, 4, 0, 0]
-                },
                 data: s.data,
-                emphasis: {
-                    focus: 'none'
-                },
-                blur: {
-                    itemStyle: {
-                        opacity: 0.2
-                    }
-                },
-                select: {
-                    itemStyle: {
-                        opacity: 1,
-                        shadowBlur: 10,
-                        shadowColor: 'rgba(0,0,0,0.3)'
-                    }
-                },
                 label: {
-                    show: false,
-                    position: 'top',
                     formatter: (params) => {
                         const key = s.originalKey || (data.categoryKeys ? data.categoryKeys[params.dataIndex] : String(params.dataIndex));
                         return this.formatCellValue(params.value, key);
                     }
                 }
             };
+            const seriesOption = merge$1(dynamicOverrides, overrides);
             // Inyectar el resolver de color si existe
-            if (this.colorResolver) {
+            if (this.colorResolver && seriesOption.itemStyle) {
                 seriesOption.itemStyle.color = this.colorResolver;
             }
             return seriesOption;
         });
-        const common = this.getCommonOptions(overrides);
-        const categoryAxisOptions = {
-            ...overrides.axis.categoryAxis[0],
-            data: data.categories,
-        };
-        const { trigger = 'axis' } = overrides.tooltip || {};
-        const tooltipOptionsOverrides = {
-            trigger,
-        };
-        return {
-            ...common,
-            tooltip: {
-                ...getTooltipOptions(tooltipOptionsOverrides),
-                formatter: getTooltipFormatter(trigger, data, this.formatCellValue.bind(this)),
+        this.result.series = series;
+    }
+    /**
+     * TODO: Mejorar funcion, no me convence como se implemento el tooltip formatter.
+     * @param data
+     * @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);
+        this.result.tooltip = tooltip;
+    }
+    addPolar() {
+        const polar = [];
+        polar.push({
+            radius: '65%',
+            center: ["50%", "44%"],
+        });
+        this.result.polar = polar;
+    }
+    addXAxis(data, overrides, type = 'category') {
+        const xAxis = [];
+        const categoryAxisOptions = this.getCategoryAxisOptions(data, overrides);
+        const valueAxisOptions = this.getValueAxisOptions(data, overrides);
+        if (type == 'category') {
+            xAxis.push(categoryAxisOptions);
+        }
+        else if (type == 'value') {
+            xAxis.push(valueAxisOptions);
+        }
+        this.result.xAxis = xAxis;
+    }
+    addYAxis(data, overrides, type = 'value') {
+        const yAxis = [];
+        const categoryAxisOptions = this.getCategoryAxisOptions(data, overrides);
+        const valueAxisOptions = this.getValueAxisOptions(data, overrides);
+        if (type == 'category') {
+            yAxis.push(categoryAxisOptions);
+        }
+        else if (type == 'value') {
+            yAxis.push(valueAxisOptions);
+        }
+        this.result.yAxis = yAxis;
+    }
+    addRadiusAxis(data, overrides) {
+        const radiusAxis = [];
+        /** estilos exclusivos hardcodeados para el eje de valores del sistema de coordenadas polar*/
+        const radiusAxisOverrides = {
+            axisTick: {
+                show: false,
             },
-            legend: getLegendOptions(),
-            xAxis: [getCategoryAxisOptions(categoryAxisOptions)],
-            yAxis: [getValueAxisOptions()],
-            series: series
+            axisLabel: {
+                margin: 2,
+                fontSize: 8,
+                align: 'right',
+                rotate: 20,
+                verticalAlign: 'top',
+            },
+            axisLine: {
+                lineStyle: {
+                    type: 'dashed',
+                },
+            }
         };
+        const radialAxisOptions = getValueAxisOptions(radiusAxisOverrides);
+        radiusAxis.push(radialAxisOptions);
+        this.result.radiusAxis = radiusAxis;
     }
-}
-
-/**
- * EchartsVerticalBandsComponent
- *
- * Especialista en visualización de bandas/barras verticales.
- * Implementa patrones de interacción ZRender y resaltado de grupos.
- * @see {@link vs-echarts/docs/charts/vertical-bands-patterns.md}
- */
-class EchartsVerticalBandsComponent extends BaseEchartsComponent {
-    builder;
-    constructor() {
-        super();
-        this.builder = new VerticalBandsBuilder();
+    addAngleAxis(data, overrides) {
+        const angleAxis = [];
+        const categoryAxisOptions = this.getCategoryAxisOptions(data, overrides);
+        angleAxis.push(categoryAxisOptions);
+        this.result.angleAxis = angleAxis;
     }
-    onChartInit(instance) {
-        super.onChartInit(instance);
-        this.setupAdditionalInteractions();
+    addLegend() {
+        this.result.legend = getLegendOptions();
     }
-    onInputChanges(changes) {
-        if (changes['data']) {
-            this.selectedCategoryIndex = null;
-            this.selectedSeriesIndex = null;
-            this.currentLegendSelected = null;
+    // No-ops for ring charts
+    addGraphic() { }
+    getResult() {
+        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.
+     */
+    setValueFormatter(formatter) {
+        if (formatter) {
+            this.valueFormatter = formatter;
         }
-        super.onInputChanges(changes);
     }
-    setupAdditionalInteractions() {
-        if (!this.chartInstance)
-            return;
-        // 1. ZRender click for background "sectors" (Specific to bands)
-        const zr = this.chartInstance.getZr();
-        zr.on('click', (params) => {
-            if (!params.target) {
-                const pointInPixel = [params.offsetX, params.offsetY];
-                if (this.chartInstance.containPixel('grid', pointInPixel)) {
-                    const xIndexResult = this.chartInstance.convertFromPixel({ xAxisIndex: 0 }, pointInPixel);
-                    const xIndex = Array.isArray(xIndexResult) ? xIndexResult[0] : xIndexResult;
-                    if (typeof xIndex === 'number' && xIndex >= 0) {
-                        this.handleSelection(xIndex, -1); // Use -1 or null to indicate sector selection without specific series
-                    }
-                }
-            }
-        });
-        // 2. Mouseover for Group Highlighting
-        this.chartInstance.on('mouseover', (params) => {
-            if (params.dataIndex !== undefined) {
-                this.highlightSector(params.dataIndex);
-            }
-        });
-        this.chartInstance.on('mouseout', () => {
-            this.clearHighlight();
-        });
+    /**
+     * Permite inyectar una paleta de colores básica.
+     */
+    setPalette(palette) {
+        if (palette) {
+            this.palette = palette;
+        }
     }
-    highlightSector(index) {
-        if (!this.chartInstance || this.selectedCategoryIndex !== null)
-            return;
-        const seriesCount = Array.isArray(this.chartOptions.series) ? this.chartOptions.series.length : 0;
-        this.chartInstance.dispatchAction({
-            type: 'highlight',
-            seriesIndex: Array.from({ length: seriesCount }, (_, i) => i),
-            dataIndex: index
-        });
+    /**
+     * Permite inyectar un resolver de colores dinámico.
+     */
+    setColorResolver(resolver) {
+        if (resolver) {
+            this.colorResolver = resolver;
+        }
     }
-    clearHighlight() {
-        if (!this.chartInstance)
-            return;
-        const seriesCount = Array.isArray(this.chartOptions.series) ? this.chartOptions.series.length : 0;
-        this.chartInstance.dispatchAction({
-            type: 'downplay',
-            seriesIndex: Array.from({ length: seriesCount }, (_, i) => i)
-        });
+    // Utils
+    getCategoryAxisOptions(data, overrides) {
+        const categoryAxisOptionsOverrides = {
+            ...overrides.categoryAxis[0],
+            data: data.categories,
+        };
+        const categoryAxisOptions = getCategoryAxisOptions(categoryAxisOptionsOverrides);
+        return categoryAxisOptions;
+    }
+    getValueAxisOptions(data, overrides) {
+        const valueAxisOptions = getValueAxisOptions();
+        return valueAxisOptions;
     }
+}
+
+class EchartsBarComponent extends BaseEchartsComponent {
     /**
-     * Maneja clics en la leyenda para persistir filtros.
+     * Opciones escenciales inmutables estaticas comunes a todos los charts de barras.
      */
-    onLegendSelectChanged(event) {
-        if (event && event.selected) {
-            this.currentLegendSelected = event.selected;
-            this.updateChartOptions();
+    baseSeriesOptions = {
+        type: 'bar',
+        barMaxWidth: 50,
+        barGap: '15%',
+        barCategoryGap: '35%',
+        animation: true,
+        animationDuration: 1000,
+        animationEasing: 'cubicOut',
+        itemStyle: {
+            borderRadius: [4, 4, 0, 0],
+        },
+        stack: undefined,
+        emphasis: {
+            focus: 'none'
+        },
+        showBackground: true,
+        backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.2)' // gris claro
+        },
+        label: {
+            show: false,
+            position: 'top',
+        }
+    };
+    // va a tener que estar en el base como "abstract".
+    product = {
+        chartKey: 'bar',
+        baseOptions: {
+            series: this.baseSeriesOptions,
         }
+    };
+    builder = new EChartBuilder(this.product);
+    director = new VSECDirector(this.builder);
+    constructor() {
+        super();
+    }
+    // va a tener que estar en el base como "abstract".
+    make(makeOpts) {
+        this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
     }
     updateChartOptions() {
         if (!this.chartInstance)
             return;
         if (!this.data)
             return;
-        // 1. Configuramos el builder (Formateadores, Colores, etc se manejan en la base)
-        if (this.valueFormatter)
-            this.builder.setValueFormatter(this.valueFormatter);
-        if (this.palette)
-            this.builder.setPalette(this.palette);
-        if (this.colorResolver)
-            this.builder.setColorResolver(this.colorResolver);
-        // 2. Obtenemos las bases del chart usando el builder
-        let baseOptions = this.builder.build(this.data, this.optionsOverrides);
-        // 3. Re-apply legend selection state if exists
+        const makeBarOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+        };
+        this.make(makeBarOpts);
+        const baseOptions = this.builder.getResult();
         if (this.currentLegendSelected && baseOptions.legend) {
             baseOptions.legend.selected = { ...this.currentLegendSelected };
         }
-        // 4. Apply persistent selection style if a sector is selected
         if (this.selectedCategoryIndex !== null && baseOptions.series) {
-            const seriesArray = baseOptions.series;
-            baseOptions.series = seriesArray.map((s, sIdx) => {
-                if (s.type === 'bar' && Array.isArray(s.data)) {
-                    return {
-                        ...s,
-                        emphasis: {
-                            disabled: true
-                        },
-                        data: s.data.map((val, idx) => {
-                            const isSelected = idx === this.selectedCategoryIndex;
-                            const isBarSelected = isSelected && sIdx === this.selectedSeriesIndex;
-                            const itemVal = (val && typeof val === 'object' && val.value !== undefined) ? val.value : val;
-                            return {
-                                value: itemVal,
-                                itemStyle: {
-                                    opacity: isSelected ? (isBarSelected ? 1 : 0.5) : 0.15,
-                                    borderWidth: 0
-                                }
-                            };
-                        })
-                    };
-                }
-                return s;
-            });
-        }
-        this.triggerUpdate(baseOptions);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsVerticalBandsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsVerticalBandsComponent, isStandalone: true, selector: "vs-echarts-vertical-bands", 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>\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: EchartsVerticalBandsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vs-echarts-vertical-bands', standalone: true, imports: [
-                        CommonModule,
-                        NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], 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>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
-        }], ctorParameters: () => [] });
-
-/**
- * BarBuilder
- *
- * Especializado en construir opciones para gráficos de barras generales.
- */
-class BarBuilder extends BaseEchartBuilder {
-    constructor() {
-        super();
-    }
-    build(data, overrides) {
-        if (!data || !data.series.length)
-            return {};
-        const { itemStyle, emphasis = { focus: 'none' }, stack = undefined, showBackground = false, coordinateSystem = 'cartesian2d', } = overrides.bar.series;
-        const itStBorderRadius = itemStyle?.borderRadius ?? [4, 4, 0, 0];
-        const emphasisFocus = emphasis.focus ?? 'none';
-        const series = data.series.map((s) => {
-            const seriesOption = {
-                name: s.name,
-                type: 'bar',
-                barMaxWidth: 50,
-                barGap: '15%',
-                barCategoryGap: '35%',
-                animation: true,
-                animationDuration: 1000,
-                animationEasing: 'cubicOut',
-                coordinateSystem,
-                itemStyle: {
-                    borderRadius: itStBorderRadius,
-                },
-                data: s.data,
-                stack,
-                emphasis: {
-                    focus: emphasisFocus
-                },
-                showBackground,
-                backgroundStyle: {
-                    color: 'rgba(180, 180, 180, 0.2)' // gris claro
-                },
-                label: {
-                    show: false,
-                    position: 'top',
-                    formatter: (params) => {
-                        const key = s.originalKey || (data.categoryKeys ? data.categoryKeys[params.dataIndex] : String(params.dataIndex));
-                        return this.formatCellValue(params.value, key);
-                    }
-                }
-            };
-            // Inyectar el resolver de color si existe
-            if (this.colorResolver && seriesOption.itemStyle) {
-                seriesOption.itemStyle.color = this.colorResolver;
-            }
-            return seriesOption;
-        });
-        const common = this.getCommonOptions(overrides);
-        const xAxis = [];
-        const yAxis = [];
-        const radiusAxis = [];
-        const polar = [];
-        const angleAxis = [];
-        const categoryAxisOptionsOverrides = {
-            ...overrides.axis.categoryAxis[0],
-            data: data.categories,
-        };
-        const categoryAxisOptions = getCategoryAxisOptions(categoryAxisOptionsOverrides);
-        const valueAxisOptions = getValueAxisOptions();
-        if (coordinateSystem == "polar") {
-            // polar coord system.
-            /** estilos exclusivos hardcodeados para el eje de valores del sistema de coordenadas polar*/
-            const radiusAxisOverrides = {
-                axisTick: {
-                    show: false,
-                },
-                axisLabel: {
-                    margin: 2,
-                    fontSize: 8,
-                    align: 'right',
-                    rotate: 20,
-                    verticalAlign: 'top',
-                },
-                axisLine: {
-                    lineStyle: {
-                        type: 'dashed',
-                    },
+            const seriesArray = baseOptions.series;
+            baseOptions.series = seriesArray.map((s, sIdx) => {
+                if (s.type === 'bar' && Array.isArray(s.data)) {
+                    return {
+                        ...s,
+                        emphasis: {
+                            disabled: true
+                        },
+                        data: s.data.map((val, idx) => {
+                            const isSelected = idx === this.selectedCategoryIndex;
+                            const isBarSelected = isSelected && sIdx === this.selectedSeriesIndex;
+                            const itemVal = (val && typeof val === 'object' && val.value !== undefined) ? val.value : val;
+                            return {
+                                value: itemVal,
+                                itemStyle: {
+                                    opacity: isSelected ? (isBarSelected ? 1 : 0.5) : 0.15,
+                                    borderWidth: 0
+                                }
+                            };
+                        })
+                    };
                 }
-            };
-            angleAxis.push(categoryAxisOptions);
-            const radialAxisOptions = getValueAxisOptions(radiusAxisOverrides);
-            radiusAxis.push(radialAxisOptions);
-            polar.push({
-                radius: '65%',
-                center: ["50%", "44%"],
+                return s;
             });
         }
-        else {
-            // cartesian 2d coord system.
-            if (overrides.bar.orientation === 'h') {
-                xAxis.push(valueAxisOptions);
-                yAxis.push(categoryAxisOptions);
-            }
-            else {
-                xAxis.push(categoryAxisOptions);
-                yAxis.push(valueAxisOptions);
-            }
-        }
-        const { trigger = 'item' } = overrides.tooltip;
-        const tooltipOptionsOverrides = {
-            trigger,
-        };
-        return {
-            ...common,
-            tooltip: {
-                ...getTooltipOptions(tooltipOptionsOverrides),
-                formatter: getTooltipFormatter(trigger, data, this.formatCellValue.bind(this))
-            },
-            legend: getLegendOptions(),
-            xAxis,
-            yAxis,
-            radiusAxis,
-            angleAxis,
-            polar,
-            series: series
-        };
-    }
-}
-
-/**
- * EchartsBarComponent
- *
- * Componente especialista para visualización de gráficos de barras.
- * Implementa patrones de interacción ZRender y resaltado de grupos.
- */
-class EchartsBarComponent extends BaseEchartsComponent {
-    builder;
-    constructor() {
-        super();
-        this.builder = new BarBuilder();
+        this.triggerUpdate(baseOptions);
     }
     onChartInit(instance) {
         super.onChartInit(instance);
@@ -1357,49 +1355,6 @@ class EchartsBarComponent extends BaseEchartsComponent {
             this.updateChartOptions();
         }
     }
-    updateChartOptions() {
-        if (!this.chartInstance)
-            return;
-        if (!this.data)
-            return;
-        if (this.valueFormatter)
-            this.builder.setValueFormatter(this.valueFormatter);
-        if (this.palette)
-            this.builder.setPalette(this.palette);
-        if (this.colorResolver)
-            this.builder.setColorResolver(this.colorResolver);
-        let baseOptions = this.builder.build(this.data, this.optionsOverrides);
-        if (this.currentLegendSelected && baseOptions.legend) {
-            baseOptions.legend.selected = { ...this.currentLegendSelected };
-        }
-        if (this.selectedCategoryIndex !== null && baseOptions.series) {
-            const seriesArray = baseOptions.series;
-            baseOptions.series = seriesArray.map((s, sIdx) => {
-                if (s.type === 'bar' && Array.isArray(s.data)) {
-                    return {
-                        ...s,
-                        emphasis: {
-                            disabled: true
-                        },
-                        data: s.data.map((val, idx) => {
-                            const isSelected = idx === this.selectedCategoryIndex;
-                            const isBarSelected = isSelected && sIdx === this.selectedSeriesIndex;
-                            const itemVal = (val && typeof val === 'object' && val.value !== undefined) ? val.value : val;
-                            return {
-                                value: itemVal,
-                                itemStyle: {
-                                    opacity: isSelected ? (isBarSelected ? 1 : 0.5) : 0.15,
-                                    borderWidth: 0
-                                }
-                            };
-                        })
-                    };
-                }
-                return s;
-            });
-        }
-        this.triggerUpdate(baseOptions);
-    }
     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"] }] });
 }
@@ -1411,86 +1366,258 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], 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"] }]
         }], ctorParameters: () => [] });
 
-class LineBuilder extends BaseEchartBuilder {
-    constructor() {
-        super();
-    }
-    build(data, overrides) {
-        if (!data || !data.series.length)
-            return {};
-        const { areaStyle = undefined, stack = undefined, smooth = true, } = overrides.line.series;
-        const series = data.series.map((s) => {
-            const seriesOption = {
-                name: s.name,
-                type: 'line',
-                animation: true,
-                animationDuration: 1000,
-                animationEasing: 'cubicOut',
-                data: s.data,
-                smooth,
-                smoothMonotone: 'x',
-                symbolSize: 6,
-                itemStyle: {
-                    shadowColor: 'rgba(0, 0, 0, 0.2)',
-                    shadowBlur: 5,
-                    shadowOffsetY: 2,
-                },
-                lineStyle: {
-                    width: 2,
-                    shadowColor: 'rgba(0, 0, 0, 0.2)',
-                    shadowBlur: 8,
-                    shadowOffsetY: 6,
-                    cap: 'round',
-                    join: 'round',
-                },
-                emphasis: {
-                    focus: 'none',
-                    itemStyle: {
-                        borderWidth: 2,
-                        shadowBlur: 10,
-                    },
-                    lineStyle: {
-                        width: 4,
-                        shadowBlur: 12,
-                    }
-                },
-                areaStyle,
-                stack,
-            };
-            // Inyectar el resolver de color si existe
-            if (this.colorResolver && seriesOption.itemStyle != undefined) {
-                seriesOption.itemStyle.color = this.colorResolver;
-            }
-            return seriesOption;
-        });
-        const common = this.getCommonOptions(overrides);
-        const categoryAxisOptions = {
-            ...overrides.axis.categoryAxis[0],
-            data: data.categories,
+class EChartsHBarComponent extends EchartsBarComponent {
+    variantSeriesOptionsBase = merge$1(this.baseSeriesOptions, {
+        showBackground: false,
+        itemStyle: {
+            borderRadius: [0, 4, 4, 0],
+        }
+    });
+    variantProduct = {
+        chartKey: 'hBar',
+        baseOptions: {
+            series: this.variantSeriesOptionsBase,
+        }
+    };
+    builder = new EChartBuilder(this.variantProduct);
+    director = new VSECDirector(this.builder);
+    make(makeOpts) {
+        makeOpts.axisTypes = {
+            x: 'value',
+            y: 'category',
         };
-        const { trigger = 'item' } = overrides.tooltip;
-        const tooltipOptionsOverrides = {
-            trigger,
+        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"] }] });
+}
+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"] }]
+        }] });
+
+class EChartsBarStackedComponent extends EchartsBarComponent {
+    variantSeriesOptionsBase = merge$1(this.baseSeriesOptions, {
+        showBackground: false,
+        stack: 'total',
+        itemStyle: {
+            borderRadius: [0, 0, 0, 0],
+        },
+        emphasis: {
+            focus: 'series',
+        }
+    });
+    variantProduct = {
+        chartKey: 'barStacked',
+        baseOptions: {
+            series: this.variantSeriesOptionsBase,
+        }
+    };
+    builder = new EChartBuilder(this.variantProduct);
+    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"] }] });
+}
+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"] }]
+        }] });
+
+class EChartsHBarStackedComponent extends EchartsBarComponent {
+    variantSeriesOptionsBase = merge$1(this.baseSeriesOptions, {
+        showBackground: false,
+        stack: 'total',
+        itemStyle: {
+            borderRadius: [0, 0, 0, 0],
+        },
+        emphasis: {
+            focus: 'series',
+        }
+    });
+    variantProduct = {
+        chartKey: 'hBarStacked',
+        baseOptions: {
+            series: this.variantSeriesOptionsBase,
+        }
+    };
+    builder = new EChartBuilder(this.variantProduct);
+    director = new VSECDirector(this.builder);
+    make(makeOpts) {
+        makeOpts.axisTypes = {
+            x: 'value',
+            y: 'category',
         };
+        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"] }] });
+}
+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"] }]
+        }] });
+
+class EChartsBarStackedRadialComponent extends EchartsBarComponent {
+    variantSeriesOptionsBase = merge$1(this.baseSeriesOptions, {
+        showBackground: false,
+        stack: 'total',
+        itemStyle: {
+            borderRadius: [0, 0, 0, 0],
+        },
+        emphasis: {
+            focus: 'series',
+        },
+        coordinateSystem: 'polar',
+    });
+    variantProduct = {
+        chartKey: 'barStackedRadial',
+        baseOptions: {
+            series: this.variantSeriesOptionsBase,
+        }
+    };
+    builder = new EChartBuilder(this.variantProduct);
+    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"] }] });
+}
+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"] }]
+        }] });
+
+/**
+ * Applies a visual selection effect to line-based series.
+ * Highlights the selected series and point, and dims everything else.
+ *
+ * @param series The series array to modify
+ * @param selectedCategoryIndex Index of the selected category
+ * @param selectedSeriesIndex Index of the selected series
+ * @returns Modified series array
+ */
+function applyLineSelectionStyle(series, selectedCategoryIndex, selectedSeriesIndex) {
+    if (selectedCategoryIndex === null || !series)
+        return series;
+    return series.map((s, sIdx) => {
+        const isSelectedSeries = sIdx === selectedSeriesIndex;
+        // Serie seleccionada: Línea con opacidad 1 para que destaque la tendencia.
+        // Serie NO seleccionada: Opacidad 0.20 para atenuar fuertemente.
+        const seriesOpacity = isSelectedSeries ? 1 : 0.20;
         return {
-            ...common,
-            tooltip: {
-                ...getTooltipOptions(tooltipOptionsOverrides),
-                formatter: getTooltipFormatter(trigger, data, this.formatCellValue.bind(this)),
+            ...s,
+            emphasis: {
+                disabled: true // Deshabilitar el énfasis (hover) cuando hay una selección activa
+            },
+            itemStyle: {
+                ...s.itemStyle,
+                opacity: seriesOpacity
+            },
+            lineStyle: {
+                ...s.lineStyle,
+                opacity: seriesOpacity
             },
-            legend: getLegendOptions(),
-            xAxis: [getCategoryAxisOptions(categoryAxisOptions)],
-            yAxis: [getValueAxisOptions()],
-            series: series
+            ...(s.areaStyle ? {
+                areaStyle: {
+                    ...s.areaStyle,
+                    opacity: isSelectedSeries ? 0.6 : 0.1
+                }
+            } : {}),
+            // Personalizamos los puntos individualmente
+            data: (s.data || []).map((val, idx) => {
+                const isSelectedPoint = isSelectedSeries && idx === selectedCategoryIndex;
+                const isOtherPointInSelectedSeries = isSelectedSeries && idx !== selectedCategoryIndex;
+                const originalPoint = (val && typeof val === 'object') ? val : { value: val };
+                if (isSelectedPoint) {
+                    return {
+                        ...originalPoint,
+                        z: 10, // Asegurar que el punto seleccionado esté por encima de los demás
+                        itemStyle: {
+                            ...originalPoint.itemStyle,
+                            opacity: 1,
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                            shadowBlur: 10,
+                            shadowColor: 'rgba(0,0,0,0.5)'
+                        },
+                        symbolSize: 12
+                    };
+                }
+                else if (isOtherPointInSelectedSeries) {
+                    // Puntos de la serie seleccionada que NO son el clicado: un poco más pequeños y traslúcidos
+                    return {
+                        ...originalPoint,
+                        itemStyle: {
+                            ...originalPoint.itemStyle,
+                            opacity: 0.5
+                        },
+                        symbolSize: 6
+                    };
+                }
+                // Puntos de otras series o por defecto
+                return val;
+            })
         };
-    }
+    });
 }
 
 class EchartsLineComponent extends BaseEchartsComponent {
-    builder;
+    baseSeriesOptions = {
+        type: 'line',
+        animation: true,
+        animationDuration: 1000,
+        animationEasing: 'cubicOut',
+        smooth: true,
+        smoothMonotone: 'x',
+        symbolSize: 6,
+        itemStyle: {
+            shadowColor: 'rgba(0, 0, 0, 0.2)',
+            shadowBlur: 5,
+            shadowOffsetY: 2,
+        },
+        lineStyle: {
+            width: 2,
+            shadowColor: 'rgba(0, 0, 0, 0.2)',
+            shadowBlur: 8,
+            shadowOffsetY: 6,
+            cap: 'round',
+            join: 'round',
+        },
+        emphasis: {
+            focus: 'none',
+            itemStyle: {
+                borderWidth: 2,
+                shadowBlur: 10,
+            },
+            lineStyle: {
+                width: 4,
+                shadowBlur: 12,
+            }
+        },
+    };
+    product = {
+        chartKey: 'line',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        }
+    };
+    builder = new EChartBuilder(this.product);
+    director = new VSECDirector(this.builder);
     constructor() {
         super();
-        this.builder = new LineBuilder();
     }
     onInputChanges(changes) {
         if (changes['data']) {
@@ -1500,41 +1627,96 @@ class EchartsLineComponent extends BaseEchartsComponent {
         }
         super.onInputChanges(changes);
     }
+    make(makeOpts) {
+        this.director.makeLine(this.data, this.optionsOverrides, makeOpts);
+    }
     updateChartOptions() {
         if (!this.chartInstance)
             return;
         if (!this.data)
             return;
-        // 1. Configuramos el builder (Formateadores, Colores, etc se manejan en la base)
-        if (this.valueFormatter)
-            this.builder.setValueFormatter(this.valueFormatter);
-        if (this.palette)
-            this.builder.setPalette(this.palette);
-        if (this.colorResolver)
-            this.builder.setColorResolver(this.colorResolver);
-        // 2. Obtenemos las bases del chart usando el builder
-        let baseOptions = this.builder.build(this.data, this.optionsOverrides);
-        // 3. Re-apply legend selection state if exists
+        // 1.
+        const makeBarOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+        };
+        this.make(makeBarOpts);
+        const baseOptions = this.builder.getResult();
+        // 2. Re-apply legend selection state if exists
         if (this.currentLegendSelected && baseOptions.legend) {
             baseOptions.legend.selected = { ...this.currentLegendSelected };
         }
-        // 4. Apply persistent selection style if a point is selected
+        //3.  Apply persistent selection style if a point is selected
         if (this.selectedCategoryIndex !== null && baseOptions.series) {
             baseOptions.series = applyLineSelectionStyle(baseOptions.series, this.selectedCategoryIndex, this.selectedSeriesIndex);
         }
         this.triggerUpdate(baseOptions);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsLineComponent, isStandalone: true, selector: "vs-echarts-line", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsLineComponent, isStandalone: true, selector: "vs-echarts-line", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsLineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-line', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], 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"] }]
+                    ], providers: [
+                        provideVSEcharts(),
+                    ], 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"] }]
         }], ctorParameters: () => [] });
 
+class EChartsAreaComponent extends EchartsLineComponent {
+    variantSeriesOptionsBase = merge$1(this.baseSeriesOptions, {
+        smooth: true,
+        areaStyle: {},
+    });
+    variantProduct = {
+        chartKey: 'area',
+        baseOptions: {
+            series: this.variantSeriesOptionsBase,
+        }
+    };
+    builder = new EChartBuilder(this.variantProduct);
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], providers: [provideVSEcharts()], 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"] }]
+        }] });
+
+class EChartsAreaStackComponent extends EchartsLineComponent {
+    variantSeriesOptionsBase = merge$1(this.baseSeriesOptions, {
+        smooth: true,
+        areaStyle: {},
+        stack: 'total',
+    });
+    variantProduct = {
+        chartKey: 'areaStack',
+        baseOptions: {
+            series: this.variantSeriesOptionsBase,
+        }
+    };
+    builder = new EChartBuilder(this.variantProduct);
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], providers: [provideVSEcharts()], 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"] }]
+        }] });
+
 // Interfaces de Inputs de Base EChart Component //
 
 ;
@@ -1549,5 +1731,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseEchartsComponent, EchartsBarComponent, EchartsLineComponent, EchartsRingComponent, EchartsVerticalBandsComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
+export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EchartsBarComponent, EchartsLineComponent, EchartsRingComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
 //# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map