Skip to content

Commit

Permalink
Merge pull request #97 from REAN-Foundation/assessment_metrics
Browse files Browse the repository at this point in the history 
Assessment metrics
  • Loading branch information
@dattatraya-inflection
dattatraya-inflection authored Nov 27, 2024
2 parents 89743e2 + 236895b commit fa85718
Show file tree
Hide file tree
Showing 3 changed files with 242 additions and 15 deletions.
29 changes: 17 additions & 12 deletions src/routes/users/[userId]/home/feature-engagement/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import Graph from './graph.svelte';
import { onMount } from 'svelte';
import { formatMonth, generateMonthSequence } from '../analytics-overview/components/functions';
import AssessmentMetrics from './assessment.metrics.svelte';
// //////////////////////////////////////////////////////////////////////////////////////////////
export let data;
Expand All @@ -14,6 +14,7 @@
let overallHealthJourneyTaskData = data.statistics.HealthJourneyMetrics?.Overall ?? {};
let patientTaskMetrics = data.statistics.PatientTaskMetrics ?? {};
let vitalMetrics = data.statistics.VitalMetrics ?? [];
let assessmentMetrics = data.statistics.AssessmentMetrics ?? {};
healthJourneyWiseTask = (healthJourneyWiseTask ?? []).map((task) => {
const completedTask = (healthJourneyWiseCompletedTask ?? []).find(
Expand All @@ -28,7 +29,7 @@
});
let activeFeature: string = 'Login Session';
const features = ['Login Session', 'Medication', 'Symptoms', 'Vitals', 'Careplan', 'User Tasks'];
const features = ['Login Session', 'Medication', 'Symptoms', 'Vitals', 'Careplan', 'User Tasks', 'Assessment'];
const metricTypes = [
'AccessFrequency',
Expand Down Expand Up @@ -148,15 +149,19 @@
</div>

{#key activeFeature}
{#if Object.keys(currentMetrics).length > 0}
<Graph
feature={activeFeature}
{...currentMetrics}
{medicationManagementdata}
{healthJourneyWiseTask}
{overallHealthJourneyTaskData}
{patientTaskMetrics}
{vitalMetrics}
/>
{#if activeFeature === 'Assessment'}
<AssessmentMetrics {assessmentMetrics} />
{:else}
{#if Object.keys(currentMetrics).length > 0}
<Graph
feature={activeFeature}
{...currentMetrics}
{medicationManagementdata}
{healthJourneyWiseTask}
{overallHealthJourneyTaskData}
{patientTaskMetrics}
{vitalMetrics}
/>
{/if}
{/if}
{/key}
225 changes: 225 additions & 0 deletions src/routes/users/[userId]/home/feature-engagement/assessment.metrics.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<script lang="ts">
import Tooltip from '$lib/components/tooltip.svelte';
import { Helper } from '$lib/utils/helper';
///////////////////////////////////////////////////////////////////////////
export let assessmentMetrics;
let assessmentQueryResponseDetails = assessmentMetrics?.AssessmentQueryResponseDetails ?? [];
let careplanWiseAssessmentCompletionCount = assessmentMetrics?.CareplanWiseAssessmentCompletionCount ?? [];
let customAssessmentCompletionCount = assessmentMetrics?.CustomAssessmentCompletionCount ?? [];
let selectedAssessmentData = [];
let selectedCareplanAssessmentData = [];
const assessmentTableHeaders = ['Question', 'Response Type', 'Response Text', 'Response Count'];
const careplanTableHeaders = ['Completed Count', 'Inprogress Count'];
let selectedCode = 'Careplan';
const uniqueTitles = [...new Set(assessmentQueryResponseDetails.map((item) => item.assessment_template_title))];
let selectedAssessment = uniqueTitles.length > 0 ? uniqueTitles[0] : '';
function mergeAssessmentCompletionCounts(careplanData, customData) {
const customEntries = customData.map((item) => ({
...item,
care_plan_code: item.action_type
}));
return [...careplanData, ...customEntries];
}
const mergedData = mergeAssessmentCompletionCounts(
careplanWiseAssessmentCompletionCount,
customAssessmentCompletionCount
);
const uniqueCodes = [...new Set(mergedData.map((item) => item.care_plan_code))];
function getSelectedAssessmentData() {
if (selectedAssessment) {
selectedAssessmentData = assessmentQueryResponseDetails.filter(
(item) => item.assessment_template_title === selectedAssessment
);
}
}
function getSelectedCareplanAssessmentData() {
if (selectedCode) {
selectedCareplanAssessmentData = mergedData.filter((item) => item.care_plan_code === selectedCode);
}
}
getSelectedCareplanAssessmentData();
getSelectedAssessmentData();
</script>

<div class="flex justify-center items-center h-full min-w-full py-10">
<div
class="min-w-full flex overflow-x-auto overflow-hidden justify-center items-center rounded-lg shadow-xl border border-secondary-100 dark:border-surface-700 sm:px-4"
>
<div class="w-full">
<div class="flex flex-col items-center justify-between py-4">
<h4 class="text-lg font-semibold text-center flex-grow">Careplan Metrics</h4>

<div class="flex items-center ml-auto">
<label
for="select-Plan"
class="mr-2">Select</label
>
<select
id="select-Plan"
bind:value={selectedCode}
on:change={getSelectedCareplanAssessmentData}
class="select border border-secondary-100 dark:border-surface-700 rounded mr-8"
>
{#each uniqueCodes as code}
<option value={code}>{code}</option>
{/each}
</select>
</div>
</div>
<div class="sm:px-6 lg:px-8 col-span-2 items-center justify-center pb-8">
<table class="min-w-full border border-secondary-100 dark:border-surface-700 rounded-lg">
<thead>
<tr class="border border-secondary-100 dark:border-surface-700">
{#each careplanTableHeaders as header}
<th
class="py-3 text-left text-sm font-semibold sm:pl-3 border border-secondary-100 dark:border-surface-700"
>
{header}
</th>
{/each}
</tr>
</thead>
<tbody>
{#if selectedCareplanAssessmentData.length > 0}
{#each selectedCareplanAssessmentData as row}
<tr
class="hover:bg-secondary-50 dark:hover:bg-surface-800 transition border border-secondary-100 dark:border-surface-700"
>
<td
class="whitespace-nowrap text-sm px-3 py-2 border border-secondary-100 dark:border-surface-700"
>
{row.completed_assessment_count}
</td>
<td
class="whitespace-nowrap text-sm px-3 py-2 border border-secondary-100 dark:border-surface-700"
>
{row.in_progress_assessment_count}
</td>
</tr>
{/each}
{:else}
<tr>
<td
colspan={assessmentTableHeaders.length}
class="text-center py-4 text-sm text-gray-500"
>
No data available for the selected title.
</td>
</tr>
{/if}
</tbody>
</table>
</div>
</div>
</div>
</div>

<div class="flex justify-center items-center h-full min-w-full">
<div
class="min-w-full flex overflow-x-auto overflow-hidden justify-center items-center rounded-lg shadow-xl border border-secondary-100 dark:border-surface-700 sm:px-4"
>
<div class="w-full">
<div class="flex flex-col items-center justify-between py-4">
<h4 class="text-lg font-semibold text-center flex-grow">Assessment Metrics</h4>

<div class="flex items-center ml-auto mt-3">
<label
for="select-Plan"
class="mr-2">Select Assessment</label
>
<select
id="select-Plan"
bind:value={selectedAssessment}
on:change={getSelectedAssessmentData}
class="select border border-secondary-100 dark:border-surface-700 rounded mr-8"
>
{#each uniqueTitles as title}
<option value={title}>{title}</option>
{/each}
</select>
</div>
</div>
<div class="px-2 sm:px-6 lg:px-8 col-span-2 items-center justify-center pb-8">
<div class="flow-root">
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8 mt-4">
<div class="inline-block min-w-full align-middle sm:px-6 lg:px-8">
<table class="min-w-full border border-secondary-100 dark:border-surface-700 rounded-lg">
<thead>
<tr class="border border-secondary-100 dark:border-surface-700">
{#each assessmentTableHeaders as header}
<th
class="py-3 text-left text-sm font-semibold sm:pl-3 border border-secondary-100 dark:border-surface-700"
>
{header}
</th>
{/each}
</tr>
</thead>
<tbody>
{#if selectedAssessmentData.length > 0}
{#each selectedAssessmentData as row}
<tr
class="hover:bg-secondary-50 dark:hover:bg-surface-800 transition border border-secondary-100 dark:border-surface-700"
>
<td
class="whitespace-nowrap text-sm px-3 py-2 border border-secondary-100 dark:border-surface-700"
>
<!-- {row.node_title} -->
<!-- {Helper.truncateText(row.node_title, 50)} -->
<Tooltip text={row.node_title || 'Not specified'}>
<span class="cursor-pointer">
{row.node_title !== null ? Helper.truncateText(row.node_title, 40) : 'Not specified'}
</span>
</Tooltip>
</td>
<td
class="whitespace-nowrap text-sm px-3 py-2 border border-secondary-100 dark:border-surface-700"
>
{row.query_response_type}
</td>
<td
class="whitespace-nowrap text-sm px-3 py-2 border border-secondary-100 dark:border-surface-700"
>
<!-- {Helper.truncateText(row.response_option_text, 40)} -->
<!-- {row.response_option_text} -->
<Tooltip text={row.response_option_text || 'Not specified'}>
<span class="cursor-pointer">
{row.response_option_text !== null ? Helper.truncateText(row.response_option_text, 40) : 'Not specified'}
</span>
</Tooltip>
</td>
<td
class="whitespace-nowrap text-sm px-3 py-2 border border-secondary-100 dark:border-surface-700"
>
{row.response_count}
</td>
</tr>
{/each}
{:else}
<tr>
<td
colspan={assessmentTableHeaders.length}
class="text-center py-4 text-sm text-gray-500"
>
No data available for the selected title.
</td>
</tr>
{/if}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
3 changes: 0 additions & 3 deletions src/routes/users/[userId]/home/feature-engagement/graph.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,12 @@
function getSelectedVitalsData(vitalName: string) {
let standardizedVitalName = Helper.standardizeVitalName(vitalName);
console.log('standardizedVitalName',standardizedVitalName);
if (!vitalMetrics || !Array.isArray(vitalMetrics)) {
console.log('vitalMetricsData is invalid or not an array');
return {
ManualEntryCount: 0,
DeviceEntryCount: 0
};
}
const vitalData = vitalMetrics?.find((item) => {
const itemVitalName = item.vital_name ?? '';
return Helper.standardizeVitalName(itemVitalName) === standardizedVitalName;
Expand Down

0 comments on commit fa85718

Please sign in to comment.