chart factored out to shared component

src/components/ChartBlock.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { ref, watch } from 'vue'
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  TimeScale,
+  LinearScale,
+} from 'chart.js'
+import { Line } from 'vue-chartjs'
+import 'chartjs-adapter-date-fns'
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  PointElement,
+  CategoryScale,
+  TimeScale,
+  LinearScale,
+)
+
+const props = defineProps({
+  chartsData: {
+    type: Object,
+    required: true,
+  },
+})
+
+const originColors = {
+  surugaya: '#FF4560',
+  mandarake: '#775DD0',
+}
+
+const chartData = ref({
+  datasets: [],
+})
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: false,
+  plugins: {
+    legend: { display: true },
+    tooltip: {
+      mode: 'index',
+      intersect: false,
+      callbacks: {
+        title: (context) => {
+          const date = new Date(context[0].parsed.x)
+          return date.toLocaleString('ru-RU', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+          })
+        },
+      },
+    },
+  },
+  scales: {
+    x: {
+      type: 'time',
+      time: {
+        tooltipFormat: 'dd.MM.yyyy HH:mm',
+        unit: 'day',
+        displayFormats: { day: 'dd MMM' },
+      },
+      title: { display: true, text: 'Date' },
+    },
+    y: {
+      title: { display: true, text: 'Price' },
+      ticks: { precision: 0 },
+    },
+  },
+  elements: {
+    line: { borderWidth: 2, tension: 0, spanGaps: true },
+    point: { radius: 4, hoverRadius: 6 },
+  },
+  interaction: {
+    mode: 'nearest',
+    axis: 'x',
+    intersect: false,
+  },
+}
+
+function transformToChartJSSeries(payload) {
+  const datasets = []
+  for (const origin of payload.origins) {
+    if (!origin.Prices || origin.Prices.length === 0) continue
+
+    const data = origin.Prices.filter((p) => p.value != null)
+      .map((p) => {
+        let y = p.value
+        if (typeof y === 'string') {
+          y = parseFloat(y)
+        }
+        const x =
+          typeof p.created_at === 'number' ? p.created_at * 1000 : new Date(p.created_at).getTime()
+
+        return {
+          x,
+          y: typeof y === 'number' && !isNaN(y) ? y : null,
+        }
+      })
+      .filter((p) => p.y !== null)
+      .sort((a, b) => a.x - b.x)
+
+    if (data.length === 0) continue
+
+    const color = originColors[origin.origin] || '#000000'
+
+    datasets.push({
+      label: origin.origin,
+      data,
+      borderColor: color,
+      backgroundColor: color + '20', // прозрачность
+      fill: false,
+      pointRadius: 4,
+      pointHoverRadius: 6,
+      type: 'line',
+    })
+  }
+  return datasets
+}
+
+watch(
+  () => props.chartsData,
+  (newData) => {
+    if (newData?.origins) {
+      const datasets = transformToChartJSSeries(newData)
+      chartData.value = { datasets }
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <Line :data="chartData" :options="chartOptions" style="height: 100%; width: 100%" />
+</template>
+
+<style scoped>
+.charts-card {
+  min-width: 80%;
+}
+</style>

src/views/ChartsView/ChartsCard.vue

@@ -1,151 +1,18 @@
 <script setup>
-import { ref, watch } from 'vue'
+import ChartBlock from '@/components/ChartBlock.vue'
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  PointElement,
-  CategoryScale,
-  TimeScale,
-  LinearScale
-} from 'chart.js'
-import { Line } from 'vue-chartjs'
-import 'chartjs-adapter-date-fns'
 
-ChartJS.register(
+defineProps({
-  Title, Tooltip, Legend, LineElement, PointElement,
-  CategoryScale, TimeScale, LinearScale
-)
-
-const props = defineProps({
   chartsData: {
     type: Object,
     required: true
   }
 })
-
-const originColors = {
-  surugaya: '#FF4560',
-  mandarake: '#775DD0'
-}
-
-const chartData = ref({
-  datasets: []
-})
-
-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  animation: false,
-  plugins: {
-    legend: { display: true },
-    tooltip: {
-      mode: 'index',
-      intersect: false,
-      callbacks: {
-        title: (context) => {
-          const date = new Date(context[0].parsed.x)
-          return date.toLocaleString('ru-RU', {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit'
-          })
-        }
-      }
-    }
-  },
-  scales: {
-    x: {
-      type: 'time',
-      time: {
-        tooltipFormat: 'dd.MM.yyyy HH:mm',
-        unit: 'day',
-        displayFormats: { day: 'dd MMM' }
-      },
-      title: { display: true, text: 'Date' }
-    },
-    y: {
-      title: { display: true, text: 'Price' },
-      ticks: { precision: 0 }
-    }
-  },
-  elements: {
-    line: { borderWidth: 2, tension: 0, spanGaps: true },
-    point: { radius: 4, hoverRadius: 6 }
-  },
-  interaction: {
-    mode: 'nearest',
-    axis: 'x',
-    intersect: false
-  }
-}
-
-function transformToChartJSSeries(payload) {
-  const datasets = []
-  for (const origin of payload.origins) {
-    if (!origin.Prices || origin.Prices.length === 0) continue
-
-    const data = origin.Prices
-      .filter(p => p.value != null)
-      .map(p => {
-        let y = p.value
-        if (typeof y === 'string') {
-          y = parseFloat(y)
-        }
-        const x = typeof p.created_at === 'number'
-          ? p.created_at * 1000
-          : new Date(p.created_at).getTime()
-
-        return {
-          x,
-          y: typeof y === 'number' && !isNaN(y) ? y : null
-        }
-      })
-      .filter(p => p.y !== null)
-      .sort((a, b) => a.x - b.x)
-
-    if (data.length === 0) continue
-
-    const color = originColors[origin.origin] || '#000000'
-
-    datasets.push({
-      label: origin.origin,
-      data,
-      borderColor: color,
-      backgroundColor: color + '20', // прозрачность
-      fill: false,
-      pointRadius: 4,
-      pointHoverRadius: 6,
-      type: 'line'
-    })
-  }
-  return datasets
-}
-
-watch(
-  () => props.chartsData,
-  (newData) => {
-    if (newData?.origins) {
-      const datasets = transformToChartJSSeries(newData)
-      chartData.value = { datasets }
-    }
-  },
-  { immediate: true }
-)
 </script>
 
 <template>
   <n-card :title="chartsData.name" class="charts-card" style="--n-padding-bottom: 5px">
     <div style="height: 400px; position: relative">
-      <Line
+      <ChartBlock :charts-data="chartsData" />
-        :data="chartData"
-        :options="chartOptions"
-        style="height: 100%; width: 100%"
-      />
     </div>
     <p class="micro-uuid text-center">{{ chartsData.merch_uuid }}</p>
   </n-card>