Skip to content

Commit fd4d11d

Browse files
martedescomartedesco
committed
Refactor MetricsViewer.vue and MetricsData.ts to add chat-related properties
1 parent 73aea1d commit fd4d11d

File tree

3 files changed

+190
-15
lines changed

3 files changed

+190
-15
lines changed

‎src/components/CopilotChatViewer.vue

Lines changed: 178 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,192 @@
11
<template>
2-
<div>
3-
</div>
2+
<!-- API Error Message -->
3+
<div v-if="apiError" class="error-message" v-html="apiError"></div>
4+
<div v-if="!apiError">
5+
<div class="tiles-container">
6+
<v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
7+
<v-card-item>
8+
<div>
9+
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
10+
<div class="text-h6 mb-1">Cumulative Number of Turns</div>
11+
<div class="text-caption">
12+
Over the last 28 days
13+
</div>
14+
<p>{{ cumulativeNumberTurns }}</p>
15+
</div>
16+
</v-card-item>
17+
</v-card>
18+
19+
<v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
20+
<v-card-item>
21+
<div>
22+
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
23+
<div class="text-h6 mb-1">Cumulative Number of Lines of Code Accepted</div>
24+
<div class="text-caption">
25+
Over the last 28 days
26+
</div>
27+
<p>{{ cumulativeNumberAcceptances }}</p>
28+
</div>
29+
</v-card-item>
30+
</v-card>
31+
</div>
32+
<v-main class="p-1" style="min-height: 300px;">
33+
34+
<v-container style="min-height: 300px;" class="px-4 elevation-2">
35+
36+
<h2>Total Suggestions Count | Total Acceptances Count</h2>
37+
<Line :data="totalNumberAcceptancesAndTurnsChartData" :options="chartOptions" />
38+
39+
<h2>Total Active Copilot Chat Users</h2>
40+
<Bar :data="totalActiveCopilotChatUsersChartData" :options="totalActiveChatUsersChartOptions" />
41+
42+
</v-container>
43+
</v-main>
44+
45+
</div>
46+
447
</template>
548

649
<script lang="ts">
750
import { defineComponent, ref } from 'vue';
851
import { getGitHubCopilotMetricsApi } from '../api/GitHubApi';
952
import { Metrics } from '../model/MetricsData';
53+
import {
54+
Chart as ChartJS,
55+
ArcElement,
56+
CategoryScale,
57+
LinearScale,
58+
PointElement,
59+
LineElement,
60+
BarElement,
61+
Title,
62+
Tooltip,
63+
Legend
64+
} from 'chart.js'
65+
66+
import { Line } from 'vue-chartjs'
67+
import { Bar } from 'vue-chartjs'
68+
69+
ChartJS.register(
70+
ArcElement,
71+
CategoryScale,
72+
LinearScale,
73+
BarElement,
74+
PointElement,
75+
LineElement,
76+
Title,
77+
Tooltip,
78+
Legend
79+
)
80+
81+
1082
1183
1284
export default defineComponent({
1385
name: 'CopilotChatViewer',
86+
components: {
87+
Bar,
88+
Line
89+
},
1490
setup() {
1591
const metrics = ref<Metrics[]>([]);
1692
1793
const apiError = ref<string>('');
1894
95+
let cumulativeNumberAcceptances = ref(0);
96+
97+
let cumulativeNumberTurns = ref(0);
98+
99+
//Total Copilot Chat Active Users
100+
const totalActiveCopilotChatUsersChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
101+
102+
const totalActiveChatUsersChartOptions = {
103+
responsive: true,
104+
maintainAspectRatio: true,
105+
scales: {
106+
y: {
107+
beginAtZero: true,
108+
ticks: {
109+
stepSize: 1
110+
}
111+
}
112+
},
113+
layout: {
114+
padding: {
115+
left: 50,
116+
right: 50,
117+
top: 50,
118+
bottom: 50
119+
}
120+
},
121+
};
122+
123+
const chartOptions = {
124+
responsive: true,
125+
maintainAspectRatio: true,
126+
height: 300,
127+
width: 300,
128+
layout: {
129+
padding: {
130+
left: 150,
131+
right: 150,
132+
top: 20,
133+
bottom: 40
134+
}
135+
},
136+
};
137+
138+
//Total Number Acceptances And Turns
139+
const totalNumberAcceptancesAndTurnsChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
140+
19141
getGitHubCopilotMetricsApi().then(data => {
20-
metrics.value = data;
142+
metrics.value = data;
143+
144+
console.log('Metrics Data: ' + JSON.stringify(data));
145+
146+
cumulativeNumberTurns.value = 0;
147+
const cumulativeNumberTurnsData = data.map(m => {
148+
cumulativeNumberTurns.value += m.total_chat_turns;
149+
return m.total_chat_turns;
150+
});
151+
152+
cumulativeNumberAcceptances.value = 0;
153+
const cumulativeNumberAcceptancesData = data.map(m => {
154+
cumulativeNumberAcceptances.value += m.total_chat_acceptances;
155+
return m.total_chat_acceptances;
156+
});
157+
158+
totalNumberAcceptancesAndTurnsChartData.value = {
159+
labels: data.map(m => m.day),
160+
datasets: [
161+
{
162+
label: 'Total Acceptances',
163+
data: cumulativeNumberAcceptancesData,
164+
backgroundColor: 'rgba(75, 192, 192, 0.2)',
165+
borderColor: 'rgba(75, 192, 192, 1)'
166+
167+
},
168+
{
169+
label: 'Total Turns',
170+
data: cumulativeNumberTurnsData,
171+
backgroundColor: 'rgba(153, 102, 255, 0.2)',
172+
borderColor: 'rgba(153, 102, 255, 1)'
173+
}
174+
175+
]
176+
};
177+
178+
totalActiveCopilotChatUsersChartData.value = {
179+
labels: data.map(m => m.day),
180+
datasets: [
181+
{
182+
label: 'Total Active Copilot Chat Users',
183+
data: data.map(m => m.total_active_chat_users),
184+
backgroundColor: 'rgba(0, 0, 139, 0.2)', // dark blue with 20% opacity
185+
borderColor: 'rgba(255, 99, 132, 1)'
186+
}
187+
]
188+
};
189+
21190
}).catch(error => {
22191
console.log(error);
23192
// Check the status code of the error response
@@ -42,11 +211,15 @@
42211
43212
});
44213
45-
return { apiError, metrics };
214+
return { apiError, metrics, totalActiveCopilotChatUsersChartData, totalActiveChatUsersChartOptions,cumulativeNumberAcceptances, cumulativeNumberTurns, totalNumberAcceptancesAndTurnsChartData, chartOptions};
46215
}
47216
});
48217
</script>
49218

50219
<style scoped>
51-
220+
.tiles-container {
221+
display: flex;
222+
justify-content: flex-start;
223+
flex-wrap: wrap;
224+
}
52225
</style>

‎src/components/MetricsViewer.vue

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -375,14 +375,4 @@ export default defineComponent({
375375
justify-content: flex-start;
376376
flex-wrap: wrap;
377377
}
378-
379-
.tile {
380-
border: 1px solid #ccc;
381-
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1),
382-
-3px -3px 5px rgba(255, 255, 255, 0.7);
383-
padding: 20px;
384-
border-radius: 10px;
385-
width: 20%;
386-
margin: 1%;
387-
}
388378
</style>

‎src/model/MetricsData.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ class Breakdown {
66
lines_suggested: number;
77
lines_accepted: number;
88
active_users: number;
9+
chat_acceptances: number;
10+
chat_turns: number;
11+
active_chat_users: number;
912

1013
constructor(data: any) {
1114
this.language = data.language;
@@ -15,6 +18,9 @@ class Breakdown {
1518
this.lines_suggested = data.lines_suggested;
1619
this.lines_accepted = data.lines_accepted;
1720
this.active_users = data.active_users;
21+
this.chat_acceptances = data.chat_acceptances;
22+
this.chat_turns = data.chat_turns;
23+
this.active_chat_users = data.active_chat_users;
1824
}
1925
}
2026

@@ -24,6 +30,9 @@ class Breakdown {
2430
total_lines_suggested: number;
2531
total_lines_accepted: number;
2632
total_active_users: number;
33+
total_chat_acceptances: number;
34+
total_chat_turns: number;
35+
total_active_chat_users: number;
2736
day: string;
2837
breakdown: Breakdown[];
2938

@@ -33,6 +42,9 @@ class Breakdown {
3342
this.total_lines_suggested = data.total_lines_suggested;
3443
this.total_lines_accepted = data.total_lines_accepted;
3544
this.total_active_users = data.total_active_users;
45+
this.total_chat_acceptances = data.total_chat_acceptances;
46+
this.total_chat_turns = data.total_chat_turns;
47+
this.total_active_chat_users = data.total_active_chat_users;
3648
this.day = data.day;
3749
this.breakdown = data.breakdown.map((item: any) => new Breakdown(item));
3850
}

0 commit comments

Comments
 (0)