feat: добавить мок-данные графиков цен на карточки продуктов

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>