Merge branch 'mike-chart-add'

Author: austenstone

frontend/src/app/main/copilot/copilot-dashboard/dashboard-card/dashboard-card-line-chart/dashboard-card-line-chart.component.html

@@ -0,0 +1,6 @@
+<highcharts-chart
+  *ngIf="options"
+  [Highcharts]="Highcharts"
+  [options]="options"
+  style="width: 100%; height: 400px; display: block;">
+</highcharts-chart>

frontend/src/app/main/copilot/copilot-dashboard/dashboard-card/dashboard-card-line-chart/dashboard-card-line-chart.component.scss

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardCardLineChartComponent } from './dashboard-card-line-chart.component';
+
+describe('DashboardCardLineChartComponent', () => {
+  let component: DashboardCardLineChartComponent;
+  let fixture: ComponentFixture<DashboardCardLineChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardCardLineChartComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardCardLineChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/main/copilot/copilot-dashboard/dashboard-card/dashboard-card-line-chart/dashboard-card-line-chart.component.spec.ts

@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HighchartsChartModule } from 'highcharts-angular';
+import * as Highcharts from 'highcharts';
+import { CopilotMetrics } from '../../../../../services/api/metrics.service.interfaces';
+import { HighchartsService } from '../../../../../services/highcharts.service';
+
+@Component({
+  selector: 'app-dashboard-card-line-chart',
+  standalone: true,
+  imports: [CommonModule, HighchartsChartModule],
+  templateUrl: './dashboard-card-line-chart.component.html',
+  styleUrls: ['./dashboard-card-line-chart.component.scss']
+})
+export class DashboardCardLineChartComponent {
+  @Input() data?: CopilotMetrics[];
+
+  Highcharts: typeof Highcharts = Highcharts;
+  options: Highcharts.Options | undefined;
+
+  constructor(private highchartsService: HighchartsService) {}
+
+  ngOnChanges(): void {
+    if (this.data && this.data.length) {
+      this.options = this.highchartsService.getLanguageTrendsChart(this.data);
+    }
+  }
+}

frontend/src/app/main/copilot/copilot-dashboard/dashboard-card/dashboard-card-line-chart/dashboard-card-line-chart.component.ts

@@ -46,6 +46,16 @@ <h1>Metrics</h1>
           </ng-container>
         </mat-card-content>
       </mat-card>
+      <mat-card appearance="outlined" id="line-chart" style="grid-column: span 2;">
+        <mat-card-header>
+           <mat-card-title>Language Acceptance Trends</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <ng-container *ngIf="metrics?.length; else loading">
+            <app-dashboard-card-line-chart [data]="metrics"></app-dashboard-card-line-chart>
+          </ng-container>
+        </mat-card-content>
+      </mat-card> 
     </div>
 </div>
 <ng-template #loading>

frontend/src/app/main/copilot/copilot-metrics/copilot-metrics.component.html

@@ -12,6 +12,7 @@ import { SeatService } from '../../../services/api/seat.service';
 import { MembersService } from '../../../services/api/members.service';
 import { CommonModule } from '@angular/common';
 import { LoadingSpinnerComponent } from '../../../shared/loading-spinner/loading-spinner.component';
+import { DashboardCardLineChartComponent } from '../copilot-dashboard/dashboard-card/dashboard-card-line-chart/dashboard-card-line-chart.component';
 
 @Component({
   selector: 'app-metrics',
@@ -25,6 +26,7 @@ import { LoadingSpinnerComponent } from '../../../shared/loading-spinner/loading
     ActiveUsersChartComponent,
     CommonModule,
     LoadingSpinnerComponent,
+    DashboardCardLineChartComponent
   ],
   templateUrl: './copilot-metrics.component.html',
   styleUrls: [

frontend/src/app/main/copilot/copilot-metrics/copilot-metrics.component.ts

@@ -413,6 +413,80 @@ export class HighchartsService {
     };
   }
 
+  getLanguageTrendsChart(metrics: CopilotMetrics[]): Highcharts.Options {
+    const dailyData: Record<string, Record<string, { accepted: number, suggested: number }>> = {};
+    const languageTotals: Record<string, number> = {};
+
+    for (const entry of metrics) {
+      const dateStr = new Date(entry.date).toISOString().split('T')[0];
+
+      if (!entry.copilot_ide_code_completions?.editors) continue;
+
+      for (const editor of entry.copilot_ide_code_completions.editors) {
+        for (const model of editor.models || []) {
+          for (const lang of model.languages || []) {
+            if (!dailyData[dateStr]) dailyData[dateStr] = {};
+            if (!dailyData[dateStr][lang.name]) {
+              dailyData[dateStr][lang.name] = { accepted: 0, suggested: 0 };
+            }
+
+            dailyData[dateStr][lang.name].accepted += lang.total_code_lines_accepted || 0;
+            dailyData[dateStr][lang.name].suggested += lang.total_code_lines_suggested || 0;
+
+            languageTotals[lang.name] = (languageTotals[lang.name] || 0) + lang.total_code_lines_suggested;
+          }
+        }
+      }
+    }
+
+    const topLanguages = Object.entries(languageTotals)
+      .filter(([lang]) => lang.toLowerCase() !== 'unknown') // exclude "unknown"
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5)
+      .map(([lang]) => lang);
+
+    const series: Highcharts.SeriesSplineOptions[] = topLanguages.map((lang: string) => ({
+      name: lang,
+      type: 'spline',
+      color: this.getLanguageColor(lang),
+      data: Object.entries(dailyData).map(([date, langs]) => {
+        const accepted = langs[lang]?.accepted || 0;
+        const suggested = langs[lang]?.suggested || 0;
+        const percent = suggested > 0 ? (accepted / suggested) * 100 : null;
+
+        return {
+          x: new Date(date).getTime(),
+          y: percent,
+          custom: { accepted, suggested }
+        };
+      }).filter(p => p.y !== null)
+    }));
+
+    return {
+      chart: { type: 'spline' },
+      xAxis: { type: 'datetime' },
+      yAxis: {
+        min: 0,
+        max: 100,
+        title: { text: 'Acceptance Rate (%)' }
+      },
+      tooltip: {
+        formatter: function (this: Highcharts.TooltipFormatterContextObject & {
+          point: Highcharts.Point & { custom?: { accepted: number, suggested: number } }
+        }) {
+          return `
+            <b>${this.series.name}</b><br/>
+            ${Highcharts.dateFormat('%b %e', this.x as number)}<br/>
+            Accepted: ${this.point.custom?.accepted}<br/>
+            Suggested: ${this.point.custom?.suggested}<br/>
+            Acceptance: ${(this.y ?? 0).toFixed(1)}%
+          `;
+        }
+      },
+      series
+    };
+  }
+
   transformCopilotMetricsToBars(data: CopilotMetrics, totalSeats: number): DashboardCardBarsInput[] {
     return [
       { name: 'IDE Code Completion', icon: 'code', value: data.copilot_ide_code_completions?.total_engaged_users || 0, maxValue: totalSeats },