Skip to content

Commit 87891c5

Browse files
martedescomartedesco
committed
Cleanup and delegate API Call to MainComponent
1 parent ea77b8a commit 87891c5

File tree

4 files changed

+264
-351
lines changed

4 files changed

+264
-351
lines changed

‎src/components/CopilotChatViewer.vue

Lines changed: 119 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<template>
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;">
2+
<div class="tiles-container">
3+
<v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
74
<v-card-item>
85
<div>
96
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
@@ -14,9 +11,9 @@
1411
<p>{{ cumulativeNumberTurns }}</p>
1512
</div>
1613
</v-card-item>
17-
</v-card>
14+
</v-card>
1815

19-
<v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
16+
<v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
2017
<v-card-item>
2118
<div>
2219
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
@@ -27,29 +24,26 @@
2724
<p>{{ cumulativeNumberAcceptances }}</p>
2825
</div>
2926
</v-card-item>
30-
</v-card>
31-
</div>
32-
<v-main class="p-1" style="min-height: 300px;">
27+
</v-card>
28+
</div>
3329

30+
<v-main class="p-1" style="min-height: 300px;">
3431
<v-container style="min-height: 300px;" class="px-4 elevation-2">
3532

36-
<h2>Total Acceptances | Total Turns Count</h2>
37-
<Line :data="totalNumberAcceptancesAndTurnsChartData" :options="chartOptions" />
33+
<h2>Total Acceptances | Total Turns Count</h2>
34+
<Line :data="totalNumberAcceptancesAndTurnsChartData" :options="chartOptions" />
3835

39-
<h2>Total Active Copilot Chat Users</h2>
40-
<Bar :data="totalActiveCopilotChatUsersChartData" :options="totalActiveChatUsersChartOptions" />
36+
<h2>Total Active Copilot Chat Users</h2>
37+
<Bar :data="totalActiveCopilotChatUsersChartData" :options="totalActiveChatUsersChartOptions" />
4138

4239
</v-container>
43-
</v-main>
44-
45-
</div>
46-
40+
</v-main>
4741
</template>
4842

4943
<script lang="ts">
50-
import { defineComponent, ref } from 'vue';
51-
import { getGitHubCopilotMetricsApi } from '../api/GitHubApi';
44+
import { defineComponent, ref, toRef } from 'vue';
5245
import { Metrics } from '../model/MetricsData';
46+
import { Line, Bar } from 'vue-chartjs'
5347
import {
5448
Chart as ChartJS,
5549
ArcElement,
@@ -63,9 +57,6 @@
6357
Legend
6458
} from 'chart.js'
6559
66-
import { Line } from 'vue-chartjs'
67-
import { Bar } from 'vue-chartjs'
68-
6960
ChartJS.register(
7061
ArcElement,
7162
CategoryScale,
@@ -78,148 +69,121 @@ ChartJS.register(
7869
Legend
7970
)
8071
81-
82-
83-
84-
export default defineComponent({
85-
name: 'CopilotChatViewer',
86-
components: {
87-
Bar,
88-
Line
72+
export default defineComponent({
73+
name: 'CopilotChatViewer',
74+
props: {
75+
metrics: {
76+
type: Object,
77+
required: true
78+
}
8979
},
90-
setup() {
91-
const metrics = ref<Metrics[]>([]);
92-
93-
const apiError = ref<string>('');
94-
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: [] });
80+
components: {
81+
Bar,
82+
Line
83+
},
84+
setup(props) {
85+
86+
let cumulativeNumberAcceptances = ref(0);
87+
88+
let cumulativeNumberTurns = ref(0);
89+
90+
//Total Copilot Chat Active Users
91+
const totalActiveCopilotChatUsersChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
92+
93+
const totalActiveChatUsersChartOptions = {
94+
responsive: true,
95+
maintainAspectRatio: true,
96+
scales: {
97+
y: {
98+
beginAtZero: true,
99+
ticks: {
100+
stepSize: 1
101+
}
102+
}
103+
},
104+
layout: {
105+
padding: {
106+
left: 50,
107+
right: 50,
108+
top: 50,
109+
bottom: 50
110+
}
111+
},
112+
};
101113
102-
const totalActiveChatUsersChartOptions = {
114+
const chartOptions = {
103115
responsive: true,
104116
maintainAspectRatio: true,
105-
scales: {
106-
y: {
107-
beginAtZero: true,
108-
ticks: {
109-
stepSize: 1
110-
}
111-
}
112-
},
117+
height: 300,
118+
width: 300,
113119
layout: {
114120
padding: {
115-
left: 50,
116-
right: 50,
117-
top: 50,
118-
bottom: 50
121+
left: 150,
122+
right: 150,
123+
top: 20,
124+
bottom: 40
119125
}
120126
},
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-
141-
getGitHubCopilotMetricsApi().then(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-
190-
}).catch(error => {
191-
console.log(error);
192-
// Check the status code of the error response
193-
if (error.response && error.response.status) {
194-
switch (error.response.status) {
195-
case 401:
196-
apiError.value = '401 Unauthorized access - check if your token in the .env file is correct.';
197-
break;
198-
case 404:
199-
apiError.value = `404 Not Found - is the organization '${process.env.VUE_APP_GITHUB_ORG}' correct?`;
200-
break;
201-
default:
202-
apiError.value = error.message;
203-
break;
204-
}
205-
} else {
206-
// Update apiError with the error message
207-
apiError.value = error.message;
208-
}
209-
// Add a new line to the apiError message
210-
apiError.value += ' <br> If .env file is modified, restart the changes to take effect.';
211-
212-
});
213-
214-
return { apiError, metrics, totalActiveCopilotChatUsersChartData, totalActiveChatUsersChartOptions,cumulativeNumberAcceptances, cumulativeNumberTurns, totalNumberAcceptancesAndTurnsChartData, chartOptions};
215-
}
216-
});
217-
</script>
127+
};
128+
129+
//Total Number Acceptances And Turns
130+
const totalNumberAcceptancesAndTurnsChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
131+
132+
const data = toRef(props, 'metrics').value;
133+
134+
cumulativeNumberTurns.value = 0;
135+
const cumulativeNumberTurnsData = data.map((m: Metrics) => {
136+
cumulativeNumberTurns.value += m.total_chat_turns;
137+
return m.total_chat_turns;
138+
});
139+
140+
cumulativeNumberAcceptances.value = 0;
141+
const cumulativeNumberAcceptancesData = data.map((m: Metrics) => {
142+
cumulativeNumberAcceptances.value += m.total_chat_acceptances;
143+
return m.total_chat_acceptances;
144+
});
145+
146+
totalNumberAcceptancesAndTurnsChartData.value = {
147+
labels: data.map((m: Metrics) => m.day),
148+
datasets: [
149+
{
150+
label: 'Total Acceptances',
151+
data: cumulativeNumberAcceptancesData,
152+
backgroundColor: 'rgba(75, 192, 192, 0.2)',
153+
borderColor: 'rgba(75, 192, 192, 1)'
154+
155+
},
156+
{
157+
label: 'Total Turns',
158+
data: cumulativeNumberTurnsData,
159+
backgroundColor: 'rgba(153, 102, 255, 0.2)',
160+
borderColor: 'rgba(153, 102, 255, 1)'
161+
}]
162+
};
163+
164+
totalActiveCopilotChatUsersChartData.value = {
165+
labels: data.map((m: Metrics) => m.day),
166+
datasets: [
167+
{
168+
label: 'Total Active Copilot Chat Users',
169+
data: data.map((m: Metrics) => m.total_active_chat_users),
170+
backgroundColor: 'rgba(0, 0, 139, 0.2)', // dark blue with 20% opacity
171+
borderColor: 'rgba(255, 99, 132, 1)'
172+
}]
173+
};
174+
175+
return { totalActiveCopilotChatUsersChartData, totalActiveChatUsersChartOptions,cumulativeNumberAcceptances, cumulativeNumberTurns, totalNumberAcceptancesAndTurnsChartData, chartOptions};
176+
}
177+
});
178+
179+
</script>
218180

219-
<style scoped>
220-
.tiles-container {
181+
<style scoped>
182+
183+
.tiles-container {
221184
display: flex;
222185
justify-content: flex-start;
223186
flex-wrap: wrap;
224187
}
225-
</style>
188+
189+
</style>

0 commit comments

Comments
 (0)