luminic-space/luminic-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+analytics update

Browse Source
This commit is contained in:
Vladimir Voronin
2025-01-23 15:11:05 +03:00
parent 75b01cf5f0
commit edb9ffed41
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/analytics/AnalyticsView.vue
View File

@@ -28,6 +28,13 @@ const tableColumns = ref([]);
const chartData = ref(null) const chartData = ref(null)
const selectedCategory = ref() const selectedCategory = ref()
const formatter = ref(new Intl.NumberFormat('ru-RU', {style: 'currency', currency: 'RUB', minimumFractionDigits: 0})) 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(() => { const preparedChartData = computed(() => {
@@ -191,22 +198,26 @@ onMounted(async () => {
<LoadingView v-if="loading"/> <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 "> <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"> <AccordionPanel value="1">
<AccordionHeader>График</AccordionHeader> <AccordionHeader>График</AccordionHeader>
<AccordionContent class="items-center justify-items-center "> <AccordionContent class="items-center justify-items-center ">
<!-- <Select v-model="selectedCategory" :options="categoriesCatalog" optionLabel="name"--> <!-- <Select v-model="selectedCategory" :options="categoriesCatalog" optionLabel="name"-->
<!-- placeholder="Выберите категории"--> <!-- placeholder="Выберите категории"-->
<!-- :maxSelectedLabels="3" class="w-full md:w-80"/>--> <!-- :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"> <template #option="slotProps">
<div>{{ slotProps.option.icon }} {{ slotProps.option.name }}</div> <div>{{ slotProps.option.icon }} {{ slotProps.option.name }}</div>
</template> </template>
</Listbox> </Listbox>
<Chart type="line" :data="preparedChartData" :options="chartOptions" class="!w-5/6 !h-full"/> <Chart type="line" :data="preparedChartData" :options="chartOptions" class="!w-5/6 !h-full"/>
</div>
</AccordionContent> </AccordionContent>
</AccordionPanel> </AccordionPanel>
</Accordion> </Accordion>
@@ -244,6 +255,7 @@ onMounted(async () => {
align-content: center; align-content: center;
justify-content: center; justify-content: center;
} }
.p-listbox-list-container { .p-listbox-list-container {
max-height: 100% !important; max-height: 100% !important;
} }