Skip to content

Commit

Permalink
a
Browse files Browse the repository at this point in the history
  • Loading branch information
@benitsch
benitsch committed Jul 11, 2024
1 parent eb25f97 commit 49e51b2
Show file tree
Hide file tree
Showing 5 changed files with 191 additions and 121 deletions.
244 changes: 137 additions & 107 deletions src/components/ParticipationDataList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ Licensed under the Elastic License 2.0. */
import { useErrorHandling } from '../composable/useErrorHandling';
import { reactive, ref, Ref, watch } from 'vue';
import {
ChartProperties,
ChartProperties, ObservationDataView,

Check warning on line 25 in src/components/ParticipationDataList.vue

View workflow job for this annotation

GitHub Actions / Run Tests 

Insert `⏎···`
ObservationDataViewData,
ObservationDataViewDataRow,
ParticipationDataGrouping,
ParticipationDataMapping,
ParticipationDataMapping

Check warning on line 29 in src/components/ParticipationDataList.vue

View workflow job for this annotation

GitHub Actions / Run Tests 

Insert `,`
} from '../models/ParticipationData';
import { AxiosError, AxiosResponse } from 'axios';
import {
Expand All @@ -44,7 +44,7 @@ Licensed under the Elastic License 2.0. */
import { useStudyGroupStore } from '../stores/studyGroupStore';
import Button from 'primevue/button';
const { t } = useI18n();
const { t, d } = useI18n();
const { handleIndividualError } = useErrorHandling();
const { componentsApi } = useComponentsApi();
const { participantsApi } = useParticipantsApi();
Expand All @@ -68,7 +68,7 @@ Licensed under the Elastic License 2.0. */
const filterDateRange = ref();
watch(filterDateRange, () => {
if (filterDateRange.value?.every((v: Date | null) => v !== null)) {
changeView();
applyFilters();
}
});
const filterStudyGroup = ref();
Expand Down Expand Up @@ -149,14 +149,14 @@ Licensed under the Elastic License 2.0. */
);
participantOptions.value = filteredOptions;
changeView();
applyFilters();
}
function clearAllFilters(): void {
filterParticipant.value = undefined;
filterStudyGroup.value = undefined;
filterDateRange.value = undefined;
changeView();
applyFilters();
}
function getStudyGroupIdByParticipantId(id: number): string | undefined {
Expand All @@ -169,7 +169,7 @@ Licensed under the Elastic License 2.0. */
function onParticipantFilterChange(e: DropdownChangeEvent): void {
filterStudyGroup.value = getStudyGroupIdByParticipantId(parseInt(e.value));
changeView();
applyFilters();
}
async function listParticipant(): Promise<void> {
Expand Down Expand Up @@ -227,7 +227,9 @@ Licensed under the Elastic License 2.0. */
});
}
function getUniqueObservationIds(data: ParticipationDataMapping[]): Set<number> {
function getUniqueObservationIds(
data: ParticipationDataMapping[],
): Set<number> {
const uniqueIds = new Set<number>();
data.forEach((item) => {
Expand All @@ -244,29 +246,29 @@ Licensed under the Elastic License 2.0. */
.getViewsForObservation(props.studyId, observationId)
.then((response: AxiosResponse) => {
console.log('Possible views:', response.data);
observationsViewData[observationId] = {
chartType: null,
chartData: null,
possibleViews: response.data,
selectedView: ref(
response.data.length > 0 ? response.data[0].name : '',
),
};
if (response.data.length > 0) {
dataApi
.getObservationData(
props.studyId,
observationId,
observationsViewData[observationId].selectedView,
)
.then((rs: AxiosResponse) => {
console.log('Response:', rs);
const chartData = convertChartTypeData(rs.data);
console.log('chartData:', chartData);
observationsViewData[observationId].chartType = rs.data.chartType;
observationsViewData[observationId].chartData = chartData;
console.log('observationsViewData:', observationsViewData);
});
if (response.data?.length > 0) {
observationsViewData[observationId] = [];
response.data.forEach((view: ObservationDataView) => {
dataApi
.getObservationData(props.studyId, observationId, view.name)
.then((rs: AxiosResponse) => {
console.log('Response:', rs);
const chartData = convertChartTypeData(rs.data);
console.log('chartData:', chartData);
console.log('observationsViewData:', observationsViewData);
observationsViewData[observationId].push({
chartType: rs.data?.chartType ?? null,
chartData: chartData,
view: view,
});
})
.catch((e: AxiosError) => {
handleIndividualError(
e,
'cannot list view data for observation',
);
});
});
}
})
.catch((e: AxiosError) => {
Expand All @@ -275,33 +277,14 @@ Licensed under the Elastic License 2.0. */
}
}
function changeView(observationId?: number): void {
if (observationId) {
dataApi
.getObservationData(
props.studyId,
observationId,
observationsViewData[observationId].selectedView,
filterStudyGroup.value,
filterParticipant.value,
filterDateRange.value ? filterDateRange.value[0] : undefined,
filterDateRange.value ? filterDateRange.value[1] : undefined,
)
.then((rs: AxiosResponse) => {
console.log('Response:', rs);
const chartData = convertChartTypeData(rs.data);
console.log('chartData:', chartData);
observationsViewData[observationId].chartType = rs.data.chartType;
observationsViewData[observationId].chartData = chartData;
console.log('observationsViewData:', observationsViewData);
});
} else {
for (const id in observationsViewData) {
function applyFilters(): void {
for (const observationId in observationsViewData) {
for (const viewData in observationsViewData[observationId]) {
dataApi
.getObservationData(
props.studyId,
+id,
observationsViewData[id].selectedView,
+observationId,
observationsViewData[observationId][viewData].view.name,
filterStudyGroup.value,
filterParticipant.value,
filterDateRange.value ? filterDateRange.value[0] : undefined,
Expand All @@ -311,8 +294,8 @@ Licensed under the Elastic License 2.0. */
console.log('Response:', rs);
const chartData = convertChartTypeData(rs.data);
console.log('chartData:', chartData);
observationsViewData[id].chartType = rs.data.chartType;
observationsViewData[id].chartData = chartData;
observationsViewData[observationId][viewData].chartType = rs.data.chartType;

Check warning on line 297 in src/components/ParticipationDataList.vue

View workflow job for this annotation

GitHub Actions / Run Tests 

Insert `⏎·············`
observationsViewData[observationId][viewData].chartData = chartData;
console.log('observationsViewData:', observationsViewData);
});
}
Expand Down Expand Up @@ -340,7 +323,7 @@ Licensed under the Elastic License 2.0. */
function transformToPieChartData(
observationDataViewData: ObservationDataViewData,
): ChartProperties | null {
if (!observationDataViewData.data.length) {
if (!observationDataViewData.data?.length) {
return null;
}
Expand All @@ -352,7 +335,11 @@ Licensed under the Elastic License 2.0. */
},
title: {
display: true,
text: observationDataViewData.view.title,
text: t(observationDataViewData.view.title),
},
subtitle: {
display: true,
text: t(observationDataViewData.view.description),
},
},
};
Expand Down Expand Up @@ -381,18 +368,59 @@ Licensed under the Elastic License 2.0. */
function transformToLineChartData(
observationDataViewData: ObservationDataViewData,
): ChartProperties | null {
if (!observationDataViewData.data.length) {
if (!observationDataViewData.data?.length) {
return null;
}
// TODO
return null;
const chartOptions = {
responsive: false,
plugins: {
title: {
display: true,
text: t(observationDataViewData.view.title),
},
subtitle: {
display: true,
text: t(observationDataViewData.view.description),
},
},
// scales: {
// y: {
// beginAtZero: true,
// ticks: {
// precision: 0,
// },
// },
// },
};
const labels: string[] | null = formatDateLabels(
observationDataViewData.labels,
);
const obj = mergeStudyGroups(observationDataViewData.data);
const dataSets = [];
for (const [key, values] of Object.entries(obj)) {
dataSets.push({
label: key,
data: replaceZeroValuesWithNull(values),
});
}
return {
type: 'line',
data: {
labels: labels,
datasets: dataSets,
},
options: chartOptions,
} as ChartProperties;
}
function transformToBarChartData(
observationDataViewData: ObservationDataViewData,
): ChartProperties | null {
if (!observationDataViewData.data.length) {
if (!observationDataViewData.data?.length) {
return null;
}
Expand All @@ -406,6 +434,16 @@ Licensed under the Elastic License 2.0. */
},
},
},
plugins: {
title: {
display: true,
text: t(observationDataViewData.view.title),
},
subtitle: {
display: true,
text: t(observationDataViewData.view.description),
},
},
};
const labels: string[] = observationDataViewData.labels;
Expand All @@ -429,7 +467,33 @@ Licensed under the Elastic License 2.0. */
} as ChartProperties;
}
function replaceZeroValuesWithNull(
values: (number | null)[],
): (number | null)[] {
for (let i = 0, len = values.length; i < len; i++) {
if (values[i] === 0) {
values[i] = null;
}
}
return values;
}
function formatDateLabels(labels: string[]): string[] | null {
if (!labels) {
return null;
}
for (let i = 0, len = labels.length; i < len; i++) {
labels[i] = d(new Date(labels[i]), 'long');
}
return labels;
}
function mergeStudyGroups(groups: any[]): { [key: string]: number[] } {
if (!groups) {
return {};
}
return groups.reduce(
(acc, group) => {
if (acc[group.label]) {
Expand All @@ -443,13 +507,6 @@ Licensed under the Elastic License 2.0. */
);
}
function getViewLabelByName(observationId: number, name: string): string | undefined {
console.log(observationId);
console.log(name);
const item = observationsViewData[observationId]?.possibleViews.find((el) => el.name === name);
return item ? item.title : undefined;
}
let factories: ComponentFactory[];
function getObservationTypeLabel(observationType: string): string {
Expand Down Expand Up @@ -536,7 +593,7 @@ Licensed under the Elastic License 2.0. */
{{ $t('data.dataList.title') }}
</h4>

<div class="mb-3 flex justify-between items-center gap-5">
<div class="mb-3 flex items-center justify-between gap-5">
<div class="flex gap-5">
<div>
{{ $t('data.labels.dateRange') }}:
Expand Down Expand Up @@ -603,46 +660,19 @@ Licensed under the Elastic License 2.0. */
/>
</TabPanel>
<TabPanel
v-for="(view, idx) in observationsViewData[observationId]
?.possibleViews"
v-for="(view, idx) in observationsViewData[observationId]"
:key="idx"
:header="view.title"
:header="$t(observationsViewData[observationId][idx].view.label)"
>
<div class="flex">
<div class="flex justify-center">
<Chart
v-if="observationsViewData[observationId]?.chartData"
v-bind="observationsViewData[observationId]?.chartData"
:height="300"
:width="300"
v-if="observationsViewData[observationId][idx].chartData"
v-bind="observationsViewData[observationId][idx].chartData"
:height="500"
:width="1000"
/>
</div>
</TabPanel>
<TabPanel :header="$t('data.labels.visualisation')">
<div class="flex">
<template
v-if="observationsViewData[observationId]?.selectedView"
>
<div class="flex w-full flex-col items-center">
<Dropdown
v-if="observationsViewData[observationId]?.selectedView"
v-model="observationsViewData[observationId].selectedView"
option-value="name"
option-label="title"
:options="
observationsViewData[observationId].possibleViews
"
@update:model-value="changeView(observationId)"
/>
<Chart
v-if="observationsViewData[observationId]?.chartData"
v-bind="observationsViewData[observationId]?.chartData"
:height="300"
:width="300"
/>
<template v-else>
<h3 class="mt-3">{{ $t('data.labels.noDataAvailable')}}</h3>
</template>
</div>
<template v-else>
<h3>{{ $t('data.labels.noDataAvailable') }}</h3>
</template>
</div>
</TabPanel>
Expand Down
11 changes: 0 additions & 11 deletions src/components/data/MoreChart.vue
View file

This file was deleted.

Loading

0 comments on commit 49e51b2

Please sign in to comment.