@visionaris-bruno/vs-echarts 9.0.3 → 9.0.6

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

@@ -185,6 +185,7 @@ function defaultOptionsOverrides() {
         },
     };
 }
+const defaultValueFormatter = (value) => `${value}`;
 
 // TODO: Exportar valores por defecto de vs-echarts.config.ts por este servicio y actualizar en logica de frontend.
 class VSEchartsConfigService {
@@ -237,11 +238,11 @@ class BaseEchartsComponent {
     data = { dimensions: [], source: [] };
     optionsOverrides = defaultOptionsOverrides();
     /** Paleta de colores básica */
-    palette;
+    palette = getDefaultPalette();
     /** Resolver de colores dinámico (Callback) */
     colorResolver;
     /** Formateador de valores para etiquetas y tooltips */
-    valueFormatter;
+    valueFormatter = defaultValueFormatter;
     chartClick = new EventEmitter();
     /** Subject para debouncing de actualizaciones. ReplaySubject asegura no perder el primer renderizado. */
     updateSubject = new ReplaySubject(1);
@@ -683,7 +684,7 @@ function getCellValue(val) {
 /**
  * Formatter generator for 'item' trigger strategy in tooltips.
  */
-function getItemTooltipFormatter(data, formatCellValue, opts) {
+function getItemTooltipFormatter(data, valueFormatter, opts) {
     return (params) => {
         let title = '', subtitle = '', valFormatted = '', percentVal = '';
         const showSerieName = opts?.showSerieName ?? true;
@@ -694,15 +695,16 @@ function getItemTooltipFormatter(data, formatCellValue, opts) {
             return '';
         const rawValue = (row && typeof row === 'object') ? row[dimensionName] : params.value;
         const serieName = showSerieName ? `${params.marker} ${params.seriesName}<br/ >` : '';
-        title = params.name || (row && typeof row === 'object' ? row.category : '');
+        const categoryName = params.name || (row && typeof row === 'object' ? row.category : '');
+        title = categoryName;
         subtitle = serieName;
-        valFormatted = formatCellValue(Number(rawValue ?? 0), dimensionName);
-        // pie/funnel series
+        valFormatted = valueFormatter(Number(rawValue ?? 0), dimensionName);
+        // pie/funnel/ring series
         if (params.percent != undefined) {
             percentVal = ` (${params.percent}%)`;
-            if (data.dimensions.length <= 2) {
-                subtitle = '';
-            }
+            // invertir titulo y subtitulo
+            title = `${params.seriesName}`;
+            subtitle = `${params.marker} ${categoryName}</br>`;
         }
         // sankey
         if (params.dataType != undefined) {
@@ -712,11 +714,11 @@ function getItemTooltipFormatter(data, formatCellValue, opts) {
                 const sourceName = params.data.source.split('___')[0];
                 const targetName = params.data.target.split('___')[0];
                 title = `${sourceName} &rarr; ${targetName}`;
-                valFormatted = formatCellValue(Number(params.value ?? 0), dimensionName);
+                valFormatted = valueFormatter(Number(params.value ?? 0), dimensionName);
             }
             else if (dataType === 'node') {
                 title = params.name.split('___')[0];
-                valFormatted = formatCellValue(Number(params.value ?? 0), dimensionName);
+                valFormatted = valueFormatter(Number(params.value ?? 0), dimensionName);
             }
         }
         // sunburst treemap
@@ -735,7 +737,7 @@ function getItemTooltipFormatter(data, formatCellValue, opts) {
 /**
  * Formatter generator for 'axis' trigger strategy in tooltips.
  */
-function getAxisTooltipFormatter(data, formatCellValue, opts) {
+function getAxisTooltipFormatter(data, valueFormatter, opts) {
     return (params) => {
         if (!params)
             return '';
@@ -753,7 +755,7 @@ function getAxisTooltipFormatter(data, formatCellValue, opts) {
                 continue;
             const itemRow = item.value;
             const rawValue = (itemRow && typeof itemRow === 'object') ? itemRow[dimensionName] : item.value;
-            const valFormatted = formatCellValue(Number(rawValue ?? 0), dimensionName);
+            const valFormatted = valueFormatter(Number(rawValue ?? 0), dimensionName);
             html += `${item.marker} ${item.seriesName}: <b>${valFormatted}</b><br/>`;
         }
         return html;
@@ -762,10 +764,10 @@ function getAxisTooltipFormatter(data, formatCellValue, opts) {
 /**
  * Unified tooltip formatter generator that selects the appropriate strategy based on the trigger.
  */
-function getTooltipFormatter(trigger, data, formatCellValue, opts) {
+function getTooltipFormatter(trigger, data, valueFormatter, opts) {
     return trigger === 'axis'
-        ? getAxisTooltipFormatter(data, formatCellValue, opts)
-        : getItemTooltipFormatter(data, formatCellValue, opts);
+        ? getAxisTooltipFormatter(data, valueFormatter, opts)
+        : getItemTooltipFormatter(data, valueFormatter, opts);
 }
 function getCommons(opts) {
     const palette = opts?.palette ?? getDefaultPalette();
@@ -852,7 +854,7 @@ function getTreeDepth(nodes) {
  */
 class RingBuilder {
     baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     colorResolver;
     result = {};
@@ -948,10 +950,10 @@ class RingBuilder {
             }];
     }
     addTooltip(data, overrides) {
-        merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
-        });
-        const tooltip = getTooltipOptions(overrides);
+        const tooltipOptsOverrides = {};
+        tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger, data, this.valueFormatter);
+        merge(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
         this.result.tooltip = tooltip;
     }
     addLegend() {
@@ -984,15 +986,12 @@ class RingBuilder {
     getResult() {
         return this.result;
     }
-    formatCellValue(value, key) {
-        return this.valueFormatter(value, key);
-    }
 }
 
 class BoxPlotBuilder {
     baseProduct;
     translateService;
-    valueFormatter = (value, key) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     // TODO: Hay que implementar un valor por defecto.
     colorResolver;
@@ -1200,344 +1199,231 @@ class BoxPlotBuilder {
 }
 
 /**
- * Director de Builds.
+ * 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 VSECDirector {
-    builder = undefined;
-    constructor(builder) {
-        this.builder = builder;
-    }
-    makeBar(data, overrides, opts = {}) {
-        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
-            x: 'category',
-            y: 'value',
-            // TODO agregar radius y angle axis
-        } } = opts;
-        this.builder.reset();
-        // El orden importa, primero callbaks y despues componentes.
-        //chart callbacks
-        this.builder.setValueFormatter(valueFormatter);
-        this.builder.setPalette(palette);
-        this.builder.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();
-    }
-    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();
-    }
-    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();
+class EChartBuilder {
+    baseProduct = undefined;
+    valueFormatter = defaultValueFormatter;
+    palette = [];
+    colorResolver;
+    result = {};
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
     }
-    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();
+    reset() {
+        this.result = {};
     }
-    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();
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        merge$1(this.result, getCommons(opts));
     }
-    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();
+    /**
+     *
+     * @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,
+            };
+            const seriesOption = merge$1(dynamicOverrides, overrides);
+            // Inyectar el resolver de color si existe
+            if (this.colorResolver && seriesOption.itemStyle) {
+                seriesOption.itemStyle.color = this.colorResolver;
+            }
+            // Inyectar el formatter de etiquetas
+            if (seriesOption.label && this.valueFormatter != undefined) {
+                const valueFormatter = this.valueFormatter;
+                seriesOption.label.formatter = (params) => {
+                    const row = params.value;
+                    const rawValue = (row && typeof row === 'object') ? row[dimKey] : params.value;
+                    return valueFormatter(Number(rawValue ?? 0), dimKey);
+                };
+            }
+            return seriesOption;
+        });
+        this.result.series = series;
     }
-    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();
+    /**
+     * TODO: Mejorar funcion, no me convence como se implemento el tooltip formatter.
+     * @param data
+     * @param overrides
+     */
+    addTooltip(data, overrides) {
+        const optsOverrides = {};
+        // inyecto formateador personalizado de tooltip
+        optsOverrides.formatter = getTooltipFormatter(overrides.trigger, data, this.valueFormatter.bind(this));
+        merge$1(optsOverrides, overrides);
+        const tooltip = getTooltipOptions(optsOverrides);
+        this.result.tooltip = tooltip;
     }
-    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();
+    addPolar() {
+        const polar = [];
+        polar.push({
+            radius: '65%',
+            center: ["50%", "44%"],
+        });
+        this.result.polar = polar;
     }
-    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);
+    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;
     }
-    makeBoxplot(data, overrides, opts = {}) {
-        if (this.builder instanceof BoxPlotBuilder == false) {
-            return;
+    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);
         }
-        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();
+        else if (type == 'value') {
+            yAxis.push(valueAxisOptions);
+        }
+        this.result.yAxis = yAxis;
     }
-}
-
-/**
- * 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,
+    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,
             },
-        },
-        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,
+            axisLabel: {
+                margin: 2,
+                fontSize: 8,
+                align: 'right',
+                rotate: 20,
+                verticalAlign: 'top',
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    opacity: 0.2,
+                    type: 'solid',
+                }
+            },
+            axisLine: {
+                lineStyle: {
+                    type: 'dashed',
+                },
+            }
         };
-        this.director.makeRing(this.data, this.optionsOverrides, makeOpts);
+        const radialAxisOptions = getValueAxisOptions(radiusAxisOverrides);
+        radiusAxis.push(radialAxisOptions);
+        this.result.radiusAxis = radiusAxis;
     }
-    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);
+    addAngleAxis(data, overrides) {
+        const angleAxis = [];
+        const categoryAxisOptions = this.getCategoryAxisOptions(data, overrides);
+        angleAxis.push(categoryAxisOptions);
+        this.result.angleAxis = angleAxis;
     }
-    /**
-     * 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);
+    addLegend() {
+        this.result.legend = getLegendOptions();
+    }
+    // No-ops for ring charts
+    addGraphic() { }
+    addDataset(data) { }
+    addDataZoom() {
+        this.result.dataZoom = [
+            {
+                type: 'inside'
+            },
+            {
+                type: 'slider',
+                height: 20,
+                bottom: 60
             }
-            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 + '%');
+    getResult() {
+        return this.result;
+    }
+    ;
+    // Setters 
+    /**
+     * Permite inyectar un formateador de valores externo.
+     */
+    setValueFormatter(formatter) {
+        if (formatter) {
+            this.valueFormatter = formatter;
         }
     }
-    onChartMouseOut(event) {
-        if (this.selectedPercent === null) {
-            this.setGraphicText('');
+    /**
+     * Permite inyectar una paleta de colores básica.
+     */
+    setPalette(palette) {
+        if (palette) {
+            this.palette = palette;
         }
     }
     /**
-     * Actualiza el texto del Graphic central y persiste la selección en el modelo de opciones.
+     * Permite inyectar un resolver de colores dinámico.
      */
-    setGraphicText(text) {
-        this.currentGraphicText = text;
-        // Persistencia de GRAPHIC (KPI central)
-        this.chartInstance?.setOption({
-            graphic: {
-                style: {
-                    text: this.currentGraphicText,
-                    opacity: this.currentGraphicText ? 1 : 0,
-                }
-            }
-        });
+    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;
     }
-    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", 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,
-                    ], 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
@@ -1547,7 +1433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  */
 class PieBuilder {
     baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     colorResolver;
     result = {};
@@ -1659,10 +1545,10 @@ class PieBuilder {
         this.result.series = series;
     }
     addTooltip(data, overrides) {
-        merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
-        });
-        const tooltip = getTooltipOptions(overrides);
+        const tooltipOptsOverrides = {};
+        tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger, data, this.valueFormatter);
+        merge(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
         this.result.tooltip = tooltip;
     }
     addLegend() {
@@ -1696,70 +1582,7 @@ class PieBuilder {
     getResult() {
         return this.result;
     }
-    formatCellValue(value, key) {
-        return this.valueFormatter(value, key);
-    }
-}
-
-/**
- * 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", 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,
-                    ], 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
@@ -1768,7 +1591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  */
 class FunnelBuilder {
     baseProduct;
-    valueFormatter = (value) => value.toLocaleString();
+    valueFormatter = defaultValueFormatter;
     palette = [];
     colorResolver;
     result = {};
@@ -1823,10 +1646,12 @@ class FunnelBuilder {
         this.result.series = seriesOption;
     }
     addTooltip(data, overrides) {
-        merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
-        });
-        const tooltip = getTooltipOptions(overrides);
+        const tooltipOptsOverrides = {};
+        if (this.valueFormatter != undefined) {
+            tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger, data, this.valueFormatter);
+        }
+        merge(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
         this.result.tooltip = tooltip;
     }
     addLegend() {
@@ -1860,11 +1685,721 @@ class FunnelBuilder {
     getResult() {
         return this.result;
     }
-    formatCellValue(value, key) {
-        return this.valueFormatter(value, key);
-    }
 }
 
+class SunburstBuilder {
+    baseProduct;
+    valueFormatter = defaultValueFormatter;
+    palette = [];
+    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) {
+        const tooltipOptsOverrides = {};
+        tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter);
+        merge$1(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
+        this.result.tooltip = tooltip;
+    }
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        merge$1(this.result, getCommons(opts));
+    }
+    getResult() {
+        return this.result;
+    }
+    ;
+    // 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;
+        }
+    }
+    /**
+     * 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;
+        }
+    }
+}
+
+/**
+ * SankeyBuilder
+ *
+ * Builder concreto para el gráfico Sankey (diagrama de flujos de izquierda a derecha).
+ */
+class SankeyBuilder {
+    baseProduct;
+    valueFormatter = defaultValueFormatter;
+    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) {
+        const tooltipOptsOverrides = {};
+        tooltipOptsOverrides.formatter = getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter);
+        merge$1(tooltipOptsOverrides, overrides);
+        const tooltip = getTooltipOptions(tooltipOptsOverrides);
+        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;
+        }
+    }
+}
+
+/**
+ * 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();
+    }
+    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',
+        }, } = 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);
+        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", 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,
+                    ], 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", 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,
+                    ], 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
  *
@@ -1922,253 +2457,21 @@ class EchartsFunnelComponent extends BaseEchartsComponent {
     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", 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,
-                    ], 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) {
-        this.baseProduct = baseProduct;
-    }
-    reset() {
-        this.result = {};
-    }
-    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;
-        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;
-    }
-    /**
-     * TODO: Mejorar funcion, no me convence como se implemento el tooltip formatter.
-     * @param data
-     * @param overrides
-     */
-    addTooltip(data, overrides) {
-        // inyecto formateador a overrides de tooltip 
-        merge$1(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
-        });
-        const tooltip = getTooltipOptions(overrides);
-        this.result.tooltip = tooltip;
-    }
-    addPolar() {
-        const polar = [];
-        polar.push({
-            radius: '65%',
-            center: ["50%", "44%"],
-        });
-        this.result.polar = polar;
-    }
-    addXAxis(data, overrides, type = 'category') {
-        const xAxis = [];
-        const categoryAxisOptions = this.getCategoryAxisOptions(data, overrides);
-        const valueAxisOptions = this.getValueAxisOptions(data, overrides);
-        if (type == 'category') {
-            xAxis.push(categoryAxisOptions);
-        }
-        else if (type == 'value') {
-            xAxis.push(valueAxisOptions);
-        }
-        this.result.xAxis = xAxis;
-    }
-    addYAxis(data, overrides, type = 'value') {
-        const yAxis = [];
-        const categoryAxisOptions = this.getCategoryAxisOptions(data, overrides);
-        const valueAxisOptions = this.getValueAxisOptions(data, overrides);
-        if (type == 'category') {
-            yAxis.push(categoryAxisOptions);
-        }
-        else if (type == 'value') {
-            yAxis.push(valueAxisOptions);
-        }
-        this.result.yAxis = yAxis;
-    }
-    addRadiusAxis(data, overrides) {
-        const radiusAxis = [];
-        /** estilos exclusivos hardcodeados para el eje de valores del sistema de coordenadas polar*/
-        const radiusAxisOverrides = {
-            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',
-                }
-            },
-            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();
-    }
-    // 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;
-        }
-    }
-    // Utils
-    getCategoryAxisOptions(data, overrides) {
-        // No explicit data needed on category axis when using ECharts dataset
-        const categoryAxisOptionsOverrides = {
-            ...overrides.categoryAxis[0]
+            palette: this.palette,
+            colorResolver: this.colorResolver,
         };
-        const categoryAxisOptions = getCategoryAxisOptions(categoryAxisOptionsOverrides);
-        return categoryAxisOptions;
-    }
-    getValueAxisOptions(data, overrides) {
-        const valueAxisOptions = getValueAxisOptions();
-        return valueAxisOptions;
+        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", 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,
+                    ], 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 {
     /**
@@ -2570,100 +2873,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], 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',
@@ -2712,158 +2921,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n></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',
@@ -2949,7 +3006,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
-// Interfaces de Inputs de Base EChart Component //
+// Interfaces de Inputs de Base EChart Component // 
+// TopLevelFormatterParams
 
 ;
 ;