Skip to content

Commit 0faa082

Browse files
martedescomartedesco
committed
Refactor code and add Vuetify plugin and components
1 parent 17bd882 commit 0faa082

File tree

12 files changed

+580
-91
lines changed

12 files changed

+580
-91
lines changed

‎package-lock.json

Lines changed: 357 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,19 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"@mdi/font": "5.9.55",
1112
"axios": "^1.6.2",
1213
"chart.js": "^4.4.1",
1314
"core-js": "^3.8.3",
1415
"postcss": "^8.4.31",
16+
"roboto-fontface": "*",
1517
"vue": "^3.2.13",
16-
"vue-chartjs": "^5.3.0"
18+
"vue-chartjs": "^5.3.0",
19+
"vuetify": "^3.0.0-beta.0",
20+
"webfontloader": "^1.0.0"
1721
},
1822
"devDependencies": {
23+
"@types/webfontloader": "^1.0.0",
1924
"@typescript-eslint/eslint-plugin": "^5.4.0",
2025
"@typescript-eslint/parser": "^5.4.0",
2126
"@vue/cli-plugin-babel": "~5.0.0",
@@ -25,6 +30,8 @@
2530
"@vue/eslint-config-typescript": "^9.1.0",
2631
"eslint": "^7.32.0",
2732
"eslint-plugin-vue": "^8.0.3",
28-
"typescript": "~4.5.5"
33+
"typescript": "^5.4.5",
34+
"vue-cli-plugin-vuetify": "~2.5.8",
35+
"webpack-plugin-vuetify": "^2.0.0-alpha.0"
2936
}
3037
}

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="">
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">

‎src/App.vue

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
<template>
2-
<AppHeader />
3-
<MetricsViewer />
2+
<v-app>
3+
<v-main>
4+
<MainComponent/>
5+
</v-main>
6+
</v-app>
47
</template>
58

69
<script lang="ts">
7-
import { defineComponent } from 'vue';
8-
import MetricsViewer from './components/MetricsViewer.vue';
9-
import AppHeader from './components/AppHeader.vue';
10+
import { defineComponent } from 'vue'
11+
import MainComponent from './components/MainComponent.vue'
1012
1113
export default defineComponent({
1214
name: 'App',
15+
1316
components: {
14-
MetricsViewer,
15-
AppHeader
16-
}
17-
});
18-
</script>
17+
MainComponent,
18+
},
1919
20-
<style>
21-
#app {
22-
font-family: Avenir, Helvetica, Arial, sans-serif;
23-
-webkit-font-smoothing: antialiased;
24-
-moz-osx-font-smoothing: grayscale;
25-
text-align: center;
26-
color: #2c3e50;
27-
margin-top: 60px;
28-
}
29-
</style>
20+
data () {
21+
return {
22+
//
23+
}
24+
},
25+
})
26+
</script>

‎src/assets/logo.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/MainComponent.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<v-card>
3+
<v-toolbar color="black" elevation="4">
4+
<v-btn icon>
5+
<v-icon>mdi-github</v-icon>
6+
</v-btn>
7+
8+
<v-toolbar-title>Copilot Metrics Viewer</v-toolbar-title>
9+
10+
<v-spacer></v-spacer>
11+
12+
<template v-slot:extension>
13+
<v-tabs v-model="tab" align-tabs="title">
14+
<v-tab v-for="item in items" :key="item" :value="item">
15+
{{ item }}
16+
</v-tab>
17+
</v-tabs>
18+
</template>
19+
</v-toolbar>
20+
21+
<v-window v-model="tab">
22+
<v-window-item v-for="item in items" :key="item" :value="item">
23+
<v-card flat>
24+
<component :is="item === 'organization' ? 'MetricsViewer' : null"></component>
25+
</v-card>
26+
</v-window-item>
27+
</v-window>
28+
</v-card>
29+
</template>
30+
31+
<script lang='ts'>
32+
import { defineComponent } from 'vue'
33+
import MetricsViewer from './MetricsViewer.vue' // adjust the path as needed
34+
35+
36+
export default defineComponent({
37+
name: 'MainComponent',
38+
components: {
39+
MetricsViewer,
40+
},
41+
42+
data () {
43+
return {
44+
items: ['organization', 'enterprise', 'languages', 'Copilot chat'],
45+
tab: null,
46+
}
47+
},
48+
})
49+
</script>

‎src/components/MetricsViewer.vue

Lines changed: 90 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,99 @@
11
<template>
22
<div>
3-
<h1>GitHub Copilot Business Metrics Viewer</h1>
4-
53
<!-- API Error Message -->
64
<div v-if="apiError" class="error-message" v-html="apiError"></div>
75
<div v-if="!apiError">
86
<div class="tiles-container">
9-
<!-- Acceptance Rate Tile -->
10-
<div class="tile">
11-
<h3>Acceptance Rate Average</h3>
12-
<p>{{ acceptanceRateAverage.toFixed(2) }}%</p>
13-
<p>Over the last 28 days</p>
14-
</div>
15-
16-
<div class="tile">
17-
<h3>Cumulative Number of Suggestions</h3>
18-
<p>{{ cumulativeNumberSuggestions }}</p>
19-
<p>On the last 28 days</p>
20-
</div>
21-
22-
<div class="tile">
23-
<h3>Cumulative Number of Accepted Prompts</h3>
24-
<p>{{ cumulativeNumberAcceptances }}</p>
25-
<p>On the last 28 days</p>
26-
</div>
27-
28-
<div class="tile">
29-
<h3>Cumulative Number of Lines of Code Accepted</h3>
30-
<p>{{ cumulativeNumberLOCAccepted }}</p>
31-
<p>On the last 28 days</p>
32-
</div>
33-
</div>
347

8+
<!-- Acceptance Rate Tile -->
9+
<v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
10+
<v-card-item>
11+
<div>
12+
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
13+
<div class="text-h6 mb-1">Acceptance Rate Average</div>
14+
<div class="text-caption">
15+
Over the last 28 days
16+
</div>
17+
<p>{{ acceptanceRateAverage.toFixed(2) }}%</p>
18+
</div>
19+
</v-card-item>
20+
</v-card>
21+
22+
<v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
23+
<v-card-item>
24+
<div>
25+
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
26+
<div class="text-h6 mb-1">Cumulative Number of Suggestions</div>
27+
<div class="text-caption">
28+
Over the last 28 days
29+
</div>
30+
<p>{{ cumulativeNumberSuggestions }}</p>
31+
</div>
32+
</v-card-item>
33+
</v-card>
34+
35+
<v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
36+
<v-card-item>
37+
<div>
38+
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
39+
<div class="text-h6 mb-1">Cumulative Number of Accepted Prompts</div>
40+
<div class="text-caption">
41+
Over the last 28 days
42+
</div>
43+
<p>{{ cumulativeNumberAcceptances }}</p>
44+
</div>
45+
</v-card-item>
46+
</v-card>
47+
48+
<v-card elevation="4" color="white" variant="elevated" class="mx-auto my-3" style="width: 300px; height: 175px;">
49+
<v-card-item>
50+
<div>
51+
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
52+
<div class="text-h6 mb-1">Cumulative Number of Lines of Code Accepted</div>
53+
<div class="text-caption">
54+
Over the last 28 days
55+
</div>
56+
<p>{{ cumulativeNumberLOCAccepted }}</p>
57+
</div>
58+
</v-card-item>
59+
</v-card>
60+
</div>
3561

36-
<h2>Acceptance rate (%)</h2>
37-
<Bar :data="acceptanceRateChartData" :options="chartOptions" />
38-
39-
<h2>Total Suggestions Count | Total Acceptances Count</h2>
40-
<Line :data="totalSuggestionsAndAcceptanceChartData" :options="chartOptions" />
41-
42-
<h2>Total Lines Suggested | Total Lines Accepted</h2>
43-
<Line :data="chartData" :options="chartOptions" />
44-
45-
<h2>Total Active Users</h2>
46-
<Bar :data="totalActiveUsersChartData" :options="totalActiveUsersChartOptions" />
47-
48-
<h2>Languages Breakdown</h2>
49-
<table class="center-table" style="border: 1px solid black;">
50-
<thead>
51-
<tr>
52-
<th style="text-align: left; border-right: 1px solid black; border-bottom: 1px solid black; padding-right: 10px;">Language Name</th>
53-
<th style="text-align: left; border-right: 1px solid black; border-bottom: 1px solid black; padding-right: 10px;">Accepted Prompts</th>
54-
<th style="border-right: 1px solid black; border-bottom: 1px solid black; padding-right: 10px;">Accepted Lines of Code</th>
55-
<th style="border-bottom: 1px solid black; padding-right: 10px;">Acceptance Rate (%)</th>
56-
</tr>
57-
</thead>
58-
<tbody>
59-
<tr v-for="(language, languageName) in Array.from(languages)" :key="languageName">
60-
<td style="text-align: left;">{{ language[0] }}</td>
61-
<td style="text-align: left;">{{ language[1].acceptedPrompts }}</td>
62-
<td style="text-align: left;">{{ language[1].acceptedLinesOfCode }}</td>
63-
<td v-if="language[1].acceptanceRate !== undefined">{{ language[1].acceptanceRate.toFixed(2) }}%</td>
64-
</tr>
65-
</tbody>
66-
</table>
67-
62+
<v-main class="p-1" style="min-height: 300px;">
63+
<v-container style="min-height: 300px;" class="px-4 elevation-2">
64+
<h2>Acceptance rate (%)</h2>
65+
<Bar :data="acceptanceRateChartData" :options="chartOptions" />
66+
67+
<h2>Total Suggestions Count | Total Acceptances Count</h2>
68+
<Line :data="totalSuggestionsAndAcceptanceChartData" :options="chartOptions" />
69+
70+
<h2>Total Lines Suggested | Total Lines Accepted</h2>
71+
<Line :data="chartData" :options="chartOptions" />
72+
73+
<h2>Total Active Users</h2>
74+
<Bar :data="totalActiveUsersChartData" :options="totalActiveUsersChartOptions" />
75+
76+
<h2>Languages Breakdown</h2>
77+
<table class="center-table" style="border: 1px solid black;">
78+
<thead>
79+
<tr>
80+
<th style="text-align: left; border-right: 1px solid black; border-bottom: 1px solid black; padding-right: 10px;">Language Name</th>
81+
<th style="text-align: left; border-right: 1px solid black; border-bottom: 1px solid black; padding-right: 10px;">Accepted Prompts</th>
82+
<th style="border-right: 1px solid black; border-bottom: 1px solid black; padding-right: 10px;">Accepted Lines of Code</th>
83+
<th style="border-bottom: 1px solid black; padding-right: 10px;">Acceptance Rate (%)</th>
84+
</tr>
85+
</thead>
86+
<tbody>
87+
<tr v-for="(language, languageName) in Array.from(languages)" :key="languageName">
88+
<td style="text-align: left;">{{ language[0] }}</td>
89+
<td style="text-align: left;">{{ language[1].acceptedPrompts }}</td>
90+
<td style="text-align: left;">{{ language[1].acceptedLinesOfCode }}</td>
91+
<td v-if="language[1].acceptanceRate !== undefined">{{ language[1].acceptanceRate.toFixed(2) }}%</td>
92+
</tr>
93+
</tbody>
94+
</table>
95+
</v-container>
96+
</v-main>
6897
</div>
6998
</div>
7099
</template>
@@ -136,6 +165,8 @@ export default defineComponent({
136165
const chartOptions = {
137166
responsive: true,
138167
maintainAspectRatio: true,
168+
height: 300,
169+
width: 300,
139170
layout: {
140171
padding: {
141172
left: 150,

‎src/main.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
3+
import vuetify from './plugins/vuetify'
4+
import { loadFonts } from './plugins/webfontloader'
35

4-
createApp(App).mount('#app')
6+
loadFonts()
7+
8+
createApp(App)
9+
.use(vuetify)
10+
.mount('#app')

‎src/plugins/vuetify.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createVuetify } from 'vuetify'
2+
import { aliases, mdi } from 'vuetify/iconsets/mdi'
3+
4+
export default createVuetify({
5+
icons: {
6+
defaultSet: 'mdi',
7+
aliases,
8+
sets: {
9+
mdi,
10+
},
11+
},
12+
})

‎src/plugins/vuetify.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Styles
2+
import '@mdi/font/css/materialdesignicons.css'
3+
import 'vuetify/styles'
4+
5+
// Vuetify
6+
import { createVuetify } from 'vuetify'
7+
8+
export default createVuetify(
9+
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
10+
)

0 commit comments

Comments
 (0)