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

fix dashboard + live demo

Browse Source
This commit is contained in:
Emily
2024-09-04 14:00:03 +02:00
parent d7e18d570f
commit 8b026099de
6 changed files with 55 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
dashboard/components/CVerticalNavigation.vue
View File

@@ -10,6 +10,7 @@ export type Entry = {
icon?: string,
action?: () => any,
adminOnly?: boolean,
premiumOnly?:boolean,
external?: boolean,
grow?: boolean
}
@@ -112,6 +113,10 @@ watch(selected, () => {
setActiveProject(selected.value._id.toString())
})
const isPremium = computed(()=>{
return activeProject.value?.premium;
})
</script>
<template>
@@ -249,9 +254,9 @@ watch(selected, () => {
<div class="flex flex-col h-full">
<div v-for="section of sections" class="flex flex-col gap-1">
<div v-for="section of sections" class="flex flex-col gap-1 h-full pb-6">
<div v-for="entry of section.entries">
<div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }">
<div v-if="(!entry.adminOnly || (isAdmin && !isAdminHidden))"
class="bg-lyx-background cursor-pointer text-lyx-text-dark py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center"
@@ -266,9 +271,12 @@ watch(selected, () => {
<div class="flex items-center w-[1.4rem] mr-2 text-[1.1rem] justify-center">
<i :class="entry.icon"></i>
</div>
<div class="manrope">
<div class="manrope grow">
{{ entry.label }}
</div>
<div v-if="entry.premiumOnly && !isPremium" class="flex items-center">
<i class="fal fa-lock"></i>
</div>
</NuxtLink>
</div>

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

@@ -36,7 +36,7 @@ const props = defineProps<{
{{ trend.toFixed(0) }} %
</div>
</div>
<div class="poppins text-text-sub text-[.7rem]"> Daily variation </div>
<div class="poppins text-text-sub text-[.7rem]"> Trend </div>
</div>
</div>

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

@@ -134,7 +134,7 @@ onMounted(async () => {
</DashboardCountCard>
<DashboardCountCard :ready="!sessionsDurationData.pending.value" icon="far fa-timer" text="Avg session time"
<DashboardCountCard :ready="!sessionsDurationData.pending.value" icon="far fa-timer" text="Total avg session time"
:value="avgSessionDuration" :trend="sessionsDurationData.data.value?.trend"
:data="sessionsDurationData.data.value?.data" :labels="sessionsDurationData.data.value?.labels"
color="#f56523">

27
dashboard/layouts/dashboard.vue
View File

@@ -4,24 +4,45 @@ import type { Section } from '~/components/CVerticalNavigation.vue';
import { Lit } from 'litlyx-js';
const activeProject = useActiveProject();
const isPremium = computed(() => {
return activeProject.value?.premium;
});
const pricingDrawer = usePricingDrawer();
const sections: Section[] = [
{
title: 'Project',
title: '',
entries: [
{ label: 'Dashboard', to: '/', icon: 'fal fa-table-layout' },
{ label: 'Events', to: '/events', icon: 'fal fa-square-bolt' },
{ label: 'Analyst', to: '/analyst', icon: 'fal fa-microchip-ai' },
{ label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
{ label: 'Links (soon)', to: '#', icon: 'fal fa-globe-pointer', disabled: true },
{ label: 'Integrations (soon)', to: '#', icon: 'fal fa-cube', disabled: true },
{ label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
{
label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
grow: true,
label: 'Documentation', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
action() { Lit.event('docs_clicked') },
},
{ label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
{
label: 'Slack support', icon: 'fab fa-slack',
premiumOnly: true,
action() {
if (isPremium.value === true) {
window.open('https://join.slack.com/t/litlyx/shared_invite/zt-2q3oawn29-hZlu_fBUBlc4052Ooe3FZg', '_blank');
} else {
pricingDrawer.visible.value = true;
}
},
},
]
}
];
const { showDialog, closeDialog } = useBarCardDialog();
const { isOpen, close, open } = useMenu();

41
dashboard/pages/live_demo.vue
View File

@@ -71,14 +71,9 @@ const { snapshot } = useSnapshot();
</div>
<div class="grow"></div>
<div class="flex gap-2 md:pt-0 pt-4">
<NuxtLink target="_blank" to="https://cal.com/litlyx/30min"
class="bg-white hover:bg-white/90 px-4 py-3 text-black poppins font-semibold text-[.9rem] lg:text-[1.2rem] rounded-lg">
Book a demo
</NuxtLink>
<NuxtLink to="/"
class="bg-accent hover:bg-accent/90 px-4 py-3 poppins font-semibold text-[.9rem] lg:text-[1.2rem] rounded-lg">
Go to dashboard
</NuxtLink>
<LyxUiButton link="/" type="primary" class="poppins font-semibold text-[.9rem] lg:text-[1.2rem] flex items-center !px-14 py-4">
Get started for free
</LyxUiButton>
</div>
</div>
</div>
@@ -102,7 +97,7 @@ const { snapshot } = useSnapshot();
</div>
</CardTitled>
<CardTitled class="p-4 flex-1" title="Sessions" sub="Shows trends in sessions.">
<!-- <CardTitled class="p-4 flex-1" title="Sessions" sub="Shows trends in sessions.">
<template #header>
<SelectButton @changeIndex="sessionsChartSelectIndex = $event"
:currentIndex="sessionsChartSelectIndex" :options="selectLabels">
@@ -112,13 +107,14 @@ const { snapshot } = useSnapshot();
<DashboardSessionsLineChart :slice="(selectLabels[sessionsChartSelectIndex].value as any)">
</DashboardSessionsLineChart>
</div>
</CardTitled>
</CardTitled> -->
</div>
<div class="flex gap-6 flex-col xl:flex-row p-6">
<!-- <CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
<CardTitled class="p-4 flex-[4] w-full h-full" title="Events" sub="Events stacked bar chart.">
<template #header>
<SelectButton @changeIndex="eventsStackedSelectIndex = $event"
:currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
@@ -128,25 +124,17 @@ const { snapshot } = useSnapshot();
<EventsStackedBarChart :slice="(selectLabelsEvents[eventsStackedSelectIndex].value as any)">
</EventsStackedBarChart>
</div>
</CardTitled> -->
<div class="bg-menu p-4 rounded-xl flex-[2] flex flex-col gap-10 h-full">
<div class="flex flex-col gap-1">
<div class="poppins font-semibold text-[1.4rem] text-text">
Top events
</div>
<div class="poppins text-[1rem] text-text-sub/90">
Displays key events.
</div>
</div>
</CardTitled>
<CardTitled title="Top events" sub=" Displays key events." class="p-4 flex-[2] w-full h-full">
<div>
<DashboardEventsChart class="w-full"> </DashboardEventsChart>
</div>
</CardTitled>
</div>
<div class="flex w-full justify-center mt-6 px-6">
<div class="flex w-full justify-center px-6">
<div class="flex w-full gap-6 flex-col lg:flex-row">
<div class="flex-1">
<DashboardWebsitesBarCard></DashboardWebsitesBarCard>
@@ -208,10 +196,9 @@ const { snapshot } = useSnapshot();
</div>
<div class="flex gap-2 flex-col md:flex-row">
<NuxtLink to="/"
class="bg-accent hover:bg-accent/90 px-14 py-4 poppins font-semibold text-[1.1rem] lg:text-[1.6rem] rounded-lg">
<LyxUiButton link="/" type="primary" class="poppins font-semibold text-[1.1rem] lg:text-[1.6rem] flex items-center !px-14">
Get started
</NuxtLink>
</LyxUiButton>
<NuxtLink target="_blank" to="https://cal.com/litlyx/30min"
class="bg-white hover:bg-white/90 text-black px-14 py-4 poppins font-semibold text-[1.1rem] lg:text-[1.6rem] rounded-lg">
Book a demo

3
dashboard/utils/prettyNumber.ts
View File

@@ -9,6 +9,7 @@ export function formatNumberK(value: string | number, decimals: number = 1) {
if (num > 1_000_000) return (num / 1_000_000).toFixed(decimals) + ' M';
if (num > 1_000) return (num / 1_000).toFixed(decimals) + ' K';
return num.toFixed();
return isNaN(num) ? '0' : num.toFixed();
}