Skip to content

Commit 5b7e93b

Browse files
botkalistabotkalista
committed
add cap to dates on slices
1 parent 3b6a202 commit 5b7e93b

File tree

8 files changed

+96
-72
lines changed

8 files changed

+96
-72
lines changed

‎dashboard/components/CardTitled.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const props = defineProps<{ title: string, sub?: string }>();
66

77
<template>
88
<LyxUiCard>
9-
<div class="flex flex-col gap-4">
9+
<div class="flex flex-col gap-4 h-full">
1010
<div class="flex items-center">
1111
<div class="flex flex-col grow">
1212
<div class="poppins font-semibold text-[1rem] md:text-[1.3rem] text-text">
@@ -18,8 +18,7 @@ const props = defineProps<{ title: string, sub?: string }>();
1818
</div>
1919
<slot name="header"></slot>
2020
</div>
21-
<div>
22-
21+
<div class="h-full">
2322
<slot></slot>
2423
</div>
2524
</div>

‎dashboard/components/dashboard/ActionableChart.vue‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import type { ChartData, ChartOptions, TooltipModel } from 'chart.js';
55
import { useLineChart, LineChart } from 'vue-chart-3';
66
registerChartComponents();
77
8+
const errorData = ref<{ errored: boolean, text: string }>({
9+
errored: false,
10+
text: ''
11+
})
812
913
const chartOptions = ref<ChartOptions<'line'>>({
1014
responsive: true,
@@ -130,6 +134,7 @@ function externalTooltipHandler(context: { chart: any, tooltip: TooltipModel<'li
130134
const selectLabels: { label: string, value: Slice }[] = [
131135
{ label: 'Hour', value: 'hour' },
132136
{ label: 'Day', value: 'day' },
137+
{ label: 'Month', value: 'month' },
133138
];
134139
135140
const selectedLabelIndex = ref<number>(1);
@@ -157,19 +162,35 @@ const body = computed(() => {
157162
});
158163
159164
165+
function onResponseError(e: any) {
166+
console.log('ON RESPONSE ERROR')
167+
errorData.value = { errored: true, text: e.response._data.message ?? 'Generic error' }
168+
}
169+
170+
function onResponse(e: any) {
171+
console.log('ON RESPONSE')
172+
if (e.response.status != 500) errorData.value = { errored: false, text: '' }
173+
}
174+
160175
const visitsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/visits`, {
161176
method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
162-
lazy: true, immediate: false
177+
lazy: true, immediate: false,
178+
onResponseError,
179+
onResponse
163180
});
164181
165182
const eventsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/events`, {
166183
method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
167-
lazy: true, immediate: false
184+
lazy: true, immediate: false,
185+
onResponseError,
186+
onResponse
168187
});
169188
170189
const sessionsData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/sessions`, {
171190
method: 'POST', ...signHeaders({ v2: 'true' }), body, transform: transformResponse,
172-
lazy: true, immediate: false
191+
lazy: true, immediate: false,
192+
onResponseError,
193+
onResponse
173194
});
174195
175196
@@ -310,9 +331,14 @@ const inLiveDemo = isLiveDemo();
310331
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
311332
</div>
312333

313-
<div class="flex flex-col items-end" v-if="readyToDisplay">
334+
<div class="flex flex-col items-end" v-if="readyToDisplay && !errorData.errored">
314335
<LineChart ref="lineChartRef" class="w-full h-full" v-bind="lineChartProps"> </LineChart>
315336
</div>
337+
338+
<div v-if="errorData.errored" class="flex items-center justify-center py-8">
339+
{{ errorData.text }}
340+
</div>
341+
316342
</CardTitled>
317343
</template>
318344

‎dashboard/components/dashboard/EventsChart.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const headers = computed(() => {
104104
'x-to': safeSnapshotDates.value.to,
105105
'Authorization': authorizationHeaderComputed.value,
106106
'x-schema': 'events',
107-
'x-limit': "10",
107+
'x-limit': "6",
108108
'x-pid': activeProjectId.data.value || ''
109109
}
110110
});

‎dashboard/components/events/EventsStackedBarChart.vue‎

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,26 +32,26 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
3232
const parsedDatasets: any[] = [];
3333
3434
const colors = [
35-
"#5655d0",
36-
"#6bbbe3",
37-
"#a6d5cb",
38-
"#fae0b9",
39-
"#f28e8e",
40-
"#e3a7e4",
41-
"#c4a8e1",
42-
"#8cc1d8",
43-
"#f9c2cd",
44-
"#b4e3b2",
45-
"#ffdfba",
46-
"#e9c3b5",
47-
"#d5b8d6",
48-
"#add7f6",
49-
"#ffd1dc",
50-
"#ffe7a1",
51-
"#a8e6cf",
52-
"#d4a5a5",
53-
"#f3d6e4",
54-
"#c3aed6"
35+
"#5655d0",
36+
"#6bbbe3",
37+
"#a6d5cb",
38+
"#fae0b9",
39+
"#f28e8e",
40+
"#e3a7e4",
41+
"#c4a8e1",
42+
"#8cc1d8",
43+
"#f9c2cd",
44+
"#b4e3b2",
45+
"#ffdfba",
46+
"#e9c3b5",
47+
"#d5b8d6",
48+
"#add7f6",
49+
"#ffd1dc",
50+
"#ffe7a1",
51+
"#a8e6cf",
52+
"#d4a5a5",
53+
"#f3d6e4",
54+
"#c3aed6"
5555
];
5656
5757
for (let i = 0; i < fixed.allKeys.length; i++) {
@@ -74,8 +74,26 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
7474
}
7575
}
7676
77+
const errorData = ref<{ errored: boolean, text: string }>({
78+
errored: false,
79+
text: ''
80+
})
81+
82+
83+
function onResponseError(e: any) {
84+
console.log('ON RESPONSE ERROR')
85+
errorData.value = { errored: true, text: e.response._data.message ?? 'Generic error' }
86+
}
87+
88+
function onResponse(e: any) {
89+
console.log('ON RESPONSE')
90+
if (e.response.status != 500) errorData.value = { errored: false, text: '' }
91+
}
92+
7793
const eventsStackedData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/events_stacked`, {
78-
method: 'POST', body, lazy: true, immediate: false, transform: transformResponse, ...signHeaders()
94+
method: 'POST', body, lazy: true, immediate: false, transform: transformResponse, ...signHeaders(),
95+
onResponseError,
96+
onResponse
7997
});
8098
8199
@@ -86,13 +104,17 @@ onMounted(async () => {
86104
</script>
87105

88106
<template>
89-
<div>
107+
<div class="h-full">
90108
<div v-if="eventsStackedData.pending.value" class="flex justify-center py-40">
91109
<i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
92110
</div>
93-
<AdvancedStackedBarChart v-if="!eventsStackedData.pending.value"
111+
<AdvancedStackedBarChart v-if="!eventsStackedData.pending.value && !errorData.errored"
94112
:datasets="eventsStackedData.data.value?.datasets || []"
95113
:labels="eventsStackedData.data.value?.labels || []">
96114
</AdvancedStackedBarChart>
115+
<div v-if="errorData.errored" class="flex items-center justify-center py-8 h-full">
116+
{{ errorData.text }}
117+
</div>
118+
97119
</div>
98120
</template>

‎dashboard/pages/events.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProje
2020
<template>
2121
<div class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col">
2222

23-
<div class="flex gap-6 flex-col xl:flex-row">
23+
<div class="flex gap-6 flex-col xl:flex-row h-full">
2424

25-
<CardTitled :key="refreshKey" class="p-4 flex-[4] w-full" title="Events" sub="Events stacked bar chart.">
25+
<CardTitled :key="refreshKey" class="p-4 flex-[4] w-full h-full" title="Events" sub="Events stacked bar chart.">
2626
<template #header>
2727
<SelectButton @changeIndex="eventsStackedSelectIndex = $event"
2828
:currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
2929
</SelectButton>
3030
</template>
31-
<div>
31+
<div class="h-full">
3232
<EventsStackedBarChart :slice="(selectLabelsEvents[eventsStackedSelectIndex].value as any)">
3333
</EventsStackedBarChart>
3434
</div>

‎dashboard/server/services/PerformanceService.ts‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎dashboard/server/services/TimelineService.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,17 @@ export async function executeAdvancedTimelineAggregation<T = {}>(options: Advanc
2929

3030
const { group, sort, fromParts } = DateService.getQueryDateRange(options.slice);
3131

32+
if (!sort) throw Error('Slice is probably not correct');
33+
34+
const dateDistDays = (new Date(options.to).getTime() - new Date(options.from).getTime()) / (1000 * 60 * 60 * 24)
35+
// 15 Days
36+
if (options.slice === 'hour' && (dateDistDays > 15)) throw Error('Date gap too big for this slice');
37+
// 1 Year
38+
if (options.slice === 'day' && (dateDistDays > 365)) throw Error('Date gap too big for this slice');
39+
// 3 Years
40+
if (options.slice === 'month' && (dateDistDays > 365 * 3)) throw Error('Date gap too big for this slice');
41+
42+
3243
const aggregation = [
3344
{
3445
$match: {

‎shared/services/DateService.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,10 @@ class DateService {
2525

2626
getChartLabelFromISO(iso: string, locale: string, slice: Slice) {
2727
const date = dayjs(iso).locale(locale);
28-
if (slice === 'hour') return date.format('HH:mm')
29-
if (slice === 'day') return date.format('DD/MM')
28+
if (slice === 'hour') return date.format('HH:mm');
29+
if (slice === 'day') return date.format('DD/MM');
30+
if (slice === 'month') return date.format('MM MMMM');
31+
if (slice === 'year') return date.format('YYYY');
3032
return date.format();
3133
}
3234

0 commit comments

Comments
 (0)