@visionaris-bruno/vs-echarts 9.0.7 → 9.1.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, BoxplotChart } from 'echarts/charts';
-import { TooltipComponent, GridComponent, LegendComponent, GraphicComponent, PolarComponent, DatasetComponent, DataZoomComponent } from 'echarts/components';
+import { BarChart, PieChart, LineChart, ScatterChart, FunnelChart, SunburstChart, SankeyChart, BoxplotChart, HeatmapChart } from 'echarts/charts';
+import { TooltipComponent, GridComponent, CalendarComponent, LegendComponent, GraphicComponent, PolarComponent, DatasetComponent, DataZoomComponent, VisualMapComponent } from 'echarts/components';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import * as i0 from '@angular/core';
 import { InjectionToken, Inject, Injectable, EventEmitter, inject, Output, Input, ViewChild, Directive, Component } from '@angular/core';
@@ -78,6 +78,8 @@ function initializeEcharts() {
         BoxplotChart,
         TooltipComponent,
         GridComponent,
+        HeatmapChart,
+        CalendarComponent,
         LegendComponent,
         CanvasRenderer,
         SVGRenderer,
@@ -85,6 +87,7 @@ function initializeEcharts() {
         PolarComponent,
         DatasetComponent,
         DataZoomComponent,
+        VisualMapComponent,
     ]);
     // Register additional locales in ECharts
     echarts.registerLocale('ES', langES);
@@ -183,6 +186,9 @@ function defaultOptionsOverrides() {
         hBoxplot: {
             series: {}
         },
+        heatmapCalendar: {
+            series: {},
+        },
     };
 }
 const defaultValueFormatter = (value) => `${value}`;
@@ -247,6 +253,7 @@ class BaseEchartsComponent {
     /** Subject para debouncing de actualizaciones. ReplaySubject asegura no perder el primer renderizado. */
     updateSubject = new ReplaySubject(1);
     updateSubscription;
+    afterSetOptionsHook;
     chartInstance;
     vsEchartsConfig = (() => {
         try {
@@ -290,6 +297,9 @@ class BaseEchartsComponent {
             replaceMerge,
         };
         this.chartInstance?.setOption(chartOptions, _opts);
+        if (this.afterSetOptionsHook) {
+            this.afterSetOptionsHook();
+        }
     }
     // metodos protegidos //
     dispatchAction(type, d) {
@@ -1935,6 +1945,123 @@ class SankeyBuilder {
     }
 }
 
+class HeatmapCalendarBuilder {
+    baseProduct;
+    result = {};
+    calendarHeight = 0;
+    valueFormatter = defaultValueFormatter;
+    palette = [];
+    colorResolver;
+    constructor(baseProduct) {
+        this.baseProduct = baseProduct;
+    }
+    reset() {
+        this.result = {};
+    }
+    addCommons() {
+        const opts = {
+            palette: this.palette,
+        };
+        const commonsOverrides = getCommons(opts);
+        merge$1(this.result, commonsOverrides, { grid: {} });
+    }
+    addDataset(data, opts) { }
+    addVisualmap(data) { }
+    addCalendar(data) { }
+    addSeries(data, overrides, opts) {
+        if (!data || !data.dimensions || !data.source || data.source.length === 0)
+            return;
+        const calendarOverrides = opts.calendar;
+        const visualMapOverrides = opts.visualMap;
+        const measureDim = data.dimensions.find(d => d.name !== 'category');
+        const dimKey = measureDim ? measureDim.name : '';
+        const dataByYear = new Map();
+        let min = Infinity;
+        let max = -Infinity;
+        data.source.forEach((s) => {
+            if (!s.category)
+                return;
+            const dateObj = new Date(s.category);
+            if (isNaN(dateObj.getTime()))
+                return;
+            const year = dateObj.getFullYear().toString();
+            const value = s[dimKey] !== undefined && s[dimKey] !== null ? Number(s[dimKey]) : 0;
+            if (value < min)
+                min = value;
+            if (value > max)
+                max = value;
+            if (!dataByYear.has(year)) {
+                dataByYear.set(year, []);
+            }
+            const formattedDate = dateObj.toISOString().split('T')[0];
+            dataByYear.get(year).push([formattedDate, value]);
+        });
+        if (min === Infinity)
+            min = 0;
+        if (max === -Infinity)
+            max = 0;
+        const sortedYears = Array.from(dataByYear.keys()).sort();
+        const calendars = [];
+        const series = [];
+        sortedYears.forEach((year, index) => {
+            calendars.push(merge$1({
+                top: 120 + index * 180,
+                range: year,
+            }, calendarOverrides));
+            series.push(merge$1({
+                calendarIndex: index,
+                data: dataByYear.get(year) || []
+            }, overrides));
+        });
+        this.result.calendar = calendars;
+        this.result.series = series;
+        const visualMap = merge$1({
+            min: min,
+            max: max,
+        }, visualMapOverrides);
+        if (this.palette && this.palette.length > 0) {
+            visualMap.inRange = {
+                color: this.palette
+            };
+        }
+        this.result.visualMap = visualMap;
+    }
+    addTooltip(data, overrides) {
+        const mainDim = data.dimensions.filter(d => d.name != 'category')[0];
+        const valueFormatter = this.valueFormatter;
+        const dimkey = mainDim.name, dimAlias = mainDim.displayName;
+        const tooltipFormatter = (params) => {
+            const date = params.value[params.encode['time']], value = params.value[params.encode['value']];
+            return `<div style="text-align: center;" ><b>${date}</b></br>${params.marker} ${mainDim.displayName}</br><b>${valueFormatter(value, dimkey)}</b></div>`;
+        };
+        const tooltipOptions = getTooltipOptions({
+            trigger: 'item',
+            formatter: tooltipFormatter,
+        });
+        this.result.tooltip = tooltipOptions;
+    }
+    addPolar() { }
+    addXAxis(data, overrides, type) { }
+    addYAxis(data, overrides, type) { }
+    addRadiusAxis(data, overrides) { }
+    addAngleAxis(data, overrides) { }
+    addLegend() { }
+    addGraphic() { }
+    addDataZoom() { }
+    setValueFormatter(formatter) {
+        this.valueFormatter = formatter;
+    }
+    setPalette(palette) {
+        this.palette = palette;
+    }
+    setColorResolver(resolver) {
+        this.colorResolver = resolver;
+    }
+    getResult() {
+        return this.result;
+    }
+}
+
 /**
  * Director de Builds.
  */
@@ -2206,6 +2333,30 @@ class VSECDirector {
         this.builder.addTooltip(data, overrides.tooltip);
         this.builder.addDataZoom();
     }
+    makeHeatmapCalendar(data, overrides, opts = {}) {
+        if (this.builder instanceof HeatmapCalendarBuilder == false) {
+            return;
+        }
+        const { valueFormatter = undefined, palette = undefined, colorResolver = undefined, axisTypes = {
+            x: 'value',
+            y: 'category',
+        }, } = opts;
+        this.builder.reset();
+        // El orden importa, primero callbacks y despues componentes.
+        // chart callbaks
+        if (valueFormatter)
+            this.builder.setValueFormatter(valueFormatter);
+        const product = this.builder.baseProduct;
+        const seriesOverrides = merge$1({}, product.baseOptions.series, overrides[product.chartKey].series);
+        // chart components
+        this.builder.addCommons();
+        const seriesConfigOpts = {
+            calendar: product.baseOptions.calendar,
+            visualMap: product.baseOptions.visualMap,
+        };
+        this.builder.addSeries(data, seriesOverrides, seriesConfigOpts);
+        this.builder.addTooltip(data, overrides.tooltip);
+    }
 }
 
 /**
@@ -3008,6 +3159,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], 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"] }]
         }] });
 
+class EChartsHeatmapCalendar extends BaseEchartsComponent {
+    /** aires para el calculo de resize y posicionamientos de distintos componentes */
+    calendarPaddings = {
+        visualMapTop: 5,
+    };
+    baseSeriesOptions = {
+        type: 'heatmap',
+        coordinateSystem: 'calendar',
+        selectedMode: 'single',
+        select: {
+            itemStyle: {
+                borderWidth: 2,
+                borderColor: EChartsTokens.sBorderColor,
+                shadowColor: EChartsTokens.sShadowColor,
+                shadowBlur: 6,
+            }
+        }
+    };
+    baseProduct = {
+        chartKey: 'heatmapCalendar',
+        baseOptions: {
+            visualMap: {
+                calculable: true,
+                orient: 'horizontal',
+                left: 'center',
+                top: this.calendarPaddings.visualMapTop,
+                formatter: (dv) => {
+                    const value = dv ?? '';
+                    return value.toLocaleString();
+                },
+            }, // dinamico
+            calendar: {
+                cellSize: ['auto', 20],
+                right: 5,
+                left: 60,
+                yearLabel: { show: true },
+                dayLabel: { firstDay: 1 },
+            },
+            series: this.baseSeriesOptions, // dinamico, uno por año.
+        }
+    };
+    builder = new HeatmapCalendarBuilder(this.baseProduct);
+    director = new VSECDirector(this.builder);
+    make() {
+        const makeOpts = {
+            palette: this.palette,
+            valueFormatter: this.valueFormatter,
+            colorResolver: this.colorResolver,
+        };
+        this.director.makeHeatmapCalendar(this.data, this.optionsOverrides, makeOpts);
+    }
+    afterSetOptionsHook = () => {
+        if (!this.chartInstance)
+            return;
+        let chartHeight = 0;
+        const gElements = this.chartInstance.getDom().getElementsByTagName("g");
+        for (let i = 0; i < gElements.length; i++) {
+            const ge = gElements[i];
+            const geHeight = ge.getBBox().height;
+            if (chartHeight < geHeight) {
+                chartHeight = geHeight;
+            }
+        }
+        const { visualMapTop } = this.calendarPaddings;
+        /**
+       * aire inferior para el svg maestro.
+       */
+        const svgBottom = 5;
+        this.chartInstance.resize({ height: chartHeight + visualMapTop + svgBottom });
+    };
+    onChartClick(event) {
+        if (event.componentType === 'series') {
+            const dimension = this.data.dimensions.filter(d => d.name != 'category')[0];
+            const dimensionAlias = dimension.displayName;
+            const dimensionKey = dimension.name;
+            const itemValue = event.value[event.encode['value']];
+            const date = event.value[event.encode['time']];
+            // opero event para que sea compatible con el de base
+            event.value = {
+                category: date,
+                [dimensionKey]: itemValue,
+            };
+            event.name = date;
+            event.seriesName = dimensionAlias;
+            super.onChartClick(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHeatmapCalendar, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHeatmapCalendar, isStandalone: true, selector: "vs-echarts-heatmapCalendar", 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;overflow-y:auto;scrollbar-gutter:stable}\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: EChartsHeatmapCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'vs-echarts-heatmapCalendar', standalone: true, imports: [
+                        CommonModule,
+                        NgxEchartsDirective,
+                    ], 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;overflow-y:auto;scrollbar-gutter:stable}\n"] }]
+        }] });
+
 // Interfaces de Inputs de Base EChart Component // 
 // TopLevelFormatterParams
 
@@ -3023,5 +3272,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, EChartsHBoxplotComponent, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsSankeyComponent, EchartsScatterComponent, VSEchartsConfigService, defaultOptionsOverrides, provideVSEcharts };
+export { BaseEchartsComponent, EChartsAreaComponent, EChartsAreaStackComponent, EChartsBarStackedComponent, EChartsBarStackedRadialComponent, EChartsHBarComponent, EChartsHBarStackedComponent, EChartsHBoxplotComponent, EChartsHeatmapCalendar, EChartsSunburstComponent, EchartsBarComponent, EchartsFunnelComponent, EchartsLineComponent, EchartsPieComponent, EchartsRingComponent, EchartsSankeyComponent, EchartsScatterComponent, VSEchartsConfigService, defaultOptionsOverrides, provideVSEcharts };
 //# sourceMappingURL=visionaris-bruno-vs-echarts.mjs.map