feat: add trajectory view

Re-adds the trajectory view with filtering support.

Author: crisbeto

report-app/src/app/app.html

@@ -13,6 +13,14 @@ <h1>Web Codegen Scorer</h1>
         <span class="material-symbols-outlined">arrow_back</span>
       </a>
 
+      <a
+        routerLink="/trajectory"
+        routerLinkActive="active"
+        class="icon-button"
+        title="Go to trajectory page">
+        <span class="material-symbols-outlined">trending_up</span>
+      </a>
+
       <button class="icon-button" title="Toggle dark mode" (click)="toggleColorMode()">
         <span class="material-symbols-outlined">{{colorMode()}}_mode</span>
       </button>

report-app/src/app/app.routes.ts

@@ -2,6 +2,7 @@ import {Routes} from '@angular/router';
 import {ReportViewer} from './pages/report-viewer/report-viewer';
 import {ComparisonPage} from './pages/comparison/comparison';
 import {ReportListComponent} from './pages/report-list/report-list';
+import {Trajectory} from './pages/trajectory/trajectory';
 
 export const routes: Routes = [
   {
@@ -16,6 +17,10 @@ export const routes: Routes = [
     path: 'comparison',
     component: ComparisonPage,
   },
+  {
+    path: 'trajectory',
+    component: Trajectory,
+  },
   {
     path: '',
     redirectTo: 'reports',

report-app/src/app/pages/trajectory/trajectory.html

@@ -0,0 +1,5 @@
+<report-filters #filters/>
+
+<div class="card">
+  <score-visualization [groups]="filters.filteredGroups()" />
+</div>

report-app/src/app/pages/trajectory/trajectory.scss

@@ -0,0 +1,7 @@
+report-filters {
+  margin-bottom: 1rem;
+}
+
+.card {
+  padding-top: 0.5rem;
+}

report-app/src/app/pages/trajectory/trajectory.ts

@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ScoreVisualization} from '../../shared/visualization/score-visualization';
+import {ReportFilters} from '../../shared/report-filters/report-filters';
+
+@Component({
+  selector: 'trajectory',
+  templateUrl: './trajectory.html',
+  styleUrls: ['./trajectory.scss'],
+  imports: [ScoreVisualization, ReportFilters],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Trajectory {}

report-app/src/app/shared/visualization/score-visualization.ts

@@ -2,6 +2,7 @@ import {afterRenderEffect, Component, ElementRef, inject, input, viewChild} from
 import {RunGroup} from '../../../../../runner/shared-interfaces';
 import {GoogleChartsLoader} from '../../services/google-charts-loader';
 import {AppResizeNotifier} from '../../services/app-resize-notifier';
+import {AppColorMode} from '../../services/app-color-mode';
 
 @Component({
   selector: 'score-visualization',
@@ -10,6 +11,7 @@ import {AppResizeNotifier} from '../../services/app-resize-notifier';
 export class ScoreVisualization {
   private googleChartsLoader = inject(GoogleChartsLoader);
   private notifier = inject(AppResizeNotifier);
+  private colorModeService = inject(AppColorMode);
 
   readonly groups = input.required<RunGroup[]>();
   readonly chartContainer = viewChild.required<ElementRef>('chart');
@@ -57,6 +59,7 @@ export class ScoreVisualization {
     // Note: we need to call `_processData` synchronously
     // so the wrapping effect picks up the data dependency.
     const {dataRows, averageAppsCount} = this._processData();
+    const colorMode = this.colorModeService.colorMode();
 
     await this.googleChartsLoader.ready;
 
@@ -77,19 +80,29 @@ export class ScoreVisualization {
     );
 
     const chart = new google.visualization.LineChart(this.chartContainer().nativeElement);
+    const textColor = colorMode === 'dark' ? '#f9fafb' : '#1e293b';
+
     chart.draw(table, {
       curveType: 'function',
       title: `Score average over time (~${averageAppsCount.toFixed(0)} apps generated per day)`,
+      titleTextStyle: {color: textColor},
+      backgroundColor: 'transparent',
       vAxis: {
         format: 'percent',
+        viewWindowMode: 'maximized',
+        textStyle: {color: textColor},
+        maxValue: 1,
       },
+      legend: {textStyle: {color: textColor}},
       hAxis: {
         minTextSpacing: 20,
-        textStyle: {fontSize: 10},
+        textStyle: {fontSize: 10, color: textColor},
       },
       chartArea: {
         left: 50,
-        right: 300,
+        right: 155,
+        bottom: 10,
+        top: 50,
       },
       // TODO: Consider enabling trendlines.
       // trendlines: { 0: {}, 1: {} },