Skip to content

Commit 1a5756a

Browse files
abhinavxdabhinavxd
committed
adjust font sizes for metrics in OverviewCard and OverviewView
1 parent 7bbd1bf commit 1a5756a

File tree

2 files changed

+76
-28
lines changed

2 files changed

+76
-28
lines changed

‎frontend/src/features/reports/OverviewCard.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ const gridClass = computed(() => {
4545
4646
const valueClass = computed(() => {
4747
const sizes = {
48-
default: 'text-3xl font-bold',
49-
large: 'text-4xl font-bold tracking-tight'
48+
default: 'text-2xl font-bold',
49+
large: 'text-3xl font-bold tracking-tight'
5050
}
5151
return sizes[props.size] || sizes.default
5252
})

‎frontend/src/views/reports/OverviewView.vue‎

Lines changed: 74 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@
4747
<span class="metric-label">{{ $t('report.csat.responseRate') }}</span>
4848
</div>
4949
<div class="metric-item">
50-
<span class="metric-value">{{ formatCompactNumber(csatData.total_responses || 0) }}</span>
50+
<span class="metric-value">{{
51+
formatCompactNumber(csatData.total_responses || 0)
52+
}}</span>
5153
<span class="metric-label">{{ $t('report.csat.responses') }}</span>
5254
</div>
5355
</div>
@@ -56,24 +58,34 @@
5658
<!-- Message Volume Card -->
5759
<div class="flex-1 box p-5">
5860
<div class="flex justify-between items-center mb-4">
59-
<p class="card-title">{{ $t('report.messages.cardTitle', { days: messageVolumeDays }) }}</p>
61+
<p class="card-title">
62+
{{ $t('report.messages.cardTitle', { days: messageVolumeDays }) }}
63+
</p>
6064
<DateFilter @filter-change="handleMessageVolumeFilterChange" :label="''" />
6165
</div>
6266
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
6367
<div class="metric-item">
64-
<span class="metric-value">{{ formatCompactNumber(messageVolumeData.total_messages || 0) }}</span>
68+
<span class="metric-value">{{
69+
formatCompactNumber(messageVolumeData.total_messages || 0)
70+
}}</span>
6571
<span class="metric-label">{{ $t('report.messages.total') }}</span>
6672
</div>
6773
<div class="metric-item">
68-
<span class="metric-value">{{ formatCompactNumber(messageVolumeData.incoming_messages || 0) }}</span>
74+
<span class="metric-value">{{
75+
formatCompactNumber(messageVolumeData.incoming_messages || 0)
76+
}}</span>
6977
<span class="metric-label">{{ $t('report.messages.incoming') }}</span>
7078
</div>
7179
<div class="metric-item">
72-
<span class="metric-value">{{ formatCompactNumber(messageVolumeData.outgoing_messages || 0) }}</span>
80+
<span class="metric-value">{{
81+
formatCompactNumber(messageVolumeData.outgoing_messages || 0)
82+
}}</span>
7383
<span class="metric-label">{{ $t('report.messages.outgoing') }}</span>
7484
</div>
7585
<div class="metric-item">
76-
<span class="metric-value">{{ messageVolumeData.messages_per_conversation || 0 }}</span>
86+
<span class="metric-value">{{
87+
messageVolumeData.messages_per_conversation || 0
88+
}}</span>
7789
<span class="metric-label">{{ $t('report.messages.perConversation') }}</span>
7890
</div>
7991
</div>
@@ -92,21 +104,29 @@
92104
<div class="space-y-4">
93105
<p class="section-title">{{ $t('report.sla.firstResponse') }}</p>
94106
<div class="metric-item">
95-
<span class="metric-value-xl text-green-600">{{ slaCounts.first_response_compliance_percent || 0 }}%</span>
107+
<span class="metric-value text-green-600"
108+
>{{ slaCounts.first_response_compliance_percent || 0 }}%</span
109+
>
96110
<span class="metric-label">{{ $t('report.sla.compliance') }}</span>
97111
</div>
98112
<div class="grid grid-cols-2 gap-4 text-center pt-2">
99113
<div>
100-
<span class="text-2xl font-semibold text-green-600">{{ slaCounts.first_response_met_count || 0 }}</span>
114+
<span class="text-2xl font-semibold text-green-600">{{
115+
slaCounts.first_response_met_count || 0
116+
}}</span>
101117
<p class="metric-label">{{ $t('report.sla.met') }}</p>
102118
</div>
103119
<div>
104-
<span class="text-2xl font-semibold text-red-600">{{ slaCounts.first_response_breached_count || 0 }}</span>
120+
<span class="text-2xl font-semibold text-red-600">{{
121+
slaCounts.first_response_breached_count || 0
122+
}}</span>
105123
<p class="metric-label">{{ $t('report.sla.breached') }}</p>
106124
</div>
107125
</div>
108126
<div class="text-center pt-2">
109-
<span class="text-lg font-medium">{{ formattedSlaCounts.avg_first_response_time_sec }}</span>
127+
<span class="text-lg font-medium">{{
128+
formattedSlaCounts.avg_first_response_time_sec
129+
}}</span>
110130
<p class="text-xs text-muted-foreground">{{ $t('report.sla.avgFirstResp') }}</p>
111131
</div>
112132
</div>
@@ -115,21 +135,29 @@
115135
<div class="space-y-4 border-l border-r px-8">
116136
<p class="section-title">{{ $t('report.sla.nextResponse') }}</p>
117137
<div class="metric-item">
118-
<span class="metric-value-xl text-green-600">{{ slaCounts.next_response_compliance_percent || 0 }}%</span>
138+
<span class="metric-value text-green-600"
139+
>{{ slaCounts.next_response_compliance_percent || 0 }}%</span
140+
>
119141
<span class="metric-label">{{ $t('report.sla.compliance') }}</span>
120142
</div>
121143
<div class="grid grid-cols-2 gap-4 text-center pt-2">
122144
<div>
123-
<span class="text-2xl font-semibold text-green-600">{{ slaCounts.next_response_met_count || 0 }}</span>
145+
<span class="text-2xl font-semibold text-green-600">{{
146+
slaCounts.next_response_met_count || 0
147+
}}</span>
124148
<p class="metric-label">{{ $t('report.sla.met') }}</p>
125149
</div>
126150
<div>
127-
<span class="text-2xl font-semibold text-red-600">{{ slaCounts.next_response_breached_count || 0 }}</span>
151+
<span class="text-2xl font-semibold text-red-600">{{
152+
slaCounts.next_response_breached_count || 0
153+
}}</span>
128154
<p class="metric-label">{{ $t('report.sla.breached') }}</p>
129155
</div>
130156
</div>
131157
<div class="text-center pt-2">
132-
<span class="text-lg font-medium">{{ formattedSlaCounts.avg_next_response_time_sec }}</span>
158+
<span class="text-lg font-medium">{{
159+
formattedSlaCounts.avg_next_response_time_sec
160+
}}</span>
133161
<p class="text-xs text-muted-foreground">{{ $t('report.sla.avgNextResp') }}</p>
134162
</div>
135163
</div>
@@ -138,21 +166,29 @@
138166
<div class="space-y-4">
139167
<p class="section-title">{{ $t('report.sla.resolution') }}</p>
140168
<div class="metric-item">
141-
<span class="metric-value-xl text-green-600">{{ slaCounts.resolution_compliance_percent || 0 }}%</span>
169+
<span class="metric-value text-green-600"
170+
>{{ slaCounts.resolution_compliance_percent || 0 }}%</span
171+
>
142172
<span class="metric-label">{{ $t('report.sla.compliance') }}</span>
143173
</div>
144174
<div class="grid grid-cols-2 gap-4 text-center pt-2">
145175
<div>
146-
<span class="text-2xl font-semibold text-green-600">{{ slaCounts.resolution_met_count || 0 }}</span>
176+
<span class="text-2xl font-semibold text-green-600">{{
177+
slaCounts.resolution_met_count || 0
178+
}}</span>
147179
<p class="metric-label">{{ $t('report.sla.met') }}</p>
148180
</div>
149181
<div>
150-
<span class="text-2xl font-semibold text-red-600">{{ slaCounts.resolution_breached_count || 0 }}</span>
182+
<span class="text-2xl font-semibold text-red-600">{{
183+
slaCounts.resolution_breached_count || 0
184+
}}</span>
151185
<p class="metric-label">{{ $t('report.sla.breached') }}</p>
152186
</div>
153187
</div>
154188
<div class="text-center pt-2">
155-
<span class="text-lg font-medium">{{ formattedSlaCounts.avg_resolution_time_sec }}</span>
189+
<span class="text-lg font-medium">{{
190+
formattedSlaCounts.avg_resolution_time_sec
191+
}}</span>
156192
<p class="text-xs text-muted-foreground">{{ $t('report.sla.avgResolution') }}</p>
157193
</div>
158194
</div>
@@ -162,17 +198,23 @@
162198
<!-- Row 4: Tag Distribution -->
163199
<div class="w-full rounded box p-5">
164200
<div class="flex justify-between items-center mb-4">
165-
<p class="card-title">{{ $t('report.tags.cardTitle', { days: tagDistributionDays }) }}</p>
201+
<p class="card-title">
202+
{{ $t('report.tags.cardTitle', { days: tagDistributionDays }) }}
203+
</p>
166204
<DateFilter @filter-change="handleTagDistributionFilterChange" :label="''" />
167205
</div>
168206

169207
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
170208
<!-- Tagged percentage metric -->
171209
<div class="metric-item justify-center p-4">
172-
<span class="metric-value-xl">{{ tagDistributionData.tagged_percentage || 0 }}%</span>
210+
<span class="metric-value">{{ tagDistributionData.tagged_percentage || 0 }}%</span>
173211
<span class="metric-label mt-2">{{ $t('report.tags.tagged') }}</span>
174212
<span class="text-sm text-muted-foreground mt-1">
175-
{{ tagDistributionData.tagged_conversations || 0 }} / {{ (tagDistributionData.tagged_conversations || 0) + (tagDistributionData.untagged_conversations || 0) }}
213+
{{ tagDistributionData.tagged_conversations || 0 }} /
214+
{{
215+
(tagDistributionData.tagged_conversations || 0) +
216+
(tagDistributionData.untagged_conversations || 0)
217+
}}
176218
</span>
177219
</div>
178220

@@ -188,7 +230,11 @@
188230
<span class="text-sm font-semibold">{{ formatCompactNumber(tag.count) }}</span>
189231
</div>
190232
<p v-if="!tagDistributionData.top_tags?.length" class="text-sm text-muted-foreground">
191-
No tags found
233+
{{
234+
$t('globals.messages.noResults', {
235+
item: $t('globals.terms.tags').toLowerCase()
236+
})
237+
}}
192238
</p>
193239
</div>
194240
</div>
@@ -292,7 +338,9 @@ const formatPercent = (value) => {
292338
293339
const formatCompactNumber = (value) => {
294340
if (!value || value < 1000) return value
295-
return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(value)
341+
return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(
342+
value
343+
)
296344
}
297345
298346
const formattedSlaCounts = computed(() => ({
@@ -517,11 +565,11 @@ onUnmounted(() => {
517565

518566
<style scoped>
519567
.metric-value {
520-
@apply text-4xl font-bold tracking-tight;
568+
@apply text-3xl font-bold tracking-tight;
521569
}
522570
523-
.metric-value-xl {
524-
@apply text-5xl font-bold tracking-tight;
571+
.metric-value {
572+
@apply text-3xl font-bold tracking-tight;
525573
}
526574
527575
.metric-label {

0 commit comments

Comments
 (0)