@visionaris-bruno/vs-echarts 7.1.3 → 8.1.0

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

@@ -1,7 +1,7 @@
 import { provideEchartsCore, NgxEchartsDirective } from 'ngx-echarts';
 import * as echarts from 'echarts/core';
 import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart } from 'echarts/charts';
-import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GraphicComponent, ToolboxComponent, PolarComponent } from 'echarts/components';
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GraphicComponent, ToolboxComponent, PolarComponent, DatasetComponent } 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';
@@ -75,6 +75,7 @@ function initializeEcharts() {
         GraphicComponent,
         ToolboxComponent,
         PolarComponent,
+        DatasetComponent,
     ]);
     initialized = true;
 }
@@ -175,7 +176,7 @@ function defaultOptionsOverrides() {
 class BaseEchartsComponent {
     chartContainer;
     /** Datos normalizados para graficar */
-    data = { categories: [], series: [] };
+    data = { dimensions: [], source: [] };
     optionsOverrides = defaultOptionsOverrides();
     /** Paleta de colores básica */
     palette;
@@ -406,12 +407,12 @@ function getLegendOptions(overrides) {
     return merge({}, defaults, overrides);
 }
 function getCategoryAxisOptions(overrides) {
-    const categories = resolveCategoryNames(overrides?.data);
-    const autoRotate = categories.length > 10 ? 45 : 0;
+    const categories = overrides?.data ? overrides.data.map(c => typeof c === 'string' ? c : (c?.name || String(c))) : undefined;
+    const autoRotate = categories && categories.length > 10 ? 45 : 0;
     const defaults = {
         type: 'category',
         triggerEvent: true,
-        data: categories,
+        ...(categories ? { data: categories } : {}),
         axisLabel: {
             rotate: autoRotate,
             interval: 0,
@@ -429,7 +430,7 @@ function getCategoryAxisOptions(overrides) {
             }
         }
     };
-    return merge({}, defaults, { ...overrides, data: categories });
+    return merge({}, defaults, overrides);
 }
 function getValueAxisOptions(overrides) {
     const defaults = {
@@ -598,12 +599,11 @@ function applyLineSelectionStyle(series, selectedCategoryIndex, selectedSeriesIn
 /**
  * Resolves the unique key of a category safely.
  */
-function getCategoryKey(categories, index) {
-    if (!categories || !categories[index]) {
+function getCategoryKey(dimensions, index) {
+    if (!dimensions || !dimensions[index]) {
         return String(index);
     }
-    const node = categories[index];
-    return node.key || node.name || String(index);
+    return dimensions[index].name;
 }
 /**
  * Resolves the numeric value from a series data point.
@@ -613,128 +613,35 @@ function getCellValue(val) {
         return 0;
     return val;
 }
-function flattenCategoriesToFirstLevel(categories) {
-    if (!categories)
-        return [];
-    return categories.map(cat => ({
-        name: cat.name,
-        key: cat.key
-    }));
-}
-function getLeafIndicesMap(categories) {
-    let leafCount = 0;
-    const topLevelLeaves = [];
-    const countLeaves = (node) => {
-        if (!node.children || node.children.length === 0) {
-            return 1;
-        }
-        let sum = 0;
-        for (const child of node.children) {
-            sum += countLeaves(child);
-        }
-        return sum;
-    };
-    for (const cat of categories) {
-        const leavesUnderCat = countLeaves(cat);
-        topLevelLeaves.push({
-            start: leafCount,
-            end: leafCount + leavesUnderCat
-        });
-        leafCount += leavesUnderCat;
-    }
-    return {
-        topLevelLeaves,
-        totalLeaves: leafCount
-    };
-}
-function collectLeafSeries(nodes, parentNamePath = []) {
-    const leaves = [];
-    for (const node of nodes) {
-        const currentPath = [...parentNamePath, node.name];
-        if (node.children && node.children.length > 0) {
-            leaves.push(...collectLeafSeries(node.children, currentPath));
-        }
-        else {
-            const combinedName = currentPath.join(' ');
-            leaves.push({
-                ...node,
-                name: combinedName
-            });
-        }
-    }
-    return leaves;
-}
-function flattenEChartData(data) {
-    if (!data)
-        return { categories: [], series: [] };
-    const categories = data.categories || [];
-    const series = data.series || [];
-    const topLevelCategories = flattenCategoriesToFirstLevel(categories);
-    const { topLevelLeaves } = getLeafIndicesMap(categories);
-    const flatSeries = collectLeafSeries(series).map(s => {
-        const aggregatedData = [];
-        for (const range of topLevelLeaves) {
-            let sum = 0;
-            for (let j = range.start; j < range.end; j++) {
-                sum += s.data[j] ?? 0;
-            }
-            aggregatedData.push(sum);
-        }
-        return {
-            ...s,
-            data: aggregatedData
-        };
-    });
-    return {
-        categories: topLevelCategories,
-        series: flatSeries
-    };
-}
-/**
- * Normalizes category nodes into an array of string names for category axes.
- */
-function resolveCategoryNames(categories) {
-    if (!categories)
-        return [];
-    return categories.map(c => {
-        if (!c)
-            return '';
-        if (typeof c === 'string')
-            return c;
-        if (typeof c === 'object' && 'name' in c)
-            return c.name;
-        return String(c);
-    });
-}
-/**
- * Maps categories and series data into a flat array of objects suitable for Pie/Ring/Funnel charts.
- */
-function mapToChartItems(categories, seriesNode) {
-    if (!categories || !seriesNode || !seriesNode.data)
-        return [];
-    return categories.map((catNode, catIndex) => ({
-        name: catNode.name,
-        value: getCellValue(seriesNode.data[catIndex]),
-        originalMeassureKey: seriesNode.originalKey || getCategoryKey(categories, catIndex)
-    }));
-}
 /**
  * Formatter generator for 'item' trigger strategy in tooltips.
  */
 function getItemTooltipFormatter(data, formatCellValue, opts) {
-    const totalSeries = data.series.length;
     return (params) => {
+        let title = '', subtitle = '', valFormatted = '', auxVal = '';
         const showSerieName = opts?.showSerieName ?? true;
-        const seriesObj = data.series[params.seriesIndex];
-        const key = params.data?.originalMeassureKey || seriesObj?.originalKey || getCategoryKey(data.categories, params.dataIndex);
-        const valFormatted = formatCellValue(params.value, key);
+        const row = params.value;
+        const dimension = data.dimensions[params.seriesIndex + 1];
+        const dimensionName = dimension ? dimension.name : '';
+        if (!dimensionName)
+            return '';
+        const rawValue = (row && typeof row === 'object') ? row[dimensionName] : params.value;
         const serieName = showSerieName ? `${params.marker} ${params.seriesName}<br/ >` : '';
-        //TODO: Unificar salida del tooltip
-        if (params.percent !== undefined) {
-            const seriesHeader = totalSeries > 1 ? serieName : '';
-            return `<div style="text-align: center;"><b>${params.name}</b><br/>${seriesHeader} <b>${valFormatted}</b> (${params.percent}%)</div>`;
+        title = params.name || (row && typeof row === 'object' ? row.category : '');
+        subtitle = (params.percent !== undefined && data.dimensions.length <= 2) ? '' : serieName;
+        valFormatted = formatCellValue(Number(rawValue ?? 0), dimensionName);
+        auxVal = params.percent !== undefined ? ` (${params.percent}%)` : '';
+        // sunburst treemap
+        if (params.treePathInfo) {
+            const lastLevelIndex = params.treePathInfo.length - 1, parentNodeIndex = lastLevelIndex - 1;
+            const parentNode = params.treePathInfo[parentNodeIndex];
+            const oldParentNode = params.treePathInfo[1];
+            if (parentNode.name) {
+                title = `${parentNode.name}->${params.name}`;
+                subtitle = `${params.marker} ${oldParentNode.name}<br/ >`;
+            }
         }
-        return `<div style="text-align: center;"><b>${params.name}</b><br/>${serieName}<b>${valFormatted}</b></div>`;
+        return `<div style="text-align: center;"><b>${title}</b><br/>${subtitle}<b>${valFormatted}</b>${auxVal}</div>`;
     };
 }
 /**
@@ -748,13 +655,17 @@ function getAxisTooltipFormatter(data, formatCellValue, opts) {
         if (items.length === 0)
             return '';
         const firstItem = items[0];
-        let html = `<b>${firstItem.name}</b><br/>`;
+        const row = firstItem.value;
+        const title = firstItem.name || (row && typeof row === 'object' ? row.category : '');
+        let html = `<b>${title}</b><br/>`;
         for (const item of items) {
-            const seriesObj = data.series[item.seriesIndex];
-            if (!seriesObj)
+            const dimension = data.dimensions[item.seriesIndex + 1];
+            const dimensionName = dimension ? dimension.name : '';
+            if (!dimensionName)
                 continue;
-            const key = seriesObj.originalKey || getCategoryKey(data.categories, item.dataIndex);
-            const valFormatted = formatCellValue(item.value, key);
+            const itemRow = item.value;
+            const rawValue = (itemRow && typeof itemRow === 'object') ? itemRow[dimensionName] : item.value;
+            const valFormatted = formatCellValue(Number(rawValue ?? 0), dimensionName);
             html += `${item.marker} ${item.seriesName}: <b>${valFormatted}</b><br/>`;
         }
         return html;
@@ -788,63 +699,43 @@ function getCommons(opts) {
     return common;
 }
 /**
- * Maps hierarchical category nodes and an array of series into a nested structure
- * suitable for Sunburst/Treemap charts.
- * The categories form the levels closest to the center, and the series form the leaf level.
+ * Maps hierarchical category nodes and their measures into a nested structure
+ * suitable for Sunburst/Treemap charts from the IEChartDataNode children.
  */
-function mapHierarchicalData(categories, series) {
-    if (!categories) {
+function mapHierarchicalData(source, dimensions) {
+    if (!source) {
         return [];
     }
-    let leafIndex = 0;
-    function mapSeriesTree(seriesNodes, index) {
-        if (!seriesNodes) {
-            return [];
-        }
-        return seriesNodes.map(s => {
-            const node = {
-                name: s.name,
-            };
-            if (s.children && s.children.length > 0) {
-                node.children = mapSeriesTree(s.children, index);
-            }
-            else {
-                // Leaf series node: extract value from s.data[index]
-                const dataVal = s.data?.[index];
-                if (dataVal !== undefined && dataVal !== null) {
-                    const value = typeof dataVal === 'object' && 'value' in dataVal ? dataVal.value : dataVal;
-                    node.value = getCellValue(value);
-                }
-                else {
-                    node.value = 0;
-                }
-                node.originalMeassureKey = s.originalKey;
-            }
-            return node;
-        });
-    }
+    const measureDims = dimensions.filter(d => d.name !== 'category');
     function traverse(nodes) {
-        return nodes.map(cat => {
-            const node = {
-                name: cat.name,
+        return nodes.map(node => {
+            const item = {
+                name: node.category,
             };
-            if (cat.children && cat.children.length > 0) {
-                node.children = traverse(cat.children);
+            if (node.children && node.children.length > 0) {
+                item.children = traverse(node.children);
             }
             else {
-                // Leaf category node: append the series tree as children
-                if (series && series.length > 0) {
-                    node.children = mapSeriesTree(series, leafIndex);
+                // Leaf category node: append the series (measures) as the final level of children
+                if (measureDims.length > 0) {
+                    item.children = measureDims.map(dim => {
+                        const rawValue = node[dim.name];
+                        const value = typeof rawValue === 'object' && rawValue !== null && 'value' in rawValue ? rawValue.value : rawValue;
+                        return {
+                            name: dim.displayName || dim.name,
+                            value: getCellValue(Number(value ?? 0)),
+                            originalMeassureKey: dim.name
+                        };
+                    });
                 }
                 else {
-                    node.value = 0;
+                    item.value = 0;
                 }
-                leafIndex++;
             }
-            return node;
+            return item;
         });
     }
-    return traverse(categories);
+    return traverse(source);
 }
 /**
  * Calculates the maximum depth of a tree structure.
@@ -891,10 +782,14 @@ class RingBuilder {
         merge(this.result, common);
     }
     addSeries(data, overrides) {
-        const flatData = flattenEChartData(data);
-        if (!flatData || !flatData.series.length)
+        if (!data || !data.dimensions || !data.source || data.source.length === 0)
             return;
-        const totalRings = flatData.series.length; // Cada serie es un anillo
+        this.result.dataset = {
+            dimensions: data.dimensions,
+            source: data.source
+        };
+        const measureDims = data.dimensions.filter(d => d.name !== 'category');
+        const totalRings = measureDims.length; // Cada serie es un anillo
         // Configuración dinámica de radios y márgenes
         const margin = totalRings > 1 ? Math.max(0.5, 2.5 - (totalRings * 0.1)) : 0;
         const minInnerRadius = totalRings === 1 ? 45 : (totalRings > 5 ? Math.max(15, 40 - (totalRings * 1.2)) : 40);
@@ -903,12 +798,14 @@ class RingBuilder {
         const thickness = availableSpan / totalRings;
         const borderRadius = totalRings === 1 ? 10 : Math.max(2, Math.min(10, thickness * 0.8));
         const borderWidth = totalRings === 1 ? 2 : Math.max(0.5, Math.min(2, thickness * 0.15));
-        const series = flatData.series.map((s, ringIndex) => {
+        const series = measureDims.map((dim, ringIndex) => {
+            const dimKey = dim.name;
+            const friendlyName = dim.displayName || dim.name;
             const inner = minInnerRadius + (ringIndex * (thickness + margin));
             const outer = inner + thickness;
-            const pieData = mapToChartItems(flatData.categories, s);
             const dynamicRingSeriesOptions = {
-                name: s.name,
+                name: friendlyName,
+                type: 'pie',
                 radius: [`${inner}%`, `${outer}%`],
                 itemStyle: {
                     borderRadius: borderRadius,
@@ -924,7 +821,10 @@ class RingBuilder {
                         borderWidth: borderWidth,
                     },
                 },
-                data: pieData,
+                encode: {
+                    itemName: 'category',
+                    value: dimKey
+                },
                 id: `ring_${ringIndex}`,
             };
             const seriesOption = merge(dynamicRingSeriesOptions, overrides);
@@ -960,9 +860,8 @@ class RingBuilder {
             }];
     }
     addTooltip(data, overrides) {
-        const flatData = flattenEChartData(data);
         merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
+            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
@@ -1019,12 +918,13 @@ class VSECDirector {
         //chart callbacks
         this.builder.setValueFormatter(valueFormatter);
         this.builder.setPalette(palette);
-        this.builder.setValueFormatter(valueFormatter);
+        this.builder.setColorResolver(colorResolver);
         const product = this.builder.baseProduct;
-        const seriesOverrides = merge$1(product.baseOptions.series, overrides[product.chartKey].series);
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
         // chart components
         this.builder.addCommons();
-        this.builder.addSeries(data, seriesOverrides);
+        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);
@@ -1041,12 +941,13 @@ class VSECDirector {
         //chart callbacks
         this.builder.setValueFormatter(valueFormatter);
         this.builder.setPalette(palette);
-        this.builder.setValueFormatter(valueFormatter);
+        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);
+        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']);
@@ -1064,12 +965,13 @@ class VSECDirector {
         //chart callbacks
         this.builder.setValueFormatter(valueFormatter);
         this.builder.setPalette(palette);
-        this.builder.setValueFormatter(valueFormatter);
+        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);
+        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);
@@ -1084,12 +986,13 @@ class VSECDirector {
         // El orden importa, primero callbacks y despues componentes.
         this.builder.setValueFormatter(valueFormatter);
         this.builder.setPalette(palette);
-        this.builder.setValueFormatter(valueFormatter);
+        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);
+        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);
@@ -1106,7 +1009,8 @@ class VSECDirector {
         const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
         // chart components
         this.builder.addCommons();
-        this.builder.addSeries(data, seriesOverrides);
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
         this.builder.addGraphic();
         this.builder.addTooltip(data, overrides.tooltip);
         this.builder.addLegend();
@@ -1122,7 +1026,8 @@ class VSECDirector {
         const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
         // chart components
         this.builder.addCommons();
-        this.builder.addSeries(data, seriesOverrides);
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
         this.builder.addTooltip(data, overrides.tooltip);
         this.builder.addLegend();
     }
@@ -1137,7 +1042,8 @@ class VSECDirector {
         const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
         // chart components
         this.builder.addCommons();
-        this.builder.addSeries(data, seriesOverrides);
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
         this.builder.addTooltip(data, overrides.tooltip);
         this.builder.addLegend();
     }
@@ -1152,7 +1058,8 @@ class VSECDirector {
         const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
         // chart components
         this.builder.addCommons();
-        this.builder.addSeries(data, seriesOverrides);
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
         this.builder.addTooltip(data, overrides.tooltip);
         // this.builder.addLegend();
     }
@@ -1318,18 +1225,26 @@ class PieBuilder {
         merge(this.result, common);
     }
     addSeries(data, overrides) {
-        const flatData = flattenEChartData(data);
-        if (!flatData || !flatData.series.length)
+        if (!data || !data.dimensions || !data.source || data.source.length === 0)
             return;
-        const totalSeries = flatData.series.length;
+        this.result.dataset = {
+            dimensions: data.dimensions,
+            source: data.source
+        };
+        const measureDims = data.dimensions.filter(d => d.name !== 'category');
+        const totalSeries = measureDims.length;
         let series = [];
         if (totalSeries === 1) {
-            const s = flatData.series[0];
-            const pieData = mapToChartItems(flatData.categories, s);
+            const dim = measureDims[0];
+            const dimKey = dim.name;
+            const friendlyName = dim.displayName || dim.name;
             const dynamicPieSeriesOptions = {
-                name: s.name,
+                name: friendlyName,
                 type: 'pie',
-                data: pieData,
+                encode: {
+                    itemName: 'category',
+                    value: dimKey
+                },
                 id: `pie_0`,
                 radius: [0, '50%'],
                 label: {
@@ -1354,8 +1269,9 @@ class PieBuilder {
             const numRings = totalSeries - 1;
             const availableSpan = maxOuterRadius - (centerPieRadius + margin) - (margin * (numRings - 1));
             const thickness = availableSpan / numRings;
-            series = flatData.series.map((s, idx) => {
-                const pieData = mapToChartItems(flatData.categories, s);
+            series = measureDims.map((dim, idx) => {
+                const dimKey = dim.name;
+                const friendlyName = dim.displayName || dim.name;
                 let radius;
                 let labelPosition;
                 let labelLineShow;
@@ -1376,7 +1292,7 @@ class PieBuilder {
                     labelLineShow = true;
                 }
                 const dynamicPieSeriesOptions = {
-                    name: s.name,
+                    name: friendlyName,
                     type: 'pie',
                     radius: radius,
                     label: {
@@ -1386,7 +1302,10 @@ class PieBuilder {
                     labelLine: {
                         show: labelLineShow
                     },
-                    data: pieData,
+                    encode: {
+                        itemName: 'category',
+                        value: dimKey
+                    },
                     id: `pie_${idx}`,
                 };
                 const seriesOption = merge(dynamicPieSeriesOptions, overrides);
@@ -1400,9 +1319,8 @@ class PieBuilder {
         this.result.series = series;
     }
     addTooltip(data, overrides) {
-        const flatData = flattenEChartData(data);
         merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
+            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
@@ -1526,39 +1444,45 @@ class FunnelBuilder {
         merge(this.result, common);
     }
     addSeries(data, overrides) {
-        const flatData = flattenEChartData(data);
-        if (!flatData || !flatData.series.length)
+        if (!data || !data.dimensions || !data.source || data.source.length === 0)
             return;
-        const series = flatData.series.map((s, seriesIndex) => {
-            const funnelData = mapToChartItems(flatData.categories, s);
-            let left = '10%';
-            let width = '80%';
-            const seriesValues = s.data.filter(val => typeof val === 'number');
-            const minVal = seriesValues.length > 0 ? Math.min(...seriesValues) : 0;
-            const maxVal = seriesValues.length > 0 ? Math.max(...seriesValues) : 100;
-            const dynamicFunnelSeriesOptions = {
-                name: s.name,
-                type: 'funnel',
-                left: left,
-                width: width,
-                min: minVal,
-                max: maxVal,
-                data: funnelData,
-                id: `funnel_${seriesIndex}`
-            };
-            const seriesOption = merge({}, overrides, dynamicFunnelSeriesOptions);
-            // Inject color resolver if provided
-            if (this.colorResolver && seriesOption.itemStyle) {
-                seriesOption.itemStyle.color = this.colorResolver;
-            }
-            return seriesOption;
-        });
-        this.result.series = series.shift();
+        this.result.dataset = {
+            dimensions: data.dimensions,
+            source: data.source
+        };
+        const measureDims = data.dimensions.filter(d => d.name !== 'category');
+        if (measureDims.length === 0)
+            return;
+        const dim = measureDims[0];
+        const dimKey = dim.name;
+        const friendlyName = dim.displayName || dim.name;
+        // Obtener los valores para min/max
+        const seriesValues = data.source.map(row => Number(row[dimKey] ?? 0));
+        const minVal = seriesValues.length > 0 ? Math.min(...seriesValues) : 0;
+        const maxVal = seriesValues.length > 0 ? Math.max(...seriesValues) : 100;
+        const dynamicFunnelSeriesOptions = {
+            name: friendlyName,
+            type: 'funnel',
+            left: '10%',
+            width: '80%',
+            min: minVal,
+            max: maxVal,
+            encode: {
+                itemName: 'category',
+                value: dimKey
+            },
+            id: `funnel_0`
+        };
+        const seriesOption = merge({}, overrides, dynamicFunnelSeriesOptions);
+        // Inject color resolver if provided
+        if (this.colorResolver && seriesOption.itemStyle) {
+            seriesOption.itemStyle.color = this.colorResolver;
+        }
+        this.result.series = seriesOption;
     }
     addTooltip(data, overrides) {
-        const flatData = flattenEChartData(data);
         merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
+            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
@@ -1607,7 +1531,7 @@ class EchartsFunnelComponent extends BaseEchartsComponent {
         type: 'funnel',
         left: '10%',
         width: '80%',
-        minSize: '0.4%',
+        minSize: '0.01%',
         maxSize: '100%',
         sort: 'descending',
         gap: 2,
@@ -1702,18 +1626,43 @@ class EChartBuilder {
      * @param overrides
      * @returns
      */
-    addSeries(data, overrides) {
-        const flatData = flattenEChartData(data);
-        if (!flatData || !flatData.series.length)
+    addSeries(data, overrides, opts) {
+        if (!data || !data.dimensions || !data.source || data.source.length === 0)
             return;
-        const series = flatData.series.map((s) => {
+        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: s.name,
-                data: s.data,
+                name: friendlyName,
+                encode,
                 label: {
                     formatter: (params) => {
-                        const key = s.originalKey || getCategoryKey(flatData.categories, params.dataIndex);
-                        return this.formatCellValue(params.value, key);
+                        const row = params.value;
+                        const rawValue = (row && typeof row === 'object') ? row[dimKey] : params.value;
+                        return this.formatCellValue(Number(rawValue ?? 0), dimKey);
                     }
                 }
             };
@@ -1733,9 +1682,8 @@ class EChartBuilder {
      */
     addTooltip(data, overrides) {
         // inyecto formateador a overrides de tooltip 
-        const flatData = flattenEChartData(data);
         merge$1(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
+            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
@@ -1852,10 +1800,9 @@ class EChartBuilder {
     }
     // Utils
     getCategoryAxisOptions(data, overrides) {
-        const flatCategories = flattenCategoriesToFirstLevel(data.categories);
+        // No explicit data needed on category axis when using ECharts dataset
         const categoryAxisOptionsOverrides = {
-            ...overrides.categoryAxis[0],
-            data: resolveCategoryNames(flatCategories),
+            ...overrides.categoryAxis[0]
         };
         const categoryAxisOptions = getCategoryAxisOptions(categoryAxisOptionsOverrides);
         return categoryAxisOptions;
@@ -1960,11 +1907,11 @@ class EChartsHBarComponent extends EchartsBarComponent {
         this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarComponent, isStandalone: true, selector: "vs-echarts-hbar", 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)\"\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: EChartsHBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
+            args: [{ selector: 'vs-echarts-hbar', 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)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
@@ -1990,11 +1937,11 @@ class EChartsBarStackedComponent extends EchartsBarComponent {
     builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedComponent, isStandalone: true, selector: "vs-echarts-stacked-bar", 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)\"\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: EChartsBarStackedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
+            args: [{ selector: 'vs-echarts-stacked-bar', 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)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
@@ -2032,11 +1979,11 @@ class EChartsHBarStackedComponent extends EchartsBarComponent {
         this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarStackedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarStackedComponent, isStandalone: true, selector: "vs-echarts-hbar-stacked", 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)\"\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: EChartsHBarStackedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
+            args: [{ selector: 'vs-echarts-hbar-stacked', 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)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
@@ -2071,11 +2018,11 @@ class EChartsBarStackedRadialComponent extends EchartsBarComponent {
         this.director.makeBarRadial(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedRadialComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedRadialComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedRadialComponent, isStandalone: true, selector: "vs-echarts-bar-stacked-radial", 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)\"\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: EChartsBarStackedRadialComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
+            args: [{ selector: 'vs-echarts-bar-stacked-radial', 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)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
@@ -2168,11 +2115,11 @@ class EChartsAreaComponent extends EchartsLineComponent {
     builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaComponent, isStandalone: true, selector: "vs-echarts-area", 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)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
+            args: [{ selector: 'vs-echarts-area', 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)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
@@ -2193,11 +2140,11 @@ class EChartsAreaStackComponent extends EchartsLineComponent {
     builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaStackComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaStackComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaStackComponent, isStandalone: true, selector: "vs-echarts-area-stack", 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)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaStackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
+            args: [{ selector: 'vs-echarts-area-stack', 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)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
@@ -2225,6 +2172,9 @@ class EchartsScatterComponent extends BaseEchartsComponent {
         },
         selectedMode: 'single',
         select: {
+            label: {
+                show: true,
+            },
             itemStyle: {
                 borderWidth: 2,
                 borderColor: EChartsTokens.sBorderColor,
@@ -2281,10 +2231,10 @@ class SunburstBuilder {
         this.result = {};
     }
     addSeries(data, overrides) {
-        if (!data || !data.series || data.series.length === 0) {
+        if (!data || !data.source || data.source.length === 0) {
             return;
         }
-        const sunburstData = mapHierarchicalData(data.categories, data.series);
+        const sunburstData = mapHierarchicalData(data.source, data.dimensions);
         const depth = getTreeDepth(sunburstData);
         const levels = [];
         for (let i = 0; i <= depth; i++) {
@@ -2362,18 +2312,18 @@ class SunburstBuilder {
 class EChartsSunburstComponent extends BaseEchartsComponent {
     baseSeriesOptions = {
         type: 'sunburst',
-        radius: ['15%', '85%'],
+        radius: [0, '85%'],
         sort: undefined,
         emphasis: {
             focus: 'ancestor'
         },
-        itemStyle: {
-            borderWidth: 1.5,
-            borderColor: '#fff'
-        },
         levels: [
             {},
             {
+                r0: '15%',
+                itemStyle: {
+                    borderWidth: 2
+                },
                 label: {
                     rotate: 'tangential'
                 }
@@ -2397,14 +2347,14 @@ class EChartsSunburstComponent extends BaseEchartsComponent {
         this.director.makeSunburst(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsSunburstComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsSunburstComponent, isStandalone: true, selector: "vs-echarts-sunburst", 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)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsSunburstComponent, isStandalone: true, selector: "vs-echarts-sunburst", 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></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsSunburstComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-sunburst', 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)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], 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"] }]
         }] });
 
 // Interfaces de Inputs de Base EChart Component //