mohadese namavar
101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
<template>
|
|
<div class="seller-chart">
|
|
<Dropdown v-model="period" :options="options" optionValue="value" optionLabel="label">
|
|
<template #dropdownicon>
|
|
<i class="isax isax-arrow-bottom" />
|
|
</template>
|
|
</Dropdown>
|
|
|
|
<Chart type="pie" :data="chartData" :options="chartOptions" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Chart from 'primevue/chart';
|
|
|
|
const chartData = ref();
|
|
const chartOptions = ref();
|
|
|
|
const setChartData = () => {
|
|
const documentStyle = getComputedStyle(document.body);
|
|
|
|
return {
|
|
labels: ['سود', 'درآمد', 'فروش'],
|
|
datasets: [
|
|
{
|
|
data: [21451000, 20123000, 10000000],
|
|
backgroundColor: ['#FF6384', '#FF9F40', '#4BC0C0'],
|
|
hoverBackgroundColor: ['#FF6384cc', '#FF9F40cc', '#4BC0C0cc']
|
|
}
|
|
]
|
|
};
|
|
};
|
|
|
|
const setChartOptions = () => {
|
|
return {
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
usePointStyle: true,
|
|
color: '#333333',
|
|
pointStyle: 'rect',
|
|
pointStyleWidth: 20,
|
|
font: {
|
|
family: 'vazir',
|
|
size: 14
|
|
}
|
|
|
|
},
|
|
position: 'bottom',
|
|
rtl: true
|
|
},
|
|
tooltip: {
|
|
backgroundColor: '#050B20',
|
|
bodyFont: 'vazir',
|
|
bodyColor: 'white',
|
|
rtl: true,
|
|
displayColors: false,
|
|
callbacks: {
|
|
title: () => null
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
const { t } = inject('service')
|
|
const options = reactive([
|
|
{ label: t('thisWeek'), value: 'weekly' }
|
|
])
|
|
const period = ref('weekly')
|
|
|
|
onMounted(() => {
|
|
chartData.value = setChartData();
|
|
chartOptions.value = setChartOptions();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.seller-chart {
|
|
@apply w-[21.4rem] h-[25.4rem] lg:w-[18.3rem] lg:h-[22.8rem] rounded-[0.6rem] border-2 border-[#E5E5E5] p-3;
|
|
@apply flex flex-col gap-[1.1rem] max-xl:hidden lg:hidden xl:flex;
|
|
|
|
.p-dropdown {
|
|
@apply w-[5.6rem] h-[2.4rem] lg:w-[6.5rem] lg:h-[2.6rem] bg-[#F2F2F2] rounded-[0.6rem] text-[#5D5D5D] border-none;
|
|
|
|
.p-dropdown-trigger {
|
|
@apply w-max translate-x-2;
|
|
|
|
i {
|
|
@apply text-base lg:text-lg;
|
|
}
|
|
}
|
|
|
|
|
|
span {
|
|
@apply p-3 h-max w-max pl-0 font-vazir text-xs lg:text-sm #{!important};
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |