Merge branch 'main' into monthly-users-input-error-message

README.md

@@ -40,7 +40,7 @@ Run `ng build` to build the project. The build artifacts will be stored in the `
 
 ## Running unit tests
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Run `ng test` to execute the unit tests via [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/).
 
 ## GitHub Actions
 

angular.json

@@ -21,7 +21,7 @@
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico"],
-            "styles": ["src/styles.css"],
+            "styles": ["src/styles.css", "src/sl-styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -40,6 +40,10 @@
               ],
               "baseHref": "/sl-tech-carbon-estimator/"
             },
+            "npm-package": {
+              "assets": [],
+              "styles": ["src/styles.css"]
+            },
             "development": {
               "optimization": false,
               "extractLicenses": false,
@@ -54,6 +58,9 @@
             "production": {
               "buildTarget": "tech-carbon-estimator:build:production"
             },
+            "npm-package": {
+              "buildTarget": "tech-carbon-estimator:build:npm-package"
+            },
             "development": {
               "buildTarget": "tech-carbon-estimator:build:development"
             }

docs/types.md

@@ -98,7 +98,7 @@ This contains the data as entered on the main form, which uses Angular FormGroup
 classDiagram
   class DeviceCategory {
     <<union>>
-    'user'
+    'employee'
     'server'
     'network'
   }
@@ -125,7 +125,7 @@ classDiagram
 
   class UpstreamEstimation {
     software: number
-    user: number
+    employee: number
     network: number
     server: number
   }
@@ -135,7 +135,7 @@ classDiagram
     managed: number
   }
   class DirectEstimation {
-    user: number
+    employee: number
     network: number
     server: number
   }

package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "prepare": "ng build",
+    "prepare": "ng build --configuration npm-package",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",

scripts/publish.sh

@@ -34,7 +34,7 @@ fi
 rm -rf /dist/tech-carbon-estimator
 
 # Build and test
-npm run build
+npm run prepare
 
 npm run test
 

src/app/assumptions-and-limitation/assumptions-and-limitation.component.html

@@ -58,34 +58,12 @@ <h4 class="tce-text-lg">Power consumption</h4>
       </tr>
     </thead>
     <tbody>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Laptop</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">17</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Desktop</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">72</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Server</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">400</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Network</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">150</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Mobile</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">1</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Tablet</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">3</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Monitor</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">30</td>
-      </tr>
+      @for (device of deviceInfo; track $index) {
+        <tr>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">{{ device.name }}</td>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">{{ device.info.averagePower }}</td>
+        </tr>
+      }
     </tbody>
   </table>
   <p class="tce-text-sm">
@@ -122,7 +100,7 @@ <h4 class="tce-text-lg">Carbon Intensity</h4>
   <h4 class="tce-text-lg">Upstream Emissions</h4>
   <p class="tce-text-sm">
     Each class of device is given an average amount of embodied carbon and a lifespan, based on averages taken from
-    manufacturer provided Product Carbon Footprint documentation. At present these are:
+    manufacturer provided Product Carbon Footprint documentation*. At present these are:
   </p>
   <table class="tce-w-fit">
     <thead>
@@ -135,41 +113,17 @@ <h4 class="tce-text-lg">Upstream Emissions</h4>
       </tr>
     </thead>
     <tbody>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Laptop</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">230</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">4</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Desktop</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">400</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">4</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Server</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">1450</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">4</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Network</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">650 *</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">4</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Mobile</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">54</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">3</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Tablet</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">134</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">3</td>
-      </tr>
-      <tr>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Monitor</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">350</td>
-        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">6</td>
-      </tr>
+      @for (device of deviceInfo; track $index) {
+        <tr>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">{{ device.name }}</td>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">
+            {{ device.info.averageEmbodiedCarbon }}
+          </td>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">
+            {{ device.info.averageLifespan }}
+          </td>
+        </tr>
+      }
     </tbody>
   </table>
   <p class="tce-text-sm tce-italic">
@@ -340,7 +294,7 @@ <h5 class="tce-text-base">Managed Services</h5>
     We currently do not make a distinction between on-premises data centers and those ran by a third party.
   </p>
   <button
-    class="tce-px-3 tce-py-2 tce-bg-sky-800 tce-text-white tce-rounded hover:tce-bg-sky-900 tce-self-end"
+    class="tce-button-close tce-px-3 tce-py-2 tce-self-end"
     (click)="onClose()"
     aria-label="Close assumptions and limitations">
     Close

src/app/assumptions-and-limitation/assumptions-and-limitation.component.ts

@@ -4,6 +4,7 @@ import { siteTypeInfo } from '../estimation/estimate-downstream-emissions';
 import { PurposeOfSite, WorldLocation, locationArray, purposeOfSiteArray } from '../types/carbon-estimator';
 import { DecimalPipe } from '@angular/common';
 import { CarbonIntensityService } from '../services/carbon-intensity.service';
+import { desktop, laptop, mobile, monitor, network, server, tablet } from '../estimation/device-type';
 
 const purposeDescriptions: Record<PurposeOfSite, string> = {
   information: 'Information',
@@ -40,6 +41,36 @@ export class AssumptionsAndLimitationComponent implements AfterContentInit {
     data: siteTypeInfo[purpose].averageMonthlyUserData,
   }));
   readonly locationCarbonInfo;
+  readonly deviceInfo = [
+    {
+      name: 'Laptop',
+      info: laptop,
+    },
+    {
+      name: 'Desktop',
+      info: desktop,
+    },
+    {
+      name: 'Server',
+      info: server,
+    },
+    {
+      name: 'Network',
+      info: network,
+    },
+    {
+      name: 'Mobile',
+      info: mobile,
+    },
+    {
+      name: 'Tablet',
+      info: tablet,
+    },
+    {
+      name: 'Monitor',
+      info: monitor,
+    },
+  ];
 
   @ViewChild('assumptionsLimitation', { static: true }) public assumptionsLimitation!: ElementRef<HTMLDivElement>;
 

src/app/carbon-estimation/carbon-estimation.component.spec.ts

@@ -22,12 +22,12 @@ describe('CarbonEstimationComponent', () => {
       version: '1.0',
       upstreamEmissions: {
         software: 7,
-        user: 6,
+        employee: 6,
         network: 6,
         server: 6,
       },
       directEmissions: {
-        user: 9,
+        employee: 9,
         network: 8,
         server: 8,
       },
@@ -118,7 +118,7 @@ describe('CarbonEstimationComponent', () => {
             meta: { svg: 'web-logo', parent: 'Upstream Emissions' },
           },
           {
-            x: 'User Hardware',
+            x: 'Employee Hardware',
             y: 6,
             meta: { svg: 'devices-logo', parent: 'Upstream Emissions' },
           },
@@ -139,7 +139,7 @@ describe('CarbonEstimationComponent', () => {
         color: '#CB3775',
         data: [
           {
-            x: 'User Devices',
+            x: 'Employee Devices',
             y: 9,
             meta: { svg: 'devices-logo', parent: 'Direct Emissions' },
           },
@@ -206,12 +206,12 @@ describe('CarbonEstimationComponent', () => {
       version: '1.0',
       upstreamEmissions: {
         software: 0.2,
-        user: 0.1,
+        employee: 0.1,
         network: 0.1,
         server: 0.1,
       },
       directEmissions: {
-        user: 34.5,
+        employee: 34.5,
         network: 8,
         server: 8,
       },
@@ -237,12 +237,12 @@ describe('CarbonEstimationComponent', () => {
       version: '1.0',
       upstreamEmissions: {
         software: 25,
-        user: 0,
+        employee: 0,
         network: 0,
         server: 0,
       },
       directEmissions: {
-        user: 25,
+        employee: 25,
         network: 0,
         server: 0,
       },
@@ -277,7 +277,7 @@ describe('CarbonEstimationComponent', () => {
         color: '#CB3775',
         data: [
           {
-            x: 'User Devices',
+            x: 'Employee Devices',
             y: 25,
             meta: { svg: 'devices-logo', parent: 'Direct Emissions' },
           },
@@ -315,12 +315,12 @@ describe('CarbonEstimationComponent', () => {
       version: '1.0',
       upstreamEmissions: {
         software: 50,
-        user: 0,
+        employee: 0,
         network: 0,
         server: 0,
       },
       directEmissions: {
-        user: 50,
+        employee: 50,
         network: 0,
         server: 0,
       },
@@ -355,7 +355,7 @@ describe('CarbonEstimationComponent', () => {
         color: '#CB3775',
         data: [
           {
-            x: 'User Devices',
+            x: 'Employee Devices',
             y: 50,
             meta: { svg: 'devices-logo', parent: 'Direct Emissions' },
           },

src/app/carbon-estimation/carbon-estimation.component.ts

@@ -153,8 +153,8 @@ export class CarbonEstimationComponent implements OnInit {
         return this.getDataItemObject('Software - Off the Shelf', value, SVG.WEB, parent);
       case 'saas':
         return this.getDataItemObject('SaaS', value, SVG.WEB, parent);
-      case 'user':
-        return this.getDataItemObject(this.getUserLabel(parent), value, SVG.DEVICES, parent);
+      case 'employee':
+        return this.getDataItemObject(this.getEmployeeLabel(parent), value, SVG.DEVICES, parent);
       case 'endUser':
         return this.getDataItemObject('End-User Devices', value, SVG.DEVICES, parent);
       case 'network':
@@ -183,12 +183,12 @@ export class CarbonEstimationComponent implements OnInit {
     };
   }
 
-  private getUserLabel(key: string): string {
+  private getEmployeeLabel(key: string): string {
     switch (key) {
       case 'Upstream Emissions':
-        return 'User Hardware';
+        return 'Employee Hardware';
       case 'Direct Emissions':
-        return 'User Devices';
+        return 'Employee Devices';
       default:
         return startCase(key);
     }

src/app/carbon-estimator-form/carbon-estimator-form.component.html

@@ -248,17 +248,12 @@
 
   <div class="tce-flex tce-gap-4 tce-flex-row-reverse">
     <button
-      class="tce-px-3 tce-py-2 tce-bg-sky-800 tce-text-white tce-rounded disabled:tce-opacity-50 disabled:tce-cursor-not-allowed hover:tce-bg-sky-900"
+      class="tce-button-calculate tce-px-3 tce-py-2 disabled:tce-opacity-50 disabled:tce-cursor-not-allowed"
       type="submit"
       [disabled]="!estimatorForm.valid">
       Calculate
     </button>
-    <button
-      class="tce-px-3 tce-py-2 tce-bg-slate-200 tce-text-slate-800 tce-rounded hover:tce-bg-slate-300"
-      type="button"
-      (click)="resetForm()">
-      Reset
-    </button>
+    <button class="tce-button-reset tce-px-3 tce-py-2" type="button" (click)="resetForm()">Reset</button>
   </div>
 
   <ng-template

src/app/estimation/device-type.spec.ts

@@ -44,11 +44,11 @@ describe('Device type of server', () => {
 
 describe('Device type of network', () => {
   it('Estimates kWh of 1 network device', () => {
-    expect(network.estimateYearlyEnergy(1)).toBeCloseTo(1314);
+    expect(network.estimateYearlyEnergy(1)).toBeCloseTo(762.12);
   });
 
-  it('Estimates kWh of 30 desktops', () => {
-    expect(network.estimateYearlyEnergy(30)).toBeCloseTo(39420);
+  it('Estimates kWh of 30 network devices', () => {
+    expect(network.estimateYearlyEnergy(30)).toBeCloseTo(22863.6);
   });
 
   it('Estimates upstream emissions of 1 network device', () => {