@visionaris-bruno/vs-echarts 7.2.0 → 8.2.3

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 { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart, SankeyChart } from 'echarts/charts';
+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';
@@ -66,6 +66,7 @@ function initializeEcharts() {
         ScatterChart,
         FunnelChart,
         SunburstChart,
+        SankeyChart,
         TitleComponent,
         TooltipComponent,
         GridComponent,
@@ -75,6 +76,7 @@ function initializeEcharts() {
         GraphicComponent,
         ToolboxComponent,
         PolarComponent,
+        DatasetComponent,
     ]);
     initialized = true;
 }
@@ -161,6 +163,9 @@ function defaultOptionsOverrides() {
         sunburst: {
             series: {},
         },
+        sankey: {
+            series: {}
+        },
     };
 }
 
@@ -175,7 +180,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 +411,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 +434,7 @@ function getCategoryAxisOptions(overrides) {
             }
         }
     };
-    return merge({}, defaults, { ...overrides, data: categories });
+    return merge({}, defaults, overrides);
 }
 function getValueAxisOptions(overrides) {
     const defaults = {
@@ -598,12 +603,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,126 +617,56 @@ 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 = '', percentVal = '';
         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/ >` : '';
-        const title = params.name;
-        const subtitle = (params.percent !== undefined && totalSeries <= 1) ? '' : serieName;
-        const percentText = params.percent !== undefined ? ` (${params.percent}%)` : '';
-        return `<div style="text-align: center;"><b>${title}</b><br/>${subtitle}<b>${valFormatted}</b>${percentText}</div>`;
+        title = params.name || (row && typeof row === 'object' ? row.category : '');
+        subtitle = serieName;
+        valFormatted = formatCellValue(Number(rawValue ?? 0), dimensionName);
+        // pie/funnel series
+        if (params.percent != undefined) {
+            percentVal = ` (${params.percent}%)`;
+            if (data.dimensions.length <= 2) {
+                subtitle = '';
+            }
+        }
+        // sankey
+        if (params.dataType != undefined) {
+            const dataType = params.dataType;
+            subtitle = `${params.marker}<br/>`;
+            if (dataType === 'edge') {
+                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);
+            }
+            else if (dataType === 'node') {
+                title = params.name.split('___')[0];
+                valFormatted = formatCellValue(Number(params.value ?? 0), dimensionName);
+            }
+        }
+        // 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>${title}</b><br/>${subtitle}<b>${valFormatted}</b>${percentVal}</div>`;
     };
 }
 /**
@@ -746,13 +680,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;
@@ -786,63 +724,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.
@@ -889,10 +807,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);
@@ -901,12 +823,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,
@@ -922,7 +846,10 @@ class RingBuilder {
                         borderWidth: borderWidth,
                     },
                 },
-                data: pieData,
+                encode: {
+                    itemName: 'category',
+                    value: dimKey
+                },
                 id: `ring_${ringIndex}`,
             };
             const seriesOption = merge(dynamicRingSeriesOptions, overrides);
@@ -958,9 +885,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;
@@ -1022,7 +948,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 = { 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);
@@ -1044,7 +971,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 = { axisTypes, coordinateSystem: 'polar' };
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
         this.builder.addPolar();
         this.builder.addAngleAxis(data, overrides['axis']);
         this.builder.addRadiusAxis(data, overrides['axis']);
@@ -1067,7 +995,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 = { 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);
@@ -1087,7 +1016,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 = { 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);
@@ -1104,7 +1034,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();
@@ -1120,7 +1051,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();
     }
@@ -1135,7 +1067,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();
     }
@@ -1150,10 +1083,26 @@ 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();
     }
+    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);
+    }
 }
 
 /**
@@ -1316,18 +1265,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: {
@@ -1352,8 +1309,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;
@@ -1374,7 +1332,7 @@ class PieBuilder {
                     labelLineShow = true;
                 }
                 const dynamicPieSeriesOptions = {
-                    name: s.name,
+                    name: friendlyName,
                     type: 'pie',
                     radius: radius,
                     label: {
@@ -1384,7 +1342,10 @@ class PieBuilder {
                     labelLine: {
                         show: labelLineShow
                     },
-                    data: pieData,
+                    encode: {
+                        itemName: 'category',
+                        value: dimKey
+                    },
                     id: `pie_${idx}`,
                 };
                 const seriesOption = merge(dynamicPieSeriesOptions, overrides);
@@ -1398,9 +1359,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;
@@ -1524,39 +1484,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;
@@ -1700,18 +1666,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);
                     }
                 }
             };
@@ -1731,9 +1722,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;
@@ -1850,10 +1840,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;
@@ -2282,10 +2271,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++) {
@@ -2408,6 +2397,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
+/**
+ * SankeyBuilder
+ *
+ * Builder concreto para el gráfico Sankey (diagrama de flujos de izquierda a derecha).
+ */
+class SankeyBuilder {
+    baseProduct;
+    valueFormatter = (value) => value.toLocaleString();
+    palette = [];
+    colorResolver;
+    result = {};
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
+    }
+    reset() {
+        this.result = {};
+    }
+    addSeries(data, overrides) {
+        if (!data || !data.source || data.source.length === 0) {
+            return;
+        }
+        // Identificar medidas (todas las dimensiones excepto 'category')
+        const measureKeys = data.dimensions
+            .filter((d) => d.name !== "category")
+            .map((d) => d.name);
+        // Función auxiliar para sumarizar valores de medidas en caso de haber más de una
+        const getNodeValue = (node) => {
+            return measureKeys.reduce((sum, key) => sum + (Number(node[key]) || 0), 0);
+        };
+        const nodesMap = new Map();
+        const linksMap = new Map();
+        // Función recursiva para aplanar datos jerárquicos a nodos y enlaces
+        const traverse = (nodeList, level, parentId) => {
+            for (const node of nodeList) {
+                const category = node.category;
+                const currentId = `${category}___${level}`;
+                const value = getNodeValue(node);
+                nodesMap.set(currentId, (nodesMap.get(currentId) || 0) + value);
+                if (parentId) {
+                    const linkKey = `${parentId}--->${currentId}`;
+                    if (linksMap.has(linkKey)) {
+                        linksMap.get(linkKey).value += value;
+                    }
+                    else {
+                        linksMap.set(linkKey, {
+                            source: parentId,
+                            target: currentId,
+                            value: value,
+                        });
+                    }
+                }
+                if (node.children && node.children.length > 0) {
+                    traverse(node.children, level + 1, currentId);
+                }
+            }
+        };
+        // Comenzar el recorrido en el nivel 0
+        traverse(data.source, 0);
+        // al menos un nivel de links para dibujar.
+        if (linksMap.size === 0)
+            return;
+        // Mapear nodos acumulados a la estructura requerida por ECharts (name y opcionalmente color, sin value redundante)
+        const nodes = Array.from(nodesMap.keys()).map((currentId) => {
+            const category = currentId.split("___")[0];
+            const nodeItem = {
+                name: currentId,
+            };
+            if (this.colorResolver) {
+                const color = this.colorResolver({ name: category, data: nodeItem });
+                if (color) {
+                    nodeItem.itemStyle = { color };
+                }
+            }
+            return nodeItem;
+        });
+        const dynamicSerieOptions = {
+            type: "sankey",
+            orient: "horizontal", // De izquierda a derecha
+            draggable: true,
+            emphasis: {
+                focus: "adjacency",
+            },
+            lineStyle: {
+                color: "source",
+                opacity: 0.25,
+                curveness: 0.5,
+            },
+            label: {
+                show: true,
+                position: "right",
+                fontFamily: "'Inter', 'Roboto', 'Open Sans', sans-serif",
+                fontSize: 10,
+                formatter: (params) => {
+                    // Remover el sufijo de nivel de la etiqueta visual
+                    return params.name.split("___")[0];
+                },
+            },
+            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() { }
+    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',
+        orient: 'horizontal',
+        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
+        }
+    };
+    baseProduct = {
+        chartKey: 'sankey',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        },
+    };
+    builder = new SankeyBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    make() {
+        const makeOpts = {
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+            valueFormatter: this.valueFormatter,
+        };
+        this.director.makeSankey(this.data, this.optionsOverrides, makeOpts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsSankeyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsSankeyComponent, isStandalone: true, selector: "vs-echarts-sankey", 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></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: EchartsSankeyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-sankey', 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></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+        }] });
+
 // Interfaces de Inputs de Base EChart Component //
 
 ;
@@ -2422,5 +2607,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
+export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsSankeyComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
 //# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map