@bizy/core 20.2.1 → 20.2.3
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 +90 -135
- package/fesm2022/bizy-core.mjs.map +1 -1
- package/index.d.ts +3 -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
|
|
@@ -3026,6 +3000,7 @@ class BizyGridComponent {
|
|
|
3026
3000
|
document;
|
|
3027
3001
|
renderer;
|
|
3028
3002
|
elementRef;
|
|
3003
|
+
virtualScroll;
|
|
3029
3004
|
content;
|
|
3030
3005
|
gridDirective;
|
|
3031
3006
|
resizeRef = null;
|
|
@@ -3126,6 +3101,9 @@ class BizyGridComponent {
|
|
|
3126
3101
|
trackById(index, item) {
|
|
3127
3102
|
return item?.id ?? index;
|
|
3128
3103
|
}
|
|
3104
|
+
scrollTo(index, behavior = 'smooth') {
|
|
3105
|
+
this.virtualScroll.scrollToIndex(index, behavior);
|
|
3106
|
+
}
|
|
3129
3107
|
ngOnDestroy() {
|
|
3130
3108
|
this.#subscription.unsubscribe();
|
|
3131
3109
|
if (this.#rowScrollingMutationObserver) {
|
|
@@ -3136,11 +3114,11 @@ class BizyGridComponent {
|
|
|
3136
3114
|
}
|
|
3137
3115
|
}
|
|
3138
3116
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyGridComponent, deps: [{ token: ChangeDetectorRef }, { token: DOCUMENT }, { token: Renderer2 }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyGridComponent, isStandalone: true, selector: "bizy-grid", inputs: { resizeRef: "resizeRef" }, queries: [{ propertyName: "gridDirective", first: true, predicate: BizyGridForDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["gridScrollingContent"], descendants: true }], ngImport: i0, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n <cdk-virtual-scroll-viewport\n class=\"bizy-grid__rows\"\n [itemSize]=\"rowHeight\"\n [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n <ng-content></ng-content>\n \n <ng-template #gridScrollingContent>\n <ng-template let-item
|
|
3117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyGridComponent, isStandalone: true, selector: "bizy-grid", inputs: { resizeRef: "resizeRef" }, queries: [{ propertyName: "gridDirective", first: true, predicate: BizyGridForDirective, descendants: true }], viewQueries: [{ propertyName: "virtualScroll", first: true, predicate: ["cdkVirtualScroll"], descendants: true }, { propertyName: "content", first: true, predicate: ["gridScrollingContent"], descendants: true }], ngImport: i0, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n <cdk-virtual-scroll-viewport\n #cdkVirtualScroll \n class=\"bizy-grid__rows\"\n [itemSize]=\"rowHeight\"\n [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n <ng-content></ng-content>\n \n <ng-template #gridScrollingContent>\n <ng-template \n let-item\n let-index=\"index\"\n let-first=\"first\"\n let-last=\"last\"\n let-even=\"even\"\n let-odd=\"odd\"\n cdkVirtualFor\n [cdkVirtualForOf]=\"itemRows\">\n <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n <ng-container *ngFor=\"let it of item; trackBy: trackById; let i = index\">\n <ng-template \n *ngTemplateOutlet=\"itemTemplate;\n context: { \n $implicit: it,\n index: index * itemsPerRow + i,\n rowIndex: index,\n rowFirst: first,\n rowLast: last,\n rowEven: even,\n rowOdd: odd\n }\"></ng-template>\n </ng-container>\n </bizy-grid-row>\n </ng-template>\n </ng-template>\n </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BizyGridRowComponent, selector: "bizy-grid-row", inputs: ["rowHeight", "itemsPerRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3140
3118
|
}
|
|
3141
3119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyGridComponent, decorators: [{
|
|
3142
3120
|
type: Component,
|
|
3143
|
-
args: [{ selector: 'bizy-grid', imports: [CommonModule, ScrollingModule, BizyGridRowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n <cdk-virtual-scroll-viewport\n class=\"bizy-grid__rows\"\n [itemSize]=\"rowHeight\"\n [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n <ng-content></ng-content>\n \n <ng-template #gridScrollingContent>\n <ng-template let-item
|
|
3121
|
+
args: [{ selector: 'bizy-grid', imports: [CommonModule, ScrollingModule, BizyGridRowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n <cdk-virtual-scroll-viewport\n #cdkVirtualScroll \n class=\"bizy-grid__rows\"\n [itemSize]=\"rowHeight\"\n [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n <ng-content></ng-content>\n \n <ng-template #gridScrollingContent>\n <ng-template \n let-item\n let-index=\"index\"\n let-first=\"first\"\n let-last=\"last\"\n let-even=\"even\"\n let-odd=\"odd\"\n cdkVirtualFor\n [cdkVirtualForOf]=\"itemRows\">\n <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n <ng-container *ngFor=\"let it of item; trackBy: trackById; let i = index\">\n <ng-template \n *ngTemplateOutlet=\"itemTemplate;\n context: { \n $implicit: it,\n index: index * itemsPerRow + i,\n rowIndex: index,\n rowFirst: first,\n rowLast: last,\n rowEven: even,\n rowOdd: odd\n }\"></ng-template>\n </ng-container>\n </bizy-grid-row>\n </ng-template>\n </ng-template>\n </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"] }]
|
|
3144
3122
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
|
|
3145
3123
|
type: Inject,
|
|
3146
3124
|
args: [ChangeDetectorRef]
|
|
@@ -3153,7 +3131,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
3153
3131
|
}] }, { type: i0.ElementRef, decorators: [{
|
|
3154
3132
|
type: Inject,
|
|
3155
3133
|
args: [ElementRef]
|
|
3156
|
-
}] }], propDecorators: {
|
|
3134
|
+
}] }], propDecorators: { virtualScroll: [{
|
|
3135
|
+
type: ViewChild,
|
|
3136
|
+
args: ['cdkVirtualScroll']
|
|
3137
|
+
}], content: [{
|
|
3157
3138
|
type: ViewChild,
|
|
3158
3139
|
args: ['gridScrollingContent']
|
|
3159
3140
|
}], gridDirective: [{
|
|
@@ -3395,12 +3376,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
3395
3376
|
}] });
|
|
3396
3377
|
|
|
3397
3378
|
const EMPTY_CHART = [0];
|
|
3398
|
-
const MIN_CHART_SIZE = 350; // px;
|
|
3399
3379
|
class BizyPieChartComponent {
|
|
3400
|
-
elementRef;
|
|
3401
|
-
document;
|
|
3402
|
-
ref;
|
|
3403
|
-
renderer;
|
|
3380
|
+
#elementRef = inject(ElementRef);
|
|
3381
|
+
#document = inject(DOCUMENT);
|
|
3382
|
+
#ref = inject(ChangeDetectorRef);
|
|
3383
|
+
#renderer = inject(Renderer2);
|
|
3404
3384
|
resizeRef = null;
|
|
3405
3385
|
tooltip = true;
|
|
3406
3386
|
type = 'pie';
|
|
@@ -3410,27 +3390,14 @@ class BizyPieChartComponent {
|
|
|
3410
3390
|
onSelect = new EventEmitter();
|
|
3411
3391
|
onDownload = new EventEmitter();
|
|
3412
3392
|
#echarts = null;
|
|
3413
|
-
#mutationObserver = null;
|
|
3414
3393
|
#resizeObserver = null;
|
|
3415
3394
|
#subscription = new Subscription();
|
|
3416
3395
|
#chartContainer = null;
|
|
3417
3396
|
#afterViewInit = new BehaviorSubject(false);
|
|
3418
3397
|
#resize$ = new Subject();
|
|
3419
3398
|
#data = EMPTY_CHART;
|
|
3420
|
-
constructor(elementRef, document, ref, renderer) {
|
|
3421
|
-
this.elementRef = elementRef;
|
|
3422
|
-
this.document = document;
|
|
3423
|
-
this.ref = ref;
|
|
3424
|
-
this.renderer = renderer;
|
|
3425
|
-
}
|
|
3426
3399
|
ngAfterViewInit() {
|
|
3427
|
-
this.#
|
|
3428
|
-
if (this.elementRef && this.elementRef.nativeElement && (this.elementRef.nativeElement.offsetWidth || this.elementRef.nativeElement.offsetHeight)) {
|
|
3429
|
-
this.#afterViewInit.next(true);
|
|
3430
|
-
this.#mutationObserver.disconnect();
|
|
3431
|
-
}
|
|
3432
|
-
});
|
|
3433
|
-
this.#mutationObserver.observe(this.document.body, { childList: true, subtree: true });
|
|
3400
|
+
this.#afterViewInit.next(true);
|
|
3434
3401
|
}
|
|
3435
3402
|
set data(data) {
|
|
3436
3403
|
if (!data) {
|
|
@@ -3500,9 +3467,9 @@ class BizyPieChartComponent {
|
|
|
3500
3467
|
itemStyle,
|
|
3501
3468
|
label
|
|
3502
3469
|
}];
|
|
3503
|
-
const textColor = getComputedStyle(this
|
|
3504
|
-
const textBackgroundColor = getComputedStyle(this
|
|
3505
|
-
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';
|
|
3506
3473
|
const toolbox = {
|
|
3507
3474
|
show: true,
|
|
3508
3475
|
feature: {
|
|
@@ -3513,12 +3480,12 @@ class BizyPieChartComponent {
|
|
|
3513
3480
|
onclick: () => {
|
|
3514
3481
|
setTimeout(() => {
|
|
3515
3482
|
html2canvas(this.#chartContainer).then(canvas => {
|
|
3516
|
-
var link =
|
|
3483
|
+
var link = this.#renderer.createElement('a');
|
|
3517
3484
|
link.href = canvas.toDataURL('image/png');
|
|
3518
3485
|
link.download = `${this.download.name}.png`;
|
|
3519
|
-
this
|
|
3486
|
+
this.#renderer.appendChild(this.#document.body, link);
|
|
3520
3487
|
link.click();
|
|
3521
|
-
this
|
|
3488
|
+
this.#renderer.removeChild(this.#document.body, link);
|
|
3522
3489
|
this.onDownload.emit();
|
|
3523
3490
|
});
|
|
3524
3491
|
}, 500);
|
|
@@ -3555,7 +3522,7 @@ class BizyPieChartComponent {
|
|
|
3555
3522
|
this.onSelect.emit(params.name);
|
|
3556
3523
|
});
|
|
3557
3524
|
this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
|
|
3558
|
-
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;
|
|
3559
3526
|
this.#resizeObserver.observe(resizeRef);
|
|
3560
3527
|
this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
|
|
3561
3528
|
this.#deleteChartContainer();
|
|
@@ -3573,43 +3540,43 @@ class BizyPieChartComponent {
|
|
|
3573
3540
|
}));
|
|
3574
3541
|
}
|
|
3575
3542
|
#createChartContainer = () => {
|
|
3576
|
-
if (this.#chartContainer || !this
|
|
3543
|
+
if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
|
|
3577
3544
|
return;
|
|
3578
3545
|
}
|
|
3579
|
-
let elementWidth = this
|
|
3580
|
-
let elementHeight = this
|
|
3581
|
-
let minWidth =
|
|
3582
|
-
let minHeight =
|
|
3583
|
-
const
|
|
3584
|
-
const
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
}
|
|
3591
|
-
const width = Math.max(elementWidth, minWidth);
|
|
3592
|
-
const height = Math.max(elementHeight, minHeight);
|
|
3593
|
-
this.#chartContainer = this.renderer.createElement('div');
|
|
3594
|
-
this.renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
|
|
3595
|
-
this.renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
|
|
3596
|
-
this.renderer.appendChild(this.elementRef.nativeElement, this.#chartContainer);
|
|
3597
|
-
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();
|
|
3598
3557
|
};
|
|
3599
3558
|
#deleteChartContainer = () => {
|
|
3600
|
-
if (!this.#chartContainer || !this
|
|
3559
|
+
if (!this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
|
|
3601
3560
|
return;
|
|
3602
3561
|
}
|
|
3603
3562
|
this.#echarts.clear();
|
|
3604
|
-
this
|
|
3563
|
+
this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
|
|
3605
3564
|
this.#chartContainer = null;
|
|
3606
|
-
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;
|
|
3607
3577
|
};
|
|
3608
3578
|
ngOnDestroy() {
|
|
3609
3579
|
this.#subscription.unsubscribe();
|
|
3610
|
-
if (this.#mutationObserver) {
|
|
3611
|
-
this.#mutationObserver.disconnect();
|
|
3612
|
-
}
|
|
3613
3580
|
if (this.#resizeObserver) {
|
|
3614
3581
|
this.#resizeObserver.disconnect();
|
|
3615
3582
|
}
|
|
@@ -3617,7 +3584,7 @@ class BizyPieChartComponent {
|
|
|
3617
3584
|
this.#echarts.clear();
|
|
3618
3585
|
}
|
|
3619
3586
|
}
|
|
3620
|
-
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 });
|
|
3621
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 });
|
|
3622
3589
|
}
|
|
3623
3590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, decorators: [{
|
|
@@ -3628,19 +3595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
3628
3595
|
imports: [CommonModule],
|
|
3629
3596
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
3630
3597
|
}]
|
|
3631
|
-
}],
|
|
3632
|
-
type: Inject,
|
|
3633
|
-
args: [ElementRef]
|
|
3634
|
-
}] }, { type: Document, decorators: [{
|
|
3635
|
-
type: Inject,
|
|
3636
|
-
args: [DOCUMENT]
|
|
3637
|
-
}] }, { type: i0.ChangeDetectorRef, decorators: [{
|
|
3638
|
-
type: Inject,
|
|
3639
|
-
args: [ChangeDetectorRef]
|
|
3640
|
-
}] }, { type: i0.Renderer2, decorators: [{
|
|
3641
|
-
type: Inject,
|
|
3642
|
-
args: [Renderer2]
|
|
3643
|
-
}] }], propDecorators: { resizeRef: [{
|
|
3598
|
+
}], propDecorators: { resizeRef: [{
|
|
3644
3599
|
type: Input
|
|
3645
3600
|
}], tooltip: [{
|
|
3646
3601
|
type: Input
|