Update styles and components

Author: austenstone

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

@@ -3,8 +3,8 @@
     <mat-button-toggle value="total">All</mat-button-toggle>
     <mat-button-toggle value="repo">Repo</mat-button-toggle>
     <mat-button-toggle value="sku">Runner</mat-button-toggle>
-    <mat-button-toggle value="user">User</mat-button-toggle>
     <mat-button-toggle value="workflow">Workflow</mat-button-toggle>
+    <mat-button-toggle value="user">User</mat-button-toggle>
   </mat-button-toggle-group>
   <mat-button-toggle-group name="timeType" aria-label="Toggle Time" [value]="timeType" (change)="timeType = $event.value; redrawChart()">
     <mat-button-toggle value="total">Total</mat-button-toggle>

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

@@ -50,8 +50,8 @@ export class ChartLineUsageDailyComponent implements OnChanges {
     },
   };
   updateFromInput: boolean = false;
-  chartType: 'repo' | 'total' | 'sku' | 'user' | 'workflow' = 'total';
-  timeType: 'total' | 'daily' | 'weekly' | 'monthly' | 'rolling20' | 'rolling7' = 'total';
+  chartType: 'repo' | 'total' | 'sku' | 'user' | 'workflow' = 'sku';
+  timeType: 'total' | 'daily' | 'weekly' | 'monthly' | 'rolling20' | 'rolling7' = 'rolling20';
   rollingDays = 20;
 
   constructor(

src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.html

@@ -33,9 +33,9 @@
         <td mat-footer-cell *matFooterCellDef> <b>{{ column.footer ? column.footer() : '' }}</b> </td>
       </ng-container>
       }
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-      <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
 
       <tr class="mat-row" *matNoDataRow>
         <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>

src/app/components/usage/actions/table-workflow-usage/table-workflow-usage.component.ts

@@ -54,6 +54,7 @@ interface UsageColumn {
 })
 export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
   columns = [] as UsageColumn[];
+  monthColumns = [] as UsageColumn[];
   displayedColumns = this.columns.map(c => c.columnDef);
   @Input() data!: CustomUsageReportLine[];
   @Input() currency!: string;
@@ -91,7 +92,6 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
         } else {
           (item as any)[month] = line.value || 0;
         }
-        item.total += line.value;
         if (!this.columns.find(c => c.columnDef === month)) {
           const column: UsageColumn = {
             columnDef: month,
@@ -103,11 +103,11 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
             },
             date: new Date(line.date),
           };
-          const lastMonth: string = new Date(line.date.getFullYear(), line.date.getMonth() - 1).toLocaleString('default', { month: 'long' });
+          const lastMonth: string = new Date(line.date.getFullYear(), line.date.getMonth() - 1).toLocaleString('default', { month: 'short' });
           const lastMonthValue = (item as any)[lastMonth];
           if (lastMonthValue) {
             column.tooltip = (workflowItem: WorkflowUsageItem) => {
-              return (workflowItem as any)[month + 'PercentChange'].toFixed(2) + '%';
+              return (workflowItem as any)[month + 'PercentChange']?.toFixed(2) + '%';
             };
             column.icon = (workflowItem: WorkflowUsageItem) => {
               const percentageChanged = (workflowItem as any)[month + 'PercentChange'];
@@ -121,6 +121,7 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
             };
           }
           this.columns.push(column);
+          this.monthColumns.push(column);
         }
         item.cost += line.quantity * line.pricePerUnit;
         item.total += line.quantity;
@@ -144,11 +145,12 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
     }, [] as WorkflowUsageItem[]);
 
     usageItems.forEach((item) => {
-      this.usageReportService.monthsOrder.forEach((month: string) => {
+      this.monthColumns.forEach((column: UsageColumn) => {
+        const month = column.columnDef;
         if (!(item as any)[month]) {
           (item as any)[month] = 0;
         }
-        const lastMonth: string = new Date(new Date().getFullYear(), this.usageReportService.monthsOrder.indexOf(month) - 1).toLocaleString('default', { month: 'long' });
+        const lastMonth: string = new Date(new Date().getFullYear(), this.usageReportService.monthsOrder.indexOf(month) - 1).toLocaleString('default', { month: 'short' });
         const lastMonthValue = (item as any)[lastMonth];
         const percentageChanged = this.calculatePercentageChange(lastMonthValue, (item as any)[month]);
         (item as any)[month + 'PercentChange'] = percentageChanged;
@@ -158,7 +160,6 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
       item.avgCost = item.cost / item.runs;
     });
     usage = usageItems;
-    // sort the columns by date
     this.columns = this.columns.sort((a, b) => (a.date?.getTime() || 0) - (b.date?.getTime() || 0)); 
     this.displayedColumns = this.columns.map(c => c.columnDef);
     this.dataSource.data = usage;
@@ -276,6 +277,7 @@ export class TableWorkflowUsageComponent implements OnChanges, AfterViewInit {
     }
     columns[0].footer = () => 'Total';
     this.columns = columns;
+    this.monthColumns = [];
     this.displayedColumns = this.columns.map(c => c.columnDef);
   }
 

src/app/components/usage/shared-storage/table-shared-storage/table-shared-storage.component.ts

@@ -42,7 +42,7 @@ export class TableSharedStorageComponent implements OnChanges, AfterViewInit {
     const workflowUsage = this.data.reduce((acc, line) => {
       const workflowEntry = acc.find(a => a.repo === line.repositorySlug);
       const date = line.date;
-      const month: string = date.toLocaleString('default', { month: 'long' });
+      const month: string = date.toLocaleString('default', { month: 'short' });
       const cost = line.pricePerUnit * line.quantity;
       if (workflowEntry) {
         const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

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

@@ -1,7 +1,10 @@
-<div *ngIf="!usage" class="flex-center-horizontally full-width">
+<div *ngIf="!usage" class="full-width">
   <h1 class="mat-headline-2" style="user-select: none; font-weight: 800; text-align: center;">
-    GitHub Metered Usage Report Viewer
+    GitHub<br>Usage Report Viewer
   </h1>
+  <!-- <h2 class="mat-h2" style="user-select: none; font-weight: 800; text-align: center;">
+    <i>Visualize your GitHub Metered Usage!</i>
+  </h2> -->
 </div>
 <div class="flex-center-horizontally full-width">
   <app-file-upload [text]="status" (fileText)="onFileText($event)"></app-file-upload>
@@ -20,6 +23,10 @@ <h1 class="mat-headline-2" style="user-select: none; font-weight: 800; text-alig
       </mat-date-range-input>
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
       <mat-date-range-picker #picker></mat-date-range-picker>
+      <button *ngIf="range.controls.start.value !== minDate || range.controls.end.value !== maxDate" mat-icon-button
+        matSuffix (click)="range.setValue({ start: minDate, end: maxDate })">
+        <mat-icon>close</mat-icon>
+      </button>
     </mat-form-field>
     <mat-form-field style="flex: 1; max-width: 500px;" *ngIf="tabSelected === 'actions'">
       <mat-label>Workflow</mat-label>

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

@@ -42,6 +42,7 @@ 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({
@@ -102,8 +103,11 @@ export class UsageComponent implements OnInit, OnDestroy {
     });
     this.minDate = new Date(usage.lines[0]?.date);
     this.maxDate = new Date(usage.lines[usage.lines.length - 1]?.date);
-    this.range.controls.start.setValue(usage.lines[0]?.date, { emitEvent: false });
-    this.range.controls.end.setValue(usage.lines[usage.lines.length - 1]?.date, { emitEvent: false });
+    // 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 });
     this.status = 'Choose File';
     this.progress = null;
     this.usage = usage;

src/app/usage-report.service.ts

@@ -191,21 +191,15 @@ export class UsageReportService {
   }): void {
     Object.assign(this.filters, filter);
     let filtered = this.usageReport.lines;
-    if (this.filters.sku !== '') {
+    if (this.filters.sku) {
       filtered = filtered.filter(line => line.sku === this.filters.sku);
     }
-    if (this.filters.workflow !== '') {
+    if (this.filters.workflow) {
       filtered = filtered.filter(line => line.actionsWorkflow === this.filters.workflow);
     }
     if (this.filters.startDate && this.filters.endDate) {
       filtered = filtered.filter(line => {
-        const lineDate = new Date(line.date);
-        if (this.filters.startDate.getTime() === this.filters.endDate.getTime()) {
-          const day = this.filters.startDate.toISOString().split('T')[0];
-          const lineDay = lineDate.toISOString().split('T')[0];
-          return day === lineDay;
-        }
-        return lineDate >= this.filters.startDate && lineDate <= this.filters.endDate;
+        return line.date >= this.filters.startDate && line.date <= this.filters.endDate;
       });
     }
     this.usageReportFiltered.next(filtered);

src/material.theme.scss

@@ -91,7 +91,7 @@ $dark-theme: mat.define-dark-theme((
 
 // #0d1117
 
-$backgroundColor: #0d1117; // GitHub background color
+$backgroundColor: #010409; // GitHub background color
 $foreground: #e6edf3; // GitHub foreground color
 $color: map.get($dark-theme, "color");
 $colorBackground: map.get($color, "background");
@@ -137,14 +137,14 @@ $light-theme: mat.define-light-theme((
  }
  .mat-mdc-paginator,
  .mat-mdc-table tbody, .mat-mdc-table tfoot, .mat-mdc-table thead, .mat-mdc-cell, .mat-mdc-footer-cell, .mat-mdc-header-row, .mat-mdc-row, .mat-mdc-footer-row, .mat-mdc-table .mat-mdc-header-cell {
-  background: #161b22 !important;
+  background: #0d1117 !important;
  }
 
  .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
   background: mat.get-theme-color($dark-theme, primary, 500) !important;
  }
  .mat-button-toggle-appearance-standard {
-  background: #161b22 !important;
+  background: #0d1117 !important;
  }
 }
 

src/styles.scss

@@ -65,6 +65,28 @@ table {
 }
 
 .table-container {
-  margin-top: 1rem;
   overflow-x: auto;
+  max-height: 700px;
+}
+
+.table-control {
+  display: flex;
+  mat-form-field {
+    margin-right: 15px;
+  }
+}
+
+mat-cell {
+  mat-icon {
+    vertical-align: bottom !important;
+  }
+}
+
+
+.mat-column-user,
+.mat-column-workflow,
+.mat-column-repo,
+.mat-column-sku {
+  background: #161b22 !important;
+  max-width: 350px;
 }