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

refactoring dashboard

Browse Source
This commit is contained in:
Emily
2025-01-23 17:34:43 +01:00
parent afeaac1b0d
commit e4bdf7e4c3
112 changed files with 2345 additions and 12532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/components/BarCard/Base.vue
View File

@@ -121,7 +121,7 @@ function openExternalLink(link: string) {
<i v-else :class="iconProvider(element)?.[1]"></i>
</div>
<span
class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-lyx-lightmode-text-dark dark:text-text/70">
class="text-ellipsis line-clamp-1 ui-font z-[19] text-[.95rem] text-lyx-lightmode-text-dark dark:text-text/70">
{{ elementTextTransformer?.(element._id) || element._id }}
</span>
</div>

2
dashboard/components/BarCard/Browsers.vue
View File

@@ -57,7 +57,7 @@ async function showMore() {
<template>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 h-full">
<BarCardBase @showMore="showMore()" @dataReload="browsersData.refresh()" :data="browsersData.data.value || []"
desc="The browsers most used to search your website." :dataIcons="true" :iconProvider="iconProvider"
:loading="browsersData.pending.value" label="Browsers" sub-label="Browsers">

2
dashboard/components/BarCard/Geolocations.vue
View File

@@ -49,7 +49,7 @@ async function showMore() {
<template>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 h-full">
<BarCardBase @showMore="showMore()" @dataReload="geolocationData.refresh()"
:data="geolocationData.data.value || []" :dataIcons="false" :loading="geolocationData.pending.value"
label="Countries" sub-label="Countries" :iconProvider="iconProvider" :customIconStyle="customIconStyle"

37
dashboard/components/BarCard/Pages.vue Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts" setup>
const pagesData = useFetch('/api/data/pages', {
headers: useComputedHeaders({
limit: 10,
}), lazy: true
});
const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
async function showMore() {
dialogBarData.value = [];
showDialog.value = true;
isDataLoading.value = true;
const res = await $fetch('/api/data/pages', {
headers: useComputedHeaders({ limit: 1000 }).value
});
dialogBarData.value = (res || []);
isDataLoading.value = false;
}
</script>
<template>
<div class="flex flex-col gap-2 h-full">
<BarCardBase @showMore="showMore()" @dataReload="pagesData.refresh()" :showLink=true
:data="pagesData.data.value || []" :interactive="false" desc="Most visited pages."
:dataIcons="true" :loading="pagesData.pending.value" label="Top Pages" sub-label="Referrers">
</BarCardBase>
</div>
</template>

2
dashboard/components/BarCard/Referrers.vue
View File

@@ -43,7 +43,7 @@ async function showMore() {
<template>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 h-full">
<BarCardBase @showMore="showMore()" :elementTextTransformer="elementTextTransformer"
:iconProvider="iconProvider" @dataReload="referrersData.refresh()" :showLink=true
:data="referrersData.data.value || []" :interactive="false" desc="Where users find your website."

1
dashboard/components/dashboard/ActionableChart.vue
View File

@@ -1,5 +1,4 @@
<script lang="ts" setup>
import { onMounted } from 'vue';
import DateService, { type Slice } from '@services/DateService';
import type { ChartData, ChartOptions, TooltipModel } from 'chart.js';
import { useLineChart, LineChart } from 'vue-chart-3';

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

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import DateService from '@services/DateService';
import type { Slice } from '@services/DateService';
import DateService, { type Slice } from '../../shared/services/DateService';
const { snapshot, safeSnapshotDates, snapshotDuration } = useSnapshot()

50
dashboard/components/events/EventsStackedBarChart.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { onMounted } from 'vue';
import DateService, { type Slice } from '@services/DateService';
import { type Slice } from '@services/DateService';
const props = defineProps<{ slice: Slice }>();
const slice = computed(() => props.slice);
@@ -10,45 +10,23 @@ const { safeSnapshotDates } = useSnapshot()
function transformResponse(input: { _id: string, name: string, count: number }[]) {
const fixed = fixMetrics({
data: input,
from: input[0]._id,
to: safeSnapshotDates.value.to
},
const fixed = fixMetrics(
{ data: input, from: input[0]._id, to: safeSnapshotDates.value.to },
slice.value,
{ advanced: true, advancedGroupKey: 'name' });
{ advanced: true, advancedGroupKey: 'name' }
);
const parsedDatasets: any[] = [];
const colors = [
"#5655d0",
"#6bbbe3",
"#a6d5cb",
"#fae0b9",
"#f28e8e",
"#e3a7e4",
"#c4a8e1",
"#8cc1d8",
"#f9c2cd",
"#b4e3b2",
"#ffdfba",
"#e9c3b5",
"#d5b8d6",
"#add7f6",
"#ffd1dc",
"#ffe7a1",
"#a8e6cf",
"#d4a5a5",
"#f3d6e4",
"#c3aed6"
"#5655d0", "#6bbbe3", "#a6d5cb", "#fae0b9", "#f28e8e",
"#e3a7e4", "#c4a8e1", "#8cc1d8", "#f9c2cd", "#b4e3b2",
"#ffdfba", "#e9c3b5", "#d5b8d6", "#add7f6", "#ffd1dc",
"#ffe7a1", "#a8e6cf", "#d4a5a5", "#f3d6e4", "#c3aed6"
];
for (let i = 0; i < fixed.allKeys.length; i++) {
const line: any = {
data: [],
color: colors[i] || '#FF0000',
label: fixed.allKeys[i]
};
const line: any = { data: [], color: colors[i] || '#FF0000', label: fixed.allKeys[i] };
parsedDatasets.push(line)
fixed.data.forEach((e: { key: string, value: number }[]) => {
const target = e.find(e => e.key == fixed.allKeys[i]);
@@ -56,12 +34,7 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
line.data.push(target.value);
});
}
return {
datasets: parsedDatasets,
labels: fixed.labels
}
return { datasets: parsedDatasets, labels: fixed.labels }
}
const errorData = ref<{ errored: boolean, text: string }>({
@@ -88,7 +61,6 @@ const eventsStackedData = useFetch(`/api/timeline/events_stacked`, {
onResponse
});
onMounted(async () => {
eventsStackedData.execute();
});

13
dashboard/components/selector/DomainSelector.vue
View File

@@ -1,18 +1,7 @@
<script lang="ts" setup>
;
const { user } = useLoggedUser()
const { domainList, domain, setActiveDomain } = useDomain();
// function isProjectMine(owner?: string) {
// if (!owner) return false;
// if (!user.value) return false;
// if (!user.value.logged) return;
// return user.value.id == owner;
// }
function onChange(e: string) {
setActiveDomain(e);
}
@@ -24,7 +13,7 @@ function onChange(e: string) {
select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget w-max',
option: {
base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
base: 'z-[999] hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
}
}" class="w-full" v-if="domainList" @change="onChange" :value="domain" :options="domainList">

3
dashboard/components/settings/billing.vue
View File

@@ -175,7 +175,8 @@ const { showDrawer } = useDrawer();
<div class="flex items-center gap-1">
<div class="poppins font-semibold text-[2rem]"> €
{{ getPremiumPrice(planData.premium_type) }} </div>
<div class="poppins text-lyx-lightmode-text-dark dark:text-text-sub mt-2"> per month </div>
<div class="poppins text-lyx-lightmode-text-dark dark:text-text-sub mt-2"> per month
</div>
</div>
</div>
<div class="flex flex-col">