@visionaris-bruno/vs-echarts 6.5.2 → 7.1.3

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

@@ -1,6 +1,6 @@
 import { provideEchartsCore, NgxEchartsDirective } from 'ngx-echarts';
 import * as echarts from 'echarts/core';
-import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart } from 'echarts/charts';
+import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart } from 'echarts/charts';
 import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GraphicComponent, ToolboxComponent, PolarComponent } from 'echarts/components';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import * as i0 from '@angular/core';
@@ -65,6 +65,7 @@ function initializeEcharts() {
         LineChart,
         ScatterChart,
         FunnelChart,
+        SunburstChart,
         TitleComponent,
         TooltipComponent,
         GridComponent,
@@ -156,7 +157,10 @@ function defaultOptionsOverrides() {
         },
         funnel: {
             series: {}
-        }
+        },
+        sunburst: {
+            series: {},
+        },
     };
 }
 
@@ -238,9 +242,18 @@ class BaseEchartsComponent {
      */
     onInputChanges(changes) {
         if (changes['data'] || changes['optionsOverrides'] || changes['palette'] || changes['colorResolver'] || changes['valueFormatter']) {
-            this.updateChartOptions();
+            this.prepareOptions();
         }
     }
+    prepareOptions() {
+        if (!this.chartInstance)
+            return;
+        if (!this.data)
+            return;
+        this.make();
+        const baseOptions = this.builder.getResult();
+        this.triggerUpdate(baseOptions);
+    }
     /**
    * Gatilla actualización.
    *
@@ -254,7 +267,7 @@ class BaseEchartsComponent {
      */
     onChartInit(instance) {
         this.chartInstance = instance;
-        this.updateChartOptions();
+        this.prepareOptions();
     }
     onChartClick(event) {
         if (event.componentType === 'series') {
@@ -393,7 +406,7 @@ function getLegendOptions(overrides) {
     return merge({}, defaults, overrides);
 }
 function getCategoryAxisOptions(overrides) {
-    const categories = overrides?.data ?? [];
+    const categories = resolveCategoryNames(overrides?.data);
     const autoRotate = categories.length > 10 ? 45 : 0;
     const defaults = {
         type: 'category',
@@ -416,7 +429,7 @@ function getCategoryAxisOptions(overrides) {
             }
         }
     };
-    return merge({}, defaults, overrides);
+    return merge({}, defaults, { ...overrides, data: categories });
 }
 function getValueAxisOptions(overrides) {
     const defaults = {
@@ -582,26 +595,152 @@ function applyLineSelectionStyle(series, selectedCategoryIndex, selectedSeriesIn
         };
     });
 }
+/**
+ * Resolves the unique key of a category safely.
+ */
+function getCategoryKey(categories, index) {
+    if (!categories || !categories[index]) {
+        return String(index);
+    }
+    const node = categories[index];
+    return node.key || node.name || String(index);
+}
+/**
+ * Resolves the numeric value from a series data point.
+ */
+function getCellValue(val) {
+    if (val === undefined || val === null)
+        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) {
+function getItemTooltipFormatter(data, formatCellValue, opts) {
     const totalSeries = data.series.length;
     return (params) => {
+        const showSerieName = opts?.showSerieName ?? true;
         const seriesObj = data.series[params.seriesIndex];
-        const key = params.data?.originalMeassureKey || seriesObj?.originalKey || (data.categoryKeys ? data.categoryKeys[params.dataIndex] : String(params.dataIndex));
+        const key = params.data?.originalMeassureKey || seriesObj?.originalKey || getCategoryKey(data.categories, params.dataIndex);
         const valFormatted = formatCellValue(params.value, key);
+        const serieName = showSerieName ? `${params.marker} ${params.seriesName}<br/ >` : '';
+        //TODO: Unificar salida del tooltip
         if (params.percent !== undefined) {
-            const seriesHeader = totalSeries > 1 ? `<b>${params.seriesName}</b><br/>` : '';
-            return `${seriesHeader}${params.name}<br/>${params.marker} <b>${valFormatted}</b> (${params.percent}%)`;
+            const seriesHeader = totalSeries > 1 ? serieName : '';
+            return `<div style="text-align: center;"><b>${params.name}</b><br/>${seriesHeader} <b>${valFormatted}</b> (${params.percent}%)</div>`;
         }
-        return `<div style="text-align: center;"><b>${params.name}</b><br/>${params.marker} ${params.seriesName}<br/><b>${valFormatted}</b></div>`;
+        return `<div style="text-align: center;"><b>${params.name}</b><br/>${serieName}<b>${valFormatted}</b></div>`;
     };
 }
 /**
  * Formatter generator for 'axis' trigger strategy in tooltips.
  */
-function getAxisTooltipFormatter(data, formatCellValue) {
+function getAxisTooltipFormatter(data, formatCellValue, opts) {
     return (params) => {
         if (!params)
             return '';
@@ -614,7 +753,7 @@ function getAxisTooltipFormatter(data, formatCellValue) {
             const seriesObj = data.series[item.seriesIndex];
             if (!seriesObj)
                 continue;
-            const key = seriesObj.originalKey || (data.categoryKeys ? data.categoryKeys[item.dataIndex] : String(item.dataIndex));
+            const key = seriesObj.originalKey || getCategoryKey(data.categories, item.dataIndex);
             const valFormatted = formatCellValue(item.value, key);
             html += `${item.marker} ${item.seriesName}: <b>${valFormatted}</b><br/>`;
         }
@@ -624,10 +763,10 @@ function getAxisTooltipFormatter(data, formatCellValue) {
 /**
  * Unified tooltip formatter generator that selects the appropriate strategy based on the trigger.
  */
-function getTooltipFormatter(trigger, data, formatCellValue) {
+function getTooltipFormatter(trigger, data, formatCellValue, opts) {
     return trigger === 'axis'
-        ? getAxisTooltipFormatter(data, formatCellValue)
-        : getItemTooltipFormatter(data, formatCellValue);
+        ? getAxisTooltipFormatter(data, formatCellValue, opts)
+        : getItemTooltipFormatter(data, formatCellValue, opts);
 }
 function getCommons(opts) {
     const palette = opts?.palette ?? getDefaultPalette();
@@ -648,6 +787,83 @@ function getCommons(opts) {
     common.color = (palette && palette.length > 0) ? palette : getDefaultPalette();
     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.
+ */
+function mapHierarchicalData(categories, series) {
+    if (!categories) {
+        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;
+        });
+    }
+    function traverse(nodes) {
+        return nodes.map(cat => {
+            const node = {
+                name: cat.name,
+            };
+            if (cat.children && cat.children.length > 0) {
+                node.children = traverse(cat.children);
+            }
+            else {
+                // Leaf category node: append the series tree as children
+                if (series && series.length > 0) {
+                    node.children = mapSeriesTree(series, leafIndex);
+                }
+                else {
+                    node.value = 0;
+                }
+                leafIndex++;
+            }
+            return node;
+        });
+    }
+    return traverse(categories);
+}
+/**
+ * Calculates the maximum depth of a tree structure.
+ */
+function getTreeDepth(nodes) {
+    if (!nodes || nodes.length === 0) {
+        return 0;
+    }
+    let maxChildDepth = 0;
+    for (const node of nodes) {
+        if (node.children && node.children.length > 0) {
+            const d = getTreeDepth(node.children);
+            if (d > maxChildDepth) {
+                maxChildDepth = d;
+            }
+        }
+    }
+    return 1 + maxChildDepth;
+}
 
 /**
  * RingBuilder
@@ -675,9 +891,10 @@ class RingBuilder {
         merge(this.result, common);
     }
     addSeries(data, overrides) {
-        if (!data || !data.series.length)
+        const flatData = flattenEChartData(data);
+        if (!flatData || !flatData.series.length)
             return;
-        const totalRings = data.series.length; // Cada serie es un anillo
+        const totalRings = flatData.series.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);
@@ -686,14 +903,10 @@ 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 = data.series.map((s, ringIndex) => {
+        const series = flatData.series.map((s, ringIndex) => {
             const inner = minInnerRadius + (ringIndex * (thickness + margin));
             const outer = inner + thickness;
-            const pieData = data.categories.map((catName, catIndex) => ({
-                name: catName,
-                value: s.data[catIndex],
-                originalMeassureKey: s.originalKey || (data.categoryKeys ? data.categoryKeys[catIndex] : '')
-            }));
+            const pieData = mapToChartItems(flatData.categories, s);
             const dynamicRingSeriesOptions = {
                 name: s.name,
                 radius: [`${inner}%`, `${outer}%`],
@@ -747,8 +960,9 @@ class RingBuilder {
             }];
     }
     addTooltip(data, overrides) {
+        const flatData = flattenEChartData(data);
         merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
+            formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
@@ -927,6 +1141,21 @@ class VSECDirector {
         this.builder.addTooltip(data, overrides.tooltip);
         this.builder.addLegend();
     }
+    makeSunburst(data, overrides, opts = {}) {
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
+        this.builder.reset();
+        // El orden importa, primero callbacks y despues componentes.
+        this.builder.setValueFormatter(valueFormatter);
+        this.builder.setPalette(palette);
+        this.builder.setColorResolver(colorResolver);
+        const product = this.builder.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        this.builder.addSeries(data, seriesOverrides);
+        this.builder.addTooltip(data, overrides.tooltip);
+        // this.builder.addLegend();
+    }
 }
 
 /**
@@ -977,7 +1206,12 @@ class EchartsRingComponent extends BaseEchartsComponent {
     constructor() {
         super();
     }
-    make(makeOpts) {
+    make() {
+        const makeOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+        };
         this.director.makeRing(this.data, this.optionsOverrides, makeOpts);
     }
     onInputChanges(changes) {
@@ -1047,22 +1281,6 @@ class EchartsRingComponent extends BaseEchartsComponent {
             }
         });
     }
-    updateChartOptions() {
-        if (!this.chartInstance)
-            return;
-        if (!this.data)
-            return;
-        // 1. Configuramos el builder (Formateadores, Colores, etc se manejan en la base)
-        const makeOpts = {
-            valueFormatter: this.valueFormatter,
-            palette: this.palette,
-            colorResolver: this.colorResolver,
-        };
-        this.make(makeOpts);
-        // 2. Obtenemos las bases del chart usando el builder
-        const options = this.builder.getResult();
-        this.triggerUpdate(options);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsRingComponent, isStandalone: true, selector: "vs-echarts-ring", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
@@ -1100,17 +1318,14 @@ class PieBuilder {
         merge(this.result, common);
     }
     addSeries(data, overrides) {
-        if (!data || !data.series.length)
+        const flatData = flattenEChartData(data);
+        if (!flatData || !flatData.series.length)
             return;
-        const totalSeries = data.series.length;
+        const totalSeries = flatData.series.length;
         let series = [];
         if (totalSeries === 1) {
-            const s = data.series[0];
-            const pieData = data.categories.map((catName, catIndex) => ({
-                name: catName,
-                value: s.data[catIndex],
-                originalMeassureKey: s.originalKey || (data.categoryKeys ? data.categoryKeys[catIndex] : '')
-            }));
+            const s = flatData.series[0];
+            const pieData = mapToChartItems(flatData.categories, s);
             const dynamicPieSeriesOptions = {
                 name: s.name,
                 type: 'pie',
@@ -1139,12 +1354,8 @@ class PieBuilder {
             const numRings = totalSeries - 1;
             const availableSpan = maxOuterRadius - (centerPieRadius + margin) - (margin * (numRings - 1));
             const thickness = availableSpan / numRings;
-            series = data.series.map((s, idx) => {
-                const pieData = data.categories.map((catName, catIndex) => ({
-                    name: catName,
-                    value: s.data[catIndex],
-                    originalMeassureKey: s.originalKey || (data.categoryKeys ? data.categoryKeys[catIndex] : '')
-                }));
+            series = flatData.series.map((s, idx) => {
+                const pieData = mapToChartItems(flatData.categories, s);
                 let radius;
                 let labelPosition;
                 let labelLineShow;
@@ -1189,8 +1400,9 @@ class PieBuilder {
         this.result.series = series;
     }
     addTooltip(data, overrides) {
+        const flatData = flattenEChartData(data);
         merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
+            formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
@@ -1270,24 +1482,13 @@ class EchartsPieComponent extends BaseEchartsComponent {
     constructor() {
         super();
     }
-    make(makeOpts) {
-        this.director.makePie(this.data, this.optionsOverrides, makeOpts);
-    }
-    updateChartOptions() {
-        if (!this.chartInstance)
-            return;
-        if (!this.data)
-            return;
-        // 1. Configuramos el builder
+    make() {
         const makeOpts = {
             valueFormatter: this.valueFormatter,
             palette: this.palette,
             colorResolver: this.colorResolver,
         };
-        this.make(makeOpts);
-        // 2. Obtenemos las bases del chart usando el builder
-        const options = this.builder.getResult();
-        this.triggerUpdate(options);
+        this.director.makePie(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsPieComponent, isStandalone: true, selector: "vs-echarts-pie", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
@@ -1325,14 +1526,11 @@ class FunnelBuilder {
         merge(this.result, common);
     }
     addSeries(data, overrides) {
-        if (!data || !data.series.length)
+        const flatData = flattenEChartData(data);
+        if (!flatData || !flatData.series.length)
             return;
-        const series = data.series.map((s, seriesIndex) => {
-            const funnelData = data.categories.map((catName, catIndex) => ({
-                name: catName,
-                value: s.data[catIndex],
-                originalMeassureKey: s.originalKey || (data.categoryKeys ? data.categoryKeys[catIndex] : '')
-            }));
+        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');
@@ -1358,8 +1556,9 @@ class FunnelBuilder {
         this.result.series = series.shift();
     }
     addTooltip(data, overrides) {
+        const flatData = flattenEChartData(data);
         merge(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
+            formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
@@ -1452,22 +1651,13 @@ class EchartsFunnelComponent extends BaseEchartsComponent {
     constructor() {
         super();
     }
-    make(makeOpts) {
-        this.director.makeFunnel(this.data, this.optionsOverrides, makeOpts);
-    }
-    updateChartOptions() {
-        if (!this.chartInstance)
-            return;
-        if (!this.data)
-            return;
+    make() {
         const makeOpts = {
             valueFormatter: this.valueFormatter,
             palette: this.palette,
             colorResolver: this.colorResolver,
         };
-        this.make(makeOpts);
-        const options = this.builder.getResult();
-        this.triggerUpdate(options);
+        this.director.makeFunnel(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsFunnelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsFunnelComponent, isStandalone: true, selector: "vs-echarts-funnel", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
@@ -1513,15 +1703,16 @@ class EChartBuilder {
      * @returns
      */
     addSeries(data, overrides) {
-        if (!data || !data.series.length)
+        const flatData = flattenEChartData(data);
+        if (!flatData || !flatData.series.length)
             return;
-        const series = data.series.map((s) => {
+        const series = flatData.series.map((s) => {
             const dynamicOverrides = {
                 name: s.name,
                 data: s.data,
                 label: {
                     formatter: (params) => {
-                        const key = s.originalKey || (data.categoryKeys ? data.categoryKeys[params.dataIndex] : String(params.dataIndex));
+                        const key = s.originalKey || getCategoryKey(flatData.categories, params.dataIndex);
                         return this.formatCellValue(params.value, key);
                     }
                 }
@@ -1542,8 +1733,9 @@ class EChartBuilder {
      */
     addTooltip(data, overrides) {
         // inyecto formateador a overrides de tooltip 
+        const flatData = flattenEChartData(data);
         merge$1(overrides, {
-            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
+            formatter: getTooltipFormatter(overrides.trigger, flatData, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
@@ -1660,9 +1852,10 @@ class EChartBuilder {
     }
     // Utils
     getCategoryAxisOptions(data, overrides) {
+        const flatCategories = flattenCategoriesToFirstLevel(data.categories);
         const categoryAxisOptionsOverrides = {
             ...overrides.categoryAxis[0],
-            data: data.categories,
+            data: resolveCategoryNames(flatCategories),
         };
         const categoryAxisOptions = getCategoryAxisOptions(categoryAxisOptionsOverrides);
         return categoryAxisOptions;
@@ -1720,23 +1913,13 @@ class EchartsBarComponent extends BaseEchartsComponent {
     constructor() {
         super();
     }
-    // va a tener que estar en el base como "abstract".
-    make(makeOpts) {
-        this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
-    }
-    updateChartOptions() {
-        if (!this.chartInstance)
-            return;
-        if (!this.data)
-            return;
+    make() {
         const makeBarOpts = {
             valueFormatter: this.valueFormatter,
             palette: this.palette,
             colorResolver: this.colorResolver,
         };
-        this.make(makeBarOpts);
-        const baseOptions = this.builder.getResult();
-        this.triggerUpdate(baseOptions);
+        this.director.makeBar(this.data, this.optionsOverrides, makeBarOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" 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"] }] });
@@ -1764,10 +1947,15 @@ class EChartsHBarComponent extends EchartsBarComponent {
     };
     builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
-    make(makeOpts) {
-        makeOpts.axisTypes = {
-            x: 'value',
-            y: 'category',
+    make() {
+        const makeOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+            axisTypes: {
+                x: 'value',
+                y: 'category',
+            },
         };
         this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
     }
@@ -1831,10 +2019,15 @@ class EChartsHBarStackedComponent extends EchartsBarComponent {
     };
     builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
-    make(makeOpts) {
-        makeOpts.axisTypes = {
-            x: 'value',
-            y: 'category',
+    make() {
+        const makeOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+            axisTypes: {
+                x: 'value',
+                y: 'category',
+            },
         };
         this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
     }
@@ -1869,7 +2062,12 @@ class EChartsBarStackedRadialComponent extends EchartsBarComponent {
     };
     builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
-    make(makeOpts) {
+    make() {
+        const makeOpts = {
+            valueFormatter: this.valueFormatter,
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+        };
         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 });
@@ -1933,22 +2131,13 @@ class EchartsLineComponent extends BaseEchartsComponent {
     constructor() {
         super();
     }
-    make(makeOpts) {
-        this.director.makeLine(this.data, this.optionsOverrides, makeOpts);
-    }
-    updateChartOptions() {
-        if (!this.chartInstance)
-            return;
-        if (!this.data)
-            return;
-        const makeBarOpts = {
+    make() {
+        const makeOpts = {
             valueFormatter: this.valueFormatter,
             palette: this.palette,
             colorResolver: this.colorResolver,
         };
-        this.make(makeBarOpts);
-        const baseOptions = this.builder.getResult();
-        this.triggerUpdate(baseOptions);
+        this.director.makeLine(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsLineComponent, isStandalone: true, selector: "vs-echarts-line", providers: [
@@ -2059,22 +2248,13 @@ class EchartsScatterComponent extends BaseEchartsComponent {
     constructor() {
         super();
     }
-    make(makeOpts) {
-        this.director.makeScatter(this.data, this.optionsOverrides, makeOpts);
-    }
-    updateChartOptions() {
-        if (!this.chartInstance)
-            return;
-        if (!this.data)
-            return;
-        const makeScatterOpts = {
+    make() {
+        const makeOpts = {
             valueFormatter: this.valueFormatter,
             palette: this.palette,
             colorResolver: this.colorResolver,
         };
-        this.make(makeScatterOpts);
-        const baseOptions = this.builder.getResult();
-        this.triggerUpdate(baseOptions);
+        this.director.makeScatter(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsScatterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsScatterComponent, isStandalone: true, selector: "vs-echarts-scatter", 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"] }] });
@@ -2087,6 +2267,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
+class SunburstBuilder {
+    baseProduct;
+    valueFormatter = (value) => value.toLocaleString();
+    palette = [];
+    // TODO: Hay que implementar un valor por defecto.
+    colorResolver;
+    result = {};
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
+    }
+    reset() {
+        this.result = {};
+    }
+    addSeries(data, overrides) {
+        if (!data || !data.series || data.series.length === 0) {
+            return;
+        }
+        const sunburstData = mapHierarchicalData(data.categories, data.series);
+        const depth = getTreeDepth(sunburstData);
+        const levels = [];
+        for (let i = 0; i <= depth; i++) {
+            levels.push({
+                label: {
+                    show: false,
+                },
+            });
+        }
+        const dynamiSerieOptions = {
+            name: '',
+            data: sunburstData,
+            levels: levels
+        };
+        const serie = merge$1({}, dynamiSerieOptions, overrides);
+        if (this.colorResolver) {
+            if (!serie.itemStyle) {
+                serie.itemStyle = {};
+            }
+            serie.itemStyle.color = this.colorResolver;
+        }
+        this.result.series = serie;
+    }
+    addTooltip(data, overrides) {
+        merge$1(overrides, {
+            formatter: getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter),
+        });
+        const tooltip = getTooltipOptions(overrides);
+        this.result.tooltip = tooltip;
+    }
+    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;
+    }
+    ;
+    // Setters 
+    /**
+     * Permite inyectar un formateador de valores externo.
+     */
+    setValueFormatter(formatter) {
+        if (formatter) {
+            this.valueFormatter = formatter;
+        }
+    }
+    /**
+     * Permite inyectar una paleta de colores básica.
+     */
+    setPalette(palette) {
+        if (palette) {
+            this.palette = palette;
+        }
+    }
+    /**
+     * Permite inyectar un resolver de colores dinámico.
+     */
+    setColorResolver(resolver) {
+        if (resolver) {
+            this.colorResolver = resolver;
+        }
+    }
+}
+
+class EChartsSunburstComponent extends BaseEchartsComponent {
+    baseSeriesOptions = {
+        type: 'sunburst',
+        radius: ['15%', '85%'],
+        sort: undefined,
+        emphasis: {
+            focus: 'ancestor'
+        },
+        itemStyle: {
+            borderWidth: 1.5,
+            borderColor: '#fff'
+        },
+        levels: [
+            {},
+            {
+                label: {
+                    rotate: 'tangential'
+                }
+            },
+        ]
+    };
+    baseProduct = {
+        chartKey: 'sunburst',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        },
+    };
+    builder = new SunburstBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    make() {
+        const makeOpts = {
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+            valueFormatter: this.valueFormatter,
+        };
+        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"] }] });
+}
+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"] }]
+        }] });
+
 // Interfaces de Inputs de Base EChart Component //
 
 ;
@@ -2101,5 +2421,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, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
+export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
 //# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map