Skip to content

Commit

Permalink
Merge pull request #90 from REAN-Foundation/medecation_manegement
Browse files Browse the repository at this point in the history 
Implementation of medication management
  • Loading branch information
@dattatraya-inflection
dattatraya-inflection authored Oct 25, 2024
2 parents 58e2e4e + e230872 commit becde6a
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 103 deletions.
17 changes: 14 additions & 3 deletions src/lib/components/analytics/PieChart.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
const tickColorLight = getTickColorLight();
const tickColorDark = getTickColorDark();
export let labels: [];
export let data: [];
export let labels: string[];
export let data: number[];
export let title: string;
let pieChart;
Expand Down Expand Up @@ -58,7 +58,18 @@
weight: 'normal',
lineHeight: 1.2
}
}
},
tooltip: {
callbacks: {
label: (context) => {
const label = context.label || '';
const value = context.raw as number;
const total = context.dataset.data.reduce((acc, curr) => acc + (curr as number), 0);
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
return `${label}: ${value} (${percentage}%)`;
}
}
},
}
}
});
Expand Down
11 changes: 11 additions & 0 deletions src/lib/components/users-stats/charts/pie-chart.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,17 @@
color: document.documentElement.classList.contains('dark') ? tickColorDark : tickColorLight
}
},
tooltip: {
callbacks: {
label: (context) => {
const label = context.label || '';
const value = context.raw as number;
const total = context.dataset.data.reduce((acc, curr) => acc + (curr as number), 0);
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
return `${label}: ${value} (${percentage}%)`;
}
}
},
title: {
display: false,
text: title,
Expand Down
7 changes: 6 additions & 1 deletion src/routes/users/[userId]/home/feature-engagement/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
import Graph from './graph.svelte';
import { onMount } from 'svelte';
import { formatMonth, generateMonthSequence } from '../analytics-overview/components/functions';
// //////////////////////////////////////////////////////////////////////////////////////////////
export let data;
let medicationManagementdata = data.statistics.MedicationManagementMetrics[0];
let activeFeature: string = 'Login Session';
const features = ['Login Session', 'Medication', 'Symptoms', 'Vitals', 'Careplan', 'User Tasks'];
Expand Down Expand Up @@ -125,6 +130,6 @@

{#key activeFeature}
{#if Object.keys(currentMetrics).length > 0}
<Graph {...currentMetrics} />
<Graph feature = {activeFeature} {...currentMetrics} medicationManagementdata = {medicationManagementdata} />
{/if}
{/key}
230 changes: 131 additions & 99 deletions src/routes/users/[userId]/home/feature-engagement/graph.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<script lang="ts">
import BarChart from '$lib/components/analytics/BarChart.svelte';
import PieChart from '$lib/components/analytics/PieChart.svelte';
import RetentionGraphs from '$lib/components/analytics/RetentionGraphs.svelte';
/////////////////////////////////////////////////
export let accessFrequencyData, accessFrequencyLabels;
export let engagementRateData, engagementRateLabels;
export let retentionRateDaysData, retentionRateDaysLabels, retentionRateDaysRate;
export let retentionRateIntervalsData, retentionRateIntervalsLabels, retentionRateIntervalsRate;
export let dropOffPointsData, dropOffPointsLabels;
export let feature = undefined;
$: sortedData = dropOffPointsData
.map((value, index) => ({ value, label: dropOffPointsLabels[index] }))
.sort((a, b) => parseInt(b.value) - parseInt(a.value));
Expand All @@ -16,6 +19,13 @@
let selectedGraph = 'graph1';
let percentageGraph = 'graph1';
export let medicationManagementdata;
let medicationLabels = ['Taken', 'Not Taken', 'Not Specified'];
let medicationData = [
medicationManagementdata.medication_taken_count,
medicationManagementdata.medication_missed_count,
medicationManagementdata.medication_not_answered_count
];
</script>

<div class="flex flex-col justify-center">
Expand Down Expand Up @@ -92,63 +102,19 @@
</div>
</div>
</div>
<div class="flex justify-center items-center h-full gap-10 w-full">
<div class="flex justify-center h-full items-stretch gap-10 w-full">
<div
class="flex 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"
>
<!-- <div class="w-full">
<div class="w-full">
<div class="flex items-center flex-col">
<h4 class="mx-4 text-left justify-center py-1 pt-3 text-lg font-semibold sm:pl-3">
<h4 class="mx-4 justify-center py-1 pt-3 text-lg font-semibold sm:pl-3">
Retention After Registration
</h4>
<h5 class="mr-4 text-left justify-center ml-4 text-sm font-semibold sm:pl-3 mt-[-4px]">
<h5 class="flex justify-center mx-5 text-sm font-semibold sm:pl-3 mt-[-4px]">
(Days After Registration)
</h5>
<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 (day
1, day 7, day 30). Retention rates measure user loyalty and the ability of the feature to keep
users engaged over time.
</p>
</div>
{#if retentionRateDaysData.length > 0 && retentionRateDaysLabels.length > 0}
<div class="h-96">
<RetentionGraphs
dataSource={retentionRateDaysData}
labels={retentionRateDaysLabels}
title="Retention User Count On Specific Days (%)"
/>
</div>
{:else}
<div class="h-[400px] w-[400px] p-4">
<p
style="color:{fontColor}"
class="justify-left items-center flex text-2xl"
>
</p>
<p
style="color:{fontColor}"
class="justify-center items-center flex text-xl mt-28 leading-3"
>
Data Not Available
</p>
</div>
{/if}
</div> -->
<!-- </div> -->

<!-- <div class="flex justify-center items-center h-full gap-10 w-full">
<div
class="flex 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"
> -->
<div class="w-full">
<div class="flex items-center flex-col">
<h4 class="mx-4 text-left justify-center py-1 pt-3 text-lg font-semibold sm:pl-3">
Retention After Registration
</h4>
<div class="flex w-full justify-end">
<h5 class="flex text-center justify-center mx-5 text-sm font-semibold sm:pl-3 mt-[-4px]">
(Days After Registration)
</h5>
<select
class="mt-4 border border-secondary-100 rounded-lg select pl-2 w-fit"
on:change={(e) => {
Expand Down Expand Up @@ -192,30 +158,18 @@
</div>

<div
class="flex h-[100%] 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"
class="flex 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"
>
<div class="w-full">
<!-- <div class="flex items-center flex-col">
<h4 class="mx-4 text-left justify-center pt-3 py-1 text-lg font-semibold sm:pl-3">
<div class="flex items-center text-center flex-col">
<h4 class="mx-4 justify-center py-1 pt-3 text-lg font-semibold sm:pl-3">
Retention After Registration
</h4>
<h5 class="mr-4 text-left justify-center ml-4 text-sm font-semibold sm:pl-3 mt-[-4px]">
<h5 class="flex justify-start mx-5 text-sm font-semibold sm:pl-3 mt-[-4px]">
(Interval After Registration)
</h5>
<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 (0-1
days, 1-3 days, 3-7 days, etc). This is just another way to look at the retention on specific
days.
</p>
</div> -->
<div class="flex items-center flex-col">
<h4 class="mx-4 text-left justify-center py-1 pt-3 text-lg font-semibold sm:pl-3">
Retention After Registration
</h4>
<div class="flex w-full justify-end 0">
<h5 class="flex text-center justify-start mx-5 text-sm font-semibold sm:pl-3 mt-[-4px]">
(Interval After Registration)
</h5>

<select
class="select pl-2 w-fit mt-4 border border-secondary-100 dark:border-surface-700 rounded-lg"
on:change={(e) => {
Expand Down Expand Up @@ -340,46 +294,124 @@
</div>
</div> -->

<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"
>
<div class="h-fit w-full">
<div class="justify-left items-center flex py-3 text-lg sm:pl-3 flex-col">
{#if feature === 'Medication'}
<div class="flex justify-center h-full items-stretch gap-10 w-full mt-10">
<div
class="flex 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"
>
<div class="w-full">
<div class="flex items-center flex-col">
<h4 class="mx-4 text-left justify-center py-1 pt-5 text-lg font-semibold sm:pl-3">
Medication Management
</h4>
<div class="h-fit w-full">
<p class="mx-2 text-left justify-left my-2 pb-1 text-sm sm:pl-3">
The medication adherence showing the percentage of scheduled doses taken on time, alongside the number and percentage of missed doses.
</p>
</div>
<!-- <Doughnut
data = {medicationData}
labels = {medicationLabels}
title=''
/> -->
<div class="justify-center pb-6">
<PieChart
data={medicationData}
labels={medicationLabels}
title=""
/>
</div>

</div>
</div>
</div>
<div
class="flex 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"
>
<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 (%) (No Data available)
{/if}
</div>
{#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>
<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}
</tbody>
</table>
{:else}
DropOff Points (%) (No Data available)
<div class=" w-full p-4">
<p class="justify-center items-center flex text-xl mt-28 leading-3">Data Not Available</p>
</div>
{/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 }}
</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"
>
<div class="h-fit 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 (%) (No Data 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>
<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>
<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>
{/each}
</tbody>
</table>
{:else}
<div class="h-fit w-full p-4">
<p class="justify-center items-center flex text-xl mt-28 leading-3">Data Not Available</p>
</div>
{/if}
</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}
</tbody>
</table>
{:else}
<div class="h-fit w-full p-4">
<p class="justify-center items-center flex text-xl mt-28 leading-3">Data Not Available</p>
</div>
{/if}
</div>
</div>
</div>
</div>
{/if}
</div>

0 comments on commit becde6a

Please sign in to comment.