Add total suggestions and acceptance count chart

Author: martedesco

src/components/MetricsViewer.vue

@@ -1,12 +1,16 @@
 <template>
   <div>
     <h1>GitHub Copilot Business Metrics Viewer</h1>
+    <h2>Total Suggestions Count | Total Acceptances Count</h2>
+    <Line :data="totalSuggestionsAndAcceptanceChartData" :options="chartOptions" />
+
     <h2>Total Lines Suggested | Total Lines Accepted</h2>
     <Line :data="chartData" :options="chartOptions" />
 
     <h2>Total Active Users</h2>
     <Bar :data="totalActiveUsersChartData" :options="totalActiveUsersChartOptions" />
 
+
   </div>
 </template>
 
@@ -49,11 +53,17 @@ export default defineComponent({
   setup() {
     console.log('MetricsViewer setup');
     const metrics = ref<Metrics[]>([]);
+
+    //Total Suggestions Count | Total Acceptance Counts
+    const totalSuggestionsAndAcceptanceChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
+
     //Total Lines Suggested | Total Lines Accepted
     const chartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
+    
     //Total Active Users
     const totalActiveUsersChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
 
+
     const chartOptions = {
       responsive: true,
       maintainAspectRatio: true
@@ -74,6 +84,26 @@ export default defineComponent({
 
     getGitHubCopilotMetricsApi().then(data => {
       metrics.value = data;
+
+      totalSuggestionsAndAcceptanceChartData.value = {
+        labels: data.map(m => m.day),
+        datasets: [
+          {
+            label: 'Total Suggestions',
+            data: data.map(m => m.total_suggestions_count),
+            backgroundColor: 'rgba(75, 192, 192, 0.2)',
+            borderColor: 'rgba(75, 192, 192, 1)'
+
+          },
+          {
+            label: 'Total Acceptance',
+            data: data.map(m => m.total_acceptances_count),
+            backgroundColor: 'rgba(153, 102, 255, 0.2)',
+            borderColor: 'rgba(153, 102, 255, 1)'
+          }
+        ]
+      };
+
       chartData.value = {
         labels: data.map(m => m.day),
         datasets: [
@@ -106,7 +136,7 @@ export default defineComponent({
       };
     });
 
-    return { chartData, chartOptions, totalActiveUsersChartData, totalActiveUsersChartOptions };
+    return { totalSuggestionsAndAcceptanceChartData, chartData, chartOptions, totalActiveUsersChartData, totalActiveUsersChartOptions };
   }
 });
 </script>