File size: 2,186 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <template>
<div class="stat-card">
<div :class="['stat-icon', iconClass]">
<component v-if="icon" :is="icon" class="h-6 w-6" aria-hidden="true" />
</div>
<div class="min-w-0 flex-1">
<p class="stat-label truncate">{{ title }}</p>
<div class="mt-1 flex items-baseline gap-2">
<p class="stat-value" :title="String(formattedValue)">{{ formattedValue }}</p>
<span v-if="change !== undefined" :class="['stat-trend', trendClass]">
<Icon
v-if="changeType !== 'neutral'"
name="arrowUp"
size="xs"
:class="changeType === 'down' && 'rotate-180'"
/>
{{ formattedChange }}
</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { Component } from 'vue'
import Icon from '@/components/icons/Icon.vue'
type ChangeType = 'up' | 'down' | 'neutral'
type IconVariant = 'primary' | 'success' | 'warning' | 'danger'
interface Props {
title: string
value: number | string
icon?: Component
iconVariant?: IconVariant
change?: number
changeType?: ChangeType
formatValue?: (value: number | string) => string
}
const props = withDefaults(defineProps<Props>(), {
changeType: 'neutral',
iconVariant: 'primary'
})
const formattedValue = computed(() => {
if (props.formatValue) {
return props.formatValue(props.value)
}
if (typeof props.value === 'number') {
return props.value.toLocaleString()
}
return props.value
})
const formattedChange = computed(() => {
if (props.change === undefined) return ''
const absChange = Math.abs(props.change)
return `${absChange}%`
})
const iconClass = computed(() => {
const classes: Record<IconVariant, string> = {
primary: 'stat-icon-primary',
success: 'stat-icon-success',
warning: 'stat-icon-warning',
danger: 'stat-icon-danger'
}
return classes[props.iconVariant]
})
const trendClass = computed(() => {
const classes: Record<ChangeType, string> = {
up: 'stat-trend-up',
down: 'stat-trend-down',
neutral: 'text-gray-500 dark:text-dark-400'
}
return classes[props.changeType]
})
</script>
|