79 lines
2.0 KiB
Vue
79 lines
2.0 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import Chart from 'primevue/chart';
|
|
import { convertEnglishToPersian } from '../../utils/numberUtils';
|
|
|
|
const chartData = ref({
|
|
labels: ['۱۴۰۴/۰۱/۰۱', '۱۴۰۴/۰۱/۰۲', '۱۴۰۴/۰۱/۰۳', '۱۴۰۴/۰۱/۰۴', '۱۴۰۴/۰۱/۰۵', '۱۴۰۴/۰۱/۰۶', '۱۴۰۴/۰۱/۰۷'],
|
|
datasets: [
|
|
{
|
|
label: 'فعالیتهای روزانه',
|
|
backgroundColor: 'rgba(87, 105, 137, 0.2)',
|
|
borderColor: '#576989',
|
|
borderWidth: 2,
|
|
fill: true,
|
|
tension: 0,
|
|
data: [65, 59, 80, 81, 56, 55, 40]
|
|
}
|
|
]
|
|
});
|
|
|
|
const chartOptions = ref({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
font: {
|
|
family: 'yekanBakh, sans-serif',
|
|
size: 12
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
titleFont: {
|
|
family: 'yekanBakh, sans-serif'
|
|
},
|
|
bodyFont: {
|
|
family: 'yekanBakh, sans-serif'
|
|
},
|
|
callbacks: {
|
|
label: function(context) {
|
|
return `${context.dataset.label}: ${context.parsed.y} مورد`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
font: {
|
|
family: 'yekanBakh, sans-serif',
|
|
size: 11
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
position: 'right',
|
|
ticks: {
|
|
stepSize: 10,
|
|
maxTicks: 8,
|
|
font: {
|
|
family: 'yekanBakh, sans-serif',
|
|
size: 11
|
|
},
|
|
callback: function(value) {
|
|
return convertEnglishToPersian(value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Chart type="line" :data="chartData" :options="chartOptions" class="h-[15rem]" />
|
|
</div>
|
|
</template>
|