feat: добавить мок-данные графиков цен на карточки продуктов
All checks were successful
Build Docker Image / build (push) Successful in 4m43s
All checks were successful
Build Docker Image / build (push) Successful in 4m43s
This commit is contained in:
59
app/components/catalog/PriceSparkline.vue
Normal file
59
app/components/catalog/PriceSparkline.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="w-20 h-10">
|
||||
<Line :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Line } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
LineElement,
|
||||
PointElement,
|
||||
LinearScale,
|
||||
CategoryScale,
|
||||
Filler
|
||||
} from 'chart.js'
|
||||
|
||||
ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Filler)
|
||||
|
||||
const props = defineProps<{
|
||||
data: number[]
|
||||
}>()
|
||||
|
||||
const isUptrend = computed(() => {
|
||||
if (props.data.length < 2) return true
|
||||
return props.data[props.data.length - 1] >= props.data[0]
|
||||
})
|
||||
|
||||
const lineColor = computed(() => isUptrend.value ? '#22c55e' : '#ef4444')
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: props.data.map((_, i) => i.toString()),
|
||||
datasets: [{
|
||||
data: props.data,
|
||||
borderColor: lineColor.value,
|
||||
backgroundColor: `${lineColor.value}20`,
|
||||
borderWidth: 1.5,
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 0
|
||||
}]
|
||||
}))
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: { enabled: false }
|
||||
},
|
||||
scales: {
|
||||
x: { display: false },
|
||||
y: { display: false }
|
||||
},
|
||||
elements: {
|
||||
line: { borderCapStyle: 'round' as const }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -48,6 +48,7 @@
|
||||
v-for="product in products"
|
||||
:key="product.uuid"
|
||||
:name="product.name"
|
||||
:price-history="getMockPriceHistory(product.uuid)"
|
||||
:selected="selectedProductUuid === product.uuid"
|
||||
@select="selectedProductUuid = product.uuid"
|
||||
/>
|
||||
@@ -97,6 +98,16 @@ const selectedSourceUuid = ref('')
|
||||
const rawSources = ref<any[]>([])
|
||||
const offersData = ref<Map<string, any>>(new Map())
|
||||
|
||||
// Mock price history generator (seeded by uuid for consistent results)
|
||||
const getMockPriceHistory = (uuid: string): number[] => {
|
||||
const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
|
||||
const basePrice = 100 + (seed % 200)
|
||||
return Array.from({ length: 7 }, (_, i) => {
|
||||
const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
|
||||
return Math.round(basePrice + variation)
|
||||
})
|
||||
}
|
||||
|
||||
const hubId = computed(() => route.params.id as string)
|
||||
|
||||
// Selected product name
|
||||
|
||||
Reference in New Issue
Block a user