@bizy/core 20.2.2 → 20.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/bizy-core.mjs +82 -134
- package/fesm2022/bizy-core.mjs.map +1 -1
- package/index.d.ts +1 -11
- package/package.json +1 -1
- package/styles/variables.css +7 -0
package/fesm2022/bizy-core.mjs
CHANGED
|
@@ -313,14 +313,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
313
313
|
}]
|
|
314
314
|
}] });
|
|
315
315
|
|
|
316
|
-
const MIN_CHART_SIZE$1 = 350; // px;
|
|
317
316
|
const Y_AXIS_OFFSET = 80;
|
|
318
317
|
const GRID_BOTTOM = 30;
|
|
319
318
|
class BizyBarLineChartComponent {
|
|
320
|
-
elementRef;
|
|
321
|
-
document;
|
|
322
|
-
ref;
|
|
323
|
-
renderer;
|
|
319
|
+
#elementRef = inject(ElementRef);
|
|
320
|
+
#document = inject(DOCUMENT);
|
|
321
|
+
#ref = inject(ChangeDetectorRef);
|
|
322
|
+
#renderer = inject(Renderer2);
|
|
324
323
|
resizeRef = null;
|
|
325
324
|
tooltip = true;
|
|
326
325
|
download = { hide: false, label: 'Descargar', name: 'Bizy' };
|
|
@@ -331,7 +330,6 @@ class BizyBarLineChartComponent {
|
|
|
331
330
|
onDownload = new EventEmitter();
|
|
332
331
|
onSelect = new EventEmitter();
|
|
333
332
|
#echarts = null;
|
|
334
|
-
#mutationObserver = null;
|
|
335
333
|
#resizeObserver = null;
|
|
336
334
|
#subscription = new Subscription();
|
|
337
335
|
#chartContainer = null;
|
|
@@ -342,20 +340,8 @@ class BizyBarLineChartComponent {
|
|
|
342
340
|
#leftYAxis = 0;
|
|
343
341
|
#chartStacks = [];
|
|
344
342
|
#chartNames = [];
|
|
345
|
-
constructor(elementRef, document, ref, renderer) {
|
|
346
|
-
this.elementRef = elementRef;
|
|
347
|
-
this.document = document;
|
|
348
|
-
this.ref = ref;
|
|
349
|
-
this.renderer = renderer;
|
|
350
|
-
}
|
|
351
343
|
ngAfterViewInit() {
|
|
352
|
-
this.#
|
|
353
|
-
if (this.elementRef && this.elementRef.nativeElement && (this.elementRef.nativeElement.offsetWidth || this.elementRef.nativeElement.offsetHeight)) {
|
|
354
|
-
this.#afterViewInit.next(true);
|
|
355
|
-
this.#mutationObserver.disconnect();
|
|
356
|
-
}
|
|
357
|
-
});
|
|
358
|
-
this.#mutationObserver.observe(this.document.body, { childList: true, subtree: true });
|
|
344
|
+
this.#afterViewInit.next(true);
|
|
359
345
|
}
|
|
360
346
|
set data(data) {
|
|
361
347
|
if (!data) {
|
|
@@ -502,9 +488,9 @@ class BizyBarLineChartComponent {
|
|
|
502
488
|
bottom: 0,
|
|
503
489
|
data: legends
|
|
504
490
|
};
|
|
505
|
-
const textColor = getComputedStyle(this
|
|
506
|
-
const textBackgroundColor = getComputedStyle(this
|
|
507
|
-
const borderColor = getComputedStyle(this
|
|
491
|
+
const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
|
|
492
|
+
const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
|
|
493
|
+
const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
|
|
508
494
|
const toolbox = {
|
|
509
495
|
show: true,
|
|
510
496
|
feature: {
|
|
@@ -538,12 +524,12 @@ class BizyBarLineChartComponent {
|
|
|
538
524
|
showAllLegends(this.#echarts);
|
|
539
525
|
setTimeout(() => {
|
|
540
526
|
html2canvas(this.#chartContainer).then(canvas => {
|
|
541
|
-
var link =
|
|
527
|
+
var link = this.#renderer.createElement('a');
|
|
542
528
|
link.href = canvas.toDataURL('image/png');
|
|
543
529
|
link.download = `${this.download.name}.png`;
|
|
544
|
-
this
|
|
530
|
+
this.#renderer.appendChild(this.#document.body, link);
|
|
545
531
|
link.click();
|
|
546
|
-
this
|
|
532
|
+
this.#renderer.removeChild(this.#document.body, link);
|
|
547
533
|
restoreLegendType(this.#echarts);
|
|
548
534
|
this.onDownload.emit();
|
|
549
535
|
});
|
|
@@ -577,7 +563,7 @@ class BizyBarLineChartComponent {
|
|
|
577
563
|
this.onSelect.emit(params.name);
|
|
578
564
|
});
|
|
579
565
|
this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
|
|
580
|
-
const resizeRef = this.resizeRef ? this.resizeRef : this
|
|
566
|
+
const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
|
|
581
567
|
this.#resizeObserver.observe(resizeRef);
|
|
582
568
|
this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
|
|
583
569
|
this.#deleteChartContainer();
|
|
@@ -595,43 +581,43 @@ class BizyBarLineChartComponent {
|
|
|
595
581
|
}));
|
|
596
582
|
}
|
|
597
583
|
#createChartContainer = () => {
|
|
598
|
-
if (this.#chartContainer || !this
|
|
584
|
+
if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
|
|
599
585
|
return;
|
|
600
586
|
}
|
|
601
|
-
let elementWidth = this
|
|
602
|
-
let elementHeight = this
|
|
603
|
-
let minWidth =
|
|
604
|
-
let minHeight =
|
|
605
|
-
const
|
|
606
|
-
const
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
}
|
|
613
|
-
const width = Math.max(elementWidth, minWidth);
|
|
614
|
-
const height = Math.max(elementHeight, minHeight);
|
|
615
|
-
this.#chartContainer = this.renderer.createElement('div');
|
|
616
|
-
this.renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
|
|
617
|
-
this.renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
|
|
618
|
-
this.renderer.appendChild(this.elementRef.nativeElement, this.#chartContainer);
|
|
619
|
-
this.ref.detectChanges();
|
|
587
|
+
let elementWidth = this.#elementRef.nativeElement.offsetWidth;
|
|
588
|
+
let elementHeight = this.#elementRef.nativeElement.offsetHeight;
|
|
589
|
+
let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-min-width') || 0;
|
|
590
|
+
let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-bar-line-chart-min-height') || 0;
|
|
591
|
+
const width = elementWidth ? `${elementWidth}px` : minWidth;
|
|
592
|
+
const height = elementHeight ? `${elementHeight}px` : minHeight;
|
|
593
|
+
this.#chartContainer = this.#renderer.createElement('div');
|
|
594
|
+
this.#renderer.setStyle(this.#chartContainer, 'width', width);
|
|
595
|
+
this.#renderer.setStyle(this.#chartContainer, 'height', height);
|
|
596
|
+
this.#renderer.appendChild(this.#elementRef.nativeElement, this.#chartContainer);
|
|
597
|
+
this.#ref.detectChanges();
|
|
620
598
|
};
|
|
621
599
|
#deleteChartContainer = () => {
|
|
622
|
-
if (!this.#chartContainer || !this
|
|
600
|
+
if (!this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
|
|
623
601
|
return;
|
|
624
602
|
}
|
|
625
603
|
this.#echarts.clear();
|
|
626
|
-
this
|
|
604
|
+
this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
|
|
627
605
|
this.#chartContainer = null;
|
|
628
|
-
this
|
|
606
|
+
this.#ref.detectChanges();
|
|
607
|
+
};
|
|
608
|
+
#getClosestCssVariable = (element, cssVariable) => {
|
|
609
|
+
while (element) {
|
|
610
|
+
const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
|
|
611
|
+
if (value) {
|
|
612
|
+
return value;
|
|
613
|
+
}
|
|
614
|
+
element = element.parentElement;
|
|
615
|
+
}
|
|
616
|
+
const rootValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable).trim();
|
|
617
|
+
return rootValue || null;
|
|
629
618
|
};
|
|
630
619
|
ngOnDestroy() {
|
|
631
620
|
this.#subscription.unsubscribe();
|
|
632
|
-
if (this.#mutationObserver) {
|
|
633
|
-
this.#mutationObserver.disconnect();
|
|
634
|
-
}
|
|
635
621
|
if (this.#resizeObserver) {
|
|
636
622
|
this.#resizeObserver.disconnect();
|
|
637
623
|
}
|
|
@@ -639,7 +625,7 @@ class BizyBarLineChartComponent {
|
|
|
639
625
|
this.#echarts.clear();
|
|
640
626
|
}
|
|
641
627
|
}
|
|
642
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, deps: [
|
|
628
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
643
629
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyBarLineChartComponent, isStandalone: true, selector: "bizy-bar-line-chart", inputs: { resizeRef: "resizeRef", tooltip: "tooltip", download: "download", axisPointer: "axisPointer", xAxisLabels: "xAxisLabels", onTooltipFormatter: "onTooltipFormatter", onXAxisLabelFormatter: "onXAxisLabelFormatter", data: "data" }, outputs: { onDownload: "onDownload", onSelect: "onSelect" }, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
644
630
|
}
|
|
645
631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, decorators: [{
|
|
@@ -650,19 +636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
650
636
|
imports: [CommonModule],
|
|
651
637
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
652
638
|
}]
|
|
653
|
-
}],
|
|
654
|
-
type: Inject,
|
|
655
|
-
args: [ElementRef]
|
|
656
|
-
}] }, { type: Document, decorators: [{
|
|
657
|
-
type: Inject,
|
|
658
|
-
args: [DOCUMENT]
|
|
659
|
-
}] }, { type: i0.ChangeDetectorRef, decorators: [{
|
|
660
|
-
type: Inject,
|
|
661
|
-
args: [ChangeDetectorRef]
|
|
662
|
-
}] }, { type: i0.Renderer2, decorators: [{
|
|
663
|
-
type: Inject,
|
|
664
|
-
args: [Renderer2]
|
|
665
|
-
}] }], propDecorators: { resizeRef: [{
|
|
639
|
+
}], propDecorators: { resizeRef: [{
|
|
666
640
|
type: Input
|
|
667
641
|
}], tooltip: [{
|
|
668
642
|
type: Input
|
|
@@ -1067,11 +1041,11 @@ class BizyCardComponent {
|
|
|
1067
1041
|
this.onSelect.emit(event);
|
|
1068
1042
|
}
|
|
1069
1043
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1070
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyCardComponent, isStandalone: true, selector: "bizy-card", inputs: { id: "id", disabled: "disabled", selected: "selected", customClass: "customClass" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n type=\"button\"\n (click)=\"_onSelect($event)\"\n (keyup.enter)=\"_onSelect($event)\"\n class=\"bizy-card {{customClass}}\"\n [ngClass]=\"{'bizy-card--disabled': disabled}\">\n\n <span class=\"bizy-card__header\">\n\n <span class=\"bizy-card__header__start bizy-card__slot\">\n <ng-content select=\"[slot=header-start]\"></ng-content>\n </span>\n\n <span class=\"bizy-card__header__end bizy-card__slot\">\n <ng-content select=\"[slot=header-end]\"></ng-content>\n </span>\n\n </span>\n\n <span class=\"bizy-card__content\">\n\n <ng-content></ng-content>\n\n </span>\n\n <span class=\"bizy-card__footer\">\n\n <span class=\"bizy-card__footer__start bizy-card__slot\">\n <ng-content select=\"[slot=footer-start]\"></ng-content>\n </span>\n\n <span class=\"bizy-card__footer__end bizy-card__slot\">\n <ng-content select=\"[slot=footer-end]\"></ng-content>\n </span>\n\n </span>\n\n</button>", styles: [":host{font-size:1rem;height:var(--bizy-card-height);min-height:var(--bizy-card-min-height);max-height:var(--bizy-card-max-height);width:var(--bizy-card-width);min-width:var(--bizy-card-min-width);max-width:var(--bizy-card-max-width)}.bizy-card{height:
|
|
1044
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyCardComponent, isStandalone: true, selector: "bizy-card", inputs: { id: "id", disabled: "disabled", selected: "selected", customClass: "customClass" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n type=\"button\"\n (click)=\"_onSelect($event)\"\n (keyup.enter)=\"_onSelect($event)\"\n class=\"bizy-card {{customClass}}\"\n [ngClass]=\"{'bizy-card--disabled': disabled}\">\n\n <span class=\"bizy-card__header\">\n\n <span class=\"bizy-card__header__start bizy-card__slot\">\n <ng-content select=\"[slot=header-start]\"></ng-content>\n </span>\n\n <span class=\"bizy-card__header__end bizy-card__slot\">\n <ng-content select=\"[slot=header-end]\"></ng-content>\n </span>\n\n </span>\n\n <span class=\"bizy-card__content\">\n\n <ng-content></ng-content>\n\n </span>\n\n <span class=\"bizy-card__footer\">\n\n <span class=\"bizy-card__footer__start bizy-card__slot\">\n <ng-content select=\"[slot=footer-start]\"></ng-content>\n </span>\n\n <span class=\"bizy-card__footer__end bizy-card__slot\">\n <ng-content select=\"[slot=footer-end]\"></ng-content>\n </span>\n\n </span>\n\n</button>", styles: [":host{font-size:1rem;height:var(--bizy-card-height);min-height:var(--bizy-card-min-height);max-height:var(--bizy-card-max-height);width:var(--bizy-card-width);min-width:var(--bizy-card-min-width);max-width:var(--bizy-card-max-width)}.bizy-card{height:100%;width:100%;cursor:var(--bizy-card-cursor);border:var(--bizy-card-border);border-top:var(--bizy-card-border-top);border-right:var(--bizy-card-border-right);border-bottom:var(--bizy-card-border-bottom);border-left:var(--bizy-card-border-left);border-radius:var(--bizy-card-border-radius);overflow:hidden;padding:var(--bizy-card-padding);display:flex;flex-direction:column;justify-content:space-between;row-gap:.3rem;background-color:var(--bizy-card-background-color);transition:transform .25s ease-in-out;box-shadow:var(--bizy-card-box-shadow)}.bizy-card:hover{transform:translateY(-1px);box-shadow:var(--bizy-card-hover-box-shadow)}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__content{display:none}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__header:not(:empty){height:100%!important}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__footer:not(:empty){height:100%!important}.bizy-card--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-card__content:not(:empty){display:flex;align-items:center;column-gap:.5rem;height:100%;width:100%;background-color:var(--bizy-card-content-background-color)}.bizy-card__header:has(>.bizy-card__header__start:empty):has(>.bizy-card__header__end:empty){display:none}.bizy-card__header:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.5rem;background-color:var(--bizy-card-header-background-color)}.bizy-card__header__start{justify-content:flex-start}.bizy-card__header__end{justify-content:flex-end}.bizy-card__slot{width:100%;display:flex;align-items:center;column-gap:.5rem;height:100%;overflow:hidden}.bizy-card__footer:has(>.bizy-card__footer__start:empty):has(>.bizy-card__footer__end:empty){display:none}.bizy-card__footer:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.5rem;background-color:var(--bizy-card-footer-background-color)}.bizy-card__footer__start{justify-content:flex-start}.bizy-card__footer__end{justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1071
1045
|
}
|
|
1072
1046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyCardComponent, decorators: [{
|
|
1073
1047
|
type: Component,
|
|
1074
|
-
args: [{ selector: 'bizy-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n type=\"button\"\n (click)=\"_onSelect($event)\"\n (keyup.enter)=\"_onSelect($event)\"\n class=\"bizy-card {{customClass}}\"\n [ngClass]=\"{'bizy-card--disabled': disabled}\">\n\n <span class=\"bizy-card__header\">\n\n <span class=\"bizy-card__header__start bizy-card__slot\">\n <ng-content select=\"[slot=header-start]\"></ng-content>\n </span>\n\n <span class=\"bizy-card__header__end bizy-card__slot\">\n <ng-content select=\"[slot=header-end]\"></ng-content>\n </span>\n\n </span>\n\n <span class=\"bizy-card__content\">\n\n <ng-content></ng-content>\n\n </span>\n\n <span class=\"bizy-card__footer\">\n\n <span class=\"bizy-card__footer__start bizy-card__slot\">\n <ng-content select=\"[slot=footer-start]\"></ng-content>\n </span>\n\n <span class=\"bizy-card__footer__end bizy-card__slot\">\n <ng-content select=\"[slot=footer-end]\"></ng-content>\n </span>\n\n </span>\n\n</button>", styles: [":host{font-size:1rem;height:var(--bizy-card-height);min-height:var(--bizy-card-min-height);max-height:var(--bizy-card-max-height);width:var(--bizy-card-width);min-width:var(--bizy-card-min-width);max-width:var(--bizy-card-max-width)}.bizy-card{height:
|
|
1048
|
+
args: [{ selector: 'bizy-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n type=\"button\"\n (click)=\"_onSelect($event)\"\n (keyup.enter)=\"_onSelect($event)\"\n class=\"bizy-card {{customClass}}\"\n [ngClass]=\"{'bizy-card--disabled': disabled}\">\n\n <span class=\"bizy-card__header\">\n\n <span class=\"bizy-card__header__start bizy-card__slot\">\n <ng-content select=\"[slot=header-start]\"></ng-content>\n </span>\n\n <span class=\"bizy-card__header__end bizy-card__slot\">\n <ng-content select=\"[slot=header-end]\"></ng-content>\n </span>\n\n </span>\n\n <span class=\"bizy-card__content\">\n\n <ng-content></ng-content>\n\n </span>\n\n <span class=\"bizy-card__footer\">\n\n <span class=\"bizy-card__footer__start bizy-card__slot\">\n <ng-content select=\"[slot=footer-start]\"></ng-content>\n </span>\n\n <span class=\"bizy-card__footer__end bizy-card__slot\">\n <ng-content select=\"[slot=footer-end]\"></ng-content>\n </span>\n\n </span>\n\n</button>", styles: [":host{font-size:1rem;height:var(--bizy-card-height);min-height:var(--bizy-card-min-height);max-height:var(--bizy-card-max-height);width:var(--bizy-card-width);min-width:var(--bizy-card-min-width);max-width:var(--bizy-card-max-width)}.bizy-card{height:100%;width:100%;cursor:var(--bizy-card-cursor);border:var(--bizy-card-border);border-top:var(--bizy-card-border-top);border-right:var(--bizy-card-border-right);border-bottom:var(--bizy-card-border-bottom);border-left:var(--bizy-card-border-left);border-radius:var(--bizy-card-border-radius);overflow:hidden;padding:var(--bizy-card-padding);display:flex;flex-direction:column;justify-content:space-between;row-gap:.3rem;background-color:var(--bizy-card-background-color);transition:transform .25s ease-in-out;box-shadow:var(--bizy-card-box-shadow)}.bizy-card:hover{transform:translateY(-1px);box-shadow:var(--bizy-card-hover-box-shadow)}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__content{display:none}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__header:not(:empty){height:100%!important}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__footer:not(:empty){height:100%!important}.bizy-card--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-card__content:not(:empty){display:flex;align-items:center;column-gap:.5rem;height:100%;width:100%;background-color:var(--bizy-card-content-background-color)}.bizy-card__header:has(>.bizy-card__header__start:empty):has(>.bizy-card__header__end:empty){display:none}.bizy-card__header:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.5rem;background-color:var(--bizy-card-header-background-color)}.bizy-card__header__start{justify-content:flex-start}.bizy-card__header__end{justify-content:flex-end}.bizy-card__slot{width:100%;display:flex;align-items:center;column-gap:.5rem;height:100%;overflow:hidden}.bizy-card__footer:has(>.bizy-card__footer__start:empty):has(>.bizy-card__footer__end:empty){display:none}.bizy-card__footer:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.5rem;background-color:var(--bizy-card-footer-background-color)}.bizy-card__footer__start{justify-content:flex-start}.bizy-card__footer__end{justify-content:flex-end}\n"] }]
|
|
1075
1049
|
}], propDecorators: { id: [{
|
|
1076
1050
|
type: Input
|
|
1077
1051
|
}], disabled: [{
|
|
@@ -3402,12 +3376,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
3402
3376
|
}] });
|
|
3403
3377
|
|
|
3404
3378
|
const EMPTY_CHART = [0];
|
|
3405
|
-
const MIN_CHART_SIZE = 350; // px;
|
|
3406
3379
|
class BizyPieChartComponent {
|
|
3407
|
-
elementRef;
|
|
3408
|
-
document;
|
|
3409
|
-
ref;
|
|
3410
|
-
renderer;
|
|
3380
|
+
#elementRef = inject(ElementRef);
|
|
3381
|
+
#document = inject(DOCUMENT);
|
|
3382
|
+
#ref = inject(ChangeDetectorRef);
|
|
3383
|
+
#renderer = inject(Renderer2);
|
|
3411
3384
|
resizeRef = null;
|
|
3412
3385
|
tooltip = true;
|
|
3413
3386
|
type = 'pie';
|
|
@@ -3417,27 +3390,14 @@ class BizyPieChartComponent {
|
|
|
3417
3390
|
onSelect = new EventEmitter();
|
|
3418
3391
|
onDownload = new EventEmitter();
|
|
3419
3392
|
#echarts = null;
|
|
3420
|
-
#mutationObserver = null;
|
|
3421
3393
|
#resizeObserver = null;
|
|
3422
3394
|
#subscription = new Subscription();
|
|
3423
3395
|
#chartContainer = null;
|
|
3424
3396
|
#afterViewInit = new BehaviorSubject(false);
|
|
3425
3397
|
#resize$ = new Subject();
|
|
3426
3398
|
#data = EMPTY_CHART;
|
|
3427
|
-
constructor(elementRef, document, ref, renderer) {
|
|
3428
|
-
this.elementRef = elementRef;
|
|
3429
|
-
this.document = document;
|
|
3430
|
-
this.ref = ref;
|
|
3431
|
-
this.renderer = renderer;
|
|
3432
|
-
}
|
|
3433
3399
|
ngAfterViewInit() {
|
|
3434
|
-
this.#
|
|
3435
|
-
if (this.elementRef && this.elementRef.nativeElement && (this.elementRef.nativeElement.offsetWidth || this.elementRef.nativeElement.offsetHeight)) {
|
|
3436
|
-
this.#afterViewInit.next(true);
|
|
3437
|
-
this.#mutationObserver.disconnect();
|
|
3438
|
-
}
|
|
3439
|
-
});
|
|
3440
|
-
this.#mutationObserver.observe(this.document.body, { childList: true, subtree: true });
|
|
3400
|
+
this.#afterViewInit.next(true);
|
|
3441
3401
|
}
|
|
3442
3402
|
set data(data) {
|
|
3443
3403
|
if (!data) {
|
|
@@ -3507,9 +3467,9 @@ class BizyPieChartComponent {
|
|
|
3507
3467
|
itemStyle,
|
|
3508
3468
|
label
|
|
3509
3469
|
}];
|
|
3510
|
-
const textColor = getComputedStyle(this
|
|
3511
|
-
const textBackgroundColor = getComputedStyle(this
|
|
3512
|
-
const borderColor = getComputedStyle(this
|
|
3470
|
+
const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
|
|
3471
|
+
const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
|
|
3472
|
+
const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
|
|
3513
3473
|
const toolbox = {
|
|
3514
3474
|
show: true,
|
|
3515
3475
|
feature: {
|
|
@@ -3520,12 +3480,12 @@ class BizyPieChartComponent {
|
|
|
3520
3480
|
onclick: () => {
|
|
3521
3481
|
setTimeout(() => {
|
|
3522
3482
|
html2canvas(this.#chartContainer).then(canvas => {
|
|
3523
|
-
var link =
|
|
3483
|
+
var link = this.#renderer.createElement('a');
|
|
3524
3484
|
link.href = canvas.toDataURL('image/png');
|
|
3525
3485
|
link.download = `${this.download.name}.png`;
|
|
3526
|
-
this
|
|
3486
|
+
this.#renderer.appendChild(this.#document.body, link);
|
|
3527
3487
|
link.click();
|
|
3528
|
-
this
|
|
3488
|
+
this.#renderer.removeChild(this.#document.body, link);
|
|
3529
3489
|
this.onDownload.emit();
|
|
3530
3490
|
});
|
|
3531
3491
|
}, 500);
|
|
@@ -3562,7 +3522,7 @@ class BizyPieChartComponent {
|
|
|
3562
3522
|
this.onSelect.emit(params.name);
|
|
3563
3523
|
});
|
|
3564
3524
|
this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
|
|
3565
|
-
const resizeRef = this.resizeRef ? this.resizeRef : this
|
|
3525
|
+
const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
|
|
3566
3526
|
this.#resizeObserver.observe(resizeRef);
|
|
3567
3527
|
this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
|
|
3568
3528
|
this.#deleteChartContainer();
|
|
@@ -3580,43 +3540,43 @@ class BizyPieChartComponent {
|
|
|
3580
3540
|
}));
|
|
3581
3541
|
}
|
|
3582
3542
|
#createChartContainer = () => {
|
|
3583
|
-
if (this.#chartContainer || !this
|
|
3543
|
+
if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
|
|
3584
3544
|
return;
|
|
3585
3545
|
}
|
|
3586
|
-
let elementWidth = this
|
|
3587
|
-
let elementHeight = this
|
|
3588
|
-
let minWidth =
|
|
3589
|
-
let minHeight =
|
|
3590
|
-
const
|
|
3591
|
-
const
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
}
|
|
3598
|
-
const width = Math.max(elementWidth, minWidth);
|
|
3599
|
-
const height = Math.max(elementHeight, minHeight);
|
|
3600
|
-
this.#chartContainer = this.renderer.createElement('div');
|
|
3601
|
-
this.renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
|
|
3602
|
-
this.renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
|
|
3603
|
-
this.renderer.appendChild(this.elementRef.nativeElement, this.#chartContainer);
|
|
3604
|
-
this.ref.detectChanges();
|
|
3546
|
+
let elementWidth = this.#elementRef.nativeElement.offsetWidth;
|
|
3547
|
+
let elementHeight = this.#elementRef.nativeElement.offsetHeight;
|
|
3548
|
+
let minWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-min-width') || 0;
|
|
3549
|
+
let minHeight = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-pie-chart-min-height') || 0;
|
|
3550
|
+
const width = elementWidth ? `${elementWidth}px` : minWidth;
|
|
3551
|
+
const height = elementHeight ? `${elementHeight}px` : minHeight;
|
|
3552
|
+
this.#chartContainer = this.#renderer.createElement('div');
|
|
3553
|
+
this.#renderer.setStyle(this.#chartContainer, 'width', width);
|
|
3554
|
+
this.#renderer.setStyle(this.#chartContainer, 'height', height);
|
|
3555
|
+
this.#renderer.appendChild(this.#elementRef.nativeElement, this.#chartContainer);
|
|
3556
|
+
this.#ref.detectChanges();
|
|
3605
3557
|
};
|
|
3606
3558
|
#deleteChartContainer = () => {
|
|
3607
|
-
if (!this.#chartContainer || !this
|
|
3559
|
+
if (!this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
|
|
3608
3560
|
return;
|
|
3609
3561
|
}
|
|
3610
3562
|
this.#echarts.clear();
|
|
3611
|
-
this
|
|
3563
|
+
this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
|
|
3612
3564
|
this.#chartContainer = null;
|
|
3613
|
-
this
|
|
3565
|
+
this.#ref.detectChanges();
|
|
3566
|
+
};
|
|
3567
|
+
#getClosestCssVariable = (element, cssVariable) => {
|
|
3568
|
+
while (element) {
|
|
3569
|
+
const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
|
|
3570
|
+
if (value) {
|
|
3571
|
+
return value;
|
|
3572
|
+
}
|
|
3573
|
+
element = element.parentElement;
|
|
3574
|
+
}
|
|
3575
|
+
const rootValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable).trim();
|
|
3576
|
+
return rootValue || null;
|
|
3614
3577
|
};
|
|
3615
3578
|
ngOnDestroy() {
|
|
3616
3579
|
this.#subscription.unsubscribe();
|
|
3617
|
-
if (this.#mutationObserver) {
|
|
3618
|
-
this.#mutationObserver.disconnect();
|
|
3619
|
-
}
|
|
3620
3580
|
if (this.#resizeObserver) {
|
|
3621
3581
|
this.#resizeObserver.disconnect();
|
|
3622
3582
|
}
|
|
@@ -3624,7 +3584,7 @@ class BizyPieChartComponent {
|
|
|
3624
3584
|
this.#echarts.clear();
|
|
3625
3585
|
}
|
|
3626
3586
|
}
|
|
3627
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [
|
|
3587
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3628
3588
|
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 });
|
|
3629
3589
|
}
|
|
3630
3590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, decorators: [{
|
|
@@ -3635,19 +3595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
3635
3595
|
imports: [CommonModule],
|
|
3636
3596
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
3637
3597
|
}]
|
|
3638
|
-
}],
|
|
3639
|
-
type: Inject,
|
|
3640
|
-
args: [ElementRef]
|
|
3641
|
-
}] }, { type: Document, decorators: [{
|
|
3642
|
-
type: Inject,
|
|
3643
|
-
args: [DOCUMENT]
|
|
3644
|
-
}] }, { type: i0.ChangeDetectorRef, decorators: [{
|
|
3645
|
-
type: Inject,
|
|
3646
|
-
args: [ChangeDetectorRef]
|
|
3647
|
-
}] }, { type: i0.Renderer2, decorators: [{
|
|
3648
|
-
type: Inject,
|
|
3649
|
-
args: [Renderer2]
|
|
3650
|
-
}] }], propDecorators: { resizeRef: [{
|
|
3598
|
+
}], propDecorators: { resizeRef: [{
|
|
3651
3599
|
type: Input
|
|
3652
3600
|
}], tooltip: [{
|
|
3653
3601
|
type: Input
|