v14 working!

Author: Rick Butterfield

src/Umbraco.Community.Sustainability/Umbraco.Community.Sustainability.csproj

@@ -16,7 +16,7 @@
     <RootNamespace>Umbraco.Community.Sustainability</RootNamespace>
     <GeneratePackageOnBuild>True</GeneratePackageOnBuild>
 
-    <VersionPrefix>1.0.1</VersionPrefix>
+    <VersionPrefix>2.0.0</VersionPrefix>
     <VersionSuffix></VersionSuffix>
     <Authors>Umbraco Sustainability Community Team</Authors>
     <Copyright>$([System.DateTime]::UtcNow.ToString(`yyyy`)) © Umbraco Sustainability Community Team</Copyright>
@@ -32,8 +32,8 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.Data.SqlClient" Version="5.2.0" />
     <PackageReference Include="Microsoft.Playwright" Version="1.40.0" />
-    <PackageReference Include="Umbraco.Cms.Web.Website" Version="14.0.0-rc2" />
-    <PackageReference Include="Umbraco.Cms.Api.Common" Version="14.0.0-rc2" />
+    <PackageReference Include="Umbraco.Cms.Web.Website" Version="[14.0.0-rc2, 15.0.0)" />
+    <PackageReference Include="Umbraco.Cms.Api.Common" Version="[14.0.0-rc2, 15.0.0)" />
   </ItemGroup>
 
   <ItemGroup>

src/Umbraco.Community.Sustainability/assets/src/components/carbon-rating.element.ts

@@ -0,0 +1,38 @@
+import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"
+import { LitElement, customElement, html, property } from "@umbraco-cms/backoffice/external/lit";
+import { UUIInterfaceColor } from "@umbraco-cms/backoffice/external/uui";
+
+const elementName = "sustainability-carbon-rating";
+
+@customElement(elementName)
+export class SustainabilityCarbonRating extends UmbElementMixin(LitElement) {
+
+  @property({type: String}) 
+  carbonRating: string | null | undefined = undefined;
+
+  _getColour(carbonRating: string | null | undefined): UUIInterfaceColor {
+    if (carbonRating == "E" || carbonRating == "F") {
+      return "danger";
+    }
+    else if (carbonRating == "D") {
+      return "warning";
+    }
+    else return "positive";
+  }
+
+  render() {
+    return html`
+    <uui-tag .color=${this._getColour(this.carbonRating)}>
+      ${this.carbonRating}
+    </uui-tag>
+    `
+  }
+}
+
+export default SustainabilityCarbonRating;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [elementName]: SustainabilityCarbonRating;
+  }
+}

src/Umbraco.Community.Sustainability/assets/src/components/index.ts

@@ -0,0 +1 @@
+export * from './carbon-rating.element';

src/Umbraco.Community.Sustainability/assets/src/dashboards/sustainability.dashboard.element.ts

@@ -10,7 +10,7 @@ export class SustainabilityOverviewDashboardElement extends UmbElementMixin(LitE
   @state()
   private _routes: UmbRoute[] = [
     {
-      path: ``,
+      path: '',
       component: () => import('./views/sustainability-overview.element')
     }
   ];

src/Umbraco.Community.Sustainability/assets/src/dashboards/views/sustainability-overview.element.ts

@@ -11,14 +11,23 @@ export class SustainabilityOverviewElement extends UmbLitElement {
 
   #sustainabilityContext?: SustainabilityContext;
 
+  #localizeDateOptions: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true
+  };
+
   @state()
   _overviewData?: PagedResultPageMetricModel;
 
   @state()
   _averageData?: AveragePageMetrics;
 
   @state()
-  _greenHost?: Boolean | undefined = undefined;
+  _greenHost: boolean = false;
 
   constructor() {
     super();
@@ -46,13 +55,13 @@ export class SustainabilityOverviewElement extends UmbLitElement {
       await this.#sustainabilityContext.getAverageData();
     }
 
-    hosting.check(window.location.hostname, 'Test').then((result: boolean) => {
-      this._greenHost = result;
-    })
+    if (hosting.check(window.location.hostname, 'Test')) {
+      this._greenHost = true;
+    }
   }
 
   #renderNoResults() {
-    if (this._overviewData?.items.length === 0) {
+    if (this._overviewData?.items?.length === 0) {
       return html`
         <uui-box>
           No data to show yet. Once you've run some tests, you'll see an overview of all your data here.
@@ -63,7 +72,7 @@ export class SustainabilityOverviewElement extends UmbLitElement {
 
 
   #renderResults() {
-    if (this._overviewData?.items.length !== 0) {
+    if (this._overviewData?.items?.length !== 0) {
       return html`
       <div id="left-column">
         <uui-box>
@@ -75,7 +84,7 @@ export class SustainabilityOverviewElement extends UmbLitElement {
             </uui-table-head>
 
             ${repeat(
-              this._overviewData.items,
+              this._overviewData?.items!,
               (item: PageMetric) => item,
               (item: PageMetric) => html`
                 <uui-table-row>
@@ -85,19 +94,20 @@ export class SustainabilityOverviewElement extends UmbLitElement {
                     </a>
                   </uui-table-cell>
                   <uui-table-cell>
-                    ${item.requestDate}
+                    <umb-localize-date date=${item.requestDate} .options=${this.#localizeDateOptions}>
+                    </umb-localize-date>
                   </uui-table-cell>
                   <uui-table-cell>
-                    <uui-tag>
-                      ${item.carbonRating}
-                    </uui-tag>
+                    <sustainability-carbon-rating
+                      .carbonRating=${item.carbonRating}>
+                    </sustainability-carbon-rating>
                   </uui-table-cell>
                 </uui-table-row>
                 `
             )}
           </uui-table>
 
-          <uui-button look="primary" href="/umbraco#sustainability/sustainability/stats">
+          <uui-button label="See more data" look="primary" href="/umbraco/section/sustainability/workspace/stats-root">
             See more data
           </uui-button>
         </uui-box>
@@ -106,6 +116,26 @@ export class SustainabilityOverviewElement extends UmbLitElement {
     }
   }
 
+  _calculateGrade(score: number): string {
+    // grade using swd digital carbon ratings
+    // https://sustainablewebdesign.org/digital-carbon-ratings/
+    if (score < 0.095) {
+      return 'A+';
+    } else if (score < 0.186) {
+      return 'A';
+    } else if (score < 0.341) {
+      return 'B';
+    } else if (score < 0.493) {
+      return 'C';
+    } else if (score < 0.656) {
+      return 'D';
+    } else if (score < 0.846) {
+      return 'E';
+    } else {
+      return 'F';
+    }
+  }
+
   #renderGreenHostingValue() {
     if (this._greenHost === undefined) {
       return html`
@@ -132,23 +162,22 @@ export class SustainabilityOverviewElement extends UmbLitElement {
   }
 
   #renderSidebar() {
-    if (this._overviewData?.items.length !== 0) {
+    if (this._overviewData?.items?.length !== 0) {
       return html`
         <div id="right-column">
           ${this.#renderGreenHosting()}
 
           <uui-box headline="Average carbon rating" style="margin-bottom: var(--uui-size-space-4);">
-            <uui-tag>
-              ${this._averageData?.carbonRating}
-            </uui-tag>
+            <sustainability-carbon-rating .carbonRating=${this._calculateGrade(this._averageData?.emissions!)}>
+            </sustainability-carbon-rating>
           </uui-box>
 
           <uui-box headline="Average page size" style="margin-bottom: var(--uui-size-space-4);">
-            ${(this._averageData?.pageSize / 1024).toFixed(2)}KB
+            ${(this._averageData?.pageSize! / 1024).toFixed(2)}KB
           </uui-box>
 
           <uui-box headline="Average CO₂ per page view">
-            ${this._averageData?.emissions.toFixed(4)}g
+            ${this._averageData?.emissions?.toFixed(4)}g
           </uui-box>
 
         </div>

src/Umbraco.Community.Sustainability/assets/src/documents/views/sustainability-workspace-view.ts

@@ -81,7 +81,7 @@ export class SustainabilityWorkspaceElement extends UmbElementMixin(LitElement)
       return html`
           <uui-box headline="Loading sustainability report...">
               <p>It looks like you haven't run a report on this page yet. Click the button below to get started.</p>
-              <uui-button look="primary" @click=${this.checkPage} .state=${this.waiting ? "waiting" : undefined}>
+              <uui-button label="Run sustainability report" look="primary" @click=${this.checkPage} .state=${this.waiting ? "waiting" : undefined}>
                 Run sustainability report
               </uui-button>
           </uui-box>
@@ -99,7 +99,7 @@ export class SustainabilityWorkspaceElement extends UmbElementMixin(LitElement)
             <div class="container">
               <uui-box headline="Sustainability report">
                 <p><strong>Last tested:</strong> ${new Intl.DateTimeFormat('en-GB', { dateStyle: "long", timeStyle: "short" }).format(new Date(this.pageData?.lastRunDate!))}</p>
-                <uui-button look="primary" @click=${this.checkPage} .state=${this.waiting ? "waiting" : undefined}>
+                <uui-button label="Run again" look="primary" @click=${this.checkPage} .state=${this.waiting ? "waiting" : undefined}>
                   Run again
                 </uui-button>
               </uui-box>

src/Umbraco.Community.Sustainability/assets/src/index.ts

@@ -8,6 +8,7 @@ import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
 import SustainabilityContext, { SUSTAINABILITY_CONTEXT } from './context/sustainability.context.ts';
 import { OpenAPI } from './api/index.ts';
 
+export * from './components/index';
 export * from './repository/index';
 
 export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {

src/Umbraco.Community.Sustainability/assets/src/section/manifests.ts

@@ -1,5 +1,6 @@
 import { ManifestMenu, ManifestSection, ManifestSectionSidebarAppMenuKind } from "@umbraco-cms/backoffice/extension-registry";
 
+import { manifests as overviewManifests } from './overview/manifests';
 import { manifests as statsManifests } from './stats/manifests';
 
 const sectionAlias = "Umb.Section.Sustainability";
@@ -47,5 +48,6 @@ export const manifests = [
   section,
   menu,
   menuSectionSidebarApp,
+  ...overviewManifests,
   ...statsManifests
 ]

src/Umbraco.Community.Sustainability/assets/src/section/overview/manifests.ts

@@ -0,0 +1,7 @@
+import { manifests as menuItems } from './menu-item/manifests';
+import { manifests as workspaceManifests } from './workspace/manifests';
+
+export const manifests = [
+  ...workspaceManifests,
+  ...menuItems
+]

src/Umbraco.Community.Sustainability/assets/src/section/overview/menu-item/manifests.ts

@@ -0,0 +1,17 @@
+import type { ManifestMenuItem } from '@umbraco-cms/backoffice/extension-registry';
+import { SUSTAINABILITY_OVERVIEW_ROOT_ENTITY_TYPE } from '../types';
+
+const menuItem: ManifestMenuItem = {
+  type: 'menuItem',
+  alias: 'Sustainability.MenuItem.Overview',
+  name: 'Overview Menu Item',
+  weight: 2000,
+  meta: {
+    label: 'Overview',
+    icon: 'icon-eco',
+    entityType: SUSTAINABILITY_OVERVIEW_ROOT_ENTITY_TYPE,
+    menus: ["Umb.Menu.Sustainability"],
+  }
+};
+
+export const manifests = [menuItem];