@visionaris-bruno/vs-echarts 8.3.0 → 8.4.0

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

@@ -1,7 +1,7 @@
 import { provideEchartsCore, NgxEchartsDirective } from 'ngx-echarts';
 import * as echarts from 'echarts/core';
-import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart, SankeyChart } from 'echarts/charts';
-import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GraphicComponent, ToolboxComponent, PolarComponent, DatasetComponent } from 'echarts/components';
+import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart, SankeyChart, BoxplotChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, GraphicComponent, ToolboxComponent, PolarComponent, DatasetComponent, DataZoomComponent } from 'echarts/components';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, ViewChild, Directive, Component } from '@angular/core';
@@ -67,6 +67,7 @@ function initializeEcharts() {
         FunnelChart,
         SunburstChart,
         SankeyChart,
+        BoxplotChart,
         TitleComponent,
         TooltipComponent,
         GridComponent,
@@ -77,6 +78,7 @@ function initializeEcharts() {
         ToolboxComponent,
         PolarComponent,
         DatasetComponent,
+        DataZoomComponent,
     ]);
     initialized = true;
 }
@@ -166,6 +168,9 @@ function defaultOptionsOverrides() {
         sankey: {
             series: {}
         },
+        hBoxplot: {
+            series: {}
+        },
     };
 }
 
@@ -900,6 +905,8 @@ class RingBuilder {
     addYAxis(data, overrides, type) { }
     addRadiusAxis(data, overrides) { }
     addAngleAxis(data, overrides) { }
+    addDataZoom() { }
+    addDataset(data, opts) { }
     // Callback setters
     setValueFormatter(formatter) {
         if (formatter) {
@@ -924,6 +931,203 @@ class RingBuilder {
     }
 }
 
+class BoxPlotBuilder {
+    baseProduct;
+    valueFormatter = (value, key) => value.toLocaleString();
+    palette = [];
+    // TODO: Hay que implementar un valor por defecto.
+    colorResolver;
+    result = {};
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
+    }
+    reset() {
+        this.result = {};
+    }
+    addDataset(data, opts) {
+        const statisticKeys = {
+            min: 'Min',
+            q1: 'Q1',
+            median: 'Median',
+            q3: 'Q3',
+            max: 'Max',
+        };
+        /**
+         *
+         * @param arr
+         * @param statisticsKeys etiquetas personalizadas para los valores de estadistica.
+         * @returns
+         */
+        function calcularResumen5Numeros(arr, statisticsKeys) {
+            if (arr.length === 0)
+                return null;
+            // 1. Ordenar los números de menor a mayor
+            const ordenados = [...arr].sort((a, b) => a - b);
+            // Función auxiliar para encontrar la mediana/cuartil en una posición
+            const obtenerPercentil = (p) => {
+                const pos = (ordenados.length - 1) * p;
+                const base = Math.floor(pos);
+                const resto = pos - base;
+                if (ordenados[base + 1] !== undefined) {
+                    return ordenados[base] + resto * (ordenados[base + 1] - ordenados[base]);
+                }
+                else {
+                    return ordenados[base];
+                }
+            };
+            return {
+                [statisticsKeys.min]: ordenados[0],
+                [statisticsKeys.q1]: obtenerPercentil(0.25),
+                [statisticsKeys.median]: obtenerPercentil(0.50),
+                [statisticsKeys.q3]: obtenerPercentil(0.75),
+                [statisticsKeys.max]: ordenados[ordenados.length - 1],
+            };
+        }
+        ;
+        const resumen5NumerosXCat = data.source.map(s => {
+            // filtro category para excluirlo de la lista de métricas
+            const values = Object.entries(s)
+                .filter(([key, val]) => key !== 'category' && !isNaN(val))
+                .map(([_, val]) => Number(val));
+            // resumen5NumerosXCat
+            const resObj = Object.assign({ category: s.category }, calcularResumen5Numeros(values, statisticKeys));
+            return resObj;
+        });
+        const dataset = [{
+                // id: 'resumen5NumerosXCat',
+                source: resumen5NumerosXCat,
+            },
+            {
+                // id: 'resumen5NumerosXCatOrder',
+                transform: {
+                    type: 'sort',
+                    config: {
+                        dimension: 3,
+                        order: 'asc',
+                    },
+                },
+            }
+        ];
+        this.result.dataset = dataset;
+    }
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        const commons = getCommons(opts);
+        merge$1(this.result, commons);
+    }
+    addSeries(data, overrides, opts) {
+        const axisTypes = opts?.axisTypes || { x: 'value', y: 'category' };
+        const isVertical = axisTypes.x === 'category';
+        const dynamicOptions = {
+            encode: {
+                x: isVertical ? 0 : [1, 2, 3, 4, 5],
+                y: isVertical ? [1, 2, 3, 4, 5] : 0,
+            },
+        };
+        const serie = merge$1({}, dynamicOptions, overrides);
+        this.result.series = [serie];
+    }
+    addTooltip(data, overrides) {
+        const trigger = overrides.trigger;
+        const mainMeassureKey = data.dimensions.filter(d => d.name != 'category')[0].name;
+        const valueFormatter = this.valueFormatter;
+        function tooltipFormatter(params) {
+            const tooltipEventData = params[0];
+            const title = `<b>${tooltipEventData.name}</b></br>`;
+            let htmlbody = ``;
+            for (const datakey in tooltipEventData.data) {
+                const label = datakey;
+                const value = tooltipEventData.data[datakey];
+                if (label == 'category') {
+                    continue;
+                }
+                ;
+                const formattedValue = valueFormatter(value, mainMeassureKey);
+                const bodyText = `${tooltipEventData.marker}${label}: ${formattedValue}</br>`;
+                htmlbody += bodyText;
+            }
+            ;
+            const html = title + htmlbody;
+            return html;
+        }
+        ;
+        this.result.tooltip = getTooltipOptions(merge$1(overrides, { formatter: tooltipFormatter }));
+    }
+    addDataZoom() {
+        this.result.dataZoom = [
+            {
+                type: 'inside'
+            },
+            {
+                type: 'slider',
+                height: 20,
+                bottom: 10
+            }
+        ];
+    }
+    addXAxis(data, overrides, type = "value") {
+        const boxplotXAxisOptions = {
+            scale: true,
+        };
+        if (type === 'category') {
+            const opts = overrides.categoryAxis[0];
+            this.result.xAxis = getCategoryAxisOptions(opts);
+        }
+        else {
+            const opts = overrides.valueAxis[0];
+            this.result.xAxis = getValueAxisOptions(merge$1(opts, boxplotXAxisOptions));
+        }
+    }
+    addYAxis(data, overrides, type = "category") {
+        const boxplotYAxisOptions = {
+            scale: true,
+        };
+        if (type === 'category') {
+            const opts = overrides.categoryAxis[0];
+            this.result.yAxis = getCategoryAxisOptions(opts);
+        }
+        else {
+            const opts = overrides.valueAxis[0];
+            this.result.yAxis = getValueAxisOptions(merge$1(opts, boxplotYAxisOptions));
+        }
+    }
+    addRadiusAxis(data, overrides) { }
+    addAngleAxis(data, overrides) { }
+    addLegend() { }
+    addGraphic() { }
+    addPolar() { }
+    // 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;
+        }
+    }
+    getResult() {
+        return this.result;
+    }
+}
+
 /**
  * Director de Builds.
  */
@@ -1103,6 +1307,31 @@ class VSECDirector {
         this.builder.addSeries(data, seriesOverrides, layoutOpts);
         this.builder.addTooltip(data, overrides.tooltip);
     }
+    makeBoxplot(data, overrides, opts = {}) {
+        if (this.builder instanceof BoxPlotBuilder == false) {
+            return;
+        }
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
+            x: 'value',
+            y: 'category',
+        }, statisticsKeys = 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 = { axisTypes };
+        this.builder.addDataset(data, { statisticsKeys });
+        this.builder.addSeries(data, seriesOverrides, layoutOpts);
+        this.builder.addXAxis(data, overrides.axis, axisTypes.x);
+        this.builder.addYAxis(data, overrides.axis, axisTypes.y);
+        this.builder.addTooltip(data, overrides.tooltip);
+        this.builder.addDataZoom();
+    }
 }
 
 /**
@@ -1375,6 +1604,8 @@ class PieBuilder {
     addRadiusAxis(data, overrides) { }
     addAngleAxis(data, overrides) { }
     addGraphic() { }
+    addDataZoom() { }
+    addDataset(data, opts) { }
     // Callback setters
     setValueFormatter(formatter) {
         if (formatter) {
@@ -1537,6 +1768,8 @@ class FunnelBuilder {
     addRadiusAxis(data, overrides) { }
     addAngleAxis(data, overrides) { }
     addGraphic() { }
+    addDataZoom() { }
+    addDataset(data, opts) { }
     // Callback setters
     setValueFormatter(formatter) {
         if (formatter) {
@@ -1803,6 +2036,19 @@ class EChartBuilder {
     }
     // No-ops for ring charts
     addGraphic() { }
+    addDataset(data, opts) { }
+    addDataZoom() {
+        this.result.dataZoom = [
+            {
+                type: 'inside'
+            },
+            {
+                type: 'slider',
+                height: 20,
+                bottom: 60
+            }
+        ];
+    }
     getResult() {
         return this.result;
     }
@@ -2305,12 +2551,6 @@ class SunburstBuilder {
         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,
@@ -2322,6 +2562,14 @@ class SunburstBuilder {
         return this.result;
     }
     ;
+    addPolar() { }
+    addXAxis(data, overrides, type) { }
+    addYAxis(data, overrides, type) { }
+    addRadiusAxis(data, overrides) { }
+    addAngleAxis(data, overrides) { }
+    addLegend() { }
+    addDataZoom() { }
+    addDataset(data, opts) { }
     // Setters 
     /**
      * Permite inyectar un formateador de valores externo.
@@ -2520,6 +2768,8 @@ class SankeyBuilder {
     addRadiusAxis(data, overrides) { }
     addAngleAxis(data, overrides) { }
     addLegend() { }
+    addDataZoom() { }
+    addDataset(data, opts) { }
     addCommons() {
         const opts = {
             palette: this.palette,
@@ -2594,6 +2844,44 @@ 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  (chartClick)=\"onChartClick($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
+class EChartsHBoxplotComponent extends BaseEchartsComponent {
+    baseSeriesOptions = {
+        type: 'boxplot',
+        itemStyle: {
+            color: '#b8c5f2'
+        },
+    };
+    baseProduct = {
+        chartKey: 'hBoxplot',
+        baseOptions: {
+            series: this.baseSeriesOptions,
+        }
+    };
+    builder = new BoxPlotBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    make() {
+        const makeOpts = {
+            palette: this.palette,
+            colorResolver: this.colorResolver,
+            valueFormatter: this.valueFormatter,
+            axisTypes: {
+                x: 'value',
+                y: 'category',
+            },
+        };
+        this.director.makeBoxplot(this.data, this.optionsOverrides, makeOpts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBoxplotComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBoxplotComponent, isStandalone: true, selector: "vs-echarts-hboxplot", 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></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: EChartsHBoxplotComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-hboxplot', 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></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+        }] });
+
 // Interfaces de Inputs de Base EChart Component //
 
 ;
@@ -2608,5 +2896,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, EchartsSankeyComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
+export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsHBoxplotComponent, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsSankeyComponent, EchartsScatterComponent, defaultOptionsOverrides, initializeEcharts, provideVSEcharts };
 //# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map