@visionaris-bruno/vs-echarts 7.1.0 → 7.1.3

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

@@ -242,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.
    *
@@ -258,7 +267,7 @@ class BaseEchartsComponent {
      */
     onChartInit(instance) {
         this.chartInstance = instance;
-        this.updateChartOptions();
+        this.prepareOptions();
     }
     onChartClick(event) {
         if (event.componentType === 'series') {
@@ -712,24 +721,26 @@ function mapToChartItems(categories, seriesNode) {
 /**
  * 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 || 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 ? `${params.marker}${params.seriesName}` : '';
-            return `<div style="text-align: center;"><b>${params.name}</b><br/>${seriesHeader}<br/> <b>${valFormatted}</b> (${params.percent}%)</div>`;
+            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 '';
@@ -752,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();
@@ -777,14 +788,41 @@ function getCommons(opts) {
     return common;
 }
 /**
- * Maps hierarchical category nodes and a single series data array into a nested structure
+ * 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, seriesData) {
-    if (!categories || !seriesData) {
+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 = {
@@ -794,11 +832,9 @@ function mapHierarchicalData(categories, seriesData) {
                 node.children = traverse(cat.children);
             }
             else {
-                // Leaf node: extract and assign value sequentially from seriesData
-                const dataVal = seriesData[leafIndex];
-                if (dataVal !== undefined && dataVal !== null) {
-                    const value = typeof dataVal === 'object' && 'value' in dataVal ? dataVal.value : dataVal;
-                    node.value = getCellValue(value);
+                // Leaf category node: append the series tree as children
+                if (series && series.length > 0) {
+                    node.children = mapSeriesTree(series, leafIndex);
                 }
                 else {
                     node.value = 0;
@@ -810,6 +846,24 @@ function mapHierarchicalData(categories, seriesData) {
     }
     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
@@ -1152,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) {
@@ -1222,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"] }] });
 }
@@ -1439,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"] }] });
@@ -1619,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"] }] });
@@ -1890,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"] }] });
@@ -1934,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);
     }
@@ -2001,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);
     }
@@ -2039,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 });
@@ -2103,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: [
@@ -2229,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"] }] });
@@ -2274,11 +2284,20 @@ class SunburstBuilder {
         if (!data || !data.series || data.series.length === 0) {
             return;
         }
-        const firstSeries = data.series[0];
-        const sunburstData = mapHierarchicalData(data.categories, firstSeries.data);
+        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: firstSeries.name,
+            name: '',
             data: sunburstData,
+            levels: levels
         };
         const serie = merge$1({}, dynamiSerieOptions, overrides);
         if (this.colorResolver) {
@@ -2343,18 +2362,18 @@ class SunburstBuilder {
 class EChartsSunburstComponent extends BaseEchartsComponent {
     baseSeriesOptions = {
         type: 'sunburst',
-        radius: [0, '85%'],
+        radius: ['15%', '85%'],
         sort: undefined,
         emphasis: {
             focus: 'ancestor'
         },
+        itemStyle: {
+            borderWidth: 1.5,
+            borderColor: '#fff'
+        },
         levels: [
             {},
             {
-                r0: '15%',
-                itemStyle: {
-                    borderWidth: 2
-                },
                 label: {
                     rotate: 'tangential'
                 }
@@ -2377,15 +2396,6 @@ class EChartsSunburstComponent extends BaseEchartsComponent {
         };
         this.director.makeSunburst(this.data, this.optionsOverrides, makeOpts);
     }
-    updateChartOptions() {
-        if (!this.chartInstance)
-            return;
-        if (!this.data)
-            return;
-        this.make();
-        const baseOptions = this.builder.getResult();
-        this.triggerUpdate(baseOptions);
-    }
     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"] }] });
 }