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"
|
v-for="product in products"
|
||||||
:key="product.uuid"
|
:key="product.uuid"
|
||||||
:name="product.name"
|
:name="product.name"
|
||||||
|
:price-history="getMockPriceHistory(product.uuid)"
|
||||||
:selected="selectedProductUuid === product.uuid"
|
:selected="selectedProductUuid === product.uuid"
|
||||||
@select="selectedProductUuid = product.uuid"
|
@select="selectedProductUuid = product.uuid"
|
||||||
/>
|
/>
|
||||||
@@ -97,6 +98,16 @@ const selectedSourceUuid = ref('')
|
|||||||
const rawSources = ref<any[]>([])
|
const rawSources = ref<any[]>([])
|
||||||
const offersData = ref<Map<string, any>>(new Map())
|
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)
|
const hubId = computed(() => route.params.id as string)
|
||||||
|
|
||||||
// Selected product name
|
// Selected product name
|
||||||
|
|||||||
Reference in New Issue
Block a user