mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 07:48:37 +01:00
fix trends + stacked chart
This commit is contained in:
@@ -21,14 +21,24 @@ const chartSlice = computed(() => {
|
|||||||
|
|
||||||
|
|
||||||
function transformResponse(input: { _id: string, count: number }[]) {
|
function transformResponse(input: { _id: string, count: number }[]) {
|
||||||
|
|
||||||
const data = input.map(e => e.count || 0);
|
const data = input.map(e => e.count || 0);
|
||||||
|
|
||||||
const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, chartSlice.value));
|
const labels = input.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, chartSlice.value));
|
||||||
|
|
||||||
const pool = [...input.map(e => e.count || 0)];
|
const pool = [...input.map(e => e.count || 0)];
|
||||||
pool.pop();
|
|
||||||
const avg = pool.reduce((a, e) => a + e, 0) / pool.length;
|
const avg = pool.reduce((a, e) => a + e, 0) / pool.length;
|
||||||
const diffPercent: number = (100 / avg * (input.at(-1)?.count || 0)) - 100;
|
|
||||||
|
const targets = input.slice(Math.floor(input.length / 4 * 3));
|
||||||
|
const targetAvg = targets.reduce((a, e) => a + e.count, 0) / targets.length;
|
||||||
|
|
||||||
|
const diffPercent: number = (100 / avg * (targetAvg)) - 100;
|
||||||
|
|
||||||
const trend = Math.max(Math.min(diffPercent, 99), -99);
|
const trend = Math.max(Math.min(diffPercent, 99), -99);
|
||||||
|
|
||||||
return { data, labels, trend }
|
return { data, labels, trend }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const visitsData = useFetch('/api/timeline/visits', {
|
const visitsData = useFetch('/api/timeline/visits', {
|
||||||
|
|||||||
@@ -14,10 +14,9 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
|
|||||||
data: input,
|
data: input,
|
||||||
from: input[0]._id,
|
from: input[0]._id,
|
||||||
to: safeSnapshotDates.value.to
|
to: safeSnapshotDates.value.to
|
||||||
}, slice.value, {
|
},
|
||||||
advanced: true,
|
slice.value,
|
||||||
advancedGroupKey: 'name'
|
{ advanced: true, advancedGroupKey: 'name' });
|
||||||
});
|
|
||||||
|
|
||||||
const parsedDatasets: any[] = [];
|
const parsedDatasets: any[] = [];
|
||||||
|
|
||||||
@@ -62,6 +61,7 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
|
|||||||
datasets: parsedDatasets,
|
datasets: parsedDatasets,
|
||||||
labels: fixed.labels
|
labels: fixed.labels
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const errorData = ref<{ errored: boolean, text: string }>({
|
const errorData = ref<{ errored: boolean, text: string }>({
|
||||||
@@ -83,7 +83,7 @@ function onResponse(e: any) {
|
|||||||
const eventsStackedData = useFetch(`/api/timeline/events_stacked`, {
|
const eventsStackedData = useFetch(`/api/timeline/events_stacked`, {
|
||||||
lazy: true, immediate: false,
|
lazy: true, immediate: false,
|
||||||
transform: transformResponse,
|
transform: transformResponse,
|
||||||
headers: useComputedHeaders({slice}),
|
headers: useComputedHeaders({ slice }),
|
||||||
onResponseError,
|
onResponseError,
|
||||||
onResponse
|
onResponse
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<LyxUiButton type="secondary" to="https://docs.litlyx.com/custom-events">
|
<LyxUiButton type="secondary" target="_blank" to="https://docs.litlyx.com/custom-events">
|
||||||
Trigger your first event
|
Trigger your first event
|
||||||
</LyxUiButton>
|
</LyxUiButton>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ export function fixMetrics(result: { data: MetricsTimeline[], from: string, to:
|
|||||||
|
|
||||||
const allKeys = !options.advanced ? [] : Array.from(new Set(result.data.map((e: any) => e[options.advancedGroupKey])).values());
|
const allKeys = !options.advanced ? [] : Array.from(new Set(result.data.map((e: any) => e[options.advancedGroupKey])).values());
|
||||||
|
|
||||||
console.log({allKeys})
|
console.log({ allKeys, allDates })
|
||||||
|
|
||||||
const fixed: any[] = allDates.map(matchDate => {
|
const fixed: any[] = allDates.map(matchDate => {
|
||||||
|
|
||||||
@@ -102,9 +102,9 @@ console.log({allKeys})
|
|||||||
if (slice == 'hour') {
|
if (slice == 'hour') {
|
||||||
return `${e._id.getHours().toString().padStart(2, '0')}:00`
|
return `${e._id.getHours().toString().padStart(2, '0')}:00`
|
||||||
} else if (slice == 'day') {
|
} else if (slice == 'day') {
|
||||||
return `${e._id.getDate().toString().padStart(2, '0')}/${e._id.getMonth().toString().padStart(2, '0')}`
|
return `${e._id.getDate().toString().padStart(2, '0')}/${(e._id.getMonth() + 1).toString().padStart(2, '0')}`
|
||||||
} else if (slice == 'month') {
|
} else if (slice == 'month') {
|
||||||
return `${e._id.getMonth().toString().padStart(2, '0')}/${e._id.getFullYear().toString()}`
|
return `${(e._id.getMonth() + 1).toString().padStart(2, '0')}/${e._id.getFullYear().toString()}`
|
||||||
} else if (slice == 'year') {
|
} else if (slice == 'year') {
|
||||||
return `${e._id.getFullYear().toString()}`
|
return `${e._id.getFullYear().toString()}`
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
Reference in New Issue
Block a user