@porscheinformatik/clr-addons 21.4.0 → 21.5.1
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/porscheinformatik-clr-addons-charts.mjs +413 -59
- package/fesm2022/porscheinformatik-clr-addons-charts.mjs.map +1 -1
- package/fesm2022/porscheinformatik-clr-addons.mjs +515 -504
- package/fesm2022/porscheinformatik-clr-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/clr-addons-phs.css +1 -0
- package/styles/clr-addons-phs.css.map +1 -1
- package/styles/clr-addons-phs.min.css +1 -1
- package/styles/clr-addons-phs.min.css.map +1 -1
- package/types/porscheinformatik-clr-addons-charts.d.ts +85 -5
- package/types/porscheinformatik-clr-addons.d.ts +4 -0
|
@@ -142,10 +142,10 @@ class ChartBase {
|
|
|
142
142
|
this.tooltipPosition.set(undefined);
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
146
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.
|
|
145
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
146
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.20", type: ChartBase, isStandalone: true, inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
147
147
|
}
|
|
148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartBase, decorators: [{
|
|
149
149
|
type: Directive
|
|
150
150
|
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], chartRef: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
|
|
151
151
|
|
|
@@ -154,8 +154,8 @@ class ChartAlertOverlayComponent {
|
|
|
154
154
|
this.alertMessage = input.required(...(ngDevMode ? [{ debugName: "alertMessage" }] : /* istanbul ignore next */ []));
|
|
155
155
|
this.alertType = input('info', ...(ngDevMode ? [{ debugName: "alertType" }] : /* istanbul ignore next */ []));
|
|
156
156
|
}
|
|
157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
157
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartAlertOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.20", type: ChartAlertOverlayComponent, isStandalone: true, selector: "cng-chart-alert-overlay", inputs: { alertMessage: { classPropertyName: "alertMessage", publicName: "alertMessage", isSignal: true, isRequired: true, transformFunction: null }, alertType: { classPropertyName: "alertType", publicName: "alertType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
159
159
|
<clr-alert
|
|
160
160
|
data-testid="chart-alert-overlay"
|
|
161
161
|
[clrAlertSizeSmall]="true"
|
|
@@ -171,7 +171,7 @@ class ChartAlertOverlayComponent {
|
|
|
171
171
|
<div class="overlay" data-testid="chart-alert-overlay-gradient"></div>
|
|
172
172
|
`, isInline: true, styles: [":host{position:absolute;top:0;left:0;right:0;pointer-events:none;z-index:1}:host clr-alert{pointer-events:auto}:host clr-alert ::ng-deep .alert{margin-bottom:0}:host .overlay{height:2rem;background:linear-gradient(to bottom,#fff,#fff0)}\n"], dependencies: [{ kind: "ngmodule", type: ClrAlertModule }, { kind: "component", type: i1.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i1.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i1.ClrAlertText, selector: ".alert-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
173
173
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartAlertOverlayComponent, decorators: [{
|
|
175
175
|
type: Component,
|
|
176
176
|
args: [{ selector: 'cng-chart-alert-overlay', template: `
|
|
177
177
|
<clr-alert
|
|
@@ -384,10 +384,10 @@ class ChartExportService {
|
|
|
384
384
|
a.click();
|
|
385
385
|
setTimeout(() => URL.revokeObjectURL(url), 100);
|
|
386
386
|
}
|
|
387
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
388
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
387
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
388
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartExportService, providedIn: 'root' }); }
|
|
389
389
|
}
|
|
390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartExportService, decorators: [{
|
|
391
391
|
type: Injectable,
|
|
392
392
|
args: [{ providedIn: 'root' }]
|
|
393
393
|
}] });
|
|
@@ -416,8 +416,8 @@ class ChartExportButtonComponent {
|
|
|
416
416
|
break;
|
|
417
417
|
}
|
|
418
418
|
}
|
|
419
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
420
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
419
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
420
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.20", type: ChartExportButtonComponent, isStandalone: true, selector: "cng-chart-export-button", inputs: { svgRef: { classPropertyName: "svgRef", publicName: "svgRef", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, buttonTitle: { classPropertyName: "buttonTitle", publicName: "buttonTitle", isSignal: true, isRequired: false, transformFunction: null }, legendItems: { classPropertyName: "legendItems", publicName: "legendItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
421
421
|
<clr-dropdown data-testid="chart-export-dropdown">
|
|
422
422
|
<button
|
|
423
423
|
class="btn btn-sm btn-icon btn-link export-trigger"
|
|
@@ -435,7 +435,7 @@ class ChartExportButtonComponent {
|
|
|
435
435
|
</clr-dropdown>
|
|
436
436
|
`, isInline: true, styles: [":host{position:absolute;top:15px;right:15px;z-index:10;opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: ClrDropdownModule }, { kind: "component", type: i1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i3.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
437
437
|
}
|
|
438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
|
|
439
439
|
type: Component,
|
|
440
440
|
args: [{ selector: 'cng-chart-export-button', template: `
|
|
441
441
|
<clr-dropdown data-testid="chart-export-dropdown">
|
|
@@ -461,8 +461,8 @@ class ChartLegendComponent {
|
|
|
461
461
|
this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
462
462
|
this.toChartColor = toChartColor;
|
|
463
463
|
}
|
|
464
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
465
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
464
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
465
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ChartLegendComponent, isStandalone: true, selector: "cng-chart-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
466
466
|
<div class="chart-legend" data-testid="chart-legend">
|
|
467
467
|
@for (item of items(); track item.label) {
|
|
468
468
|
<div class="legend-item" [attr.data-testid]="'chart-legend-item-' + item.label">
|
|
@@ -473,7 +473,7 @@ class ChartLegendComponent {
|
|
|
473
473
|
</div>
|
|
474
474
|
`, isInline: true, styles: [":host{display:block}.chart-legend{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 0 .25rem;font-size:11px;color:var(--cds-global-color-construction-400, #666)}.legend-item{display:flex;align-items:center;gap:.35rem}.legend-color-square{width:10px;height:10px;border-radius:2px;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
475
475
|
}
|
|
476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartLegendComponent, decorators: [{
|
|
477
477
|
type: Component,
|
|
478
478
|
args: [{ selector: 'cng-chart-legend', template: `
|
|
479
479
|
<div class="chart-legend" data-testid="chart-legend">
|
|
@@ -493,10 +493,10 @@ class ChartSkeletonComponent {
|
|
|
493
493
|
this.orientation = input.required(...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
494
494
|
this.animationStyle = computed(() => (this.skeletonType() === 'loading' ? 'pulse' : undefined), ...(ngDevMode ? [{ debugName: "animationStyle" }] : /* istanbul ignore next */ []));
|
|
495
495
|
}
|
|
496
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
497
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
496
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
497
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ChartSkeletonComponent, isStandalone: true, selector: "cng-bar-chart-skeleton", inputs: { skeletonType: { classPropertyName: "skeletonType", publicName: "skeletonType", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"chart-skeleton\"\n data-testid=\"chart-skeleton\"\n [class.placeholder-skeleton]=\"skeletonType() === 'placeholder'\"\n>\n <div\n class=\"skeleton-bars\"\n data-testid=\"chart-skeleton-bars\"\n [class.horizontal]=\"orientation() === 'horizontal'\"\n [class.vertical]=\"orientation() === 'vertical'\"\n >\n @for (_item of [1, 2, 3, 4, 5, 6]; track $index) {\n <div class=\"skeleton-bar bar-{{ $index + 1 }}\" [attr.data-testid]=\"'chart-skeleton-bar-' + ($index + 1)\">\n <ngx-skeleton-loader\n [appearance]=\"'circle'\"\n [count]=\"1\"\n [animation]=\"animationStyle()\"\n [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': 'var(--clr-base-border-radius-xxs)',\n }\"\n />\n </div>\n }\n </div>\n</div>\n", styles: [".chart-skeleton{width:100%;height:100%}.placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}.skeleton-bars{display:flex;gap:var(--clr-base-gap-l);width:100%;height:100%;padding:var(--cds-global-layout-space-xs) var(--cds-global-layout-space-xl)}.skeleton-bars.vertical{flex-direction:row;align-items:flex-end;justify-content:center}.skeleton-bars.vertical .skeleton-bar{width:var(--cds-global-layout-space-md)}.skeleton-bars.vertical .skeleton-bar.bar-1{height:60%}.skeleton-bars.vertical .skeleton-bar.bar-2{height:95%}.skeleton-bars.vertical .skeleton-bar.bar-3{height:40%}.skeleton-bars.vertical .skeleton-bar.bar-4{height:75%}.skeleton-bars.vertical .skeleton-bar.bar-5{height:50%}.skeleton-bars.vertical .skeleton-bar.bar-6{height:25%}.skeleton-bars.horizontal{flex-direction:column;justify-content:center}.skeleton-bars.horizontal .skeleton-bar{height:var(--cds-global-layout-space-md)}.skeleton-bars.horizontal .skeleton-bar.bar-1{width:60%}.skeleton-bars.horizontal .skeleton-bar.bar-2{width:95%}.skeleton-bars.horizontal .skeleton-bar.bar-3{width:40%}.skeleton-bars.horizontal .skeleton-bar.bar-4{width:75%}.skeleton-bars.horizontal .skeleton-bar.bar-5{width:50%}.skeleton-bars.horizontal .skeleton-bar.bar-6{width:25%}\n"], dependencies: [{ kind: "component", type: NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme", "size", "measureUnit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
498
498
|
}
|
|
499
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartSkeletonComponent, decorators: [{
|
|
500
500
|
type: Component,
|
|
501
501
|
args: [{ selector: 'cng-bar-chart-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxSkeletonLoaderComponent], template: "<div\n class=\"chart-skeleton\"\n data-testid=\"chart-skeleton\"\n [class.placeholder-skeleton]=\"skeletonType() === 'placeholder'\"\n>\n <div\n class=\"skeleton-bars\"\n data-testid=\"chart-skeleton-bars\"\n [class.horizontal]=\"orientation() === 'horizontal'\"\n [class.vertical]=\"orientation() === 'vertical'\"\n >\n @for (_item of [1, 2, 3, 4, 5, 6]; track $index) {\n <div class=\"skeleton-bar bar-{{ $index + 1 }}\" [attr.data-testid]=\"'chart-skeleton-bar-' + ($index + 1)\">\n <ngx-skeleton-loader\n [appearance]=\"'circle'\"\n [count]=\"1\"\n [animation]=\"animationStyle()\"\n [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': 'var(--clr-base-border-radius-xxs)',\n }\"\n />\n </div>\n }\n </div>\n</div>\n", styles: [".chart-skeleton{width:100%;height:100%}.placeholder-skeleton ::ng-deep .skeleton-loader{cursor:default}.skeleton-bars{display:flex;gap:var(--clr-base-gap-l);width:100%;height:100%;padding:var(--cds-global-layout-space-xs) var(--cds-global-layout-space-xl)}.skeleton-bars.vertical{flex-direction:row;align-items:flex-end;justify-content:center}.skeleton-bars.vertical .skeleton-bar{width:var(--cds-global-layout-space-md)}.skeleton-bars.vertical .skeleton-bar.bar-1{height:60%}.skeleton-bars.vertical .skeleton-bar.bar-2{height:95%}.skeleton-bars.vertical .skeleton-bar.bar-3{height:40%}.skeleton-bars.vertical .skeleton-bar.bar-4{height:75%}.skeleton-bars.vertical .skeleton-bar.bar-5{height:50%}.skeleton-bars.vertical .skeleton-bar.bar-6{height:25%}.skeleton-bars.horizontal{flex-direction:column;justify-content:center}.skeleton-bars.horizontal .skeleton-bar{height:var(--cds-global-layout-space-md)}.skeleton-bars.horizontal .skeleton-bar.bar-1{width:60%}.skeleton-bars.horizontal .skeleton-bar.bar-2{width:95%}.skeleton-bars.horizontal .skeleton-bar.bar-3{width:40%}.skeleton-bars.horizontal .skeleton-bar.bar-4{width:75%}.skeleton-bars.horizontal .skeleton-bar.bar-5{width:50%}.skeleton-bars.horizontal .skeleton-bar.bar-6{width:25%}\n"] }]
|
|
502
502
|
}], propDecorators: { skeletonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonType", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }] } });
|
|
@@ -511,10 +511,10 @@ class ChartTooltipComponent {
|
|
|
511
511
|
this.tooltipHeaderClicked = output();
|
|
512
512
|
this.toChartColor = toChartColor;
|
|
513
513
|
}
|
|
514
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
515
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
514
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
515
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ChartTooltipComponent, isStandalone: true, selector: "cng-chart-tooltip", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, squareColor: { classPropertyName: "squareColor", publicName: "squareColor", isSignal: true, isRequired: true, transformFunction: null }, tooltipClickable: { classPropertyName: "tooltipClickable", publicName: "tooltipClickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tooltipClosed: "tooltipClosed", tooltipHeaderClicked: "tooltipHeaderClicked" }, ngImport: i0, template: "<div\n class=\"tooltip-container\"\n data-testid=\"chart-tooltip\"\n [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"tooltipPosition().x\"\n [style.top.px]=\"tooltipPosition().y\"\n>\n <div class=\"tooltip-header\" data-testid=\"chart-tooltip-header\">\n <div class=\"color-label-wrapper\">\n @if (squareColor()) {\n <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n }\n <h5\n data-testid=\"chart-tooltip-title\"\n [class.has-more-info]=\"tooltipClickable()\"\n (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n >\n <ng-content select=\"cng-title\" />\n </h5>\n </div>\n <cds-icon\n shape=\"times\"\n class=\"tooltip-close-btn\"\n data-testid=\"chart-tooltip-close\"\n (click)=\"$event.stopPropagation(); tooltipClosed.emit()\"\n />\n </div>\n <div class=\"tooltip-content\" data-testid=\"chart-tooltip-content\">\n <ng-content />\n </div>\n <hr />\n <div class=\"tooltip-footer\" data-testid=\"chart-tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--cds-global-color-gray-0, #fff);border:1px solid var(--cds-global-color-gray-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--cds-global-color-gray-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--cds-global-color-gray-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"], dependencies: [{ kind: "component", type: ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
516
516
|
}
|
|
517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartTooltipComponent, decorators: [{
|
|
518
518
|
type: Component,
|
|
519
519
|
args: [{ selector: 'cng-chart-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ClrIcon], template: "<div\n class=\"tooltip-container\"\n data-testid=\"chart-tooltip\"\n [class.orientation-bottom]=\"tooltipOrientation() === 'bottom'\"\n (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"tooltipPosition().x\"\n [style.top.px]=\"tooltipPosition().y\"\n>\n <div class=\"tooltip-header\" data-testid=\"chart-tooltip-header\">\n <div class=\"color-label-wrapper\">\n @if (squareColor()) {\n <div class=\"color-square\" [style.background-color]=\"toChartColor(squareColor())\"></div>\n }\n <h5\n data-testid=\"chart-tooltip-title\"\n [class.has-more-info]=\"tooltipClickable()\"\n (click)=\"$event.stopPropagation(); tooltipClickable() && tooltipHeaderClicked.emit()\"\n >\n <ng-content select=\"cng-title\" />\n </h5>\n </div>\n <cds-icon\n shape=\"times\"\n class=\"tooltip-close-btn\"\n data-testid=\"chart-tooltip-close\"\n (click)=\"$event.stopPropagation(); tooltipClosed.emit()\"\n />\n </div>\n <div class=\"tooltip-content\" data-testid=\"chart-tooltip-content\">\n <ng-content />\n </div>\n <hr />\n <div class=\"tooltip-footer\" data-testid=\"chart-tooltip-footer\"><ng-content select=\"cng-footer\" /></div>\n</div>\n", styles: [".tooltip-container{position:absolute;background:var(--cds-global-color-gray-0, #fff);border:1px solid var(--cds-global-color-gray-400, #ccc);border-radius:4px;box-shadow:0 2px 8px #00000026;padding:12px 16px;z-index:1000;min-width:150px;transform:translate(-50%,-100%) translateY(-10px)}.tooltip-container.orientation-bottom{transform:translate(-50%) translateY(10px)}.tooltip-header{display:flex;flex-direction:row;justify-content:space-between;gap:8px}.tooltip-header h5{margin:0;font-size:14px;font-weight:600;color:var(--cds-global-color-gray-1000, #000);flex-grow:1;max-width:200px}.tooltip-close-btn{cursor:pointer;color:var(--clr-close-color)}.tooltip-close-btn:hover,.tooltip-close-btn:focus{color:var(--clr-close-color-hover)}.color-label-wrapper{display:flex;flex-direction:row;gap:8px}.tooltip-content{font-size:12px;color:var(--cds-global-color-gray-700, #565656)}hr:has(+.tooltip-footer:empty){display:none}hr{margin:6px -16px}\n"] }]
|
|
520
520
|
}], propDecorators: { tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], squareColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "squareColor", required: true }] }], tooltipClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipClickable", required: false }] }], tooltipClosed: [{ type: i0.Output, args: ["tooltipClosed"] }], tooltipHeaderClicked: [{ type: i0.Output, args: ["tooltipHeaderClicked"] }] } });
|
|
@@ -530,10 +530,10 @@ class OutsideClickDirective {
|
|
|
530
530
|
const listener = this.renderer.listen('document', 'click', () => this.outsideClick.emit());
|
|
531
531
|
this.destroyRef.onDestroy(listener);
|
|
532
532
|
}
|
|
533
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
534
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
533
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: OutsideClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
534
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: OutsideClickDirective, isStandalone: true, selector: "[cngOutsideClick]", outputs: { outsideClick: "cngOutsideClick" }, ngImport: i0 }); }
|
|
535
535
|
}
|
|
536
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: OutsideClickDirective, decorators: [{
|
|
537
537
|
type: Directive,
|
|
538
538
|
args: [{
|
|
539
539
|
selector: '[cngOutsideClick]',
|
|
@@ -609,10 +609,10 @@ class ScreenStateService {
|
|
|
609
609
|
this.isUserAgentMobile = MOBILE_USERAGENT_REGEX.test(this._document.defaultView.navigator.userAgent);
|
|
610
610
|
}
|
|
611
611
|
}
|
|
612
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
613
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
612
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ScreenStateService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
613
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ScreenStateService, providedIn: 'root' }); }
|
|
614
614
|
}
|
|
615
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ScreenStateService, decorators: [{
|
|
616
616
|
type: Injectable,
|
|
617
617
|
args: [{ providedIn: 'root' }]
|
|
618
618
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
@@ -635,10 +635,10 @@ class WindowResizeDirective {
|
|
|
635
635
|
.pipe(takeUntilDestroyed(this.destroyRef), skip(skipCount), debounceTime(this.debounce()))
|
|
636
636
|
.subscribe(width => this.windowResize.emit(width));
|
|
637
637
|
}
|
|
638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
639
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
638
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: WindowResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
639
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.20", type: WindowResizeDirective, isStandalone: true, selector: "[cngWindowResize]", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, includeFirst: { classPropertyName: "includeFirst", publicName: "includeFirst", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { windowResize: "cngWindowResize" }, ngImport: i0 }); }
|
|
640
640
|
}
|
|
641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: WindowResizeDirective, decorators: [{
|
|
642
642
|
type: Directive,
|
|
643
643
|
args: [{
|
|
644
644
|
selector: '[cngWindowResize]',
|
|
@@ -1062,14 +1062,365 @@ class BarChartComponent extends ChartBase {
|
|
|
1062
1062
|
}
|
|
1063
1063
|
return Math.floor(height / BarChartComponent.HORIZONTAL_BAR_MIN_HEIGHT_PX);
|
|
1064
1064
|
}
|
|
1065
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1066
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1065
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1066
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: BarChartComponent, isStandalone: false, selector: "clr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, stacks: { classPropertyName: "stacks", publicName: "stacks", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, barSizePx: { classPropertyName: "barSizePx", publicName: "barSizePx", isSignal: true, isRequired: false, transformFunction: null }, barAreaSizePx: { classPropertyName: "barAreaSizePx", publicName: "barAreaSizePx", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOf: { classPropertyName: "tooltipPercentOf", publicName: "tooltipPercentOf", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsMessage: { classPropertyName: "tooManyItemsMessage", publicName: "tooManyItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsGroupedMessage: { classPropertyName: "tooManyItemsGroupedMessage", publicName: "tooManyItemsGroupedMessage", isSignal: true, isRequired: false, transformFunction: null }, allValuesZeroMessage: { classPropertyName: "allValuesZeroMessage", publicName: "allValuesZeroMessage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"bar-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"bar-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !data()?.length || allValuesZero()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"bar-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n >\n <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n <p class=\"mt-0\" data-testid=\"bar-chart-tooltip-percentage\">\n {{ (100 * tooltipValue()) / total() | number: '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n\n @if (stacks()) {\n @for (slice of selectedStackSlices(); track slice.key) {\n <div\n class=\"mt-0-5 d-flex\"\n [attr.data-testid]=\"'bar-chart-tooltip-stack-slice-' + (slice.fullLabel || slice.label)\"\n >\n <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n <strong>{{ slice.fullLabel || slice.label }}: </strong>\n <span\n class=\"has-more-info\"\n [attr.data-testid]=\"'bar-chart-tooltip-stack-value-' + (slice.fullLabel || slice.label)\"\n (click)=\"\n valueClicked.emit({\n key: [slice.key],\n label: slice.fullLabel || slice.label,\n value: slice.value,\n })\n \"\n >\n {{ slice.value }}\n </span>\n </div>\n <p\n class=\"mt-0-25 percentage-info\"\n [attr.data-testid]=\"'bar-chart-tooltip-stack-percentage-' + (slice.fullLabel || slice.label)\"\n >\n {{ (100 * slice.value) / total() | number: '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n {{ slice.percentageOfStack | number: '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n </p>\n }\n }\n </cng-chart-tooltip>\n }\n @if (loading() || !data()?.length || allValuesZero()) {\n <cng-bar-chart-skeleton\n data-testid=\"bar-chart-skeleton\"\n [orientation]=\"orientation()\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n }\n @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"bar-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n <cng-chart-legend data-testid=\"bar-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && data()?.length) {\n <cng-chart-export-button\n data-testid=\"bar-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1067
1067
|
}
|
|
1068
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BarChartComponent, decorators: [{
|
|
1069
1069
|
type: Component,
|
|
1070
1070
|
args: [{ selector: 'clr-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"chart-container\" data-testid=\"bar-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"bar-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !data()?.length || allValuesZero()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"bar-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"!stacks() ? selectedItem()?.color : undefined\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"valueClicked.emit({ key: tooltipKey(), label: tooltipLabel(), value: tooltipValue() })\"\n >\n <ng-container ngProjectAs=\"cng-title\"> ({{ tooltipValue() }}) {{ tooltipLabel() }}</ng-container>\n\n <p class=\"mt-0\" data-testid=\"bar-chart-tooltip-percentage\">\n {{ (100 * tooltipValue()) / total() | number: '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n\n @if (stacks()) {\n @for (slice of selectedStackSlices(); track slice.key) {\n <div\n class=\"mt-0-5 d-flex\"\n [attr.data-testid]=\"'bar-chart-tooltip-stack-slice-' + (slice.fullLabel || slice.label)\"\n >\n <div class=\"color-square mr-0-5\" [style.background-color]=\"toChartColor(slice.color)\"></div>\n <strong>{{ slice.fullLabel || slice.label }}: </strong>\n <span\n class=\"has-more-info\"\n [attr.data-testid]=\"'bar-chart-tooltip-stack-value-' + (slice.fullLabel || slice.label)\"\n (click)=\"\n valueClicked.emit({\n key: [slice.key],\n label: slice.fullLabel || slice.label,\n value: slice.value,\n })\n \"\n >\n {{ slice.value }}\n </span>\n </div>\n <p\n class=\"mt-0-25 percentage-info\"\n [attr.data-testid]=\"'bar-chart-tooltip-stack-percentage-' + (slice.fullLabel || slice.label)\"\n >\n {{ (100 * slice.value) / total() | number: '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n {{ slice.percentageOfStack | number: '1.0-2' }}% {{ tooltipPercentOf() }} \"{{ tooltipLabel() }}\"\n </p>\n }\n }\n </cng-chart-tooltip>\n }\n @if (loading() || !data()?.length || allValuesZero()) {\n <cng-bar-chart-skeleton\n data-testid=\"bar-chart-skeleton\"\n [orientation]=\"orientation()\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n }\n @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"bar-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n <cng-chart-legend data-testid=\"bar-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && data()?.length) {\n <cng-chart-export-button\n data-testid=\"bar-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"] }]
|
|
1071
1071
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], stacks: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacks", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], barSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSizePx", required: false }] }], barAreaSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barAreaSizePx", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], tooltipPercentOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOf", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooManyItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsMessage", required: false }] }], tooManyItemsGroupedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsGroupedMessage", required: false }] }], allValuesZeroMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "allValuesZeroMessage", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
1072
1072
|
|
|
1073
|
+
class GroupedBarChartComponent extends ChartBase {
|
|
1074
|
+
constructor() {
|
|
1075
|
+
super(...arguments);
|
|
1076
|
+
this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
1077
|
+
this.groups = input(undefined, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
|
|
1078
|
+
this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
1079
|
+
this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
|
|
1080
|
+
this.barSizePx = input(12, ...(ngDevMode ? [{ debugName: "barSizePx" }] : /* istanbul ignore next */ []));
|
|
1081
|
+
this.groupAreaSizePx = input(60, ...(ngDevMode ? [{ debugName: "groupAreaSizePx" }] : /* istanbul ignore next */ []));
|
|
1082
|
+
this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
|
|
1083
|
+
this.tooManyItemsGroupedMessage = input(TOO_MANY_ITEMS_GROUPED_MESSAGE, ...(ngDevMode ? [{ debugName: "tooManyItemsGroupedMessage" }] : /* istanbul ignore next */ []));
|
|
1084
|
+
this.allValuesZeroMessage = input(ALL_ITEMS_ZERO_MESSAGE, ...(ngDevMode ? [{ debugName: "allValuesZeroMessage" }] : /* istanbul ignore next */ []));
|
|
1085
|
+
this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
|
|
1086
|
+
this.showExportButton = input(false, ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
|
|
1087
|
+
this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
|
|
1088
|
+
this.exportFilename = input('grouped-bar-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
|
|
1089
|
+
/** Optional label rendered below the X axis. */
|
|
1090
|
+
this.xAxisLabel = input('', ...(ngDevMode ? [{ debugName: "xAxisLabel" }] : /* istanbul ignore next */ []));
|
|
1091
|
+
/** Optional label rendered rotated to the left of the Y axis. */
|
|
1092
|
+
this.yAxisLabel = input('', ...(ngDevMode ? [{ debugName: "yAxisLabel" }] : /* istanbul ignore next */ []));
|
|
1093
|
+
this.valueClicked = output();
|
|
1094
|
+
this.allValuesZero = computed(() => !!this.data()?.length && this.data().every(d => d.value === 0), ...(ngDevMode ? [{ debugName: "allValuesZero" }] : /* istanbul ignore next */ []));
|
|
1095
|
+
this.toChartColor = toChartColor;
|
|
1096
|
+
this.tooltipLabel = computed(() => this.selectedItem()?.fullLabel ?? this.selectedItem()?.label, ...(ngDevMode ? [{ debugName: "tooltipLabel" }] : /* istanbul ignore next */ []));
|
|
1097
|
+
this.legendItems = computed(() => {
|
|
1098
|
+
if (!this.showLegend() || !this.data()?.length) {
|
|
1099
|
+
return [];
|
|
1100
|
+
}
|
|
1101
|
+
const seen = new Set();
|
|
1102
|
+
const items = [];
|
|
1103
|
+
for (const item of this.data()) {
|
|
1104
|
+
const label = item.fullLabel ?? item.label;
|
|
1105
|
+
if (!seen.has(label)) {
|
|
1106
|
+
seen.add(label);
|
|
1107
|
+
items.push({ label, color: item.color });
|
|
1108
|
+
}
|
|
1109
|
+
}
|
|
1110
|
+
return items;
|
|
1111
|
+
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
1112
|
+
this.alertMessageAndType = computed(() => {
|
|
1113
|
+
if (this.loading()) {
|
|
1114
|
+
return undefined;
|
|
1115
|
+
}
|
|
1116
|
+
if (this.allValuesZero()) {
|
|
1117
|
+
return [this.allValuesZeroMessage(), NO_ITEMS_ALERT_TYPE];
|
|
1118
|
+
}
|
|
1119
|
+
if (!this.showingGroupCount()) {
|
|
1120
|
+
return [this.noItemsMessage(), NO_ITEMS_ALERT_TYPE];
|
|
1121
|
+
}
|
|
1122
|
+
if (this.totalGroupCount() !== this.showingGroupCount()) {
|
|
1123
|
+
const message = this.tooManyItemsGroupedMessage()
|
|
1124
|
+
.replace('{{totalAmount}}', String(this.totalGroupCount()))
|
|
1125
|
+
.replace('{{showingAmount}}', String(this.showingGroupCount()));
|
|
1126
|
+
return [message, TOO_MANY_ITEMS_ALERT_TYPE];
|
|
1127
|
+
}
|
|
1128
|
+
return undefined;
|
|
1129
|
+
}, ...(ngDevMode ? [{ debugName: "alertMessageAndType" }] : /* istanbul ignore next */ []));
|
|
1130
|
+
this.textRenderer = new TextRenderer();
|
|
1131
|
+
this.MARGIN = { top: 10, right: 20, bottom: 30, left: 80 };
|
|
1132
|
+
this.totalGroupCount = signal(0, ...(ngDevMode ? [{ debugName: "totalGroupCount" }] : /* istanbul ignore next */ []));
|
|
1133
|
+
this.showingGroupCount = signal(0, ...(ngDevMode ? [{ debugName: "showingGroupCount" }] : /* istanbul ignore next */ []));
|
|
1134
|
+
this.slicedDataPoints = signal([], ...(ngDevMode ? [{ debugName: "slicedDataPoints" }] : /* istanbul ignore next */ []));
|
|
1135
|
+
this.barSelection = null;
|
|
1136
|
+
this.labelSelection = null;
|
|
1137
|
+
}
|
|
1138
|
+
ngOnChanges(_changes) {
|
|
1139
|
+
if (!this.svg) {
|
|
1140
|
+
return;
|
|
1141
|
+
}
|
|
1142
|
+
requestAnimationFrame(() => this.updateChart());
|
|
1143
|
+
}
|
|
1144
|
+
ngAfterViewInit() {
|
|
1145
|
+
this.createChart();
|
|
1146
|
+
super.ngAfterViewInit();
|
|
1147
|
+
}
|
|
1148
|
+
createChart() {
|
|
1149
|
+
this.svg = select(this.chartRef().nativeElement);
|
|
1150
|
+
}
|
|
1151
|
+
updateChart() {
|
|
1152
|
+
this.svg.selectAll('*').remove();
|
|
1153
|
+
if (this.loading()) {
|
|
1154
|
+
this.resetVisibleState();
|
|
1155
|
+
return;
|
|
1156
|
+
}
|
|
1157
|
+
const normalizedGroups = this.getNormalizedGroups();
|
|
1158
|
+
this.totalGroupCount.set(normalizedGroups.length);
|
|
1159
|
+
if (!this.data()?.length || !normalizedGroups.length) {
|
|
1160
|
+
this.resetVisibleState();
|
|
1161
|
+
return;
|
|
1162
|
+
}
|
|
1163
|
+
const { width: containerWidth, height: containerHeight } = this.getContainerDimensions();
|
|
1164
|
+
const extraBottom = this.xAxisLabel() ? 16 : 0;
|
|
1165
|
+
const extraLeft = this.yAxisLabel() ? 16 : 0;
|
|
1166
|
+
const leftMargin = (this.orientation() === 'horizontal' ? this.MARGIN.left : 30) + extraLeft;
|
|
1167
|
+
const width = containerWidth - leftMargin - this.MARGIN.right;
|
|
1168
|
+
const height = containerHeight - this.MARGIN.top - (this.MARGIN.bottom + extraBottom);
|
|
1169
|
+
if (width <= 0 || height <= 0) {
|
|
1170
|
+
this.resetVisibleState();
|
|
1171
|
+
return;
|
|
1172
|
+
}
|
|
1173
|
+
const visibleGroups = normalizedGroups.slice(0, this.getMaxAmountOfGroups(width, height));
|
|
1174
|
+
const visibleGroupKeys = new Set(visibleGroups.map(group => group.key));
|
|
1175
|
+
const dataPoints = this.data()
|
|
1176
|
+
.filter(item => visibleGroupKeys.has(item.groupKey))
|
|
1177
|
+
.map(item => ({
|
|
1178
|
+
...item,
|
|
1179
|
+
groupLabel: visibleGroups.find(group => group.key === item.groupKey)?.label ?? item.groupLabel ?? item.groupKey,
|
|
1180
|
+
}));
|
|
1181
|
+
this.showingGroupCount.set(visibleGroups.length);
|
|
1182
|
+
this.slicedDataPoints.set(dataPoints);
|
|
1183
|
+
const g = this.svg
|
|
1184
|
+
.attr('width', width)
|
|
1185
|
+
.attr('height', height)
|
|
1186
|
+
.append('g')
|
|
1187
|
+
.attr('transform', `translate(${leftMargin},${this.MARGIN.top})`);
|
|
1188
|
+
if (this.orientation() === 'vertical') {
|
|
1189
|
+
this.createVerticalChart(g, visibleGroups, width, height, this.xAxisLabel(), this.yAxisLabel(), leftMargin);
|
|
1190
|
+
}
|
|
1191
|
+
else {
|
|
1192
|
+
this.createHorizontalChart(g, visibleGroups, width, height, this.xAxisLabel(), this.yAxisLabel(), leftMargin);
|
|
1193
|
+
}
|
|
1194
|
+
this.styleGridLines(g);
|
|
1195
|
+
}
|
|
1196
|
+
createVerticalChart(g, groups, width, height, xAxisLabel, yAxisLabel, leftMargin) {
|
|
1197
|
+
const x0 = scaleBand()
|
|
1198
|
+
.domain(groups.map(group => group.key))
|
|
1199
|
+
.range([0, width])
|
|
1200
|
+
.paddingInner(0.2);
|
|
1201
|
+
const x1 = scaleBand().domain(this.seriesLabels()).range([0, x0.bandwidth()]).padding(0.05);
|
|
1202
|
+
const y = scaleLinear()
|
|
1203
|
+
.domain([0, max(this.slicedDataPoints(), (d) => d.value) || 0])
|
|
1204
|
+
.nice()
|
|
1205
|
+
.range([height, 0]);
|
|
1206
|
+
const xAxis = g
|
|
1207
|
+
.append('g')
|
|
1208
|
+
.attr('transform', `translate(0,${height})`)
|
|
1209
|
+
.call(axisBottom(x0).tickFormat(groupKey => groups.find(group => group.key === groupKey)?.label ?? groupKey));
|
|
1210
|
+
this.labelSelection = xAxis
|
|
1211
|
+
.selectAll('text')
|
|
1212
|
+
.data(groups)
|
|
1213
|
+
.call(this.addTextCommonInfo)
|
|
1214
|
+
.call(this.addTextAndTitle.bind(this), x0.bandwidth());
|
|
1215
|
+
const tickValues = y.ticks(5).filter((tick) => Number.isInteger(tick));
|
|
1216
|
+
const yAxis = g
|
|
1217
|
+
.append('g')
|
|
1218
|
+
.call(axisLeft(y).tickValues(tickValues).tickSize(-width).tickFormat(format('~s')))
|
|
1219
|
+
.selectAll('text');
|
|
1220
|
+
yAxis.call(this.addTextCommonInfo);
|
|
1221
|
+
this.createBarSelectionGroups(g);
|
|
1222
|
+
this.addVerticalBarRectangle(x0, x1, y, 2)
|
|
1223
|
+
.attr('class', 'bar-highlight')
|
|
1224
|
+
.attr('fill', '#fff')
|
|
1225
|
+
.style('stroke', (d) => toChartColor(d.color))
|
|
1226
|
+
.attr('stroke-width', 2)
|
|
1227
|
+
.style('opacity', 0);
|
|
1228
|
+
this.addVerticalBarRectangle(x0, x1, y)
|
|
1229
|
+
.attr('class', 'bar')
|
|
1230
|
+
.style('fill', (d) => toChartColor(d.color));
|
|
1231
|
+
this.appendAxisLabel(g, xAxisLabel, width / 2, height + 40);
|
|
1232
|
+
this.appendAxisLabel(g, yAxisLabel, -height / 2, -(leftMargin - 10), 'rotate(-90)');
|
|
1233
|
+
}
|
|
1234
|
+
createHorizontalChart(g, groups, width, height, xAxisLabel, yAxisLabel, leftMargin) {
|
|
1235
|
+
const x = scaleLinear()
|
|
1236
|
+
.domain([0, max(this.slicedDataPoints(), (d) => d.value) || 0])
|
|
1237
|
+
.nice()
|
|
1238
|
+
.range([0, width]);
|
|
1239
|
+
const y0 = scaleBand()
|
|
1240
|
+
.domain(groups.map(group => group.key))
|
|
1241
|
+
.range([0, height])
|
|
1242
|
+
.paddingInner(0.2);
|
|
1243
|
+
const y1 = scaleBand().domain(this.seriesLabels()).range([0, y0.bandwidth()]).padding(0.05);
|
|
1244
|
+
const tickValues = x.ticks(5).filter((tick) => Number.isInteger(tick));
|
|
1245
|
+
const xAxis = g
|
|
1246
|
+
.append('g')
|
|
1247
|
+
.attr('transform', `translate(0,${height})`)
|
|
1248
|
+
.call(axisBottom(x).tickValues(tickValues).tickSize(-height).tickFormat(format('~s')))
|
|
1249
|
+
.selectAll('text');
|
|
1250
|
+
xAxis.call(this.addTextCommonInfo);
|
|
1251
|
+
const yAxis = g
|
|
1252
|
+
.append('g')
|
|
1253
|
+
.call(axisLeft(y0).tickFormat(groupKey => groups.find(group => group.key === groupKey)?.label ?? groupKey));
|
|
1254
|
+
this.labelSelection = yAxis
|
|
1255
|
+
.selectAll('text')
|
|
1256
|
+
.data(groups)
|
|
1257
|
+
.call(this.addTextCommonInfo)
|
|
1258
|
+
.call(this.addTextAndTitle.bind(this), this.MARGIN.left - 10);
|
|
1259
|
+
this.createBarSelectionGroups(g);
|
|
1260
|
+
this.addHorizontalBarRectangle(x, y0, y1, 2)
|
|
1261
|
+
.attr('class', 'bar-highlight')
|
|
1262
|
+
.attr('fill', '#fff')
|
|
1263
|
+
.style('stroke', (d) => toChartColor(d.color))
|
|
1264
|
+
.attr('stroke-width', 2)
|
|
1265
|
+
.style('opacity', 0);
|
|
1266
|
+
this.addHorizontalBarRectangle(x, y0, y1)
|
|
1267
|
+
.attr('class', 'bar')
|
|
1268
|
+
.style('fill', (d) => toChartColor(d.color));
|
|
1269
|
+
this.appendAxisLabel(g, xAxisLabel, width / 2, height + 40);
|
|
1270
|
+
this.appendAxisLabel(g, yAxisLabel, -height / 2, -((this.MARGIN.left + leftMargin) / 2), 'rotate(-90)');
|
|
1271
|
+
}
|
|
1272
|
+
createBarSelectionGroups(g) {
|
|
1273
|
+
this.barSelection = g
|
|
1274
|
+
.selectAll('.bar-group')
|
|
1275
|
+
.data(this.slicedDataPoints(), (d) => d.key)
|
|
1276
|
+
.join('g')
|
|
1277
|
+
.attr('class', 'bar-group')
|
|
1278
|
+
.style('cursor', 'pointer')
|
|
1279
|
+
.on('mouseover', (_event, d) => this.setHoverStyles(d, true))
|
|
1280
|
+
.on('mouseout', (_event, d) => this.setHoverStyles(d, false))
|
|
1281
|
+
.call(this.addBarClickHandler.bind(this));
|
|
1282
|
+
}
|
|
1283
|
+
addHorizontalBarRectangle(x, y0, y1, outlineSize = 0) {
|
|
1284
|
+
const barHeight = Math.max(0, Math.min(this.barSizePx(), y1.bandwidth()));
|
|
1285
|
+
const yOffset = (y1.bandwidth() - barHeight) / 2;
|
|
1286
|
+
return this.barSelection
|
|
1287
|
+
.append('rect')
|
|
1288
|
+
.attr('x', -outlineSize)
|
|
1289
|
+
.attr('y', (d) => {
|
|
1290
|
+
return (y0(d.groupKey) || 0) + (y1(d.fullLabel ?? d.label) || 0) + yOffset - outlineSize;
|
|
1291
|
+
})
|
|
1292
|
+
.attr('width', (d) => x(d.value) + 2 * outlineSize)
|
|
1293
|
+
.attr('height', barHeight + 2 * outlineSize)
|
|
1294
|
+
.attr('rx', 1)
|
|
1295
|
+
.attr('ry', 1);
|
|
1296
|
+
}
|
|
1297
|
+
addVerticalBarRectangle(x0, x1, y, outlineSize = 0) {
|
|
1298
|
+
const barWidth = Math.max(0, Math.min(this.barSizePx(), x1.bandwidth()));
|
|
1299
|
+
const xOffset = (x1.bandwidth() - barWidth) / 2;
|
|
1300
|
+
return this.barSelection
|
|
1301
|
+
.append('rect')
|
|
1302
|
+
.attr('x', (d) => {
|
|
1303
|
+
return (x0(d.groupKey) || 0) + (x1(d.fullLabel ?? d.label) || 0) + xOffset - outlineSize;
|
|
1304
|
+
})
|
|
1305
|
+
.attr('y', (d) => y(d.value) - outlineSize)
|
|
1306
|
+
.attr('width', barWidth + 2 * outlineSize)
|
|
1307
|
+
.attr('height', (d) => y(0) - y(d.value) + 2 * outlineSize)
|
|
1308
|
+
.attr('rx', 1)
|
|
1309
|
+
.attr('ry', 1);
|
|
1310
|
+
}
|
|
1311
|
+
emitSelectedValue() {
|
|
1312
|
+
const item = this.selectedItem();
|
|
1313
|
+
if (!item) {
|
|
1314
|
+
return;
|
|
1315
|
+
}
|
|
1316
|
+
this.valueClicked.emit({
|
|
1317
|
+
key: item.key,
|
|
1318
|
+
label: item.fullLabel ?? item.label,
|
|
1319
|
+
groupKey: item.groupKey,
|
|
1320
|
+
groupLabel: item.groupLabel,
|
|
1321
|
+
value: item.value,
|
|
1322
|
+
});
|
|
1323
|
+
}
|
|
1324
|
+
addBarClickHandler(g) {
|
|
1325
|
+
g.on('click', (event, d) => {
|
|
1326
|
+
event.stopPropagation();
|
|
1327
|
+
this.openTooltip(d.key);
|
|
1328
|
+
});
|
|
1329
|
+
}
|
|
1330
|
+
openTooltip(key) {
|
|
1331
|
+
const index = this.slicedDataPoints().findIndex(item => item.key === key);
|
|
1332
|
+
const rect = this.barSelection
|
|
1333
|
+
.filter((_d, i) => i === index)
|
|
1334
|
+
.node()
|
|
1335
|
+
.children[0].getBoundingClientRect();
|
|
1336
|
+
const container = this.chartRef().nativeElement.getBoundingClientRect();
|
|
1337
|
+
this.tooltipPosition.set({
|
|
1338
|
+
x: rect.left - container.left + rect.width / 2,
|
|
1339
|
+
y: (this.tooltipOrientation() === 'top' ? rect.top : rect.bottom) - container.top,
|
|
1340
|
+
});
|
|
1341
|
+
this.selectedItem.set(this.slicedDataPoints()[index]);
|
|
1342
|
+
}
|
|
1343
|
+
setHoverStyles(d, isHover) {
|
|
1344
|
+
const barGroup = this.barSelection.filter((item) => item.key === d.key);
|
|
1345
|
+
barGroup.select('.bar').style('mix-blend-mode', isHover ? 'multiply' : 'unset');
|
|
1346
|
+
barGroup.select('.bar-highlight').style('opacity', isHover ? '1' : '0');
|
|
1347
|
+
this.labelSelection
|
|
1348
|
+
.filter((group) => group.key === d.groupKey)
|
|
1349
|
+
.style('font-weight', isHover ? 'bold' : 'unset');
|
|
1350
|
+
}
|
|
1351
|
+
addTextCommonInfo(g) {
|
|
1352
|
+
g.style('font-size', '11px').style('fill', 'var(--cds-global-color-construction-400, #666)');
|
|
1353
|
+
}
|
|
1354
|
+
addTextAndTitle(g, availableWidth) {
|
|
1355
|
+
g.each((d, index, nodes) => {
|
|
1356
|
+
const target = select(nodes[index]);
|
|
1357
|
+
target.text(this.textRenderer.render(d.label, 15, availableWidth, target.style('font-size'), target.style('font-family')));
|
|
1358
|
+
target.append('title').text(d.label);
|
|
1359
|
+
});
|
|
1360
|
+
}
|
|
1361
|
+
appendAxisLabel(g, text, x, y, transform) {
|
|
1362
|
+
if (!text) {
|
|
1363
|
+
return;
|
|
1364
|
+
}
|
|
1365
|
+
const el = g
|
|
1366
|
+
.append('text')
|
|
1367
|
+
.attr('text-anchor', 'middle')
|
|
1368
|
+
.style('font-size', '12px')
|
|
1369
|
+
.style('fill', 'var(--cds-global-color-construction-400, #666)')
|
|
1370
|
+
.text(text)
|
|
1371
|
+
.attr('x', x)
|
|
1372
|
+
.attr('y', y);
|
|
1373
|
+
if (transform) {
|
|
1374
|
+
el.attr('transform', transform);
|
|
1375
|
+
}
|
|
1376
|
+
}
|
|
1377
|
+
styleGridLines(g) {
|
|
1378
|
+
g.selectAll('.tick line').style('stroke', 'var(--cds-global-color-gray-200, #e8e8e8)');
|
|
1379
|
+
}
|
|
1380
|
+
getNormalizedGroups() {
|
|
1381
|
+
if (this.groups()?.length) {
|
|
1382
|
+
return this.groups();
|
|
1383
|
+
}
|
|
1384
|
+
const seen = new Set();
|
|
1385
|
+
const groups = [];
|
|
1386
|
+
for (const item of this.data() ?? []) {
|
|
1387
|
+
if (!seen.has(item.groupKey)) {
|
|
1388
|
+
seen.add(item.groupKey);
|
|
1389
|
+
groups.push({ key: item.groupKey, label: item.groupLabel ?? item.groupKey });
|
|
1390
|
+
}
|
|
1391
|
+
}
|
|
1392
|
+
return groups;
|
|
1393
|
+
}
|
|
1394
|
+
seriesLabels() {
|
|
1395
|
+
const seen = new Set();
|
|
1396
|
+
const labels = [];
|
|
1397
|
+
for (const item of this.slicedDataPoints()) {
|
|
1398
|
+
const label = item.fullLabel ?? item.label;
|
|
1399
|
+
if (!seen.has(label)) {
|
|
1400
|
+
seen.add(label);
|
|
1401
|
+
labels.push(label);
|
|
1402
|
+
}
|
|
1403
|
+
}
|
|
1404
|
+
return labels;
|
|
1405
|
+
}
|
|
1406
|
+
getMaxAmountOfGroups(width, height) {
|
|
1407
|
+
if (this.orientation() === 'vertical') {
|
|
1408
|
+
return Math.floor(width / this.groupAreaSizePx());
|
|
1409
|
+
}
|
|
1410
|
+
return Math.floor(height / this.groupAreaSizePx());
|
|
1411
|
+
}
|
|
1412
|
+
resetVisibleState() {
|
|
1413
|
+
this.showingGroupCount.set(0);
|
|
1414
|
+
this.slicedDataPoints.set([]);
|
|
1415
|
+
}
|
|
1416
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: GroupedBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: GroupedBarChartComponent, isStandalone: false, selector: "clr-grouped-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, barSizePx: { classPropertyName: "barSizePx", publicName: "barSizePx", isSignal: true, isRequired: false, transformFunction: null }, groupAreaSizePx: { classPropertyName: "groupAreaSizePx", publicName: "groupAreaSizePx", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyItemsGroupedMessage: { classPropertyName: "tooManyItemsGroupedMessage", publicName: "tooManyItemsGroupedMessage", isSignal: true, isRequired: false, transformFunction: null }, allValuesZeroMessage: { classPropertyName: "allValuesZeroMessage", publicName: "allValuesZeroMessage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\">\n <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n <svg\n [class.d-none]=\"loading() || !data()?.length || allValuesZero()\"\n #chart\n role=\"img\"\n [attr.aria-label]=\"xAxisLabel() || yAxisLabel() ? yAxisLabel() + ' by ' + xAxisLabel() : 'Grouped bar chart'\"\n ></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"emitSelectedValue()\"\n >\n <ng-container ngProjectAs=\"cng-title\">({{ selectedItem()?.value }}) {{ tooltipLabel() }}</ng-container>\n\n <p class=\"mt-0\">\n <strong>{{ selectedItem()?.groupLabel }}</strong>\n </p>\n </cng-chart-tooltip>\n }\n @if (loading() || !data()?.length || allValuesZero()) {\n <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n }\n @if (alertMessageAndType()) {\n <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n <cng-chart-legend [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && data()?.length) {\n <cng-chart-export-button\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1418
|
+
}
|
|
1419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: GroupedBarChartComponent, decorators: [{
|
|
1420
|
+
type: Component,
|
|
1421
|
+
args: [{ selector: 'clr-grouped-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"chart-container\">\n <div class=\"chart-area\" #container (cngWindowResize)=\"updateChart()\" [class.pt-3]=\"alertMessageAndType()\">\n <svg\n [class.d-none]=\"loading() || !data()?.length || allValuesZero()\"\n #chart\n role=\"img\"\n [attr.aria-label]=\"xAxisLabel() || yAxisLabel() ? yAxisLabel() + ' by ' + xAxisLabel() : 'Grouped bar chart'\"\n ></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"emitSelectedValue()\"\n >\n <ng-container ngProjectAs=\"cng-title\">({{ selectedItem()?.value }}) {{ tooltipLabel() }}</ng-container>\n\n <p class=\"mt-0\">\n <strong>{{ selectedItem()?.groupLabel }}</strong>\n </p>\n </cng-chart-tooltip>\n }\n @if (loading() || !data()?.length || allValuesZero()) {\n <cng-bar-chart-skeleton [orientation]=\"orientation()\" [skeletonType]=\"loading() ? 'loading' : 'placeholder'\" />\n }\n @if (alertMessageAndType()) {\n <cng-chart-alert-overlay [alertType]=\"alertMessageAndType()[1]\" [alertMessage]=\"alertMessageAndType()[0]\" />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length && !allValuesZero()) {\n <cng-chart-legend [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && data()?.length) {\n <cng-chart-export-button\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}\n"] }]
|
|
1422
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], barSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSizePx", required: false }] }], groupAreaSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAreaSizePx", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooManyItemsGroupedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyItemsGroupedMessage", required: false }] }], allValuesZeroMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "allValuesZeroMessage", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
1423
|
+
|
|
1073
1424
|
/*
|
|
1074
1425
|
* Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
|
|
1075
1426
|
* This software is released under MIT license.
|
|
@@ -1346,10 +1697,10 @@ class LineChartComponent extends ChartBase {
|
|
|
1346
1697
|
});
|
|
1347
1698
|
this.selectedItem.set({ ...point, seriesKey: series.key, seriesLabel: series.label, color: series.color });
|
|
1348
1699
|
}
|
|
1349
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1350
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1700
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1701
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: LineChartComponent, isStandalone: false, selector: "clr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, autoscaleYAxis: { classPropertyName: "autoscaleYAxis", publicName: "autoscaleYAxis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"line-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"line-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"line-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n valueClicked.emit({\n seriesKey: selectedItem().seriesKey,\n seriesLabel: selectedItem().seriesLabel,\n x: selectedItem().x,\n xLabel: selectedItem().xLabel,\n value: selectedItem().value,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n </ng-container>\n\n <p class=\"mt-0\" data-testid=\"line-chart-tooltip-series\">\n <strong>{{ selectedItem().seriesLabel }}:</strong>\n {{ selectedItem().value }}\n </p>\n <p class=\"mt-0\" data-testid=\"line-chart-tooltip-percentage\">\n {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n </cng-chart-tooltip>\n } @if (loading() || !hasData()) {\n <cng-bar-chart-skeleton\n data-testid=\"line-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n } @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"line-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length) {\n <cng-chart-legend data-testid=\"line-chart-legend\" [items]=\"legendItems()\" />\n } @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n data-testid=\"line-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1351
1702
|
}
|
|
1352
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1703
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LineChartComponent, decorators: [{
|
|
1353
1704
|
type: Component,
|
|
1354
1705
|
args: [{ selector: 'clr-line-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\" data-testid=\"line-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"line-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"line-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n valueClicked.emit({\n seriesKey: selectedItem().seriesKey,\n seriesLabel: selectedItem().seriesLabel,\n x: selectedItem().x,\n xLabel: selectedItem().xLabel,\n value: selectedItem().value,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n </ng-container>\n\n <p class=\"mt-0\" data-testid=\"line-chart-tooltip-series\">\n <strong>{{ selectedItem().seriesLabel }}:</strong>\n {{ selectedItem().value }}\n </p>\n <p class=\"mt-0\" data-testid=\"line-chart-tooltip-percentage\">\n {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n </cng-chart-tooltip>\n } @if (loading() || !hasData()) {\n <cng-bar-chart-skeleton\n data-testid=\"line-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n } @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"line-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length) {\n <cng-chart-legend data-testid=\"line-chart-legend\" [items]=\"legendItems()\" />\n } @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n data-testid=\"line-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"] }]
|
|
1355
1706
|
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], showArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArea", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], autoscaleYAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoscaleYAxis", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
@@ -1483,10 +1834,10 @@ class AreaChartComponent extends ChartBase {
|
|
|
1483
1834
|
});
|
|
1484
1835
|
this.selectedItem.set({ ...point, seriesKey: series.key, seriesLabel: series.label, color: series.color });
|
|
1485
1836
|
}
|
|
1486
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1487
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1837
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1838
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: AreaChartComponent, isStandalone: false, selector: "clr-area-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, areaOpacity: { classPropertyName: "areaOpacity", publicName: "areaOpacity", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"area-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"area-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"area-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n valueClicked.emit({\n seriesKey: selectedItem().seriesKey,\n seriesLabel: selectedItem().seriesLabel,\n x: selectedItem().x,\n xLabel: selectedItem().xLabel,\n value: selectedItem().value,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n </ng-container>\n\n <p class=\"mt-0\" data-testid=\"area-chart-tooltip-series\">\n <strong>{{ selectedItem().seriesLabel }}:</strong>\n {{ selectedItem().value }}\n </p>\n <p class=\"mt-0\" data-testid=\"area-chart-tooltip-percentage\">\n {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n </cng-chart-tooltip>\n } @if (loading() || !hasData()) {\n <cng-bar-chart-skeleton\n data-testid=\"area-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n } @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"area-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length) {\n <cng-chart-legend data-testid=\"area-chart-legend\" [items]=\"legendItems()\" />\n } @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n data-testid=\"area-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1488
1839
|
}
|
|
1489
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1840
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AreaChartComponent, decorators: [{
|
|
1490
1841
|
type: Component,
|
|
1491
1842
|
args: [{ selector: 'clr-area-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\" data-testid=\"area-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"area-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"area-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n valueClicked.emit({\n seriesKey: selectedItem().seriesKey,\n seriesLabel: selectedItem().seriesLabel,\n x: selectedItem().x,\n xLabel: selectedItem().xLabel,\n value: selectedItem().value,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n </ng-container>\n\n <p class=\"mt-0\" data-testid=\"area-chart-tooltip-series\">\n <strong>{{ selectedItem().seriesLabel }}:</strong>\n {{ selectedItem().value }}\n </p>\n <p class=\"mt-0\" data-testid=\"area-chart-tooltip-percentage\">\n {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n </cng-chart-tooltip>\n } @if (loading() || !hasData()) {\n <cng-bar-chart-skeleton\n data-testid=\"area-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n } @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"area-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length) {\n <cng-chart-legend data-testid=\"area-chart-legend\" [items]=\"legendItems()\" />\n } @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n data-testid=\"area-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.line,.area{pointer-events:none}.dot{transition:r .1s ease}\n"] }]
|
|
1492
1843
|
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], areaOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaOpacity", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
@@ -1778,10 +2129,10 @@ class ComboChartComponent extends ChartBase {
|
|
|
1778
2129
|
});
|
|
1779
2130
|
}
|
|
1780
2131
|
}
|
|
1781
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1782
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ComboChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ComboChartComponent, isStandalone: false, selector: "clr-combo-chart", inputs: { barSeries: { classPropertyName: "barSeries", publicName: "barSeries", isSignal: true, isRequired: false, transformFunction: null }, lineSeries: { classPropertyName: "lineSeries", publicName: "lineSeries", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, xAxisLabel: { classPropertyName: "xAxisLabel", publicName: "xAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yAxisLabel: { classPropertyName: "yAxisLabel", publicName: "yAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yLineAxisLabel: { classPropertyName: "yLineAxisLabel", publicName: "yLineAxisLabel", isSignal: true, isRequired: false, transformFunction: null }, yBarMax: { classPropertyName: "yBarMax", publicName: "yBarMax", isSignal: true, isRequired: false, transformFunction: null }, yLineMax: { classPropertyName: "yLineMax", publicName: "yLineMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"combo-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"combo-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"combo-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n valueClicked.emit({\n seriesKey: selectedItem().seriesKey,\n seriesLabel: selectedItem().seriesLabel,\n seriesType: selectedItem().seriesType,\n x: selectedItem().x,\n xLabel: selectedItem().xLabel,\n value: selectedItem().value,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n </ng-container>\n\n <p class=\"mt-0\" data-testid=\"combo-chart-tooltip-series\">\n <strong>{{ selectedItem().seriesLabel }}:</strong>\n {{ selectedItem().value }}\n </p>\n <p class=\"mt-0\" data-testid=\"combo-chart-tooltip-percentage\">\n {{ (100 * selectedItem().value) / selectedItem().total | number : '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n </cng-chart-tooltip>\n } @if (loading() || !hasData()) {\n <cng-bar-chart-skeleton\n data-testid=\"combo-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n } @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"combo-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length) {\n <cng-chart-legend data-testid=\"combo-chart-legend\" [items]=\"legendItems()\" />\n } @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n data-testid=\"combo-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.combo-line{pointer-events:none}.combo-dot{transition:r .1s ease}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1783
2134
|
}
|
|
1784
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ComboChartComponent, decorators: [{
|
|
1785
2136
|
type: Component,
|
|
1786
2137
|
args: [{ selector: 'clr-combo-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\" data-testid=\"combo-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"combo-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"combo-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n valueClicked.emit({\n seriesKey: selectedItem().seriesKey,\n seriesLabel: selectedItem().seriesLabel,\n seriesType: selectedItem().seriesType,\n x: selectedItem().x,\n xLabel: selectedItem().xLabel,\n value: selectedItem().value,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n ({{ selectedItem().value }}) {{ selectedItem().xLabel || selectedItem().x }}\n </ng-container>\n\n <p class=\"mt-0\" data-testid=\"combo-chart-tooltip-series\">\n <strong>{{ selectedItem().seriesLabel }}:</strong>\n {{ selectedItem().value }}\n </p>\n <p class=\"mt-0\" data-testid=\"combo-chart-tooltip-percentage\">\n {{ (100 * selectedItem().value) / selectedItem().total | number : '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n </cng-chart-tooltip>\n } @if (loading() || !hasData()) {\n <cng-bar-chart-skeleton\n data-testid=\"combo-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n } @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"combo-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length) {\n <cng-chart-legend data-testid=\"combo-chart-legend\" [items]=\"legendItems()\" />\n } @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n data-testid=\"combo-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep .domain{display:none}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.combo-line{pointer-events:none}.combo-dot{transition:r .1s ease}\n"] }]
|
|
1787
2138
|
}], propDecorators: { barSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSeries", required: false }] }], lineSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineSeries", required: false }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], xAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisLabel", required: false }] }], yAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabel", required: false }] }], yLineAxisLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLineAxisLabel", required: false }] }], yBarMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yBarMax", required: false }] }], yLineMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLineMax", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
@@ -1932,10 +2283,10 @@ class PieChartComponent extends ChartBase {
|
|
|
1932
2283
|
});
|
|
1933
2284
|
this.selectedItem.set(d.data);
|
|
1934
2285
|
}
|
|
1935
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1936
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2286
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2287
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: PieChartComponent, isStandalone: false, selector: "clr-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, donut: { classPropertyName: "donut", publicName: "donut", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-container\" data-testid=\"pie-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"pie-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"pie-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n valueClicked.emit({\n key: selectedItem().key,\n label: selectedItem().fullLabel || selectedItem().label,\n value: selectedItem().value,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n </ng-container>\n\n <p class=\"mt-0\" data-testid=\"pie-chart-tooltip-percentage\">\n {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n </cng-chart-tooltip>\n } @if (loading() || !hasData()) {\n <cng-bar-chart-skeleton\n data-testid=\"pie-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n } @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"pie-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length) {\n <cng-chart-legend data-testid=\"pie-chart-legend\" [items]=\"legendItems()\" />\n } @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n data-testid=\"pie-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--cds-global-color-gray-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}\n"], dependencies: [{ kind: "component", type: ChartAlertOverlayComponent, selector: "cng-chart-alert-overlay", inputs: ["alertMessage", "alertType"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartLegendComponent, selector: "cng-chart-legend", inputs: ["items"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1937
2288
|
}
|
|
1938
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PieChartComponent, decorators: [{
|
|
1939
2290
|
type: Component,
|
|
1940
2291
|
args: [{ selector: 'clr-pie-chart', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chart-container\" data-testid=\"pie-chart\">\n <div\n class=\"chart-area\"\n data-testid=\"pie-chart-area\"\n #container\n (cngWindowResize)=\"updateChart()\"\n [class.pt-3]=\"alertMessageAndType()\"\n >\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (tooltipPosition()) {\n <cng-chart-tooltip\n data-testid=\"pie-chart-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n [tooltipOrientation]=\"tooltipOrientation()\"\n [squareColor]=\"selectedItem()?.color\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n valueClicked.emit({\n key: selectedItem().key,\n label: selectedItem().fullLabel || selectedItem().label,\n value: selectedItem().value,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n ({{ selectedItem().value }}) {{ selectedItem().fullLabel || selectedItem().label }}\n </ng-container>\n\n <p class=\"mt-0\" data-testid=\"pie-chart-tooltip-percentage\">\n {{ (100 * selectedItem().value) / total() | number : '1.0-2' }}%\n {{ tooltipPercentOfTotal() }}\n </p>\n </cng-chart-tooltip>\n } @if (loading() || !hasData()) {\n <cng-bar-chart-skeleton\n data-testid=\"pie-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\n } @if (alertMessageAndType()) {\n <cng-chart-alert-overlay\n data-testid=\"pie-chart-alert-overlay\"\n [alertType]=\"alertMessageAndType()[1]\"\n [alertMessage]=\"alertMessageAndType()[0]\"\n />\n }\n </div>\n\n @if (showLegend() && !loading() && legendItems().length) {\n <cng-chart-legend data-testid=\"pie-chart-legend\" [items]=\"legendItems()\" />\n } @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n data-testid=\"pie-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n [legendItems]=\"legendItems()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}.chart-area{flex:1;min-height:0;position:relative}svg{height:100%;width:100%}cng-bar-chart-skeleton{height:100%}.slice{transition:d .15s ease}.label-value{font-size:11px;font-weight:600;fill:#fff}.label-percent{font-size:10px;fill:#ffffffe6}.center-label{font-size:1.4rem;font-weight:600;fill:var(--cds-global-color-gray-900, #21333b)}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}\n"] }]
|
|
1941
2292
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], donut: [{ type: i0.Input, args: [{ isSignal: true, alias: "donut", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
@@ -2538,10 +2889,10 @@ class FunnelChartComponent extends ChartBase {
|
|
|
2538
2889
|
const factor = 10 ** decimals;
|
|
2539
2890
|
return Math.round(factor * value) / factor;
|
|
2540
2891
|
}
|
|
2541
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FunnelChartComponent, isStandalone: false, selector: "clr-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null }, lineTextPadding: { classPropertyName: "lineTextPadding", publicName: "lineTextPadding", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, sideLineVerticalPadding: { classPropertyName: "sideLineVerticalPadding", publicName: "sideLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, minLineSize: { classPropertyName: "minLineSize", publicName: "minLineSize", isSignal: true, isRequired: false, transformFunction: null }, barToSpacerRatio: { classPropertyName: "barToSpacerRatio", publicName: "barToSpacerRatio", isSignal: true, isRequired: false, transformFunction: null }, middleLineVerticalPadding: { classPropertyName: "middleLineVerticalPadding", publicName: "middleLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, barColor: { classPropertyName: "barColor", publicName: "barColor", isSignal: true, isRequired: false, transformFunction: null }, spacerColor: { classPropertyName: "spacerColor", publicName: "spacerColor", isSignal: true, isRequired: false, transformFunction: null }, chartLabels: { classPropertyName: "chartLabels", publicName: "chartLabels", isSignal: true, isRequired: false, transformFunction: null }, sectionColors: { classPropertyName: "sectionColors", publicName: "sectionColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-container\" data-testid=\"funnel-chart\" #container (cngWindowResize)=\"updateChart()\">\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (!loading()) {\n @for (pos of sectionTooltips(); track pos.key) {\n <clr-signpost\n [attr.data-testid]=\"'funnel-chart-section-signpost-' + pos.key\"\n [style.left.px]=\"pos.x\"\n [style.top.px]=\"pos.y\"\n >\n <cds-icon\n clrSignpostTrigger\n [attr.data-testid]=\"'funnel-chart-section-signpost-trigger-' + pos.key\"\n shape=\"info-circle\"\n size=\"18\"\n />\n <clr-signpost-content\n clrPosition=\"bottom-left\"\n [attr.data-testid]=\"'funnel-chart-section-signpost-content-' + pos.key\"\n >\n <p class=\"mt-0\" [attr.data-testid]=\"'funnel-chart-section-description-' + pos.key\">{{ pos.description }}</p>\n </clr-signpost-content>\n </clr-signpost>\n }\n }\n @if (loading()) {\n <cng-bar-chart-skeleton data-testid=\"funnel-chart-skeleton\" orientation=\"vertical\" skeletonType=\"loading\" />\n }\n @if (tooltipPosition()) {\n @if (orientation() === 'centered') {\n <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <cng-chart-tooltip\n data-testid=\"funnel-chart-centered-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n tooltipOrientation=\"bottom\"\n [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n [tooltipClickable]=\"!selectedSpacerItem()\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n selectedItem() &&\n valueClicked.emit({\n value: selectedItem().value,\n label: selectedItem().label,\n key: selectedItem().key,\n section: undefined,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n @if (selectedSpacerItem()) {\n {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }}\n } @else {\n ({{ selectedItem().value }}) {{ selectedItem().label }}\n }\n </ng-container>\n\n @if (selectedSpacerItem()) {\n <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-transition\">\n <strong\n >{{ data()[selectedSpacerItem().index].value }} \u2192\n {{ data()[selectedSpacerItem().index + 1].value }}</strong\n >\n </p>\n @for (section of data()[selectedSpacerItem().index].sections ?? []; track section.key) {\n @let drillable = section.value > 0;\n <p\n class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-' + section.key\"\n >\n <strong>{{ section.label }}: </strong>\n <span\n class=\"row-right\"\n [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-value-' + section.key\"\n [class.has-more-info]=\"drillable\"\n (click)=\"\n drillable &&\n valueClicked.emit({\n value: section.value,\n label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n key: data()[selectedSpacerItem().index].key,\n section: section.key,\n })\n \"\n >{{ section.value }}</span\n >\n ({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n </p>\n }\n } @else {\n <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-percentage\">\n {{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}\n </p>\n }\n </cng-chart-tooltip>\n } @else {\n <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <cng-chart-tooltip\n data-testid=\"funnel-chart-default-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n tooltipOrientation=\"bottom\"\n [squareColor]=\"undefined\"\n [tooltipClickable]=\"false\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n >\n <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n @for (section of selectedItem().sections; track section.key) {\n @let drillable = section.value > 0;\n <p\n class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n [attr.data-testid]=\"'funnel-chart-default-tooltip-section-' + section.key\"\n >\n <span>\n <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n </span>\n <strong>{{ section.label }}: </strong>\n <span\n class=\"row-right\"\n [attr.data-testid]=\"'funnel-chart-default-tooltip-section-value-' + section.key\"\n [class.has-more-info]=\"drillable\"\n (click)=\"\n drillable &&\n valueClicked.emit({\n value: section.value,\n label: selectedItemLabel() + ': ' + section.label,\n key: selectedItem().key,\n section: section.key,\n })\n \"\n >{{ section.value }}</span\n >\n ({{ section.percentage }}%)\n </p>\n }\n\n <p class=\"tooltip-row mt-0-5\" data-testid=\"funnel-chart-default-tooltip-total\">\n <strong>{{ resolvedChartLabels().total }}: </strong>\n <span\n class=\"has-more-info\"\n data-testid=\"funnel-chart-default-tooltip-total-value\"\n (click)=\"\n valueClicked.emit({\n value: selectedItem().value,\n label: selectedItemLabel(),\n key: selectedItem().key,\n section: undefined,\n })\n \"\n >{{ selectedItem().value }}</span\n >\n </p>\n\n <ng-container ngProjectAs=\"cng-footer\">\n <p class=\"tooltip-row mt-0\" data-testid=\"funnel-chart-default-tooltip-all\">\n <strong>{{ resolvedChartLabels().all }}: </strong>\n <span class=\"row-right\" data-testid=\"funnel-chart-default-tooltip-all-value\">{{ total() }}</span>\n </p>\n </ng-container>\n </cng-chart-tooltip>\n }\n }\n @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n class=\"funnel-export-btn\"\n data-testid=\"funnel-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "component", type: i1.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i1.ClrSignpost, selector: "clr-signpost", inputs: ["clrSignpostTriggerAriaLabel", "clrSignpostHideTrigger"] }, { kind: "component", type: i1.ClrSignpostContent, selector: "clr-signpost-content", inputs: ["clrSignpostCloseAriaLabel", "clrPosition"] }, { kind: "directive", type: i1.ClrSignpostTrigger, selector: "[clrSignpostTrigger]" }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2892
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FunnelChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2893
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FunnelChartComponent, isStandalone: false, selector: "clr-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, exportButtonTitle: { classPropertyName: "exportButtonTitle", publicName: "exportButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null }, lineTextPadding: { classPropertyName: "lineTextPadding", publicName: "lineTextPadding", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, sideLineVerticalPadding: { classPropertyName: "sideLineVerticalPadding", publicName: "sideLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, minLineSize: { classPropertyName: "minLineSize", publicName: "minLineSize", isSignal: true, isRequired: false, transformFunction: null }, barToSpacerRatio: { classPropertyName: "barToSpacerRatio", publicName: "barToSpacerRatio", isSignal: true, isRequired: false, transformFunction: null }, middleLineVerticalPadding: { classPropertyName: "middleLineVerticalPadding", publicName: "middleLineVerticalPadding", isSignal: true, isRequired: false, transformFunction: null }, barColor: { classPropertyName: "barColor", publicName: "barColor", isSignal: true, isRequired: false, transformFunction: null }, spacerColor: { classPropertyName: "spacerColor", publicName: "spacerColor", isSignal: true, isRequired: false, transformFunction: null }, chartLabels: { classPropertyName: "chartLabels", publicName: "chartLabels", isSignal: true, isRequired: false, transformFunction: null }, sectionColors: { classPropertyName: "sectionColors", publicName: "sectionColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueClicked: "valueClicked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-container\" data-testid=\"funnel-chart\" #container (cngWindowResize)=\"updateChart()\">\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (!loading()) {\n @for (pos of sectionTooltips(); track pos.key) {\n <clr-signpost\n [attr.data-testid]=\"'funnel-chart-section-signpost-' + pos.key\"\n [style.left.px]=\"pos.x\"\n [style.top.px]=\"pos.y\"\n >\n <cds-icon\n clrSignpostTrigger\n [attr.data-testid]=\"'funnel-chart-section-signpost-trigger-' + pos.key\"\n shape=\"info-circle\"\n size=\"18\"\n />\n <clr-signpost-content\n clrPosition=\"bottom-left\"\n [attr.data-testid]=\"'funnel-chart-section-signpost-content-' + pos.key\"\n >\n <p class=\"mt-0\" [attr.data-testid]=\"'funnel-chart-section-description-' + pos.key\">{{ pos.description }}</p>\n </clr-signpost-content>\n </clr-signpost>\n }\n }\n @if (loading()) {\n <cng-bar-chart-skeleton data-testid=\"funnel-chart-skeleton\" orientation=\"vertical\" skeletonType=\"loading\" />\n }\n @if (tooltipPosition()) {\n @if (orientation() === 'centered') {\n <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <cng-chart-tooltip\n data-testid=\"funnel-chart-centered-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n tooltipOrientation=\"bottom\"\n [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n [tooltipClickable]=\"!selectedSpacerItem()\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n selectedItem() &&\n valueClicked.emit({\n value: selectedItem().value,\n label: selectedItem().label,\n key: selectedItem().key,\n section: undefined,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n @if (selectedSpacerItem()) {\n {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }}\n } @else {\n ({{ selectedItem().value }}) {{ selectedItem().label }}\n }\n </ng-container>\n\n @if (selectedSpacerItem()) {\n <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-transition\">\n <strong\n >{{ data()[selectedSpacerItem().index].value }} \u2192\n {{ data()[selectedSpacerItem().index + 1].value }}</strong\n >\n </p>\n @for (section of data()[selectedSpacerItem().index].sections ?? []; track section.key) {\n @let drillable = section.value > 0;\n <p\n class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-' + section.key\"\n >\n <strong>{{ section.label }}: </strong>\n <span\n class=\"row-right\"\n [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-value-' + section.key\"\n [class.has-more-info]=\"drillable\"\n (click)=\"\n drillable &&\n valueClicked.emit({\n value: section.value,\n label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n key: data()[selectedSpacerItem().index].key,\n section: section.key,\n })\n \"\n >{{ section.value }}</span\n >\n ({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n </p>\n }\n } @else {\n <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-percentage\">\n {{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}\n </p>\n }\n </cng-chart-tooltip>\n } @else {\n <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <cng-chart-tooltip\n data-testid=\"funnel-chart-default-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n tooltipOrientation=\"bottom\"\n [squareColor]=\"undefined\"\n [tooltipClickable]=\"false\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n >\n <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n @for (section of selectedItem().sections; track section.key) {\n @let drillable = section.value > 0;\n <p\n class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n [attr.data-testid]=\"'funnel-chart-default-tooltip-section-' + section.key\"\n >\n <span>\n <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n </span>\n <strong>{{ section.label }}: </strong>\n <span\n class=\"row-right\"\n [attr.data-testid]=\"'funnel-chart-default-tooltip-section-value-' + section.key\"\n [class.has-more-info]=\"drillable\"\n (click)=\"\n drillable &&\n valueClicked.emit({\n value: section.value,\n label: selectedItemLabel() + ': ' + section.label,\n key: selectedItem().key,\n section: section.key,\n })\n \"\n >{{ section.value }}</span\n >\n ({{ section.percentage }}%)\n </p>\n }\n\n <p class=\"tooltip-row mt-0-5\" data-testid=\"funnel-chart-default-tooltip-total\">\n <strong>{{ resolvedChartLabels().total }}: </strong>\n <span\n class=\"has-more-info\"\n data-testid=\"funnel-chart-default-tooltip-total-value\"\n (click)=\"\n valueClicked.emit({\n value: selectedItem().value,\n label: selectedItemLabel(),\n key: selectedItem().key,\n section: undefined,\n })\n \"\n >{{ selectedItem().value }}</span\n >\n </p>\n\n <ng-container ngProjectAs=\"cng-footer\">\n <p class=\"tooltip-row mt-0\" data-testid=\"funnel-chart-default-tooltip-all\">\n <strong>{{ resolvedChartLabels().all }}: </strong>\n <span class=\"row-right\" data-testid=\"funnel-chart-default-tooltip-all-value\">{{ total() }}</span>\n </p>\n </ng-container>\n </cng-chart-tooltip>\n }\n }\n @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n class=\"funnel-export-btn\"\n data-testid=\"funnel-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "component", type: i1.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i1.ClrSignpost, selector: "clr-signpost", inputs: ["clrSignpostTriggerAriaLabel", "clrSignpostHideTrigger"] }, { kind: "component", type: i1.ClrSignpostContent, selector: "clr-signpost-content", inputs: ["clrSignpostCloseAriaLabel", "clrPosition"] }, { kind: "directive", type: i1.ClrSignpostTrigger, selector: "[clrSignpostTrigger]" }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { kind: "component", type: ChartSkeletonComponent, selector: "cng-bar-chart-skeleton", inputs: ["skeletonType", "orientation"] }, { kind: "component", type: ChartTooltipComponent, selector: "cng-chart-tooltip", inputs: ["tooltipPosition", "tooltipOrientation", "squareColor", "tooltipClickable"], outputs: ["tooltipClosed", "tooltipHeaderClicked"] }, { kind: "directive", type: OutsideClickDirective, selector: "[cngOutsideClick]", outputs: ["cngOutsideClick"] }, { kind: "directive", type: WindowResizeDirective, selector: "[cngWindowResize]", inputs: ["debounce", "includeFirst"], outputs: ["cngWindowResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2543
2894
|
}
|
|
2544
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2895
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FunnelChartComponent, decorators: [{
|
|
2545
2896
|
type: Component,
|
|
2546
2897
|
args: [{ selector: 'clr-funnel-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"funnel-container\" data-testid=\"funnel-chart\" #container (cngWindowResize)=\"updateChart()\">\n <svg [class.d-none]=\"loading() || !hasData()\" #chart></svg>\n\n @if (!loading()) {\n @for (pos of sectionTooltips(); track pos.key) {\n <clr-signpost\n [attr.data-testid]=\"'funnel-chart-section-signpost-' + pos.key\"\n [style.left.px]=\"pos.x\"\n [style.top.px]=\"pos.y\"\n >\n <cds-icon\n clrSignpostTrigger\n [attr.data-testid]=\"'funnel-chart-section-signpost-trigger-' + pos.key\"\n shape=\"info-circle\"\n size=\"18\"\n />\n <clr-signpost-content\n clrPosition=\"bottom-left\"\n [attr.data-testid]=\"'funnel-chart-section-signpost-content-' + pos.key\"\n >\n <p class=\"mt-0\" [attr.data-testid]=\"'funnel-chart-section-description-' + pos.key\">{{ pos.description }}</p>\n </clr-signpost-content>\n </clr-signpost>\n }\n }\n @if (loading()) {\n <cng-bar-chart-skeleton data-testid=\"funnel-chart-skeleton\" orientation=\"vertical\" skeletonType=\"loading\" />\n }\n @if (tooltipPosition()) {\n @if (orientation() === 'centered') {\n <!-- \u2500\u2500 Centered mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <cng-chart-tooltip\n data-testid=\"funnel-chart-centered-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n tooltipOrientation=\"bottom\"\n [squareColor]=\"selectedSpacerItem() ? centeredSpacerCssColor() : centeredBarCssColor()\"\n [tooltipClickable]=\"!selectedSpacerItem()\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n (tooltipHeaderClicked)=\"\n selectedItem() &&\n valueClicked.emit({\n value: selectedItem().value,\n label: selectedItem().label,\n key: selectedItem().key,\n section: undefined,\n })\n \"\n >\n <ng-container ngProjectAs=\"cng-title\">\n @if (selectedSpacerItem()) {\n {{ data()[selectedSpacerItem().index].label }} \u2192 {{ data()[selectedSpacerItem().index + 1].label }}\n } @else {\n ({{ selectedItem().value }}) {{ selectedItem().label }}\n }\n </ng-container>\n\n @if (selectedSpacerItem()) {\n <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-transition\">\n <strong\n >{{ data()[selectedSpacerItem().index].value }} \u2192\n {{ data()[selectedSpacerItem().index + 1].value }}</strong\n >\n </p>\n @for (section of data()[selectedSpacerItem().index].sections ?? []; track section.key) {\n @let drillable = section.value > 0;\n <p\n class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-' + section.key\"\n >\n <strong>{{ section.label }}: </strong>\n <span\n class=\"row-right\"\n [attr.data-testid]=\"'funnel-chart-centered-tooltip-section-value-' + section.key\"\n [class.has-more-info]=\"drillable\"\n (click)=\"\n drillable &&\n valueClicked.emit({\n value: section.value,\n label: data()[selectedSpacerItem().index].label + ': ' + section.label,\n key: data()[selectedSpacerItem().index].key,\n section: section.key,\n })\n \"\n >{{ section.value }}</span\n >\n ({{ pct(section.value, data()[selectedSpacerItem().index].value) }}%)\n </p>\n }\n } @else {\n <p class=\"mt-0\" data-testid=\"funnel-chart-centered-tooltip-percentage\">\n {{ pct(selectedItem().value, total()) }}% {{ resolvedChartLabels().all }}\n </p>\n }\n </cng-chart-tooltip>\n } @else {\n <!-- \u2500\u2500 Default mode tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <cng-chart-tooltip\n data-testid=\"funnel-chart-default-tooltip\"\n [tooltipPosition]=\"tooltipPosition()\"\n tooltipOrientation=\"bottom\"\n [squareColor]=\"undefined\"\n [tooltipClickable]=\"false\"\n (tooltipClosed)=\"resetTooltip()\"\n (cngOutsideClick)=\"resetTooltip()\"\n >\n <ng-container ngProjectAs=\"cng-title\">{{ selectedItemLabel() }}</ng-container>\n @for (section of selectedItem().sections; track section.key) {\n @let drillable = section.value > 0;\n <p\n class=\"tooltip-row mt-0 mt-0-5 d-flex\"\n [attr.data-testid]=\"'funnel-chart-default-tooltip-section-' + section.key\"\n >\n <span>\n <div class=\"color-square mr-0-5\" [style.background-color]=\"section.cssColor\"></div>\n </span>\n <strong>{{ section.label }}: </strong>\n <span\n class=\"row-right\"\n [attr.data-testid]=\"'funnel-chart-default-tooltip-section-value-' + section.key\"\n [class.has-more-info]=\"drillable\"\n (click)=\"\n drillable &&\n valueClicked.emit({\n value: section.value,\n label: selectedItemLabel() + ': ' + section.label,\n key: selectedItem().key,\n section: section.key,\n })\n \"\n >{{ section.value }}</span\n >\n ({{ section.percentage }}%)\n </p>\n }\n\n <p class=\"tooltip-row mt-0-5\" data-testid=\"funnel-chart-default-tooltip-total\">\n <strong>{{ resolvedChartLabels().total }}: </strong>\n <span\n class=\"has-more-info\"\n data-testid=\"funnel-chart-default-tooltip-total-value\"\n (click)=\"\n valueClicked.emit({\n value: selectedItem().value,\n label: selectedItemLabel(),\n key: selectedItem().key,\n section: undefined,\n })\n \"\n >{{ selectedItem().value }}</span\n >\n </p>\n\n <ng-container ngProjectAs=\"cng-footer\">\n <p class=\"tooltip-row mt-0\" data-testid=\"funnel-chart-default-tooltip-all\">\n <strong>{{ resolvedChartLabels().all }}: </strong>\n <span class=\"row-right\" data-testid=\"funnel-chart-default-tooltip-all-value\">{{ total() }}</span>\n </p>\n </ng-container>\n </cng-chart-tooltip>\n }\n }\n @if (showExportButton() && !loading() && hasData()) {\n <cng-chart-export-button\n class=\"funnel-export-btn\"\n data-testid=\"funnel-chart-export\"\n [svgRef]=\"svgElement()\"\n [filename]=\"exportFilename()\"\n [buttonTitle]=\"exportButtonTitle()\"\n />\n }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.funnel-container{height:100%;width:100%;max-width:1400px;margin:auto;position:relative}svg{width:100%;height:100%}clr-signpost{position:absolute!important}.tooltip-row{display:flex;justify-content:space-between;align-items:center}.row-right{margin-left:auto}.funnel-export-btn{position:absolute;bottom:0;right:0;opacity:0;pointer-events:none;transition:opacity .2s ease}.funnel-container:hover .funnel-export-btn{opacity:1;pointer-events:auto}\n"] }]
|
|
2547
2898
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], exportButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonTitle", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], textSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSize", required: false }] }], lineTextPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineTextPadding", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], sideLineVerticalPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideLineVerticalPadding", required: false }] }], minLineSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLineSize", required: false }] }], barToSpacerRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "barToSpacerRatio", required: false }] }], middleLineVerticalPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "middleLineVerticalPadding", required: false }] }], barColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "barColor", required: false }] }], spacerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacerColor", required: false }] }], chartLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartLabels", required: false }] }], sectionColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionColors", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
@@ -2607,10 +2958,10 @@ class AutoPositionDirective {
|
|
|
2607
2958
|
}
|
|
2608
2959
|
this.resizeObserver?.disconnect();
|
|
2609
2960
|
}
|
|
2610
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2611
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
2961
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AutoPositionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2962
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: AutoPositionDirective, isStandalone: true, selector: "clr-signpost-content[autoPosition]", ngImport: i0 }); }
|
|
2612
2963
|
}
|
|
2613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2964
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AutoPositionDirective, decorators: [{
|
|
2614
2965
|
type: Directive,
|
|
2615
2966
|
args: [{
|
|
2616
2967
|
selector: 'clr-signpost-content[autoPosition]',
|
|
@@ -2646,10 +2997,10 @@ class TenantFullDateRangeDirective {
|
|
|
2646
2997
|
result.setHours(hours, minutes, 0, 0);
|
|
2647
2998
|
return result;
|
|
2648
2999
|
}
|
|
2649
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2650
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.
|
|
3000
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TenantFullDateRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3001
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.20", type: TenantFullDateRangeDirective, isStandalone: true, selector: "clr-date-range-container[cngTenantFullDateRange]", queries: [{ propertyName: "start", first: true, predicate: ClrStartDateInput, descendants: true, isSignal: true }, { propertyName: "end", first: true, predicate: ClrEndDateInput, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
2651
3002
|
}
|
|
2652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3003
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TenantFullDateRangeDirective, decorators: [{
|
|
2653
3004
|
type: Directive,
|
|
2654
3005
|
args: [{
|
|
2655
3006
|
selector: 'clr-date-range-container[cngTenantFullDateRange]',
|
|
@@ -2667,15 +3018,17 @@ const CLR_CHARTS_DECLARATIONS = [
|
|
|
2667
3018
|
BarChartComponent,
|
|
2668
3019
|
ComboChartComponent,
|
|
2669
3020
|
FunnelChartComponent,
|
|
3021
|
+
GroupedBarChartComponent,
|
|
2670
3022
|
LineChartComponent,
|
|
2671
3023
|
PieChartComponent,
|
|
2672
3024
|
];
|
|
2673
3025
|
class ClrChartsModule {
|
|
2674
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2675
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
3026
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ClrChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3027
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.20", ngImport: i0, type: ClrChartsModule, declarations: [AreaChartComponent,
|
|
2676
3028
|
BarChartComponent,
|
|
2677
3029
|
ComboChartComponent,
|
|
2678
3030
|
FunnelChartComponent,
|
|
3031
|
+
GroupedBarChartComponent,
|
|
2679
3032
|
LineChartComponent,
|
|
2680
3033
|
PieChartComponent], imports: [CommonModule,
|
|
2681
3034
|
DecimalPipe,
|
|
@@ -2693,9 +3046,10 @@ class ClrChartsModule {
|
|
|
2693
3046
|
BarChartComponent,
|
|
2694
3047
|
ComboChartComponent,
|
|
2695
3048
|
FunnelChartComponent,
|
|
3049
|
+
GroupedBarChartComponent,
|
|
2696
3050
|
LineChartComponent,
|
|
2697
3051
|
PieChartComponent] }); }
|
|
2698
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
3052
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ClrChartsModule, imports: [CommonModule,
|
|
2699
3053
|
ClrAlertModule,
|
|
2700
3054
|
ClrIcon,
|
|
2701
3055
|
ClrSignpostModule,
|
|
@@ -2705,7 +3059,7 @@ class ClrChartsModule {
|
|
|
2705
3059
|
ChartSkeletonComponent,
|
|
2706
3060
|
ChartTooltipComponent] }); }
|
|
2707
3061
|
}
|
|
2708
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3062
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ClrChartsModule, decorators: [{
|
|
2709
3063
|
type: NgModule,
|
|
2710
3064
|
args: [{
|
|
2711
3065
|
imports: [
|
|
@@ -2738,5 +3092,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
2738
3092
|
* Generated bundle index. Do not edit.
|
|
2739
3093
|
*/
|
|
2740
3094
|
|
|
2741
|
-
export { AreaChartComponent, BarChartComponent, ClrChartsModule, ComboChartComponent, FunnelChartComponent, LineChartComponent, PieChartComponent };
|
|
3095
|
+
export { AreaChartComponent, BarChartComponent, ClrChartsModule, ComboChartComponent, FunnelChartComponent, GroupedBarChartComponent, LineChartComponent, PieChartComponent };
|
|
2742
3096
|
//# sourceMappingURL=porscheinformatik-clr-addons-charts.mjs.map
|