mohadese namavar
106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<template>
|
|
<div class="product-chart">
|
|
<div>
|
|
<h2>{{ $t('productPriceChangesChart') }}</h2>
|
|
<Button v-bind="btns.close.props" @click="dialog.close()" />
|
|
</div>
|
|
<div>
|
|
<p>{{ $t('priceFilterFrom') }}</p>
|
|
<AppCalendar v-model="date.from" class="isax isax-note5" />
|
|
<p>{{ $t('until') }}</p>
|
|
<AppCalendar v-model="date.to" class="isax isax-note5" />
|
|
</div>
|
|
<Chart :data="chartData" :options="chartOptions" type="line" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Chart from 'primevue/chart';
|
|
|
|
const { meta } = useRoute()
|
|
const { btns, chart } = meta.init
|
|
|
|
const dialog = inject('dialogRef')
|
|
const { pastPrices } = dialog.value.data
|
|
|
|
const date = reactive({})
|
|
const chartData = ref()
|
|
const chartOptions = ref()
|
|
|
|
onBeforeMount(() => {
|
|
try {
|
|
date.from = new Date(pastPrices[0].date).toLocaleDateString('fa')
|
|
date.to = new Date(pastPrices[pastPrices.length - 1].date).toLocaleDateString('fa')
|
|
} catch (error) { }
|
|
})
|
|
|
|
onMounted(() => {
|
|
chartData.value = chart.setChartData(pastPrices, date)
|
|
chartOptions.value = chart.setChartOptions()
|
|
})
|
|
|
|
watch(
|
|
date,
|
|
() => chartData.value = chart.setChartData(pastPrices, date),
|
|
{ deep: true }
|
|
)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-chart {
|
|
@apply w-full lg:w-[64rem] lg:h-[43.1rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col lg:pb-[4.9rem];
|
|
|
|
&>div:nth-of-type(1) {
|
|
@apply flex justify-between items-center gap-3 p-6 lg:p-8 pb-6 lg:border-b-2 border-[#E5E5E5];
|
|
|
|
h2 {
|
|
@apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
|
|
}
|
|
|
|
button {
|
|
@apply -mx-4 -my-3;
|
|
|
|
.p-button-icon {
|
|
@apply text-[1.4em] lg:text-3xl text-[#191919];
|
|
}
|
|
}
|
|
}
|
|
|
|
&>div:nth-of-type(2) {
|
|
@apply flex flex-wrap items-center gap-[1.1rem] p-6 lg:gap-6 lg:px-8 lg:py-10;
|
|
|
|
&>p {
|
|
@apply text-[#333333] first:w-full lg:first:w-max text-sm lg:text-lg font-medium font-vazir;
|
|
}
|
|
|
|
.p-calendar {
|
|
@apply flex items-center gap-3 p-3 font-['iconsax'] #{!important};
|
|
@apply w-32 h-11 lg:w-[10.4rem] lg:h-12 rounded-lg border-2 border-[#E5E5E5];
|
|
|
|
&::before {
|
|
@apply text-xl lg:text-2xl order-1;
|
|
}
|
|
|
|
&::after {
|
|
@apply content-['_'] w-[0.1rem] h-4 bg-[#E5E5E5] order-2;
|
|
}
|
|
|
|
input {
|
|
@apply border-none text-left bg-transparent shadow-none w-[6rem] order-3 p-0;
|
|
@apply text-zinc-800 text-xs lg:text-lg font-normal font-vazir;
|
|
}
|
|
}
|
|
}
|
|
|
|
.p-chart {
|
|
@apply w-[22.9rem] h-[21.2rem] lg:w-[59.3rem] lg:h-[24.3rem];
|
|
}
|
|
}
|
|
|
|
body:has(.product-chart) {
|
|
.p-datepicker {
|
|
@apply lg:-translate-x-28;
|
|
}
|
|
}
|
|
</style>
|