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

[NOT READY] fix dates + charts + ui

Browse Source
This commit is contained in:
Emily
2024-12-09 17:57:50 +01:00
parent 78f979d23a
commit 23b8f7229a
18 changed files with 211 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,23 @@ import { useLineChart, LineChart } from 'vue-chart-3';
const errorData = ref<{ errored: boolean, text: string }>({ errored: false, text: '' })
function createGradient(startColor: string) {
const c = document.createElement('canvas');
const ctx = c.getContext("2d");
let gradient: any = `${startColor}22`;
if (ctx) {
gradient = ctx.createLinearGradient(0, 25, 0, 300);
gradient.addColorStop(0, `${startColor}99`);
gradient.addColorStop(0.35, `${startColor}66`);
gradient.addColorStop(1, `${startColor}22`);
} else {
console.warn('Cannot get context for gradient');
}
return gradient;
}
const chartOptions = ref<ChartOptions<'line'>>({
responsive: true,
maintainAspectRatio: false,
@@ -68,12 +85,32 @@ const chartData = ref<ChartData<'line' | 'bar' | 'bubble'>>({
borderColor: '#5655d7',
borderWidth: 4,
fill: true,
tension: 0.45,
tension: 0.35,
pointRadius: 0,
pointHoverRadius: 10,
hoverBackgroundColor: '#5655d7',
hoverBorderColor: 'white',
hoverBorderWidth: 2,
segment: {
borderColor(ctx, options) {
const todayIndex = visitsData.data.value?.todayIndex;
if (!todayIndex || todayIndex == -1) return '#5655d7';
if (ctx.p1DataIndex >= todayIndex) return '#5655d700';
return '#5655d7'
},
borderDash(ctx, options) {
const todayIndex = visitsData.data.value?.todayIndex;
if (!todayIndex || todayIndex == -1) return undefined;
if (ctx.p1DataIndex == todayIndex - 1) return [3, 5];
return undefined;
},
backgroundColor(ctx, options) {
const todayIndex = visitsData.data.value?.todayIndex;
if (!todayIndex || todayIndex == -1) return createGradient('#5655d7');
if (ctx.p1DataIndex >= todayIndex) return '#5655d700';
return createGradient('#5655d7');
},
},
},
{
label: 'Unique sessions',
@@ -85,18 +122,20 @@ const chartData = ref<ChartData<'line' | 'bar' | 'bubble'>>({
hoverBorderColor: '#4abde8',
hoverBorderWidth: 2,
type: 'bar',
// barThickness: 20,
borderSkipped: ['bottom']
},
{
label: 'Events',
data: [],
backgroundColor: ['#fbbf24'],
borderColor: '#fbbf24',
borderWidth: 2,
hoverBackgroundColor: '#fbbf24',
hoverBorderColor: '#fbbf24',
hoverBorderWidth: 2,
type: 'bubble',
stack: 'combined'
stack: 'combined',
borderColor: ["#fbbf24"]
},
],
});
@@ -109,6 +148,17 @@ function externalTooltipHandler(context: { chart: any, tooltip: TooltipModel<'li
const { chart, tooltip } = context;
const tooltipEl = externalTooltipElement.value;
const currentIndex = tooltip.dataPoints[0].parsed.x;
const todayIndex = visitsData.data.value?.todayIndex;
if (todayIndex && todayIndex >= 0) {
if (currentIndex > todayIndex - 1) {
if (!tooltipEl) return;
return tooltipEl.style.opacity = '0';
}
}
currentTooltipData.value.visits = (tooltip.dataPoints.find(e => e.datasetIndex == 0)?.raw) as number;
currentTooltipData.value.sessions = (tooltip.dataPoints.find(e => e.datasetIndex == 1)?.raw) as number;
currentTooltipData.value.events = ((tooltip.dataPoints.find(e => e.datasetIndex == 2)?.raw) as any)?.r2 as number;
@@ -142,14 +192,19 @@ const selectLabels: { label: string, value: Slice }[] = [
{ label: 'Month', value: 'month' },
];
const selectLablesAvailable = computed<{ label: string, value: Slice, disabled: boolean }[]>(() => {
const selectLabelsAvailable = computed<{ label: string, value: Slice, disabled: boolean }[]>(() => {
return selectLabels.map(e => {
return { ...e, disabled: !DateService.canUseSliceFromDays(snapshotDuration.value, e.value)[0] }
});
})
const selectedSlice = computed<Slice>(() => {
return selectLablesAvailable.value[selectedLabelIndex.value].value
const targetValue = selectLabelsAvailable.value[selectedLabelIndex.value];
if (!targetValue) return 'day';
if (targetValue.disabled) {
selectedLabelIndex.value = selectLabelsAvailable.value.findIndex(e => !e.disabled);
}
return selectLabelsAvailable.value[selectedLabelIndex.value].value
});
const selectedLabelIndex = ref<number>(1);
@@ -158,13 +213,12 @@ const allDatesFull = ref<string[]>([]);
function transformResponse(input: { _id: string, count: number }[]) {
const data = input.map(e => e.count);
console.log('RESPONSE', input);
const labels = input.map(e => DateService.getChartLabelFromISO(e._id, new Date().getTimezoneOffset(), selectedSlice.value));
console.log('LABELS', input);
if (input.length > 0) allDatesFull.value = input.map(e => e._id.toString());
return { data, labels }
const todayIndex = input.findIndex(e => new Date(e._id).getTime() > (Date.now() - new Date().getTimezoneOffset() * 1000 * 60));
return { data, labels, todayIndex }
}
function onResponseError(e: any) {
@@ -200,21 +254,7 @@ watch(readyToDisplay, () => {
})
function createGradient(startColor: string) {
const c = document.createElement('canvas');
const ctx = c.getContext("2d");
let gradient: any = `${startColor}22`;
if (ctx) {
gradient = ctx.createLinearGradient(0, 25, 0, 300);
gradient.addColorStop(0, `${startColor}99`);
gradient.addColorStop(0.35, `${startColor}66`);
gradient.addColorStop(1, `${startColor}22`);
} else {
console.warn('Cannot get context for gradient');
}
return gradient;
}
function onDataReady() {
if (!visitsData.data.value) return;
@@ -228,9 +268,10 @@ function onDataReady() {
chartData.value.datasets[0].data = visitsData.data.value.data;
chartData.value.datasets[1].data = sessionsData.data.value.data;
chartData.value.datasets[2].data = eventsData.data.value.data.map(e => {
const rValue = 25 / maxEventSize * e;
return { x: 0, y: maxChartY + 70, r: isNaN(rValue) ? 0 : rValue, r2: e }
const rValue = 20 / maxEventSize * e;
return { x: 0, y: maxChartY + 20, r: isNaN(rValue) ? 0 : rValue, r2: e }
});
@@ -238,6 +279,22 @@ function onDataReady() {
chartData.value.datasets[1].backgroundColor = [createGradient('#4abde8')];
chartData.value.datasets[2].backgroundColor = [createGradient('#fbbf24')];
(chartData.value.datasets[1] as any).borderSkipped = sessionsData.data.value.data.map((e, i) => {
const todayIndex = eventsData.data.value?.todayIndex || 0;
if (i == todayIndex - 1) return true;
return 'bottom';
});
chartData.value.datasets[2].borderColor = eventsData.data.value.data.map((e, i) => {
const todayIndex = eventsData.data.value?.todayIndex || 0;
if (i == todayIndex - 1) return '#fbbf2400';
return '#fbbf24';
});
updateChart();
}
@@ -251,7 +308,8 @@ const currentTooltipData = ref<{ visits: number, events: number, sessions: numbe
const tooltipNameIndex = ['visits', 'sessions', 'events'];
function onLegendChange(dataset: any, index: number, checked: any) {
dataset.hidden = !checked;
const newValue = !checked;
dataset.hidden = newValue;
}
const legendColors = ref<string[]>(['#5655d7', '#4abde8', '#fbbf24'])
@@ -268,7 +326,7 @@ const legendClasses = ref<string[]>([
<CardTitled title="Trend chart" sub="Easily match Visits, Unique sessions and Events trends." class="w-full">
<template #header>
<SelectButton class="w-fit" @changeIndex="selectedLabelIndex = $event" :currentIndex="selectedLabelIndex"
:options="selectLablesAvailable">
:options="selectLabelsAvailable">
</SelectButton>
</template>

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

@@ -10,7 +10,8 @@ const props = defineProps<{
data?: number[],
labels?: string[],
ready?: boolean,
slow?: boolean
slow?: boolean,
todayIndex: number
}>();
const { snapshotDuration } = useSnapshot()
@@ -34,9 +35,9 @@ const uTooltipText = computed(() => {
</div>
<div class="flex flex-col grow">
<div class="flex items-center gap-2">
<div class="brockmann text-text-dirty text-[1.2rem] 2xl:text-[1.4rem]">
<div class="brockmann text-text-dirty text-[1.2rem] 2xl:text-[1.4rem]">
{{ value }}
</div>
</div>
<div class="poppins text-text-sub text-[.65rem] 2xl:text-[.8rem]"> {{ avg }} </div>
</div>
<div class="poppins text-text-sub text-[.9rem] 2xl:text-[1rem]"> {{ text }} </div>
@@ -58,7 +59,7 @@ const uTooltipText = computed(() => {
</div>
<div class="absolute bottom-0 left-0 w-full h-[50%] flex items-end"
v-if="((props.data?.length || 0) > 0) && ready">
<DashboardEmbedChartCard v-if="ready" :data="props.data || []" :labels="props.labels || []"
<DashboardEmbedChartCard v-if="ready" :todayIndex="todayIndex" :data="props.data || []" :labels="props.labels || []"
:color="props.color">
</DashboardEmbedChartCard>
</div>

40
dashboard/components/dashboard/CountCardOld.vue
View File

@@ -1,40 +0,0 @@
<script lang="ts" setup>
const props = defineProps<{
icon: string,
title: string,
text: string,
sub: string,
color: string
}>();
</script>
<template>
<div class="bg-menu p-4 rounded-xl flex flex-col gap-2 w-full lg:w-[20rem] relative pb-2 lg:pb-4">
<!-- <div class="absolute flex items-center justify-center right-4 top-4 cursor-pointer hover:text-blue-400">
<i class="fal fa-info-circle text-[.9rem] lg:text-[1.4rem]"></i>
</div> -->
<div class="gap-4 flex flex-row items-center lg:items-start lg:gap-2 lg:flex-col">
<div class="w-[2.5rem] h-[2.5rem] lg:w-[3.5rem] lg:h-[3.5rem] flex items-center justify-center rounded-lg"
:style="`background: ${props.color}`">
<i :class="icon" class="text-[1rem] lg:text-[1.5rem]"></i>
</div>
<div class="text-[1rem] lg:text-[1.3rem] text-text-sub/90 poppins">
{{ title }}
</div>
</div>
<div class="flex gap-2 items-center lg:items-end">
<div class="brockmann text-text text-[2rem] lg:text-[2.8rem] grow">
{{ text }}
</div>
<div class="poppins text-text-sub/90 text-[.9rem] lg:text-[1rem]"> {{ sub }} </div>
</div>
</div>
</template>

22
dashboard/components/dashboard/EmbedChartCard.vue
View File

@@ -7,8 +7,10 @@ const props = defineProps<{
data: any[],
labels: string[]
color: string,
todayIndex: number
}>();
const chartOptions = ref<ChartOptions<'line'>>({
responsive: true,
maintainAspectRatio: false,
@@ -48,10 +50,22 @@ const chartData = ref<ChartData<'line'>>({
data: props.data,
backgroundColor: [props.color + '77'],
borderColor: props.color,
borderWidth: 4,
fill: true,
tension: 0.45,
pointRadius: 0
borderWidth: 2,
fill: false,
tension: 0.35,
pointRadius: 0,
segment: {
borderColor(ctx, options) {
if (!props.todayIndex || props.todayIndex == -1) return props.color;
if (ctx.p1DataIndex >= props.todayIndex) return props.color + '00';
return props.color;
},
borderDash(ctx, options) {
if (!props.todayIndex || props.todayIndex == -1) return undefined;
if (ctx.p1DataIndex == props.todayIndex -1) return [2, 4];
return undefined;
},
},
},
],
});

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

@@ -8,8 +8,7 @@ const { snapshot, safeSnapshotDates, snapshotDuration } = useSnapshot()
const chartSlice = computed(() => {
if (snapshotDuration.value <= 3) return 'hour' as Slice;
if (snapshotDuration.value <= 3 * 7) return 'day' as Slice;
if (snapshotDuration.value <= 3 * 30) return 'week' as Slice;
if (snapshotDuration.value <= 32) return 'day' as Slice;
return 'month' as Slice;
});
@@ -31,7 +30,7 @@ function transformResponse(input: { _id: string, count: number }[]) {
const trend = Math.max(Math.min(diffPercent, 99), -99);
return { data, labels, trend }
return { data, labels, trend, input }
}
@@ -92,6 +91,11 @@ const avgSessionDuration = computed(() => {
return `${hours > 0 ? hours + 'h ' : ''}${minutes}m ${seconds.toFixed()}s`
});
const todayIndex = computed(()=>{
if (!visitsData.data.value) return -1;
return visitsData.data.value.input.findIndex(e => new Date(e._id).getTime() > (Date.now() - new Date().getTimezoneOffset() * 1000 * 60));
})
</script>
@@ -99,26 +103,26 @@ const avgSessionDuration = computed(() => {
<template>
<div class="gap-6 px-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 m-cards-wrap:grid-cols-4">
<DashboardCountCard :ready="!visitsData.pending.value" icon="far fa-earth" text="Total visits"
<DashboardCountCard :todayIndex="todayIndex" :ready="!visitsData.pending.value" icon="far fa-earth" text="Total visits"
:value="formatNumberK(visitsData.data.value?.data.reduce((a, e) => a + e, 0) || '...')"
:avg="formatNumberK(avgVisitDay) + '/day'" :trend="visitsData.data.value?.trend"
:data="visitsData.data.value?.data" :labels="visitsData.data.value?.labels" color="#5655d7">
</DashboardCountCard>
<DashboardCountCard :ready="!bouncingRateData.pending.value" icon="far fa-chart-user" text="Bouncing rate"
<DashboardCountCard :todayIndex="todayIndex" :ready="!bouncingRateData.pending.value" icon="far fa-chart-user" text="Bouncing rate"
:value="avgBouncingRate" :trend="bouncingRateData.data.value?.trend" :slow="true"
:data="bouncingRateData.data.value?.data" :labels="bouncingRateData.data.value?.labels" color="#1e9b86">
</DashboardCountCard>
<DashboardCountCard :ready="!sessionsData.pending.value" icon="far fa-user" text="Unique visitors"
<DashboardCountCard :todayIndex="todayIndex" :ready="!sessionsData.pending.value" icon="far fa-user" text="Unique visitors"
:value="formatNumberK(sessionsData.data.value?.data.reduce((a, e) => a + e, 0) || '...')"
:avg="formatNumberK(avgSessionsDay) + '/day'" :trend="sessionsData.data.value?.trend"
:data="sessionsData.data.value?.data" :labels="sessionsData.data.value?.labels" color="#4abde8">
</DashboardCountCard>
<DashboardCountCard :ready="!sessionsDurationData.pending.value" icon="far fa-timer" text="Visit duration"
<DashboardCountCard :todayIndex="todayIndex" :ready="!sessionsDurationData.pending.value" icon="far fa-timer" text="Visit duration"
:value="avgSessionDuration" :trend="sessionsDurationData.data.value?.trend"
:data="sessionsDurationData.data.value?.data" :labels="sessionsDurationData.data.value?.labels"
color="#f56523">

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

@@ -2,7 +2,7 @@
const { closeDialog } = useCustomDialog();
import { sub, format, isSameDay, type Duration } from 'date-fns'
import { sub, format, isSameDay, type Duration, startOfDay, endOfDay } from 'date-fns'
const ranges = [
{ label: 'Last 7 days', duration: { days: 7 } },
@@ -46,14 +46,14 @@ async function confirmSnapshot() {
body: JSON.stringify({
name: snapshotName.value,
color: currentColor.value,
from: selected.value.start.toISOString(),
to: selected.value.end.toISOString()
from: startOfDay(selected.value.start),
to: endOfDay(selected.value.end)
})
});
await updateSnapshots();
closeDialog();
createAlert('Snapshot created','Snapshot created successfully', 'far fa-circle-check', 5000);
createAlert('Snapshot created', 'Snapshot created successfully', 'far fa-circle-check', 5000);
}
</script>