Skip to content

Commit 9f039dc

Browse files
rr-paras-patelrr-paras-patel
authored
Feat/tooltips for metrics definition (#208)
* Add tooltips to metrics in CopilotChatViewer for better user guidance Enhanced the CopilotChatViewer component by adding tooltips to the cumulative number of turns, cumulative number of acceptances, and total active users sections. Each tooltip provides a brief description of the respective metrics, improving user understanding of the displayed data. * Add tooltips to metrics in MetricsViewer for enhanced user understanding Implemented tooltips for various metrics in the MetricsViewer component, including Acceptance Rate, Total Suggestions Count, and Total Lines Suggested. Each tooltip provides detailed descriptions of the metrics, improving clarity and user guidance for interpreting the displayed data. * Add tooltips to metrics in SeatsAnalysisViewer for improved user clarity Enhanced the SeatsAnalysisViewer component by incorporating tooltips for various metrics, including Total Assigned, Assigned But Never Used, No Activity in the Last 7 days, and No Activity in the Last 30 days. Each tooltip provides detailed descriptions, aiding users in understanding the significance of the displayed metrics.
1 parent bf619b7 commit 9f039dc

File tree

3 files changed

+136
-17
lines changed

3 files changed

+136
-17
lines changed

‎app/components/CopilotChatViewer.vue

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@
44
<v-card-item>
55
<div class="tiles-text">
66
<div class="spacing-25"/>
7-
<div class="text-h6 mb-1">Cumulative Number of Turns</div>
7+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
8+
<template v-slot:activator="{ props }">
9+
<div v-bind="props" class="text-h6 mb-1">Cumulative Number of Turns</div>
10+
</template>
11+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
12+
<span class="text-caption" style="font-size: 10px !important;">This metric represents the total number of turns (interactions) with the Copilot over the past 28 days. A 'turn' includes both user inputs and Copilot's responses.</span>
13+
</v-card>
14+
</v-tooltip>
815
<div class="text-caption">Over the last 28 days</div>
916
<p class="text-h4">{{ cumulativeNumberTurns }}</p>
1017
</div>
@@ -15,7 +22,14 @@
1522
<v-card-item>
1623
<div class="tiles-text">
1724
<div class="spacing-10"/>
18-
<div class="text-h6 mb-1">Cumulative Number of Acceptances</div>
25+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
26+
<template v-slot:activator="{ props }">
27+
<div v-bind="props" class="text-h6 mb-1">Cumulative Number of Acceptances</div>
28+
</template>
29+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
30+
<span class="text-caption" style="font-size: 10px !important;">This metric shows the total number of lines of code suggested by Copilot that have been accepted by users over the past 28 days.</span>
31+
</v-card>
32+
</v-tooltip>
1933
<div class="text-caption">Over the last 28 days</div>
2034
<p class="text-h4">{{ cumulativeNumberAcceptances }}</p>
2135
</div>
@@ -26,10 +40,24 @@
2640
<v-main class="p-1" style="min-height: 300px;">
2741
<v-container style="min-height: 300px;" class="px-4 elevation-2">
2842

29-
<h2>Total Acceptances | Total Turns Count</h2>
43+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
44+
<template v-slot:activator="{ props }">
45+
<h2 v-bind="props" class="mb-1">Total Acceptances | Total Turns Count</h2>
46+
</template>
47+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
48+
<span class="text-caption" style="font-size: 10px !important;">This is a chart that displays the total number of turns and acceptances.</span>
49+
</v-card>
50+
</v-tooltip>
3051
<Line :data="totalNumberAcceptancesAndTurnsChartData" :options="chartOptions" />
3152

32-
<h2>Total Active Copilot Chat Users</h2>
53+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
54+
<template v-slot:activator="{ props }">
55+
<h2 v-bind="props" class="mb-1">Total Active Copilot Chat Users</h2>
56+
</template>
57+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
58+
<span class="text-caption" style="font-size: 10px !important;">A bar chart that illustrates the total number of users who have actively interacted with Copilot over the past 28 days.</span>
59+
</v-card>
60+
</v-tooltip>
3361
<Bar :data="totalActiveCopilotChatUsersChartData" :options="totalActiveChatUsersChartOptions" />
3462

3563
</v-container>

‎app/components/MetricsViewer.vue

Lines changed: 72 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@
77
<v-card-item>
88
<div class="tiles-text">
99
<div class="spacing-25"/>
10-
<div class="text-h6 mb-1">Acceptance Rate (by count)</div>
10+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
11+
<template v-slot:activator="{ props }">
12+
<div v-bind="props" class="text-h6 mb-1">Acceptance Rate (by count)</div>
13+
</template>
14+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
15+
<span class="text-caption" style="font-size: 10px !important;">This metric represents the ratio of accepted suggestions to the total suggestions made by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the number of prompts, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
16+
</v-card>
17+
</v-tooltip>
1118
<div class="text-caption">
1219
Over the last 28 days
1320
</div>
@@ -20,7 +27,14 @@
2027
<v-card-item>
2128
<div class="tiles-text">
2229
<div class="spacing-10"/>
23-
<div class="text-h6 mb-1">Total count of Suggestions (Prompts)</div>
30+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
31+
<template v-slot:activator="{ props }">
32+
<div v-bind="props" class="text-h6 mb-1">Total count of Suggestions (Prompts)</div>
33+
</template>
34+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
35+
<span class="text-caption" style="font-size: 10px !important;">This chart illustrates the total number of code suggestions made by GitHub Copilot. It offers a view of the tool's activity and its engagement with users over time.</span>
36+
</v-card>
37+
</v-tooltip>
2438
<div class="text-caption">
2539
Over the last 28 days
2640
</div>
@@ -33,7 +47,14 @@
3347
<v-card-item>
3448
<div class="spacing-25"/>
3549
<div class="tiles-text">
36-
<div class="text-h6 mb-1">Acceptance Rate (by lines)</div>
50+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
51+
<template v-slot:activator="{ props }">
52+
<div v-bind="props" class="text-h6 mb-1">Acceptance Rate (by lines)</div>
53+
</template>
54+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
55+
<span class="text-caption" style="font-size: 10px !important;">This metric represents the ratio of accepted lines of code to the total lines suggested by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the volume of code, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
56+
</v-card>
57+
</v-tooltip>
3758
<div class="text-caption">
3859
Over the last 28 days
3960
</div>
@@ -46,7 +67,14 @@
4667
<v-card-item>
4768
<div class="tiles-text">
4869
<div class="spacing-10"/>
49-
<div class="text-h6 mb-1">Total Lines of code Suggested</div>
70+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
71+
<template v-slot:activator="{ props }">
72+
<div v-bind="props" class="text-h6 mb-1">Total Lines of code Suggested</div>
73+
</template>
74+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
75+
<span class="text-caption" style="font-size: 10px !important;">Showcases the total number of lines of code suggested by GitHub Copilot. This gives an idea of the volume of code generation and assistance provided.</span>
76+
</v-card>
77+
</v-tooltip>
5078
<div class="text-caption">
5179
Over the last 28 days
5280
</div>
@@ -59,19 +87,54 @@
5987
<v-main class="p-1" style="min-height: 300px;">
6088

6189
<v-container style="min-height: 300px;" class="px-4 elevation-2">
62-
<h2>Acceptance rate by count (%)</h2>
90+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
91+
<template v-slot:activator="{ props }">
92+
<h2 v-bind="props">Acceptance rate by count (%)</h2>
93+
</template>
94+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
95+
<span class="text-caption" style="font-size: 10px !important;">This metric represents the ratio of accepted suggestions to the total suggestions made by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the number of prompts, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
96+
</v-card>
97+
</v-tooltip>
6398
<Bar :data="acceptanceRateByCountChartData" :options="chartOptions" />
6499

65-
<h2>Total Suggestions Count | Total Acceptances Count</h2>
100+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
101+
<template v-slot:activator="{ props }">
102+
<h2 v-bind="props" class="mb-1">Total Suggestions Count | Total Acceptances Count</h2>
103+
</template>
104+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
105+
<span class="text-caption" style="font-size: 10px !important;">This visualization focuses on the total number of suggestions accepted by users.</span>
106+
</v-card>
107+
</v-tooltip>
66108
<Line :data="totalSuggestionsAndAcceptanceChartData" :options="chartOptions" />
67109

68-
<h2>Acceptance rate by lines (%)</h2>
110+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
111+
<template v-slot:activator="{ props }">
112+
<h2 v-bind="props">Acceptance rate by lines (%)</h2>
113+
</template>
114+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
115+
<span class="text-caption" style="font-size: 10px !important;">This metric represents the ratio of accepted lines of code to the total lines suggested by GitHub Copilot. This rate indicates the relevance and usefulness of Copilot's suggestions based on the volume of code, but should be used with caution as developers use Copilot in various ways (research, confirm, verify, etc., not always "inject").</span>
116+
</v-card>
117+
</v-tooltip>
69118
<Bar :data="acceptanceRateByLinesChartData" :options="chartOptions" />
70119

71-
<h2>Total Lines Suggested | Total Lines Accepted</h2>
120+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
121+
<template v-slot:activator="{ props }">
122+
<h2 v-bind="props" class="mb-1">Total Lines Suggested | Total Lines Accepted</h2>
123+
</template>
124+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
125+
<span class="text-caption" style="font-size: 10px !important;">As the name suggests, the total lines of code accepted by users (full acceptances) offering insights into how much of the suggested code is actually being utilized and incorporated into the codebase.</span>
126+
</v-card>
127+
</v-tooltip>
72128
<Line :data="chartData" :options="chartOptions" />
73129

74-
<h2>Total Active Users</h2>
130+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
131+
<template v-slot:activator="{ props }">
132+
<h2 v-bind="props" class="mb-1">Total Active Users</h2>
133+
</template>
134+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
135+
<span class="text-caption" style="font-size: 10px !important;">Represents the number of active users engaging with GitHub Copilot. This helps in understanding the user base growth and adoption rate.</span>
136+
</v-card>
137+
</v-tooltip>
75138
<Bar :data="totalActiveUsersChartData" :options="totalActiveUsersChartOptions" />
76139

77140
</v-container>

‎app/components/SeatsAnalysisViewer.vue

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-4"
66
<v-card-item class="d-flex justify-center align-center">
77
<div class="tiles-text">
88
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
9-
<div class="text-h6 mb-1">Total Assigned </div>
9+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
10+
<template v-slot:activator="{ props }">
11+
<div v-bind="props" class="text-h6 mb-1">Total Assigned </div>
12+
</template>
13+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
14+
<span class="text-caption" style="font-size: 10px !important;">This metric represents the total number of Copilot seats assigned within the current organization/enterprise.</span>
15+
</v-card>
16+
</v-tooltip>
1017
<div class="text-caption">
1118
Currently assigned seats
1219
</div>
@@ -21,7 +28,14 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
2128
<v-card-item class="d-flex justify-center align-center">
2229
<div class="tiles-text">
2330
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
24-
<div class="text-h6 mb-1">Assigned But Never Used</div>
31+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
32+
<template v-slot:activator="{ props }">
33+
<div v-bind="props" class="text-h6 mb-1">Assigned But Never Used</div>
34+
</template>
35+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
36+
<span class="text-caption" style="font-size: 10px !important;">This metric shows seats that were assigned but never used within the current organization/enterprise. The assigned timestamp is also displayed in the chart.</span>
37+
</v-card>
38+
</v-tooltip>
2539
<div class="text-caption">
2640
No show seats
2741
</div>
@@ -33,7 +47,14 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
3347
<v-card-item class="d-flex justify-center align-center">
3448
<div class="tiles-text">
3549
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
36-
<div class="text-h6 mb-1">No Activity in the Last 7 days </div>
50+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
51+
<template v-slot:activator="{ props }">
52+
<div v-bind="props" class="text-h6 mb-1">No Activity in the Last 7 days </div>
53+
</template>
54+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
55+
<span class="text-caption" style="font-size: 10px !important;">Never used seats or seats used, but with no activity in the past 7 days.</span>
56+
</v-card>
57+
</v-tooltip>
3758
<div class="text-caption">
3859
No use in the last 7 days
3960
</div>
@@ -45,7 +66,14 @@ elevation="4" color="white" variant="elevated" class="mx-auto my-3"
4566
<v-card-item class="d-flex justify-center align-center">
4667
<div class="tiles-text">
4768
<div class="text-overline mb-1" style="visibility: hidden;">filler</div>
48-
<div class="text-h6 mb-1">No Activity in the Last 30 days </div>
69+
<v-tooltip location="bottom start" open-on-hover open-delay="200" close-delay="200">
70+
<template v-slot:activator="{ props }">
71+
<div v-bind="props" class="text-h6 mb-1">No Activity in the Last 30 days </div>
72+
</template>
73+
<v-card class="pa-2" style="background-color: #f0f0f0; max-width: 350px;">
74+
<span class="text-caption" style="font-size: 10px !important;">This metric represents seats with no activity in the last 30 days, including those never used.</span>
75+
</v-card>
76+
</v-tooltip>
4977
<div class="text-caption">
5078
No use in the last 30 days
5179
</div>

0 commit comments

Comments
 (0)