@visionaris-bruno/vs-echarts 6.4.1 → 6.5.1

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

@@ -31,6 +31,25 @@ const EChartsTokens = {
 function getDefaultPalette() {
     return [...EChartsTokens.defaultPalette];
 }
+/** corrige inside data index cuando se filtran leyendas en graficos tipo 'pie'.
+ *
+ * En pie, cuando se filtran leyendas, no coinciden el 'inside data index'
+ * con el 'selected data index'. El correcto deberia ser el 'inside data intex'
+ * pero por algun motivo esto es distinto en este tipo de graficos.
+ *
+ * apache echarts version: 5.6.0
+*/
+const fixPieDataIndexInside = (e) => {
+    /** selected serie index */
+    const ssi = e.fromActionPayload.seriesIndex;
+    const selected = e.selected.find(sel => sel.seriesIndex == ssi);
+    if (e.fromAction == 'unselect' || !selected) {
+        return e;
+    }
+    const fixedDataIndex = selected.dataIndex[0]; // [0] por seleccion single;
+    e.fromActionPayload.dataIndexInside = fixedDataIndex; // aplico corrección de index inside.
+    return e;
+};
 
 /**
  * Inicialización centralizada de ECharts para evitar duplicación y efectos secundarios
@@ -129,6 +148,9 @@ function defaultOptionsOverrides() {
         ring: {
             series: {}
         },
+        pie: {
+            series: {}
+        },
         scatter: {
             series: {}
         },
@@ -252,12 +274,18 @@ class BaseEchartsComponent {
         }
     }
     /**
-     * Seleccion y des seleccion de item.
+     * Maneja el cambio de selección en el gráfico (selección y deselección de elementos).
+     * Requiere que las series del gráfico tengan configurado `selectMode`.
      *
-     * Para hacer uso de esta funcion las opciones de series
-     * del grafico deben tener seteado 'selectMode'.
+     * @param event Datos del evento de cambio de selección de ECharts.
+     * @param opts Opciones de configuración adicionales.
+     * @param opts.fixPieDataIndexInside Si es true, aplica la corrección de índice para gráficos tipo pie.
      */
-    onChartSelectChanged(event) {
+    onChartSelectChanged(event, opts) {
+        const shouldFixPie = opts?.fixPieDataIndexInside ?? false;
+        if (shouldFixPie) {
+            fixPieDataIndexInside(event);
+        }
         const { type = '', fromActionPayload, fromAction = '', isFromClick, selected, } = event;
         if (!isFromClick)
             return; // avoid internal ECharts selection loop.
@@ -558,10 +586,15 @@ function applyLineSelectionStyle(series, selectedCategoryIndex, selectedSeriesIn
  * Formatter generator for 'item' trigger strategy in tooltips.
  */
 function getItemTooltipFormatter(data, formatCellValue) {
+    const totalSeries = data.series.length;
     return (params) => {
         const seriesObj = data.series[params.seriesIndex];
-        const key = seriesObj?.originalKey || (data.categoryKeys ? data.categoryKeys[params.dataIndex] : String(params.dataIndex));
+        const key = params.data?.originalMeassureKey || seriesObj?.originalKey || (data.categoryKeys ? data.categoryKeys[params.dataIndex] : String(params.dataIndex));
         const valFormatted = formatCellValue(params.value, key);
+        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}%)`;
+        }
         return `<div style="text-align: center;"><b>${params.name}</b><br/>${params.marker} ${params.seriesName}<br/><b>${valFormatted}</b></div>`;
     };
 }
@@ -714,14 +747,8 @@ class RingBuilder {
             }];
     }
     addTooltip(data, overrides) {
-        const totalRings = data.series.length;
         merge(overrides, {
-            formatter: (params) => {
-                const key = params.data.originalMeassureKey || '';
-                const valFormatted = this.formatCellValue(params.value, key);
-                const seriesHeader = totalRings > 1 ? `<b>${params.seriesName}</b><br/>` : '';
-                return `${seriesHeader}${params.name}<br/>${params.marker} <b>${valFormatted}</b> (${params.percent}%)`;
-            },
+            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
         });
         const tooltip = getTooltipOptions(overrides);
         this.result.tooltip = tooltip;
@@ -870,6 +897,21 @@ class VSECDirector {
         this.builder.addTooltip(data, overrides.tooltip);
         this.builder.addLegend();
     }
+    makePie(data, overrides, opts = {}) {
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
+        this.builder.reset();
+        // El orden importa, primero callbacks y despues componentes.
+        this.builder.setValueFormatter(valueFormatter);
+        this.builder.setPalette(palette);
+        this.builder.setColorResolver(colorResolver);
+        const product = this.builder.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        this.builder.addSeries(data, seriesOverrides);
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addLegend();
+    }
     makeFunnel(data, overrides, opts = {}) {
         const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
         this.builder.reset();
@@ -990,28 +1032,6 @@ class EchartsRingComponent extends BaseEchartsComponent {
             this.setGraphicText('');
         }
     }
-    onChartSelectChangedParcheado(e) {
-        /** corrige inside data index cuando se filtran leyendas en ring.
-         *
-         * En ring, cuando se filtran leyendas, no coinciden el 'inside data index'
-         * con el 'selected data index'. El correcto deberia ser el 'inside data intex'
-         * pero en ring por algun motivo esto es distinto.
-         *
-         * apache echarts version: 5.6.0
-        */
-        const patchedEvent = (e) => {
-            /** selected serie index */
-            const ssi = e.fromActionPayload.seriesIndex;
-            const selected = e.selected.find(sel => sel.seriesIndex == ssi);
-            if (e.fromAction == 'unselect' || !selected) {
-                return e;
-            }
-            const fixedDataIndex = selected.dataIndex[0]; // [0] por seleccion single;
-            e.fromActionPayload.dataIndexInside = fixedDataIndex; // aplico corrección de index inside.
-            return e;
-        };
-        super.onChartSelectChanged(patchedEvent(e)); // continuo flujo convencional
-    }
     /**
      * Actualiza el texto del Graphic central y persiste la selección en el modelo de opciones.
      */
@@ -1044,14 +1064,240 @@ class EchartsRingComponent extends BaseEchartsComponent {
         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)=\"onChartSelectChangedParcheado($event)\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-ring', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], 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)=\"onChartSelectChangedParcheado($event)\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event, { fixPieDataIndexInside: true })\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * PieBuilder
+ *
+ * Builder concreto para el gráfico de Pie (torta concéntrica).
+ *
+ */
+class PieBuilder {
+    baseProduct;
+    valueFormatter = (value) => value.toLocaleString();
+    palette = [];
+    colorResolver;
+    result = {};
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
+    }
+    reset() {
+        this.result = {};
+    }
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        const common = getCommons(opts);
+        merge(this.result, common);
+    }
+    addSeries(data, overrides) {
+        if (!data || !data.series.length)
+            return;
+        const totalSeries = data.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 dynamicPieSeriesOptions = {
+                name: s.name,
+                type: 'pie',
+                data: pieData,
+                id: `pie_0`,
+                radius: [0, '50%'],
+                label: {
+                    show: true,
+                    position: 'outside'
+                },
+                labelLine: {
+                    show: true,
+                },
+            };
+            const seriesOption = merge(dynamicPieSeriesOptions, overrides);
+            // Inyectar el resolver de color si existe
+            if (this.colorResolver && seriesOption.itemStyle) {
+                seriesOption.itemStyle.color = this.colorResolver;
+            }
+            series.push(seriesOption);
+        }
+        else {
+            const centerPieRadius = Math.max(20, 40 - totalSeries * 3);
+            const maxOuterRadius = Math.min(60, 75 + (totalSeries - 2) * 3);
+            const margin = Math.max(1, 4 - totalSeries * 0.2);
+            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] : '')
+                }));
+                let radius;
+                let labelPosition;
+                let labelLineShow;
+                let labelShow = true;
+                if (idx === 0) {
+                    // Primera serie: Torta rellena desde el centro
+                    radius = [0, `${centerPieRadius}%`];
+                    labelPosition = 'inner';
+                    labelLineShow = false;
+                    labelShow = false;
+                }
+                else {
+                    // Series subsecuentes: Anillos alrededor
+                    const inner = (centerPieRadius + margin) + (idx - 1) * (thickness + margin);
+                    const outer = inner + thickness;
+                    radius = [`${inner}%`, `${outer}%`];
+                    labelPosition = 'outside';
+                    labelLineShow = true;
+                }
+                const dynamicPieSeriesOptions = {
+                    name: s.name,
+                    type: 'pie',
+                    radius: radius,
+                    label: {
+                        show: labelShow, // Por defecto en los anillos no mostramos labels para evitar overlaps
+                        position: labelPosition,
+                    },
+                    labelLine: {
+                        show: labelLineShow
+                    },
+                    data: pieData,
+                    id: `pie_${idx}`,
+                };
+                const seriesOption = merge(dynamicPieSeriesOptions, overrides);
+                // Inyectar el resolver de color si existe
+                if (this.colorResolver && seriesOption.itemStyle) {
+                    seriesOption.itemStyle.color = this.colorResolver;
+                }
+                return seriesOption;
+            });
+        }
+        this.result.series = series;
+    }
+    addTooltip(data, overrides) {
+        merge(overrides, {
+            formatter: getTooltipFormatter(overrides.trigger, data, this.formatCellValue.bind(this)),
+        });
+        const tooltip = getTooltipOptions(overrides);
+        this.result.tooltip = tooltip;
+    }
+    addLegend() {
+        this.result.legend = getLegendOptions();
+    }
+    // No-ops for pie charts
+    addPolar() { }
+    addXAxis(data, overrides, type) { }
+    addYAxis(data, overrides, type) { }
+    addRadiusAxis(data, overrides) { }
+    addAngleAxis(data, overrides) { }
+    addGraphic() { }
+    // Callback setters
+    setValueFormatter(formatter) {
+        if (formatter) {
+            this.valueFormatter = formatter;
+        }
+    }
+    setPalette(palette) {
+        if (palette) {
+            this.palette = palette;
+        }
+    }
+    setColorResolver(resolver) {
+        if (resolver) {
+            this.colorResolver = resolver;
+        }
+    }
+    getResult() {
+        return this.result;
+    }
+    formatCellValue(value, key) {
+        return this.valueFormatter(value, key);
+    }
+}
+
+/**
+ * EchartsPieComponent
+ *
+ * Especialista en visualización de tipo Pie (Torta y Anillos concéntricos).
+ * La primera serie se dibuja como un gráfico de torta tradicional (lleno) y
+ * las subsecuentes como anillos concéntricos alrededor.
+ */
+class EchartsPieComponent extends BaseEchartsComponent {
+    baseSeriesOptions = {
+        type: 'pie',
+        center: ['50%', '50%'],
+        avoidLabelOverlap: true,
+        minAngle: 3,
+        selectedMode: 'single',
+        selectedOffset: 4,
+        emphasis: {
+            scale: true,
+            scaleSize: 2,
+        },
+        select: {
+            itemStyle: {
+                borderColor: EChartsTokens.sBorderColor,
+                shadowColor: EChartsTokens.sShadowColor,
+                borderWidth: 1,
+                shadowBlur: 4,
+            },
+        },
+        animationType: 'scale',
+        animationEasing: 'elasticOut',
+    };
+    baseProduct = {
+        chartKey: 'pie',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        }
+    };
+    builder = new PieBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    constructor() {
+        super();
+    }
+    make(makeOpts) {
+        this.director.makePie(this.data, this.optionsOverrides, makeOpts);
+    }
+    updateChartOptions() {
+        if (!this.chartInstance)
+            return;
+        if (!this.data)
+            return;
+        // 1. Configuramos el builder
+        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: 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsPieComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-pie', standalone: true, imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], 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, { fixPieDataIndexInside: true })\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -1224,14 +1470,14 @@ class EchartsFunnelComponent extends BaseEchartsComponent {
         this.triggerUpdate(options);
     }
     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)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsFunnelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-funnel', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], 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"] }]
+                    ], 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, { fixPieDataIndexInside: true })\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -1855,5 +2101,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, EchartsRingComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
+export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
 //# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map