@bizy/core 21.5.4 → 21.5.6

package/fesm2022/bizy-core.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, ChangeDetectorRef, ElementRef, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule, Pipe, Renderer2, ViewChild, ViewContainerRef, RendererFactory2, Inject, Injectable, DOCUMENT as DOCUMENT$1, NgZone, ContentChildren, Directive, ContentChild, TemplateRef, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, registerLocaleData, DatePipe } from '@angular/common';
-import { Subscription, Subject, debounceTime, distinctUntilChanged, BehaviorSubject, fromEvent, merge, take, skip, auditTime, throttleTime, interval, filter as filter$1 } from 'rxjs';
+import { Subscription, Subject, debounceTime, distinctUntilChanged, BehaviorSubject, fromEvent, merge, take, throttleTime, interval, filter as filter$1, skip, auditTime } from 'rxjs';
 import * as i3 from '@angular/cdk/dialog';
 import { DIALOG_DATA, DialogRef, DialogModule, Dialog } from '@angular/cdk/dialog';
 import * as i1$1 from '@angular/cdk/drag-drop';
@@ -10305,53 +10305,59 @@ class BizyBarLineChartComponent {
     #barChartChangesSubscription = new Subscription();
     #lineChartsSubscription = new Subscription();
     #lineChartChangesSubscription = new Subscription();
+    #renderSubscription = new Subscription();
+    #render = new Subject();
     #gridTop = 0;
     #gridRight = 0;
     #gridBottom = 0;
     #gridLeft = 0;
     #chartStacks = [];
     #chartNames = [];
+    #chartGroups = new Map();
     ngAfterContentInit() {
         import('echarts').then(echarts => {
             this.#echarts = echarts;
-            this.render();
+            this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
+            const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
+            this.#resizeObserver.observe(resizeRef);
+            this.#resizeSubscription = new Subscription();
+            this.#resizeSubscription.add(this.#resize$.subscribe(() => {
+                this.#render.next();
+            }));
             this.lineCharts.forEach(_lineChart => {
                 this.#lineChartChangesSubscription.add(_lineChart.changes$.subscribe(() => {
-                    this.render();
+                    this.#render.next();
                 }));
             });
             this.barCharts.forEach(_barChart => {
                 this.#barChartChangesSubscription.add(_barChart.changes$.subscribe(() => {
-                    this.render();
+                    this.#render.next();
                 }));
             });
-            this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
-            const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
-            this.#resizeObserver.observe(resizeRef);
-            this.#resizeSubscription = new Subscription();
-            this.#resizeSubscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
-                this.render();
-            }));
             this.#barChartsSubscription.add(this.barCharts.changes.subscribe(_barCharts => {
                 this.#barChartChangesSubscription.unsubscribe();
                 this.#barChartChangesSubscription = new Subscription();
-                this.render();
+                this.#render.next();
                 _barCharts.forEach(_barChart => {
                     this.#barChartChangesSubscription.add(_barChart.changes$.subscribe(() => {
-                        this.render();
+                        this.#render.next();
                     }));
                 });
             }));
             this.#lineChartsSubscription.add(this.lineCharts.changes.subscribe(_lineCharts => {
                 this.#lineChartChangesSubscription.unsubscribe();
                 this.#lineChartChangesSubscription = new Subscription();
-                this.render();
+                this.#render.next();
                 _lineCharts.forEach(_lineChart => {
                     this.#lineChartChangesSubscription.add(_lineChart.changes$.subscribe(() => {
-                        this.render();
+                        this.#render.next();
                     }));
                 });
             }));
+            this.#renderSubscription.add(this.#render.asObservable().pipe(debounceTime(150), throttleTime(300)).subscribe(() => {
+                this.render();
+            }));
+            this.#render.next();
         });
     }
     getNativeElement = () => this.#elementRef?.nativeElement;
@@ -10374,6 +10380,7 @@ class BizyBarLineChartComponent {
         const defaultYAxisColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-y-axis-color');
         const defaultXAxisColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-x-axis-color');
         this.lineCharts.forEach((_line, _i) => {
+            let axisIndex = _i;
             const lineXAxis = _line.xAxis;
             const lineYAxis = _line.yAxis;
             const xAxisType = !lineXAxis || typeof lineXAxis.independent === 'undefined' ? BIZY_BAR_LINE_CHART_AXIS_TYPE.INDEPENDENT : lineXAxis?.independent ? BIZY_BAR_LINE_CHART_AXIS_TYPE.INDEPENDENT : BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT;
@@ -10387,6 +10394,15 @@ class BizyBarLineChartComponent {
                 const thereIsOtherVisibleYAxis = (position === BIZY_BAR_LINE_CHART_AXIS_POSITION.LEFT && this.#gridLeft > 0 || position === BIZY_BAR_LINE_CHART_AXIS_POSITION.RIGHT && this.#gridRight > 0);
                 const offset = show && thereIsOtherVisibleYAxis && typeof lineYAxis.offset !== 'undefined' ? lineYAxis.offset : show && thereIsOtherVisibleYAxis ? Y_AXIS_OFFSET : 0;
                 const color = _line.getYAxisColor() ? _line.getYAxisColor() : yAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT && _line.getColor() ? _line.getColor() : defaultYAxisColor;
+                if (lineYAxis.group && yAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT) {
+                    const _axisIndex = this.#chartGroups.get(lineYAxis.group);
+                    if (_axisIndex) {
+                        axisIndex = _axisIndex;
+                    }
+                    else {
+                        this.#chartGroups.set(lineYAxis.group, this.#getRandomFourDigitsNumber());
+                    }
+                }
                 yAxis.push({
                     type: yAxisType,
                     name: lineYAxis?.name,
@@ -10434,6 +10450,15 @@ class BizyBarLineChartComponent {
                 const thereIsOtherVisibleXAxis = (position === BIZY_BAR_LINE_CHART_AXIS_POSITION.TOP && this.#gridTop > 0 || position === BIZY_BAR_LINE_CHART_AXIS_POSITION.BOTTOM && this.#gridBottom > 0);
                 const offset = show && thereIsOtherVisibleXAxis && typeof lineXAxis.offset !== 'undefined' ? lineXAxis.offset : show && thereIsOtherVisibleXAxis ? X_AXIS_OFFSET : 0;
                 const color = _line.getXAxisColor() ? _line.getXAxisColor() : xAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT && _line.getColor() ? _line.getColor() : defaultXAxisColor;
+                if (lineXAxis.group && xAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT) {
+                    const _axisIndex = this.#chartGroups.get(lineXAxis.group);
+                    if (_axisIndex) {
+                        axisIndex = _axisIndex;
+                    }
+                    else {
+                        this.#chartGroups.set(lineXAxis.group, this.#getRandomFourDigitsNumber());
+                    }
+                }
                 xAxis.push({
                     type: xAxisType,
                     name: lineXAxis?.name,
@@ -10472,16 +10497,17 @@ class BizyBarLineChartComponent {
                     }
                 }
             }
-            let axisIndex = _i;
-            const _name = this.#chartNames.find(_name => _name === _line.name);
-            if (_name) {
-                const index = series.findIndex(_s => _s.name === _name);
-                if (index !== -1) {
-                    axisIndex = index;
+            if (axisIndex !== _i) {
+                const _name = this.#chartNames.find(_name => _name === _line.name);
+                if (_name) {
+                    const index = series.findIndex(_s => _s.name === _name);
+                    if (index !== -1) {
+                        axisIndex = index;
+                    }
+                }
+                else {
+                    this.#chartNames.push(_line.name);
                 }
-            }
-            else {
-                this.#chartNames.push(_line.name);
             }
             series.push({
                 type: BIZY_BAR_LINE_CHART_TYPE.LINE,
@@ -10501,6 +10527,7 @@ class BizyBarLineChartComponent {
             legends.add(_line.name);
         });
         this.barCharts.forEach((_bar, _i) => {
+            let axisIndex = _i + this.lineCharts.length;
             const barXAxis = _bar.xAxis;
             const barYAxis = _bar.yAxis;
             const xAxisType = !barXAxis || typeof barXAxis.independent === 'undefined' ? BIZY_BAR_LINE_CHART_AXIS_TYPE.INDEPENDENT : barXAxis?.independent ? BIZY_BAR_LINE_CHART_AXIS_TYPE.INDEPENDENT : BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT;
@@ -10514,6 +10541,15 @@ class BizyBarLineChartComponent {
                 const thereIsOtherVisibleYAxis = (position === BIZY_BAR_LINE_CHART_AXIS_POSITION.LEFT && this.#gridLeft > 0 || position === BIZY_BAR_LINE_CHART_AXIS_POSITION.RIGHT && this.#gridRight > 0);
                 const offset = show && thereIsOtherVisibleYAxis && typeof barYAxis.offset !== 'undefined' ? barYAxis.offset : show && thereIsOtherVisibleYAxis ? Y_AXIS_OFFSET : 0;
                 const color = _bar.getYAxisColor() ? _bar.getYAxisColor() : yAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT && _bar.getColor() ? _bar.getColor() : defaultYAxisColor;
+                if (barYAxis.group && yAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT) {
+                    const _axisIndex = this.#chartGroups.get(barYAxis.group);
+                    if (_axisIndex) {
+                        axisIndex = _axisIndex;
+                    }
+                    else {
+                        this.#chartGroups.set(barYAxis.group, this.#getRandomFourDigitsNumber());
+                    }
+                }
                 yAxis.push({
                     type: yAxisType,
                     name: barYAxis?.name,
@@ -10562,6 +10598,15 @@ class BizyBarLineChartComponent {
                 const thereIsOtherVisibleXAxis = (position === BIZY_BAR_LINE_CHART_AXIS_POSITION.TOP && this.#gridTop > 0 || position === BIZY_BAR_LINE_CHART_AXIS_POSITION.BOTTOM && this.#gridBottom > 0);
                 const offset = show && thereIsOtherVisibleXAxis && typeof barXAxis.offset !== 'undefined' ? barXAxis.offset : show && thereIsOtherVisibleXAxis ? X_AXIS_OFFSET : 0;
                 const color = _bar.getXAxisColor() ? _bar.getXAxisColor() : xAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT && _bar.getColor() ? _bar.getColor() : defaultXAxisColor;
+                if (barXAxis.group && xAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT) {
+                    const _axisIndex = this.#chartGroups.get(barXAxis.group);
+                    if (_axisIndex) {
+                        axisIndex = _axisIndex;
+                    }
+                    else {
+                        this.#chartGroups.set(barXAxis.group, this.#getRandomFourDigitsNumber());
+                    }
+                }
                 xAxis.push({
                     type: xAxisType,
                     name: barXAxis?.name,
@@ -10601,29 +10646,30 @@ class BizyBarLineChartComponent {
                     }
                 }
             }
-            let axisIndex = _i + this.lineCharts.length;
-            if (_bar.stack) {
-                const _stack = this.#chartStacks.find(_stack => _stack === _bar.stack);
-                if (_stack) {
-                    const index = series.findIndex(_s => _s.stack === _stack);
-                    if (index !== -1) {
-                        axisIndex = yAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT ? series[index].yAxisIndex : series[index].xAxisIndex;
+            if (axisIndex !== _i + this.lineCharts.length) {
+                if (_bar.stack) {
+                    const _stack = this.#chartStacks.find(_stack => _stack === _bar.stack);
+                    if (_stack) {
+                        const index = series.findIndex(_s => _s.stack === _stack);
+                        if (index !== -1) {
+                            axisIndex = yAxisType === BIZY_BAR_LINE_CHART_AXIS_TYPE.DEPENDENT ? series[index].yAxisIndex : series[index].xAxisIndex;
+                        }
                     }
-                }
-                else {
-                    this.#chartStacks.push(_bar.stack);
-                }
-            }
-            else {
-                const _name = this.#chartNames.find(_name => _name === _bar.name);
-                if (_name) {
-                    const index = series.findIndex(_s => _s.name === _name);
-                    if (index !== -1) {
-                        axisIndex = index;
+                    else {
+                        this.#chartStacks.push(_bar.stack);
                     }
                 }
                 else {
-                    this.#chartNames.push(_bar.name);
+                    const _name = this.#chartNames.find(_name => _name === _bar.name);
+                    if (_name) {
+                        const index = series.findIndex(_s => _s.name === _name);
+                        if (index !== -1) {
+                            axisIndex = index;
+                        }
+                    }
+                    else {
+                        this.#chartNames.push(_bar.name);
+                    }
                 }
             }
             if (_bar.getMinHeight()) {
@@ -10785,12 +10831,14 @@ class BizyBarLineChartComponent {
         const rootValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable).trim();
         return rootValue || null;
     };
+    #getRandomFourDigitsNumber = () => Math.floor(1000 + Math.random() * 9000);
     ngOnDestroy() {
         this.#resizeSubscription.unsubscribe();
         this.#barChartsSubscription.unsubscribe();
         this.#barChartChangesSubscription.unsubscribe();
         this.#lineChartsSubscription.unsubscribe();
         this.#lineChartChangesSubscription.unsubscribe();
+        this.#renderSubscription.unsubscribe();
         if (this.#resizeObserver) {
             this.#resizeObserver.disconnect();
         }