feat: Update github-usage-report to version 3.1 and enhance file upload component with menu options

Author: austenstone

package-lock.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser": "^19.2.14",
     "@angular/platform-browser-dynamic": "^19.2.14",
     "@angular/router": "^19.2.14",
-    "github-usage-report": "3.0",
+    "github-usage-report": "3.1",
     "highcharts": "^11.2.0",
     "highcharts-angular": "^4.0.0",
     "jspdf": "^2.5.1",

package.json

@@ -1,5 +1,13 @@
 <input type="file" #fileInput name="fileUpload" (change)="onFileSelected($event)" style="display: none;" accept=".csv">
-<button mat-fab extended color="primary" (click)="fileInput.click()">
+<button style="margin: 40px 20px;" mat-fab extended color="primary" [matMenuTriggerFor]="menu">
   <mat-icon>upload_file</mat-icon>
   {{ text }}
-</button>
+</button>
+<mat-menu #menu="matMenu">
+  <button (click)="this.type = 'metered'; fileInput.click()" mat-menu-item>
+    Metered billing usage report
+  </button>
+  <button disabled (click)="this.type = 'copilot_premium_requests'; fileInput.click()" mat-menu-item>
+    Copilot premium requests usage report
+  </button>
+</mat-menu>

src/app/components/usage/file-upload/file-upload.component.html

@@ -1,3 +0,0 @@
-button {
-  margin: 40px 20px;
-}

src/app/components/usage/file-upload/file-upload.component.scss

@@ -8,8 +8,12 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@
 })
 export class FileUploadComponent {
   @Input() text: string = 'Choose File';
-  @Output() fileText = new EventEmitter<string>();
+  @Output() fileText = new EventEmitter<{
+    type: 'metered' | 'copilot_premium_requests';
+    fileText: string;
+  }>();
   @ViewChild('fileUpload', { static: false }) fileUpload!: ElementRef; // Add this line
+  type?: 'metered' | 'copilot_premium_requests';
 
   constructor() {
     this.fileUpload = new ElementRef(null);
@@ -23,7 +27,10 @@ export class FileUploadComponent {
       const reader = new FileReader();
       reader.onload = () => {
         const fileText = reader.result as string;
-        this.fileText.emit(fileText); // emit the file text to the parent component
+        this.fileText.emit({
+          type: this.type || 'metered',
+          fileText
+        }); // emit the file text to the parent component
       };
       reader.readAsText(file);
     }

src/app/components/usage/file-upload/file-upload.component.ts

@@ -7,7 +7,7 @@ <h1 class="mat-headline-2" style="user-select: none; font-weight: 800; text-alig
   </h2> -->
 </div>
 <div class="flex-center-horizontally full-width">
-  <app-file-upload [text]="status" (fileText)="onFileText($event)"></app-file-upload>
+  <app-file-upload [text]="status" (fileText)="onFileText($event.fileText, $event.type)"></app-file-upload>
 </div>
 
 <mat-progress-bar *ngIf="progress && progress < 99" mode="determinate" [value]="progress"></mat-progress-bar>

src/app/components/usage/usage.component.html

@@ -5,15 +5,17 @@ import { Observable, Subscription, debounceTime, map, startWith } from 'rxjs';
 import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
 import { DialogBillingNavigateComponent } from './dialog-billing-navigate';
 import { MatDialog } from '@angular/material/dialog';
+import { ModelUsageReport } from 'github-usage-report';
 
 @Component({
-    selector: 'app-usage',
-    templateUrl: './usage.component.html',
-    styleUrls: ['./usage.component.scss'],
-    standalone: false
+  selector: 'app-usage',
+  templateUrl: './usage.component.html',
+  styleUrls: ['./usage.component.scss'],
+  standalone: false
 })
 export class UsageComponent implements OnInit, OnDestroy {
   usage!: UsageReport;
+  usageCopilotPremiumRequests!: ModelUsageReport;
   usageLines = {} as {
     sharedStorage: CustomUsageReportLine[],
     codespaces: CustomUsageReportLine[],
@@ -92,31 +94,38 @@ export class UsageComponent implements OnInit, OnDestroy {
     this.subscriptions.forEach(subscription => subscription.unsubscribe());
   }
 
-  async onFileText(fileText: string) {
+  async onFileText(fileText: string, type: 'metered' | 'copilot_premium_requests') {
     this.status = 'Parsing File...';
-    const usage = await this.usageReportService.setUsageReportData(fileText, async (_: any, progress: any): Promise<any> => {
-      return await new Promise((resolve) => {
-        if (progress === this.progress) return resolve('');
-        setTimeout(() => {
-          this.progress = progress;
-          this.status = `Parsing File... ${progress}%`
-          resolve('');
-        }, 0)
-      });
-    }).then(async (usage) => {
-      this.status = 'Loading... Be patient, this may take a while.';
-      return new Promise<UsageReport>(resolve => setTimeout(() => resolve(usage), 100));
-    });
-    this.minDate = new Date(usage.lines[0]?.date);
-    this.maxDate = new Date(usage.lines[usage.lines.length - 1]?.date);
+
+    const progressFunction = async (_: any, progress: any): Promise<any> => {
+        return await new Promise((resolve) => {
+          if (progress === this.progress) return resolve('');
+            this.progress = progress;
+            this.status = `Parsing File... ${progress}%`
+            resolve(''); 
+        });
+      };
+    const usage = await (type === 'metered' ? this.usageReportService.setUsageReportData(fileText, progressFunction) : type === 'copilot_premium_requests' ? this.usageReportService.setUsageReportCopilotPremiumRequests(fileText, progressFunction) : null);
+    if (!usage) {
+      this.status = 'Error parsing file. Please check the file format.';
+      return;
+    }
+    const firstLine = usage.lines[0];
+    const lastLine = usage.lines[usage.lines.length - 1];
+    this.minDate = new Date(firstLine && 'date' in firstLine ? firstLine.date : new Date());
+    this.maxDate = new Date(lastLine && 'date' in lastLine ? lastLine.date : new Date());
     // make the date 00:00:00
     this.minDate.setHours(0, 0, 0, 0);
     this.maxDate.setHours(0, 0, 0, 0);
     this.range.controls.start.setValue(this.minDate, { emitEvent: false });
     this.range.controls.end.setValue(this.maxDate, { emitEvent: false });
+    if (type === 'copilot_premium_requests') {
+      this.usageCopilotPremiumRequests = usage as ModelUsageReport;
+    } else {
+      this.usage = usage as UsageReport;
+    }
     this.status = 'Usage Report';
     this.progress = null;
-    this.usage = usage;
     this.cdr.detectChanges();
   }
 

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

@@ -1,6 +1,6 @@
 import { TitleCasePipe } from '@angular/common';
 import { Injectable } from '@angular/core';
-import { readGithubUsageReport, UsageReport, UsageReportLine } from 'github-usage-report';
+import { ModelUsageReport, readGithubUsageReport, readModelUsageReport, UsageReport, UsageReportLine } from 'github-usage-report';
 import { BehaviorSubject, Observable, map } from 'rxjs';
 
 interface Filter {
@@ -25,7 +25,9 @@ export interface CustomUsageReport extends UsageReport {
 })
 export class UsageReportService {
   usageReportData!: string;
+  usageReportPremiumRequestsData!: string;
   usageReport!: CustomUsageReport;
+  usageReportCopilotPremiumRequests!: ModelUsageReport;
   usageReportFiltered: BehaviorSubject<CustomUsageReportLine[]> = new BehaviorSubject<CustomUsageReportLine[]>([]);
   usageReportFilteredProduct: { [key: string]: Observable<CustomUsageReportLine[]> } = {};
   filters: Filter = {
@@ -141,6 +143,14 @@ export class UsageReportService {
     this.valueType.next(value);
   }
 
+  async setUsageReportCopilotPremiumRequests(usageReportData: string, cb?: (usageReport: CustomUsageReport, percent: number) => void): Promise<ModelUsageReport> {
+    this.usageReportPremiumRequestsData = usageReportData;
+    await readModelUsageReport(this.usageReportPremiumRequestsData).then((report) => {
+      this.usageReportCopilotPremiumRequests = report;
+    });
+    return this.usageReportCopilotPremiumRequests;
+  }
+
   async setUsageReportData(usageReportData: string, cb?: (usageReport: CustomUsageReport, percent: number) => void): Promise<CustomUsageReport> {
     this.usageReportData = usageReportData;
     this.usageReport = await readGithubUsageReport(this.usageReportData) as CustomUsageReport;

src/app/usage-report.service.ts

@@ -36,16 +36,16 @@ const yAxisConfig: Highcharts.YAxisOptions = {
   ...xAxisConfig
 };
 export const colors = (style: string = 'emphasis') => [
-  `var()`,
-  `var()`,
-  `var()`,
-  `var()`,
-  `var()`,
-  `var()`,
-  `var()`,
-  `var()`,
-  `var()`,
-  `var()`,
+  `var(--data-blue-color-${style}, var(--data-blue-color))`,
+  `var(--data-green-color-${style}, var(--data-green-color))`,
+  `var(--data-orange-color-${style}, var(--data-orange-color))`,
+  `var(--data-pink-color-${style}, var(--data-pink-color))`,
+  `var(--data-yellow-color-${style}, var(--data-yellow-color))`,
+  `var(--data-red-color-${style}, var(--data-red-color))`,
+  `var(--data-purple-color-${style}, var(--data-purple-color))`,
+  `var(--data-auburn-color-${style}, var(--data-auburn-color))`,
+  `var(--data-teal-color-${style}, var(--data-teal-color))`,
+  `var(--data-gray-color-${style}, var(--data-gray-color))`,
 ]
 const theme: Highcharts.Options = {
   colors: [

src/highcharts.theme.ts

@@ -19,6 +19,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatMenuModule } from '@angular/material/menu';
 
 @NgModule({
   exports: [
@@ -45,7 +46,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatChipsModule,
     MatTabsModule,
     MatListModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatMenuModule
   ]
 })
 export class MaterialModule { }