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

update dashboard + server

Browse Source
This commit is contained in:
Emily
2025-02-10 15:30:19 +01:00
parent 0292829805
commit abc485a9ef
26 changed files with 171 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
dashboard/components/BarCard/Pages.vue
View File

@@ -1,5 +1,7 @@
<script lang="ts" setup>
const router = useRouter();
const pagesData = useFetch('/api/data/pages', {
headers: useComputedHeaders({
limit: 10,
@@ -24,13 +26,18 @@ async function showMore() {
isDataLoading.value = false;
}
function goToView() {
router.push('/dashboard/visits');
}
</script>
<template>
<div class="flex flex-col gap-2 h-full">
<BarCardBase @showMore="showMore()" @dataReload="pagesData.refresh()" :showLink=true
<BarCardBase @showRawData="goToView()" @showMore="showMore()" @dataReload="pagesData.refresh()" :showLink=true
:data="pagesData.data.value || []" :interactive="false" desc="Most visited pages."
:rawButton="!isLiveDemo"
:dataIcons="true" :loading="pagesData.pending.value" label="Top Pages" sub-label="Referrers">
</BarCardBase>
</div>

17
dashboard/components/CustomTab.vue
View File

@@ -9,13 +9,16 @@ const activeTabIndex = ref<number>(0);
<template>
<div>
<div class="flex">
<div v-for="(tab, index) of items" @click="activeTabIndex = index"
class="px-6 pb-3 poppins font-medium text-lyx-lightmode-text dark:text-lyx-text-darker border-b-[1px] border-lyx-text-darker" :class="{
'!border-[#88A7FF] !text-[#88A7FF]': activeTabIndex === index,
'hover:border-lyx-lightmode-text-dark hover:text-lyx-lightmode-text-dark/60 dark:hover:border-lyx-text-dark dark:hover:text-lyx-text-dark cursor-pointer': activeTabIndex !== index
}">
{{ tab.label }}
<div class="flex overflow-y-auto hide-scrollbars">
<div class="flex">
<div v-for="(tab, index) of items" @click="activeTabIndex = index"
class="px-6 pb-3 poppins font-medium text-lyx-lightmode-text dark:text-lyx-text-darker border-b-[1px] border-lyx-text-darker"
:class="{
'!border-[#88A7FF] !text-[#88A7FF]': activeTabIndex === index,
'hover:border-lyx-lightmode-text-dark hover:text-lyx-lightmode-text-dark/60 dark:hover:border-lyx-text-dark dark:hover:text-lyx-text-dark cursor-pointer': activeTabIndex !== index
}">
{{ tab.label }}
</div>
</div>
<div class="border-b-[1px] border-lyx-text-darker w-full">

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

@@ -52,7 +52,7 @@ const { showDrawer } = useDrawer();
</div>
<div v-if="!ready" class="flex justify-center items-center w-full h-full flex-col gap-2">
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
<div v-if="props.slow"> Can be very slow on large snapshots </div>
<div v-if="props.slow"> Can be very slow on large timeframes </div>
</div>
</LyxUiCard>

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

@@ -75,7 +75,7 @@ const avgSessionDuration = computed(() => {
.filter(e => e > 0)
.reduce((a, e) => e + a, 0);
const avg = counts / Math.max(sessionsDurationData.data.value.data.filter(e => e > 0).length, 1);
const avg = counts / (Math.max(sessionsDurationData.data.value.data.filter(e => e > 0).length, 1)) / 5;
let hours = 0;
let minutes = 0;

18
dashboard/components/dashboard/TopSection.vue
View File

@@ -18,18 +18,6 @@ function copyProjectId() {
createAlert('Success', 'Project id copied successfully.', 'far fa-circle-check', 5000);
}
function showAnomalyInfoAlert() {
createAlert('AI Anomaly Detector info',
`Anomaly detector is running. It helps you detect a spike in visits or events, it could mean an
attack or simply higher traffic due to good performance. Additionally, it can detect if someone is
stealing parts of your website and hosting a duplicate version—an unfortunately common practice.
Litlyx will notify you via email with actionable advices`,
'far fa-shield',
10000
)
}
</script>
@@ -38,7 +26,7 @@ function showAnomalyInfoAlert() {
<div
class="flex gap-2 items-center text-lyx-lightmode-text/90 dark:text-lyx-text/90 justify-center md:justify-start">
<div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
<div class="animate-pulse w-[.8rem] h-[.8rem] bg-green-400 rounded-full"> </div>
<div class="poppins font-medium text-[.9rem]"> {{ onlineUsers.data }} Online users</div>
</div>
@@ -62,7 +50,7 @@ function showAnomalyInfoAlert() {
</div>
</div>
</div> -->
<!--
<div v-if="!selfhosted"
class="flex gap-2 items-center text-lyx-lightmode-text/90 dark:text-lyx-text/90 justify-center md:justify-start">
<div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
@@ -71,7 +59,7 @@ function showAnomalyInfoAlert() {
<i class="far fa-info-circle text-[.9rem] hover:text-lyx-primary cursor-pointer"
@click="showAnomalyInfoAlert"></i>
</div>
</div>
</div> -->
</div>
</template>

6
dashboard/components/dialog/CreateSnapshot.vue
View File

@@ -53,7 +53,7 @@ async function confirmSnapshot() {
await updateSnapshots();
closeDialog();
createAlert('Snapshot created', 'Snapshot created successfully', 'far fa-circle-check', 5000);
createAlert('Timeframe created', 'Timeframe created successfully', 'far fa-circle-check', 5000);
const newSnapshot = snapshots.value.at(-1);
if (newSnapshot) snapshot.value = newSnapshot;
@@ -65,7 +65,7 @@ async function confirmSnapshot() {
<div class="w-full h-full flex flex-col">
<div class="poppins text-center text-lyx-lightmode-text dark:text-lyx-text">
Create a snapshot
Create a timeframe
</div>
<div class="mt-10 flex items-center gap-2">
@@ -74,7 +74,7 @@ async function confirmSnapshot() {
<input @input="onColorChange" ref="colorpicker" class="relative w-0 h-0 z-[-100]" type="color">
</div>
<div class="grow">
<LyxUiInput placeholder="Snapshot name" v-model="snapshotName" class="px-4 py-1 w-full"></LyxUiInput>
<LyxUiInput placeholder="Timeframe name" v-model="snapshotName" class="px-4 py-1 w-full"></LyxUiInput>
</div>
</div>

58
dashboard/components/dialog/Help.vue Normal file
View File

@@ -0,0 +1,58 @@
<script lang="ts" setup>
const { createAlert } = useAlert();
const { close } = useModal()
function copyEmail() {
if (!navigator.clipboard) alert('You can\'t copy in HTTP');
navigator.clipboard.writeText('help@litlyx.com');
createAlert('Success', 'Email copied successfully.', 'far fa-circle-check', 5000);
}
</script>
<template>
<UModal :ui="{
strategy: 'override',
overlay: {
background: 'bg-lyx-background/85'
},
background: 'dark:bg-lyx-widget bg-lyx-lightmode-widget-light',
ring: 'border-solid border-[1px] border-[#262626]'
}">
<div class="h-full flex flex-col gap-2 p-4">
<div class="flex flex-col gap-3">
<div class="font-medium">
Contact Support
</div>
<div class="dark:text-lyx-text-dark">
Contact Support for any questions or issues you have.
</div>
<div class="dark:bg-lyx-widget-lighter bg-lyx-lightmode-widget h-[1px]"></div>
<div class="flex items-center justify-between gap-4">
<div class="p-2 bg-lyx-lightmode-widget dark:bg-[#1c1b1b] rounded-md w-full">
<div class="w-full text-[.9rem] dark:text-[#acacac]"> help@litlyx.com </div>
</div>
<LyxUiButton type="secondary" @click="copyEmail()"> Copy </LyxUiButton>
<LyxUiButton type="secondary" to="mailto:help@litlyx.com"> Send </LyxUiButton>
</div>
<div class="dark:text-lyx-text-dark mt-2">
or text us on Discord, we will reply to you personally.
</div>
<LyxUiButton to="https://discord.gg/9cQykjsmWX" target="_blank" type="secondary">
Discord Support
</LyxUiButton>
</div>
</div>
</UModal>
</template>

47
dashboard/components/layout/TopNavigation.vue
View File

@@ -1,14 +1,53 @@
<script lang="ts" setup>
import { DialogFeedback, DialogHelp } from '#components';
const modal = useModal();
const selfhosted = useSelfhosted();
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})
</script>
<template>
<div
class="w-full h-[4rem] border-solid border-[#D9D9E0] dark:border-[#202020] border-b-[1px] bg-lyx-lightmode-background dark:bg-lyx-background flex dark:shadow-[1px_0_10px_#000000]">
<div class="flex items-center px-10">
class="w-full overflow-y-auto hide-scrollbars h-[4rem] border-solid border-[#D9D9E0] dark:border-[#202020] border-b-[1px] bg-lyx-lightmode-background dark:bg-lyx-background flex dark:shadow-[1px_0_10px_#000000]">
<div class="flex items-center px-6">
<SelectorDomainSelector></SelectorDomainSelector>
</div>
</div>
<div class="grow"></div>
<div class="flex items-center gap-6 mr-10">
<div v-if="!selfhosted" @click="modal.open(DialogFeedback, {});"
class="flex gap-2 items-center cursor-pointer">
<i class="far fa-message"></i>
Feedback
</div>
<div @click="modal.open(DialogHelp, {});" class="cursor-pointer"> Help </div>
<NuxtLink to="https://docs.litlyx.com" target="_blank" class="cursor-pointer">
Docs
</NuxtLink>
<div>
<UTooltip :text="isDark ? 'Toggle light mode' : 'Toggle dark mode'">
<i @click="isDark = !isDark"
class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark"
:class="isDark ? 'far fa-moon' : 'far fa-sun'"></i>
</UTooltip>
</div>
</div>
</div>
</template>

21
dashboard/components/layout/VerticalNavigation.vue
View File

@@ -24,18 +24,6 @@ type Props = {
}
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})
const route = useRoute();
const props = defineProps<Props>();
@@ -172,7 +160,7 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
<div class="flex mb-2 items-center justify-between text-lyx-lightmode-text dark:text-lyx-text">
<div class="poppins text-[.8rem]">
Snapshots
Timeframes
</div>
<div class="flex gap-2">
@@ -181,7 +169,7 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
<div><i class="far fa-download text-[.8rem]"></i></div>
</LyxUiButton>
</UTooltip> -->
<UTooltip text="Create new snapshot">
<UTooltip text="Create new timeframe">
<LyxUiButton @click="openSnapshotDialog()" type="outlined" class="!px-3 !py-1">
<div><i class="fas fa-plus text-[.8rem]"></i></div>
</LyxUiButton>
@@ -301,11 +289,6 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
<div class="grow flex gap-3">
<div>
<i @click="isDark = !isDark" class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark"
:class="isDark ? 'far fa-moon' : 'far fa-sun'"></i>
</div>
<NuxtLink to="/admin" v-if="userRoles.isAdmin.value"
class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark">
<i class="far fa-cat"></i>

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

@@ -8,7 +8,7 @@ function onChange(e: string) {
</script>
<template>
<div class="flex gap-2">
<div class="flex gap-2 absolute">
<USelectMenu :uiMenu="{
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',

3
dashboard/components/selector/ProjectSelector.vue
View File

@@ -5,7 +5,7 @@ import type { TProject } from '@schema/project/ProjectSchema';
const { user } = useLoggedUser()
const { projectList, guestProjectList, allProjectList, actions, project } = useProject();
const { setActiveDomain } = useDomain();
function isProjectMine(owner?: string) {
if (!owner) return false;
@@ -16,6 +16,7 @@ function isProjectMine(owner?: string) {
function onChange(e: TProject) {
actions.setActiveProject(e._id.toString());
setActiveDomain('ALL DOMAINS');
}
</script>

48
dashboard/layouts/dashboard.vue
View File

@@ -12,8 +12,6 @@ const modal = useModal();
const selfhosted = useSelfhosted();
console.log({ selfhosted })
const sections: Section[] = [
{
title: '',
@@ -21,30 +19,32 @@ const sections: Section[] = [
{ label: 'Web Analytics', to: '/', icon: 'fal fa-table-layout' },
{ label: 'Custom Events', to: '/events', icon: 'fal fa-square-bolt' },
{ label: 'Ask AI', to: '/analyst', icon: 'fal fa-sparkles' },
{ label: 'Security', to: '/security', icon: 'fal fa-shield', disabled: selfhosted },
// { label: 'Security', to: '/security', icon: 'fal fa-shield', disabled: selfhosted },
// { 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: '/integrations', icon: 'fal fa-cube', disabled: true },
{ label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
{
grow: true,
label: 'Leave a Feedback', icon: 'fal fa-message',
action() {
modal.open(DialogFeedback, {});
},
disabled: selfhosted
},
{
label: 'Documentation', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
action() { Lit.event('docs_clicked') },
},
{
label: 'Discord support', icon: 'fab fa-discord',
to: 'https://discord.gg/9cQykjsmWX',
external: true,
},
{ grow: true, label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
// {
// grow: true,
// label: 'Leave a Feedback', icon: 'fal fa-message',
// action() {
// modal.open(DialogFeedback, {});
// },
// disabled: selfhosted
// },
// {
// grow: true,
// label: 'Documentation', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
// action() { Lit.event('docs_clicked') },
// },
// {
// grow: true,
// label: 'Discord support', icon: 'fab fa-discord',
// to: 'https://discord.gg/9cQykjsmWX',
// external: true,
// },
// {
// label: 'Slack support', icon: 'fab fa-slack',
// to: '#',
@@ -76,11 +76,11 @@ const { isOpen, close, open } = useMenu();
<div
class="px-6 py-3 flex items-center justify-center shadow-[0_0_10px_#000000CC] z-[20] rounded-xl mx-2 my-2 lg:hidden">
class="px-6 py-3 flex items-center justify-center dark:bg-lyx-background-light z-[20] rounded-xl mx-2 my-2 lg:hidden">
<i @click="open()" class="fas fa-bars text-[1.2rem] absolute left-6"></i>
<div class="nunito font-semibold text-[1.2rem]">
<!-- <div class="nunito font-semibold text-[1.2rem]">
Litlyx
</div>
</div> -->
</div>
<div class="flex h-full">

2
dashboard/pages/analyst.vue
View File

@@ -403,7 +403,7 @@ async function clearAllChats() {
<div class="bg-accent w-5 h-5 rounded-full animate-pulse">
</div>
<div class="manrope font-semibold text-lyx-lightmode-text dark:text-text-dirty"> {{
chatsRemaining }} remaining requests
chatsRemaining }} messages left
</div>
</div>
<LyxUiButton v-if="!selfhosted" type="primary" class="text-[.9rem] text-center " @click="showDrawer('PRICING')">

2
dashboard/pages/index.vue
View File

@@ -42,7 +42,7 @@ const selfhosted = useSelfhosted();
<div v-if="showDashboard">
<div class="w-full px-4 py-2 gap-2 flex flex-col">
<BannerLimitsInfo v-if="!selfhosted" :key="refreshKey"></BannerLimitsInfo>
<BannerOffer v-if="!selfhosted" :key="refreshKey"></BannerOffer>
<!-- <BannerOffer v-if="!selfhosted" :key="refreshKey"></BannerOffer> -->
</div>
<div>

2
dashboard/pages/live_demo.vue
View File

@@ -70,7 +70,7 @@ const selectLabelsEvents = [
Litlyx open metrics
</div>
<div v-if="project" class="flex gap-2 items-center text-text/90">
<div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
<div class="animate-pulse w-[.8rem] h-[.8rem] bg-green-400 rounded-full"> </div>
<div> {{ onlineUsers }} Online users</div>
</div>
</div>

16
dashboard/pages/security.vue
View File

@@ -6,18 +6,6 @@ const reportList = useFetch(`/api/security/list`, { headers: useComputedHeaders(
const { createAlert } = useAlert();
function showAnomalyInfoAlert() {
createAlert('AI Anomaly Detector info',
`Anomaly detector is running. It helps you detect a spike in visits or events, it could mean an
attack or simply higher traffic due to good performance. Additionally, it can detect if someone is
stealing parts of your website and hosting a duplicate version—an unfortunately common practice.
Litlyx will notify you via email with actionable advices`,
'far fa-shield',
10000
)
}
const rows = computed(() => reportList.data.value || [])
const columns = [
@@ -33,14 +21,14 @@ const columns = [
<div class="home w-full h-full px-10 pt-6 overflow-y-auto">
<div class="flex gap-2 items-center text-lyx-lightmode-text dark:text-text/90 justify-end">
<!-- <div class="flex gap-2 items-center text-lyx-lightmode-text dark:text-text/90 justify-end">
<div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
<div class="poppins font-regular text-[1rem]"> AI Anomaly Detector </div>
<div class="flex items-center">
<i class="far fa-info-circle text-[.9rem] hover:text-lyx-primary cursor-pointer"
@click="showAnomalyInfoAlert"></i>
</div>
</div>
</div> -->
<div class="pb-[10rem]">
<UTable :rows="rows" :columns="columns">

12
dashboard/server/api/project/generate_pdf.ts
View File

@@ -38,12 +38,12 @@ function createPdf(data: PDFGenerationData) {
const pdf = new pdfkit({ size: 'A4', margins: { top: 50, bottom: 50, left: 50, right: 50 }, });
pdf.fillColor('#ffffff').rect(0, 0, pdf.page.width, pdf.page.height).fill('#000000');
pdf.font('pdf_fonts/Poppins-Bold.ttf').fontSize(16).fillColor('#ffffff');
pdf.font('./server/pdf/pdf_fonts/Poppins-Bold.ttf').fontSize(16).fillColor('#ffffff');
pdf.text(`Project name: ${data.projectName}`, { align: 'left' }).moveDown(LINE_SPACING);
pdf.text(`Snapshot name: ${data.snapshotName}`, { align: 'left' }).moveDown(LINE_SPACING);
pdf.text(`Timeframe name: ${data.snapshotName}`, { align: 'left' }).moveDown(LINE_SPACING);
pdf.font('pdf_fonts/Poppins-Regular.ttf').fontSize(12).fillColor('#ffffff')
pdf.font('./server/pdf/pdf_fonts/Poppins-Regular.ttf').fontSize(12).fillColor('#ffffff')
pdf.text(`Total visits: ${data.totalVisits}`, { align: 'left' }).moveDown(LINE_SPACING);
pdf.text(`Average visits per day: ${data.avgVisitsDay}`, { align: 'left' }).moveDown(LINE_SPACING);
@@ -64,16 +64,16 @@ function createPdf(data: PDFGenerationData) {
pdf.text('Average growth:', { align: 'left' }).moveDown(LINE_SPACING);
pdf.text(`${data.avgGrowthText}`, { align: 'left' }).moveDown(LINE_SPACING);
pdf.font('pdf_fonts/Poppins-Italic.ttf')
pdf.font('./server/pdf/pdf_fonts/Poppins-Italic.ttf')
.text('This gives you an idea of the average growth your website is experiencing over time.', { align: 'left' })
.moveDown(LINE_SPACING);
pdf.font('pdf_fonts/Poppins-Regular.ttf')
pdf.font('./server/pdf/pdf_fonts/Poppins-Regular.ttf')
.fontSize(10)
.fillColor('#ffffff')
.text('Created with Litlyx.com', 50, 760, { align: 'center' });
pdf.image('pdf_images/logo.png', 460, 700, { width: 100 });
pdf.image('./server/pdf/pdf_images/logo.png', 460, 700, { width: 100 });
pdf.end();
return pdf;

7
dashboard/server/api/timeline/sessions_duration.ts
View File

@@ -4,12 +4,12 @@ import { executeAdvancedTimelineAggregation, fillAndMergeTimelineAggregationV2 }
export default defineEventHandler(async event => {
const data = await getRequestDataOld(event, { requireSchema: false, requireSlice: true });
const data = await getRequestData(event, ['SLICE', 'GUEST', 'DOMAIN', 'RANGE']);
if (!data) return;
const { pid, from, to, slice, project_id, timeOffset } = data;
const { pid, from, to, slice, project_id, timeOffset, domain } = data;
const cacheKey = `timeline:sessions_duration:${pid}:${slice}:${from}:${to}`;
const cacheKey = `timeline:sessions_duration:${pid}:${slice}:${from}:${to}:${domain}`;
const cacheExp = 60;
return await Redis.useCacheV2(cacheKey, cacheExp, async () => {
@@ -17,6 +17,7 @@ export default defineEventHandler(async event => {
projectId: project_id,
model: SessionModel,
from, to, slice,
domain,
customGroup: {
duration: { $sum: '$duration' }
},

0
dashboard/pdf_fonts/Poppins-Bold.ttf → dashboard/server/pdf/pdf_fonts/Poppins-Bold.ttf
View File

0
dashboard/pdf_fonts/Poppins-Italic.ttf → dashboard/server/pdf/pdf_fonts/Poppins-Italic.ttf
View File

0
dashboard/pdf_fonts/Poppins-Medium.ttf → dashboard/server/pdf/pdf_fonts/Poppins-Medium.ttf
View File

0
dashboard/pdf_fonts/Poppins-Regular.ttf → dashboard/server/pdf/pdf_fonts/Poppins-Regular.ttf
View File

0
dashboard/pdf_fonts/Poppins-SemiBold.ttf → dashboard/server/pdf/pdf_fonts/Poppins-SemiBold.ttf
View File

0
dashboard/pdf_images/c.png → dashboard/server/pdf/pdf_images/c.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

0
dashboard/pdf_images/d.png → dashboard/server/pdf/pdf_images/d.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

0
dashboard/pdf_images/logo.png → dashboard/server/pdf/pdf_images/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB