feat: Add Angular Material theme colors and Highcharts theme configuration

- Generated a new SCSS file for Angular Material theme colors, defining primary, secondary, tertiary, neutral, neutral-variant, and error color palettes.
- Implemented a comprehensive Highcharts theme configuration, including tooltip formatting, axis settings, chart styles, legend customization, and exporting options.
- Ensured the theme utilizes CSS variables for consistent styling across the application.

Author: austenstone

_theme-colors.scss renamed to src/_theme-colors.scss

@@ -5,9 +5,8 @@ import { ThemingService } from './theme.service';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { UsageReportService } from './usage-report.service';
-// import '../highcharts.theme';
-
 ExportingModule(Highcharts);
+import '../highcharts.github.theme';
 
 const GITHUB_ICON = `<svg width="24px" height="24px" viewBox="1 0 100 100" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
@@ -249,7 +248,7 @@ export class AppComponent implements OnInit {
                     }
                 };
             }
-            Highcharts.setOptions(this.options);
+            // Highcharts.setOptions(this.options);
         }
         )
         this.usageReportService.getValueType().subscribe(valueType => {
@@ -260,7 +259,7 @@ export class AppComponent implements OnInit {
                     pointFormat: `<b>{series.name}</b><br>${valueType === 'cost' ? '${point.y:.2f}' : '{point.y} mins'}`,
                 }
             }
-            Highcharts.setOptions(this.options);
+            // Highcharts.setOptions(this.options);
         });
     }
 }

src/app/app.component.ts

@@ -29,7 +29,7 @@ export class ChartBarTopTimeComponent implements OnChanges {
     },
     xAxis: {
         title: {
-            text: 'Repository'
+        
         }
     },
     series: [{
@@ -88,6 +88,9 @@ export class ChartBarTopTimeComponent implements OnChanges {
         format: this.currency === 'cost' ? '${value}' : '{value}',
       }
     };
+    this.options.tooltip = {
+      format: `{point.name}</b><br>${this.currency === 'cost' ? '$<b>{point.y:.2f}</b>' : '<b>{point.y}</b> mins'}`,
+    };
     this.updateFromInput = true;
   }
 }

src/app/components/usage/actions/charts/chart-bar-top-time/chart-bar-top-time.component.ts

@@ -168,12 +168,15 @@ export class ChartLineUsageDailyComponent implements OnChanges {
         text: this.currency === 'minutes' ? 'Minutes (min)' : 'Cost (USD)'
       },
       labels: {
-        format: this.currency === 'cost' ? '${value}' : '{value}',
+        format: this.currency === 'cost' ? '${value:,.2f}' : '{value}',
       }
     };
     this.options.title = {
       text: `Actions ${this.currency === 'cost' ? 'Cost' : 'Usage'} ${this.timeType.toUpperCase()}`
     };
+    this.options.tooltip = {
+      format: `<b>{series.name}</b><br/>{point.x:%Y-%m-%d}<br>${this.currency === 'cost' ? '${point.y:,.2f}' : '{point.y} mins'}`,
+    }
     this.updateFromInput = true;
   }
 

src/app/components/usage/actions/charts/chart-line-usage-daily/chart-line-usage-daily.component.ts

@@ -43,18 +43,33 @@ export class ChartPieUserComponent implements OnChanges {
 
   ngOnChanges() {
     this.data = this.data.filter((line) => line.unitType === 'minutes');
-    this.options.series = [{
-      type: 'pie',
-      name: 'Usage',
-      data: this.data.reduce((acc, line) => {
+
+    const aggregatedData = this.data.reduce((acc, line) => {
         const index = acc.findIndex((item) => item[0] === line.username);
         if (index === -1) {
           acc.push([line.username, line.value]);
         } else {
           acc[index][1] += line.value;
         }
         return acc;
-      }, [] as [string, number][]).sort((a, b) => b[1] - a[1])
+      }, [] as [string, number][])
+      .sort((a, b) => b[1] - a[1]);
+
+    // Take top 20 and group the rest as "Other"
+    const topNo = 29;
+    const topX = aggregatedData.slice(0, topNo);
+    const remaining = aggregatedData.slice(topNo);
+
+    const data = [...topX];
+    if (remaining.length > 0) {
+      const otherTotal = remaining.reduce((sum, item) => sum + item[1], 0);
+      data.push(['Other', otherTotal]);
+    }
+    
+    this.options.series = [{
+      type: 'pie',
+      name: 'Usage',
+      data
     }];
     this.options.title = {
       text: `${this.currency === 'minutes' ? 'Usage' : 'Cost'} by username`