Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 07:48:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix dashboard charts

Browse Source
This commit is contained in:
Emily
2024-06-24 14:51:15 +02:00
parent 67c027d720
commit 75090c809c
5 changed files with 90 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
dashboard/components/dashboard/CountCard.vue
View File

@@ -28,18 +28,21 @@ const props = defineProps<{
</div>
<div class="poppins text-text-sub text-[.9rem] 2xl:text-base"> {{ text }} </div>
</div>
<div v-if="trend" class="flex items-center gap-3 rounded-xl px-2 py-1"
:style="`background-color: ${props.color}33`">
<i :class="trend > 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down'" class="far text-[.9rem] 2xl:text-[1rem]"
:style="`color: ${props.color}`"></i>
<div :style="`color: ${props.color}`" class="font-semibold text-[.75rem] 2xl:text-[.875rem]">
{{ trend.toFixed(0) }} %
<div v-if="trend" class="flex flex-col items-center gap-1">
<div class="flex items-center gap-3 rounded-xl px-2 py-1" :style="`background-color: ${props.color}33`">
<i :class="trend > 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down'"
class="far text-[.9rem] 2xl:text-[1rem]" :style="`color: ${props.color}`"></i>
<div :style="`color: ${props.color}`" class="font-semibold text-[.75rem] 2xl:text-[.875rem]">
{{ trend.toFixed(0) }} %
</div>
</div>
<div class="poppins text-text-sub text-[.7rem]"> Daily variation </div>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full h-[50%] flex items-end" v-if="(props.data?.length || 0) > 0">
<DashboardEmbedChartCard v-if="ready" :data="props.data || []" :labels="props.labels || []" :color="props.color">
<DashboardEmbedChartCard v-if="ready" :data="props.data || []" :labels="props.labels || []"
:color="props.color">
</DashboardEmbedChartCard>
</div>
</Card>

17
dashboard/components/dashboard/TopCards.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { MetricsTimeline } from '~/server/api/metrics/[project_id]/timeline/generic';
import DateService from '@services/DateService';
const { data: metricsInfo } = useMetricsData();
@@ -63,11 +63,18 @@ const sessionsData = reactive<Data>({ data: [], labels: [], trend: 0, ready: fal
const sessionsDurationData = reactive<Data>({ data: [], labels: [], trend: 0, ready: false });
async function loadData(timelineEndpointName: string, target: Data) {
const response = await useTimelineData(timelineEndpointName, 'day');
const response = await useTimeline(timelineEndpointName as any, 'day');
if (!response) return;
target.data = response.data;
target.labels = response.labels;
target.trend = response.trend;
target.data = response.map(e => e.count);
target.labels = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, 'day'));
const pool = [...response.map(e => e.count)];
pool.pop();
const avg = pool.reduce((a, e) => a + e, 0) / pool.length;
const diffPercent = (100 / avg * (response.at(-1)?.count || 0)) - 100;
target.trend = diffPercent;
target.ready = true;
}