@bizy/core 20.4.0 → 20.4.1

package/fesm2022/bizy-core.mjs

@@ -313,9 +313,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                 }]
         }] });
 
-const MIN_CHART_SIZE = 350; // px;
 const Y_AXIS_OFFSET = 80;
 const GRID_BOTTOM = 30;
+const DEFAULT_CHART_SIZE$2 = '300px';
 class BizyBarLineChartComponent {
     #elementRef = inject(ElementRef);
     #document = inject(DOCUMENT);
@@ -323,7 +323,7 @@ class BizyBarLineChartComponent {
     #renderer = inject(Renderer2);
     resizeRef = null;
     tooltip = true;
-    download = { hide: false, label: 'Descargar', name: 'Bizy' };
+    download = { show: true, label: 'Descargar', name: 'Bizy' };
     axisPointer = 'line';
     xAxisLabels = [];
     onTooltipFormatter;
@@ -331,7 +331,6 @@ class BizyBarLineChartComponent {
     onDownload = new EventEmitter();
     onSelect = new EventEmitter();
     #echarts = null;
-    #mutationObserver = null;
     #resizeObserver = null;
     #subscription = new Subscription();
     #chartContainer = null;
@@ -343,14 +342,9 @@ class BizyBarLineChartComponent {
     #chartStacks = [];
     #chartNames = [];
     ngAfterViewInit() {
-        this.#mutationObserver = new MutationObserver(() => {
-            if (this.#elementRef && this.#elementRef.nativeElement && (this.#elementRef.nativeElement.offsetWidth || this.#elementRef.nativeElement.offsetHeight)) {
-                this.#afterViewInit.next(true);
-                this.#mutationObserver.disconnect();
-            }
-        });
-        this.#mutationObserver.observe(this.#document.body, { childList: true, subtree: true });
+        this.#afterViewInit.next(true);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     set data(data) {
         if (!data) {
             return;
@@ -496,14 +490,14 @@ class BizyBarLineChartComponent {
                 bottom: 0,
                 data: legends
             };
-            const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
-            const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
-            const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
+            const textColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-tooltip-color');
+            const textBackgroundColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-tooltip-background-color');
+            const borderColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-tooltip-border-color');
             const toolbox = {
                 show: true,
                 feature: {
                     mySaveAsImage: {
-                        show: !this.download.hide,
+                        show: this.download.show,
                         icon: 'path://M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z',
                         title: this.download.label,
                         onclick: () => {
@@ -532,7 +526,7 @@ class BizyBarLineChartComponent {
                             showAllLegends(this.#echarts);
                             setTimeout(() => {
                                 html2canvas(this.#chartContainer).then(canvas => {
-                                    var link = document.createElement('a');
+                                    var link = this.#renderer.createElement('a');
                                     link.href = canvas.toDataURL('image/png');
                                     link.download = `${this.download.name}.png`;
                                     this.#renderer.appendChild(this.#document.body, link);
@@ -592,23 +586,15 @@ class BizyBarLineChartComponent {
         if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
-        let elementWidth = this.#elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE;
-        let elementHeight = this.#elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE;
-        let minWidth = MIN_CHART_SIZE;
-        let minHeight = MIN_CHART_SIZE;
-        const barChartMinWidth = getComputedStyle(this.#document.body).getPropertyValue('--bizy-chart-min-width');
-        const barChartMinHeight = getComputedStyle(this.#document.body).getPropertyValue('--bizy-chart-min-height');
-        if (Number(barChartMinWidth)) {
-            minWidth = Number(barChartMinWidth);
-        }
-        if (Number(barChartMinHeight)) {
-            minHeight = Number(barChartMinHeight);
-        }
-        const width = Math.max(elementWidth, minWidth);
-        const height = Math.max(elementHeight, minHeight);
+        let elementWidth = this.#elementRef.nativeElement.offsetWidth;
+        let elementHeight = this.#elementRef.nativeElement.offsetHeight;
+        let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-width');
+        let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-height');
+        const width = minWidth ? minWidth : elementWidth ? `${elementWidth}px` : DEFAULT_CHART_SIZE$2;
+        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : DEFAULT_CHART_SIZE$2;
         this.#chartContainer = this.#renderer.createElement('div');
-        this.#renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
-        this.#renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
+        this.#renderer.setStyle(this.#chartContainer, 'width', width);
+        this.#renderer.setStyle(this.#chartContainer, 'height', height);
         this.#renderer.appendChild(this.#elementRef.nativeElement, this.#chartContainer);
         this.#ref.detectChanges();
     };
@@ -621,12 +607,19 @@ class BizyBarLineChartComponent {
         this.#chartContainer = null;
         this.#ref.detectChanges();
     };
-    getNativeElement = () => this.#elementRef?.nativeElement;
+    #getClosestCssVariable = (element, cssVariable) => {
+        while (element) {
+            const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
+            if (value) {
+                return value;
+            }
+            element = element.parentElement;
+        }
+        const rootValue = getComputedStyle(this.#document.documentElement).getPropertyValue(cssVariable).trim();
+        return rootValue;
+    };
     ngOnDestroy() {
         this.#subscription.unsubscribe();
-        if (this.#mutationObserver) {
-            this.#mutationObserver.disconnect();
-        }
         if (this.#resizeObserver) {
             this.#resizeObserver.disconnect();
         }
@@ -3133,7 +3126,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                 }]
         }] });
 
-const EMPTY_CHART$1 = [0];
 const DEFAULT_CHART_SIZE$1 = '300px';
 class BizyHeatMapChartComponent {
     #elementRef = inject(ElementRef);
@@ -3157,10 +3149,11 @@ class BizyHeatMapChartComponent {
     #chartContainer = null;
     #afterViewInit = new BehaviorSubject(false);
     #resize$ = new Subject();
-    #data = EMPTY_CHART$1;
+    #data = [];
     ngAfterViewInit() {
         this.#afterViewInit.next(true);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     set data(data) {
         if (!data) {
             return;