Skip to content

Commit

Permalink
Merge pull request #95 from REAN-Foundation/patient_task_metrics
Browse files Browse the repository at this point in the history 
Added the patient task metric data
  • Loading branch information
@dattatraya-inflection
dattatraya-inflection authored Nov 19, 2024
2 parents 4ace208 + d1a4ed5 commit c1ac106
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 80 deletions.
2 changes: 1 addition & 1 deletion src/lib/components/navbar/dashboard.tabs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
{/if}
</div>
{#if tenantCode === 'default'}
<div class="relative inline-block text-left ml-auto">
<div class="relative inline-block text-left ml-auto pl-2 ">
<div>
<button
type="button"
Expand Down
29 changes: 14 additions & 15 deletions src/routes/users/[userId]/home/feature-engagement/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,24 @@
export let data;
let medicationManagementdata = data.statistics.MedicationManagementMetrics[0];
let healthJourneyWiseTask = data.statistics.HealthJourneyMetrics?.CareplanSpecific?.HealthJourneyWiseTask;
let medicationManagementdata = data.statistics.MedicationManagementMetrics?.[0] ?? {};
let healthJourneyWiseTask = data.statistics.HealthJourneyMetrics?.CareplanSpecific?.HealthJourneyWiseTask ?? [];
let healthJourneyWiseCompletedTask =
data.statistics.HealthJourneyMetrics?.CareplanSpecific?.HealthJourneyWiseCompletedTask;
let overallHealthJourneyTaskData = data.statistics.HealthJourneyMetrics?.Overall;
data.statistics.HealthJourneyMetrics?.CareplanSpecific?.HealthJourneyWiseCompletedTask ?? [];
let overallHealthJourneyTaskData = data.statistics.HealthJourneyMetrics?.Overall ?? {};
let patientTaskMetrics = data.statistics.PatientTaskMetrics ?? {};
console.log('overallHealthJourneyTaskData', overallHealthJourneyTaskData);
console.log('medicationManagementdata', medicationManagementdata);
healthJourneyWiseTask = healthJourneyWiseTask.map((task) => {
const completedTask = healthJourneyWiseCompletedTask.find(
(completed) => completed.careplan_code === task.PlanCode
healthJourneyWiseTask = (healthJourneyWiseTask ?? []).map((task) => {
const completedTask = (healthJourneyWiseCompletedTask ?? []).find(
(completed) => completed?.careplan_code === task?.PlanCode
);
const completedCount = completedTask?.careplan_completed_task_count || 0;
const totalTaskCount = task.careplan_task_count;
const notCompletedCount = totalTaskCount - completedCount;
const completedCount = completedTask?.careplan_completed_task_count ?? 0;
const totalTaskCount = task?.careplan_task_count ?? 0;
const notCompletedCount = Math.max(totalTaskCount - completedCount, 0);
task.careplan_completed_task_count = completedCount;
task.careplan_not_completed_task_count = notCompletedCount;
return task;
});
Expand Down Expand Up @@ -135,6 +132,7 @@
}
$: currentMetrics = featureMetrics[activeFeature] || {};
</script>

<div class="flex mt-4 gap-4">
Expand All @@ -158,6 +156,7 @@
{medicationManagementdata}
{healthJourneyWiseTask}
{overallHealthJourneyTaskData}
{patientTaskMetrics}
/>
{/if}
{/key}
232 changes: 168 additions & 64 deletions src/routes/users/[userId]/home/feature-engagement/graph.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,17 @@
export let feature = undefined;
export let medicationManagementdata;
export let healthJourneyWiseTask;
export let overallHealthJourneyTaskData;
export let overallHealthJourneyTaskData ;
export let patientTaskMetrics;
let selectedGraph = 'graph1';
let percentageGraph = 'graph1';
let selectedPlanCode = 'Overall';
let selectedTaskCategory = 'Overall';
let healthJourneyMetricsData = [];
let taskCategoriesData = [];
let hasMedicationManagementData = Object.keys(medicationManagementdata).length > 0;
console.log('healthJourneyWiseTask',healthJourneyWiseTask);
$: sortedData = dropOffPointsData
.map((value, index) => ({ value, label: dropOffPointsLabels[index] }))
Expand All @@ -27,44 +35,70 @@
medicationManagementdata?.medication_missed_count || 0,
medicationManagementdata?.medication_not_answered_count || 0
];
let taskMetricsLabels = ['Completed', 'Not Completed'];
let categorySpecificData = patientTaskMetrics?.CategorySpecific ?? [];
let overallCompletedTasks = overallHealthJourneyTaskData?.health_journey_completed_task_count ?? 0;
let overallNotCompletedTasks = (overallHealthJourneyTaskData?.health_journey_task_count ?? 0) - overallCompletedTasks;
let overallCompletedTasksCategory = patientTaskMetrics?.Overall?.patient_completed_task_count ?? 0;
let overallNotCompletedTasksCategory = (patientTaskMetrics?.Overall?.patient_task_count ?? 0) - overallCompletedTasksCategory;
let planCodes = ['Overall', ...(healthJourneyWiseTask?.length ? new Set(healthJourneyWiseTask.map((item) => item.PlanCode)) : [])];
let taskCategories = ['Overall', ...(patientTaskMetrics?.CategorySpecific?.length ? new Set(patientTaskMetrics.CategorySpecific.map((item) => item.task_category)) : [])];
let selectedPlanCode = 'Overall';
let healthJourneyMetricsData;
let healthJourneyMetricsLabels = ['Completed', 'Not Completed'];
let overallCompletedTasks = overallHealthJourneyTaskData.health_journey_completed_task_count;
let overallNotCompletedTasks = overallHealthJourneyTaskData.health_journey_task_count - overallCompletedTasks;
let planCodes = ['Overall', ...new Set(healthJourneyWiseTask.map((item) => item.PlanCode))];
function getSelectedHealthJourneyData(planCode) {
const taskData = healthJourneyWiseTask?.find((item) => item?.PlanCode === planCode) ?? {};
const completedCount = taskData?.careplan_completed_task_count ?? 0;
const totalTaskCount = taskData?.careplan_task_count ?? 0;
console.log('Plan Codes', planCodes);
return {
completed: completedCount,
notCompleted: Math.max(totalTaskCount - completedCount, 0)
};
}
function calculateSelectedHealthJourneyData(planCode) {
const taskData = healthJourneyWiseTask.find((item) => item.PlanCode === planCode);
const completedCount = taskData?.careplan_completed_task_count || 0;
const totalTaskCount = taskData?.careplan_task_count || 0;
function getSelectedTaskCategoryData(taskCategory) {
const taskData = categorySpecificData?.find((item) => item?.task_category === taskCategory) ?? {};
const completedCount = taskData?.patient_completed_task_count ?? 0;
const totalTaskCount = taskData?.task_count ?? 0;
return {
completed: completedCount,
notCompleted: totalTaskCount - completedCount
notCompleted: Math.max(totalTaskCount - completedCount, 0)
};
}
function updateHealthJourneyData() {
let stats;
if (selectedPlanCode === 'Overall') {
stats = {
completed: overallCompletedTasks,
notCompleted: overallNotCompletedTasks
completed: overallCompletedTasks ?? 0,
notCompleted: overallNotCompletedTasks ?? 0
};
} else {
stats = calculateSelectedHealthJourneyData(selectedPlanCode);
stats = getSelectedHealthJourneyData(selectedPlanCode);
}
healthJourneyMetricsData = [stats.completed, stats.notCompleted];
console.log('Health Journey Metrics Data', healthJourneyMetricsData);
}
function updateTaskCategoryData() {
let stats;
if (selectedTaskCategory === 'Overall') {
stats = {
completed: overallCompletedTasksCategory ?? 0,
notCompleted: overallNotCompletedTasksCategory ?? 0
};
} else {
stats = getSelectedTaskCategoryData(selectedTaskCategory);
}
taskCategoriesData = [stats.completed, stats.notCompleted];
console.log('Task Category Metrics Data', taskCategoriesData);
}
$: updateHealthJourneyData();
$: updateTaskCategoryData();
</script>

<div class="flex flex-col justify-center">
Expand All @@ -78,9 +112,6 @@
<h4 class="mx-4 text-left justify-center pt-3 py-1 text-lg font-semibold sm:pl-3">
Access Frequency
</h4>
<!-- <h5 class="mr-4 text-left justify-center ml-4 text-sm font-semibold sm:pl-3 mt-[-4px]">
(Frequency After Registration)
</h5> -->
<p class="mx-2 text-left justify-left my-2 pb-1 text-sm sm:pl-3">
The number of times users access a particular feature over time. This metric helps identify
the popularity and utility of features among users.
Expand Down Expand Up @@ -112,9 +143,6 @@
<h4 class="mx-4 text-left justify-center py-1 pt-3 text-lg font-semibold sm:pl-3">
Engagement Rate
</h4>
<!-- <h5 class="mr-4 text-left justify-center ml-4 text-sm font-semibold sm:pl-3 mt-[-4px]">
(Rate After Registration)
</h5> -->
<p class="mx-2 text-left justify-left my-2 pb-1 text-sm sm:pl-3">
This is the ratio of number of unique users engaging with each feature per month to the
total number of active users per month.
Expand Down Expand Up @@ -153,17 +181,6 @@
<h5 class="flex justify-center mx-5 text-sm font-semibold sm:pl-3 mt-[-4px]">
(Days After Registration)
</h5>
<!-- <div class="flex w-full justify-end">
<select
class="mt-4 border border-secondary-100 rounded-lg select pl-2 w-fit"
on:change={(e) => {
selectedGraph = e.target.value;
}}
>
<option value="graph1">User Count</option>
<option value="graph2">Percentage</option>
</select>
</div> -->
<div class="h-fit w-full">
<p class="mx-2 text-left justify-left my-2 pb-1 text-sm sm:pl-3">
The percentage of users who return to a feature after their first use at specific intervals
Expand Down Expand Up @@ -218,17 +235,6 @@
<h5 class="flex justify-start mx-5 text-sm font-semibold sm:pl-3 mt-[-4px]">
(Interval After Registration)
</h5>
<!-- <div class="flex w-full justify-end 0">
<select
class="select pl-2 w-fit mt-4 border border-secondary-100 dark:border-surface-700 rounded-lg"
on:change={(e) => {
percentageGraph = e.target.value;
}}
>
<option value="graph1">User Count</option>
<option value="graph2">Percentage</option>
</select>
</div> -->
<div class="h-fit w-full">
<p class="mx-2 text-left justify-left my-2 pb-1 text-sm sm:pl-3">
The percentage of users who return to a feature after their first use at specific intervals
Expand Down Expand Up @@ -289,7 +295,7 @@
</p>
</div>
<div class="justify-center pb-6">
{#if medicationManagementdata}
{#if hasMedicationManagementData}
<PieChart
data={medicationData}
labels={medicationLabels}
Expand Down Expand Up @@ -364,27 +370,124 @@
created tasks for both overall and individual care plans.
</p>
</div>
<div class="flex w-full justify-end 0">
<select
class="select pl-2 mb-2 w-fit border border-secondary-100 dark:border-surface-700 rounded-lg"
bind:value={selectedPlanCode}
on:change={updateHealthJourneyData}
>
{#each planCodes as planCode}
<option value={planCode}>{planCode}</option>
{#if healthJourneyWiseTask?.length > 0 && planCodes?.length > 0}
<div class="flex w-full justify-end 0">

<select
class="select pl-2 mb-2 w-fit border border-secondary-100 dark:border-surface-700 rounded-lg"
bind:value={selectedPlanCode}
on:change={updateHealthJourneyData}
>
{#each planCodes as planCode}
<option value={planCode}>{planCode}</option>
{/each}
</select>
</div>
<div class="justify-center pb-6">
<!-- {#if healthJourneyMetricsData.length > 0} -->
<PieChart
data={healthJourneyMetricsData}
labels={taskMetricsLabels}
title=""
showLegendData={true}
/>

</div>
{:else}
<div class="h-96 w-full flex pl-10 justify-center font-semibold">
Data not available
</div>
{/if}
</div>

</div>
</div>
<div
class="flex overflow-x-auto justify-center rounded-lg shadow-xl border border-secondary-100 dark:border-surface-700 sm:px-4 w-1/2"
>
<div class="w-full">
<div class="justify-left items-center flex py-3 text-lg sm:pl-3 flex-col">
{#if dropOffPointsData && dropOffPointsLabels}
<p class="font-semibold">DropOff Points</p>
<p class="text-left justify-left my-2 pb-1 text-sm sm:pl-3">
Points in the user flow where users most frequently stop using a feature. Identifying
drop-off points helps in optimizing the user journey and addressing usability challenges
to improve feature completion rates.
</p>
{:else}
DropOff Points (%) (Data not available)
{/if}
</div>
{#if dropOffPointsData && dropOffPointsLabels}
<table
class="min-w-full mt-2 mb-10 rounded-lg border border-secondary-100 dark:border-surface-70"
>
<thead>
<tr>
<th class="py-2 px-4 border-b border-gray-200 font-semibold text-left">Action</th>
<th class="py-2 px-4 border-b border-gray-200 font-semibold text-left">Count</th>
</tr>
</thead>
<tbody class="justify-center">
{#each sortedData as { value, label }}
<tr>
<td class="py-2 px-4 border-b border-gray-200">{label}</td>
<td class="py-2 px-4 border-b border-gray-200">{value}</td>
</tr>
{/each}
</select>
</tbody>
</table>
{:else}
<div class=" w-full p-4">
<p class="justify-center items-center flex text-xl mt-28 leading-3">Data Not Available</p>
</div>
<div class="justify-center pb-6">
{#if healthJourneyMetricsData.length > 0}
<PieChart
data={healthJourneyMetricsData}
labels={healthJourneyMetricsLabels}
title=""
showLegendData={true}
/>
{/if}
{/if}
</div>
</div>
</div>
{:else if feature === 'User Tasks'}
<div class="flex justify-center h-full items-stretch gap-10 w-full mt-10">
<div
class="flex overflow-x-auto justify-center rounded-lg shadow-xl border border-secondary-100 dark:border-surface-700 sm:px-4 w-1/2"
>
<div class="w-full">
<div class="flex items-center flex-col">
<h4 class="mx-4 justify-center py-1 pt-3 text-lg font-semibold sm:pl-3">
Patient Task Metrics
</h4>
<div class="h-fit w-full">
<p class="mx-2 text-left justify-left my-2 pb-1 text-sm sm:pl-3">
This shows the completion rate of patient tasks, comparing completed tasks and
created tasks for both overall and individual task category.
</p>
</div>
{#if categorySpecificData?.length > 0 && taskCategories?.length > 0}
<div class="flex w-full justify-end 0">
<select
class="select pl-2 mb-2 w-fit border border-secondary-100 dark:border-surface-700 rounded-lg"
bind:value={selectedTaskCategory}
on:change={updateTaskCategoryData}
>
{#each taskCategories as taskCategory}
<option value={taskCategory}>{taskCategory}</option>
{/each}
</select>
</div>
<div class="justify-center pb-6">
{#if taskCategoriesData.length > 0}
<PieChart
data={taskCategoriesData}
labels={taskMetricsLabels}
title=""
showLegendData={true}
/>
{/if}
</div>
{:else}
<div class="h-96 w-full flex pl-10 justify-center font-semibold">
Data not available
</div>
{/if}
</div>
</div>
</div>
Expand Down Expand Up @@ -432,6 +535,7 @@
</div>
</div>
{:else}

<div class="mt-10 flex justify-center items-center h-full gap-10 w-full">
<div
class="flex flex-col overflow-x-auto justify-center items-center rounded-lg shadow-xl border border-secondary-100 dark:border-surface-700 sm:px-4 w-1/2"
Expand Down

0 comments on commit c1ac106

Please sign in to comment.