@hestia-earth/ui-components 0.36.16 → 0.36.17
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.
|
@@ -897,7 +897,7 @@ const getActiveBar = (chart) => {
|
|
|
897
897
|
return bar._model || undefined;
|
|
898
898
|
};
|
|
899
899
|
const defaultSettings$4 = { barWidth: 20, threshold: 10 };
|
|
900
|
-
const backgroundHoverPlugin = (settings) => {
|
|
900
|
+
const backgroundHoverPlugin = (settings = {}) => {
|
|
901
901
|
let nearBar = null;
|
|
902
902
|
const { barWidth, threshold } = {
|
|
903
903
|
...defaultSettings$4,
|
|
@@ -12847,12 +12847,18 @@ const csvHeaders = [
|
|
|
12847
12847
|
'Inputs value',
|
|
12848
12848
|
'Functional Unit'
|
|
12849
12849
|
];
|
|
12850
|
+
// Only show up to N emissions in the breakdown
|
|
12851
|
+
const maximumValues = 20;
|
|
12850
12852
|
const logsTotalValue = (logs, includeNegativeValues) => sum((includeNegativeValues ? logs : logs.filter(curr => curr.value >= 0)).map(v => v.value));
|
|
12851
12853
|
const valueRatio = (value, total) => toPrecision((value * 100) / total, 2);
|
|
12852
12854
|
const chartLabel = (value, total) => {
|
|
12853
12855
|
const ratio = valueRatio(value, total);
|
|
12854
12856
|
return value === 0 ? '0' : `${toPrecision(value, 3)}, ${ratio}%`;
|
|
12855
12857
|
};
|
|
12858
|
+
const chartBreakdownLabel = (logs, total) => {
|
|
12859
|
+
const values = logs.slice(maximumValues);
|
|
12860
|
+
return values.map(({ blankNodeTermId, value }) => `${blankNodeTermId}: ${chartLabel(value, total)}`).join('</br>');
|
|
12861
|
+
};
|
|
12856
12862
|
const logToCsv = (logs, impact) => [
|
|
12857
12863
|
csvHeaders.join(','),
|
|
12858
12864
|
...logs
|
|
@@ -12937,23 +12943,36 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
12937
12943
|
], ...(ngDevMode ? [{ debugName: "impacts" }] : []));
|
|
12938
12944
|
this.noData = computed(() => this.nonZeroLogs()?.length === 0, ...(ngDevMode ? [{ debugName: "noData" }] : []));
|
|
12939
12945
|
this.hasNegativeContributions = computed(() => this.nonZeroLogs()?.some(log => log.value < 0), ...(ngDevMode ? [{ debugName: "hasNegativeContributions" }] : []));
|
|
12946
|
+
this.values = computed(() => {
|
|
12947
|
+
const includedValues = this.nonZeroLogs()?.slice(0, maximumValues);
|
|
12948
|
+
const excludedValues = this.nonZeroLogs()?.slice(maximumValues);
|
|
12949
|
+
return [
|
|
12950
|
+
...includedValues,
|
|
12951
|
+
excludedValues.length
|
|
12952
|
+
? {
|
|
12953
|
+
blankNodeTermId: `${excludedValues.length} others`,
|
|
12954
|
+
value: sum(excludedValues.map(({ value }) => value))
|
|
12955
|
+
}
|
|
12956
|
+
: null
|
|
12957
|
+
].filter(Boolean);
|
|
12958
|
+
}, ...(ngDevMode ? [{ debugName: "values" }] : []));
|
|
12940
12959
|
this.csvContent = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(logToCsv(this.logs(), this.impactAssessment()))}`), ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
|
|
12941
12960
|
this.id = computed(() => this.impactAssessment()?.['@id'] || this.impactAssessment()?.id, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
12942
12961
|
this.downloadFilename = computed(() => `${this.id()}-logs.csv`, ...(ngDevMode ? [{ debugName: "downloadFilename" }] : []));
|
|
12943
12962
|
this.total = computed(() => logsTotalValue(this.nonZeroLogs(), false), ...(ngDevMode ? [{ debugName: "total" }] : []));
|
|
12944
|
-
this.labels = computed(() => this.
|
|
12963
|
+
this.labels = computed(() => this.values().map(({ blankNodeTermId }) => this.emissions()?.find(v => v['@id'] === blankNodeTermId)?.name || blankNodeTermId), ...(ngDevMode ? [{ debugName: "labels" }] : []));
|
|
12945
12964
|
this.datasets = computed(() => [
|
|
12946
12965
|
{
|
|
12947
12966
|
label: this.selectedTerm()?.name ?? '',
|
|
12948
12967
|
// do not show negative values in the chart
|
|
12949
|
-
data: this.
|
|
12950
|
-
backgroundColor: this.
|
|
12951
|
-
borderColor: this.
|
|
12968
|
+
data: this.values().map(({ value }) => Math.max(0, value)),
|
|
12969
|
+
backgroundColor: this.values().map(listColor),
|
|
12970
|
+
borderColor: this.values().map(listColor),
|
|
12952
12971
|
barThickness: 2,
|
|
12953
12972
|
barPercentage: 1,
|
|
12954
12973
|
categoryPercentage: 1,
|
|
12955
|
-
hoverBackgroundColor: this.
|
|
12956
|
-
hoverBorderColor: this.
|
|
12974
|
+
hoverBackgroundColor: this.values().map(listColorWithAlpha()),
|
|
12975
|
+
hoverBorderColor: this.values().map(listColorWithAlpha()),
|
|
12957
12976
|
hoverBorderWidth: 3
|
|
12958
12977
|
}
|
|
12959
12978
|
], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
|
|
@@ -12971,9 +12990,7 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
12971
12990
|
options: {
|
|
12972
12991
|
onClick: (event, activeElements) => {
|
|
12973
12992
|
const index = activeElements?.[0]?.['_index'];
|
|
12974
|
-
|
|
12975
|
-
const text = value ? chartLabel(value, this.total()) : '';
|
|
12976
|
-
text && !event.isTrusted && this.showTooltip(text, event.x, event.y);
|
|
12993
|
+
!event.isTrusted && this.showTooltip(index, event.x, event.y);
|
|
12977
12994
|
},
|
|
12978
12995
|
scales: {
|
|
12979
12996
|
xAxes: [
|
|
@@ -12986,7 +13003,6 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
12986
13003
|
}
|
|
12987
13004
|
}
|
|
12988
13005
|
}), ...(ngDevMode ? [{ debugName: "chartConfig" }] : []));
|
|
12989
|
-
this.tooltipContent = signal('', ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
|
|
12990
13006
|
this.tooltipX = signal(0, ...(ngDevMode ? [{ debugName: "tooltipX" }] : []));
|
|
12991
13007
|
this.tooltipY = signal(0, ...(ngDevMode ? [{ debugName: "tooltipY" }] : []));
|
|
12992
13008
|
// make sure selected term exists
|
|
@@ -13010,18 +13026,23 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
13010
13026
|
}
|
|
13011
13027
|
});
|
|
13012
13028
|
}
|
|
13013
|
-
showTooltip(
|
|
13014
|
-
this.tooltipContent.set(text);
|
|
13029
|
+
showTooltip(index, x, y) {
|
|
13015
13030
|
this.tooltipX.set(x);
|
|
13016
13031
|
this.tooltipY.set(y);
|
|
13017
|
-
|
|
13032
|
+
const { value } = this.values()[index] || {};
|
|
13033
|
+
const text = value
|
|
13034
|
+
? index === maximumValues
|
|
13035
|
+
? chartBreakdownLabel(this.nonZeroLogs(), this.total())
|
|
13036
|
+
: chartLabel(value, this.total())
|
|
13037
|
+
: '';
|
|
13038
|
+
text && setTimeout(() => this.tooltip().open({ data: text }));
|
|
13018
13039
|
}
|
|
13019
13040
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13020
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2\">\n <div class=\"field has-addons is-mb-0 is-flex-grow-1\">\n <div class=\"control\">\n <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n </div>\n @if (terms()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small is-secondary\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small is-secondary\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @if (methods().length > 1) {\n <option [ngValue]=\"undefined\">Filter Model</option>\n }\n @for (term of methods(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n </div>\n\n <a\n class=\"button is-ghost is-small\"\n [href]=\"csvContent()\"\n [download]=\"downloadFilename()\"\n ngbTooltip=\"Download as CSV\"\n placement=\"bottom\">\n <he-svg-icon name=\"download\" />\n </a>\n </div>\n}\n\n<div class=\"chart-area-border\">\n @if (!logsResource.isLoading() && noData()) {\n <p class=\"has-text-centered\">\n <span>No breakdown available for</span>\n @if (selectedTerm()) {\n <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n }\n @if (selectedMethod()) {\n <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n }\n <span>.</span>\n </p>\n }\n <he-bar-chart\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [max]=\"total()\"\n [config]=\"chartConfig()\">\n <div\n class=\"is-invisible is-absolute | shadow-tooltip\"\n [style.left.px]=\"tooltipX()\"\n [style.top.px]=\"tooltipY()\"\n [ngbTooltip]=\"
|
|
13041
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2\">\n <div class=\"field has-addons is-mb-0 is-flex-grow-1\">\n <div class=\"control\">\n <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n </div>\n @if (terms()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small is-secondary\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small is-secondary\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @if (methods().length > 1) {\n <option [ngValue]=\"undefined\">Filter Model</option>\n }\n @for (term of methods(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n </div>\n\n <a\n class=\"button is-ghost is-small\"\n [href]=\"csvContent()\"\n [download]=\"downloadFilename()\"\n ngbTooltip=\"Download as CSV\"\n placement=\"bottom\">\n <he-svg-icon name=\"download\" />\n </a>\n </div>\n}\n\n<div class=\"chart-area-border\">\n @if (!logsResource.isLoading() && noData()) {\n <p class=\"has-text-centered\">\n <span>No breakdown available for</span>\n @if (selectedTerm()) {\n <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n }\n @if (selectedMethod()) {\n <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n }\n <span>.</span>\n </p>\n }\n <he-bar-chart\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [max]=\"total()\"\n [config]=\"chartConfig()\">\n <div\n class=\"is-invisible is-absolute | shadow-tooltip\"\n [style.left.px]=\"tooltipX()\"\n [style.top.px]=\"tooltipY()\"\n [ngbTooltip]=\"rawHtmlContent\"\n triggers=\"manual\"\n autoClose=\"outside\"\n placement=\"bottom\"\n #tooltip=\"ngbTooltip\"></div>\n\n <ng-template #rawHtmlContent let-rawString=\"data\">\n <div [innerHTML]=\"rawString\"></div>\n </ng-template>\n </he-bar-chart>\n\n @if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13021
13042
|
}
|
|
13022
13043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
|
|
13023
13044
|
type: Component$1,
|
|
13024
|
-
args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbTooltip, BarChartComponent], template: "@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2\">\n <div class=\"field has-addons is-mb-0 is-flex-grow-1\">\n <div class=\"control\">\n <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n </div>\n @if (terms()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small is-secondary\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small is-secondary\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @if (methods().length > 1) {\n <option [ngValue]=\"undefined\">Filter Model</option>\n }\n @for (term of methods(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n </div>\n\n <a\n class=\"button is-ghost is-small\"\n [href]=\"csvContent()\"\n [download]=\"downloadFilename()\"\n ngbTooltip=\"Download as CSV\"\n placement=\"bottom\">\n <he-svg-icon name=\"download\" />\n </a>\n </div>\n}\n\n<div class=\"chart-area-border\">\n @if (!logsResource.isLoading() && noData()) {\n <p class=\"has-text-centered\">\n <span>No breakdown available for</span>\n @if (selectedTerm()) {\n <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n }\n @if (selectedMethod()) {\n <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n }\n <span>.</span>\n </p>\n }\n <he-bar-chart\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [max]=\"total()\"\n [config]=\"chartConfig()\">\n <div\n class=\"is-invisible is-absolute | shadow-tooltip\"\n [style.left.px]=\"tooltipX()\"\n [style.top.px]=\"tooltipY()\"\n [ngbTooltip]=\"
|
|
13045
|
+
args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbTooltip, BarChartComponent], template: "@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2\">\n <div class=\"field has-addons is-mb-0 is-flex-grow-1\">\n <div class=\"control\">\n <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n </div>\n @if (terms()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small is-secondary\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small is-secondary\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @if (methods().length > 1) {\n <option [ngValue]=\"undefined\">Filter Model</option>\n }\n @for (term of methods(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n </div>\n\n <a\n class=\"button is-ghost is-small\"\n [href]=\"csvContent()\"\n [download]=\"downloadFilename()\"\n ngbTooltip=\"Download as CSV\"\n placement=\"bottom\">\n <he-svg-icon name=\"download\" />\n </a>\n </div>\n}\n\n<div class=\"chart-area-border\">\n @if (!logsResource.isLoading() && noData()) {\n <p class=\"has-text-centered\">\n <span>No breakdown available for</span>\n @if (selectedTerm()) {\n <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n }\n @if (selectedMethod()) {\n <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n }\n <span>.</span>\n </p>\n }\n <he-bar-chart\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [max]=\"total()\"\n [config]=\"chartConfig()\">\n <div\n class=\"is-invisible is-absolute | shadow-tooltip\"\n [style.left.px]=\"tooltipX()\"\n [style.top.px]=\"tooltipY()\"\n [ngbTooltip]=\"rawHtmlContent\"\n triggers=\"manual\"\n autoClose=\"outside\"\n placement=\"bottom\"\n #tooltip=\"ngbTooltip\"></div>\n\n <ng-template #rawHtmlContent let-rawString=\"data\">\n <div [innerHTML]=\"rawString\"></div>\n </ng-template>\n </he-bar-chart>\n\n @if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
|
|
13025
13046
|
}], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }], tooltip: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }] } });
|
|
13026
13047
|
|
|
13027
13048
|
const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
|
|
@@ -13676,7 +13697,7 @@ class SitesManagementChartComponent {
|
|
|
13676
13697
|
}
|
|
13677
13698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesManagementChartComponent, decorators: [{
|
|
13678
13699
|
type: Component$1,
|
|
13679
|
-
args: [{ selector: 'he-sites-management-chart', imports: [FormsModule, KeyValuePipe, ChartComponent,
|
|
13700
|
+
args: [{ selector: 'he-sites-management-chart', imports: [FormsModule, KeyValuePipe, ChartComponent, HorizontalButtonsGroupComponent], template: "@if (termTypes().length > 1) {\n <he-horizontal-buttons-group [buttons]=\"termTypeButtons()\" [(ngModel)]=\"termTypeModel\" styles=\"primary\" />\n}\n\n<div class=\"chart-area-border\">\n <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig\" />\n</div>\n\n<div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-p-2 is-mt-2 | chart-area-border legend-container\">\n @for (color of chartColors() | keyvalue; track color.key) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n <span class=\"is-size-7\">{{ color.key }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}\n"] }]
|
|
13680
13701
|
}], ctorParameters: () => [], propDecorators: { site: [{ type: i0.Input, args: [{ isSignal: true, alias: "site", required: true }] }] } });
|
|
13681
13702
|
|
|
13682
13703
|
var View;
|