@bizy/core 20.3.1 → 20.3.2

package/fesm2022/bizy-core.mjs

@@ -313,7 +313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                 }]
         }] });
 
-const MIN_CHART_SIZE$1 = 350; // px;
+const MIN_CHART_SIZE = 350; // px;
 const Y_AXIS_OFFSET = 80;
 const GRID_BOTTOM = 30;
 class BizyBarLineChartComponent {
@@ -592,10 +592,10 @@ class BizyBarLineChartComponent {
         if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
-        let elementWidth = this.#elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE$1;
-        let elementHeight = this.#elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE$1;
-        let minWidth = MIN_CHART_SIZE$1;
-        let minHeight = MIN_CHART_SIZE$1;
+        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)) {
@@ -3350,7 +3350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 const EMPTY_CHART = [0];
-const MIN_CHART_SIZE = 350; // px;
+const DEFAULT_CHART_SIZE = '300px';
 class BizyPieChartComponent {
     #elementRef = inject(ElementRef);
     #document = inject(DOCUMENT);
@@ -3358,14 +3358,15 @@ class BizyPieChartComponent {
     #renderer = inject(Renderer2);
     resizeRef = null;
     tooltip = true;
+    centerLabel = null;
     type = 'pie';
-    download = { hide: false, label: 'Descargar', name: 'Bizy' };
+    legend = null;
+    download = { show: true, label: 'Descargar', name: 'Bizy' };
     onLabelFormatter;
     onTooltipFormatter;
     onSelect = new EventEmitter();
     onDownload = new EventEmitter();
     #echarts = null;
-    #mutationObserver = null;
     #resizeObserver = null;
     #subscription = new Subscription();
     #chartContainer = null;
@@ -3373,13 +3374,7 @@ class BizyPieChartComponent {
     #resize$ = new Subject();
     #data = EMPTY_CHART;
     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) {
@@ -3444,26 +3439,26 @@ class BizyPieChartComponent {
             const label = this.type === 'pie' ? undefined : { show: false, position: 'center' };
             const series = [{
                     type: 'pie',
-                    radius: this.type === 'pie' ? '50%' : ['40%', '55%'],
+                    radius: this.type === 'pie' ? '50%' : ['50%', '70%'],
                     center: ['50%', '50%'],
                     data: this.#data,
                     itemStyle,
                     label
                 }];
-            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-pie-chart-tooltip-color');
+            const textBackgroundColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-tooltip-background-color');
+            const borderColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-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: () => {
                             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);
@@ -3491,12 +3486,45 @@ class BizyPieChartComponent {
                 appendToBody: true,
                 formatter: this.onTooltipFormatter
             };
-            const legend = this.type === 'pie' ? { show: false } : { show: true, orient: 'vertical', left: 'left' };
+            let legend = {};
+            if (this.legend) {
+                legend.show = this.legend.show;
+                legend.orient = this.legend.orient;
+                legend.left = this.legend.position ? this.legend.position.x : 'auto';
+                legend.top = this.legend.position ? this.legend.position.y : 'auto';
+            }
+            else {
+                legend = this.type === 'pie' ? { show: false } : {
+                    show: true,
+                    orient: 'vertical',
+                    left: 'left'
+                };
+            }
+            let graphic;
+            if (this.centerLabel) {
+                let centerLabelColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-center-label-color');
+                let { width, height } = this.#chartContainer.getBoundingClientRect();
+                let base = Math.min(width, height);
+                let fontSize = base / 6;
+                graphic = {
+                    type: 'text',
+                    left: 'center',
+                    top: 'center',
+                    style: {
+                        text: this.centerLabel,
+                        fill: centerLabelColor,
+                        textAlign: 'center',
+                        fontSize,
+                        fontWeight: 'bold'
+                    }
+                };
+            }
             const option = {
                 tooltip,
                 toolbox,
                 legend,
-                series
+                series,
+                graphic
             };
             import('echarts').then(echarts => {
                 this.#echarts = echarts.init(this.#chartContainer);
@@ -3526,23 +3554,15 @@ class BizyPieChartComponent {
         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 chartMinWidth = getComputedStyle(this.#document.body).getPropertyValue('--bizy-chart-min-width');
-        const pieChartMinHeight = getComputedStyle(this.#document.body).getPropertyValue('--bizy-chart-min-height');
-        if (Number(chartMinWidth)) {
-            minWidth = Number(chartMinWidth);
-        }
-        if (Number(pieChartMinHeight)) {
-            minHeight = Number(pieChartMinHeight);
-        }
-        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-pie-chart-width');
+        let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-height');
+        const width = minWidth ? minWidth : elementWidth ? `${elementWidth}px` : DEFAULT_CHART_SIZE;
+        const height = minHeight ? minHeight : elementHeight ? `${elementHeight}px` : DEFAULT_CHART_SIZE;
         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();
     };
@@ -3555,11 +3575,19 @@ class BizyPieChartComponent {
         this.#chartContainer = null;
         this.#ref.detectChanges();
     };
+    #getClosestCssVariable = (element, cssVariable) => {
+        while (element) {
+            const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
+            if (value) {
+                return value;
+            }
+            element = element.parentElement;
+        }
+        const rootValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable).trim();
+        return rootValue || null;
+    };
     ngOnDestroy() {
         this.#subscription.unsubscribe();
-        if (this.#mutationObserver) {
-            this.#mutationObserver.disconnect();
-        }
         if (this.#resizeObserver) {
             this.#resizeObserver.disconnect();
         }
@@ -3568,7 +3596,7 @@ class BizyPieChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyPieChartComponent, isStandalone: true, selector: "bizy-pie-chart", inputs: { resizeRef: "resizeRef", tooltip: "tooltip", type: "type", download: "download", onLabelFormatter: "onLabelFormatter", onTooltipFormatter: "onTooltipFormatter", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyPieChartComponent, isStandalone: true, selector: "bizy-pie-chart", inputs: { resizeRef: "resizeRef", tooltip: "tooltip", centerLabel: "centerLabel", type: "type", legend: "legend", download: "download", onLabelFormatter: "onLabelFormatter", onTooltipFormatter: "onTooltipFormatter", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, decorators: [{
             type: Component,
@@ -3582,8 +3610,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                 type: Input
             }], tooltip: [{
                 type: Input
+            }], centerLabel: [{
+                type: Input
             }], type: [{
                 type: Input
+            }], legend: [{
+                type: Input
             }], download: [{
                 type: Input
             }], onLabelFormatter: [{