@visionaris-bruno/vs-echarts 8.1.0 → 8.3.0

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, SunburstChart } from 'echarts/charts';
+import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart, SankeyChart } from 'echarts/charts';
 import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GraphicComponent, ToolboxComponent, PolarComponent, DatasetComponent } from 'echarts/components';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import * as i0 from '@angular/core';
@@ -66,6 +66,7 @@ function initializeEcharts() {
         ScatterChart,
         FunnelChart,
         SunburstChart,
+        SankeyChart,
         TitleComponent,
         TooltipComponent,
         GridComponent,
@@ -162,6 +163,9 @@ function defaultOptionsOverrides() {
         sunburst: {
             series: {},
         },
+        sankey: {
+            series: {}
+        },
     };
 }
 
@@ -618,7 +622,7 @@ function getCellValue(val) {
  */
 function getItemTooltipFormatter(data, formatCellValue, opts) {
     return (params) => {
-        let title = '', subtitle = '', valFormatted = '', auxVal = '';
+        let title = '', subtitle = '', valFormatted = '', percentVal = '';
         const showSerieName = opts?.showSerieName ?? true;
         const row = params.value;
         const dimension = data.dimensions[params.seriesIndex + 1];
@@ -628,9 +632,30 @@ function getItemTooltipFormatter(data, formatCellValue, opts) {
         const rawValue = (row && typeof row === 'object') ? row[dimensionName] : params.value;
         const serieName = showSerieName ? `${params.marker} ${params.seriesName}<br/ >` : '';
         title = params.name || (row && typeof row === 'object' ? row.category : '');
-        subtitle = (params.percent !== undefined && data.dimensions.length <= 2) ? '' : serieName;
+        subtitle = serieName;
         valFormatted = formatCellValue(Number(rawValue ?? 0), dimensionName);
-        auxVal = params.percent !== undefined ? ` (${params.percent}%)` : '';
+        // pie/funnel series
+        if (params.percent != undefined) {
+            percentVal = ` (${params.percent}%)`;
+            if (data.dimensions.length <= 2) {
+                subtitle = '';
+            }
+        }
+        // sankey
+        if (params.dataType != undefined) {
+            const dataType = params.dataType;
+            subtitle = `${params.marker}<br/>`;
+            if (dataType === 'edge') {
+                const sourceName = params.data.source.split('___')[0];
+                const targetName = params.data.target.split('___')[0];
+                title = `${sourceName} &rarr; ${targetName}`;
+                valFormatted = formatCellValue(Number(params.value ?? 0), dimensionName);
+            }
+            else if (dataType === 'node') {
+                title = params.name.split('___')[0];
+                valFormatted = formatCellValue(Number(params.value ?? 0), dimensionName);
+            }
+        }
         // sunburst treemap
         if (params.treePathInfo) {
             const lastLevelIndex = params.treePathInfo.length - 1, parentNodeIndex = lastLevelIndex - 1;
@@ -641,7 +666,7 @@ function getItemTooltipFormatter(data, formatCellValue, opts) {
                 subtitle = `${params.marker} ${oldParentNode.name}<br/ >`;
             }
         }
-        return `<div style="text-align: center;"><b>${title}</b><br/>${subtitle}<b>${valFormatted}</b>${auxVal}</div>`;
+        return `<div style="text-align: center;"><b>${title}</b><br/>${subtitle}<b>${valFormatted}</b>${percentVal}</div>`;
     };
 }
 /**
@@ -1063,6 +1088,21 @@ class VSECDirector {
         this.builder.addTooltip(data, overrides.tooltip);
         // this.builder.addLegend();
     }
+    makeSankey(data, overrides, opts = {}) {
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, } = opts;
+        this.builder.reset();
+        // El orden importa, primero callbacks y despues componentes.
+        this.builder.setValueFormatter(valueFormatter);
+        this.builder.setPalette(palette);
+        this.builder.setColorResolver(colorResolver);
+        const product = this.builder.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const layoutOpts = {};
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        this.builder.addTooltip(data, overrides.tooltip);
+    }
 }
 
 /**
@@ -2357,6 +2397,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
+/**
+ * SankeyBuilder
+ *
+ * Builder concreto para el gráfico Sankey (diagrama de flujos de izquierda a derecha).
+ */
+class SankeyBuilder {
+    baseProduct;
+    valueFormatter = (value) => value.toLocaleString();
+    palette = [];
+    colorResolver;
+    result = {};
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
+    }
+    reset() {
+        this.result = {};
+    }
+    addSeries(data, overrides) {
+        if (!data || !data.source || data.source.length === 0) {
+            return;
+        }
+        // Identificar medidas (todas las dimensiones excepto 'category')
+        const measureKeys = data.dimensions
+            .filter((d) => d.name !== "category")
+            .map((d) => d.name);
+        // Función auxiliar para sumarizar valores de medidas en caso de haber más de una
+        const getNodeValue = (node) => {
+            return measureKeys.reduce((sum, key) => sum + (Number(node[key]) || 0), 0);
+        };
+        const nodesMap = new Map();
+        const linksMap = new Map();
+        // Función recursiva para aplanar datos jerárquicos a nodos y enlaces
+        const traverse = (nodeList, level, parentId) => {
+            for (const node of nodeList) {
+                const category = node.category;
+                const currentId = `${category}___${level}`;
+                const value = getNodeValue(node);
+                nodesMap.set(currentId, (nodesMap.get(currentId) || 0) + value);
+                if (parentId) {
+                    const linkKey = `${parentId}--->${currentId}`;
+                    if (linksMap.has(linkKey)) {
+                        linksMap.get(linkKey).value += value;
+                    }
+                    else {
+                        linksMap.set(linkKey, {
+                            source: parentId,
+                            target: currentId,
+                            value: value,
+                        });
+                    }
+                }
+                if (node.children && node.children.length > 0) {
+                    traverse(node.children, level + 1, currentId);
+                }
+            }
+        };
+        // Comenzar el recorrido en el nivel 0
+        traverse(data.source, 0);
+        // al menos un nivel de links para dibujar.
+        if (linksMap.size === 0)
+            return;
+        // Mapear nodos acumulados a la estructura requerida por ECharts (name y opcionalmente color, sin value redundante)
+        const nodes = Array.from(nodesMap.keys()).map((currentId) => {
+            const category = currentId.split("___")[0];
+            const nodeItem = {
+                name: currentId,
+            };
+            if (this.colorResolver) {
+                const color = this.colorResolver({ name: category, data: nodeItem });
+                if (color) {
+                    nodeItem.itemStyle = { color };
+                }
+            }
+            return nodeItem;
+        });
+        const dynamicSerieOptions = {
+            type: "sankey",
+            orient: "horizontal", // De izquierda a derecha
+            draggable: true,
+            emphasis: {
+                focus: "adjacency",
+            },
+            lineStyle: {
+                color: "source",
+                opacity: 0.25,
+                curveness: 0.5,
+            },
+            label: {
+                show: true,
+                position: "right",
+                fontFamily: "'Inter', 'Roboto', 'Open Sans', sans-serif",
+                fontSize: 10,
+                formatter: (params) => {
+                    // Remover el sufijo de nivel de la etiqueta visual
+                    return params.name.split("___")[0];
+                },
+            },
+            roam: true,
+            data: nodes,
+            links: Array.from(linksMap.values()),
+        };
+        const serie = merge$1({}, dynamicSerieOptions, overrides);
+        if (this.colorResolver && !serie.itemStyle) {
+            serie.itemStyle = {};
+        }
+        if (this.colorResolver && serie.itemStyle) {
+            serie.itemStyle.color = this.colorResolver;
+        }
+        this.result.series = serie;
+    }
+    addTooltip(data, overrides) {
+        merge$1(overrides, {
+            formatter: getTooltipFormatter(overrides.trigger || 'item', data, this.valueFormatter),
+        });
+        const tooltip = getTooltipOptions(overrides);
+        this.result.tooltip = tooltip;
+    }
+    addPolar() { }
+    addXAxis(data, overrides, type) { }
+    addYAxis(data, overrides, type) { }
+    addRadiusAxis(data, overrides) { }
+    addAngleAxis(data, overrides) { }
+    addLegend() { }
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        merge$1(this.result, getCommons(opts));
+    }
+    addGraphic() { }
+    getResult() {
+        return this.result;
+    }
+    setValueFormatter(formatter) {
+        if (formatter) {
+            this.valueFormatter = formatter;
+        }
+    }
+    setPalette(palette) {
+        if (palette) {
+            this.palette = palette;
+        }
+    }
+    setColorResolver(resolver) {
+        if (resolver) {
+            this.colorResolver = resolver;
+        }
+    }
+}
+
+class EchartsSankeyComponent extends BaseEchartsComponent {
+    baseSeriesOptions = {
+        type: 'sankey',
+        orient: 'horizontal',
+        draggable: true,
+        emphasis: {
+            focus: 'adjacency'
+        },
+        lineStyle: {
+            color: 'source',
+            opacity: 0.25,
+            curveness: 0.5
+        },
+        label: {
+            show: true,
+            position: 'right',
+            fontFamily: "'Inter', 'Roboto', 'Open Sans', sans-serif",
+            fontSize: 10
+        }
+    };
+    baseProduct = {
+        chartKey: 'sankey',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        },
+    };
+    builder = new SankeyBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    make() {
+        const makeOpts = {
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+            valueFormatter: this.valueFormatter,
+        };
+        this.director.makeSankey(this.data, this.optionsOverrides, makeOpts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsSankeyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsSankeyComponent, isStandalone: true, selector: "vs-echarts-sankey", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsSankeyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-sankey', standalone: true, imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+        }] });
+
 // Interfaces de Inputs de Base EChart Component //
 
 ;
@@ -2371,5 +2608,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
+export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsSankeyComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
 //# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map