DEV-177

SpareCores · Jun 13, 2024 · 090b072 · 090b072
1 parent e219c2c
commit 090b072
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/src/app/pages/server-details/chartOptions.ts b/src/app/pages/server-details/chartOptions.ts
@@ -15,6 +15,11 @@ export const  barChartOptions: ChartConfiguration<'bar'>['options'] = {
       grid: {
         color: '#4B5563',
       },
+      title: {
+        display: true,
+        color: '#FFF',
+        text: 'USD/h',
+      },
     },
   },
   plugins: {

diff --git a/src/app/pages/server-details/server-details.component.html b/src/app/pages/server-details/server-details.component.html
@@ -125,10 +125,10 @@ <h3 class="text-2xl">Availability</h3>
               <td>
                   <div><b>{{item.display_name}}</b> / {{item.api_reference}} </div>
               </td>
-              <td *ngIf="item['spot']"> ${{item['spot'].price}}/{{item['spot'].unit | reduceUnitName}}</td>
-              <td *ngIf="!item['spot']"> - </td>
-              <td *ngIf="item['ondemand']"> ${{item['ondemand'].price}}/{{item['ondemand'].unit | reduceUnitName}}</td>
-              <td *ngIf="!item['ondemand']"> - </td>
+              <td *ngIf="item['spot'].price"> {{item['spot'].price}}{{item['spot'].currency}}/{{item['spot'].unit | reduceUnitName}}</td>
+              <td *ngIf="!item['spot'].price"> - </td>
+              <td *ngIf="item['ondemand'].price"> {{item['ondemand'].price}}{{item['ondemand'].currency}}/{{item['ondemand'].unit | reduceUnitName}}</td>
+              <td *ngIf="!item['ondemand'].price"> - </td>
             </tr>
           </tbody>
         </table>

diff --git a/src/app/pages/server-details/server-details.component.ts b/src/app/pages/server-details/server-details.component.ts
@@ -193,6 +193,7 @@ export class ServerDetailsComponent implements OnInit {
           });
 
           this.regionFilters = [];
+
           this.serverDetails.prices?.sort((a, b) => a.price - b.price);
           this.serverDetails.prices?.forEach((price: ServerPricePKs) => {
               const region = this.regionFilters.find((z) => z.region_id === price.region_id);
@@ -205,6 +206,10 @@ export class ServerDetailsComponent implements OnInit {
             this.regionFilters[0].selected = true;
           }
 
+          if(this.serverDetails.prices?.length > 0 && (this.barChartOptions?.scales as any)?.y?.title?.text) {
+            (this.barChartOptions!.scales as any).y.title.text = `${this.serverDetails.prices[0].currency}/h`;
+          }
+
           this.refreshGraphs();
 
           this.title = `${this.serverDetails.display_name} by ${this.serverDetails.vendor.name} - Spare Cores`;
@@ -441,6 +446,7 @@ export class ServerDetailsComponent implements OnInit {
 
     this.serverDetails.prices.forEach((price: ServerPricePKs) => {
     const zone = this.availabilityRegions.find((z) => z.region_id === price.region_id);
+      const allocation = price.allocation || 'spot';
       if(!zone) {
         const data: any = {
           region_id: price.region_id,
@@ -449,21 +455,23 @@ export class ServerDetailsComponent implements OnInit {
           spot: {
             price: 0,
             unit: price.unit,
-            count: 0
+            count: 0,
+            currency: price.currency
           },
           ondemand: {
             price: 0,
             unit: price.unit,
-            count: 0
+            count: 0,
+            currency: price.currency
           }
         };
-        data[price.allocation || 'spot'].price += price.price;
-        data[price.allocation || 'spot'].count++;
+        data[allocation].price += price.price;
+        data[allocation].count++;
 
         this.availabilityRegions.push(data);
       } else {
-        zone[price.allocation || 'spot'].price += price.price;
-        zone[price.allocation || 'spot'].count++;
+        zone[allocation].price += price.price;
+        zone[allocation].count++;
       }
     });