@visionaris-bruno/vs-echarts 3.0.0 → 3.3.0

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

@@ -9,236 +9,6 @@ import { ReplaySubject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 
-/**
- * Inicialización centralizada de ECharts para evitar duplicación y efectos secundarios
- * no controlados en componentes standalone.
- */
-let initialized = false;
-function initializeEcharts() {
-    if (initialized)
-        return;
-    echarts.use([
-        BarChart,
-        PieChart,
-        LineChart,
-        TitleComponent,
-        TooltipComponent,
-        GridComponent,
-        LegendComponent,
-        CanvasRenderer,
-        GraphicComponent,
-        ToolboxComponent,
-    ]);
-    initialized = true;
-}
-/**
- * Provee la configuración de ECharts para ngx-echarts.
- * Llama automáticamente a la inicialización de módulos.
- */
-function provideVSEcharts() {
-    initializeEcharts();
-    return provideEchartsCore({ echarts });
-}
-function defaultOptionsOverrides() {
-    return {
-        line: {
-            series: {
-                smooth: true,
-                areaStyle: undefined,
-                stack: undefined,
-            },
-        },
-        area: {
-            series: {
-                smooth: true,
-                areaStyle: {},
-                stack: undefined,
-            },
-        },
-        areaStack: {
-            series: {
-                smooth: true,
-                areaStyle: {},
-                stack: 'total',
-            },
-        },
-    };
-}
-
-/**
- * BaseEchartsComponent
- *
- * Clase base para componentes especialistas de ECharts.
- * Gestiona el ciclo de vida, redimensionado dinámico y debouncing de actualizaciones.
- *
- * @see {@link vs-echarts/docs/internal-architecture.md}
- */
-class BaseEchartsComponent {
-    chartContainer;
-    /** Datos normalizados para graficar */
-    data = { categories: [], series: [] };
-    optionsOverrides = defaultOptionsOverrides();
-    /** Paleta de colores básica */
-    palette;
-    /** Resolver de colores dinámico (Callback) */
-    colorResolver;
-    /** 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;
-    ngOnChanges(changes) {
-        this.onInputChanges(changes);
-    }
-    ngOnDestroy() {
-        this.updateSubscription?.unsubscribe();
-        this.chartInstance?.dispose();
-    }
-    /**
-     * Captura la instancia de echarts (usado por ngx-echarts)
-     */
-    onChartInit(instance) {
-        this.chartInstance = instance;
-        this.setupBaseInteractions();
-        this.updateChartOptions();
-    }
-    /**
-     * Configura interacciones base como el clic en el fondo para limpiar selección.
-     */
-    setupBaseInteractions() {
-        if (!this.chartInstance)
-            return;
-        const zr = this.chartInstance.getZr();
-        zr.on('click', (params) => {
-            if (!params.target) {
-                this.clearSelection();
-            }
-        });
-    }
-    onChartClick(event) {
-        if (event.componentType === 'series') {
-            const index = event.dataIndex;
-            const seriesIndex = event.seriesIndex;
-            if (index !== undefined && index >= 0) {
-                this.handleSelection(index, seriesIndex);
-                // Emit standardized payload for cross-filtering
-                this.chartClick.emit({
-                    type: 'cross-filter',
-                    data: {
-                        category: event.name,
-                        serie: event.seriesName,
-                        value: event.value
-                    }
-                });
-            }
-        }
-    }
-    /**
-     * Maneja la lógica de alternancia de selección.
-     */
-    handleSelection(dataIndex, seriesIndex) {
-        const isSamePoint = this.selectedCategoryIndex === dataIndex && this.selectedSeriesIndex === seriesIndex;
-        if (isSamePoint) {
-            this.clearSelection();
-        }
-        else {
-            this.selectedCategoryIndex = dataIndex;
-            this.selectedSeriesIndex = seriesIndex;
-            this.updateChartOptions();
-        }
-    }
-    /**
-     * Limpia el estado de selección actual.
-     */
-    clearSelection() {
-        this.selectedCategoryIndex = null;
-        this.selectedSeriesIndex = null;
-        this.updateChartOptions();
-    }
-    dispatchAction(type, d) {
-        if (this.chartInstance == undefined)
-            return;
-        const { seriesIndex = [], dataIndex = [], } = d;
-        this.chartInstance.dispatchAction({
-            type,
-            seriesIndex,
-            dataIndex,
-        });
-    }
-    /**
-   * Maneja clics en la leyenda para persistir filtros.
-   */
-    onLegendSelectChanged(event) {
-        if (event && event.selected) {
-            this.currentLegendSelected = event.selected;
-            this.updateChartOptions();
-        }
-    }
-    updateOptions(options) {
-        this.chartOptions = { ...options };
-        this.chartInstance?.setOption(options, { notMerge: true });
-    }
-    /**
-     * Hook de template method invocado por `ngOnChanges`.
-     * Las subclases lo sobreescriben para añadir lógica propia
-     * y deben llamar a `super.onInputChanges(changes)` para preservar
-     * el comportamiento base (detectar inputs relevantes y actualizar el chart).
-     */
-    onInputChanges(changes) {
-        if (changes['data'] || changes['optionsOverrides'] || changes['palette'] || changes['colorResolver'] || changes['valueFormatter']) {
-            this.updateChartOptions();
-        }
-    }
-    /**
-   * Gatilla actualización en ngx-echarts
-   */
-    triggerUpdate(options) {
-        this.updateSubject.next(options);
-    }
-    /**
-     * 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: "14.0.0", version: "20.3.19", type: BaseEchartsComponent, isStandalone: true, inputs: { data: "data", optionsOverrides: "optionsOverrides", 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
-            }], palette: [{
-                type: Input
-            }], colorResolver: [{
-                type: Input
-            }], valueFormatter: [{
-                type: Input
-            }], chartClick: [{
-                type: Output
-            }] } });
-
 /**
  * ECharts Options Standard Library
  *
@@ -304,21 +74,23 @@ function getLegendOptions(overrides) {
     };
     return { ...defaults, ...overrides };
 }
-/**
- * Common XAxis configuration for category-based charts.
- * Atomic Pattern: Handles category mapping and adaptive label rotation.
- */
-function getXAxisOptions(overrides) {
-    const categories = overrides?.data || [];
+function getCategoryAxisOptions(overrides) {
+    const categories = overrides?.data ?? [];
     const autoRotate = categories.length > 10 ? 45 : 0;
-    const defaults = {
+    const axisOpts = {
         type: 'category',
         triggerEvent: true,
+        data: categories,
         axisLabel: {
             rotate: autoRotate,
             interval: 0,
-            color: EChartsTokens.axisColor,
-            fontSize: EChartsTokens.fontSize
+            fontFamily: overrides?.axisLabel?.fontFamily ?? EChartsTokens.fontFamily,
+            color: overrides?.axisLabel?.color ?? EChartsTokens.axisColor,
+            fontSize: overrides?.axisLabel?.fontSize ?? EChartsTokens.fontSize,
+            margin: overrides?.axisLabel?.margin ?? 8,
+            fontWeight: overrides?.axisLabel?.fontWeight ?? 'normal',
+            overflow: 'break',
+            width: overrides?.axisLabel?.width ?? 1000,
         },
         axisLine: {
             lineStyle: {
@@ -326,16 +98,38 @@ function getXAxisOptions(overrides) {
             }
         }
     };
-    // Deep merge for axisLabel if provided
+    return axisOpts;
+}
+/**
+ *
+ *TODO: mejorar sistema de 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
+        }
+    };
     const result = { ...defaults, ...overrides };
-    if (overrides?.axisLabel) {
-        result.axisLabel = { ...defaults.axisLabel, ...overrides.axisLabel };
+    if (overrides?.splitLine) {
+        result.splitLine = { ...defaults.splitLine, ...overrides.splitLine };
     }
     return result;
 }
 /**
- * Common YAxis configuration for value-based charts.
- * Atomic Pattern: Standardizes value formatting and grid lines.
+ *
+ *TODO: Eliminar funcion. Se debe eliminar la funcion y reemplazarla por getValueAxis o
+ * getCategoryAxis segun corresponda.
  */
 function getYAxisOptions(overrides) {
     const defaults = {
@@ -458,6 +252,277 @@ function applyLineSelectionStyle(series, selectedCategoryIndex, selectedSeriesIn
         };
     });
 }
+/**
+ * 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 `<b>${params.name}</b><br/>${params.marker} ${params.seriesName}: <b>${valFormatted}</b><br/>`;
+    };
+}
+
+/**
+ * Inicialización centralizada de ECharts para evitar duplicación y efectos secundarios
+ * no controlados en componentes standalone.
+ */
+let initialized = false;
+function initializeEcharts() {
+    if (initialized)
+        return;
+    echarts.use([
+        BarChart,
+        PieChart,
+        LineChart,
+        TitleComponent,
+        TooltipComponent,
+        GridComponent,
+        LegendComponent,
+        CanvasRenderer,
+        GraphicComponent,
+        ToolboxComponent,
+    ]);
+    initialized = true;
+}
+/**
+ * Provee la configuración de ECharts para ngx-echarts.
+ * Llama automáticamente a la inicialización de módulos.
+ */
+function provideVSEcharts() {
+    initializeEcharts();
+    return provideEchartsCore({ echarts });
+}
+function defaultOptionsOverrides() {
+    return {
+        mainAxis: {
+            categoryAxis: [
+                {
+                    axisLabel: {
+                        fontFamily: EChartsTokens.fontFamily,
+                        width: 100,
+                        fontSize: 9,
+                        margin: 12,
+                        color: EChartsTokens.axisColor,
+                        fontWeight: 'normal',
+                    }
+                }
+            ]
+        },
+        line: {
+            series: {
+                smooth: true,
+                areaStyle: undefined,
+                stack: undefined,
+            },
+        },
+        area: {
+            series: {
+                smooth: true,
+                areaStyle: {},
+                stack: undefined,
+            },
+        },
+        areaStack: {
+            series: {
+                smooth: true,
+                areaStyle: {},
+                stack: 'total',
+            },
+        },
+        bar: {
+            orientation: 'v',
+            series: {
+                itemStyle: {
+                    borderRadius: [0, 4, 4, 0],
+                }
+            },
+        },
+        hBar: {
+            orientation: 'h',
+            series: {
+                itemStyle: {
+                    borderRadius: [0, 4, 4, 0],
+                }
+            }
+        },
+    };
+}
+
+/**
+ * BaseEchartsComponent
+ *
+ * Clase base para componentes especialistas de ECharts.
+ * Gestiona el ciclo de vida, redimensionado dinámico y debouncing de actualizaciones.
+ *
+ * @see {@link vs-echarts/docs/internal-architecture.md}
+ */
+class BaseEchartsComponent {
+    chartContainer;
+    /** Datos normalizados para graficar */
+    data = { categories: [], series: [] };
+    optionsOverrides = defaultOptionsOverrides();
+    /** Paleta de colores básica */
+    palette;
+    /** Resolver de colores dinámico (Callback) */
+    colorResolver;
+    /** 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;
+    ngOnChanges(changes) {
+        this.onInputChanges(changes);
+    }
+    ngOnDestroy() {
+        this.updateSubscription?.unsubscribe();
+        this.chartInstance?.dispose();
+    }
+    /**
+     * Captura la instancia de echarts (usado por ngx-echarts)
+     */
+    onChartInit(instance) {
+        this.chartInstance = instance;
+        this.setupBaseInteractions();
+        this.updateChartOptions();
+    }
+    /**
+     * Configura interacciones base como el clic en el fondo para limpiar selección.
+     */
+    setupBaseInteractions() {
+        if (!this.chartInstance)
+            return;
+        const zr = this.chartInstance.getZr();
+        zr.on('click', (params) => {
+            if (!params.target) {
+                this.clearSelection();
+            }
+        });
+    }
+    onChartClick(event) {
+        if (event.componentType === 'series') {
+            const index = event.dataIndex;
+            const seriesIndex = event.seriesIndex;
+            if (index !== undefined && index >= 0) {
+                this.handleSelection(index, seriesIndex);
+                // Emit standardized payload for cross-filtering
+                this.chartClick.emit({
+                    type: 'cross-filter',
+                    data: {
+                        category: event.name,
+                        serie: event.seriesName,
+                        value: event.value
+                    }
+                });
+            }
+        }
+    }
+    /**
+     * Maneja la lógica de alternancia de selección.
+     */
+    handleSelection(dataIndex, seriesIndex) {
+        const isSamePoint = this.selectedCategoryIndex === dataIndex && this.selectedSeriesIndex === seriesIndex;
+        if (isSamePoint) {
+            this.clearSelection();
+        }
+        else {
+            this.selectedCategoryIndex = dataIndex;
+            this.selectedSeriesIndex = seriesIndex;
+            this.updateChartOptions();
+        }
+    }
+    /**
+     * Limpia el estado de selección actual.
+     */
+    clearSelection() {
+        this.selectedCategoryIndex = null;
+        this.selectedSeriesIndex = null;
+        this.updateChartOptions();
+    }
+    dispatchAction(type, d) {
+        if (this.chartInstance == undefined)
+            return;
+        const { seriesIndex = [], dataIndex = [], } = d;
+        this.chartInstance.dispatchAction({
+            type,
+            seriesIndex,
+            dataIndex,
+        });
+    }
+    /**
+   * Maneja clics en la leyenda para persistir filtros.
+   */
+    onLegendSelectChanged(event) {
+        if (event && event.selected) {
+            this.currentLegendSelected = event.selected;
+            this.updateChartOptions();
+        }
+    }
+    updateOptions(options) {
+        this.chartOptions = { ...options };
+        this.chartInstance?.setOption(options, { notMerge: true });
+    }
+    /**
+     * Hook de template method invocado por `ngOnChanges`.
+     * Las subclases lo sobreescriben para añadir lógica propia
+     * y deben llamar a `super.onInputChanges(changes)` para preservar
+     * el comportamiento base (detectar inputs relevantes y actualizar el chart).
+     */
+    onInputChanges(changes) {
+        if (changes['data'] || changes['optionsOverrides'] || changes['palette'] || changes['colorResolver'] || changes['valueFormatter']) {
+            this.updateChartOptions();
+        }
+    }
+    /**
+   * Gatilla actualización en ngx-echarts
+   */
+    triggerUpdate(options) {
+        this.updateSubject.next(options);
+    }
+    /**
+     * 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: "14.0.0", version: "20.3.19", type: BaseEchartsComponent, isStandalone: true, inputs: { data: "data", optionsOverrides: "optionsOverrides", 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
+            }], palette: [{
+                type: Input
+            }], colorResolver: [{
+                type: Input
+            }], valueFormatter: [{
+                type: Input
+            }], chartClick: [{
+                type: Output
+            }] } });
 
 /**
  * BaseEchartBuilder
@@ -843,6 +908,10 @@ class VerticalBandsBuilder extends BaseEchartBuilder {
             return seriesOption;
         });
         const common = this.getCommonOptions(overrides);
+        const categoryAxisOptions = {
+            ...overrides.mainAxis.categoryAxis[0],
+            data: data.categories,
+        };
         return {
             ...common,
             tooltip: {
@@ -859,7 +928,7 @@ class VerticalBandsBuilder extends BaseEchartBuilder {
                 }
             },
             legend: getLegendOptions(),
-            xAxis: getXAxisOptions({ data: data.categories }),
+            xAxis: getCategoryAxisOptions(categoryAxisOptions),
             yAxis: getYAxisOptions(),
             series: series
         };
@@ -1004,6 +1073,223 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\">\n  <div echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\" class=\"demo-chart\"></div>\n</div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative;background-color:#fff;border-radius:8px}.demo-chart{width:100%;height:100%}\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, } = overrides.bar.series;
+        const itStBorderRadius = itemStyle?.borderRadius ?? [4, 4, 0, 0];
+        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',
+                itemStyle: {
+                    borderRadius: itStBorderRadius,
+                },
+                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);
+                    }
+                }
+            };
+            // Inyectar el resolver de color si existe
+            if (this.colorResolver) {
+                seriesOption.itemStyle.color = this.colorResolver;
+            }
+            return seriesOption;
+        });
+        const common = this.getCommonOptions(overrides);
+        const xAxis = [];
+        const yAxis = [];
+        const categoryAxisOptions = {
+            ...overrides.mainAxis.categoryAxis[0],
+            data: data.categories,
+        };
+        if (overrides.bar.orientation === 'h') {
+            xAxis.push(getValueAxisOptions());
+            yAxis.push(getCategoryAxisOptions(categoryAxisOptions));
+        }
+        else {
+            xAxis.push(getCategoryAxisOptions(categoryAxisOptions));
+            yAxis.push(getValueAxisOptions());
+        }
+        return {
+            ...common,
+            tooltip: {
+                ...getTooltipOptions({ trigger: 'item' }),
+                formatter: getItemTooltipFormatter(data, this.formatCellValue.bind(this))
+            },
+            legend: getLegendOptions(),
+            xAxis,
+            yAxis,
+            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();
+    }
+    onChartInit(instance) {
+        super.onChartInit(instance);
+        this.setupAdditionalInteractions();
+    }
+    onInputChanges(changes) {
+        if (changes['data']) {
+            this.selectedCategoryIndex = null;
+            this.selectedSeriesIndex = null;
+            this.currentLegendSelected = null;
+        }
+        super.onInputChanges(changes);
+    }
+    setupAdditionalInteractions() {
+        if (!this.chartInstance)
+            return;
+        // 1. ZRender click para sectores de fondo (específico para barras)
+        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);
+                    }
+                }
+            }
+        });
+        // 2. Mouseover para resaltar grupo completo
+        this.chartInstance.on('mouseover', (params) => {
+            if (params.dataIndex !== undefined) {
+                this.highlightSector(params.dataIndex);
+            }
+        });
+        this.chartInstance.on('mouseout', () => {
+            this.clearHighlight();
+        });
+    }
+    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
+        });
+    }
+    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)
+        });
+    }
+    onLegendSelectChanged(event) {
+        if (event && event.selected) {
+            this.currentLegendSelected = event.selected;
+            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\">\n  <div echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\" class=\"demo-chart\"></div>\n</div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative;background-color:#fff;border-radius:8px}.demo-chart{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\">\n  <div echarts [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\" class=\"demo-chart\"></div>\n</div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative;background-color:#fff;border-radius:8px}.demo-chart{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
 class LineBuilder extends BaseEchartBuilder {
     constructor() {
         super();
@@ -1057,6 +1343,10 @@ class LineBuilder extends BaseEchartBuilder {
             return seriesOption;
         });
         const common = this.getCommonOptions(overrides);
+        const categoryAxisOptions = {
+            ...overrides.mainAxis.categoryAxis[0],
+            data: data.categories,
+        };
         return {
             ...common,
             tooltip: {
@@ -1073,8 +1363,8 @@ class LineBuilder extends BaseEchartBuilder {
                 }
             },
             legend: getLegendOptions(),
-            xAxis: getXAxisOptions({ data: data.categories }),
-            yAxis: getYAxisOptions(),
+            xAxis: [getCategoryAxisOptions(categoryAxisOptions)],
+            yAxis: [getYAxisOptions()],
             series: series
         };
     }
@@ -1139,5 +1429,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseEchartsComponent, EchartsLineComponent, EchartsRingComponent, EchartsVerticalBandsComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
+export { BaseEchartsComponent, EchartsBarComponent, EchartsLineComponent, EchartsRingComponent, EchartsVerticalBandsComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
 //# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map