@visionaris-bruno/vs-echarts 8.4.2 → 8.5.1

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

@@ -4,12 +4,13 @@ import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart
 import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GraphicComponent, ToolboxComponent, PolarComponent, DatasetComponent, DataZoomComponent } from 'echarts/components';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ViewChild, Directive, Component } from '@angular/core';
+import { EventEmitter, Output, Input, ViewChild, Directive, inject, 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';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Global Design Tokens for ECharts
@@ -188,11 +189,11 @@ class BaseEchartsComponent {
     data = { dimensions: [], source: [] };
     optionsOverrides = defaultOptionsOverrides();
     /** Paleta de colores básica */
-    palette = getDefaultPalette();
+    palette;
     /** Resolver de colores dinámico (Callback) */
     colorResolver;
     /** Formateador de valores para etiquetas y tooltips */
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter;
     chartClick = new EventEmitter();
     /** Subject para debouncing de actualizaciones. ReplaySubject asegura no perder el primer renderizado. */
     updateSubject = new ReplaySubject(1);
@@ -933,6 +934,7 @@ class RingBuilder {
 
 class BoxPlotBuilder {
     baseProduct;
+    translateService;
     valueFormatter = (value, key) => value.toLocaleString();
     palette = [];
     // TODO: Hay que implementar un valor por defecto.
@@ -940,25 +942,24 @@ class BoxPlotBuilder {
     result = {};
     constructor(baseProduct) {
         this.baseProduct = baseProduct;
+        try {
+            this.translateService = inject(TranslateService);
+        }
+        catch {
+            // Ignored if called outside an injection context (e.g. unit tests)
+        }
     }
     reset() {
         this.result = {};
     }
     addDataset(data, opts) {
-        const statisticKeys = {
-            min: 'Min',
-            q1: 'Q1',
-            median: 'Median',
-            q3: 'Q3',
-            max: 'Max',
-        };
         /**
          *
          * @param arr
          * @param statisticsKeys etiquetas personalizadas para los valores de estadistica.
          * @returns
          */
-        function calcularResumen5Numeros(arr, statisticsKeys) {
+        function calcularResumen5Numeros(arr) {
             if (arr.length === 0)
                 return null;
             // 1. Ordenar los números de menor a mayor
@@ -976,11 +977,11 @@ class BoxPlotBuilder {
                 }
             };
             return {
-                [statisticsKeys.min]: ordenados[0],
-                [statisticsKeys.q1]: obtenerPercentil(0.25),
-                [statisticsKeys.median]: obtenerPercentil(0.50),
-                [statisticsKeys.q3]: obtenerPercentil(0.75),
-                [statisticsKeys.max]: ordenados[ordenados.length - 1],
+                min: ordenados[0],
+                q1: obtenerPercentil(0.25),
+                median: obtenerPercentil(0.50),
+                q3: obtenerPercentil(0.75),
+                max: ordenados[ordenados.length - 1],
             };
         }
         ;
@@ -990,7 +991,7 @@ class BoxPlotBuilder {
                 .filter(([key, val]) => key !== 'category' && !isNaN(val))
                 .map(([_, val]) => Number(val));
             // resumen5NumerosXCat
-            const resObj = Object.assign({ category: s.category }, calcularResumen5Numeros(values, statisticKeys));
+            const resObj = Object.assign({ category: s.category }, calcularResumen5Numeros(values));
             return resObj;
         });
         const dataset = [{
@@ -1032,17 +1033,31 @@ class BoxPlotBuilder {
     addTooltip(data, overrides) {
         const mainMeassureKey = data.dimensions.filter(d => d.name != 'category')[0].name;
         const valueFormatter = this.valueFormatter;
+        const translate = (key, fallback) => {
+            if (!this.translateService)
+                return fallback;
+            const res = this.translateService.instant(key);
+            return res === key ? fallback : res;
+        };
+        const labelMap = {
+            min: translate('VS_ECHARTS.BOXPLOT.MIN', 'Min'),
+            q1: translate('VS_ECHARTS.BOXPLOT.Q1', 'Q1'),
+            median: translate('VS_ECHARTS.BOXPLOT.MEDIAN', 'Median'),
+            q3: translate('VS_ECHARTS.BOXPLOT.Q3', 'Q3'),
+            max: translate('VS_ECHARTS.BOXPLOT.MAX', 'Max'),
+        };
         function tooltipFormatter(params) {
             const tooltipEventData = Array.isArray(params) ? params[0] : params;
             const title = `<b>${tooltipEventData.name}</b></br>`;
             let htmlbody = ``;
             for (const datakey in tooltipEventData.data) {
-                const label = datakey;
+                const rawLabel = datakey;
                 const value = tooltipEventData.data[datakey];
-                if (label == 'category') {
+                if (rawLabel == 'category') {
                     continue;
                 }
                 ;
+                const label = labelMap[rawLabel] || rawLabel;
                 const formattedValue = valueFormatter(value, mainMeassureKey);
                 const bodyText = `${tooltipEventData.marker}${label}: ${formattedValue}</br>`;
                 htmlbody += bodyText;
@@ -1128,236 +1143,344 @@ class BoxPlotBuilder {
 }
 
 /**
- * Builder principal.
- *
- * Es muy completo, tiene soporte para ejes y sistema cartesiano polar.
- *
- * Puede verse utilizado en graficos como Lineas y Bars. Siempre que se pueda priorizar utilizar este.
+ * Director de Builds.
  */
-class EChartBuilder {
-    baseProduct = undefined;
-    valueFormatter = (value) => value.toLocaleString();
-    palette = [];
-    // TODO: Hay que implementar un valor por defecto.
-    colorResolver;
-    result = {};
-    constructor(baseProduct) {
-        this.baseProduct = baseProduct;
+class VSECDirector {
+    builder = undefined;
+    constructor(builder) {
+        this.builder = builder;
     }
-    reset() {
-        this.result = {};
+    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.setColorResolver(colorResolver);
+        const product = this.builder.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = { axisTypes };
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        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();
     }
-    addCommons() {
-        const opts = {
-            palette: this.palette,
-        };
-        merge$1(this.result, getCommons(opts));
+    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.setColorResolver(colorResolver);
+        const product = this.builder.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = { axisTypes, coordinateSystem: 'polar' };
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        this.builder.addPolar();
+        this.builder.addAngleAxis(data, overrides['axis']);
+        this.builder.addRadiusAxis(data, overrides['axis']);
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addLegend();
     }
-    /**
-     *
-     * @param data
-     * @param overrides
-     * @returns
-     */
-    addSeries(data, overrides, opts) {
-        if (!data || !data.dimensions || !data.source || data.source.length === 0)
-            return;
-        this.result.dataset = {
-            dimensions: data.dimensions,
-            source: data.source
-        };
-        const measureDims = data.dimensions.filter(d => d.name !== 'category');
-        const isPolar = opts?.coordinateSystem === 'polar';
-        const isHorizontal = opts?.axisTypes?.x === 'value' && opts?.axisTypes?.y === 'category';
-        const series = measureDims.map((dim) => {
-            const friendlyName = dim.displayName || dim.name;
-            const dimKey = dim.name;
-            let encode = {
-                x: 'category',
-                y: dimKey
-            };
-            if (isPolar) {
-                encode = {
-                    angle: 'category',
-                    radius: dimKey
-                };
-            }
-            else if (isHorizontal) {
-                encode = {
-                    x: dimKey,
-                    y: 'category'
-                };
-            }
-            const dynamicOverrides = {
-                name: friendlyName,
-                encode,
-                label: {
-                    formatter: (params) => {
-                        const row = params.value;
-                        const rawValue = (row && typeof row === 'object') ? row[dimKey] : params.value;
-                        return this.formatCellValue(Number(rawValue ?? 0), dimKey);
-                    }
-                }
-            };
-            const seriesOption = merge$1(dynamicOverrides, overrides);
-            // Inyectar el resolver de color si existe
-            if (this.colorResolver && seriesOption.itemStyle) {
-                seriesOption.itemStyle.color = this.colorResolver;
-            }
-            return seriesOption;
-        });
-        this.result.series = series;
+    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.setColorResolver(colorResolver);
+        const product = this.builder.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = { axisTypes };
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        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();
     }
-    /**
-     * 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;
+    makeScatter(data, overrides, opts = {}) {
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
+            x: 'category',
+            y: 'value',
+        } } = 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.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = { axisTypes };
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        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();
     }
-    addPolar() {
-        const polar = [];
-        polar.push({
-            radius: '65%',
-            center: ["50%", "44%"],
-        });
-        this.result.polar = polar;
+    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.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        this.builder.addGraphic();
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addLegend();
     }
-    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;
+    makePie(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.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addLegend();
     }
-    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);
+    makeFunnel(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.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addLegend();
+    }
+    makeSunburst(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.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        this.builder.addTooltip(data, overrides.tooltip);
+        // this.builder.addLegend();
+    }
+    makeSankey(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.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        this.builder.addTooltip(data, overrides.tooltip);
+    }
+    makeBoxplot(data, overrides, opts = {}) {
+        if (this.builder instanceof BoxPlotBuilder == false) {
+            return;
         }
-        this.result.yAxis = yAxis;
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
+            x: 'value',
+            y: 'category',
+        }, } = 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.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = { axisTypes };
+        this.builder.addDataset(data);
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        this.builder.addXAxis(data, overrides.axis, axisTypes.x);
+        this.builder.addYAxis(data, overrides.axis, axisTypes.y);
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addDataZoom();
     }
-    addRadiusAxis(data, overrides) {
-        const radiusAxis = [];
-        /** estilos exclusivos hardcodeados para el eje de valores del sistema de coordenadas polar*/
-        const radiusAxisOverrides = {
-            zlevel: 10,
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                margin: 2,
-                fontSize: 8,
-                align: 'right',
-                rotate: 20,
-                verticalAlign: 'top',
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    opacity: 0.2,
-                    type: 'solid',
-                }
+}
+
+/**
+ * EchartsRingComponent
+ *
+ * Especialista en visualización de tipo Ring. Soporta multi-medidas y KPI central.
+ * @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,
+        },
+        select: {
+            itemStyle: {
+                borderColor: EChartsTokens.sBorderColor,
+                shadowColor: EChartsTokens.sShadowColor,
+                borderWidth: 1,
+                shadowBlur: 4,
             },
-            axisLine: {
-                lineStyle: {
-                    type: 'dashed',
-                },
-            }
-        };
-        const radialAxisOptions = getValueAxisOptions(radiusAxisOverrides);
-        radiusAxis.push(radialAxisOptions);
-        this.result.radiusAxis = radiusAxis;
-    }
-    addAngleAxis(data, overrides) {
-        const angleAxis = [];
-        const categoryAxisOptions = this.getCategoryAxisOptions(data, overrides);
-        angleAxis.push(categoryAxisOptions);
-        this.result.angleAxis = angleAxis;
-    }
-    addLegend() {
-        this.result.legend = getLegendOptions();
+        },
+        animationType: 'scale',
+        animationEasing: 'elasticOut',
+    };
+    baseProduct = {
+        chartKey: 'ring',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        }
+    };
+    builder = new RingBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    lastSelectedSeriesIndex = null;
+    lastSelectedDataIndex = null;
+    selectedPercent = null;
+    currentGraphicText = '';
+    constructor() {
+        super();
     }
-    // No-ops for ring charts
-    addGraphic() { }
-    addDataset(data) { }
-    addDataZoom() {
-        this.result.dataZoom = [
-            {
-                type: 'inside'
-            },
-            {
-                type: 'slider',
-                height: 20,
-                bottom: 60
-            }
-        ];
+    make() {
+        const makeOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+        };
+        this.director.makeRing(this.data, this.optionsOverrides, makeOpts);
     }
-    getResult() {
-        return this.result;
+    onInputChanges(changes) {
+        // Reset selection only if data changed
+        if (changes['data']) {
+            this.lastSelectedSeriesIndex = null;
+            this.lastSelectedDataIndex = null;
+            this.selectedPercent = null;
+            this.currentGraphicText = '';
+        }
+        super.onInputChanges(changes);
     }
-    ;
     /**
-     * Formatea un valor utilizando el callback inyectado.
+     * Maneja clics en los sectores del ring.
+     * Soporta múltiples series (anillos) y actualiza el KPI central.
      */
-    formatCellValue(value, key) {
-        return this.valueFormatter(value, key);
+    onChartClick(event) {
+        if (this.chartInstance && event && event.dataIndex !== undefined) {
+            const isSameSelection = event.seriesIndex === this.lastSelectedSeriesIndex &&
+                event.dataIndex === this.lastSelectedDataIndex;
+            if (isSameSelection) {
+                // Toggle OFF
+                this.lastSelectedSeriesIndex = null;
+                this.lastSelectedDataIndex = null;
+                this.selectedPercent = null;
+                this.setGraphicText('');
+            }
+            else {
+                // SELECT
+                this.lastSelectedSeriesIndex = event.seriesIndex;
+                this.lastSelectedDataIndex = event.dataIndex;
+                this.selectedPercent = (event.percent !== undefined) ? event.percent + '%' : '';
+                this.setGraphicText(this.selectedPercent);
+            }
+            this.chartClick.emit({
+                type: 'cross-filter',
+                data: {
+                    category: event.name,
+                    serie: event.seriesName,
+                    value: event.value
+                }
+            });
+        }
     }
-    // Setters 
-    /**
-     * Permite inyectar un formateador de valores externo.
-     */
-    setValueFormatter(formatter) {
-        if (formatter) {
-            this.valueFormatter = formatter;
+    onChartMouseOver(event) {
+        if (this.selectedPercent === null && event && event.percent !== undefined) {
+            this.setGraphicText(event.percent + '%');
         }
     }
-    /**
-     * Permite inyectar una paleta de colores básica.
-     */
-    setPalette(palette) {
-        if (palette) {
-            this.palette = palette;
+    onChartMouseOut(event) {
+        if (this.selectedPercent === null) {
+            this.setGraphicText('');
         }
     }
     /**
-     * Permite inyectar un resolver de colores dinámico.
+     * Actualiza el texto del Graphic central y persiste la selección en el modelo de opciones.
      */
-    setColorResolver(resolver) {
-        if (resolver) {
-            this.colorResolver = resolver;
-        }
-    }
-    // Utils
-    getCategoryAxisOptions(data, overrides) {
-        // No explicit data needed on category axis when using ECharts dataset
-        const categoryAxisOptionsOverrides = {
-            ...overrides.categoryAxis[0]
-        };
-        const categoryAxisOptions = getCategoryAxisOptions(categoryAxisOptionsOverrides);
-        return categoryAxisOptions;
-    }
-    getValueAxisOptions(data, overrides) {
-        const valueAxisOptions = getValueAxisOptions();
-        return valueAxisOptions;
+    setGraphicText(text) {
+        this.currentGraphicText = text;
+        // Persistencia de GRAPHIC (KPI central)
+        this.chartInstance?.setOption({
+            graphic: {
+                style: {
+                    text: this.currentGraphicText,
+                    opacity: this.currentGraphicText ? 1 : 0,
+                }
+            }
+        });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsRingComponent, isStandalone: true, selector: "vs-echarts-ring", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-ring', standalone: true, imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * PieBuilder
@@ -1522,20 +1645,80 @@ class PieBuilder {
 }
 
 /**
- * FunnelBuilder
+ * EchartsPieComponent
  *
- * Concrete builder for Funnel charts.
+ * Especialista en visualización de tipo Pie (Torta y Anillos concéntricos).
+ * La primera serie se dibuja como un gráfico de torta tradicional (lleno) y
+ * las subsecuentes como anillos concéntricos alrededor.
  */
-class FunnelBuilder {
-    baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
-    palette = [];
-    colorResolver;
-    result = {};
-    constructor(baseProduct) {
-        this.baseProduct = baseProduct;
+class EchartsPieComponent extends BaseEchartsComponent {
+    baseSeriesOptions = {
+        type: 'pie',
+        center: ['50%', '50%'],
+        avoidLabelOverlap: true,
+        minAngle: 3,
+        selectedMode: 'single',
+        selectedOffset: 4,
+        emphasis: {
+            scale: true,
+            scaleSize: 2,
+        },
+        select: {
+            itemStyle: {
+                borderColor: EChartsTokens.sBorderColor,
+                shadowColor: EChartsTokens.sShadowColor,
+                borderWidth: 1,
+                shadowBlur: 4,
+            },
+        },
+        animationType: 'scale',
+        animationEasing: 'elasticOut',
+    };
+    baseProduct = {
+        chartKey: 'pie',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        }
+    };
+    builder = new PieBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    constructor() {
+        super();
     }
-    reset() {
+    make() {
+        const makeOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+        };
+        this.director.makePie(this.data, this.optionsOverrides, makeOpts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsPieComponent, isStandalone: true, selector: "vs-echarts-pie", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\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: EchartsPieComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-pie', standalone: true, imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * FunnelBuilder
+ *
+ * Concrete builder for Funnel charts.
+ */
+class FunnelBuilder {
+    baseProduct;
+    valueFormatter = (value) => value.toLocaleString();
+    palette = [];
+    colorResolver;
+    result = {};
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
+    }
+    reset() {
         this.result = {};
     }
     addCommons() {
@@ -1625,10 +1808,91 @@ class FunnelBuilder {
     }
 }
 
-class SunburstBuilder {
-    baseProduct;
+/**
+ * EchartsFunnelComponent
+ *
+ * Component for Funnel visualization. Supports single and multiple measures.
+ */
+class EchartsFunnelComponent extends BaseEchartsComponent {
+    baseSeriesOptions = {
+        type: 'funnel',
+        left: '10%',
+        width: '80%',
+        minSize: '0.01%',
+        maxSize: '100%',
+        sort: 'descending',
+        gap: 2,
+        label: {
+            show: true,
+            position: 'inside'
+        },
+        labelLine: {
+            show: false
+        },
+        itemStyle: {
+            borderColor: '#fff',
+            borderWidth: 1
+        },
+        emphasis: {
+            label: {
+                fontSize: 16
+            }
+        },
+        selectedMode: 'single',
+        select: {
+            label: {
+                fontSize: 16
+            },
+            itemStyle: {
+                borderWidth: 1,
+                borderColor: EChartsTokens.sBorderColor,
+                shadowColor: EChartsTokens.sShadowColor,
+                shadowBlur: 6,
+            }
+        },
+    };
+    baseProduct = {
+        chartKey: 'funnel',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        }
+    };
+    builder = new FunnelBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    constructor() {
+        super();
+    }
+    make() {
+        const makeOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+        };
+        this.director.makeFunnel(this.data, this.optionsOverrides, makeOpts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsFunnelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsFunnelComponent, isStandalone: true, selector: "vs-echarts-funnel", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\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: EchartsFunnelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-funnel', standalone: true, imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Builder principal.
+ *
+ * Es muy completo, tiene soporte para ejes y sistema cartesiano polar.
+ *
+ * Puede verse utilizado en graficos como Lineas y Bars. Siempre que se pueda priorizar utilizar este.
+ */
+class EChartBuilder {
+    baseProduct = undefined;
     valueFormatter = (value) => value.toLocaleString();
     palette = [];
+    // TODO: Hay que implementar un valor por defecto.
     colorResolver;
     result = {};
     constructor(baseProduct) {
@@ -1637,779 +1901,217 @@ class SunburstBuilder {
     reset() {
         this.result = {};
     }
-    addSeries(data, overrides) {
-        if (!data || !data.source || data.source.length === 0) {
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        merge$1(this.result, getCommons(opts));
+    }
+    /**
+     *
+     * @param data
+     * @param overrides
+     * @returns
+     */
+    addSeries(data, overrides, opts) {
+        if (!data || !data.dimensions || !data.source || data.source.length === 0)
             return;
-        }
-        const sunburstData = mapHierarchicalData(data.source, data.dimensions);
-        const depth = getTreeDepth(sunburstData);
-        const levels = [];
-        for (let i = 0; i <= depth; i++) {
-            levels.push({
-                label: {
-                    show: false,
-                },
-            });
-        }
-        const dynamiSerieOptions = {
-            name: '',
-            data: sunburstData,
-            levels: levels
+        this.result.dataset = {
+            dimensions: data.dimensions,
+            source: data.source
         };
-        const serie = merge$1({}, dynamiSerieOptions, overrides);
-        if (this.colorResolver) {
-            if (!serie.itemStyle) {
-                serie.itemStyle = {};
+        const measureDims = data.dimensions.filter(d => d.name !== 'category');
+        const isPolar = opts?.coordinateSystem === 'polar';
+        const isHorizontal = opts?.axisTypes?.x === 'value' && opts?.axisTypes?.y === 'category';
+        const series = measureDims.map((dim) => {
+            const friendlyName = dim.displayName || dim.name;
+            const dimKey = dim.name;
+            let encode = {
+                x: 'category',
+                y: dimKey
+            };
+            if (isPolar) {
+                encode = {
+                    angle: 'category',
+                    radius: dimKey
+                };
             }
-            serie.itemStyle.color = this.colorResolver;
-        }
-        this.result.series = serie;
+            else if (isHorizontal) {
+                encode = {
+                    x: dimKey,
+                    y: 'category'
+                };
+            }
+            const dynamicOverrides = {
+                name: friendlyName,
+                encode,
+                label: {
+                    formatter: (params) => {
+                        const row = params.value;
+                        const rawValue = (row && typeof row === 'object') ? row[dimKey] : params.value;
+                        return this.formatCellValue(Number(rawValue ?? 0), dimKey);
+                    }
+                }
+            };
+            const seriesOption = merge$1(dynamicOverrides, overrides);
+            // Inyectar el resolver de color si existe
+            if (this.colorResolver && seriesOption.itemStyle) {
+                seriesOption.itemStyle.color = this.colorResolver;
+            }
+            return seriesOption;
+        });
+        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 || 'item', data, this.valueFormatter),
+            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
     }
-    addCommons() {
-        const opts = {
-            palette: this.palette,
-        };
-        merge$1(this.result, getCommons(opts));
-    }
-    getResult() {
-        return this.result;
+    addPolar() {
+        const polar = [];
+        polar.push({
+            radius: '65%',
+            center: ["50%", "44%"],
+        });
+        this.result.polar = polar;
     }
-    ;
-    // No-ops
-    addPolar() { }
-    addXAxis(data, overrides, type) { }
-    addYAxis(data, overrides, type) { }
-    addRadiusAxis(data, overrides) { }
-    addAngleAxis(data, overrides) { }
-    addLegend() { }
-    addDataZoom() { }
-    addDataset(data, opts) { }
-    addGraphic() { }
-    // Setters 
-    /**
-     * Permite inyectar un formateador de valores externo.
-     */
-    setValueFormatter(formatter) {
-        if (formatter) {
-            this.valueFormatter = formatter;
+    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);
         }
-    }
-    /**
-     * Permite inyectar una paleta de colores básica.
-     */
-    setPalette(palette) {
-        if (palette) {
-            this.palette = palette;
+        else if (type == 'value') {
+            xAxis.push(valueAxisOptions);
         }
+        this.result.xAxis = xAxis;
     }
-    /**
-     * Permite inyectar un resolver de colores dinámico.
-     */
-    setColorResolver(resolver) {
-        if (resolver) {
-            this.colorResolver = resolver;
+    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);
         }
-    }
-}
-
-/**
- * SankeyBuilder
- *
- * Builder concreto para el gráfico Sankey (diagrama de flujos de izquierda a derecha).
- */
-class SankeyBuilder {
-    baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
-    palette = [];
-    colorResolver;
-    result = {};
-    constructor(baseProduct) {
-        this.baseProduct = baseProduct;
-    }
-    reset() {
-        this.result = {};
-    }
-    addSeries(data, overrides) {
-        if (!data || !data.source || data.source.length === 0) {
-            return;
+        else if (type == 'value') {
+            yAxis.push(valueAxisOptions);
         }
-        // Identificar medidas (todas las dimensiones excepto 'category')
-        const measureKeys = data.dimensions
-            .filter((d) => d.name !== "category")
-            .map((d) => d.name);
-        // Función auxiliar para sumarizar valores de medidas en caso de haber más de una
-        const getNodeValue = (node) => {
-            return measureKeys.reduce((sum, key) => sum + (Number(node[key]) || 0), 0);
-        };
-        const nodesMap = new Map();
-        const linksMap = new Map();
-        // Función recursiva para aplanar datos jerárquicos a nodos y enlaces
-        const traverse = (nodeList, level, parentId) => {
-            for (const node of nodeList) {
-                const category = node.category;
-                const currentId = `${category}___${level}`;
-                const value = getNodeValue(node);
-                nodesMap.set(currentId, (nodesMap.get(currentId) || 0) + value);
-                if (parentId) {
-                    const linkKey = `${parentId}--->${currentId}`;
-                    if (linksMap.has(linkKey)) {
-                        linksMap.get(linkKey).value += value;
-                    }
-                    else {
-                        linksMap.set(linkKey, {
-                            source: parentId,
-                            target: currentId,
-                            value: value,
-                        });
-                    }
-                }
-                if (node.children && node.children.length > 0) {
-                    traverse(node.children, level + 1, currentId);
-                }
-            }
-        };
-        // Comenzar el recorrido en el nivel 0
-        traverse(data.source, 0);
-        // al menos un nivel de links para dibujar.
-        if (linksMap.size === 0)
-            return;
-        // Mapear nodos acumulados a la estructura requerida por ECharts (name y opcionalmente color, sin value redundante)
-        const nodes = Array.from(nodesMap.keys()).map((currentId) => {
-            const category = currentId.split("___")[0];
-            const nodeItem = {
-                name: currentId,
-            };
-            if (this.colorResolver) {
-                const color = this.colorResolver({ name: category, data: nodeItem });
-                if (color) {
-                    nodeItem.itemStyle = { color };
-                }
-            }
-            return nodeItem;
-        });
-        const dynamicSerieOptions = {
-            type: "sankey",
-            orient: "horizontal", // De izquierda a derecha
-            draggable: true,
-            emphasis: {
-                focus: "adjacency",
+        this.result.yAxis = yAxis;
+    }
+    addRadiusAxis(data, overrides) {
+        const radiusAxis = [];
+        /** estilos exclusivos hardcodeados para el eje de valores del sistema de coordenadas polar*/
+        const radiusAxisOverrides = {
+            zlevel: 10,
+            axisTick: {
+                show: false,
             },
-            lineStyle: {
-                color: "source",
-                opacity: 0.25,
-                curveness: 0.5,
+            axisLabel: {
+                margin: 2,
+                fontSize: 8,
+                align: 'right',
+                rotate: 20,
+                verticalAlign: 'top',
             },
-            label: {
+            splitLine: {
                 show: true,
-                position: "right",
-                fontFamily: "'Inter', 'Roboto', 'Open Sans', sans-serif",
-                fontSize: 10,
-                formatter: (params) => {
-                    // Remover el sufijo de nivel de la etiqueta visual
-                    return params.name.split("___")[0];
-                },
+                lineStyle: {
+                    opacity: 0.2,
+                    type: 'solid',
+                }
             },
-            roam: true,
-            data: nodes,
-            links: Array.from(linksMap.values()),
+            axisLine: {
+                lineStyle: {
+                    type: 'dashed',
+                },
+            }
         };
-        const serie = merge$1({}, dynamicSerieOptions, overrides);
-        if (this.colorResolver && !serie.itemStyle) {
-            serie.itemStyle = {};
-        }
-        if (this.colorResolver && serie.itemStyle) {
-            serie.itemStyle.color = this.colorResolver;
-        }
-        this.result.series = serie;
+        const radialAxisOptions = getValueAxisOptions(radiusAxisOverrides);
+        radiusAxis.push(radialAxisOptions);
+        this.result.radiusAxis = radiusAxis;
     }
-    addTooltip(data, overrides) {
-        merge$1(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter),
-        });
-        const tooltip = getTooltipOptions(overrides);
-        this.result.tooltip = tooltip;
+    addAngleAxis(data, overrides) {
+        const angleAxis = [];
+        const categoryAxisOptions = this.getCategoryAxisOptions(data, overrides);
+        angleAxis.push(categoryAxisOptions);
+        this.result.angleAxis = angleAxis;
     }
-    addPolar() { }
-    addXAxis(data, overrides, type) { }
-    addYAxis(data, overrides, type) { }
-    addRadiusAxis(data, overrides) { }
-    addAngleAxis(data, overrides) { }
-    addLegend() { }
-    addDataZoom() { }
-    addDataset(data, opts) { }
-    addCommons() {
-        const opts = {
-            palette: this.palette,
-        };
-        merge$1(this.result, getCommons(opts));
+    addLegend() {
+        this.result.legend = getLegendOptions();
     }
+    // No-ops for ring charts
     addGraphic() { }
+    addDataset(data, opts) { }
+    addDataZoom() {
+        this.result.dataZoom = [
+            {
+                type: 'inside'
+            },
+            {
+                type: 'slider',
+                height: 20,
+                bottom: 60
+            }
+        ];
+    }
     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;
         }
     }
+    /**
+     * Permite inyectar una paleta de colores básica.
+     */
     setPalette(palette) {
         if (palette) {
             this.palette = palette;
         }
     }
+    /**
+     * Permite inyectar un resolver de colores dinámico.
+     */
     setColorResolver(resolver) {
         if (resolver) {
             this.colorResolver = resolver;
         }
     }
-}
-
-/**
- * Director de Builds.
- */
-class VSECDirector {
-    builder = undefined;
-    constructor(builder) {
-        this.builder = builder;
-    }
-    makeBar(data, overrides, opts = {}) {
-        if (this.builder instanceof EChartBuilder == false) {
-            return;
-        }
-        ;
-        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 callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
-        // chart components
-        this.builder.addCommons();
-        const seriesOptions = { axisTypes };
-        this.builder.addSeries(data, seriesOverrides, seriesOptions);
-        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();
+    // Utils
+    getCategoryAxisOptions(data, overrides) {
+        // No explicit data needed on category axis when using ECharts dataset
+        const categoryAxisOptionsOverrides = {
+            ...overrides.categoryAxis[0]
+        };
+        const categoryAxisOptions = getCategoryAxisOptions(categoryAxisOptionsOverrides);
+        return categoryAxisOptions;
     }
-    makeBarRadial(data, overrides, opts = {}) {
-        if (this.builder instanceof EChartBuilder == false) {
-            return;
-        }
-        ;
-        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 callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
-        // chart components
-        this.builder.addCommons();
-        const seriesOptions = { axisTypes, coordinateSystem: 'polar' };
-        this.builder.addSeries(data, seriesOverrides, seriesOptions);
-        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 = {}) {
-        if (this.builder instanceof EChartBuilder == false) {
-            return;
-        }
-        ;
-        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 callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
-        // chart components
-        this.builder.addCommons();
-        const seriesOptions = { axisTypes };
-        this.builder.addSeries(data, seriesOverrides, seriesOptions);
-        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();
-    }
-    makeScatter(data, overrides, opts = {}) {
-        if (this.builder instanceof EChartBuilder == false) {
-            return;
-        }
-        ;
-        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
-            x: 'category',
-            y: 'value',
-        } } = opts;
-        this.builder.reset();
-        // El orden importa, primero callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
-        // chart components
-        this.builder.addCommons();
-        const seriesOptions = { axisTypes };
-        this.builder.addSeries(data, seriesOverrides, seriesOptions);
-        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 = {}) {
-        if (this.builder instanceof RingBuilder == false) {
-            return;
-        }
-        ;
-        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
-        this.builder.reset();
-        // El orden importa, primero callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        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();
-    }
-    makePie(data, overrides, opts = {}) {
-        if (this.builder instanceof PieBuilder == false) {
-            return;
-        }
-        ;
-        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
-        this.builder.reset();
-        // El orden importa, primero callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
-        // chart components
-        this.builder.addCommons();
-        this.builder.addSeries(data, seriesOverrides);
-        this.builder.addTooltip(data, overrides.tooltip);
-        this.builder.addLegend();
-    }
-    makeFunnel(data, overrides, opts = {}) {
-        if (this.builder instanceof FunnelBuilder == false) {
-            return;
-        }
-        ;
-        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
-        this.builder.reset();
-        // El orden importa, primero callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
-        // chart components
-        this.builder.addCommons();
-        this.builder.addSeries(data, seriesOverrides);
-        this.builder.addTooltip(data, overrides.tooltip);
-        this.builder.addLegend();
-    }
-    makeSunburst(data, overrides, opts = {}) {
-        if (this.builder instanceof SunburstBuilder == false) {
-            return;
-        }
-        ;
-        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
-        this.builder.reset();
-        // El orden importa, primero callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
-        // chart components
-        this.builder.addCommons();
-        this.builder.addSeries(data, seriesOverrides);
-        this.builder.addTooltip(data, overrides.tooltip);
-    }
-    makeSankey(data, overrides, opts = {}) {
-        if (this.builder instanceof SankeyBuilder == false) {
-            return;
-        }
-        ;
-        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
-        this.builder.reset();
-        // El orden importa, primero callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
-        // chart components
-        this.builder.addCommons();
-        this.builder.addSeries(data, seriesOverrides);
-        this.builder.addTooltip(data, overrides.tooltip);
-    }
-    makeBoxplot(data, overrides, opts = {}) {
-        if (this.builder instanceof BoxPlotBuilder == false) {
-            return;
-        }
-        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
-            x: 'value',
-            y: 'category',
-        }, statisticsKeys = undefined, } = opts;
-        this.builder.reset();
-        // El orden importa, primero callbacks y despues componentes.
-        // chart callbaks
-        if (valueFormatter)
-            this.builder.setValueFormatter(valueFormatter);
-        if (palette)
-            this.builder.setPalette(palette);
-        if (colorResolver)
-            this.builder.setColorResolver(colorResolver);
-        const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
-        // chart components
-        this.builder.addCommons();
-        const configOpts = { axisTypes };
-        this.builder.addDataset(data, { statisticsKeys });
-        this.builder.addSeries(data, seriesOverrides, configOpts);
-        this.builder.addXAxis(data, overrides.axis, axisTypes.x);
-        this.builder.addYAxis(data, overrides.axis, axisTypes.y);
-        this.builder.addTooltip(data, overrides.tooltip);
-        this.builder.addDataZoom();
-    }
-}
-
-/**
- * EchartsRingComponent
- *
- * Especialista en visualización de tipo Ring. Soporta multi-medidas y KPI central.
- * @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,
-        },
-        select: {
-            itemStyle: {
-                borderColor: EChartsTokens.sBorderColor,
-                shadowColor: EChartsTokens.sShadowColor,
-                borderWidth: 1,
-                shadowBlur: 4,
-            },
-        },
-        animationType: 'scale',
-        animationEasing: 'elasticOut',
-    };
-    baseProduct = {
-        chartKey: 'ring',
-        baseOptions: {
-            series: this.baseSeriesOptions,
-        }
-    };
-    builder = new RingBuilder(this.baseProduct);
-    director = new VSECDirector(this.builder);
-    lastSelectedSeriesIndex = null;
-    lastSelectedDataIndex = null;
-    selectedPercent = null;
-    currentGraphicText = '';
-    constructor() {
-        super();
-    }
-    make() {
-        const makeOpts = {
-            valueFormatter: this.valueFormatter,
-            palette: this.palette,
-            colorResolver: this.colorResolver,
-        };
-        this.director.makeRing(this.data, this.optionsOverrides, makeOpts);
-    }
-    onInputChanges(changes) {
-        // Reset selection only if data changed
-        if (changes['data']) {
-            this.lastSelectedSeriesIndex = null;
-            this.lastSelectedDataIndex = null;
-            this.selectedPercent = null;
-            this.currentGraphicText = '';
-        }
-        super.onInputChanges(changes);
-    }
-    /**
-     * Maneja clics en los sectores del ring.
-     * Soporta múltiples series (anillos) y actualiza el KPI central.
-     */
-    onChartClick(event) {
-        if (this.chartInstance && event && event.dataIndex !== undefined) {
-            const isSameSelection = event.seriesIndex === this.lastSelectedSeriesIndex &&
-                event.dataIndex === this.lastSelectedDataIndex;
-            if (isSameSelection) {
-                // Toggle OFF
-                this.lastSelectedSeriesIndex = null;
-                this.lastSelectedDataIndex = null;
-                this.selectedPercent = null;
-                this.setGraphicText('');
-            }
-            else {
-                // SELECT
-                this.lastSelectedSeriesIndex = event.seriesIndex;
-                this.lastSelectedDataIndex = event.dataIndex;
-                this.selectedPercent = (event.percent !== undefined) ? event.percent + '%' : '';
-                this.setGraphicText(this.selectedPercent);
-            }
-            this.chartClick.emit({
-                type: 'cross-filter',
-                data: {
-                    category: event.name,
-                    serie: event.seriesName,
-                    value: event.value
-                }
-            });
-        }
-    }
-    onChartMouseOver(event) {
-        if (this.selectedPercent === null && event && event.percent !== undefined) {
-            this.setGraphicText(event.percent + '%');
-        }
-    }
-    onChartMouseOut(event) {
-        if (this.selectedPercent === null) {
-            this.setGraphicText('');
-        }
-    }
-    /**
-     * Actualiza el texto del Graphic central y persiste la selección en el modelo de opciones.
-     */
-    setGraphicText(text) {
-        this.currentGraphicText = text;
-        // Persistencia de GRAPHIC (KPI central)
-        this.chartInstance?.setOption({
-            graphic: {
-                style: {
-                    text: this.currentGraphicText,
-                    opacity: this.currentGraphicText ? 1 : 0,
-                }
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsRingComponent, isStandalone: true, selector: "vs-echarts-ring", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vs-echarts-ring', standalone: true, imports: [
-                        CommonModule,
-                        NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
-        }], ctorParameters: () => [] });
-
-/**
- * EchartsPieComponent
- *
- * Especialista en visualización de tipo Pie (Torta y Anillos concéntricos).
- * La primera serie se dibuja como un gráfico de torta tradicional (lleno) y
- * las subsecuentes como anillos concéntricos alrededor.
- */
-class EchartsPieComponent extends BaseEchartsComponent {
-    baseSeriesOptions = {
-        type: 'pie',
-        center: ['50%', '50%'],
-        avoidLabelOverlap: true,
-        minAngle: 3,
-        selectedMode: 'single',
-        selectedOffset: 4,
-        emphasis: {
-            scale: true,
-            scaleSize: 2,
-        },
-        select: {
-            itemStyle: {
-                borderColor: EChartsTokens.sBorderColor,
-                shadowColor: EChartsTokens.sShadowColor,
-                borderWidth: 1,
-                shadowBlur: 4,
-            },
-        },
-        animationType: 'scale',
-        animationEasing: 'elasticOut',
-    };
-    baseProduct = {
-        chartKey: 'pie',
-        baseOptions: {
-            series: this.baseSeriesOptions,
-        }
-    };
-    builder = new PieBuilder(this.baseProduct);
-    director = new VSECDirector(this.builder);
-    constructor() {
-        super();
-    }
-    make() {
-        const makeOpts = {
-            valueFormatter: this.valueFormatter,
-            palette: this.palette,
-            colorResolver: this.colorResolver,
-        };
-        this.director.makePie(this.data, this.optionsOverrides, makeOpts);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsPieComponent, isStandalone: true, selector: "vs-echarts-pie", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\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: EchartsPieComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vs-echarts-pie', standalone: true, imports: [
-                        CommonModule,
-                        NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
-        }], ctorParameters: () => [] });
-
-/**
- * EchartsFunnelComponent
- *
- * Component for Funnel visualization. Supports single and multiple measures.
- */
-class EchartsFunnelComponent extends BaseEchartsComponent {
-    baseSeriesOptions = {
-        type: 'funnel',
-        left: '10%',
-        width: '80%',
-        minSize: '0.01%',
-        maxSize: '100%',
-        sort: 'descending',
-        gap: 2,
-        label: {
-            show: true,
-            position: 'inside'
-        },
-        labelLine: {
-            show: false
-        },
-        itemStyle: {
-            borderColor: '#fff',
-            borderWidth: 1
-        },
-        emphasis: {
-            label: {
-                fontSize: 16
-            }
-        },
-        selectedMode: 'single',
-        select: {
-            label: {
-                fontSize: 16
-            },
-            itemStyle: {
-                borderWidth: 1,
-                borderColor: EChartsTokens.sBorderColor,
-                shadowColor: EChartsTokens.sShadowColor,
-                shadowBlur: 6,
-            }
-        },
-    };
-    baseProduct = {
-        chartKey: 'funnel',
-        baseOptions: {
-            series: this.baseSeriesOptions,
-        }
-    };
-    builder = new FunnelBuilder(this.baseProduct);
-    director = new VSECDirector(this.builder);
-    constructor() {
-        super();
-    }
-    make() {
-        const makeOpts = {
-            valueFormatter: this.valueFormatter,
-            palette: this.palette,
-            colorResolver: this.colorResolver,
-        };
-        this.director.makeFunnel(this.data, this.optionsOverrides, makeOpts);
+    getValueAxisOptions(data, overrides) {
+        const valueAxisOptions = getValueAxisOptions();
+        return valueAxisOptions;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsFunnelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsFunnelComponent, isStandalone: true, selector: "vs-echarts-funnel", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\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: EchartsFunnelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vs-echarts-funnel', standalone: true, imports: [
-                        CommonModule,
-                        NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
-        }], ctorParameters: () => [] });
 
 class EchartsBarComponent extends BaseEchartsComponent {
     /**
@@ -2815,6 +2517,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
+class SunburstBuilder {
+    baseProduct;
+    valueFormatter = (value) => value.toLocaleString();
+    palette = [];
+    // TODO: Hay que implementar un valor por defecto.
+    colorResolver;
+    result = {};
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
+    }
+    reset() {
+        this.result = {};
+    }
+    addSeries(data, overrides) {
+        if (!data || !data.source || data.source.length === 0) {
+            return;
+        }
+        const sunburstData = mapHierarchicalData(data.source, data.dimensions);
+        const depth = getTreeDepth(sunburstData);
+        const levels = [];
+        for (let i = 0; i <= depth; i++) {
+            levels.push({
+                label: {
+                    show: false,
+                },
+            });
+        }
+        const dynamiSerieOptions = {
+            name: '',
+            data: sunburstData,
+            levels: levels
+        };
+        const serie = merge$1({}, dynamiSerieOptions, overrides);
+        if (this.colorResolver) {
+            if (!serie.itemStyle) {
+                serie.itemStyle = {};
+            }
+            serie.itemStyle.color = this.colorResolver;
+        }
+        this.result.series = serie;
+    }
+    addTooltip(data, overrides) {
+        merge$1(overrides, {
+            formatter: getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter),
+        });
+        const tooltip = getTooltipOptions(overrides);
+        this.result.tooltip = tooltip;
+    }
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        merge$1(this.result, getCommons(opts));
+    }
+    addGraphic() { }
+    getResult() {
+        return this.result;
+    }
+    ;
+    addPolar() { }
+    addXAxis(data, overrides, type) { }
+    addYAxis(data, overrides, type) { }
+    addRadiusAxis(data, overrides) { }
+    addAngleAxis(data, overrides) { }
+    addLegend() { }
+    addDataZoom() { }
+    addDataset(data, opts) { }
+    // Setters 
+    /**
+     * 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;
+        }
+    }
+    /**
+     * Permite inyectar un resolver de colores dinámico.
+     */
+    setColorResolver(resolver) {
+        if (resolver) {
+            this.colorResolver = resolver;
+        }
+    }
+}
+
 class EChartsSunburstComponent extends BaseEchartsComponent {
     baseSeriesOptions = {
         type: 'sunburst',
@@ -2863,6 +2659,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
+/**
+ * SankeyBuilder
+ *
+ * Builder concreto para el gráfico Sankey (diagrama de flujos de izquierda a derecha).
+ */
+class SankeyBuilder {
+    baseProduct;
+    valueFormatter = (value) => value.toLocaleString();
+    palette = [];
+    colorResolver;
+    result = {};
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
+    }
+    reset() {
+        this.result = {};
+    }
+    addSeries(data, overrides) {
+        if (!data || !data.source || data.source.length === 0) {
+            return;
+        }
+        // Identificar medidas (todas las dimensiones excepto 'category')
+        const measureKeys = data.dimensions
+            .filter((d) => d.name !== "category")
+            .map((d) => d.name);
+        // Función auxiliar para sumarizar valores de medidas en caso de haber más de una
+        const getNodeValue = (node) => {
+            return measureKeys.reduce((sum, key) => sum + (Number(node[key]) || 0), 0);
+        };
+        const nodesMap = new Map();
+        const linksMap = new Map();
+        // Función recursiva para aplanar datos jerárquicos a nodos y enlaces
+        const traverse = (nodeList, level, parentId) => {
+            for (const node of nodeList) {
+                const category = node.category;
+                const currentId = `${category}___${level}`;
+                const value = getNodeValue(node);
+                nodesMap.set(currentId, (nodesMap.get(currentId) || 0) + value);
+                if (parentId) {
+                    const linkKey = `${parentId}--->${currentId}`;
+                    if (linksMap.has(linkKey)) {
+                        linksMap.get(linkKey).value += value;
+                    }
+                    else {
+                        linksMap.set(linkKey, {
+                            source: parentId,
+                            target: currentId,
+                            value: value,
+                        });
+                    }
+                }
+                if (node.children && node.children.length > 0) {
+                    traverse(node.children, level + 1, currentId);
+                }
+            }
+        };
+        // Comenzar el recorrido en el nivel 0
+        traverse(data.source, 0);
+        // al menos un nivel de links para dibujar.
+        if (linksMap.size === 0)
+            return;
+        // Mapear nodos acumulados a la estructura requerida por ECharts (name y opcionalmente color, sin value redundante)
+        const nodes = Array.from(nodesMap.keys()).map((currentId) => {
+            const category = currentId.split("___")[0];
+            const nodeItem = {
+                name: currentId,
+            };
+            if (this.colorResolver) {
+                const color = this.colorResolver({ name: category, data: nodeItem });
+                if (color) {
+                    nodeItem.itemStyle = { color };
+                }
+            }
+            return nodeItem;
+        });
+        const dynamicSerieOptions = {
+            type: "sankey",
+            orient: "horizontal", // De izquierda a derecha
+            draggable: true,
+            emphasis: {
+                focus: "adjacency",
+            },
+            lineStyle: {
+                color: "source",
+                opacity: 0.25,
+                curveness: 0.5,
+            },
+            label: {
+                show: true,
+                position: "right",
+                fontFamily: "'Inter', 'Roboto', 'Open Sans', sans-serif",
+                fontSize: 10,
+                formatter: (params) => {
+                    // Remover el sufijo de nivel de la etiqueta visual
+                    return params.name.split("___")[0];
+                },
+            },
+            roam: true,
+            data: nodes,
+            links: Array.from(linksMap.values()),
+        };
+        const serie = merge$1({}, dynamicSerieOptions, overrides);
+        if (this.colorResolver && !serie.itemStyle) {
+            serie.itemStyle = {};
+        }
+        if (this.colorResolver && serie.itemStyle) {
+            serie.itemStyle.color = this.colorResolver;
+        }
+        this.result.series = serie;
+    }
+    addTooltip(data, overrides) {
+        merge$1(overrides, {
+            formatter: getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter),
+        });
+        const tooltip = getTooltipOptions(overrides);
+        this.result.tooltip = tooltip;
+    }
+    addPolar() { }
+    addXAxis(data, overrides, type) { }
+    addYAxis(data, overrides, type) { }
+    addRadiusAxis(data, overrides) { }
+    addAngleAxis(data, overrides) { }
+    addLegend() { }
+    addDataZoom() { }
+    addDataset(data, opts) { }
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        merge$1(this.result, getCommons(opts));
+    }
+    addGraphic() { }
+    getResult() {
+        return this.result;
+    }
+    setValueFormatter(formatter) {
+        if (formatter) {
+            this.valueFormatter = formatter;
+        }
+    }
+    setPalette(palette) {
+        if (palette) {
+            this.palette = palette;
+        }
+    }
+    setColorResolver(resolver) {
+        if (resolver) {
+            this.colorResolver = resolver;
+        }
+    }
+}
+
 class EchartsSankeyComponent extends BaseEchartsComponent {
     baseSeriesOptions = {
         type: 'sankey',