@hestia-earth/ui-components 0.41.48 → 0.41.50
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.
|
@@ -16,7 +16,7 @@ import { select, selectAll } from 'd3-selection';
|
|
|
16
16
|
import { isEmpty, unique, monthsBefore, toPrecision, isNumber, isUndefined, toComma, duration, keyToLabel, ellipsis as ellipsis$1, sum, getPercentileValue, isEqual as isEqual$2, max, toDashCase, diffInDays, min } from '@hestia-earth/utils';
|
|
17
17
|
import { json2csv } from 'json-2-csv';
|
|
18
18
|
import { propertyValue as propertyValue$1, emptyValue } from '@hestia-earth/utils/dist/term';
|
|
19
|
-
import { getDefaultModelId, getModelGroup,
|
|
19
|
+
import { getDefaultModelId, getModelGroup, loadResourceKey, isInSystemBoundary } from '@hestia-earth/glossary';
|
|
20
20
|
import isEqual$1 from 'lodash.isequal';
|
|
21
21
|
import { DataState, filenameWithoutExt, nodeTypeToParam, allowedDataStates, SupportedExtensions, fileToExt, fileExt, maxFileSizeMb } from '@hestia-earth/api';
|
|
22
22
|
import { models as models$1, loadConfig, getMaxStage } from '@hestia-earth/engine-models';
|
|
@@ -6368,11 +6368,11 @@ class BarChartLegendComponent {
|
|
|
6368
6368
|
return Object.values(item).join('-');
|
|
6369
6369
|
}
|
|
6370
6370
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BarChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6371
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BarChartLegendComponent, isStandalone: true, selector: "he-bar-chart-legend", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n @for (value of data(); track trackByItem(value)) {\n @if (value.includedItems?.length) {\n <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n {{ value.
|
|
6371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BarChartLegendComponent, isStandalone: true, selector: "he-bar-chart-legend", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n @for (value of data(); track trackByItem(value)) {\n @if (value.includedItems?.length) {\n <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n {{ value.label }}\n </span>\n }\n\n <div\n class=\"is-flex is-align-items-center is-gap-4 | breakdown-legend--item\"\n [class.w-100]=\"value.includedItems?.length\">\n <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.backgroundColor || value.color\"></div>\n\n @if (value.includedItems?.length) {\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (subValue of value.includedItems; track trackByItem(subValue)) {\n <span class=\"is-size-7\">{{ subValue.label }}</span>\n }\n </div>\n } @else {\n <span class=\"is-size-7\">{{ value.label }}</span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.breakdown-legend{background:#fafafa}@media screen and (min-width:768px),print{.breakdown-legend{overflow-y:auto;max-height:150px}}@media screen and (max-width:767px){.breakdown-legend--item{width:100%}}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6372
6372
|
}
|
|
6373
6373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BarChartLegendComponent, decorators: [{
|
|
6374
6374
|
type: Component$1,
|
|
6375
|
-
args: [{ selector: 'he-bar-chart-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n @for (value of data(); track trackByItem(value)) {\n @if (value.includedItems?.length) {\n <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n {{ value.
|
|
6375
|
+
args: [{ selector: 'he-bar-chart-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n @for (value of data(); track trackByItem(value)) {\n @if (value.includedItems?.length) {\n <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n {{ value.label }}\n </span>\n }\n\n <div\n class=\"is-flex is-align-items-center is-gap-4 | breakdown-legend--item\"\n [class.w-100]=\"value.includedItems?.length\">\n <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.backgroundColor || value.color\"></div>\n\n @if (value.includedItems?.length) {\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (subValue of value.includedItems; track trackByItem(subValue)) {\n <span class=\"is-size-7\">{{ subValue.label }}</span>\n }\n </div>\n } @else {\n <span class=\"is-size-7\">{{ value.label }}</span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.breakdown-legend{background:#fafafa}@media screen and (min-width:768px),print{.breakdown-legend{overflow-y:auto;max-height:150px}}@media screen and (max-width:767px){.breakdown-legend--item{width:100%}}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
|
|
6376
6376
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
6377
6377
|
|
|
6378
6378
|
const grey$1 = '#4a4a4a';
|
|
@@ -6578,6 +6578,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
6578
6578
|
const escape = (value) => (`${value}`.includes(',') ? `"${value}"` : value);
|
|
6579
6579
|
const toLine = (values) => values.map(escape).join(',');
|
|
6580
6580
|
|
|
6581
|
+
class CyclesEmissionsCategoryService {
|
|
6582
|
+
constructor() {
|
|
6583
|
+
this.data = loadResourceKey('emission-groupings.json');
|
|
6584
|
+
this.categoryLabel = (key) => (key ? keyToLabel(key.replace(/category/gi, '')) : 'Unset');
|
|
6585
|
+
this.categories = Object.keys(this.data)
|
|
6586
|
+
.filter(key => key.toLowerCase().endsWith('category'))
|
|
6587
|
+
.map(key => ({
|
|
6588
|
+
key,
|
|
6589
|
+
label: this.categoryLabel(key)
|
|
6590
|
+
}));
|
|
6591
|
+
this.emissionCategories = (id) => Object.keys(this.data[id]).filter(key => !!this.data[id][key]);
|
|
6592
|
+
this.emissionCategoryValue = (id, category) => this.data[id]?.[category];
|
|
6593
|
+
}
|
|
6594
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6595
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, providedIn: 'root' }); }
|
|
6596
|
+
}
|
|
6597
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, decorators: [{
|
|
6598
|
+
type: Injectable,
|
|
6599
|
+
args: [{
|
|
6600
|
+
providedIn: 'root'
|
|
6601
|
+
}]
|
|
6602
|
+
}] });
|
|
6603
|
+
|
|
6581
6604
|
const grey = '#4a4a4a';
|
|
6582
6605
|
const barheight = 8; // 8px
|
|
6583
6606
|
const hoverHeight = 10; // 10px
|
|
@@ -6652,47 +6675,81 @@ const datasetCenter = (chart, index) => {
|
|
|
6652
6675
|
const left = Math.min(...elements.map(e => e.x), ...elements.map(e => e.base));
|
|
6653
6676
|
return (right + left) / 2;
|
|
6654
6677
|
};
|
|
6655
|
-
const
|
|
6656
|
-
|
|
6657
|
-
|
|
6658
|
-
|
|
6678
|
+
const itemColor = (item) => item.backgroundColor || item.borderColor || item.color;
|
|
6679
|
+
const tooltipFn = ({ label, selectedLabel, units, values, maxLabelLength }) => `
|
|
6680
|
+
<div class="is-flex is-flex-direction-column is-overflow-y-auto" style="max-height:400px">
|
|
6681
|
+
<div class="is-hidden-tablet is-p-1 has-text-centered has-text-secondary has-text-weight-bold is-size-7 with-border-secondary-accent" style="border-bottom-width:1px">${label}</div>
|
|
6682
|
+
<div class="is-flex is-justify-content-center is-align-items-flex-start">
|
|
6683
|
+
<div class="is-flex is-flex-direction-column is-align-items-center is-align-self-stretch h-100 is-pr-1 with-border-secondary-accent" style="border-right-width:1px;max-width:360px">
|
|
6684
|
+
<div class="is-align-self-stretch is-p-1 has-text-secondary has-text-weight-bold is-size-7 with-border-secondary-accent" style="border-bottom-width:1px">Contribution</div>
|
|
6659
6685
|
|
|
6660
|
-
|
|
6686
|
+
${values
|
|
6661
6687
|
.map(value => `
|
|
6662
|
-
|
|
6663
|
-
|
|
6664
|
-
|
|
6665
|
-
|
|
6666
|
-
|
|
6688
|
+
<div class="is-flex is-flex-direction-column is-align-self-stretch w-100">
|
|
6689
|
+
<div class="is-flex is-align-items-center is-gap-4 is-p-1 has-text-grey-dark is-size-7">
|
|
6690
|
+
<div class="is-radius-3" style="width:12px;height:12px;background:${itemColor(value)}"></div>
|
|
6691
|
+
<span class="${value.label === selectedLabel ? 'has-text-weight-bold' : ''}">${ellipsis$1(value.label, maxLabelLength)}</span>
|
|
6692
|
+
</div>
|
|
6693
|
+
${((value.label === selectedLabel ? value.includedItems : []) || [])
|
|
6694
|
+
.map(included => `
|
|
6695
|
+
<div class="is-flex is-align-items-center is-gap-4 is-p-1 is-pl-4 has-text-grey-dark is-size-7">
|
|
6696
|
+
<div class="is-radius-3" style="width:8px;height:8px;background:${itemColor(included)}"></div>
|
|
6697
|
+
<span>${ellipsis$1(included.label, maxLabelLength - 10)}</span>
|
|
6698
|
+
</div>
|
|
6699
|
+
`)
|
|
6700
|
+
.join('')}
|
|
6701
|
+
</div>
|
|
6702
|
+
`.trim())
|
|
6667
6703
|
.join('')}
|
|
6668
6704
|
|
|
6669
|
-
|
|
6670
|
-
|
|
6671
|
-
|
|
6672
|
-
|
|
6705
|
+
<div class="is-align-self-stretch has-text-right is-p-1 has-text-grey-dark is-size-7 with-border-secondary-accent" style="border-top-width:1px">Total</div>
|
|
6706
|
+
</div>
|
|
6707
|
+
<div class="is-flex is-flex-direction-column is-align-items-center is-align-self-stretch h-100 is-pl-1">
|
|
6708
|
+
<div class="is-align-self-stretch is-p-1 has-text-secondary has-text-weight-bold is-size-7 with-border-secondary-accent" style="border-bottom-width:1px">${units}</div>
|
|
6673
6709
|
|
|
6674
|
-
|
|
6710
|
+
${values
|
|
6675
6711
|
.map(value => `
|
|
6676
|
-
|
|
6677
|
-
|
|
6678
|
-
|
|
6679
|
-
|
|
6712
|
+
<div class="is-flex is-flex-direction-column is-align-self-stretch">
|
|
6713
|
+
<div class="is-flex is-align-items-center is-gap-4 is-p-1 has-text-grey-dark is-size-7">
|
|
6714
|
+
<span class="${value.label === selectedLabel ? 'has-text-weight-bold' : ''}">${transform(value.value) || 0}</span>
|
|
6715
|
+
</div>
|
|
6716
|
+
${((value.label === selectedLabel ? value.includedItems : []) || [])
|
|
6717
|
+
.map(included => `
|
|
6718
|
+
<div class="is-flex is-align-items-center is-gap-4 is-p-1 has-text-grey-dark is-size-7">
|
|
6719
|
+
<span>${transform(included.value) || 0}</span>
|
|
6720
|
+
</div>
|
|
6721
|
+
`)
|
|
6722
|
+
.join('')}
|
|
6723
|
+
</div>
|
|
6724
|
+
`.trim())
|
|
6680
6725
|
.join('')}
|
|
6681
6726
|
|
|
6682
|
-
|
|
6727
|
+
<div class="is-align-self-stretch is-p-1 has-text-grey-dark is-size-7 with-border-secondary-accent" style="border-top-width:1px">${transform(sum(values.map(v => v.value))) || 0}</div>
|
|
6728
|
+
</div>
|
|
6683
6729
|
</div>
|
|
6684
6730
|
</div>
|
|
6685
6731
|
`.trim();
|
|
6686
|
-
const dataAtIndex = (data, index) => data
|
|
6687
|
-
.map(item => ({
|
|
6732
|
+
const dataAtIndex = (data, index, includeItems = true) => data
|
|
6733
|
+
.map(item => ({
|
|
6734
|
+
...item,
|
|
6735
|
+
value: item.values[index],
|
|
6736
|
+
includedItems: includeItems
|
|
6737
|
+
? item.includedItems?.map(included => ({
|
|
6738
|
+
...included,
|
|
6739
|
+
value: included.values[index]
|
|
6740
|
+
}))
|
|
6741
|
+
: []
|
|
6742
|
+
}))
|
|
6688
6743
|
.filter(v => !isUndefined(v.value))
|
|
6689
6744
|
.sort((a, b) => Math.abs(b.value) - Math.abs(a.value));
|
|
6690
6745
|
const logToCsv$1 = (labels, data) => [
|
|
6691
6746
|
toLine(['@id', ...data.map(v => v.label)]),
|
|
6692
|
-
labels.map((label, index) => toLine([label, ...dataAtIndex(data, index).map(v => v.value)])).join('\n')
|
|
6747
|
+
labels.map((label, index) => toLine([label, ...dataAtIndex(data, index, false).map(v => v.value)])).join('\n')
|
|
6693
6748
|
].join('\n');
|
|
6694
6749
|
class ContributionChartComponent {
|
|
6695
6750
|
constructor() {
|
|
6751
|
+
this.emissionCategoryService = inject(CyclesEmissionsCategoryService);
|
|
6752
|
+
this.responsiveService = inject(ResponsiveService);
|
|
6696
6753
|
this.tooltipFn = tooltipFn;
|
|
6697
6754
|
/**
|
|
6698
6755
|
* Contribution data.
|
|
@@ -6710,19 +6767,52 @@ class ContributionChartComponent {
|
|
|
6710
6767
|
* Show default button for export, located on the top-right corner of the chart.
|
|
6711
6768
|
*/
|
|
6712
6769
|
this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
|
|
6770
|
+
/**
|
|
6771
|
+
* Show the legend below the chart.
|
|
6772
|
+
*/
|
|
6773
|
+
this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : []));
|
|
6713
6774
|
this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
6714
6775
|
this.minHeight = input(100, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
|
|
6715
6776
|
this.maxHeight = input(400, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
6777
|
+
/**
|
|
6778
|
+
* Category to group the data by.
|
|
6779
|
+
*/
|
|
6780
|
+
this.category = input(undefined, ...(ngDevMode ? [{ debugName: "category" }] : []));
|
|
6716
6781
|
this.chart = viewChild.required(ChartComponent);
|
|
6717
6782
|
this.tooltip = viewChild.required(ChartTooltipComponent);
|
|
6718
6783
|
this.exporting = computed(() => this.chart()?.exporting(), ...(ngDevMode ? [{ debugName: "exporting" }] : []));
|
|
6719
6784
|
this.height = computed(() => chartHeight$1(this.minHeight(), this.maxHeight(), this.labels()?.length ?? 0), ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
6720
|
-
this.hasNegativeContributions = computed(() => this.
|
|
6785
|
+
this.hasNegativeContributions = computed(() => this.displayData()?.some(value => value.values.some(v => v < 0)), ...(ngDevMode ? [{ debugName: "hasNegativeContributions" }] : []));
|
|
6786
|
+
this.displayData = computed(() => {
|
|
6787
|
+
const category = this.category();
|
|
6788
|
+
const data = this.data();
|
|
6789
|
+
if (!category) {
|
|
6790
|
+
return data;
|
|
6791
|
+
}
|
|
6792
|
+
const groupedData = data.reduce((prev, curr) => {
|
|
6793
|
+
const groupKey = this.emissionCategoryService.emissionCategoryValue(curr.id, category);
|
|
6794
|
+
prev[groupKey] = prev[groupKey] || [];
|
|
6795
|
+
prev[groupKey].push(curr);
|
|
6796
|
+
return prev;
|
|
6797
|
+
}, {});
|
|
6798
|
+
return Object.keys(groupedData).length === 1
|
|
6799
|
+
? data
|
|
6800
|
+
: Object.entries(groupedData).map(([category, items], index) => ({
|
|
6801
|
+
label: this.emissionCategoryService.categoryLabel(category),
|
|
6802
|
+
values: this.labels().map((_, i) => sum(items.map(item => item.values[i]))),
|
|
6803
|
+
color: listColor(category, index),
|
|
6804
|
+
includedItems: items.map((item, i) => ({
|
|
6805
|
+
...item,
|
|
6806
|
+
color: listColor(item.id, i)
|
|
6807
|
+
}))
|
|
6808
|
+
}));
|
|
6809
|
+
}, ...(ngDevMode ? [{ debugName: "displayData" }] : []));
|
|
6721
6810
|
this.defaultConfig = computed(() => ({
|
|
6722
6811
|
options: {
|
|
6723
6812
|
onClick: (event, activeElements, chart) => this.onItemClick(event, activeElements, chart),
|
|
6724
6813
|
scales: {
|
|
6725
6814
|
x: {
|
|
6815
|
+
display: !this.responsiveService.isMobile(),
|
|
6726
6816
|
afterDataLimits: scale => increaseScaleLimits(scale),
|
|
6727
6817
|
title: {
|
|
6728
6818
|
display: !!this.label(),
|
|
@@ -6731,13 +6821,16 @@ class ContributionChartComponent {
|
|
|
6731
6821
|
grid: {
|
|
6732
6822
|
lineWidth: context => (context.tick.value === 0 && this.hasNegativeContributions() ? 1 : 0)
|
|
6733
6823
|
}
|
|
6824
|
+
},
|
|
6825
|
+
y: {
|
|
6826
|
+
display: !this.responsiveService.isMobile()
|
|
6734
6827
|
}
|
|
6735
6828
|
}
|
|
6736
6829
|
},
|
|
6737
6830
|
plugins: [backgroundHoverPlugin({ threshold: hoverHeight })]
|
|
6738
6831
|
}), ...(ngDevMode ? [{ debugName: "defaultConfig" }] : []));
|
|
6739
6832
|
this.dataConfig = computed(() => ({
|
|
6740
|
-
datasets: this.
|
|
6833
|
+
datasets: this.displayData().map(item => ({
|
|
6741
6834
|
label: item.label,
|
|
6742
6835
|
data: item.values,
|
|
6743
6836
|
backgroundColor: item.backgroundColor || item.color,
|
|
@@ -6749,7 +6842,7 @@ class ContributionChartComponent {
|
|
|
6749
6842
|
labels: this.labels()
|
|
6750
6843
|
}), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
|
|
6751
6844
|
this.configuration = computed(() => merge$1({}, defaultSettings$2, this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
|
|
6752
|
-
this.csvContent = computed(() => `data:text/html;charset=utf-8,${encodeURIComponent(logToCsv$1(this.labels(), this.
|
|
6845
|
+
this.csvContent = computed(() => `data:text/html;charset=utf-8,${encodeURIComponent(logToCsv$1(this.labels(), this.displayData()))}`, ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
|
|
6753
6846
|
}
|
|
6754
6847
|
onItemClick(event, activeElements, chart) {
|
|
6755
6848
|
const index = activeElements?.[0]?.index;
|
|
@@ -6759,10 +6852,11 @@ class ContributionChartComponent {
|
|
|
6759
6852
|
this.tooltip().show({
|
|
6760
6853
|
label: this.labels()[index],
|
|
6761
6854
|
units: this.label(),
|
|
6762
|
-
values: dataAtIndex(this.
|
|
6763
|
-
selectedLabel: this.
|
|
6855
|
+
values: dataAtIndex(this.displayData(), index),
|
|
6856
|
+
selectedLabel: this.displayData()?.[datasetIndex]?.label,
|
|
6857
|
+
maxLabelLength: this.responsiveService.isMobile() ? 30 : 50
|
|
6764
6858
|
}, datasetCenter(chart, index), element.y, {
|
|
6765
|
-
tooltipClass: 'has-background-white shadow-3 is-p-1',
|
|
6859
|
+
tooltipClass: 'is-large has-background-white shadow-3 is-p-1',
|
|
6766
6860
|
container: 'body'
|
|
6767
6861
|
});
|
|
6768
6862
|
}
|
|
@@ -6779,12 +6873,12 @@ class ContributionChartComponent {
|
|
|
6779
6873
|
return downloadFile(this.csvContent(), `${title}-contribution.csv`);
|
|
6780
6874
|
}
|
|
6781
6875
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContributionChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6782
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
6876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ContributionChartComponent, isStandalone: true, selector: "he-contribution-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }, { propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], exportAs: ["contributionChart"], ngImport: i0, template: "<div class=\"chart-area-border\">\n <he-chart\n [data]=\"dataConfig()\"\n [config]=\"configuration()\"\n [showExportButton]=\"showExportButton()\"\n [style.height.px]=\"height()\">\n <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n </he-chart>\n</div>\n\n@if (showLegend()) {\n <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6783
6877
|
}
|
|
6784
6878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContributionChartComponent, decorators: [{
|
|
6785
6879
|
type: Component$1,
|
|
6786
|
-
args: [{ selector: 'he-contribution-chart', exportAs: 'contributionChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"chart-area-border\">\n <he-chart\n [data]=\"dataConfig()\"\n [config]=\"configuration()\"\n [showExportButton]=\"showExportButton()\"\n [style.height.px]=\"height()\">\n <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n </he-chart>\n</div>\n\n<he-bar-chart-legend [data]=\"
|
|
6787
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }] } });
|
|
6880
|
+
args: [{ selector: 'he-contribution-chart', exportAs: 'contributionChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"chart-area-border\">\n <he-chart\n [data]=\"dataConfig()\"\n [config]=\"configuration()\"\n [showExportButton]=\"showExportButton()\"\n [style.height.px]=\"height()\">\n <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n </he-chart>\n</div>\n\n@if (showLegend()) {\n <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}\n"] }]
|
|
6881
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }] } });
|
|
6788
6882
|
|
|
6789
6883
|
const colors = {
|
|
6790
6884
|
darkBlue: 'rgba(25, 57, 87, 1)',
|
|
@@ -14014,29 +14108,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
14014
14108
|
args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent, ChartExportButtonComponent], template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart></svg>\n\n <span\n class=\"is-hidden\"\n [ngbPopover]=\"tipContent\"\n triggers=\"manual\"\n placement=\"right left auto\"\n container=\"body\"\n #t=\"ngbPopover\"\n positionTarget=\".tip-target\"\n popoverClass=\"is-narrow driver-chart-tooltip\"\n [animation]=\"true\"></span>\n\n <div class=\"is-absolute | chart-controls\">\n <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n <he-chart-export-button\n buttonClass=\"button is-small\"\n [chartExportFn]=\"chartExportFn\"\n [exportFormats]=\"exportFormats\" />\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n @if (tipData.hasWeightedValue) {\n <p>contribution: {{ tipData.weightedValueText }}</p>\n }\n @if (tipData.valueValueText) {\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n <span class=\"is-pr-1\">:</span>\n <span>{{ tipData.valueValueText }}</span>\n @if (tipData.hasValue) {\n <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n </p>\n }\n @if (tipData.modelValue) {\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n <span class=\"is-pr-1\">:</span>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n </p>\n }\n @if (tipData.terms?.length) {\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n <span class=\"is-pr-1\">:</span>\n @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n @if (!lastTerm) {\n <span class=\"is-px-1\">;</span>\n }\n }\n </p>\n }\n</ng-template>\n", styles: [".chart-controls{top:0;right:0}.chart-controls .button,.chart-controls he-chart-export-button ::ng-deep>.button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"] }]
|
|
14015
14109
|
}], ctorParameters: () => [], propDecorators: { chartRef: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], tooltipOperator: [{ type: i0.ViewChild, args: ['t', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], chartError: [{ type: i0.Output, args: ["chartError"] }] } });
|
|
14016
14110
|
|
|
14017
|
-
class CyclesEmissionsCategoryService {
|
|
14018
|
-
constructor() {
|
|
14019
|
-
this.data = loadResourceKey('emission-groupings.json');
|
|
14020
|
-
this.categoryLabel = (key) => (key ? keyToLabel(key.replace(/category/gi, '')) : 'Unset');
|
|
14021
|
-
this.categories = Object.keys(this.data)
|
|
14022
|
-
.filter(key => key.toLowerCase().endsWith('category'))
|
|
14023
|
-
.map(key => ({
|
|
14024
|
-
key,
|
|
14025
|
-
label: this.categoryLabel(key)
|
|
14026
|
-
}));
|
|
14027
|
-
this.emissionCategories = (id) => Object.keys(this.data[id]).filter(key => !!this.data[id][key]);
|
|
14028
|
-
this.emissionCategoryValue = (id, category) => this.data[id]?.[category];
|
|
14029
|
-
}
|
|
14030
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
14031
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, providedIn: 'root' }); }
|
|
14032
|
-
}
|
|
14033
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, decorators: [{
|
|
14034
|
-
type: Injectable,
|
|
14035
|
-
args: [{
|
|
14036
|
-
providedIn: 'root'
|
|
14037
|
-
}]
|
|
14038
|
-
}] });
|
|
14039
|
-
|
|
14040
14111
|
const filterTermTypes$1 = [
|
|
14041
14112
|
TermTermType.resourceUse,
|
|
14042
14113
|
TermTermType.emission,
|
|
@@ -14533,35 +14604,12 @@ class ImpactAssessmentsIndicatorsChartComponent {
|
|
|
14533
14604
|
this.selectedMethod = computed(() => this.methods().find(term => term['@id'] == this.selectedMethodId()), ...(ngDevMode ? [{ debugName: "selectedMethod" }] : []));
|
|
14534
14605
|
this.groupedValues = computed(() => this.indicatorPerImpactAssessment()?.[this.selectedTerm()?.name]?.values || {}, ...(ngDevMode ? [{ debugName: "groupedValues" }] : []));
|
|
14535
14606
|
this.contributionData = computed(() => {
|
|
14536
|
-
|
|
14537
|
-
term,
|
|
14538
|
-
|
|
14607
|
+
return this.contributionTerms().map((term, index) => ({
|
|
14608
|
+
id: term['@id'],
|
|
14609
|
+
label: term.name,
|
|
14610
|
+
values: this.impactAssessments().map(impact => impactContribution(impact[this.contributionKey()], this.contributionsPerImpactAssessment()[impact['@id']][this.contributionKey()], term, this.selectedTerm(), this.selectedMethod())),
|
|
14611
|
+
color: listColor(term, index)
|
|
14539
14612
|
}));
|
|
14540
|
-
const groupedData = data.reduce((prev, curr) => {
|
|
14541
|
-
const category = this.selectedCategory();
|
|
14542
|
-
const groupKey = category
|
|
14543
|
-
? this.emissionCategoryService.emissionCategoryValue(curr.term['@id'], category)
|
|
14544
|
-
: undefined;
|
|
14545
|
-
prev[groupKey] = prev[groupKey] || [];
|
|
14546
|
-
prev[groupKey].push(curr);
|
|
14547
|
-
return prev;
|
|
14548
|
-
}, {});
|
|
14549
|
-
return Object.keys(groupedData).length === 1
|
|
14550
|
-
? data.map(({ term, values }, index) => ({
|
|
14551
|
-
label: term.name,
|
|
14552
|
-
values,
|
|
14553
|
-
color: listColor(term, index)
|
|
14554
|
-
}))
|
|
14555
|
-
: Object.entries(groupedData).map(([category, values], index) => ({
|
|
14556
|
-
label: this.emissionCategoryService.categoryLabel(category),
|
|
14557
|
-
values: this.impactAssessments().map((i, index) => sum(values.map(v => v.values[index]))),
|
|
14558
|
-
color: listColor(category, index),
|
|
14559
|
-
includedItems: values.map(value => ({
|
|
14560
|
-
label: value.term.name,
|
|
14561
|
-
values: this.impactAssessments().map((i, index) => value.values[index]),
|
|
14562
|
-
color: listColor(value.term, index)
|
|
14563
|
-
}))
|
|
14564
|
-
}));
|
|
14565
14613
|
}, ...(ngDevMode ? [{ debugName: "contributionData" }] : []));
|
|
14566
14614
|
this.chartData = computed(() => this.enableContributions()
|
|
14567
14615
|
? this.contributionData()
|
|
@@ -14614,11 +14662,11 @@ class ImpactAssessmentsIndicatorsChartComponent {
|
|
|
14614
14662
|
});
|
|
14615
14663
|
}
|
|
14616
14664
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14617
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term['@id']) {\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 is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @for (term of methods(); track term['@id']) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (enableContributions()) {\n <div class=\"control is-expanded is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n <option [ngValue]=\"undefined\">No Disaggregation</option>\n @for (category of categories; track category.key) {\n <option [value]=\"category.key\">{{ category.label }}</option>\n }\n </select>\n </div>\n </div>\n }\n </div>\n}\n\n@if (enableContributions()) {\n <he-contribution-chart\n class=\"is-relative h-100\"\n [label]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [labels]=\"chartLabels()\"\n [showExportButton]=\"false\" />\n} @else {\n <he-horizontal-bar-chart\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ 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: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "showExportButton", "config", "minHeight", "maxHeight"], exportAs: ["contributionChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14665
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term['@id']) {\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 is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @for (term of methods(); track term['@id']) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (enableContributions()) {\n <div class=\"control is-expanded is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n <option [ngValue]=\"undefined\">No Disaggregation</option>\n @for (category of categories; track category.key) {\n <option [value]=\"category.key\">{{ category.label }}</option>\n }\n </select>\n </div>\n </div>\n }\n </div>\n}\n\n@if (enableContributions()) {\n <he-contribution-chart\n class=\"is-relative h-100\"\n [label]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [labels]=\"chartLabels()\"\n [category]=\"selectedCategory()\"\n [showExportButton]=\"false\"\n [showLegend]=\"false\" />\n} @else {\n <he-horizontal-bar-chart\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ 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: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "showExportButton", "showLegend", "config", "minHeight", "maxHeight", "category"], exportAs: ["contributionChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14618
14666
|
}
|
|
14619
14667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
|
|
14620
14668
|
type: Component$1,
|
|
14621
|
-
args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ContributionChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term['@id']) {\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 is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @for (term of methods(); track term['@id']) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (enableContributions()) {\n <div class=\"control is-expanded is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n <option [ngValue]=\"undefined\">No Disaggregation</option>\n @for (category of categories; track category.key) {\n <option [value]=\"category.key\">{{ category.label }}</option>\n }\n </select>\n </div>\n </div>\n }\n </div>\n}\n\n@if (enableContributions()) {\n <he-contribution-chart\n class=\"is-relative h-100\"\n [label]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [labels]=\"chartLabels()\"\n [showExportButton]=\"false\" />\n} @else {\n <he-horizontal-bar-chart\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"] }]
|
|
14669
|
+
args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ContributionChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term['@id']) {\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 is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @for (term of methods(); track term['@id']) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (enableContributions()) {\n <div class=\"control is-expanded is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n <option [ngValue]=\"undefined\">No Disaggregation</option>\n @for (category of categories; track category.key) {\n <option [value]=\"category.key\">{{ category.label }}</option>\n }\n </select>\n </div>\n </div>\n }\n </div>\n}\n\n@if (enableContributions()) {\n <he-contribution-chart\n class=\"is-relative h-100\"\n [label]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [labels]=\"chartLabels()\"\n [category]=\"selectedCategory()\"\n [showExportButton]=\"false\"\n [showLegend]=\"false\" />\n} @else {\n <he-horizontal-bar-chart\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"] }]
|
|
14622
14670
|
}], ctorParameters: () => [], propDecorators: { barChart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HorizontalBarChartComponent), { isSignal: true }] }], contributionChart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ContributionChartComponent), { isSignal: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }] } });
|
|
14623
14671
|
|
|
14624
14672
|
var View$1;
|