+analytics update

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,7 +198,8 @@ 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 ">
@@ -199,7 +207,9 @@ onMounted(async () => {
           <!--          <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">
+          <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>
@@ -207,6 +217,7 @@ onMounted(async () => {
 
             </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;
 }