boursecu_user/src/views/base/home/components/PriceChart.vue

<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";
import {getProjectFontFamily} from "@/utils/config";

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(() => {
  const fontFamily = getProjectFontFamily()

  return {
  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
    }
  },
  yaxis: {
    tickAmount: 8,
    show: false,
    labels: {
      formatter: (val: number) => toPersianNumber(usePrice(val, true, 'ه.ریال')),
      style: { fontSize: '13px', fontFamily }
    }
  },
  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, true, 'ه.ریال')),
    style: { fontFamily }
  },
  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>