diff --git a/src/app/carbon-estimation/carbon-estimation.component.css b/src/app/carbon-estimation/carbon-estimation.component.css index 489c1490..519e6a1b 100644 --- a/src/app/carbon-estimation/carbon-estimation.component.css +++ b/src/app/carbon-estimation/carbon-estimation.component.css @@ -1,9 +1,9 @@ -::ng-deep .apexcharts-legend-series { +::ng-deep .apexcharts-legend-series { cursor: default !important; min-width: 250px; margin-left: 0 !important; } -::ng-deep .apexcharts-legend { +::ng-deep .apexcharts-legend { padding: 0 !important; } @@ -16,25 +16,29 @@ } ::ng-deep .web-logo { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h420v-140H160v140Zm500 0h140v-360H660v360ZM160-460h420v-140H160v140Z'/%3E%3C/svg%3E"); + background-image: url('../../assets/web.svg'); } ::ng-deep .devices-logo { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M80-160v-120h80v-440q0-33 23.5-56.5T240-800h600v80H240v440h240v120H80Zm520 0q-17 0-28.5-11.5T560-200v-400q0-17 11.5-28.5T600-640h240q17 0 28.5 11.5T880-600v400q0 17-11.5 28.5T840-160H600Zm40-120h160v-280H640v280Zm0 0h160-160Z'/%3E%3C/svg%3E"); + background-image: url('../../assets/devices.svg'); } ::ng-deep .router-logo { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M200-120q-33 0-56.5-23.5T120-200v-160q0-33 23.5-56.5T200-440h400v-160h80v160h80q33 0 56.5 23.5T840-360v160q0 33-23.5 56.5T760-120H200Zm0-80h560v-160H200v160Zm80-40q17 0 28.5-11.5T320-280q0-17-11.5-28.5T280-320q-17 0-28.5 11.5T240-280q0 17 11.5 28.5T280-240Zm140 0q17 0 28.5-11.5T460-280q0-17-11.5-28.5T420-320q-17 0-28.5 11.5T380-280q0 17 11.5 28.5T420-240Zm140 0q17 0 28.5-11.5T600-280q0-17-11.5-28.5T560-320q-17 0-28.5 11.5T520-280q0 17 11.5 28.5T560-240Zm10-390-58-58q26-24 58-38t70-14q38 0 70 14t58 38l-58 58q-14-14-31.5-22t-38.5-8q-21 0-38.5 8T570-630ZM470-730l-56-56q44-44 102-69t124-25q66 0 124 25t102 69l-56 56q-33-33-76.5-51.5T640-800q-50 0-93.5 18.5T470-730ZM200-200v-160 160Z'/%3E%3C/svg%3E"); + background-image: url('../../assets/router.svg'); } ::ng-deep .storage-logo { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M120-160v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80-440v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80 280v-160h720v160H120Zm80-40h80v-80h-80v80Z'/%3E%3C/svg%3E"); + background-image: url('../../assets/storage.svg'); } ::ng-deep .cloud-logo { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z'/%3E%3C/svg%3E"); + background-image: url('../../assets/cloud.svg'); } ::ng-deep .cell-tower-logo { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M196-276q-57-60-86.5-133T80-560q0-78 29.5-151T196-844l48 48q-48 48-72 110.5T148-560q0 63 24 125.5T244-324l-48 48Zm96-96q-39-39-59.5-88T212-560q0-51 20.5-100t59.5-88l48 48q-30 27-45 64t-15 76q0 36 15 73t45 67l-48 48ZM280-80l135-405q-16-14-25.5-33t-9.5-42q0-42 29-71t71-29q42 0 71 29t29 71q0 23-9.5 42T545-485L680-80h-80l-26-80H387l-27 80h-80Zm133-160h134l-67-200-67 200Zm255-132-48-48q30-27 45-64t15-76q0-36-15-73t-45-67l48-48q39 39 58 88t22 100q0 51-20.5 100T668-372Zm96 96-48-48q48-48 72-110.5T812-560q0-63-24-125.5T716-796l48-48q57 60 86.5 133T880-560q0 78-28 151t-88 133Z'/%3E%3C/svg%3E"); + background-image: url('../../assets/cell-tower.svg'); +} + +::ng-deep .question-mark-logo { + background-image: url('../../assets/question-mark.svg'); } diff --git a/src/app/carbon-estimation/carbon-estimation.component.html b/src/app/carbon-estimation/carbon-estimation.component.html index 2aca2326..23b96433 100644 --- a/src/app/carbon-estimation/carbon-estimation.component.html +++ b/src/app/carbon-estimation/carbon-estimation.component.html @@ -21,16 +21,16 @@

Estimations

-
+
+ [series]="chartData()" + [chart]="chartOptions().chart" + [plotOptions]="chartOptions().plotOptions" + [legend]="chartOptions().legend" + [states]="chartOptions().states" + [dataLabels]="chartOptions().dataLabels" + [tooltip]="chartOptions().tooltip">
diff --git a/src/app/carbon-estimation/carbon-estimation.component.spec.ts b/src/app/carbon-estimation/carbon-estimation.component.spec.ts index ac57306b..81758ef1 100644 --- a/src/app/carbon-estimation/carbon-estimation.component.spec.ts +++ b/src/app/carbon-estimation/carbon-estimation.component.spec.ts @@ -47,16 +47,11 @@ describe('CarbonEstimationComponent', () => { fixture.detectChanges(); }); - it('should set the chart height when the component is initialised', () => { - spyOnProperty(window, 'innerHeight').and.returnValue(1000); - spyOnProperty(window, 'innerWidth').and.returnValue(1000); - spyOnProperty(window.screen, 'height').and.returnValue(1080); - spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200); - - component.ngOnInit(); - fixture.detectChanges(); - - expect(component.chartOptions.chart.height).toBe(1000 - estimatorBaseHeight - 200); + it('should set the chart height when the component is rendered', () => { + // Check that the height is set to a positive value. + // (Checking for a specific value would require spying on the window object before + // the test starts for consistent local and CI/CD results.) + expect(component.chartOptions().chart.height).toBeGreaterThan(0); }); it('should subtract the extraHeight input from the chart height on laptop screens', () => { @@ -224,11 +219,11 @@ describe('CarbonEstimationComponent', () => { }, ]; - expect(component.emissions).toEqual(expectedEmissions); + expect(component.chartData()).toEqual(expectedEmissions); }); it('should have detailed aria label', () => { - expect(component.emissionAriaLabel.length).toBeGreaterThan(25); + expect(component.emissionAriaLabel().length).toBeGreaterThan(25); }); it('should set label to <1% if emission is less than 1', () => { @@ -259,7 +254,7 @@ describe('CarbonEstimationComponent', () => { fixture.detectChanges(); - expect(component.emissions[0].name).toBe('Upstream Emissions - <1%'); + expect(component.chartData()[0].name).toBe('Upstream Emissions - <1%'); }); it('should remove categories when they are 0', () => { @@ -337,7 +332,7 @@ describe('CarbonEstimationComponent', () => { }, ]; - expect(component.emissions).toEqual(expectedEmissions); + expect(component.chartData()).toEqual(expectedEmissions); }); it('should remove parent categories when all values are 0', () => { @@ -393,6 +388,6 @@ describe('CarbonEstimationComponent', () => { }, ]; - expect(component.emissions).toEqual(expectedEmissions); + expect(component.chartData()).toEqual(expectedEmissions); }); }); diff --git a/src/app/carbon-estimation/carbon-estimation.component.ts b/src/app/carbon-estimation/carbon-estimation.component.ts index 274e8d74..6990111d 100644 --- a/src/app/carbon-estimation/carbon-estimation.component.ts +++ b/src/app/carbon-estimation/carbon-estimation.component.ts @@ -1,5 +1,5 @@ -import { ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild, effect, input } from '@angular/core'; -import { CarbonEstimation, ChartOptions } from '../types/carbon-estimator'; +import { ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild, computed, input } from '@angular/core'; +import { CarbonEstimation } from '../types/carbon-estimator'; import { NumberObject, sumValues } from '../utils/number-object'; import { ApexAxisChartSeries, ChartComponent, NgApexchartsModule } from 'ng-apexcharts'; @@ -8,21 +8,16 @@ import { EmissionsColours, EmissionsLabels, SVG, - chartOptions, + getBaseChartOptions, estimatorHeights, tooltipFormatter, + placeholderData, + ApexChartSeriesItem, + ApexChartDataItem, } from './carbon-estimation.constants'; import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.component'; import { Subscription, debounceTime, fromEvent } from 'rxjs'; -type ApexChartDataItem = { x: string; y: number; meta: { svg: string; parent: string } }; - -type ApexChartSeries = { - name: string; - color: string; - data: ApexChartDataItem[]; -}; - @Component({ selector: 'carbon-estimation', standalone: true, @@ -31,13 +26,13 @@ type ApexChartSeries = { styleUrls: ['./carbon-estimation.component.css'], }) export class CarbonEstimationComponent implements OnInit, OnDestroy { - public carbonEstimation = input.required(); + public carbonEstimation = input(); public extraHeight = input(); - public emissions: ApexAxisChartSeries = []; - public emissionAriaLabel = 'Estimations of emissions.'; + public chartData = computed(() => this.getChartData(this.carbonEstimation())); + public emissionAriaLabel = computed(() => this.getEmissionAriaLabel(this.chartData(), !this.carbonEstimation())); - public chartOptions: ChartOptions = chartOptions; + public chartOptions = computed(() => this.getChartOptions(!this.carbonEstimation())); private tooltipFormatter = tooltipFormatter; private estimatorBaseHeight = sumValues(estimatorHeights); @@ -46,19 +41,9 @@ export class CarbonEstimationComponent implements OnInit, OnDestroy { @ViewChild('chart') chart: ChartComponent | undefined; @ViewChild('detailsPanel', { static: true, read: ElementRef }) detailsPanel!: ElementRef; - constructor(private changeDetectorRef: ChangeDetectorRef) { - effect(() => { - this.emissions = this.getOverallEmissionPercentages(this.carbonEstimation()); - this.emissionAriaLabel = this.getAriaLabel(this.emissions); - }); - } + constructor(private changeDetectorRef: ChangeDetectorRef) {} public ngOnInit(): void { - const chartHeight = this.getChartHeight(window.innerHeight, window.innerWidth, window.screen.height); - if (chartHeight > 0) { - this.chartOptions.chart.height = chartHeight; - } - this.resizeSubscription = fromEvent(window, 'resize') .pipe(debounceTime(500)) .subscribe(() => this.onResize(window.innerHeight, window.innerWidth, window.screen.height)); @@ -104,10 +89,14 @@ export class CarbonEstimationComponent implements OnInit, OnDestroy { } private getAriaLabel(emission: ApexAxisChartSeries): string { - return `Estimation of emissions. ${emission.map(entry => this.getAriaLabelForCategory(entry as ApexChartSeries)).join(' ')}`; + return `Estimation of emissions. ${emission.map(entry => this.getAriaLabelForCategory(entry as ApexChartSeriesItem)).join(' ')}`; } - private getAriaLabelForCategory(series: ApexChartSeries): string { + private getEmissionAriaLabel(chartData: ApexAxisChartSeries, isPlaceholder: boolean) { + return isPlaceholder ? 'Placeholder for estimation of emissions' : this.getAriaLabel(chartData); + } + + private getAriaLabelForCategory(series: ApexChartSeriesItem): string { const category = series.name.replace('-', 'are'); return `${category}${this.getEmissionMadeUp(series.data)}`; } @@ -161,6 +150,16 @@ export class CarbonEstimationComponent implements OnInit, OnDestroy { return heightBoundedAboveAndBelow; } + private getChartOptions(isPlaceholder: boolean) { + const chartOptions = getBaseChartOptions(isPlaceholder); + chartOptions.chart.height = this.getChartHeight(window.innerHeight, window.innerWidth, window.screen.height); + return chartOptions; + } + + private getChartData(estimation?: CarbonEstimation): ApexAxisChartSeries { + return estimation ? this.getOverallEmissionPercentages(estimation) : placeholderData; + } + private getDataItem(key: string, value: number, parent: string): ApexChartDataItem { switch (key) { case 'software': diff --git a/src/app/carbon-estimation/carbon-estimation.constants.ts b/src/app/carbon-estimation/carbon-estimation.constants.ts index 24c08fa3..c8160aaf 100644 --- a/src/app/carbon-estimation/carbon-estimation.constants.ts +++ b/src/app/carbon-estimation/carbon-estimation.constants.ts @@ -7,80 +7,102 @@ export enum EmissionsColours { Downstream = '#4B7E56', } +export enum PlaceholderEmissionsColours { + Upstream = '#333', + Direct = '#666', + Indirect = '#888', + Downstream = '#AAA', +} + export const tooltipFormatter = (value: number) => (value < 1 ? '<1%' : `${Math.round(value)}%`); -const customTooltip = ({ - series, - seriesIndex, - dataPointIndex, - w, -}: { - series: number[][]; - seriesIndex: number; - dataPointIndex: number; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - w: any; -}) => { - const initialSeries = w.globals.initialSeries[seriesIndex]; - const data = initialSeries.data[dataPointIndex]; +const getCustomTooltip = (isPlaceholder: boolean) => { + const customTooltip = ({ + series, + seriesIndex, + dataPointIndex, + w, + }: { + series: number[][]; + seriesIndex: number; + dataPointIndex: number; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + w: any; + }) => { + const initialSeries = w.globals.initialSeries[seriesIndex]; + const data = initialSeries.data[dataPointIndex]; - return `
-
-
-
${data.meta.parent}:
-
${data.x} - - ${tooltipFormatter(series[seriesIndex][dataPointIndex])}
`; + return `
+
+
+
${data.meta.parent}:
+ ${ + isPlaceholder ? + '
Subcategories - ?
' + : `
${data.x} - ${tooltipFormatter(series[seriesIndex][dataPointIndex])}
` + } +
`; + }; + + return customTooltip; }; -export const chartOptions: ChartOptions = { - legend: { - show: true, - position: 'top', - horizontalAlign: 'left', - fontSize: '20px', - fontFamily: 'ui-sans-serif, system-ui, sans-serif', - fontWeight: '400', - markers: { - height: 20, - width: 10, - radius: 2, - offsetY: 2, +export const getBaseChartOptions = (isPlaceholder: boolean) => { + const chartOptions: ChartOptions = { + legend: { + show: true, + position: 'top', + horizontalAlign: 'left', + fontSize: '20px', + fontFamily: 'ui-sans-serif, system-ui, sans-serif', + fontWeight: '400', + markers: { + height: 20, + width: 10, + radius: 2, + offsetY: 2, + }, }, - }, - chart: { - type: 'treemap', - toolbar: { - show: false, + chart: { + type: 'treemap', + toolbar: { + show: false, + }, + selection: { + enabled: false, + }, + animations: { + speed: 450, + }, }, - selection: { - enabled: false, + plotOptions: { + treemap: { + distributed: false, + enableShades: false, + borderRadius: 4, + }, }, - }, - plotOptions: { - treemap: { - distributed: false, - enableShades: false, - borderRadius: 4, + tooltip: { + custom: getCustomTooltip(isPlaceholder), }, - }, - tooltip: { - custom: customTooltip, - }, - states: { - active: { - filter: { - type: 'none', - value: 0, + states: { + active: { + filter: { + type: 'none', + value: 0, + }, }, }, - }, - dataLabels: { - style: { - fontSize: '16px', - fontFamily: 'ui-sans-serif, system-ui, sans-serif', - fontWeight: '400', + dataLabels: { + style: { + fontSize: '16px', + fontFamily: 'ui-sans-serif, system-ui, sans-serif', + fontWeight: '400', + }, }, - }, + }; + + return chartOptions; }; export const estimatorHeights = { @@ -105,3 +127,40 @@ export enum EmissionsLabels { Indirect = 'Indirect Emissions', Downstream = 'Downstream Emissions', } + +export type ApexChartDataItem = { x: string; y: number; meta: { svg: string; parent: string } }; + +export type ApexChartSeriesItem = { + name: string; + color: string; + data: ApexChartDataItem[]; +}; + +export const placeholderData: ApexChartSeriesItem[] = [ + { + name: `${EmissionsLabels.Upstream} - ?`, + color: PlaceholderEmissionsColours.Upstream, + data: [ + { x: EmissionsLabels.Upstream, y: 1, meta: { svg: 'question-mark-logo', parent: EmissionsLabels.Upstream } }, + ], + }, + { + name: `${EmissionsLabels.Direct} - ?`, + color: PlaceholderEmissionsColours.Direct, + data: [{ x: EmissionsLabels.Direct, y: 1, meta: { svg: 'question-mark-logo', parent: EmissionsLabels.Direct } }], + }, + { + name: `${EmissionsLabels.Indirect} - ?`, + color: PlaceholderEmissionsColours.Indirect, + data: [ + { x: EmissionsLabels.Indirect, y: 1, meta: { svg: 'question-mark-logo', parent: EmissionsLabels.Indirect } }, + ], + }, + { + name: `${EmissionsLabels.Downstream} - ?`, + color: PlaceholderEmissionsColours.Downstream, + data: [ + { x: EmissionsLabels.Downstream, y: 1, meta: { svg: 'question-mark-logo', parent: EmissionsLabels.Downstream } }, + ], + }, +]; diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html index 377174be..a60b0641 100644 --- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html +++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html @@ -23,12 +23,12 @@

Technology Carbon Estimator

(formReset)="handleFormReset()"> }
- @if (showEstimation) { -
- -
- } +
+ +
diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts index f1a7fdf2..abc4c25c 100644 --- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts +++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts @@ -2,9 +2,33 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { TechCarbonEstimatorComponent } from './tech-carbon-estimator.component'; import { CarbonEstimationService } from '../services/carbon-estimation.service'; -import { EstimatorValues } from '../types/carbon-estimator'; +import { CarbonEstimation, EstimatorValues } from '../types/carbon-estimator'; import { By } from '@angular/platform-browser'; +const getMockCarbonEstimation: () => CarbonEstimation = () => ({ + version: '0.0.0', + upstreamEmissions: { + software: 0, + employee: 10, + network: 10, + server: 5, + }, + indirectEmissions: { + saas: 0, + managed: 0, + cloud: 25, + }, + directEmissions: { + employee: 10, + network: 10, + server: 5, + }, + downstreamEmissions: { + endUser: 15, + networkTransfer: 10, + }, +}); + describe('TechCarbonEstimatorComponent', () => { let component: TechCarbonEstimatorComponent; let fixture: ComponentFixture; @@ -12,29 +36,7 @@ describe('TechCarbonEstimatorComponent', () => { beforeEach(async () => { estimationServiceStub = { - calculateCarbonEstimation: () => ({ - version: '0.0.0', - upstreamEmissions: { - software: 0, - employee: 10, - network: 10, - server: 5, - }, - indirectEmissions: { - saas: 0, - managed: 0, - cloud: 25, - }, - directEmissions: { - employee: 10, - network: 10, - server: 5, - }, - downstreamEmissions: { - endUser: 15, - networkTransfer: 10, - }, - }), + calculateCarbonEstimation: getMockCarbonEstimation, }; await TestBed.configureTestingModule({ @@ -46,41 +48,25 @@ describe('TechCarbonEstimatorComponent', () => { component = fixture.componentInstance; }); - it('should only show form when showEstimation is false', () => { - component.showEstimation = false; - component.showAssumptionsAndLimitationView = false; - fixture.detectChanges(); - - const formElement = fixture.nativeElement.querySelector('carbon-estimator-form'); - const estimationElement = fixture.nativeElement.querySelector('carbon-estimation'); - - expect(formElement).toBeTruthy(); - expect(estimationElement).toBeFalsy(); - }); - - it('should show form and estimation when showEstimation is true', () => { - component.showEstimation = true; + it('should show the form when showAssumptionsAndLimitationsView is false', () => { component.showAssumptionsAndLimitationView = false; fixture.detectChanges(); const formElement = fixture.nativeElement.querySelector('carbon-estimator-form'); - const estimationElement = fixture.nativeElement.querySelector('carbon-estimation'); + const assumptionsElement = fixture.nativeElement.querySelector('assumptions-and-limitation'); expect(formElement).toBeTruthy(); - expect(estimationElement).toBeTruthy(); + expect(assumptionsElement).toBeFalsy(); }); - it('should show assumptions and estimations when showEstimation and showAssumptionsAndLimitationView are true', () => { - component.showEstimation = true; + it('should show the assumptions and limitations when showAssumptionsAndLimitationsView is true', () => { component.showAssumptionsAndLimitationView = true; fixture.detectChanges(); const formElement = fixture.nativeElement.querySelector('carbon-estimator-form'); - const estimationElement = fixture.nativeElement.querySelector('carbon-estimation'); const assumptionsElement = fixture.nativeElement.querySelector('assumptions-and-limitation'); expect(formElement).toBeFalsy(); - expect(estimationElement).toBeTruthy(); expect(assumptionsElement).toBeTruthy(); }); @@ -90,17 +76,27 @@ describe('TechCarbonEstimatorComponent', () => { // The form component expects a full EstimatorValues object or undefined, but we only need to test that the service is called const formValue = undefined as unknown as EstimatorValues; component.handleFormSubmit(formValue); + expect(estimationServiceStub.calculateCarbonEstimation).toHaveBeenCalledWith(formValue); - expect(component.showEstimation).toBeTrue(); }); - it('should hide estimation if form is reset', () => { - component.showEstimation = true; + it('should set the carbonEstimation when handleFormSubmit is called', () => { + component.carbonEstimation = null; + fixture.detectChanges(); + + const formValue = undefined as unknown as EstimatorValues; + component.handleFormSubmit(formValue); + + expect(component.carbonEstimation as CarbonEstimation | null).toEqual(getMockCarbonEstimation()); + }); + + it('should set the carbonEstimation to null when the form is reset', () => { + component.carbonEstimation = getMockCarbonEstimation(); fixture.detectChanges(); fixture.debugElement.query(By.css('carbon-estimator-form')).triggerEventHandler('formReset'); - expect(component.showEstimation).toBeFalse(); + expect(component.carbonEstimation).toBeNull(); }); it('should focus on assumptions button when closeAssumptionsAndLimitation is called with hasFocus true', () => { diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts index 03b4214d..6d2203d2 100644 --- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts +++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.ts @@ -24,10 +24,9 @@ import { DisclaimerComponent } from '../disclaimer/disclaimer.component'; export class TechCarbonEstimatorComponent { @Input() public extraHeight?: string; - public showEstimation = false; public showAssumptionsAndLimitationView = false; public formValue: EstimatorValues | undefined; - public carbonEstimation: CarbonEstimation = {} as CarbonEstimation; + public carbonEstimation: CarbonEstimation | null = null; @ViewChild('assumptionsLimitation', { read: ElementRef }) assumptionsLimitation!: ElementRef; @ViewChild('estimations') estimations!: ElementRef; @@ -41,13 +40,12 @@ export class TechCarbonEstimatorComponent { public handleFormSubmit(formValue: EstimatorValues) { this.formValue = formValue; this.carbonEstimation = this.estimationService.calculateCarbonEstimation(this.formValue); - this.showEstimation = true; this.changeDetector.detectChanges(); this.estimations.nativeElement.scrollIntoView(); } public handleFormReset() { - this.showEstimation = false; + this.carbonEstimation = null; } public showAssumptionsAndLimitation(): void { diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/assets/cell-tower.svg b/src/assets/cell-tower.svg new file mode 100644 index 00000000..45de030e --- /dev/null +++ b/src/assets/cell-tower.svg @@ -0,0 +1 @@ + diff --git a/src/assets/cloud.svg b/src/assets/cloud.svg new file mode 100644 index 00000000..5606daa1 --- /dev/null +++ b/src/assets/cloud.svg @@ -0,0 +1 @@ + diff --git a/src/assets/devices.svg b/src/assets/devices.svg new file mode 100644 index 00000000..e5217d0a --- /dev/null +++ b/src/assets/devices.svg @@ -0,0 +1 @@ + diff --git a/src/assets/question-mark.svg b/src/assets/question-mark.svg new file mode 100644 index 00000000..2458993a --- /dev/null +++ b/src/assets/question-mark.svg @@ -0,0 +1 @@ + diff --git a/src/assets/router.svg b/src/assets/router.svg new file mode 100644 index 00000000..ad5fdbac --- /dev/null +++ b/src/assets/router.svg @@ -0,0 +1 @@ + diff --git a/src/assets/storage.svg b/src/assets/storage.svg new file mode 100644 index 00000000..4355b09d --- /dev/null +++ b/src/assets/storage.svg @@ -0,0 +1 @@ + diff --git a/src/assets/web.svg b/src/assets/web.svg new file mode 100644 index 00000000..7de87e02 --- /dev/null +++ b/src/assets/web.svg @@ -0,0 +1 @@ +