Update chart and table components

Author: austenstone

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

@@ -1,5 +1,5 @@
 <p>
-  <mat-button-toggle-group name="toggleChart" aria-label="Toggle Chart" [value]="chartType" (change)="chartType = $event.value; redrawChart()">
+  <!-- <mat-button-toggle-group name="toggleChart" aria-label="Toggle Chart" [value]="chartType" (change)="chartType = $event.value; redrawChart()">
     <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>
@@ -12,9 +12,31 @@
     <mat-button-toggle value="daily">Day</mat-button-toggle>
     <mat-button-toggle value="weekly">Week</mat-button-toggle>
     <mat-button-toggle value="monthly">Month</mat-button-toggle>
-    <mat-button-toggle value="rolling20">20-Day</mat-button-toggle>
+    <mat-button-toggle value="rolling30">30-Day</mat-button-toggle>
     <mat-button-toggle value="rolling7">7-Day</mat-button-toggle>
-  </mat-button-toggle-group>
+  </mat-button-toggle-group> -->
+  <mat-form-field>
+    <mat-label>Grouping</mat-label>
+    <mat-select [(value)]="chartType" (selectionChange)="chartType = $event.value; redrawChart()">
+      <mat-option value="total">All</mat-option>
+      <mat-option value="repo">Repo</mat-option>
+      <mat-option value="sku">Runner</mat-option>
+      <mat-option value="workflow">Workflow</mat-option>
+      <mat-option value="user">User</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Time Aggregate</mat-label>
+    <mat-select [(value)]="timeType" (selectionChange)="timeType = $event.value; redrawChart()">
+      <mat-option value="total">Total</mat-option>
+      <mat-option value="run">Run</mat-option>
+      <mat-option value="daily">Day</mat-option>
+      <mat-option value="weekly">Week</mat-option>
+      <mat-option value="monthly">Month</mat-option>
+      <mat-option value="rolling30">30-Day</mat-option>
+      <mat-option value="rolling7">7-Day</mat-option>
+    </mat-select>
+  </mat-form-field>
 </p>
 
 <highcharts-chart #chart

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

@@ -1,18 +1,28 @@
 <div class="table-responsive">
   <div class="table-control">
+    <mat-form-field>
+      <mat-label>Grouping</mat-label>
+      <mat-select  [(value)]="tableType" (selectionChange)="tableType = $event.value; ngOnChanges()">
+        <mat-option value="sku">Runner</mat-option>
+        <mat-option value="repo">Repo</mat-option>
+        <mat-option value="workflow">Workflow</mat-option>
+        <mat-option value="user">User</mat-option>
+      </mat-select>
+    </mat-form-field>
+
     <mat-form-field [class.hide]="dataSource.data.length <= 1">
       <mat-label>Filter</mat-label>
       <input matInput (keyup)="applyFilter($event)" placeholder="Ex. .github/workflows/build.yml	" #input>
     </mat-form-field>
-    <div>
+    <!-- <div>
       <mat-button-toggle-group name="toggleChart" aria-label="Toggle Chart" [value]="tableType"
         (change)="tableType = $event.value; ngOnChanges()">
         <mat-button-toggle value="sku">Runner</mat-button-toggle>
         <mat-button-toggle value="repo">Repo</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>
-    </div>
+    </div> -->
   </div>
 
   <div class="table-container">
@@ -25,10 +35,10 @@
         </th>
         <td mat-cell *matCellDef="let row">
           {{column.cell(row)}}
-          <ng-container *ngIf="column.icon">
+          <!-- <ng-container *ngIf="column.icon">
             <mat-icon [matTooltip]="column.tooltip ? column.tooltip(row) : ''" inline="true">{{ column.icon(row)
               }}</mat-icon>
-          </ng-container>
+          </ng-container> -->
         </td>
         <td mat-footer-cell *matFooterCellDef> <b>{{ column.footer ? column.footer() : '' }}</b> </td>
       </ng-container>