Add option to exclude holidays from copilot metrics (#234)

* Initial plan

* Initial exploration and planning for holiday exclusion feature

Co-authored-by: karpikpl <[email protected]>

* Add holiday exclusion feature with date-holidays integration

Co-authored-by: karpikpl <[email protected]>

* Fix linting issues and complete holiday exclusion feature

Co-authored-by: karpikpl <[email protected]>

* Add UI controls for holiday exclusion in DateRangeSelector

Co-authored-by: karpikpl <[email protected]>

* fixes to holidays features

* Update tests/weekends-filtering.spec.ts

Co-authored-by: Copilot <[email protected]>

* Update app/components/DateRangeSelector.vue

Co-authored-by: Copilot <[email protected]>

* code review updates

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: karpikpl <[email protected]>
Co-authored-by: Piotr Karpala <[email protected]>
Co-authored-by: Piotr Karpala <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

app/components/CopilotChatViewer.vue

@@ -5,7 +5,7 @@
                 <div class="tiles-text">
                     <div class="spacing-25"/>
                     <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template v-slot:activator="{ props }">
+                      <template #activator="{ props }">
                         <div v-bind="props" class="text-h6 mb-1">Cumulative Number of Turns</div>
                       </template>
                       <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -23,7 +23,7 @@
                 <div class="tiles-text">
                     <div class="spacing-10"/>
                     <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template v-slot:activator="{ props }">
+                      <template #activator="{ props }">
                         <div v-bind="props" class="text-h6 mb-1">Cumulative Number of Acceptances</div>
                       </template>
                       <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -41,7 +41,7 @@
         <v-container style="min-height: 300px;" class="px-4 elevation-2">
 
             <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template v-slot:activator="{ props }">
+              <template #activator="{ props }">
                 <h2 v-bind="props" class="mb-1">Total Acceptances | Total Turns Count</h2>
               </template>
               <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -51,7 +51,7 @@
             <Line :data="totalNumberAcceptancesAndTurnsChartData" :options="chartOptions" />
 
             <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template v-slot:activator="{ props }">
+              <template #activator="{ props }">
                 <h2 v-bind="props" class="mb-1">Total Active Copilot Chat Users</h2>
               </template>
               <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">

app/components/DateRangeSelector.vue

@@ -2,7 +2,7 @@
   <v-card class="pa-4 ma-4" elevation="2">
     <v-card-title class="text-h6 pb-2">Date Range Filter</v-card-title>
     <v-row align="end">
-      <v-col cols="12" sm="4">
+      <v-col cols="6" sm="3">
         <v-text-field
           v-model="fromDate"
           label="From Date"
@@ -12,7 +12,7 @@
           @update:model-value="updateDateRange"
         />
       </v-col>
-      <v-col cols="12" sm="4">
+      <v-col cols="6" sm="3">
         <v-text-field
           v-model="toDate"
           label="To Date"
@@ -22,7 +22,14 @@
           @update:model-value="updateDateRange"
         />
       </v-col>
-      <v-col cols="12" sm="4" class="d-flex align-center justify-start" style="padding-bottom: 35px;">
+      <v-col cols="6" sm="2">
+        <v-checkbox
+          v-model="excludeHolidays"
+          label="Exclude holidays from metrics"
+          density="compact"
+        />
+      </v-col>
+      <v-col cols="6" sm="4" class="d-flex align-center justify-start" style="padding-bottom: 35px;">
         <v-btn
           color="primary"
           variant="outlined"
@@ -42,6 +49,8 @@
         </v-btn>
       </v-col>
     </v-row>
+
+    
     <v-card-text class="pt-2">
       <span class="text-caption text-medium-emphasis">
         {{ dateRangeText }}
@@ -51,12 +60,19 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 interface Props {
   loading?: boolean
 }
 
 interface Emits {
-  (e: 'date-range-changed', value: { since?: string; until?: string; description: string }): void
+  (e: 'date-range-changed', value: { 
+    since?: string; 
+    until?: string; 
+    description: string;
+    excludeHolidays?: boolean;
+  }): void
 }
 
 withDefaults(defineProps<Props>(), {
@@ -71,6 +87,8 @@ const defaultFromDate = new Date(today.getTime() - 27 * 24 * 60 * 60 * 1000) //
 
 const fromDate = ref(formatDate(defaultFromDate))
 const toDate = ref(formatDate(today))
+const excludeHolidays = ref(false)
+
 
 function formatDate(date: Date): string {
   return date.toISOString().split('T')[0] || ''
@@ -141,11 +159,12 @@ function applyDateRange() {
     toDate.value = temp
   }
   
-  // Emit the date range change
+  // Emit the date range change with holiday options
   emit('date-range-changed', {
     since: fromDate.value,
     until: toDate.value,
-    description: dateRangeText.value
+    description: dateRangeText.value,
+    excludeHolidays: excludeHolidays.value,
   })
 }
 

app/components/MainComponent.vue

@@ -35,7 +35,8 @@
     </v-toolbar>
 
     <!-- Date Range Selector - Hidden for seats tab -->
-    <DateRangeSelector v-show="tab !== 'seat analysis' && !signInRequired" :loading="isLoading"
+    <DateRangeSelector
+v-show="tab !== 'seat analysis' && !signInRequired" :loading="isLoading"
       @date-range-changed="handleDateRangeChange" />
 
     <!-- Organization info for seats tab -->
@@ -69,14 +70,18 @@
         <v-window-item v-for="item in tabItems" :key="item" :value="item">
           <v-card flat>
             <MetricsViewer v-if="item === itemName" :metrics="metrics" :date-range-description="dateRangeDescription" />
-            <BreakdownComponent v-if="item === 'languages'" :metrics="metrics" :breakdown-key="'language'"
+            <BreakdownComponent
+v-if="item === 'languages'" :metrics="metrics" :breakdown-key="'language'"
               :date-range-description="dateRangeDescription" />
-            <BreakdownComponent v-if="item === 'editors'" :metrics="metrics" :breakdown-key="'editor'"
+            <BreakdownComponent
+v-if="item === 'editors'" :metrics="metrics" :breakdown-key="'editor'"
               :date-range-description="dateRangeDescription" />
-            <CopilotChatViewer v-if="item === 'copilot chat'" :metrics="metrics"
+            <CopilotChatViewer
+v-if="item === 'copilot chat'" :metrics="metrics"
               :date-range-description="dateRangeDescription" />
             <SeatsAnalysisViewer v-if="item === 'seat analysis'" :seats="seats" />
-            <ApiResponse v-if="item === 'api response'" :metrics="metrics" :original-metrics="originalMetrics"
+            <ApiResponse
+v-if="item === 'api response'" :metrics="metrics" :original-metrics="originalMetrics"
               :seats="seats" />
           </v-card>
         </v-window-item>
@@ -123,13 +128,23 @@ export default defineNuxtComponent({
       this.seats = [];
       clear();
     },
-    async handleDateRangeChange(newDateRange: { since?: string; until?: string; description: string }) {
+    async handleDateRangeChange(newDateRange: { 
+      since?: string; 
+      until?: string; 
+      description: string;
+      excludeHolidays?: boolean;
+    }) {
       this.dateRangeDescription = newDateRange.description;
       this.dateRange = {
         since: newDateRange.since,
         until: newDateRange.until
       };
 
+      // Store holiday options
+      this.holidayOptions = {
+        excludeHolidays: newDateRange.excludeHolidays,
+      };
+
       await this.fetchMetrics();
     },
     async fetchMetrics() {
@@ -142,6 +157,12 @@ export default defineNuxtComponent({
 
       try {
         const options = Options.fromRoute(this.route, this.dateRange.since, this.dateRange.until);
+        
+        // Add holiday options if they're set
+        if (this.holidayOptions?.excludeHolidays) {
+          options.excludeHolidays = this.holidayOptions.excludeHolidays;
+        }
+        
         const params = options.toParams();
 
         const queryString = new URLSearchParams(params).toString();
@@ -200,7 +221,10 @@ export default defineNuxtComponent({
       seatsReady: false,
       seats: [] as Seat[],
       apiError: undefined as string | undefined,
-      config: null as ReturnType<typeof useRuntimeConfig> | null
+      config: null as ReturnType<typeof useRuntimeConfig> | null,
+      holidayOptions: {
+        excludeHolidays: false,
+      }
     }
   },
   created() {

app/components/MetricsViewer.vue

@@ -8,7 +8,7 @@
           <div class="tiles-text">
             <div class="spacing-25"/>
             <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template v-slot:activator="{ props }">
+              <template #activator="{ props }">
                 <div v-bind="props" class="text-h6 mb-1">Acceptance Rate (by count)</div>
               </template>
               <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -28,7 +28,7 @@
           <div class="tiles-text">
             <div class="spacing-10"/>
             <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template v-slot:activator="{ props }">
+              <template #activator="{ props }">
                 <div v-bind="props" class="text-h6 mb-1">Total count of Suggestions (Prompts)</div>
               </template>
               <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -48,7 +48,7 @@
             <div class="spacing-25"/>
             <div class="tiles-text">
               <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                <template v-slot:activator="{ props }">
+                <template #activator="{ props }">
                   <div v-bind="props" class="text-h6 mb-1">Acceptance Rate (by lines)</div>
                 </template>
                 <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -68,7 +68,7 @@
           <div class="tiles-text">
             <div class="spacing-10"/>
             <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-              <template v-slot:activator="{ props }">
+              <template #activator="{ props }">
                 <div v-bind="props" class="text-h6 mb-1">Total Lines of code Suggested</div>
               </template>
               <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -88,7 +88,7 @@
 
       <v-container style="min-height: 300px;" class="px-4 elevation-2">
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-        <template v-slot:activator="{ props }">
+        <template #activator="{ props }">
           <h2 v-bind="props">Acceptance rate by count (%)</h2>
         </template>
         <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -98,7 +98,7 @@
       <Bar :data="acceptanceRateByCountChartData" :options="chartOptions" />
 
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-        <template v-slot:activator="{ props }">
+        <template #activator="{ props }">
           <h2 v-bind="props" class="mb-1">Total Suggestions Count | Total Acceptances Count</h2>
         </template>
         <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -108,7 +108,7 @@
       <Line :data="totalSuggestionsAndAcceptanceChartData" :options="chartOptions" />
 
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-        <template v-slot:activator="{ props }">
+        <template #activator="{ props }">
           <h2 v-bind="props">Acceptance rate by lines (%)</h2>
         </template>
         <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -118,7 +118,7 @@
       <Bar :data="acceptanceRateByLinesChartData" :options="chartOptions" />
 
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-        <template v-slot:activator="{ props }">
+        <template #activator="{ props }">
           <h2 v-bind="props" class="mb-1">Total Lines Suggested | Total Lines Accepted</h2>
         </template>
         <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -128,7 +128,7 @@
       <Line :data="chartData" :options="chartOptions" />
 
       <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-        <template v-slot:activator="{ props }">
+        <template #activator="{ props }">
           <h2 v-bind="props" class="mb-1">Total Active Users</h2>
         </template>
         <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">

app/components/SeatsAnalysisViewer.vue

@@ -7,7 +7,7 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-4"
                 <div class="tiles-text">
                     <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
                     <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template v-slot:activator="{ props }">
+                      <template #activator="{ props }">
                         <div v-bind="props" class="text-h6 mb-1">Total Assigned  </div>
                       </template>
                       <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -29,7 +29,7 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
                 <div class="tiles-text">
                     <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
                     <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template v-slot:activator="{ props }">
+                      <template #activator="{ props }">
                         <div v-bind="props" class="text-h6 mb-1">Assigned But Never Used</div>
                       </template>
                       <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -48,7 +48,7 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
                 <div class="tiles-text">
                     <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
                     <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template v-slot:activator="{ props }">
+                      <template #activator="{ props }">
                         <div v-bind="props" class="text-h6 mb-1">No Activity in the Last 7 days </div>
                       </template>
                       <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -67,7 +67,7 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
                 <div class="tiles-text">
                     <div class="text-overline mb-1" style="visibility: hidden;">filler</div>
                     <v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
-                      <template v-slot:activator="{ props }">
+                      <template #activator="{ props }">
                         <div v-bind="props" class="text-h6 mb-1">No Activity in the Last 30 days </div>
                       </template>
                       <v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
@@ -164,7 +164,7 @@ setup(props) {
                 thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
 
                 props.seats.forEach(seat => {
-                    if(!Boolean(seat.last_activity_at)) {
+                    if(!seat.last_activity_at) {
                         noshowCount++;
                     } else {
                         const lastActivityDate = new Date(seat.last_activity_at);