2b6cccdead
All checks were successful
Build Docker Image / build (push) Successful in 5m8s
- Remove all Storybook files and configuration - Add type declarations for @vueuse/core, @formkit/core, vue3-apexcharts - Fix TypeScript configuration (typeRoots, include paths) - Fix Sentry config - move settings to plugin - Fix nullable prop assignments with ?? operator - Fix type narrowing issues with explicit type assertions - Fix Card component linkable computed properties - Update codegen with operationResultSuffix - Fix GraphQL operation type definitions
113 lines
2.8 KiB
Vue
113 lines
2.8 KiB
Vue
<template>
|
|
<Card
|
|
padding="md"
|
|
interactive
|
|
class="cursor-pointer overflow-hidden"
|
|
:class="{ 'bg-base-200': selected }"
|
|
@click="$emit('select')"
|
|
>
|
|
<div class="relative min-h-14">
|
|
<!-- Sparkline chart background -->
|
|
<div v-if="priceHistory.length > 1" class="absolute inset-0 opacity-15">
|
|
<ClientOnly>
|
|
<apexchart
|
|
type="area"
|
|
height="56"
|
|
:options="chartOptions"
|
|
:series="chartSeries"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="relative z-10">
|
|
<Text weight="semibold" size="sm" class="mb-1">{{ name }}</Text>
|
|
<div class="flex items-center gap-2">
|
|
<Text v-if="currentPrice" size="sm" class="text-primary font-bold">
|
|
{{ formattedPrice }}
|
|
</Text>
|
|
<span
|
|
v-if="trend !== 0"
|
|
class="text-xs font-medium"
|
|
:class="trend > 0 ? 'text-success' : 'text-error'"
|
|
>
|
|
{{ trend > 0 ? '↑' : '↓' }} {{ Math.abs(trend) }}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
name: string
|
|
currentPrice?: number | null
|
|
currency?: string | null
|
|
priceHistory?: number[]
|
|
selected?: boolean
|
|
}>(), {
|
|
priceHistory: () => [],
|
|
selected: false
|
|
})
|
|
|
|
defineEmits<{
|
|
select: []
|
|
}>()
|
|
|
|
const formattedPrice = computed(() => {
|
|
if (!props.currentPrice) return ''
|
|
const symbol = getCurrencySymbol(props.currency)
|
|
return `${symbol}${props.currentPrice.toLocaleString()}`
|
|
})
|
|
|
|
const getCurrencySymbol = (currency?: string | null) => {
|
|
switch (currency?.toUpperCase()) {
|
|
case 'USD': return '$'
|
|
case 'EUR': return '€'
|
|
case 'RUB': return '₽'
|
|
case 'CNY': return '¥'
|
|
default: return '$'
|
|
}
|
|
}
|
|
|
|
// Calculate trend from price history
|
|
const trend = computed(() => {
|
|
if (props.priceHistory.length < 2) return 0
|
|
const first = props.priceHistory[0]
|
|
const last = props.priceHistory[props.priceHistory.length - 1]
|
|
if (!first || first === 0 || !last) return 0
|
|
return Math.round(((last - first) / first) * 100)
|
|
})
|
|
|
|
// Chart configuration
|
|
const chartOptions = computed(() => ({
|
|
chart: {
|
|
type: 'area',
|
|
sparkline: { enabled: true },
|
|
animations: { enabled: false }
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.1
|
|
}
|
|
},
|
|
colors: [trend.value >= 0 ? '#22c55e' : '#ef4444'],
|
|
tooltip: { enabled: false },
|
|
xaxis: { labels: { show: false } },
|
|
yaxis: { labels: { show: false } }
|
|
}))
|
|
|
|
const chartSeries = computed(() => [{
|
|
name: 'Price',
|
|
data: props.priceHistory.length > 0 ? props.priceHistory : [0]
|
|
}])
|
|
</script>
|