init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,101 @@
+<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>