Skip to content

Commit 45589b2

Browse files
martedescomartedesco
committed
Add AppHeader and RawDataViewer components, and update package.json with new dependencies
1 parent 7c38eab commit 45589b2

File tree

7 files changed

+215
-64
lines changed

7 files changed

+215
-64
lines changed

‎package-lock.json

Lines changed: 28 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99
},
1010
"dependencies": {
1111
"axios": "^1.6.2",
12+
"chart.js": "^4.4.1",
1213
"core-js": "^3.8.3",
13-
"vue": "^3.2.13"
14+
"vue": "^3.2.13",
15+
"vue-chartjs": "^5.3.0"
1416
},
1517
"devDependencies": {
1618
"@typescript-eslint/eslint-plugin": "^5.4.0",

‎public/assets/copilotLogo.png

2.91 KB
Loading

‎src/App.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png">
2+
<AppHeader />
33
<MetricsViewer />
4+
<RawDataViewer />
45
</template>
56

67
<script lang="ts">
78
import { defineComponent } from 'vue';
89
import MetricsViewer from './components/MetricsViewer.vue';
10+
import RawDataViewer from './components/RawDataViewer.vue';
11+
import AppHeader from './components/AppHeader.vue';
912
1013
export default defineComponent({
1114
name: 'App',
1215
components: {
13-
MetricsViewer
16+
MetricsViewer,
17+
RawDataViewer,
18+
AppHeader
1419
}
1520
});
1621
</script>

‎src/components/AppHeader.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div class="appHeader">
3+
<img src="/assets/copilotLogo.png" alt="Copilot Logo" width="100px" height="100px"/>
4+
</div>
5+
</template>
6+
7+
<script lang="ts">
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
name: 'AppHeader'
12+
});
13+
</script>
14+
15+
<!-- Add "scoped" attribute to limit CSS to this component only -->
16+
<style scoped>
17+
.header {
18+
display: flex;
19+
justify-content: space-between;
20+
padding: 20px;
21+
}
22+
</style>

‎src/components/MetricsViewer.vue

Lines changed: 91 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,99 @@
11
<template>
2-
<div>
3-
<h1>GitHub Copilot Metrics</h1>
4-
</div>
5-
<div>
6-
<div v-if="loading">Loading...</div>
7-
<div v-else-if="error">{{ error }}</div>
8-
<div v-else>
9-
<div v-for="metric in metrics" :key="metric.day">
10-
<h2>{{ metric.day }}</h2>
11-
<p>Total Suggestions: {{ metric.total_suggestions_count }}</p>
12-
<p>Total Acceptances: {{ metric.total_acceptances_count }}</p>
13-
<p>Total Lines Suggested: {{ metric.total_lines_suggested }}</p>
14-
<p>Total Lines Accepted: {{ metric.total_lines_accepted }}</p>
15-
<p>Total Active Users: {{ metric.total_active_users }}</p>
16-
<h3>Breakdown</h3>
17-
<div v-for="breakdown in metric.breakdown" :key="breakdown.language">
18-
<h4>{{ breakdown.language }}</h4>
19-
<p>Editor: {{ breakdown.editor }}</p>
20-
<p>Suggestions Count: {{ breakdown.suggestions_count }}</p>
21-
<p>Acceptances Count: {{ breakdown.acceptances_count }}</p>
22-
<p>Lines Suggested: {{ breakdown.lines_suggested }}</p>
23-
<p>Lines Accepted: {{ breakdown.lines_accepted }}</p>
24-
<p>Active Users: {{ breakdown.active_users }}</p>
25-
</div>
26-
</div>
27-
</div>
28-
</div>
29-
</template>
30-
31-
<script lang="ts">
32-
import { defineComponent } from 'vue';
2+
<div>
3+
<h1>GitHub Copilot Business Metrics Viewer</h1>
4+
<h2>Total Lines Suggested | Total Lines Accepted</h2>
5+
<Line :data="chartData" :options="chartOptions" />
6+
7+
<h2>Total Active Users</h2>
8+
<Bar :data="totalActiveUsersChartData" :options="chartOptions" />
9+
10+
</div>
11+
</template>
12+
13+
<script lang="ts">
14+
import { defineComponent, ref } from 'vue';
3315
import { getGitHubCopilotMetricsApi } from '../api/GitHubApi';
3416
import { Metrics } from '../model/MetricsData';
17+
import {
18+
Chart as ChartJS,
19+
CategoryScale,
20+
LinearScale,
21+
PointElement,
22+
LineElement,
23+
BarElement,
24+
Title,
25+
Tooltip,
26+
Legend
27+
} from 'chart.js'
28+
29+
import { Line } from 'vue-chartjs'
30+
import { Bar } from 'vue-chartjs'
31+
32+
ChartJS.register(
33+
CategoryScale,
34+
LinearScale,
35+
BarElement,
36+
PointElement,
37+
LineElement,
38+
Title,
39+
Tooltip,
40+
Legend
41+
)
3542
3643
export default defineComponent({
3744
name: 'MetricsViewer',
38-
data() {
39-
return {
40-
loading: false,
41-
error: null,
42-
metrics: [] as Metrics[]
43-
};
44-
},
45-
methods: {
46-
async fetchMetrics(): Promise<void> {
47-
console.log('fetchMetrics');
48-
this.loading = true;
49-
this.error = null;
50-
try {
51-
this.metrics = await getGitHubCopilotMetricsApi();
52-
} catch (error) {
53-
this.error = error as any;
54-
} finally {
55-
this.loading = false;
56-
}
57-
}
45+
components: {
46+
Line,
47+
Bar
5848
},
59-
created() {
60-
this.fetchMetrics();
61-
},
62-
});
49+
setup() {
50+
console.log('MetricsViewer setup');
51+
const metrics = ref<Metrics[]>([]);
52+
//Total Lines Suggested | Total Lines Accepted
53+
const chartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
54+
//Total Active Users
55+
const totalActiveUsersChartData = ref<{ labels: string[]; datasets: any[] }>({ labels: [], datasets: [] });
56+
57+
const chartOptions = {
58+
responsive: true,
59+
maintainAspectRatio: true
60+
};
61+
62+
getGitHubCopilotMetricsApi().then(data => {
63+
metrics.value = data;
64+
chartData.value = {
65+
labels: data.map(m => m.day),
66+
datasets: [
67+
{
68+
label: 'Total Lines Suggested',
69+
data: data.map(m => m.total_lines_suggested),
70+
backgroundColor: 'rgba(75, 192, 192, 0.2)',
71+
borderColor: 'rgba(75, 192, 192, 1)'
6372
64-
</script>
65-
66-
<style scoped>
67-
/* Your CSS goes here */
68-
</style>
73+
},
74+
{
75+
label: 'Total Lines Accepted',
76+
data: data.map(m => m.total_lines_accepted),
77+
backgroundColor: 'rgba(153, 102, 255, 0.2)',
78+
borderColor: 'rgba(153, 102, 255, 1)'
79+
}
80+
]
81+
};
82+
83+
totalActiveUsersChartData.value = {
84+
labels: data.map(m => m.day),
85+
datasets: [
86+
{
87+
label: 'Total Active Users',
88+
data: data.map(m => m.total_active_users),
89+
backgroundColor: 'rgba(0, 0, 139, 0.2)', // dark blue with 20% opacity
90+
borderColor: 'rgba(255, 99, 132, 1)'
91+
}
92+
]
93+
};
94+
});
95+
96+
return { chartData, chartOptions, totalActiveUsersChartData };
97+
}
98+
});
99+
</script>

‎src/components/RawDataViewer.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div>
3+
<h1>GitHub Copilot Metrics</h1>
4+
</div>
5+
<div>
6+
<div v-if="loading">Loading...</div>
7+
<div v-else-if="error">{{ error }}</div>
8+
<div v-else>
9+
<div v-for="metric in metrics" :key="metric.day">
10+
<h2>{{ metric.day }}</h2>
11+
<p>Total Suggestions: {{ metric.total_suggestions_count }}</p>
12+
<p>Total Acceptances: {{ metric.total_acceptances_count }}</p>
13+
<p>Total Lines Suggested: {{ metric.total_lines_suggested }}</p>
14+
<p>Total Lines Accepted: {{ metric.total_lines_accepted }}</p>
15+
<p>Total Active Users: {{ metric.total_active_users }}</p>
16+
<h3>Breakdown</h3>
17+
<div v-for="breakdown in metric.breakdown" :key="breakdown.language">
18+
<h4>{{ breakdown.language }}</h4>
19+
<p>Editor: {{ breakdown.editor }}</p>
20+
<p>Suggestions Count: {{ breakdown.suggestions_count }}</p>
21+
<p>Acceptances Count: {{ breakdown.acceptances_count }}</p>
22+
<p>Lines Suggested: {{ breakdown.lines_suggested }}</p>
23+
<p>Lines Accepted: {{ breakdown.lines_accepted }}</p>
24+
<p>Active Users: {{ breakdown.active_users }}</p>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
</template>
30+
31+
<script lang="ts">
32+
import { defineComponent, ref } from 'vue';
33+
import { getGitHubCopilotMetricsApi } from '../api/GitHubApi';
34+
import { Metrics } from '../model/MetricsData';
35+
36+
export default defineComponent({
37+
name: 'RawDataViewer',
38+
data() {
39+
return {
40+
loading: false,
41+
error: null,
42+
metrics: [] as Metrics[]
43+
};
44+
},
45+
methods: {
46+
async fetchMetrics(): Promise<void> {
47+
console.log('fetchMetrics');
48+
this.loading = true;
49+
this.error = null;
50+
try {
51+
this.metrics = await getGitHubCopilotMetricsApi();
52+
} catch (error) {
53+
this.error = error as any;
54+
} finally {
55+
this.loading = false;
56+
}
57+
}
58+
},
59+
created() {
60+
console.log('MetricsViewer create');
61+
this.fetchMetrics();
62+
}
63+
});
64+
</script>

0 commit comments

Comments
 (0)