unit display

frontend/package.json

@@ -38,6 +38,7 @@
     "amplitude-js": "^8.21.9",
     "angular-password-strength-meter": "^12.0.0",
     "angulartics2": "^14.1.0",
+    "convert": "^5.12.0",
     "date-fns": "^4.1.0",
     "ipaddr.js": "^2.2.0",
     "json5": "^2.2.3",

frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts

@@ -106,7 +106,11 @@ export class DbTableWidgetsComponent implements OnInit {
 }`,
     String: `// No settings required`,
     Readonly: `// No settings required`,
-    Number: `// No settings required`,
+    Number: `// Configure number display with unit conversion
+// Example units: "bytes", "meters", "seconds", "grams"
+{
+  "unit": null
+}`,
     Select:
 `// provide array of options to map database value (key 'value') in human readable value (key 'label');
 // for example:

frontend/src/app/components/ui-components/table-display-fields/number/number.component.html

@@ -1,5 +1,5 @@
 <div class="field-display">
-  <span class="field-value">{{value || '—'}}</span>
+  <span class="field-value">{{displayValue}}</span>
   <button type="button" mat-icon-button
       class="field-copy-button"
       matTooltip="Copy"

frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts

@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import convert from 'convert';
 
 @Component({
   selector: 'app-display-number',
@@ -12,4 +13,26 @@ import { MatTooltipModule } from '@angular/material/tooltip';
   imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule]
 })
 export class NumberDisplayComponent extends BaseTableDisplayFieldComponent {
+
+  get displayValue(): string {
+    if (this.value == null || this.value === '') {
+      return '—';
+    }
+
+    const unit = this.widgetStructure?.widget_params?.unit;
+
+    if (!unit) {
+      return this.value.toString();
+    }
+
+    try {
+      const convertedValue = convert(parseFloat(this.value), unit).to('best');
+      // Format number to max 2 decimal places without trailing zeros
+      const formattedQuantity = parseFloat(convertedValue.quantity.toFixed(2)).toString();
+      return `${formattedQuantity} ${convertedValue.unit}`;
+    } catch (error) {
+      console.warn('Unit conversion failed:', error);
+      return this.value.toString();
+    }
+  }
 }

frontend/yarn.lock

@@ -4775,6 +4775,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"balanced-match@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "balanced-match@npm:3.0.1"
+  checksum: 799bc086e80c5fe6c40e5bf486340d86ec76179017601a40dd0310ac92b44beaab19c55757a38bfd22e3b1572e5c3536e6f79050898f8fa9bbb7db4cfcf9e08e
+  languageName: node
+  linkType: hard
+
 "bare-events@npm:^2.0.0, bare-events@npm:^2.2.0":
   version: 2.5.0
   resolution: "bare-events@npm:2.5.0"
@@ -4957,6 +4964,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"brace-expansion@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "brace-expansion@npm:4.0.1"
+  dependencies:
+    balanced-match: ^3.0.0
+  checksum: e75879c6f2defba2359b8d92ab9e0c9b884ecca2a65d686f252650d5e40f40209385aec4247acbe9fb2ed274330b25d55b71bb99a02386b2122573d40b3e64d1
+  languageName: node
+  linkType: hard
+
 "braces@npm:^3.0.2, braces@npm:^3.0.3, braces@npm:~3.0.2":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
@@ -5123,7 +5139,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.5.1, chokidar@npm:^3.6.0":
+"chokidar@npm:^3.5.1, chokidar@npm:^3.5.3, chokidar@npm:^3.6.0":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
   dependencies:
@@ -5430,6 +5446,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert@npm:^5.12.0":
+  version: 5.12.0
+  resolution: "convert@npm:5.12.0"
+  dependencies:
+    wireit: 0.14.12
+  checksum: 02cfe5345ac9183870bc87c9ba920c1ada77ad958ef092463f3f4b3a81bf833a709aedf79e22a26ee5baa810adda62ec6b93e3eed1c44f4e2392670bdc7dfb4c
+  languageName: node
+  linkType: hard
+
 "cookie-signature@npm:1.0.6":
   version: 1.0.6
   resolution: "cookie-signature@npm:1.0.6"
@@ -6242,6 +6267,7 @@ __metadata:
     amplitude-js: ^8.21.9
     angular-password-strength-meter: ^12.0.0
     angulartics2: ^14.1.0
+    convert: ^5.12.0
     date-fns: ^4.1.0
     ipaddr.js: ^2.2.0
     jasmine-core: ~5.5.0
@@ -6964,6 +6990,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-glob@npm:^3.2.11":
+  version: 3.3.3
+  resolution: "fast-glob@npm:3.3.3"
+  dependencies:
+    "@nodelib/fs.stat": ^2.0.2
+    "@nodelib/fs.walk": ^1.2.3
+    glob-parent: ^5.1.2
+    merge2: ^1.3.0
+    micromatch: ^4.0.8
+  checksum: 0704d7b85c0305fd2cef37777337dfa26230fdd072dce9fb5c82a4b03156f3ffb8ed3e636033e65d45d2a5805a4e475825369a27404c0307f2db0c8eb3366fbd
+  languageName: node
+  linkType: hard
+
 "fast-json-stable-stringify@npm:^2.0.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -8180,7 +8219,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonc-parser@npm:3.3.1":
+"jsonc-parser@npm:3.3.1, jsonc-parser@npm:^3.0.0":
   version: 3.3.1
   resolution: "jsonc-parser@npm:3.3.1"
   checksum: 81ef19d98d9c6bd6e4a37a95e2753c51c21705cbeffd895e177f4b542cca9cda5fda12fb942a71a2e824a9132cf119dc2e642e9286386055e1365b5478f49a47
@@ -10159,6 +10198,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proper-lockfile@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "proper-lockfile@npm:4.1.2"
+  dependencies:
+    graceful-fs: ^4.2.4
+    retry: ^0.12.0
+    signal-exit: ^3.0.2
+  checksum: 00078ee6a61c216a56a6140c7d2a98c6c733b3678503002dc073ab8beca5d50ca271de4c85fca13b9b8ee2ff546c36674d1850509b84a04a5d0363bcb8638939
+  languageName: node
+  linkType: hard
+
 "proxy-addr@npm:~2.0.7":
   version: 2.0.7
   resolution: "proxy-addr@npm:2.0.7"
@@ -12462,6 +12512,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wireit@npm:0.14.12":
+  version: 0.14.12
+  resolution: "wireit@npm:0.14.12"
+  dependencies:
+    brace-expansion: ^4.0.0
+    chokidar: ^3.5.3
+    fast-glob: ^3.2.11
+    jsonc-parser: ^3.0.0
+    proper-lockfile: ^4.1.2
+  bin:
+    wireit: bin/wireit.js
+  checksum: 62d3a6fc0e365268bb45cb5aeb7fed5ce5994b19a65955777d2b9a8334379a7195005e6d35ed9689ebc62690c22fe3aefd94ed0ba9cf8c26ec8b948a0e3ebb67
+  languageName: node
+  linkType: hard
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"