1405/02/24-Optimization home index.vue

2026-05-14 13:44:43 +03:30
parent e3b4182f6c
commit 1b13aa2a7d
19 changed files with 2143 additions and 1082 deletions
@@ -0,0 +1,104 @@
+<template>
+  <div class="bg-gray-50 w-full flex justify-evenly rounded-lg py-4 mt-4 h-[15rem]">
+    <div class="w-full text-center pt-2">
+      <a-radio-group v-model:value="selectedValue" button-style="solid">
+        <a-radio-button value="DAILY" @click="handleUpdate('DAILY')">24 ساعت اخیر</a-radio-button>
+        <a-radio-button value="WEEKLY" @click="handleUpdate('WEEKLY')">هفته گذشته</a-radio-button>
+        <a-radio-button value="MONTHLY" @click="handleUpdate('MONTHLY')">ماه گذشته</a-radio-button>
+      </a-radio-group>
+      <div id="chart-timeline">
+        <apexchart
+            type="area"
+            height="200"
+            :options="chartOptions"
+            :series="props.priceChartSeries"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useConfigStore } from '@/store/configStore'
+import {usePrice} from "@/utils/usePrice";
+
+const props = defineProps<{
+  priceChartSeries: any[]
+}>()
+
+const emit = defineEmits<{
+  updateData: [timeline: string]
+}>()
+
+const config = useConfigStore()
+const selectedValue = ref('DAILY')
+
+const toPersianNumber = (num: number) => {
+  return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
+}
+
+const chartOptions = computed(() => ({
+  chart: {
+    id: 'نوسانات قیمت',
+    type: 'area',
+    height: 200,
+    toolbar: { show: false },
+    zoom: { autoScaleYaxis: true }
+  },
+  grid: {
+    padding: { top: 0, right: 0, bottom: 0, left: 0 },
+    yaxis: { lines: { show: false } }
+  },
+  stroke: { width: 2 },
+  dataLabels: {
+    enabled: false,
+    // formatter: (val) => toPersianNumber(val),
+    style: {
+      fontFamily: '\'IranSans\', sans-serif'
+    }
+  },
+  yaxis: {
+    tickAmount: 8,
+    show: false,
+    labels: {
+      formatter: (val: number) => toPersianNumber(usePrice(val)),
+      style: { fontSize: '13px', fontFamily: "'IranSans', sans-serif" }
+    }
+  },
+  xaxis: {
+    show: false,
+    type: 'datetime',
+    axisTicks: { show: false },
+    tooltip: { enabled: false },
+    labels: { show: false }
+  },
+  tooltip: {
+    x: {
+      formatter: (value: number) => {
+        const date = new Date(value)
+        return `${date.toLocaleDateString('fa-IR')} - ${date.toLocaleTimeString('fa-IR', {
+          hour: '2-digit',
+          minute: '2-digit'
+        })}`
+      }
+    },
+    formatter: (val: number) => toPersianNumber(usePrice(val)),
+    style: { fontFamily: "'IranSans', sans-serif" }
+  },
+  colors: [config.config.color],
+  fill: {
+    type: 'gradient',
+    gradient: {
+      shadeIntensity: 1,
+      opacityFrom: 0.7,
+      opacityTo: 0.9,
+      stops: [0, 100]
+    }
+  }
+}))
+
+const handleUpdate = (timeline: string) => {
+  emit('updateData', timeline)
+}
+</script>