Refactor usage component and usage report service

Author: austenstone

src/app/components/usage/usage.component.ts

@@ -42,7 +42,6 @@ export class UsageComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.subscriptions.push(
       this.range.valueChanges.pipe(debounceTime(500)).subscribe(value => {
-        console.log('value', value);
         if (value.start && value.start instanceof Date && !isNaN(value.start.getTime()) &&
           value.end && value.end instanceof Date && !isNaN(value.end.getTime())) {
           this.usageReportService.applyFilter({

src/app/usage-report.service.ts

@@ -1,3 +1,4 @@
+import { TitleCasePipe } from '@angular/common';
 import { Injectable } from '@angular/core';
 import { UsageReport, UsageReportLine } from 'github-usage-report/types';
 import { BehaviorSubject, Observable, map } from 'rxjs';
@@ -238,8 +239,23 @@ export class UsageReportService {
   }
 
   formatSku(sku: string) {
-    if (sku === 'ubuntu') return 'ubuntu 2';
+    let formatted;
     const skuParts = sku.split('Compute - ');
-    return skuParts.length > 1 ? skuParts[1].toLowerCase().replaceAll('_', ' ').replace(' core', '') : sku;
+    if (skuParts.length < 2) return sku;
+    formatted = skuParts[1].replaceAll('_', ' ').replace(' CORE', '');
+    formatted = titlecasePipe.transform(formatted);
+    formatted = formatted.replace('Macos', 'MacOS');
+    switch(formatted) {
+      case 'Ubuntu':
+        return 'Ubuntu 2';
+      case 'Windows':
+        return 'Windows 2';
+      case 'MacOS':
+        return 'MacOS 3';
+      default:
+        return formatted;
+    }
   }
 }
+
+const titlecasePipe = new TitleCasePipe();

src/material.theme.scss

@@ -116,8 +116,13 @@ $light-theme: mat.define-light-theme((
  :root {
    color-scheme: light;
  }
+}
 
- @debug mat.get-theme-color($dark-theme, primary, default);
+.mat-column-user,
+.mat-column-workflow,
+.mat-column-repo,
+.mat-column-sku {
+  background: #e0e0e0 !important;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -146,5 +151,12 @@ $light-theme: mat.define-light-theme((
  .mat-button-toggle-appearance-standard {
   background: #0d1117 !important;
  }
+
+  .mat-column-user,
+  .mat-column-workflow,
+  .mat-column-repo,
+  .mat-column-sku {
+    background: #161b22 !important;
+  }
 }
 

src/styles.scss

@@ -81,12 +81,3 @@ mat-cell {
     vertical-align: bottom !important;
   }
 }
-
-
-.mat-column-user,
-.mat-column-workflow,
-.mat-column-repo,
-.mat-column-sku {
-  background: #161b22 !important;
-  max-width: 350px;
-}