Refactor dashboard layout: implement tabbed interface and enhance gri…

…d structure
austenstone · Nov 22, 2024 · 9649a20 · 9649a20
1 parent 26a0491
commit 9649a20
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 64 deletions.
diff --git a/frontend/src/app/main/copilot/copilot-dashboard/dashboard.component.html b/frontend/src/app/main/copilot/copilot-dashboard/dashboard.component.html
@@ -3,67 +3,99 @@
     <h1>Dashboard</h1>
     <span class="spacer"></span>
   </div> -->
-  <div class="cards-grid">
-    <app-dashboard-card-value routerLink="/copilot/seats" title="Seats" [value]="totalSeats" [change]="seatPercentage"
-      changeSuffix="" icon="" changeDescription="% have Copilot"
-      subtitle="Total Copilot Seats"></app-dashboard-card-value>
-    <app-dashboard-card-value title="Active Users" [value]="activeCurrentWeekAverage"
-      [change]="activeWeeklyChangePercent" changeSuffix="" changeDescription="% since last"
-      subtitle="Average activity for last 7 days"></app-dashboard-card-value>
-    <app-dashboard-card-value routerLink="/copilot/surveys" title="Surveys Complete" icon="" [value]="totalSurveys"
-      [change]="totalSurveysThisWeek" changeSuffix="" changeDescription=" this week"></app-dashboard-card-value>
-    <mat-card id="adoption" appearance="outlined" routerLink="/copilot/value" fragment="adoption">
-      <mat-card-header>
-        <mat-card-title>Adoption</mat-card-title>
-      </mat-card-header>
-      <ng-container *ngIf="activityData; else loading">
-      <app-adoption-chart [data]="activityData" [chartOptions]="chartOptions"></app-adoption-chart>
-      </ng-container>
-    </mat-card>
-    <mat-card id="activity" appearance="outlined" routerLink="/copilot/value" fragment="activity">
-      <mat-card-header>
-        <mat-card-title>Daily Activity</mat-card-title>
-      </mat-card-header>
-      <ng-container *ngIf="activityData && metricsData; else loading">
-        <app-daily-activity-chart [activity]="activityData" [metrics]="metricsData"
-        [chartOptions]="chartOptions"></app-daily-activity-chart>      </ng-container>
-    </mat-card>
-    <mat-card id="time-saved" appearance="outlined" routerLink="/copilot/value" fragment="time-saved">
-      <mat-card-header>
-        <mat-card-title>Time Saved</mat-card-title>
-      </mat-card-header>
-      <ng-container *ngIf="surveysData && activityData; else loading">
-        <app-time-saved-chart [surveys]="surveysData" [activity]="activityData" [chartOptions]="chartOptions"></app-time-saved-chart>
-      </ng-container>
-    </mat-card>
-    <mat-card appearance="outlined" id="card-bars">
-      <mat-card-header>
-        <mat-card-title>Engagement</mat-card-title>
-      </mat-card-header>
-      <mat-card-content *ngIf="metricsData; else loading">
-        <app-dashboard-card-bars title="Engagement" [data]="metricsData ? metricsData[metricsData.length - 1] : undefined"
-      [totalSeats]="totalSeats"></app-dashboard-card-bars>
-      </mat-card-content>
-    </mat-card>
-    <mat-card appearance="outlined" id="drilldown-bar-chart">
-      <mat-card-header>
-        <mat-card-title>Engagement Breakdown</mat-card-title>
-      </mat-card-header>
-      <mat-card-content>
-        <ng-container *ngIf="metricsData; else loading">
-          <app-dashboard-card-drilldown-bar-chart [data]="metricsData"></app-dashboard-card-drilldown-bar-chart>
-        </ng-container>
-      </mat-card-content>
-    </mat-card>
-    <mat-card id="active-users" appearance="outlined">
-      <mat-card-header>
-        <mat-card-title>Most Active Users</mat-card-title>
-      </mat-card-header>
-      <ng-container *ngIf="activityTotals; else loading">
-        <app-active-users-chart [data]="activityTotals" [chartOptions]="chartOptions"></app-active-users-chart>
-      </ng-container>
-    </mat-card>
-  </div>
+  <mat-tab-group>
+    <mat-tab label="Overview">
+      <div class="cards-grid">
+        <!-- First row grid -->
+        <div class="first-row-grid">
+          <mat-card id="adoption" appearance="outlined" routerLink="/copilot/value" fragment="adoption">
+            <mat-card-header>
+              <mat-card-title>Adoption</mat-card-title>
+            </mat-card-header>
+            <ng-container *ngIf="activityData; else loading">
+              <app-adoption-chart [data]="activityData" [chartOptions]="chartOptions"></app-adoption-chart>
+            </ng-container>
+          </mat-card>
+          <mat-card id="activity" appearance="outlined" routerLink="/copilot/value" fragment="activity">
+            <mat-card-header>
+              <mat-card-title>Daily Activity</mat-card-title>
+            </mat-card-header>
+            <ng-container *ngIf="activityData && metricsData; else loading">
+              <app-daily-activity-chart [activity]="activityData" [metrics]="metricsData" [chartOptions]="chartOptions"></app-daily-activity-chart>
+            </ng-container>
+          </mat-card>
+          <mat-card id="time-saved" appearance="outlined" routerLink="/copilot/value" fragment="time-saved">
+            <mat-card-header>
+              <mat-card-title>Time Saved</mat-card-title>
+            </mat-card-header>
+            <ng-container *ngIf="surveysData && activityData; else loading">
+              <app-time-saved-chart [surveys]="surveysData" [activity]="activityData" [chartOptions]="chartOptions"></app-time-saved-chart>
+            </ng-container>
+          </mat-card>
+        </div>
+        <!-- Status grid list -->
+        <div class="status-grid">
+          <mat-card appearance="outlined" id="status-card" class="full-width">
+            <mat-card-header>
+              <mat-card-title>Status</mat-card-title>
+            </mat-card-header>
+            <mat-card-content>
+              <mat-grid-list cols="3" rowHeight="100px">
+                <!-- Nested grid list -->
+                <mat-grid-tile *ngFor="let tile of tiles; let i = index" [colspan]="tile.cols" [rowspan]="tile.rows">
+                  <ng-container *ngIf="i !== 7">
+                    {{tile.text}}
+                  </ng-container>
+                  <ng-container *ngIf="i === 7">
+                    <app-dashboard-card-value routerLink="/copilot/surveys" title="Surveys Complete" icon="" [value]="totalSurveys"
+                      [change]="totalSurveysThisWeek" changeSuffix="" changeDescription=" this week"></app-dashboard-card-value>
+                  </ng-container>
+                </mat-grid-tile>
+              </mat-grid-list>
+            </mat-card-content>
+          </mat-card>
+        </div>
+      </div>
+    </mat-tab>
+    <mat-tab label="Details">
+      <div class="cards-grid">
+        <app-dashboard-card-value routerLink="/copilot/seats" title="Seats" [value]="totalSeats" [change]="seatPercentage"
+          changeSuffix="" icon="" changeDescription="% have Copilot"
+          subtitle="Total Copilot Seats"></app-dashboard-card-value>
+        <app-dashboard-card-value title="Active Users" [value]="activeCurrentWeekAverage"
+          [change]="activeWeeklyChangePercent" changeSuffix="" changeDescription="% since last"
+          subtitle="Average activity for last 7 days"></app-dashboard-card-value>
+        <mat-card appearance="outlined" id="card-bars">
+          <mat-card-header>
+            <mat-card-title>Engagement</mat-card-title>
+          </mat-card-header>
+          <mat-card-content *ngIf="metricsData; else loading">
+            <app-dashboard-card-bars title="Engagement" [data]="metricsData ? metricsData[metricsData.length - 1] : undefined"
+          [totalSeats]="totalSeats"></app-dashboard-card-bars>
+          </mat-card-content>
+        </mat-card>
+        <mat-card appearance="outlined" id="drilldown-bar-chart">
+          <mat-card-header>
+            <mat-card-title>Engagement Breakdown</mat-card-title>
+          </mat-card-header>
+          <mat-card-content>
+            <ng-container *ngIf="metricsData; else loading">
+              <app-dashboard-card-drilldown-bar-chart [data]="metricsData"></app-dashboard-card-drilldown-bar-chart>
+            </ng-container>
+          </mat-card-content>
+        </mat-card>
+        <mat-card id="active-users" appearance="outlined">
+          <mat-card-header>
+            <mat-card-title>Most Active Users</mat-card-title>
+          </mat-card-header>
+          <ng-container *ngIf="activityTotals; else loading">
+            <app-active-users-chart [data]="activityTotals" [chartOptions]="chartOptions"></app-active-users-chart>
+          </ng-container>
+        </mat-card>
+        <!-- Add content for the Details tab here -->
+      </div>
+    </mat-tab>
+  </mat-tab-group>
 </div>
 <ng-template #loading>
   <app-loading-spinner></app-loading-spinner>

diff --git a/frontend/src/app/main/copilot/copilot-dashboard/dashboard.component.scss b/frontend/src/app/main/copilot/copilot-dashboard/dashboard.component.scss
@@ -1,9 +1,14 @@
 @use '@angular/material' as mat;
 
+.page-container {
+  width: 100%;
+}
+
 .cards-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
+  grid-template-columns: 1fr;
+  grid-gap: 16px;
+  width: 100%;
 
   mat-card-content {
     min-height: 400px;
@@ -48,4 +53,27 @@
 
 .dashboard-card:hover {
   @include mat.elevation(2);
+}
+
+.full-width {
+  width: 100%;
+}
+
+.first-row-grid {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+}
+
+.first-row-grid mat-card {
+  flex: 1;
+  max-width: calc(33.33% - 16px); /* Adjust the width as needed */
+}
+
+.status-grid {
+  width: 100%;
+}
+
+.status-grid mat-card {
+  width: 100%;
 }
diff --git a/frontend/src/app/main/copilot/copilot-dashboard/dashboard.component.ts b/frontend/src/app/main/copilot/copilot-dashboard/dashboard.component.ts
@@ -14,6 +14,8 @@ import { DailyActivityChartComponent } from '../copilot-value/daily-activity-cha
 import { TimeSavedChartComponent } from '../copilot-value/time-saved-chart/time-saved-chart.component';
 import { LoadingSpinnerComponent } from '../../../shared/loading-spinner/loading-spinner.component';
 import { ActiveUsersChartComponent } from './dashboard-card/active-users-chart/active-users-chart.component';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatTabsModule } from '@angular/material/tabs';
 
 @Component({
   selector: 'app-dashboard',
@@ -27,7 +29,10 @@ import { ActiveUsersChartComponent } from './dashboard-card/active-users-chart/a
     DailyActivityChartComponent,
     TimeSavedChartComponent,
     LoadingSpinnerComponent,
-    ActiveUsersChartComponent
+    ActiveUsersChartComponent,
+    MatGridListModule,
+    MatTabsModule,
+
   ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss'
@@ -86,6 +91,21 @@ export class CopilotDashboardComponent implements OnInit {
 
   activityTotals?: Record<string, number>;
 
+  tiles = [
+    {text: 'One', cols: 1, rows: 1},
+    {text: 'Two', cols: 1, rows: 1},
+    {text: 'Three', cols: 1, rows: 1},
+    {text: 'Four', cols: 1, rows: 1},
+    {text: 'Five', cols: 1, rows: 1},
+    {text: 'Six', cols: 1, rows: 1},
+    {text: 'Seven', cols: 1, rows: 1},
+    {text: 'Eight', cols: 1, rows: 1},
+    {text: 'Nine', cols: 1, rows: 1},
+    {text: 'Ten', cols: 1, rows: 1},
+    {text: 'Eleven', cols: 1, rows: 1},
+    {text: 'Twelve', cols: 1, rows: 1},
+  ];
+
   constructor(
     private metricsService: MetricsService,
     private membersService: MembersService,
@@ -94,6 +114,10 @@ export class CopilotDashboardComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+    console.log('Tiles:', this.tiles);
+    console.log('Activity Data:', this.activityData);
+    console.log('Metrics Data:', this.metricsData);
+
     const since = new Date();
     since.setDate(since.getDate() - 30);
     const formattedSince = since.toISOString().split('T')[0];