From edb9ffed41fc1f8f166cf59f921425e119adbf8d Mon Sep 17 00:00:00 2001
From: Vladimir Voronin <voroninvyu@gmail.com>
Date: Thu, 23 Jan 2025 15:11:05 +0300
Subject: [PATCH] +analytics update

---
 src/components/analytics/AnalyticsView.vue | 32 +++++++++++++++-------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/analytics/AnalyticsView.vue b/src/components/analytics/AnalyticsView.vue
index a75fe56..8f0e760 100644
--- a/src/components/analytics/AnalyticsView.vue
+++ b/src/components/analytics/AnalyticsView.vue
@@ -28,6 +28,13 @@ const tableColumns = ref([]);
 const chartData = ref(null)
 const selectedCategory = ref()
 const formatter = ref(new Intl.NumberFormat('ru-RU', {style: 'currency', currency: 'RUB', minimumFractionDigits: 0}))
+const isChartOpen = ref(false)
+
+const closeChart = () => {
+  setTimeout(() => {
+    isChartOpen.value = false;
+  }, 500)
+}
 
 
 const preparedChartData = computed(() => {
@@ -191,22 +198,26 @@ onMounted(async () => {
   <LoadingView v-if="loading"/>
   <div v-else class="p-4 bg-gray-100 h-full flex flex-col gap-4 items-center justify-items-center ">
 
-    <Accordion value="0" class=" !w-5/6 !items-center !justify-items-start">
+    <Accordion value="0" class=" !w-5/6 !items-center !justify-items-start" @tab-open="isChartOpen=true"
+               @tab-close="closeChart">
       <AccordionPanel value="1">
         <AccordionHeader>График</AccordionHeader>
         <AccordionContent class="items-center justify-items-center ">
 
-<!--          <Select v-model="selectedCategory" :options="categoriesCatalog" optionLabel="name"-->
-<!--                  placeholder="Выберите категории"-->
-<!--                  :maxSelectedLabels="3" class="w-full md:w-80"/>-->
-          <Listbox v-model="selectedCategory" :options="categoriesCatalog" filter optionLabel="name" class="!w-fit !h-5/6 md:w-56">
+          <!--          <Select v-model="selectedCategory" :options="categoriesCatalog" optionLabel="name"-->
+          <!--                  placeholder="Выберите категории"-->
+          <!--                  :maxSelectedLabels="3" class="w-full md:w-80"/>-->
+          <div v-if="isChartOpen" class="flex flex-row items-start justify-items-start w-full">
+            <Listbox v-model="selectedCategory" :options="categoriesCatalog" filter optionLabel="name"
+                     class="!w-fit !h-5/6 md:w-56">
 
-            <template #option="slotProps">
-              <div>{{ slotProps.option.icon }} {{ slotProps.option.name }}</div>
-            </template>
+              <template #option="slotProps">
+                <div>{{ slotProps.option.icon }} {{ slotProps.option.name }}</div>
+              </template>
 
-          </Listbox>
-          <Chart type="line" :data="preparedChartData" :options="chartOptions" class="!w-5/6 !h-full"/>
+            </Listbox>
+            <Chart type="line" :data="preparedChartData" :options="chartOptions" class="!w-5/6 !h-full"/>
+          </div>
         </AccordionContent>
       </AccordionPanel>
     </Accordion>
@@ -244,6 +255,7 @@ onMounted(async () => {
   align-content: center;
   justify-content: center;
 }
+
 .p-listbox-list-container {
   max-height: 100% !important;
 }