luminic-space/app-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve percentage change display with dynamic colors and width adjustments.

Browse Source
This commit is contained in:
xds
2025-12-11 22:51:38 +03:00
parent 4e879efb94
commit e6fc0dcf15
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/dashboard/DashboardCharts.vue
View File

@@ -199,14 +199,15 @@ const weeklyChartOptions = computed(() => {
</div>
<div
class="flex items-center text-sm gap-1 text-surface-500 dark:text-surface-400 w-10 text-right">
class="flex items-center text-sm gap-1 text-surface-500 dark:text-surface-400 w-10 text-right !w-full">
<div class="flex items-center gap-0">
<span>{{ category.percentage }}</span>
<span class="ml-0.5">%</span>
</div>
<span class="text-xs text-surface-500 dark:text-surface-400 ml-1">({{
category.changeDiffPercentage > 0 ? '+' : category.changeDiffPercentage < 0 ? '-' : '' +
Math.round(category.changeDiffPercentage) }})</span>
<span class="text-xs ml-1 !w-fit"
:class="category.changeDiffPercentage > 0 ? 'text-red-500' : 'text-green-500'">({{
(category.changeDiffPercentage > 0 ? '+' : '') + Math.round(category.changeDiffPercentage)
}}%)</span>
</div>
</div>