feat: enhance daily activity chart with new metrics and acceptance rate; improve data handling in HighchartsService

Author: MattG57

frontend/src/app/main/copilot/copilot-value/daily-activity-chart/daily-activity-chart.component.html

@@ -1,2 +1,6 @@
-<highcharts-chart [Highcharts]="Highcharts" [options]="_chartOptions" (chartInstance)="onChartInstance($event)">
+<highcharts-chart
+  [Highcharts]="Highcharts"
+  [options]="_chartOptions"
+  [update]="updateFlag"
+  (chartInstance)="onChartInstance($event)">
 </highcharts-chart>

frontend/src/app/main/copilot/copilot-value/daily-activity-chart/daily-activity-chart.component.ts

@@ -35,15 +35,19 @@ export class DailyActivityChartComponent implements OnInit, OnChanges {
             'IDE Suggestions': this.targets?.user.dailySuggestions.target || 0,
             'IDE Accepts': this.targets?.user.dailyAcceptances.target || 0,
             'IDE Chats': this.targets?.user.dailyChatTurns.target || 0,
-            '.COM Chats': this.targets?.user.dailyDotComChats.target || 0
+            '.COM Chats': this.targets?.user.dailyDotComChats.target || 0,
+            'IDE Acceptance Rate': 100 * ( this.targets?.user.dailyAcceptances.target || 0) / (this.targets?.user.dailySuggestions.target || 0),   // NEW
+            'Pull Requests': this.targets?.user.weeklyPRSummaries.target  || 0  / 5  // 5 days in a week
           };
 
           // NEW: mapping for typical ranges (from, to)
           const typicalRangeMapping: Record<string, [number, number]> = {
             'IDE Suggestions': [50, 90],
-            'IDE Accepts': [20, 40],
+            'IDE Accepts': [15, 40],
             'IDE Chats': [25, 40],
-            '.COM Chats': [4, 8]
+            '.COM Chats': [4, 8],
+            'IDE Acceptance Rate': [20, 40],   // NEW – percentage range (example)
+            'Pull Requests': [1, 3]       // NEW example range
           };
 
           // the code below is to set the target line on the chart, based on the series name
@@ -136,19 +140,36 @@ export class DailyActivityChartComponent implements OnInit, OnChanges {
         fontSize: '14px'
       }
     },
-    series: [{
-      name: 'IDE Suggestions',
-      type: 'spline',
-    }, {
-      name: 'IDE Accepts',
-      type: 'spline',
-    }, {
-      name: 'IDE Chats',
-      type: 'spline',
-    }, {
-      name: '.COM Chats',
-      type: 'spline',
-    }]
+    series: [
+      { name: 'IDE Suggestions',      type: 'spline', data: [], zIndex: 5 },
+      { name: 'IDE Accepts',          type: 'spline', data: [], zIndex: 4 },
+      { name: 'IDE Acceptance Rate',  type: 'spline', data: [], zIndex: 3 },
+      { name: 'IDE Chats',            type: 'spline', data: [], color: '#00E676', zIndex: 5 },
+      { name: '.COM Chats',           type: 'spline', data: [], color: '#E91E63', zIndex: 4 },
+      { name: 'Pull Requests',        type: 'spline', data: [], color: '#9C27B0', zIndex: 3 }
+    ],
+    plotOptions: {
+      series: {
+        events: {
+          legendItemClick: function () {
+            const chart = this.chart as Highcharts.Chart & { _isolated?: Highcharts.Series };
+
+            // if this series is already isolated → restore all
+            if (chart._isolated === this) {
+              chart.series.forEach(s => s.setVisible(true, false));
+              chart._isolated = undefined;
+            } else {
+              // isolate the clicked series
+              chart.series.forEach(s => s.setVisible(s === this, false));
+              chart._isolated = this;
+            }
+
+            chart.redraw(false);
+            return false; // prevent default toggle
+          }
+        }
+      }
+    }
   };
 
   constructor(
@@ -167,7 +188,9 @@ export class DailyActivityChartComponent implements OnInit, OnChanges {
         ...this._chartOptions,
         ...this.highchartsService.transformMetricsToDailyActivityLine(this.activity, this.metrics)
       };
-      this.updateFlag = true;
+      console.log('chart opts', this._chartOptions.series); // DEBUG
+      // toggle so <highcharts-chart> detects a change
+      this.updateFlag = !this.updateFlag;
     }
   }
 

frontend/src/app/services/highcharts.service.ts

@@ -565,6 +565,12 @@ export class HighchartsService {
       name: 'IDE Accepts',
       data: [] as CustomHighchartsPointOptions[]
     };
+    // NEW: acceptance-rate (% of suggestions accepted)
+    const dailyActiveIdeAcceptanceRateSeries = {
+      ...initialSeries,
+      name: 'IDE Acceptance Rate',
+      data: [] as CustomHighchartsPointOptions[]
+    };
     const dailyActiveIdeChatSeries = {
       ...initialSeries,
       name: 'IDE Chats',
@@ -577,26 +583,38 @@ export class HighchartsService {
     };
     const dailyActiveDotcomPrSeries = {
       ...initialSeries,
-      name: '.COM Pull Requests',
+      name: 'Pull Requests',
       data: [] as CustomHighchartsPointOptions[]
     };
 
     Object.entries(activity).forEach(([date, dateData]) => {
-      // Skip if totalActive is undefined or 0
+      // Skip if totalActive is undefined or 0 or there is a data quality issue making daily suggestions per average user > 250
       const currentMetrics = metrics.find(m => m.date.startsWith(date.slice(0, 10)));
-      if (!currentMetrics || (currentMetrics.copilot_ide_code_completions?.total_engaged_users ?? 0) < 1) return;
+      if (!currentMetrics || (currentMetrics.copilot_ide_code_completions?.total_engaged_users ?? 0) < 1 || ((currentMetrics.copilot_ide_code_completions?.total_code_suggestions ?? 0) / (currentMetrics.copilot_ide_code_completions?.total_engaged_users ?? 1)) > 250) return;
 
       if (currentMetrics?.copilot_ide_code_completions) {
+        // Suggestions per user
         (dailyActiveIdeCompletionsSeries.data).push({
           x: new Date(date).getTime(),
           y: (currentMetrics.copilot_ide_code_completions.total_code_suggestions / currentMetrics.copilot_ide_code_completions.total_engaged_users),
           raw: date
         });
 
-        if (dailyActiveIdeAcceptsSeries && dailyActiveIdeAcceptsSeries.data) {
-          dailyActiveIdeAcceptsSeries.data.push({
+        // Accepts per user
+        (dailyActiveIdeAcceptsSeries.data).push({
+          x: new Date(date).getTime(),
+          y: (currentMetrics.copilot_ide_code_completions.total_code_acceptances /
+              currentMetrics.copilot_ide_code_completions.total_engaged_users),
+          raw: date
+        });
+
+        // NEW: acceptance-rate (%)
+        const sugg = currentMetrics.copilot_ide_code_completions.total_code_suggestions;
+        const acc  = currentMetrics.copilot_ide_code_completions.total_code_acceptances;
+        if (sugg > 0) {
+          (dailyActiveIdeAcceptanceRateSeries.data).push({
             x: new Date(date).getTime(),
-            y: (currentMetrics.copilot_ide_code_completions.total_code_acceptances / currentMetrics.copilot_ide_code_completions.total_engaged_users),
+            y: +(acc / sugg * 100).toFixed(2),
             raw: date
           });
         }
@@ -628,9 +646,10 @@ export class HighchartsService {
       series: [
         dailyActiveIdeCompletionsSeries,
         dailyActiveIdeAcceptsSeries,
+        dailyActiveIdeAcceptanceRateSeries, // NEW series added to output
         dailyActiveIdeChatSeries,
         dailyActiveDotcomChatSeries,
-        // dailyActiveDotcomPrSeries,
+        dailyActiveDotcomPrSeries        // ← was commented out
       ]
     }
   }