@porscheinformatik/clr-addons 21.13.0 → 21.14.0
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 +65 -25
- package/fesm2022/porscheinformatik-clr-addons-charts.mjs.map +1 -1
- package/fesm2022/porscheinformatik-clr-addons.mjs +36 -35
- package/fesm2022/porscheinformatik-clr-addons.mjs.map +1 -1
- package/package.json +3 -3
- package/types/porscheinformatik-clr-addons-charts.d.ts +22 -7
|
@@ -26,6 +26,8 @@ const TOO_MANY_ITEMS_ALERT_TYPE = 'warning';
|
|
|
26
26
|
const NO_ITEMS_MESSAGE = 'no items';
|
|
27
27
|
const NO_ITEMS_ALERT_TYPE = 'info';
|
|
28
28
|
const ALL_ITEMS_ZERO_MESSAGE = 'all chart values are 0';
|
|
29
|
+
const ERROR_ALERT_MESSAGE = 'Error when loading data';
|
|
30
|
+
const ERROR_ALERT_TYPE = 'danger';
|
|
29
31
|
|
|
30
32
|
/**
|
|
31
33
|
* Converts a chart color value to a CSS-compatible string.
|
|
@@ -434,7 +436,7 @@ class ChartExportButtonComponent {
|
|
|
434
436
|
<button clrDropdownItem data-testid="chart-export-png-button" (click)="export('png')">PNG</button>
|
|
435
437
|
</clr-dropdown-menu>
|
|
436
438
|
</clr-dropdown>
|
|
437
|
-
`, 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 }); }
|
|
439
|
+
`, 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: ["role", "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", "innerOffset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
438
440
|
}
|
|
439
441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
|
|
440
442
|
type: Component,
|
|
@@ -543,7 +545,7 @@ class ChartTooltipComponent {
|
|
|
543
545
|
this.toChartColor = toChartColor;
|
|
544
546
|
}
|
|
545
547
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
546
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }); }
|
|
548
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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", "innerOffset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
547
549
|
}
|
|
548
550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartTooltipComponent, decorators: [{
|
|
549
551
|
type: Component,
|
|
@@ -684,6 +686,8 @@ class BarChartComponent extends ChartBase {
|
|
|
684
686
|
this.stacks = input(undefined, ...(ngDevMode ? [{ debugName: "stacks" }] : /* istanbul ignore next */ []));
|
|
685
687
|
this.orientation = input.required(...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
686
688
|
this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
|
|
689
|
+
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
690
|
+
this.error = input(ERROR_ALERT_MESSAGE, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
687
691
|
this.barSizePx = input(15, ...(ngDevMode ? [{ debugName: "barSizePx" }] : /* istanbul ignore next */ []));
|
|
688
692
|
this.barAreaSizePx = input(40, ...(ngDevMode ? [{ debugName: "barAreaSizePx" }] : /* istanbul ignore next */ []));
|
|
689
693
|
this.tooltipPercentOfTotal = input('of total', ...(ngDevMode ? [{ debugName: "tooltipPercentOfTotal" }] : /* istanbul ignore next */ []));
|
|
@@ -731,7 +735,10 @@ class BarChartComponent extends ChartBase {
|
|
|
731
735
|
.filter(d => d.value > 0)
|
|
732
736
|
.map(d => d.stackKey)).size, ...(ngDevMode ? [{ debugName: "showingBarCount" }] : /* istanbul ignore next */ []));
|
|
733
737
|
this.alertMessageAndType = computed(() => {
|
|
734
|
-
if (this.
|
|
738
|
+
if (this.hasError()) {
|
|
739
|
+
return [this.error(), ERROR_ALERT_TYPE];
|
|
740
|
+
}
|
|
741
|
+
else if (this.loading()) {
|
|
735
742
|
return undefined;
|
|
736
743
|
}
|
|
737
744
|
if (this.allValuesZero()) {
|
|
@@ -1094,12 +1101,12 @@ class BarChartComponent extends ChartBase {
|
|
|
1094
1101
|
return Math.floor(height / BarChartComponent.HORIZONTAL_BAR_MIN_HEIGHT_PX);
|
|
1095
1102
|
}
|
|
1096
1103
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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%;position:absolute;inset:0}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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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 }); }
|
|
1104
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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() || hasError()\" #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() || hasError()) {\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() && !hasError()) {\n <cng-chart-legend data-testid=\"bar-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && data()?.length && !hasError()) {\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%;position:absolute;inset:0}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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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 }); }
|
|
1098
1105
|
}
|
|
1099
1106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: BarChartComponent, decorators: [{
|
|
1100
1107
|
type: Component,
|
|
1101
|
-
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%;position:absolute;inset:0}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"] }]
|
|
1102
|
-
}], 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"] }] } });
|
|
1108
|
+
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() || hasError()\" #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() || hasError()) {\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() && !hasError()) {\n <cng-chart-legend data-testid=\"bar-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && data()?.length && !hasError()) {\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%;position:absolute;inset:0}cng-bar-chart-skeleton{height:100%}.percentage-info{margin-left:15px}\n"] }]
|
|
1109
|
+
}], 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 }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", 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"] }] } });
|
|
1103
1110
|
|
|
1104
1111
|
class GroupedBarChartComponent extends ChartBase {
|
|
1105
1112
|
constructor() {
|
|
@@ -1108,6 +1115,8 @@ class GroupedBarChartComponent extends ChartBase {
|
|
|
1108
1115
|
this.groups = input(undefined, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
|
|
1109
1116
|
this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
1110
1117
|
this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
|
|
1118
|
+
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
1119
|
+
this.error = input(ERROR_ALERT_MESSAGE, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
1111
1120
|
this.barSizePx = input(12, ...(ngDevMode ? [{ debugName: "barSizePx" }] : /* istanbul ignore next */ []));
|
|
1112
1121
|
this.groupAreaSizePx = input(60, ...(ngDevMode ? [{ debugName: "groupAreaSizePx" }] : /* istanbul ignore next */ []));
|
|
1113
1122
|
/** Width reserved for horizontal Y-axis group labels (px). */
|
|
@@ -1145,6 +1154,9 @@ class GroupedBarChartComponent extends ChartBase {
|
|
|
1145
1154
|
return items;
|
|
1146
1155
|
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
1147
1156
|
this.alertMessageAndType = computed(() => {
|
|
1157
|
+
if (this.hasError()) {
|
|
1158
|
+
return [this.error(), ERROR_ALERT_TYPE];
|
|
1159
|
+
}
|
|
1148
1160
|
if (this.loading()) {
|
|
1149
1161
|
return undefined;
|
|
1150
1162
|
}
|
|
@@ -1517,12 +1529,12 @@ class GroupedBarChartComponent extends ChartBase {
|
|
|
1517
1529
|
this.slicedDataPoints.set([]);
|
|
1518
1530
|
}
|
|
1519
1531
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GroupedBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, yAxisLabelWidthPx: { classPropertyName: "yAxisLabelWidthPx", publicName: "yAxisLabelWidthPx", 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 }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showValueOnHover: { classPropertyName: "showValueOnHover", publicName: "showValueOnHover", 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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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 }); }
|
|
1532
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 }, yAxisLabelWidthPx: { classPropertyName: "yAxisLabelWidthPx", publicName: "yAxisLabelWidthPx", 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 }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showValueOnHover: { classPropertyName: "showValueOnHover", publicName: "showValueOnHover", 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() || hasError()\"\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() || hasError()) {\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() && !hasError()) {\n <cng-chart-legend [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && data()?.length && !hasError()) {\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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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 }); }
|
|
1521
1533
|
}
|
|
1522
1534
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: GroupedBarChartComponent, decorators: [{
|
|
1523
1535
|
type: Component,
|
|
1524
|
-
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"] }]
|
|
1525
|
-
}], 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 }] }], yAxisLabelWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabelWidthPx", 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 }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showValueOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueOnHover", 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"] }] } });
|
|
1536
|
+
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() || hasError()\"\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() || hasError()) {\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() && !hasError()) {\n <cng-chart-legend [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && data()?.length && !hasError()) {\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"] }]
|
|
1537
|
+
}], 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 }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], barSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "barSizePx", required: false }] }], groupAreaSizePx: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupAreaSizePx", required: false }] }], yAxisLabelWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisLabelWidthPx", 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 }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showValueOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueOnHover", 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"] }] } });
|
|
1526
1538
|
|
|
1527
1539
|
/*
|
|
1528
1540
|
* Copyright (c) 2018-2026 Porsche Informatik. All Rights Reserved.
|
|
@@ -1664,6 +1676,8 @@ class LineChartComponent extends ChartBase {
|
|
|
1664
1676
|
this.showExportButton = input(false, ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
|
|
1665
1677
|
this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
|
|
1666
1678
|
this.exportFilename = input('line-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
|
|
1679
|
+
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
1680
|
+
this.error = input(ERROR_ALERT_MESSAGE, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
1667
1681
|
this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
|
|
1668
1682
|
this.tooltipPercentOfTotal = input('of total', ...(ngDevMode ? [{ debugName: "tooltipPercentOfTotal" }] : /* istanbul ignore next */ []));
|
|
1669
1683
|
/** Optional label rendered below the X axis. */
|
|
@@ -1677,6 +1691,9 @@ class LineChartComponent extends ChartBase {
|
|
|
1677
1691
|
this.hasData = computed(() => this.series().some(s => s.data.length > 0), ...(ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []));
|
|
1678
1692
|
this.total = computed(() => this.series().reduce((acc, s) => acc + s.data.reduce((a, d) => a + d.value, 0), 0), ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
1679
1693
|
this.alertMessageAndType = computed(() => {
|
|
1694
|
+
if (this.hasError()) {
|
|
1695
|
+
return [this.error(), ERROR_ALERT_TYPE];
|
|
1696
|
+
}
|
|
1680
1697
|
if (this.loading()) {
|
|
1681
1698
|
return undefined;
|
|
1682
1699
|
}
|
|
@@ -1822,12 +1839,12 @@ class LineChartComponent extends ChartBase {
|
|
|
1822
1839
|
this.selectedItem.set({ ...point, seriesKey: series.key, seriesLabel: series.label, color: series.color });
|
|
1823
1840
|
}
|
|
1824
1841
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, showValueOnHover: { classPropertyName: "showValueOnHover", publicName: "showValueOnHover", 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
|
|
1842
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, showValueOnHover: { classPropertyName: "showValueOnHover", publicName: "showValueOnHover", 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 }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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() || hasError()\" #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 }\n @if (loading() || !hasData() || hasError()) {\n <cng-bar-chart-skeleton\n data-testid=\"line-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\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 && !hasError()) {\n <cng-chart-legend data-testid=\"line-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && hasData() && !hasError()) {\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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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 }); }
|
|
1826
1843
|
}
|
|
1827
1844
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: LineChartComponent, decorators: [{
|
|
1828
1845
|
type: Component,
|
|
1829
|
-
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
|
|
1830
|
-
}], 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 }] }], showValueOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueOnHover", 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"] }] } });
|
|
1846
|
+
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() || hasError()\" #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 }\n @if (loading() || !hasData() || hasError()) {\n <cng-bar-chart-skeleton\n data-testid=\"line-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\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 && !hasError()) {\n <cng-chart-legend data-testid=\"line-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && hasData() && !hasError()) {\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"] }]
|
|
1847
|
+
}], 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 }] }], showValueOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueOnHover", 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 }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", 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"] }] } });
|
|
1831
1848
|
|
|
1832
1849
|
class AreaChartComponent extends ChartBase {
|
|
1833
1850
|
constructor() {
|
|
@@ -1840,6 +1857,8 @@ class AreaChartComponent extends ChartBase {
|
|
|
1840
1857
|
this.exportFilename = input('area-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
|
|
1841
1858
|
/** Area fill opacity (0–1). Default: 0.2. */
|
|
1842
1859
|
this.areaOpacity = input(0.2, ...(ngDevMode ? [{ debugName: "areaOpacity" }] : /* istanbul ignore next */ []));
|
|
1860
|
+
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
1861
|
+
this.error = input(ERROR_ALERT_MESSAGE, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
1843
1862
|
this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
|
|
1844
1863
|
this.tooltipPercentOfTotal = input('of total', ...(ngDevMode ? [{ debugName: "tooltipPercentOfTotal" }] : /* istanbul ignore next */ []));
|
|
1845
1864
|
/** Optional label rendered below the X axis. */
|
|
@@ -1851,6 +1870,9 @@ class AreaChartComponent extends ChartBase {
|
|
|
1851
1870
|
this.hasData = computed(() => this.series().some(s => s.data.length > 0), ...(ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []));
|
|
1852
1871
|
this.total = computed(() => this.series().reduce((acc, s) => acc + s.data.reduce((a, d) => a + d.value, 0), 0), ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
1853
1872
|
this.alertMessageAndType = computed(() => {
|
|
1873
|
+
if (this.hasError()) {
|
|
1874
|
+
return [this.error(), ERROR_ALERT_TYPE];
|
|
1875
|
+
}
|
|
1854
1876
|
if (this.loading()) {
|
|
1855
1877
|
return undefined;
|
|
1856
1878
|
}
|
|
@@ -1959,12 +1981,12 @@ class AreaChartComponent extends ChartBase {
|
|
|
1959
1981
|
this.selectedItem.set({ ...point, seriesKey: series.key, seriesLabel: series.label, color: series.color });
|
|
1960
1982
|
}
|
|
1961
1983
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1962
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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
|
|
1984
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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() || hasError()\" #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 }\n @if (loading() || !hasData() || hasError()) {\n <cng-bar-chart-skeleton\n data-testid=\"area-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\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 && !hasError()) {\n <cng-chart-legend data-testid=\"area-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && hasData() && !hasError()) {\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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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 }); }
|
|
1963
1985
|
}
|
|
1964
1986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AreaChartComponent, decorators: [{
|
|
1965
1987
|
type: Component,
|
|
1966
|
-
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
|
|
1967
|
-
}], 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"] }] } });
|
|
1988
|
+
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() || hasError()\" #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 }\n @if (loading() || !hasData() || hasError()) {\n <cng-bar-chart-skeleton\n data-testid=\"area-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\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 && !hasError()) {\n <cng-chart-legend data-testid=\"area-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && hasData() && !hasError()) {\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"] }]
|
|
1989
|
+
}], 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 }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", 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"] }] } });
|
|
1968
1990
|
|
|
1969
1991
|
class ComboChartComponent extends ChartBase {
|
|
1970
1992
|
constructor() {
|
|
@@ -1978,6 +2000,8 @@ class ComboChartComponent extends ChartBase {
|
|
|
1978
2000
|
this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
|
|
1979
2001
|
this.exportFilename = input('combo-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
|
|
1980
2002
|
this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
|
|
2003
|
+
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2004
|
+
this.error = input(ERROR_ALERT_MESSAGE, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
1981
2005
|
this.tooltipPercentOfTotal = input('of total', ...(ngDevMode ? [{ debugName: "tooltipPercentOfTotal" }] : /* istanbul ignore next */ []));
|
|
1982
2006
|
/** Optional label rendered below the X axis. */
|
|
1983
2007
|
this.xAxisLabel = input('', ...(ngDevMode ? [{ debugName: "xAxisLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -2001,6 +2025,9 @@ class ComboChartComponent extends ChartBase {
|
|
|
2001
2025
|
return barTotal + lineTotal;
|
|
2002
2026
|
}, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
2003
2027
|
this.alertMessageAndType = computed(() => {
|
|
2028
|
+
if (this.hasError()) {
|
|
2029
|
+
return [this.error(), ERROR_ALERT_TYPE];
|
|
2030
|
+
}
|
|
2004
2031
|
if (this.loading()) {
|
|
2005
2032
|
return undefined;
|
|
2006
2033
|
}
|
|
@@ -2033,7 +2060,7 @@ class ComboChartComponent extends ChartBase {
|
|
|
2033
2060
|
// ── Chart rendering ──────────────────────────────────────────────────────────
|
|
2034
2061
|
updateChart() {
|
|
2035
2062
|
this.svg.selectAll('*').remove();
|
|
2036
|
-
if (this.loading() || !this.hasData()) {
|
|
2063
|
+
if (this.loading() || !this.hasData() || this.hasError()) {
|
|
2037
2064
|
return;
|
|
2038
2065
|
}
|
|
2039
2066
|
const { width: cw, height: ch } = this.getContainerDimensions();
|
|
@@ -2254,12 +2281,12 @@ class ComboChartComponent extends ChartBase {
|
|
|
2254
2281
|
}
|
|
2255
2282
|
}
|
|
2256
2283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ComboChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2257
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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
|
|
2284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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() || hasError()\" #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 }\n @if (loading() || !hasData() || hasError()) {\n <cng-bar-chart-skeleton\n data-testid=\"combo-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\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 && !hasError()) {\n <cng-chart-legend data-testid=\"combo-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && hasData() && !hasError()) {\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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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 }); }
|
|
2258
2285
|
}
|
|
2259
2286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ComboChartComponent, decorators: [{
|
|
2260
2287
|
type: Component,
|
|
2261
|
-
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
|
|
2262
|
-
}], 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"] }] } });
|
|
2288
|
+
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() || hasError()\" #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 }\n @if (loading() || !hasData() || hasError()) {\n <cng-bar-chart-skeleton\n data-testid=\"combo-chart-skeleton\"\n orientation=\"vertical\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n />\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 && !hasError()) {\n <cng-chart-legend data-testid=\"combo-chart-legend\" [items]=\"legendItems()\" />\n }\n @if (showExportButton() && !loading() && hasData() && !hasError()) {\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"] }]
|
|
2289
|
+
}], 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 }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", 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"] }] } });
|
|
2263
2290
|
|
|
2264
2291
|
class DonutChartSkeletonComponent {
|
|
2265
2292
|
constructor() {
|
|
@@ -2370,6 +2397,8 @@ class PieChartComponent extends ChartBase {
|
|
|
2370
2397
|
this.tooltipOrientation = input('top', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
|
|
2371
2398
|
this.innerRadiusRatio = input(0.5, ...(ngDevMode ? [{ debugName: "innerRadiusRatio" }] : /* istanbul ignore next */ []));
|
|
2372
2399
|
this.excludeZeroItemValuesFromLegend = input(true, ...(ngDevMode ? [{ debugName: "excludeZeroItemValuesFromLegend" }] : /* istanbul ignore next */ []));
|
|
2400
|
+
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2401
|
+
this.error = input(ERROR_ALERT_MESSAGE, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2373
2402
|
this.noItemsMessage = input(NO_ITEMS_MESSAGE, ...(ngDevMode ? [{ debugName: "noItemsMessage" }] : /* istanbul ignore next */ []));
|
|
2374
2403
|
this.tooltipPercentOfTotal = input('of total', ...(ngDevMode ? [{ debugName: "tooltipPercentOfTotal" }] : /* istanbul ignore next */ []));
|
|
2375
2404
|
this.valueClicked = output();
|
|
@@ -2377,6 +2406,9 @@ class PieChartComponent extends ChartBase {
|
|
|
2377
2406
|
this.hasData = computed(() => this.data()?.some(d => d.value > 0), ...(ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []));
|
|
2378
2407
|
this.total = computed(() => this.data()?.reduce((acc, d) => acc + d.value, 0) ?? 0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
2379
2408
|
this.alertMessageAndType = computed(() => {
|
|
2409
|
+
if (this.hasError()) {
|
|
2410
|
+
return [this.error(), ERROR_ALERT_TYPE];
|
|
2411
|
+
}
|
|
2380
2412
|
if (this.loading()) {
|
|
2381
2413
|
return undefined;
|
|
2382
2414
|
}
|
|
@@ -2537,12 +2569,12 @@ class PieChartComponent extends ChartBase {
|
|
|
2537
2569
|
this.valueClicked.emit({ key: item.key, label: item.label, value: item.value });
|
|
2538
2570
|
}
|
|
2539
2571
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2540
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, formatCenterValue: { classPropertyName: "formatCenterValue", publicName: "formatCenterValue", isSignal: true, isRequired: false, transformFunction: null }, formatSlices: { classPropertyName: "formatSlices", publicName: "formatSlices", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", 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 }, innerRadiusRatio: { classPropertyName: "innerRadiusRatio", publicName: "innerRadiusRatio", isSignal: true, isRequired: false, transformFunction: null }, excludeZeroItemValuesFromLegend: { classPropertyName: "excludeZeroItemValuesFromLegend", publicName: "excludeZeroItemValuesFromLegend", 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 (centerValue() != null && !showSkeleton()) {\n <div class=\"center-text\">\n <div\n class=\"center-number has-more-info\"\n (click)=\"\n valueClicked.emit({\n value: centerValue(),\n })\n \"\n >\n {{ centerValue() }}\n </div>\n @if (centerLabel()) {\n <div class=\"center-sublabel-text\">{{ centerLabel() }}</div>\n }\n </div>\n }\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 }\n @if (loading() || !hasData()) {\n <cng-donut-chart-skeleton\n data-testid=\"pie-chart-skeleton\"\n [innerRadiusRatio]=\"0.55\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n [class.pt-3]=\"!!alertMessageAndType()\"\n />\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()) {\n <cng-chart-legend-skeleton [count]=\"2\" [skeletonType]=\"'loading'\" [class.legend-top]=\"legendPosition() === 'top'\" />\n } @else if (showLegend() && !loading() && legendItems().length && !alertMessageAndType()) {\n <cng-chart-legend\n data-testid=\"pie-chart-legend\"\n [items]=\"legendItems()\"\n [hoveredIndex]=\"hoveredIndex() ?? -1\"\n (itemHover)=\"onLegendHover($event.index, $event.hover)\"\n (clicked)=\"onLegendClick($event)\"\n [class.legend-top]=\"legendPosition() === 'top'\"\n />\n }\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 1 auto;height:auto;min-height:0;position:relative}svg{height:100%;width:100%}cng-donut-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-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.center-number{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-decoration-color:var(--clr-color-neutral-600, #666);text-underline-offset:3px;font-size:1.4rem;font-weight:600;color:var(--cds-global-color-gray-900, #21333b);pointer-events:auto;cursor:pointer}.center-sublabel-text{font-size:.75rem;color:var(--cds-global-color-construction-400, #666);margin-top:2px}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}.legend-top{order:-1}\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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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: "component", type: DonutChartSkeletonComponent, selector: "cng-donut-chart-skeleton", inputs: ["donutSize", "innerRadiusRatio", "skeletonType"] }, { kind: "component", type: ChartLegendSkeletonComponent, selector: "cng-chart-legend-skeleton", inputs: ["orientation", "count", "skeletonType"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2572
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, formatCenterValue: { classPropertyName: "formatCenterValue", publicName: "formatCenterValue", isSignal: true, isRequired: false, transformFunction: null }, formatSlices: { classPropertyName: "formatSlices", publicName: "formatSlices", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, legendPosition: { classPropertyName: "legendPosition", publicName: "legendPosition", 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 }, innerRadiusRatio: { classPropertyName: "innerRadiusRatio", publicName: "innerRadiusRatio", isSignal: true, isRequired: false, transformFunction: null }, excludeZeroItemValuesFromLegend: { classPropertyName: "excludeZeroItemValuesFromLegend", publicName: "excludeZeroItemValuesFromLegend", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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() || hasError()\" #chart></svg>\n\n @if (centerValue() != null && !showSkeleton()) {\n <div class=\"center-text\">\n <div\n class=\"center-number has-more-info\"\n (click)=\"\n valueClicked.emit({\n value: centerValue(),\n })\n \"\n >\n {{ centerValue() }}\n </div>\n @if (centerLabel()) {\n <div class=\"center-sublabel-text\">{{ centerLabel() }}</div>\n }\n </div>\n }\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 }\n @if (loading() || !hasData() || hasError()) {\n <cng-donut-chart-skeleton\n data-testid=\"pie-chart-skeleton\"\n [innerRadiusRatio]=\"0.55\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n [class.pt-3]=\"!!alertMessageAndType()\"\n />\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() && !hasError()) {\n <cng-chart-legend-skeleton [count]=\"2\" [skeletonType]=\"'loading'\" [class.legend-top]=\"legendPosition() === 'top'\" />\n } @else if (showLegend() && !loading() && legendItems().length && !alertMessageAndType() && !hasError()) {\n <cng-chart-legend\n data-testid=\"pie-chart-legend\"\n [items]=\"legendItems()\"\n [hoveredIndex]=\"hoveredIndex() ?? -1\"\n (itemHover)=\"onLegendHover($event.index, $event.hover)\"\n (clicked)=\"onLegendClick($event)\"\n [class.legend-top]=\"legendPosition() === 'top'\"\n />\n }\n @if (showExportButton() && !loading() && hasData() && !hasError()) {\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 1 auto;height:auto;min-height:0;position:relative}svg{height:100%;width:100%}cng-donut-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-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.center-number{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-decoration-color:var(--clr-color-neutral-600, #666);text-underline-offset:3px;font-size:1.4rem;font-weight:600;color:var(--cds-global-color-gray-900, #21333b);pointer-events:auto;cursor:pointer}.center-sublabel-text{font-size:.75rem;color:var(--cds-global-color-construction-400, #666);margin-top:2px}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}.legend-top{order:-1}\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", "hoveredIndex", "loading", "orientation"], outputs: ["itemHover", "clicked"] }, { 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: "component", type: DonutChartSkeletonComponent, selector: "cng-donut-chart-skeleton", inputs: ["donutSize", "innerRadiusRatio", "skeletonType"] }, { kind: "component", type: ChartLegendSkeletonComponent, selector: "cng-chart-legend-skeleton", inputs: ["orientation", "count", "skeletonType"] }, { kind: "pipe", type: i8.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2541
2573
|
}
|
|
2542
2574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PieChartComponent, decorators: [{
|
|
2543
2575
|
type: Component,
|
|
2544
|
-
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 (centerValue() != null && !showSkeleton()) {\n <div class=\"center-text\">\n <div\n class=\"center-number has-more-info\"\n (click)=\"\n valueClicked.emit({\n value: centerValue(),\n })\n \"\n >\n {{ centerValue() }}\n </div>\n @if (centerLabel()) {\n <div class=\"center-sublabel-text\">{{ centerLabel() }}</div>\n }\n </div>\n }\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 }\n @if (loading() || !hasData()) {\n <cng-donut-chart-skeleton\n data-testid=\"pie-chart-skeleton\"\n [innerRadiusRatio]=\"0.55\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n [class.pt-3]=\"!!alertMessageAndType()\"\n />\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()) {\n <cng-chart-legend-skeleton [count]=\"2\" [skeletonType]=\"'loading'\" [class.legend-top]=\"legendPosition() === 'top'\" />\n } @else if (showLegend() && !loading() && legendItems().length && !alertMessageAndType()) {\n <cng-chart-legend\n data-testid=\"pie-chart-legend\"\n [items]=\"legendItems()\"\n [hoveredIndex]=\"hoveredIndex() ?? -1\"\n (itemHover)=\"onLegendHover($event.index, $event.hover)\"\n (clicked)=\"onLegendClick($event)\"\n [class.legend-top]=\"legendPosition() === 'top'\"\n />\n }\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 1 auto;height:auto;min-height:0;position:relative}svg{height:100%;width:100%}cng-donut-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-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.center-number{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-decoration-color:var(--clr-color-neutral-600, #666);text-underline-offset:3px;font-size:1.4rem;font-weight:600;color:var(--cds-global-color-gray-900, #21333b);pointer-events:auto;cursor:pointer}.center-sublabel-text{font-size:.75rem;color:var(--cds-global-color-construction-400, #666);margin-top:2px}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}.legend-top{order:-1}\n"] }]
|
|
2545
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], donut: [{ type: i0.Input, args: [{ isSignal: true, alias: "donut", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], formatCenterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatCenterValue", required: false }] }], formatSlices: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatSlices", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", 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 }] }], innerRadiusRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerRadiusRatio", required: false }] }], excludeZeroItemValuesFromLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeZeroItemValuesFromLegend", 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"] }] } });
|
|
2576
|
+
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() || hasError()\" #chart></svg>\n\n @if (centerValue() != null && !showSkeleton()) {\n <div class=\"center-text\">\n <div\n class=\"center-number has-more-info\"\n (click)=\"\n valueClicked.emit({\n value: centerValue(),\n })\n \"\n >\n {{ centerValue() }}\n </div>\n @if (centerLabel()) {\n <div class=\"center-sublabel-text\">{{ centerLabel() }}</div>\n }\n </div>\n }\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 }\n @if (loading() || !hasData() || hasError()) {\n <cng-donut-chart-skeleton\n data-testid=\"pie-chart-skeleton\"\n [innerRadiusRatio]=\"0.55\"\n [skeletonType]=\"loading() ? 'loading' : 'placeholder'\"\n [class.pt-3]=\"!!alertMessageAndType()\"\n />\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() && !hasError()) {\n <cng-chart-legend-skeleton [count]=\"2\" [skeletonType]=\"'loading'\" [class.legend-top]=\"legendPosition() === 'top'\" />\n } @else if (showLegend() && !loading() && legendItems().length && !alertMessageAndType() && !hasError()) {\n <cng-chart-legend\n data-testid=\"pie-chart-legend\"\n [items]=\"legendItems()\"\n [hoveredIndex]=\"hoveredIndex() ?? -1\"\n (itemHover)=\"onLegendHover($event.index, $event.hover)\"\n (clicked)=\"onLegendClick($event)\"\n [class.legend-top]=\"legendPosition() === 'top'\"\n />\n }\n @if (showExportButton() && !loading() && hasData() && !hasError()) {\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 1 auto;height:auto;min-height:0;position:relative}svg{height:100%;width:100%}cng-donut-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-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.center-number{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-decoration-color:var(--clr-color-neutral-600, #666);text-underline-offset:3px;font-size:1.4rem;font-weight:600;color:var(--cds-global-color-gray-900, #21333b);pointer-events:auto;cursor:pointer}.center-sublabel-text{font-size:.75rem;color:var(--cds-global-color-construction-400, #666);margin-top:2px}.center-sublabel{font-size:.65rem;fill:var(--cds-global-color-construction-400, #666);text-transform:uppercase;letter-spacing:.05em}.legend-top{order:-1}\n"] }]
|
|
2577
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], donut: [{ type: i0.Input, args: [{ isSignal: true, alias: "donut", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], formatCenterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatCenterValue", required: false }] }], formatSlices: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatSlices", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], legendPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendPosition", 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 }] }], innerRadiusRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerRadiusRatio", required: false }] }], excludeZeroItemValuesFromLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeZeroItemValuesFromLegend", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", 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"] }] } });
|
|
2546
2578
|
|
|
2547
2579
|
class FunnelSkeletonComponent {
|
|
2548
2580
|
constructor() {
|
|
@@ -2608,6 +2640,8 @@ class FunnelChartComponent extends ChartBase {
|
|
|
2608
2640
|
this.showExportButton = input(false, ...(ngDevMode ? [{ debugName: "showExportButton" }] : /* istanbul ignore next */ []));
|
|
2609
2641
|
this.exportButtonTitle = input('Export', ...(ngDevMode ? [{ debugName: "exportButtonTitle" }] : /* istanbul ignore next */ []));
|
|
2610
2642
|
this.exportFilename = input('funnel-chart', ...(ngDevMode ? [{ debugName: "exportFilename" }] : /* istanbul ignore next */ []));
|
|
2643
|
+
this.hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2644
|
+
this.error = input(ERROR_ALERT_MESSAGE, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2611
2645
|
/** Rendering mode. 'default' = horizontal bars with sections; 'centered' = centered trapezoid funnel. */
|
|
2612
2646
|
this.orientation = input('default', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
2613
2647
|
this.tooltipOrientation = input('bottom', ...(ngDevMode ? [{ debugName: "tooltipOrientation" }] : /* istanbul ignore next */ []));
|
|
@@ -2662,6 +2696,12 @@ class FunnelChartComponent extends ChartBase {
|
|
|
2662
2696
|
this.selectedItemLabel = computed(() => this.selectedItem()?.fullLabel ?? this.selectedItem()?.label ?? '', ...(ngDevMode ? [{ debugName: "selectedItemLabel" }] : /* istanbul ignore next */ []));
|
|
2663
2697
|
this.selectedSpacerItem = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedSpacerItem" }] : /* istanbul ignore next */ []));
|
|
2664
2698
|
this.sectionTooltips = signal([], ...(ngDevMode ? [{ debugName: "sectionTooltips" }] : /* istanbul ignore next */ []));
|
|
2699
|
+
this.alertMessageAndType = computed(() => {
|
|
2700
|
+
if (this.hasError()) {
|
|
2701
|
+
return [this.error(), ERROR_ALERT_TYPE];
|
|
2702
|
+
}
|
|
2703
|
+
return undefined;
|
|
2704
|
+
}, ...(ngDevMode ? [{ debugName: "alertMessageAndType" }] : /* istanbul ignore next */ []));
|
|
2665
2705
|
}
|
|
2666
2706
|
// ── Lifecycle ────────────────────────────────────────────────────────────────
|
|
2667
2707
|
ngOnChanges(_changes) {
|
|
@@ -3195,12 +3235,12 @@ class FunnelChartComponent extends ChartBase {
|
|
|
3195
3235
|
return Math.round(factor * value) / factor;
|
|
3196
3236
|
}
|
|
3197
3237
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FunnelChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3198
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, tooltipOrientation: { classPropertyName: "tooltipOrientation", publicName: "tooltipOrientation", isSignal: true, isRequired: false, transformFunction: null }, prefixTotalWithLabel: { classPropertyName: "prefixTotalWithLabel", publicName: "prefixTotalWithLabel", 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 }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyChartWhenNoData: { classPropertyName: "emptyChartWhenNoData", publicName: "emptyChartWhenNoData", 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 *clrIfOpen\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 @if (orientation() === 'centered') {\n <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" [centered]=\"true\" />\n } @else {\n <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" />\n }\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]=\"tooltipOrientation()\"\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()) }}% {{ tooltipPercentOfTotal() || 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]=\"tooltipOrientation()\"\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\n >{{\n (prefixTotalWithLabel() ? selectedItemLabel() + ' ' : '') + resolvedChartLabels().total\n }}\n : </strong\n >\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: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: ChartExportButtonComponent, selector: "cng-chart-export-button", inputs: ["svgRef", "filename", "buttonTitle", "legendItems"] }, { 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: "component", type: FunnelSkeletonComponent, selector: "cng-funnel-skeleton", inputs: ["centered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3238
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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 }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 }, prefixTotalWithLabel: { classPropertyName: "prefixTotalWithLabel", publicName: "prefixTotalWithLabel", 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 }, tooltipPercentOfTotal: { classPropertyName: "tooltipPercentOfTotal", publicName: "tooltipPercentOfTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyChartWhenNoData: { classPropertyName: "emptyChartWhenNoData", publicName: "emptyChartWhenNoData", 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() || hasError()\" #chart></svg>\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\n @if (!loading() && !hasError()) {\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 *clrIfOpen\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() || hasError()) {\n @if (orientation() === 'centered') {\n <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" [centered]=\"true\" />\n } @else {\n <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" />\n }\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]=\"tooltipOrientation()\"\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()) }}% {{ tooltipPercentOfTotal() || 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]=\"tooltipOrientation()\"\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\n >{{\n (prefixTotalWithLabel() ? selectedItemLabel() + ' ' : '') + resolvedChartLabels().total\n }}\n : </strong\n >\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() && !hasError()) {\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", "innerOffset"] }, { 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: "directive", type: i2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { 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: 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: "component", type: FunnelSkeletonComponent, selector: "cng-funnel-skeleton", inputs: ["centered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3199
3239
|
}
|
|
3200
3240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FunnelChartComponent, decorators: [{
|
|
3201
3241
|
type: Component,
|
|
3202
|
-
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 *clrIfOpen\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 @if (orientation() === 'centered') {\n <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" [centered]=\"true\" />\n } @else {\n <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" />\n }\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]=\"tooltipOrientation()\"\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()) }}% {{ tooltipPercentOfTotal() || 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]=\"tooltipOrientation()\"\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\n >{{\n (prefixTotalWithLabel() ? selectedItemLabel() + ' ' : '') + resolvedChartLabels().total\n }}\n : </strong\n >\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"] }]
|
|
3203
|
-
}], 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 }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], prefixTotalWithLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixTotalWithLabel", 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 }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], emptyChartWhenNoData: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyChartWhenNoData", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
3242
|
+
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() || hasError()\" #chart></svg>\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\n @if (!loading() && !hasError()) {\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 *clrIfOpen\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() || hasError()) {\n @if (orientation() === 'centered') {\n <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" [centered]=\"true\" />\n } @else {\n <cng-funnel-skeleton data-testid=\"funnel-chart-skeleton\" />\n }\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]=\"tooltipOrientation()\"\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()) }}% {{ tooltipPercentOfTotal() || 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]=\"tooltipOrientation()\"\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\n >{{\n (prefixTotalWithLabel() ? selectedItemLabel() + ' ' : '') + resolvedChartLabels().total\n }}\n : </strong\n >\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() && !hasError()) {\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"] }]
|
|
3243
|
+
}], 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 }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], tooltipOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOrientation", required: false }] }], prefixTotalWithLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixTotalWithLabel", 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 }] }], tooltipPercentOfTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPercentOfTotal", required: false }] }], emptyChartWhenNoData: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyChartWhenNoData", required: false }] }], valueClicked: [{ type: i0.Output, args: ["valueClicked"] }] } });
|
|
3204
3244
|
|
|
3205
3245
|
const PREFERRED_ORDER = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
|
|
3206
3246
|
class AutoPositionDirective {
|