Feature/add acceptance ratebycount for issue 113 {Show the Acceptance Rate (by count) and Acceptance Rate (by lines) #113}

src/components/BreakdownComponent.vue

@@ -19,7 +19,7 @@
     <v-main class="p-1" style="min-height: 300px;">
       <v-container style="min-height: 300px;" class="px-4 elevation-2">
         <v-row>
-          <v-col cols="6">
+          <v-col cols="4">
             <v-card>
               <v-card-item class="d-flex justify-center align-center">
                 <div class="spacing-25"></div>
@@ -31,13 +31,25 @@
             </v-card>
           </v-col>
 
-          <v-col cols="6">
+          <v-col cols="4">
             <v-card>
               <v-card-item class="d-flex justify-center align-center">
                 <div class="spacing-25"></div>
-                <div class="text-h6 mb-1">Top 5 {{ breakdownDisplayNamePlural }} by acceptance rate</div>
+                <div class="text-h6 mb-1">Acceptance Rate (by lines) for Top 5 {{ breakdownDisplayNamePlural }}</div>
                 <div style="width: 300px; height: 300px;">
-                  <Pie :data="breakdownsChartDataTop5AcceptanceRate" :options="chartOptions" />
+                  <Pie :data="breakdownsChartDataTop5AcceptedPromptsByLines" :options="chartOptions" />
+                </div>
+              </v-card-item>
+            </v-card>
+          </v-col>
+
+          <v-col cols="4">
+            <v-card>
+              <v-card-item class="d-flex justify-center align-center">
+                <div class="spacing-25"></div>
+                <div class="text-h6 mb-1">Acceptance Rate (by counts) for Top 5 {{ breakdownDisplayNamePlural }}</div>
+                <div style="width: 300px; height: 300px;">
+                  <Pie :data="breakdownsChartDataTop5AcceptedPromptsByCounts" :options="chartOptions" />
                 </div>
               </v-card-item>
             </v-card>
@@ -53,8 +65,11 @@
                 <tr>
                     <td>{{ item.name }}</td>
                     <td>{{ item.acceptedPrompts }}</td>
+                    <td>{{ item.suggestedPrompts }}</td>
                     <td>{{ item.acceptedLinesOfCode }}</td>
-                    <td v-if="item.acceptanceRate !== undefined">{{ item.acceptanceRate.toFixed(2) }}%</td>
+                    <td>{{ item.suggestedLinesOfCode }}</td>
+                    <td v-if="item.acceptanceRateByCount !== undefined">{{ item.acceptanceRateByCount.toFixed(2) }}%</td>
+                    <td v-if="item.acceptanceRateByLines !== undefined">{{ item.acceptanceRateByLines.toFixed(2) }}%</td>
                 </tr>
             </template>
         </v-data-table>
@@ -74,9 +89,9 @@ import {
   ArcElement,
   CategoryScale,
   LinearScale,
+  BarElement,
   PointElement,
   LineElement,
-  BarElement,
   Title,
   Tooltip,
   Legend
@@ -120,8 +135,11 @@ export default defineComponent({
       return [
         { title: `${this.breakdownDisplayName} Name`, key: 'name' },
         { title: 'Accepted Prompts', key: 'acceptedPrompts' },
+        { title: 'Suggested Prompts', key: 'suggestedPrompts' },
         { title: 'Accepted Lines of Code', key: 'acceptedLinesOfCode' },
-        { title: 'Acceptance Rate (%)', key: 'acceptanceRate' },
+        { title: 'Suggested Lines of Code', key: 'suggestedLinesOfCode' },
+        { title: 'Acceptance Rate by Count (%)', key: 'acceptanceRateByCount' },
+        { title: 'Acceptance Rate by Lines (%)', key: 'acceptanceRateByLines' },
       ];
     },
   },
@@ -139,8 +157,11 @@ export default defineComponent({
     //Top 5 by accepted prompts
     let breakdownsChartDataTop5AcceptedPrompts = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
 
-    //Top 5 by acceptance rate
-    let breakdownsChartDataTop5AcceptanceRate = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
+    //Acceptance Rate by lines for top 5 by accepted prompts
+    let breakdownsChartDataTop5AcceptedPromptsByLines = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
+
+    //Acceptance Rate by counts for top 5 by accepted prompts
+    let breakdownsChartDataTop5AcceptedPromptsByCounts = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
 
     const chartOptions = {
       responsive: true,
@@ -165,47 +186,54 @@ export default defineComponent({
         breakdown = new Breakdown({
           name: breakdownName,
           acceptedPrompts: breakdownData.acceptances_count,
+          suggestedPrompts: breakdownData.suggestions_count,
           suggestedLinesOfCode: breakdownData.lines_suggested,
           acceptedLinesOfCode: breakdownData.lines_accepted,
         });
         breakdownList.value.push(breakdown);
       } else {
         // Update the existing breakdown object
         breakdown.acceptedPrompts += breakdownData.acceptances_count;
+        breakdown.suggestedPrompts += breakdownData.suggestions_count;
         breakdown.suggestedLinesOfCode += breakdownData.lines_suggested;
         breakdown.acceptedLinesOfCode += breakdownData.lines_accepted;
       }
-      // Recalculate the acceptance rate
-      breakdown.acceptanceRate = breakdown.suggestedLinesOfCode !== 0 ? (breakdown.acceptedLinesOfCode / breakdown.suggestedLinesOfCode) * 100 : 0;
+      // Recalculate the acceptance rates
+      breakdown.acceptanceRateByCount = breakdown.suggestedPrompts !== 0 ? (breakdown.acceptedPrompts / breakdown.suggestedPrompts) * 100 : 0;
+      breakdown.acceptanceRateByLines = breakdown.suggestedLinesOfCode !== 0 ? (breakdown.acceptedLinesOfCode / breakdown.suggestedLinesOfCode) * 100 : 0;
     }));
 
-    //Sort breakdowns map by acceptance rate
-    breakdownList.value.sort((a, b) => b.acceptanceRate - a.acceptanceRate);
-
-    // Get the top 5 breakdowns by acceptance rate
-    const top5BreakdownsAcceptanceRate = breakdownList.value.slice(0, 5);
+    //Sort breakdowns map by accepted prompts
+    breakdownList.value.sort((a, b) => b.acceptedPrompts - a.acceptedPrompts);
 
-    breakdownsChartDataTop5AcceptanceRate.value = {
-      labels: top5BreakdownsAcceptanceRate.map(breakdown => breakdown.name),
+    // Get the top 5 breakdowns by accepted prompts
+    const top5BreakdownsAcceptedPrompts = breakdownList.value.slice(0, 5);
+
+    breakdownsChartDataTop5AcceptedPrompts.value = {
+      labels: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.name),
       datasets: [
         {
-          data: top5BreakdownsAcceptanceRate.map(breakdown => breakdown.acceptanceRate.toFixed(2)),
+          data: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.acceptedPrompts),
           backgroundColor: pieChartColors.value,
         },
       ],
     };
 
-    //Sort breakdowns map by accepted prompts
-    breakdownList.value.sort((a, b) => b.acceptedPrompts - a.acceptedPrompts);
+    breakdownsChartDataTop5AcceptedPromptsByLines.value = {
+      labels: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.name),
+      datasets: [
+        {
+          data: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.acceptanceRateByLines.toFixed(2)),
+          backgroundColor: pieChartColors.value,
+        },
+      ],
+    };
 
-    // Get the top 5 breakdowns by accepted prompts
-    const top5BreakdownsAcceptedPrompts = breakdownList.value.slice(0, 5);
-
-    breakdownsChartDataTop5AcceptedPrompts.value = {
+    breakdownsChartDataTop5AcceptedPromptsByCounts.value = {
       labels: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.name),
       datasets: [
         {
-          data: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.acceptedPrompts),
+          data: top5BreakdownsAcceptedPrompts.map(breakdown => breakdown.acceptanceRateByCount.toFixed(2)),
           backgroundColor: pieChartColors.value,
         },
       ],
@@ -214,7 +242,7 @@ export default defineComponent({
     numberOfBreakdowns.value = breakdownList.value.length;
 
     return { chartOptions, breakdownList, numberOfBreakdowns, 
-      breakdownsChartData, breakdownsChartDataTop5AcceptedPrompts, breakdownsChartDataTop5AcceptanceRate };
+      breakdownsChartData, breakdownsChartDataTop5AcceptedPrompts, breakdownsChartDataTop5AcceptedPromptsByLines, breakdownsChartDataTop5AcceptedPromptsByCounts };
   },
 
 

src/components/MainComponent.vue

@@ -217,4 +217,4 @@ export default defineComponent({
 .github-login-button v-icon {
   margin-right: 8px;
 }
-</style>
+</style>

src/components/MetricsViewer.vue

@@ -6,24 +6,24 @@
           <v-card-item>
             <div class="spacing-25"></div>
             <div class="tiles-text">
-              <div class="text-h6 mb-1">Acceptance Rate Average</div>
+              <div class="text-h6 mb-1">Acceptance Rate Average (by lines)</div>
               <div class="text-caption">
                 Over the last 28 days
               </div>
-              <p class="text-h4">{{ acceptanceRateAverage.toFixed(2) }}%</p>
+              <p class="text-h4">{{ acceptanceRateAverageByLines.toFixed(2) }}%</p>
           </div>
         </v-card-item>
       </v-card>
 
       <v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
         <v-card-item>
           <div class="tiles-text">
-            <div class="spacing-10"></div>
-            <div class="text-h6 mb-1">Cumulative Number of Suggestions</div>
+            <div class="spacing-25"></div>
+            <div class="text-h6 mb-1">Acceptance Rate Average (by counts)</div>
             <div class="text-caption">
               Over the last 28 days
             </div>
-            <p class="text-h4">{{ cumulativeNumberSuggestions }}</p>
+            <p class="text-h4">{{ acceptanceRateAverageByCount.toFixed(2) }}%</p>
           </div>
         </v-card-item>
       </v-card>
@@ -32,11 +32,11 @@
         <v-card-item>
           <div class="tiles-text">
             <div class="spacing-10"></div>
-            <div class="text-h6 mb-1">Cumulative Number of Accepted Prompts</div>
+            <div class="text-h6 mb-1">Cumulative Number of Suggestions</div>
             <div class="text-caption">
               Over the last 28 days
             </div>
-            <p class="text-h4">{{ cumulativeNumberAcceptances }}</p>
+            <p class="text-h4">{{ cumulativeNumberSuggestions }}</p>
           </div>
         </v-card-item>
       </v-card>
@@ -45,11 +45,11 @@
         <v-card-item>
           <div class="tiles-text">
             <div class="spacing-10"></div>
-            <div class="text-h6 mb-1">Cumulative Number of Lines of Code Accepted</div>
+            <div class="text-h6 mb-1">Total Lines Suggested</div>
             <div class="text-caption">
               Over the last 28 days
             </div>
-            <p class="text-h4">{{ cumulativeNumberLOCAccepted }}</p>
+            <p class="text-h4">{{ totalLinesSuggested }}</p>
           </div>
         </v-card-item>
       </v-card>
@@ -58,8 +58,11 @@
     <v-main class="p-1" style="min-height: 300px;">
 
       <v-container style="min-height: 300px;" class="px-4 elevation-2">
-        <h2>Acceptance rate (%)</h2>
-      <Bar :data="acceptanceRateChartData" :options="chartOptions" />
+        <h2>Acceptance rate by lines (%)</h2>
+      <Bar :data="acceptanceRateByLinesChartData" :options="chartOptions" />
+
+      <h2>Acceptance rate by count (%)</h2>
+      <Bar :data="acceptanceRateByCountChartData" :options="chartOptions" />
 
       <h2>Total Suggestions Count | Total Acceptances Count</h2>
       <Line :data="totalSuggestionsAndAcceptanceChartData" :options="chartOptions" />
@@ -140,13 +143,18 @@ export default defineComponent({
   setup(props) {
 
     //Tiles
-    let acceptanceRateAverage = ref(0);
+    let acceptanceRateAverageByLines = ref(0);
+    let acceptanceRateAverageByCount = ref(0);
     let cumulativeNumberSuggestions = ref(0);
     let cumulativeNumberAcceptances = ref(0);
     let cumulativeNumberLOCAccepted = ref(0);
+    let totalLinesSuggested = ref(0);
 
-    //Acceptance Rate
-    const acceptanceRateChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
+    //Acceptance Rate by lines
+    const acceptanceRateByLinesChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
+
+    //Acceptance Rate by count
+    const acceptanceRateByCountChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
 
     //Total Suggestions Count | Total Acceptance Counts
     const totalSuggestionsAndAcceptanceChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
@@ -253,30 +261,57 @@ export default defineComponent({
       ]
     };
 
-    const acceptanceRates = data.map((m: Metrics) => {
+    const acceptanceRatesByLines = data.map((m: Metrics) => {
       const rate = m.total_lines_suggested !== 0 ? (m.total_lines_accepted / m.total_lines_suggested) * 100 : 0;
       return rate;
     });
-
 
-    acceptanceRateChartData.value = {
+    const acceptanceRatesByCount = data.map((m: Metrics) => {
+      const rate = m.total_suggestions_count !== 0 ? (m.total_acceptances_count / m.total_suggestions_count) * 100 : 0;
+      return rate;
+    });
+
+    acceptanceRateByLinesChartData.value = {
       labels: data.map((m: Metrics) => m.day),
       datasets: [
         {
           type: 'line', // This makes the dataset a line in the chart
-          label: 'Acceptance Rate',
-          data: acceptanceRates,
+          label: 'Acceptance Rate by Lines',
+          data: acceptanceRatesByLines,
+          backgroundColor: 'rgba(173, 216, 230, 0.2)', // light blue
+          borderColor: 'rgba(173, 216, 230, 1)', // darker blue
+          fill: false // This makes the area under the line not filled
+        }
+      ]
+    };
+
+    acceptanceRateByCountChartData.value = {
+      labels: data.map((m: Metrics) => m.day),
+      datasets: [
+        {
+          type: 'line', // This makes the dataset a line in the chart
+          label: 'Acceptance Rate by Count',
+          data: acceptanceRatesByCount,
           backgroundColor: 'rgba(173, 216, 230, 0.2)', // light blue
           borderColor: 'rgba(173, 216, 230, 1)', // darker blue
           fill: false // This makes the area under the line not filled
         }
       ]
     };
 
-    if(cumulativeNumberSuggestions.value === 0){
-      acceptanceRateAverage.value = 0;
+    totalLinesSuggested.value = data.reduce((sum: number, m: Metrics) => sum + m.total_lines_suggested, 0);
+
+    if(totalLinesSuggested.value === 0){
+      acceptanceRateAverageByLines.value = 0;
+    } else {
+      acceptanceRateAverageByLines.value = cumulativeNumberLOCAccepted.value / totalLinesSuggested.value * 100;
+    }
+
+    // Calculate acceptanceRateAverageByCount
+    if (cumulativeNumberSuggestions.value === 0) {
+      acceptanceRateAverageByCount.value = 0;
     } else {
-      acceptanceRateAverage.value = cumulativeNumberAcceptances.value / cumulativeNumberSuggestions.value * 100;
+      acceptanceRateAverageByCount.value = cumulativeNumberAcceptances.value / cumulativeNumberSuggestions.value * 100;
     }
 
     totalActiveUsersChartData.value = {
@@ -293,8 +328,8 @@ export default defineComponent({
 
     return { totalSuggestionsAndAcceptanceChartData, chartData, 
       chartOptions, totalActiveUsersChartData, 
-      totalActiveUsersChartOptions, acceptanceRateChartData, acceptanceRateAverage, cumulativeNumberSuggestions, 
-      cumulativeNumberAcceptances, cumulativeNumberLOCAccepted };
+      totalActiveUsersChartOptions, acceptanceRateByLinesChartData, acceptanceRateByCountChartData, acceptanceRateAverageByLines, acceptanceRateAverageByCount, cumulativeNumberSuggestions, 
+      cumulativeNumberAcceptances, cumulativeNumberLOCAccepted, totalLinesSuggested };
   },
 
 });

src/components/SeatsAnalysisViewer.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, toRef , watchEffect } from 'vue';
+  import { defineComponent, ref , watchEffect } from 'vue';
   import { Seat } from '../model/Seat';
   import {
     Chart as ChartJS,

src/model/Breakdown.ts

@@ -1,17 +1,19 @@
-// Breakdown model with name, accepted prompts, accepted lines of code and acceptance rate
-
 export class Breakdown {
   name: string;
   acceptedPrompts: number;
+  suggestedPrompts: number;
   suggestedLinesOfCode: number;
   acceptedLinesOfCode: number;
-  acceptanceRate: number; // Percentage
+  acceptanceRateByCount: number;
+  acceptanceRateByLines: number;
 
   constructor(data: any) {
     this.name = data.name;
     this.acceptedPrompts = data.acceptedPrompts;
+    this.suggestedPrompts = data.suggestedPrompts;
     this.suggestedLinesOfCode = data.suggestedLinesOfCode;
     this.acceptedLinesOfCode = data.acceptedLinesOfCode;
-    this.acceptanceRate = data.acceptanceRate; // Convert to percentage
+    this.acceptanceRateByCount = data.acceptanceRateByCount;
+    this.acceptanceRateByLines = data.acceptanceRateByLines;
   }
-}
+}