Energy Consumption Widget

.github/workflows/pull-request.yml

@@ -49,7 +49,7 @@ jobs:
         run: npx eslint ./packages/${{ matrix.component }} --quiet
 
       - name: Test ${{ matrix.component }}
-        run: npm run test packages/${{ matrix.component }}
+        run: npm run test packages/${{ matrix.component }} --if-present
 
       - name: Build ${{ matrix.component }}
         run: npm run build packages/${{ matrix.component }}
@@ -60,4 +60,4 @@ jobs:
           name: ${{ matrix.component }}-build
           path: packages/${{ matrix.component }}/dist
           if-no-files-found: warn
-          retention-days: 5
+          retention-days: 5

angular.json

@@ -21,6 +21,7 @@
             "main": "packages/reminder/src/main.ts",
             "tsConfig": "packages/reminder/tsconfig.app.json",
             "polyfills": ["zone.js"],
+            "polyfills": ["zone.js"],
             "assets": [
               {
                 "glob": "**/*",
@@ -113,6 +114,7 @@
             "main": "packages/kpi-widget/src/main.ts",
             "tsConfig": "packages/kpi-widget/tsconfig.app.json",
             "polyfills": ["zone.js"],
+            "polyfills": ["zone.js"],
             "assets": [
               {
                 "glob": "**/*",
@@ -280,6 +282,99 @@
           "defaultConfiguration": "production"
         }
       }
+    },
+    "plugin.energy-consumption-widget": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "less"
+        }
+      },
+      "root": "packages/energy-consumption-widget",
+      "sourceRoot": "packages/energy-consumption-widget/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@c8y/devkit:build",
+          "options": {
+            "outputPath": "dist/cumulocity-energy-consumption-widget-plugin",
+            "main": "packages/energy-consumption-widget/src/main.ts",
+            "tsConfig": "packages/energy-consumption-widget/tsconfig.app.json",
+            "polyfills": ["zone.js"],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "packages/energy-consumption-widget/public"
+              },
+              "packages/energy-consumption-widget/src/assets"
+            ],
+            "inlineStyleLanguage": "less",
+            "styles": ["packages/energy-consumption-widget/src/styles.less"],
+            "scripts": [],
+            "aot": false,
+            "buildOptimizer": false,
+            "allowedCommonJsDependencies": [
+              "regenerator-runtime/runtime",
+              "@cordobo/qrcode",
+              "zone.js/dist/zone",
+              "chroma-js",
+              "lodash"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all",
+              "buildOptimizer": false
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@c8y/devkit:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "plugin.energy-consumption-widget:build:production"
+            },
+            "development": {
+              "buildTarget": "plugin.energy-consumption-widget:build:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 9001,
+            "publicHost": "localhost:9001"
+          }
+        },
+        "deploy": {
+          "builder": "@c8y/devkit:deploy",
+          "configurations": {
+            "production": {
+              "buildTarget": "plugin.energy-consumption-widget:build:production"
+            },
+            "development": {
+              "buildTarget": "plugin.energy-consumption-widget:build:development"
+            }
+          },
+          "defaultConfiguration": "production"
+        }
+      }
     }
   }
 }

package.json

@@ -15,6 +15,9 @@
     "serve:kpi": "npm run serve plugin.kpi-widget -- --shell %APP",
     "build:kpi": "ng build plugin.kpi-widget",
     "postbuild:kpi": "node tools/build-rename.js -p 'packages/kpi-widget'",
+    "serve:energy": "npm run serve plugin.energy-consumption-widget -- --shell %APP",
+    "build:energy": "ng build plugin.energy-consumption-widget",
+    "postbuild:energy": "node tools/build-rename.js -p 'packages/energy-consumption-widget'",
     "serve:release": "npm run serve plugin.release-notes -- --shell %APP",
     "build:release": "ng build plugin.release-notes",
     "postbuild:release": "node tools/build-rename.js -p 'packages/release-notes'"

packages/energy-consumption-widget/.browserslistrc

@@ -0,0 +1,20 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+
+# For additional information regarding the format and rule options, please see:
+
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+
+# npx browserslist
+
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

packages/energy-consumption-widget/README.md

@@ -0,0 +1,20 @@
+# Cumulocity Energy Consumption Widget Plugin
+
+## TODO
+
+- display of consumption of increasing measurements
+  - display by day/week/month/year (split into smaller fraction)
+  - display total
+  - display per quota
+  - use global timepicker?
+- next feature
+  - use event instead of timeframe
+  - support decreasing measurements?
+  - selectable daterange
+  - unit on axis (not possible?)
+
+---
+
+This widget is provided as-is and without warranty or support. They do not constitute part of the Cumulocity product suite. Users are free to use, fork and modify them, subject to the license agreement. While Cumulocity welcomes contributions, we cannot guarantee to include every contribution in the master project.
+
+<!-- <:3  )~~ -->

packages/energy-consumption-widget/cumulocity.config.ts

@@ -0,0 +1,48 @@
+import type { ConfigurationOptions } from '@c8y/devkit';
+import { author, description, name, version } from './package.json';
+
+export default {
+  runTime: {
+    author,
+    description,
+    version,
+    name: 'Energy Consumption Widget',
+    contentSecurityPolicy:
+      "base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss:;  script-src 'self' *.bugherd.com *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data: blob:; font-src * data:; frame-src *; worker-src 'self' blob:;",
+    dynamicOptionsUrl: true,
+    remotes: {
+      // 'plugin name from package.json': [ PluginModule ]
+      [name]: ['EnergyConsumptionWidgetPluginModule'],
+    },
+    package: 'plugin',
+    isPackage: true,
+    noAppSwitcher: true,
+    exports: [
+      {
+        name: 'Energy Consumption Widget',
+        module: 'EnergyConsumptionWidgetPluginModule',
+        path: './src/app/energy-consumption-widget/energy-consumption-widget.module.ts',
+        description: '',
+      },
+    ],
+  },
+  buildTime: {
+    federation: [
+      '@angular/animations',
+      '@angular/cdk',
+      '@angular/common',
+      '@angular/compiler',
+      '@angular/core',
+      '@angular/forms',
+      '@angular/platform-browser',
+      '@angular/platform-browser-dynamic',
+      '@angular/router',
+      '@angular/upgrade',
+      '@c8y/client',
+      '@c8y/ngx-components',
+      'ngx-bootstrap',
+      '@ngx-translate/core',
+      '@ngx-formly/core',
+    ],
+  },
+} as const satisfies ConfigurationOptions;

packages/energy-consumption-widget/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "cumulocity-energy-consumption-widget-plugin",
+  "version": "0.0.4",
+  "description": "",
+  "author": "@dirk-peter-c8y",
+  "homepage": "___TODO___",
+  "dependencies": {
+    "ng2-charts": "^4.1.1",
+    "ngx-moment": "^6.0.2"
+  }
+}

packages/energy-consumption-widget/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

packages/energy-consumption-widget/src/app/app.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule as ngRouterModule } from '@angular/router';
+import { BootstrapComponent, CoreModule, RouterModule } from '@c8y/ngx-components';
+import { CockpitDashboardModule } from '@c8y/ngx-components/context-dashboard';
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    ngRouterModule.forRoot([], { enableTracing: false, useHash: true }),
+    RouterModule.forRoot(),
+    CoreModule.forRoot(),
+    CommonModule,
+    CockpitDashboardModule,
+  ],
+  bootstrap: [BootstrapComponent],
+})
+export class AppModule {}

packages/energy-consumption-widget/src/app/energy-consumption-widget/components/energy-consumption-widget-config/energy-consumption-widget-config.component.scss

@@ -0,0 +1,4 @@
+::ng-deep .checkbox-field {
+  display: block;
+  margin-top: 22px;
+}