From 4db5fe9c0d1368051d6d6d0c517ef1c5f10a0300 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Sat, 19 Jul 2025 19:48:38 +0000
Subject: [PATCH 1/2] unit display

---
 frontend/package.json                         |  1 +
 .../db-table-widgets.component.ts             |  6 +-
 .../number/number.component.html              |  2 +-
 .../number/number.component.ts                | 21 ++++++
 frontend/yarn.lock                            | 69 ++++++++++++++++++-
 5 files changed, 95 insertions(+), 4 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 0c6d80686..e8ffc613d 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts
index 4f3c87786..bf1076cb6 100644
--- a/frontend/src/app/components/dashboard/db-table-widgets/db-table-widgets.component.ts
+++ b/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:
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
index acf48b2d5..356e592cb 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.html
+++ b/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"
diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
index 6e30e6636..1b091bfb6 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
+++ b/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,24 @@ 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');
+      return convertedValue.toString(2);
+    } catch (error) {
+      console.warn('Unit conversion failed:', error);
+      return this.value.toString();
+    }
+  }
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8e1440c0f..53d428862 100644
--- a/frontend/yarn.lock
+++ b/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"

From a779ec59f9fba149a7c5c247b09e59d01eb387b9 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Sat, 19 Jul 2025 19:56:36 +0000
Subject: [PATCH 2/2] rounding

---
 .../table-display-fields/number/number.component.ts           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
index 1b091bfb6..ca4ca22d1 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
+++ b/frontend/src/app/components/ui-components/table-display-fields/number/number.component.ts
@@ -27,7 +27,9 @@ export class NumberDisplayComponent extends BaseTableDisplayFieldComponent {
 
     try {
       const convertedValue = convert(parseFloat(this.value), unit).to('best');
-      return convertedValue.toString(2);
+      // 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();