104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
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";
|
||
|
|
|
||
|
|
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>
|