fix: Misc UI Tweaks

main/http_server/axe-os/src/app/components/home/home.component.html

@@ -18,8 +18,7 @@ <h4>Loading...</h4>
                             <div class="flex justify-content-between mb-3">
                                 <div>
                                     <span class="block text-500 font-medium mb-3">Hash Rate</span>
-                                    <div class="text-900 font-medium text-xl">{{info.hashRate | number: '1.2-2'}}
-                                        <small>Gh/s</small>
+                                    <div class="text-900 font-medium text-xl">{{info.hashRate * 1000000000 | hashSuffix}}
                                     </div>
                                 </div>
                                 <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
@@ -28,9 +27,8 @@ <h4>Loading...</h4>
                                 </div>
                             </div>
                             <ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
-                                <span class="text-green-500 font-medium">{{expectedHashRate}}
-                                    <small>Gh/s </small></span>
-                                <span class="text-500">expected</span>
+                                <span class="text-green-500 font-medium">{{expectedHashRate * 1000000000 | hashSuffix}}</span>
+                                <span class="text-500"> expected</span>
                             </ng-container>
                         </div>
                     </div>
@@ -39,14 +37,14 @@ <h4>Loading...</h4>
                             <div class="flex justify-content-between mb-3">
                                 <div>
                                     <span class="block text-500 font-medium mb-3">Shares</span>
-                                    <div class="text-900 font-medium text-xl">{{info.sharesAccepted}}</div>
+                                    <div class="text-900 font-medium text-xl">{{info.sharesAccepted | number: '1.0-0'}}</div>
                                 </div>
                                 <div class="flex align-items-center justify-content-center bg-blue-100 border-round"
                                     [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
                                     <i class="pi pi-send text-blue-500 text-xl"></i>
                                 </div>
                             </div>
-                            <span class="text-red-500 font-medium">{{info.sharesRejected}} </span>
+                            <span class="text-red-500 font-medium">{{info.sharesRejected | number: '1.0-0'}} </span>
                             <span class="text-500">rejected</span>
                         </div>
                     </div>
@@ -56,7 +54,7 @@ <h4>Loading...</h4>
                                 <div>
                                     <span class="block text-500 font-medium mb-3">Efficiency</span>
                                     <div class="text-900 font-medium text-xl">
-                                        <td>{{info.power / (info.hashRate/1000) | number: '1.2-2'}} <small>J/Th</small>
+                                        <td>{{info.power / (info.hashRate/1000) | number: '1.2-2'}} <small>J/TH</small>
                                         </td>
                                     </div>
                                 </div>
@@ -65,6 +63,11 @@ <h4>Loading...</h4>
                                     <i class="pi pi-thumbs-up text-orange-500 text-xl"></i>
                                 </div>
                             </div>
+                            <ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
+                                <span class="text-green-500 font-medium">{{info.power / (expectedHashRate/1000) | number: '1.2-2'}} <small>J/TH</small>
+                                </span>
+                                <span class="text-500"> expected</span>
+                            </ng-container>
                             <!-- <span class="text-green-500 font-medium">%52+ </span>
                             <span class="text-500">since last week</span> -->
                         </div>
@@ -130,7 +133,7 @@ <h5>Heat</h5>
                 <div class="grid text-center">
                     <div class="col-6">
                         <p-knob [min]="20" [max]="maxTemp" [readonly]="true" [(ngModel)]="info.temp"
-                            valueTemplate="{value}C"
+                            valueTemplate="{value}°C"
                             [valueColor]="info.temp >= 70 ? '#ff0000' : 'var(--primary-color, Black)'">
                         </p-knob>
                         ASIC Temperature
@@ -183,8 +186,8 @@ <h5>Performance</h5>
                 <div class="grid text-center">
                     <div class="col-6">
                         <p-knob [min]="100" [max]="maxFrequency" [readonly]="true" [(ngModel)]="info.frequency"
-                            valueTemplate="{value}Mhz"></p-knob>
-                        ASIC Frequency
+                            valueTemplate="{value}"></p-knob>
+                        ASIC Frequency (MHz)
                     </div>
                     <div class="col-6">
                         <p-knob [min]="0.9" [max]="1.8" [readonly]="true" [(ngModel)]="info.coreVoltageActual"

main/http_server/axe-os/src/app/components/home/home.component.ts

@@ -21,6 +21,7 @@ export class HomeComponent {
   public chartOptions: any;
   public dataLabel: number[] = [];
   public dataData: number[] = [];
+  public dataDataAverage: number[] = [];
   public chartData?: any;
 
   public maxPower: number = 50;
@@ -52,7 +53,18 @@ export class HomeComponent {
           pointHoverRadius: 5,
           borderWidth: 1
         },
-
+        {
+          type: 'line',
+          label: 'Average Hashrate',
+          data: [],
+          fill: false,
+          backgroundColor: textColorSecondary,
+          borderColor: textColorSecondary,
+          tension: 0,
+          pointRadius: 0,
+          borderWidth: 2,
+          borderDash: [5, 5]
+        }
       ]
     };
 
@@ -113,18 +125,21 @@ export class HomeComponent {
         return this.systemService.getInfo()
       }),
       tap(info => {
-
         this.dataData.push(info.hashRate * 1000000000);
         this.dataLabel.push(new Date().getTime());
 
-        if (this.dataData.length >= 1000) {
+        if (this.dataData.length >= 720) {
           this.dataData.shift();
           this.dataLabel.shift();
         }
 
         this.chartData.labels = this.dataLabel;
         this.chartData.datasets[0].data = this.dataData;
 
+        // Calculate average hashrate and fill the array with the same value for the average line
+        const averageHashrate = this.calculateAverage(this.dataData);
+        this.chartData.datasets[1].data = Array(this.dataData.length).fill(averageHashrate);
+
         this.chartData = {
           ...this.chartData
         };
@@ -142,8 +157,6 @@ export class HomeComponent {
         info.coreVoltage = parseFloat((info.coreVoltage / 1000).toFixed(2));
         info.temp = parseFloat(info.temp.toFixed(1));
 
-
-
         return info;
       }),
       shareReplay({ refCount: true, bufferSize: 1 })
@@ -175,5 +188,10 @@ export class HomeComponent {
 
   }
 
+  private calculateAverage(data: number[]): number {
+    if (data.length === 0) return 0;
+    const sum = data.reduce((sum, value) => sum + value, 0);
+    return sum / data.length;
+  }
 }
 

main/http_server/axe-os/src/app/components/swarm/swarm.component.html

@@ -34,11 +34,11 @@
         <ng-container *ngFor="let axeOs$ of swarm">
             <tr *ngIf="axeOs$ | async as axe">
                 <td><a [href]="'http://'+axe.ip" target="_blank">{{axe.ip}}</a></td>
-                <td>{{axe.hashRate | number: '1.2-2'}} <small>Gh/s</small></td>
+                <td>{{axe.hashRate * 1000000000 | hashSuffix}}</td>
                 <td>{{axe.uptimeSeconds | dateAgo}}</td>
-                <td>{{axe.sharesAccepted}}</td>
+                <td>{{axe.sharesAccepted | number: '1.0-0'}}</td>
                 <td>{{axe.power | number: '1.2-2'}} <small>W</small> </td>
-                <td>{{axe.temp}} <small>C</small></td>
+                <td>{{axe.temp}}°<small>C</small></td>
                 <td>{{axe.bestDiff}}</td>
                 <td>{{axe.version}}</td>
                 <td><p-button icon="pi pi-pencil" pp-button (click)="edit(axe)"></p-button></td>

main/http_server/axe-os/src/app/layout/styles/layout/_menu.scss

@@ -1,6 +1,6 @@
 .layout-sidebar {
     position: fixed;
-    width: 300px;
+    width: 250px;
     height: calc(100vh - 9rem);
     z-index: 999;
     overflow-y: auto;

main/http_server/axe-os/src/app/layout/styles/layout/_responsive.scss

@@ -33,7 +33,7 @@
 
         &.layout-static {
             .layout-main-container {
-                margin-left: 300px;
+                margin-left: 250px;
             }
 
             &.layout-static-inactive {

main/http_server/axe-os/src/app/layout/styles/layout/_topbar.scss

@@ -18,7 +18,7 @@
         color: var(--surface-900);
         font-size: 1.5rem;
         font-weight: 500;
-        width: 300px;
+        width: 250px;
         border-radius: 12px;
 
         img {

main/http_server/axe-os/src/app/pipes/hash-suffix.pipe.ts

@@ -28,9 +28,11 @@ export class HashSuffixPipe implements PipeTransform {
 
     if (scaledValue < 10) {
       return scaledValue.toFixed(2) + suffix;
+    } else if (scaledValue < 100) {
+      return scaledValue.toFixed(1) + suffix;
     }
 
-    return scaledValue.toFixed(1) + suffix;
+    return scaledValue.toFixed(0) + suffix;
   }