@bizy/core 20.2.6 → 20.2.8
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 +137 -85
- package/fesm2022/bizy-core.mjs.map +1 -1
- package/index.d.ts +15 -5
- package/package.json +1 -1
- package/styles/variables.css +0 -12
package/fesm2022/bizy-core.mjs
CHANGED
|
@@ -313,13 +313,14 @@ 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;
|
|
316
317
|
const Y_AXIS_OFFSET = 80;
|
|
317
318
|
const GRID_BOTTOM = 30;
|
|
318
319
|
class BizyBarLineChartComponent {
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
320
|
+
elementRef;
|
|
321
|
+
document;
|
|
322
|
+
ref;
|
|
323
|
+
renderer;
|
|
323
324
|
resizeRef = null;
|
|
324
325
|
tooltip = true;
|
|
325
326
|
download = { hide: false, label: 'Descargar', name: 'Bizy' };
|
|
@@ -330,6 +331,7 @@ class BizyBarLineChartComponent {
|
|
|
330
331
|
onDownload = new EventEmitter();
|
|
331
332
|
onSelect = new EventEmitter();
|
|
332
333
|
#echarts = null;
|
|
334
|
+
#mutationObserver = null;
|
|
333
335
|
#resizeObserver = null;
|
|
334
336
|
#subscription = new Subscription();
|
|
335
337
|
#chartContainer = null;
|
|
@@ -340,8 +342,20 @@ class BizyBarLineChartComponent {
|
|
|
340
342
|
#leftYAxis = 0;
|
|
341
343
|
#chartStacks = [];
|
|
342
344
|
#chartNames = [];
|
|
345
|
+
constructor(elementRef, document, ref, renderer) {
|
|
346
|
+
this.elementRef = elementRef;
|
|
347
|
+
this.document = document;
|
|
348
|
+
this.ref = ref;
|
|
349
|
+
this.renderer = renderer;
|
|
350
|
+
}
|
|
343
351
|
ngAfterViewInit() {
|
|
344
|
-
this.#
|
|
352
|
+
this.#mutationObserver = new MutationObserver(() => {
|
|
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 });
|
|
345
359
|
}
|
|
346
360
|
set data(data) {
|
|
347
361
|
if (!data) {
|
|
@@ -488,9 +502,9 @@ class BizyBarLineChartComponent {
|
|
|
488
502
|
bottom: 0,
|
|
489
503
|
data: legends
|
|
490
504
|
};
|
|
491
|
-
const textColor = getComputedStyle(this
|
|
492
|
-
const textBackgroundColor = getComputedStyle(this
|
|
493
|
-
const borderColor = getComputedStyle(this
|
|
505
|
+
const textColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
|
|
506
|
+
const textBackgroundColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
|
|
507
|
+
const borderColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
|
|
494
508
|
const toolbox = {
|
|
495
509
|
show: true,
|
|
496
510
|
feature: {
|
|
@@ -524,12 +538,12 @@ class BizyBarLineChartComponent {
|
|
|
524
538
|
showAllLegends(this.#echarts);
|
|
525
539
|
setTimeout(() => {
|
|
526
540
|
html2canvas(this.#chartContainer).then(canvas => {
|
|
527
|
-
var link =
|
|
541
|
+
var link = document.createElement('a');
|
|
528
542
|
link.href = canvas.toDataURL('image/png');
|
|
529
543
|
link.download = `${this.download.name}.png`;
|
|
530
|
-
this
|
|
544
|
+
this.renderer.appendChild(this.document.body, link);
|
|
531
545
|
link.click();
|
|
532
|
-
this
|
|
546
|
+
this.renderer.removeChild(this.document.body, link);
|
|
533
547
|
restoreLegendType(this.#echarts);
|
|
534
548
|
this.onDownload.emit();
|
|
535
549
|
});
|
|
@@ -563,7 +577,7 @@ class BizyBarLineChartComponent {
|
|
|
563
577
|
this.onSelect.emit(params.name);
|
|
564
578
|
});
|
|
565
579
|
this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
|
|
566
|
-
const resizeRef = this.resizeRef ? this.resizeRef : this
|
|
580
|
+
const resizeRef = this.resizeRef ? this.resizeRef : this.renderer.parentNode(this.elementRef.nativeElement) ? this.renderer.parentNode(this.elementRef.nativeElement) : this.elementRef.nativeElement;
|
|
567
581
|
this.#resizeObserver.observe(resizeRef);
|
|
568
582
|
this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
|
|
569
583
|
this.#deleteChartContainer();
|
|
@@ -581,43 +595,43 @@ class BizyBarLineChartComponent {
|
|
|
581
595
|
}));
|
|
582
596
|
}
|
|
583
597
|
#createChartContainer = () => {
|
|
584
|
-
if (this.#chartContainer || !this
|
|
598
|
+
if (this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
|
|
585
599
|
return;
|
|
586
600
|
}
|
|
587
|
-
let elementWidth = this
|
|
588
|
-
let elementHeight = this
|
|
589
|
-
let minWidth =
|
|
590
|
-
let minHeight =
|
|
591
|
-
const
|
|
592
|
-
const
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
601
|
+
let elementWidth = this.elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE$1;
|
|
602
|
+
let elementHeight = this.elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE$1;
|
|
603
|
+
let minWidth = MIN_CHART_SIZE$1;
|
|
604
|
+
let minHeight = MIN_CHART_SIZE$1;
|
|
605
|
+
const barChartMinWidth = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-width');
|
|
606
|
+
const barChartMinHeight = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-height');
|
|
607
|
+
if (Number(barChartMinWidth)) {
|
|
608
|
+
minWidth = Number(barChartMinWidth);
|
|
609
|
+
}
|
|
610
|
+
if (Number(barChartMinHeight)) {
|
|
611
|
+
minHeight = Number(barChartMinHeight);
|
|
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();
|
|
598
620
|
};
|
|
599
621
|
#deleteChartContainer = () => {
|
|
600
|
-
if (!this.#chartContainer || !this
|
|
622
|
+
if (!this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
|
|
601
623
|
return;
|
|
602
624
|
}
|
|
603
625
|
this.#echarts.clear();
|
|
604
|
-
this
|
|
626
|
+
this.renderer.removeChild(this.elementRef.nativeElement, this.#chartContainer);
|
|
605
627
|
this.#chartContainer = null;
|
|
606
|
-
this
|
|
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;
|
|
628
|
+
this.ref.detectChanges();
|
|
618
629
|
};
|
|
619
630
|
ngOnDestroy() {
|
|
620
631
|
this.#subscription.unsubscribe();
|
|
632
|
+
if (this.#mutationObserver) {
|
|
633
|
+
this.#mutationObserver.disconnect();
|
|
634
|
+
}
|
|
621
635
|
if (this.#resizeObserver) {
|
|
622
636
|
this.#resizeObserver.disconnect();
|
|
623
637
|
}
|
|
@@ -625,7 +639,7 @@ class BizyBarLineChartComponent {
|
|
|
625
639
|
this.#echarts.clear();
|
|
626
640
|
}
|
|
627
641
|
}
|
|
628
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
642
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, deps: [{ token: ElementRef }, { token: DOCUMENT }, { token: ChangeDetectorRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
629
643
|
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 });
|
|
630
644
|
}
|
|
631
645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, decorators: [{
|
|
@@ -636,7 +650,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
636
650
|
imports: [CommonModule],
|
|
637
651
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
638
652
|
}]
|
|
639
|
-
}],
|
|
653
|
+
}], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
|
|
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: [{
|
|
640
666
|
type: Input
|
|
641
667
|
}], tooltip: [{
|
|
642
668
|
type: Input
|
|
@@ -1041,11 +1067,11 @@ class BizyCardComponent {
|
|
|
1041
1067
|
this.onSelect.emit(event);
|
|
1042
1068
|
}
|
|
1043
1069
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
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:100%;width:100%;cursor:var(--bizy-card-cursor);border-top:var(--bizy-card-border-top, var(--bizy-card-border, none));border-right:var(--bizy-card-border-right, var(--bizy-card-border, none));border-bottom:var(--bizy-card-border-bottom, var(--bizy-card-border, none));border-left:var(--bizy-card-border-left, var(--bizy-card-border, none));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 });
|
|
1045
1071
|
}
|
|
1046
1072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyCardComponent, decorators: [{
|
|
1047
1073
|
type: Component,
|
|
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
|
|
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:100%;width:100%;cursor:var(--bizy-card-cursor);border-top:var(--bizy-card-border-top, var(--bizy-card-border, none));border-right:var(--bizy-card-border-right, var(--bizy-card-border, none));border-bottom:var(--bizy-card-border-bottom, var(--bizy-card-border, none));border-left:var(--bizy-card-border-left, var(--bizy-card-border, none));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"] }]
|
|
1049
1075
|
}], propDecorators: { id: [{
|
|
1050
1076
|
type: Input
|
|
1051
1077
|
}], disabled: [{
|
|
@@ -3376,11 +3402,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
3376
3402
|
}] });
|
|
3377
3403
|
|
|
3378
3404
|
const EMPTY_CHART = [0];
|
|
3405
|
+
const MIN_CHART_SIZE = 350; // px;
|
|
3379
3406
|
class BizyPieChartComponent {
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3407
|
+
elementRef;
|
|
3408
|
+
document;
|
|
3409
|
+
ref;
|
|
3410
|
+
renderer;
|
|
3384
3411
|
resizeRef = null;
|
|
3385
3412
|
tooltip = true;
|
|
3386
3413
|
type = 'pie';
|
|
@@ -3390,14 +3417,27 @@ class BizyPieChartComponent {
|
|
|
3390
3417
|
onSelect = new EventEmitter();
|
|
3391
3418
|
onDownload = new EventEmitter();
|
|
3392
3419
|
#echarts = null;
|
|
3420
|
+
#mutationObserver = null;
|
|
3393
3421
|
#resizeObserver = null;
|
|
3394
3422
|
#subscription = new Subscription();
|
|
3395
3423
|
#chartContainer = null;
|
|
3396
3424
|
#afterViewInit = new BehaviorSubject(false);
|
|
3397
3425
|
#resize$ = new Subject();
|
|
3398
3426
|
#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
|
+
}
|
|
3399
3433
|
ngAfterViewInit() {
|
|
3400
|
-
this.#
|
|
3434
|
+
this.#mutationObserver = new MutationObserver(() => {
|
|
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 });
|
|
3401
3441
|
}
|
|
3402
3442
|
set data(data) {
|
|
3403
3443
|
if (!data) {
|
|
@@ -3467,9 +3507,9 @@ class BizyPieChartComponent {
|
|
|
3467
3507
|
itemStyle,
|
|
3468
3508
|
label
|
|
3469
3509
|
}];
|
|
3470
|
-
const textColor = getComputedStyle(this
|
|
3471
|
-
const textBackgroundColor = getComputedStyle(this
|
|
3472
|
-
const borderColor = getComputedStyle(this
|
|
3510
|
+
const textColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
|
|
3511
|
+
const textBackgroundColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
|
|
3512
|
+
const borderColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
|
|
3473
3513
|
const toolbox = {
|
|
3474
3514
|
show: true,
|
|
3475
3515
|
feature: {
|
|
@@ -3480,12 +3520,12 @@ class BizyPieChartComponent {
|
|
|
3480
3520
|
onclick: () => {
|
|
3481
3521
|
setTimeout(() => {
|
|
3482
3522
|
html2canvas(this.#chartContainer).then(canvas => {
|
|
3483
|
-
var link =
|
|
3523
|
+
var link = document.createElement('a');
|
|
3484
3524
|
link.href = canvas.toDataURL('image/png');
|
|
3485
3525
|
link.download = `${this.download.name}.png`;
|
|
3486
|
-
this
|
|
3526
|
+
this.renderer.appendChild(this.document.body, link);
|
|
3487
3527
|
link.click();
|
|
3488
|
-
this
|
|
3528
|
+
this.renderer.removeChild(this.document.body, link);
|
|
3489
3529
|
this.onDownload.emit();
|
|
3490
3530
|
});
|
|
3491
3531
|
}, 500);
|
|
@@ -3522,7 +3562,7 @@ class BizyPieChartComponent {
|
|
|
3522
3562
|
this.onSelect.emit(params.name);
|
|
3523
3563
|
});
|
|
3524
3564
|
this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
|
|
3525
|
-
const resizeRef = this.resizeRef ? this.resizeRef : this
|
|
3565
|
+
const resizeRef = this.resizeRef ? this.resizeRef : this.renderer.parentNode(this.elementRef.nativeElement) ? this.renderer.parentNode(this.elementRef.nativeElement) : this.elementRef.nativeElement;
|
|
3526
3566
|
this.#resizeObserver.observe(resizeRef);
|
|
3527
3567
|
this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
|
|
3528
3568
|
this.#deleteChartContainer();
|
|
@@ -3540,43 +3580,43 @@ class BizyPieChartComponent {
|
|
|
3540
3580
|
}));
|
|
3541
3581
|
}
|
|
3542
3582
|
#createChartContainer = () => {
|
|
3543
|
-
if (this.#chartContainer || !this
|
|
3583
|
+
if (this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
|
|
3544
3584
|
return;
|
|
3545
3585
|
}
|
|
3546
|
-
let elementWidth = this
|
|
3547
|
-
let elementHeight = this
|
|
3548
|
-
let minWidth =
|
|
3549
|
-
let minHeight =
|
|
3550
|
-
const
|
|
3551
|
-
const
|
|
3552
|
-
|
|
3553
|
-
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3586
|
+
let elementWidth = this.elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE;
|
|
3587
|
+
let elementHeight = this.elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE;
|
|
3588
|
+
let minWidth = MIN_CHART_SIZE;
|
|
3589
|
+
let minHeight = MIN_CHART_SIZE;
|
|
3590
|
+
const chartMinWidth = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-width');
|
|
3591
|
+
const pieChartMinHeight = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-height');
|
|
3592
|
+
if (Number(chartMinWidth)) {
|
|
3593
|
+
minWidth = Number(chartMinWidth);
|
|
3594
|
+
}
|
|
3595
|
+
if (Number(pieChartMinHeight)) {
|
|
3596
|
+
minHeight = Number(pieChartMinHeight);
|
|
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();
|
|
3557
3605
|
};
|
|
3558
3606
|
#deleteChartContainer = () => {
|
|
3559
|
-
if (!this.#chartContainer || !this
|
|
3607
|
+
if (!this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
|
|
3560
3608
|
return;
|
|
3561
3609
|
}
|
|
3562
3610
|
this.#echarts.clear();
|
|
3563
|
-
this
|
|
3611
|
+
this.renderer.removeChild(this.elementRef.nativeElement, this.#chartContainer);
|
|
3564
3612
|
this.#chartContainer = null;
|
|
3565
|
-
this
|
|
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;
|
|
3613
|
+
this.ref.detectChanges();
|
|
3577
3614
|
};
|
|
3578
3615
|
ngOnDestroy() {
|
|
3579
3616
|
this.#subscription.unsubscribe();
|
|
3617
|
+
if (this.#mutationObserver) {
|
|
3618
|
+
this.#mutationObserver.disconnect();
|
|
3619
|
+
}
|
|
3580
3620
|
if (this.#resizeObserver) {
|
|
3581
3621
|
this.#resizeObserver.disconnect();
|
|
3582
3622
|
}
|
|
@@ -3584,7 +3624,7 @@ class BizyPieChartComponent {
|
|
|
3584
3624
|
this.#echarts.clear();
|
|
3585
3625
|
}
|
|
3586
3626
|
}
|
|
3587
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [{ token: ElementRef }, { token: DOCUMENT }, { token: ChangeDetectorRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
3588
3628
|
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 });
|
|
3589
3629
|
}
|
|
3590
3630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, decorators: [{
|
|
@@ -3595,7 +3635,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
3595
3635
|
imports: [CommonModule],
|
|
3596
3636
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
3597
3637
|
}]
|
|
3598
|
-
}],
|
|
3638
|
+
}], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
|
|
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: [{
|
|
3599
3651
|
type: Input
|
|
3600
3652
|
}], tooltip: [{
|
|
3601
3653
|
type: Input
|
|
@@ -6730,16 +6782,16 @@ class BizyToastService {
|
|
|
6730
6782
|
this.#document.documentElement.style.setProperty('--bizy-toast-duration', `${data.duration}ms`);
|
|
6731
6783
|
}
|
|
6732
6784
|
}
|
|
6733
|
-
debug(data) {
|
|
6785
|
+
debug(data = this.defaultDebugTitle) {
|
|
6734
6786
|
this.#open({ type: TOAST.DEBUG, data });
|
|
6735
6787
|
}
|
|
6736
|
-
info(data) {
|
|
6788
|
+
info(data = this.defaultInfoTitle) {
|
|
6737
6789
|
this.#open({ type: TOAST.INFO, data });
|
|
6738
6790
|
}
|
|
6739
6791
|
success(data = this.defaultSuccessTitle) {
|
|
6740
6792
|
this.#open({ type: TOAST.SUCCESS, data });
|
|
6741
6793
|
}
|
|
6742
|
-
warning(data) {
|
|
6794
|
+
warning(data = this.defaultWarningTitle) {
|
|
6743
6795
|
this.#open({ type: TOAST.WARNING, data });
|
|
6744
6796
|
}
|
|
6745
6797
|
danger(data = this.defaultDangerTitle) {
|