From 25030f0350d065e1d438e88e3d9abf43bf09a22a Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Thu, 15 Jan 2026 23:50:52 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=BC=D0=BE=D0=BA-=D0=B4=D0=B0=D0=BD=D0=BD?=
 =?UTF-8?q?=D1=8B=D0=B5=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=BE=D0=B2?=
 =?UTF-8?q?=20=D1=86=D0=B5=D0=BD=20=D0=BD=D0=B0=20=D0=BA=D0=B0=D1=80=D1=82?=
 =?UTF-8?q?=D0=BE=D1=87=D0=BA=D0=B8=20=D0=BF=D1=80=D0=BE=D0=B4=D1=83=D0=BA?=
 =?UTF-8?q?=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/catalog/PriceSparkline.vue | 59 +++++++++++++++++++++++
 app/pages/catalog/hubs/[id].vue           | 11 +++++
 2 files changed, 70 insertions(+)
 create mode 100644 app/components/catalog/PriceSparkline.vue

diff --git a/app/components/catalog/PriceSparkline.vue b/app/components/catalog/PriceSparkline.vue
new file mode 100644
index 0000000..5542b92
--- /dev/null
+++ b/app/components/catalog/PriceSparkline.vue
@@ -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>
diff --git a/app/pages/catalog/hubs/[id].vue b/app/pages/catalog/hubs/[id].vue
index ad77ccd..234dc7e 100644
--- a/app/pages/catalog/hubs/[id].vue
+++ b/app/pages/catalog/hubs/[id].vue
@@ -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