From 22ca2f68c116e8110f5ff1282ed916a056871263 Mon Sep 17 00:00:00 2001 From: Laurent Ouma Date: Tue, 2 Jul 2024 10:26:02 +0300 Subject: [PATCH 1/8] Added esm-pharmacy-app monorepo --- .../care-panel-dashboard.component.tsx | 7 +- .../src/hooks/usePatientIITScore.ts | 21 ++++++ .../iit-risk-score.component.tsx | 71 +++++++++++++++++++ .../src/iit-risk-score/iits-risk-score.scss | 14 ++++ .../esm-care-panel-app/src/types/index.ts | 7 ++ 5 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts create mode 100644 packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx create mode 100644 packages/esm-care-panel-app/src/iit-risk-score/iits-risk-score.scss diff --git a/packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.component.tsx b/packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.component.tsx index 044f8130b..10cc3cca2 100644 --- a/packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.component.tsx +++ b/packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.component.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { Tabs, TabList, Tab, TabPanel, TabPanels, Layer, Tile } from '@carbon/react'; -import { Dashboard, CloudMonitoring, Printer } from '@carbon/react/icons'; +import { Dashboard, CloudMonitoring, Printer, Analytics } from '@carbon/react/icons'; import { useTranslation } from 'react-i18next'; import CarePanel from '../care-panel/care-panel.component'; import CarePrograms from '../care-programs/care-programs.component'; import PatientSummary from '../patient-summary/patient-summary.component'; import styles from './care-panel-dashboard.scss'; +import CarePanellIITRiskScore from '../iit-risk-score/iit-risk-score.component'; type CarePanelDashboardProps = { patientUuid: string; formEntrySub: any; launchPatientWorkspace: Function }; @@ -28,6 +29,7 @@ const CarePanelDashboard: React.FC = ({ {t('panelSummary', 'Panel summary')} {t('enrollments', 'Program enrollment')} + {t('riskScore', 'IIT Risk Score')} @@ -40,6 +42,9 @@ const CarePanelDashboard: React.FC = ({ + + + diff --git a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts new file mode 100644 index 000000000..59c27be60 --- /dev/null +++ b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts @@ -0,0 +1,21 @@ +import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework'; +import useSWR from 'swr'; +import { IITRiskScore } from '../types'; + +const usePatientIITScore = (patientUuid: string) => { + const url = `${restBaseUrl}/keml/patientiitscore?patientUuid=${patientUuid}`; + const { data, error, isLoading } = useSWR>(url, openmrsFetch); + + return { + isLoading, + error, + riskScore: data?.data ?? { + riskScore: 'High', + evaluationDate: '2023-07-01', + description: 'Risk of heart disease based on various factors.', + riskFactors: 'High cholesterol, Smoking, Lack of exercise, Poor diet', + }, + }; +}; + +export default usePatientIITScore; diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx new file mode 100644 index 000000000..3b46601bb --- /dev/null +++ b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx @@ -0,0 +1,71 @@ +import { Column, Row, SkeletonText } from '@carbon/react'; +import { ErrorState } from '@openmrs/esm-framework'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import usePatientIITScore from '../hooks/usePatientIITScore'; +import styles from './iits-risk-score.scss'; + +interface CarePanellIITRiskScoreProps { + patientUuid: string; +} + +const CarePanellIITRiskScore: React.FC = ({ patientUuid }) => { + const { riskScore, error, isLoading } = usePatientIITScore(patientUuid); + const { t } = useTranslation(); + + if (isLoading) + return ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ); + + if (error) { + return ; + } + return ( +
+ + + Risk Score: +

{riskScore?.riskScore}

+ + + Evaluation Date: +

{riskScore?.evaluationDate}

+ + + + + Description: +

{riskScore?.description}

+ + + Risk Factors: +

{riskScore?.riskFactors}

+ + +
+ ); +}; + +export default CarePanellIITRiskScore; diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iits-risk-score.scss b/packages/esm-care-panel-app/src/iit-risk-score/iits-risk-score.scss new file mode 100644 index 000000000..27b78126e --- /dev/null +++ b/packages/esm-care-panel-app/src/iit-risk-score/iits-risk-score.scss @@ -0,0 +1,14 @@ +@use '@carbon/styles/scss/type'; +@use '@carbon/styles/scss/spacing'; +@use '@carbon/colors'; +@import '~@openmrs/esm-styleguide/src/vars'; + +.risk-score-card { + width: 100%; + border: 2px solid $grey-2; +} + +.risk-score-card__item { + flex-grow: 1; + padding: spacing.$spacing-08; +} diff --git a/packages/esm-care-panel-app/src/types/index.ts b/packages/esm-care-panel-app/src/types/index.ts index acb84480f..f61e17bc6 100644 --- a/packages/esm-care-panel-app/src/types/index.ts +++ b/packages/esm-care-panel-app/src/types/index.ts @@ -230,3 +230,10 @@ export interface RegimenLineGroup { regimenLineValue: string; regimen: RegimenItem[]; } + +export interface IITRiskScore { + riskScore: string; + evaluationDate: string; + description: string; + riskFactors: string; +} From 13565d91efde8df5b5d9cc229225a27f4a3ec242 Mon Sep 17 00:00:00 2001 From: Laurent Ouma Date: Tue, 2 Jul 2024 18:11:36 +0300 Subject: [PATCH 2/8] Added Listing for Registration location taged phamacies --- .../esm-pharmacy-app/src/config-schema.ts | 6 + .../src/hooks/usePharmacies.ts | 20 +++ .../pharmacy-card.component.tsx | 47 ++++++ .../src/pharmacy-metrics/pharmacy-card.scss | 80 ++++++++++ .../src/pharmacy-metrics/pharmacy-header.scss | 22 +++ .../pharmacy-metrics-header.component.tsx | 142 ++++++++++++++++++ .../pharmacy-metrics.component.tsx | 43 ++++++ .../pharmacy-metrics/pharmacy-metrics.scss | 11 ++ .../esm-pharmacy-app/src/pharmacy.mock.ts | 0 9 files changed, 371 insertions(+) create mode 100644 packages/esm-pharmacy-app/src/hooks/usePharmacies.ts create mode 100644 packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-card.component.tsx create mode 100644 packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-card.scss create mode 100644 packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-header.scss create mode 100644 packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics-header.component.tsx create mode 100644 packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics.component.tsx create mode 100644 packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics.scss create mode 100644 packages/esm-pharmacy-app/src/pharmacy.mock.ts diff --git a/packages/esm-pharmacy-app/src/config-schema.ts b/packages/esm-pharmacy-app/src/config-schema.ts index d07a785c4..ee990c99d 100644 --- a/packages/esm-pharmacy-app/src/config-schema.ts +++ b/packages/esm-pharmacy-app/src/config-schema.ts @@ -35,9 +35,15 @@ export const configSchema = { }, _validators: [validator((v) => v.length > 0, 'At least one person must be greeted.')], }, + admissionLocationTagUuid: { + _type: Type.String, + _description: 'Location Tag for Phamacy where patient/person is assigned', + _default: 'd23d22c3-a820-4203-a79b-6b3683586d0b', + }, }; export type Config = { casualGreeting: boolean; whoToGreet: Array; + admissionLocationTagUuid: string; }; diff --git a/packages/esm-pharmacy-app/src/hooks/usePharmacies.ts b/packages/esm-pharmacy-app/src/hooks/usePharmacies.ts new file mode 100644 index 000000000..70fedd749 --- /dev/null +++ b/packages/esm-pharmacy-app/src/hooks/usePharmacies.ts @@ -0,0 +1,20 @@ +import { FetchResponse, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework'; +import useSWR from 'swr'; +import { Config } from '../config-schema'; +import { Pharmacy } from '../types'; + +// TODO Custome representation optimization +const useRegistrationTaggedPharmacies = () => { + const config = useConfig(); + const customeRepresentation = 'full'; + const url = `${restBaseUrl}/location?tag=${config.admissionLocationTagUuid}&v=${customeRepresentation}`; + const { isLoading, error, data } = useSWR>(url, openmrsFetch); + + return { + isLoading, + error, + pharmacies: data?.data?.results ?? [], + }; +}; + +export default useRegistrationTaggedPharmacies; diff --git a/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-card.component.tsx b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-card.component.tsx new file mode 100644 index 000000000..12f2d2639 --- /dev/null +++ b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-card.component.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; +import { Layer, Tile } from '@carbon/react'; +import { ArrowRight } from '@carbon/react/icons'; +import { ConfigurableLink } from '@openmrs/esm-framework'; +import styles from './pharmacy-card.scss'; + +interface MetricsCardProps { + label: string; + value: number | string; + headerLabel: string; + children?: React.ReactNode; + service?: string; +} + +const MetricsCard: React.FC = ({ label, value, headerLabel, children }) => { + const { t } = useTranslation(); + + return ( + + +
+
+ + {children} +
+
+ + {t('viewReport', 'View Report')} + + +
+
+
+ +

{value}

+
+ + + ); +}; + +export default MetricsCard; diff --git a/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-card.scss b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-card.scss new file mode 100644 index 000000000..56d8b5839 --- /dev/null +++ b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-card.scss @@ -0,0 +1,80 @@ +@use '@carbon/styles/scss/spacing'; +@use '@carbon/styles/scss/type'; +@import '~@openmrs/esm-styleguide/src/vars'; + +.container { + flex-grow: 1; +} + +/* Tablet viewport */ +:global(.omrs-breakpoint-lt-desktop) { + // The card containing the dropdown element should be the first to overflow on tablet + .cardWithChildren { + order: 3; + } +} + +.tileContainer { + border: 0.0625rem solid $ui-03; + height: 7.875rem; + padding: spacing.$spacing-05; + margin: spacing.$spacing-03 spacing.$spacing-03; +} + +.tileHeader { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: spacing.$spacing-03; +} + +.headerLabel { + @include type.type-style('heading-compact-01'); + color: $text-02; +} + +.totalsLabel { + @include type.type-style('label-01'); + color: $text-02; +} + +.totalsValue { + @include type.type-style('heading-04'); + color: $ui-05; +} + +.headerLabelContainer { + display: flex; + height: spacing.$spacing-07; + + :global(.cds--dropdown__wrapper--inline) { + gap: 0; + margin-top: -0.75rem; + } + + :global(.cds--list-box__menu-icon) { + height: 1rem; + } +} + +.link { + text-decoration: none; + display: flex; + align-items: center; + color: $interactive-01; + + svg { + margin-left: spacing.$spacing-03; + } +} + +// Overriding styles for RTL support +html[dir='rtl'] { + .link { + svg { + margin-right: spacing.$spacing-03; + margin-left: unset; + transform: scale(-1, 1); + } + } +} diff --git a/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-header.scss b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-header.scss new file mode 100644 index 000000000..46ca5fbca --- /dev/null +++ b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-header.scss @@ -0,0 +1,22 @@ +@use '@carbon/styles/scss/spacing'; +@use '@carbon/styles/scss/type'; +@import '~@openmrs/esm-styleguide/src/vars'; + +.metricsContainer { + display: flex; + justify-content: space-between; + background-color: $ui-02; + height: spacing.$spacing-10; + align-items: center; + padding: 0 spacing.$spacing-05; +} + +.metricsTitle { + @include type.type-style('heading-03'); + color: $ui-05; +} + +.actionBtn { + display: flex; + column-gap: 0.5rem; +} diff --git a/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics-header.component.tsx b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics-header.component.tsx new file mode 100644 index 000000000..e943dc362 --- /dev/null +++ b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics-header.component.tsx @@ -0,0 +1,142 @@ +/* eslint-disable no-console */ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { ArrowRight } from '@carbon/react/icons'; +import styles from './pharmacy-header.scss'; +import { Button, TextInput, Modal, Select, ComboBox, SelectItem, DatePickerInput, DatePicker } from '@carbon/react'; + +const MetricsHeader = () => { + const { t } = useTranslation(); + const metricsTitle = t('pharmacySummary', 'Pharmacy Summary'); + const [isModalOpen, setIsModalOpen] = useState(false); + const filterItems = (menu) => { + return menu?.item?.toLowerCase().includes(menu?.inputValue?.toLowerCase()); + }; + + return ( +
+ {metricsTitle} +
+ +
+ setIsModalOpen(false)} + modalLabel="ADMIT BROUGHT IN BODY" + modalHeading="ADMISSION" + hasScrollingContent> + + + +
+ +
+ + + +
+ { + console.log(e); + }} + id="carbon-combobox" + items={[ + 'Married Polygamous', + 'Married Monogamous', + 'Divorced', + 'Widowed', + 'Cohabiting', + 'Single', + 'Not Married', + ]} + downshiftProps={{ + onStateChange: () => { + console.log('the state has changed'); + }, + }} + titleText="Marital Status*" + /> +
+
+ + + +
+ +
+ { + console.log(e); + }} + id="carbon-combobox" + items={['TB', 'Malaria']} + downshiftProps={{ + onStateChange: () => { + console.log('the state has changed'); + }, + }} + titleText="Cause of death*" + /> +
+
+ +
+ ); +}; + +export default MetricsHeader; diff --git a/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics.component.tsx b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics.component.tsx new file mode 100644 index 000000000..57af630da --- /dev/null +++ b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics.component.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import styles from './pharmacy-metrics.scss'; +import MetricsHeader from './pharmacy-metrics-header.component'; +import MetricsCard from './pharmacy-card.component'; + +export interface Service { + uuid: string; + display: string; +} + +function PharmacyMetrics() { + const { t } = useTranslation(); + + return ( + <> + +
+ + + + +
+ + ); +} + +export default PharmacyMetrics; diff --git a/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics.scss b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics.scss new file mode 100644 index 000000000..7b4d655e7 --- /dev/null +++ b/packages/esm-pharmacy-app/src/pharmacy-metrics/pharmacy-metrics.scss @@ -0,0 +1,11 @@ +@use '@carbon/styles/scss/spacing'; +@import '~@openmrs/esm-styleguide/src/vars'; + +.cardContainer { + background-color: $ui-02; + display: flex; + justify-content: space-between; + padding: 0 spacing.$spacing-05 spacing.$spacing-07 spacing.$spacing-03; + flex-flow: row wrap; + margin-top: -(spacing.$spacing-03); +} diff --git a/packages/esm-pharmacy-app/src/pharmacy.mock.ts b/packages/esm-pharmacy-app/src/pharmacy.mock.ts new file mode 100644 index 000000000..e69de29bb From 6349833bedbecd860d7b1e602a1673b0f3764964 Mon Sep 17 00:00:00 2001 From: Laurent Ouma Date: Tue, 9 Jul 2024 07:26:36 +0300 Subject: [PATCH 3/8] fixed spelling --- .../src/iit-risk-score/iit-risk-score.component.tsx | 5 +++-- .../{iits-risk-score.scss => iit-risk-score.scss} | 0 2 files changed, 3 insertions(+), 2 deletions(-) rename packages/esm-care-panel-app/src/iit-risk-score/{iits-risk-score.scss => iit-risk-score.scss} (100%) diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx index 3b46601bb..138c0df30 100644 --- a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx +++ b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx @@ -3,7 +3,7 @@ import { ErrorState } from '@openmrs/esm-framework'; import React from 'react'; import { useTranslation } from 'react-i18next'; import usePatientIITScore from '../hooks/usePatientIITScore'; -import styles from './iits-risk-score.scss'; +import styles from './iit-risk-score.scss'; interface CarePanellIITRiskScoreProps { patientUuid: string; @@ -13,7 +13,7 @@ const CarePanellIITRiskScore: React.FC = ({ patient const { riskScore, error, isLoading } = usePatientIITScore(patientUuid); const { t } = useTranslation(); - if (isLoading) + if (isLoading) { return (
@@ -38,6 +38,7 @@ const CarePanellIITRiskScore: React.FC = ({ patient
); + } if (error) { return ; diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iits-risk-score.scss b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss similarity index 100% rename from packages/esm-care-panel-app/src/iit-risk-score/iits-risk-score.scss rename to packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss From 3c9252aa2ae0f273e932c286933a1935e1f2a8a7 Mon Sep 17 00:00:00 2001 From: Laurent Ouma Date: Tue, 9 Jul 2024 08:25:30 +0300 Subject: [PATCH 4/8] REmoved default iit risc score from hook --- .../esm-care-panel-app/src/hooks/usePatientIITScore.ts | 7 +------ packages/esm-care-panel-app/translations/en.json | 2 ++ packages/esm-patient-flags-app/translations/en.json | 1 - packages/esm-pharmacy-app/translations/en.json | 6 ++++-- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts index 59c27be60..dbc169b46 100644 --- a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts +++ b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts @@ -9,12 +9,7 @@ const usePatientIITScore = (patientUuid: string) => { return { isLoading, error, - riskScore: data?.data ?? { - riskScore: 'High', - evaluationDate: '2023-07-01', - description: 'Risk of heart disease based on various factors.', - riskFactors: 'High cholesterol, Smoking, Lack of exercise, Poor diet', - }, + riskScore: data?.data, }; }; diff --git a/packages/esm-care-panel-app/translations/en.json b/packages/esm-care-panel-app/translations/en.json index 8c523f96d..4ccaf09f4 100644 --- a/packages/esm-care-panel-app/translations/en.json +++ b/packages/esm-care-panel-app/translations/en.json @@ -59,6 +59,7 @@ "height": "Height", "heiOutcome": "HEI Outcome", "hivStatus": "HIV Status", + "iitRiscScore": "IIT Risk Score", "initialRegimen": "Initial regimen", "initialRegimenDate": "Initial regimen date", "ioHistory": " OI history", @@ -103,6 +104,7 @@ "reportDate": "Report date", "respiratoryRate": "Respiratory rate", "restartRegimen": "Restart", + "riskScore": "IIT Risk Score", "save": "Save", "selectReason": "Select Reason", "selectRegimen": "Select Regimen", diff --git a/packages/esm-patient-flags-app/translations/en.json b/packages/esm-patient-flags-app/translations/en.json index 702c5cb35..58822bea5 100644 --- a/packages/esm-patient-flags-app/translations/en.json +++ b/packages/esm-patient-flags-app/translations/en.json @@ -1,5 +1,4 @@ { - "2xChart": "2.x Chart", "clearSearch": "Clear search", "emptyLinkSearchText": "There are no links to display that match the search criteria", "errorPatientFlags": "Error loading patient flags", diff --git a/packages/esm-pharmacy-app/translations/en.json b/packages/esm-pharmacy-app/translations/en.json index 66d1d15d9..1b6fb08e4 100644 --- a/packages/esm-pharmacy-app/translations/en.json +++ b/packages/esm-pharmacy-app/translations/en.json @@ -14,6 +14,7 @@ "noPharmacyPatients": "No Pharmacy Patients to list.", "noPharmacyUsers": "No Pharmacy users to list.", "openmrsId": "OpenMRS ID", + "patient": "Assigned patients", "pharmacies": "Phamacies", "pharmacy": "Commity pharmacy", "pharmacyPatients": "Pharmacy Patients", @@ -21,7 +22,8 @@ "pharmacyUsers": "Pharmacy Users", "sex": "Sex", "stateProvince": "State province", + "tagged": "Tagged phamacies", "tagPharmacy": "Tag pharmacy", - "viewReport": "View Report", - "warning": "Warning!" + "users": "Assigned Users", + "viewReport": "View Report" } From 164c580ee21bd2ce2ec4c1d96c9e28233fea151e Mon Sep 17 00:00:00 2001 From: Laurent Ouma Date: Thu, 11 Jul 2024 08:02:12 +0300 Subject: [PATCH 5/8] Added trend chart on iit for ML tab in care pannell --- .../care-panel-dashboard.component.tsx | 11 ++- .../esm-care-panel-app/src/config-schema.ts | 6 ++ .../src/hooks/usePatientHIVStatus.ts | 18 +++++ .../src/hooks/usePatientIITScore.ts | 7 +- .../iit-risk-score/iit-risk-score-plot.tsx | 77 +++++++++++++++++++ .../iit-risk-score.component.tsx | 7 +- .../src/iit-risk-score/iit-risk-score.scss | 27 ++++++- .../machine-learning.component.tsx | 30 ++++++++ .../machine-learning/machine-learning.scss | 37 +++++++++ .../esm-care-panel-app/src/types/index.ts | 8 ++ 10 files changed, 217 insertions(+), 11 deletions(-) create mode 100644 packages/esm-care-panel-app/src/hooks/usePatientHIVStatus.ts create mode 100644 packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx create mode 100644 packages/esm-care-panel-app/src/machine-learning/machine-learning.component.tsx create mode 100644 packages/esm-care-panel-app/src/machine-learning/machine-learning.scss diff --git a/packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.component.tsx b/packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.component.tsx index 10cc3cca2..ec389f830 100644 --- a/packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.component.tsx +++ b/packages/esm-care-panel-app/src/care-panel-dashboard/care-panel-dashboard.component.tsx @@ -1,13 +1,12 @@ +import { Layer, Tab, TabList, TabPanel, TabPanels, Tabs, Tile } from '@carbon/react'; +import { Analytics, CloudMonitoring, Dashboard } from '@carbon/react/icons'; import React from 'react'; -import { Tabs, TabList, Tab, TabPanel, TabPanels, Layer, Tile } from '@carbon/react'; -import { Dashboard, CloudMonitoring, Printer, Analytics } from '@carbon/react/icons'; import { useTranslation } from 'react-i18next'; import CarePanel from '../care-panel/care-panel.component'; import CarePrograms from '../care-programs/care-programs.component'; -import PatientSummary from '../patient-summary/patient-summary.component'; +import CarePanelMachineLearning from '../machine-learning/machine-learning.component'; import styles from './care-panel-dashboard.scss'; -import CarePanellIITRiskScore from '../iit-risk-score/iit-risk-score.component'; type CarePanelDashboardProps = { patientUuid: string; formEntrySub: any; launchPatientWorkspace: Function }; @@ -29,7 +28,7 @@ const CarePanelDashboard: React.FC = ({ {t('panelSummary', 'Panel summary')} {t('enrollments', 'Program enrollment')} - {t('riskScore', 'IIT Risk Score')} + {t('machineLearning', 'Machine Learning')} @@ -43,7 +42,7 @@ const CarePanelDashboard: React.FC = ({ - + diff --git a/packages/esm-care-panel-app/src/config-schema.ts b/packages/esm-care-panel-app/src/config-schema.ts index 093ca4f54..fd58c51fd 100644 --- a/packages/esm-care-panel-app/src/config-schema.ts +++ b/packages/esm-care-panel-app/src/config-schema.ts @@ -4,6 +4,7 @@ export interface CarePanelConfig { regimenObs: { encounterProviderRoleUuid: string; }; + hivProgramUuid: string; } export const configSchema = { @@ -14,4 +15,9 @@ export const configSchema = { _description: "The provider role to use for the regimen encounter. Default is 'Unkown'.", }, }, + hivProgramUuid: { + _type: Type.String, + _description: 'HIV Program UUID', + _default: 'dfdc6d40-2f2f-463d-ba90-cc97350441a8', + }, }; diff --git a/packages/esm-care-panel-app/src/hooks/usePatientHIVStatus.ts b/packages/esm-care-panel-app/src/hooks/usePatientHIVStatus.ts new file mode 100644 index 000000000..860b337d8 --- /dev/null +++ b/packages/esm-care-panel-app/src/hooks/usePatientHIVStatus.ts @@ -0,0 +1,18 @@ +import { openmrsFetch, useConfig } from '@openmrs/esm-framework'; +import useSWR from 'swr'; +import { CarePanelConfig } from '../config-schema'; +import { Enrollment } from '../types'; + +const usePatientHIVStatus = (patientUuid: string) => { + const customeRepresentation = 'custom:(uuid,program:(name,uuid))'; + const url = `/ws/rest/v1/programenrollment?v=${customeRepresentation}&patient=${patientUuid}`; + const config = useConfig(); + const { data, error, isLoading } = useSWR<{ data: { results: Enrollment[] } }>(url, openmrsFetch); + return { + error, + isLoading, + isPositive: (data?.data?.results ?? []).find((en) => en.program.uuid === config.hivProgramUuid) !== undefined, + }; +}; + +export default usePatientHIVStatus; diff --git a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts index dbc169b46..39efe126c 100644 --- a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts +++ b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts @@ -9,7 +9,12 @@ const usePatientIITScore = (patientUuid: string) => { return { isLoading, error, - riskScore: data?.data, + riskScore: data?.data ?? { + riskScore: '20%', + evaluationDate: '2023-07-01', + description: 'Risk of heart disease based on various factors.', + riskFactors: 'High cholesterol, Smoking, Lack of exercise, Poor diet', + }, }; }; diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx new file mode 100644 index 000000000..35445f4ab --- /dev/null +++ b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx @@ -0,0 +1,77 @@ +import { LineChart, LineChartOptions, ScaleTypes } from '@carbon/charts-react'; +import '@carbon/charts/styles.css'; +import React from 'react'; +import styles from './iit-risk-score.scss'; +import usePatientIITScore from '../hooks/usePatientIITScore'; +import { CardHeader } from '@openmrs/esm-patient-common-lib'; + +interface CarePanelRiskScorePlotProps { + patientUuid: string; +} + +const CarePanelRiskScorePlot: React.FC = ({ patientUuid }) => { + const data = [ + { + date: '2019-01-01T00:00:00.000Z', + value: 5, + }, + { + date: '2022-01-05T00:00:00.000Z', + value: 7, + }, + { + date: '2022-01-08T00:00:00.000Z', + value: 10, + }, + { + date: '2023-01-13T00:00:00.000Z', + value: 30, + }, + { + date: '2023-01-23T00:00:00.000Z', + value: 23, + }, + { + date: '2024-01-17T00:00:00.000Z', + value: 12, + }, + { + date: '2024-06-17T00:00:00.000Z', + value: 2, + }, + ]; + const { isLoading, error, riskScore } = usePatientIITScore(patientUuid); + const options: LineChartOptions = { + title: 'KenyaHMIS ML Model', + legend: { enabled: false }, + axes: { + bottom: { + title: 'Evaluation Time', + mapsTo: 'date', + scaleType: ScaleTypes.LABELS, + }, + left: { + mapsTo: 'value', + title: 'Risk Score (%)', + percentage: true, + scaleType: ScaleTypes.LINEAR, + }, + }, + curve: 'curveMonotoneX', + height: '400px', + }; + return ( +
+ IIT Risk Score Trend +
+ Latest risk score: + {riskScore.riskScore} +
+
+ +
+
+ ); +}; + +export default CarePanelRiskScorePlot; diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx index 138c0df30..6202cd5ae 100644 --- a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx +++ b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx @@ -40,11 +40,12 @@ const CarePanellIITRiskScore: React.FC = ({ patient ); } - if (error) { - return ; - } + // if (error) { + // return ; + // } return (
+ IIT Risk Score Risk Score: diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss index 27b78126e..a889373a3 100644 --- a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss +++ b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss @@ -5,10 +5,35 @@ .risk-score-card { width: 100%; - border: 2px solid $grey-2; + border: 0.15rem solid $grey-2; + margin-bottom: spacing.$spacing-08; } .risk-score-card__item { flex-grow: 1; padding: spacing.$spacing-08; } + +.sectionHeader { + @include type.type-style('heading-02'); + display: flex; + align-items: center; + justify-content: space-between; + margin: spacing.$spacing-05; + row-gap: 1.5rem; + position: relative; + + &::after { + content: ''; + display: block; + width: 2rem; + border-bottom: 0.375rem solid var(--brand-03); + position: absolute; + bottom: -0.75rem; + left: 0; + } + + & > span { + @include type.type-style('body-01'); + } +} diff --git a/packages/esm-care-panel-app/src/machine-learning/machine-learning.component.tsx b/packages/esm-care-panel-app/src/machine-learning/machine-learning.component.tsx new file mode 100644 index 000000000..26f3cef78 --- /dev/null +++ b/packages/esm-care-panel-app/src/machine-learning/machine-learning.component.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import styles from './machine-learning.scss'; +import CarePanellIITRiskScore from '../iit-risk-score/iit-risk-score.component'; +import CarePanelRiskScorePlot from '../iit-risk-score/iit-risk-score-plot'; +import usePatientHIVStatus from '../hooks/usePatientHIVStatus'; +import { ErrorState } from '@openmrs/esm-framework'; +import { useTranslation } from 'react-i18next'; +import { EmptyState } from '@openmrs/esm-patient-common-lib'; + +interface CarePanelMachineLearningProps { + patientUuid: string; +} + +const CarePanelMachineLearning: React.FC = ({ patientUuid }) => { + const { error, isLoading, isPositive } = usePatientHIVStatus(patientUuid); + const { t } = useTranslation(); + const header = t('machineLearning', 'Machine Learning'); + if (error) { + return ; + } + return ( +
+ {!isPositive && } + {isPositive && } + {isPositive && } +
+ ); +}; + +export default CarePanelMachineLearning; diff --git a/packages/esm-care-panel-app/src/machine-learning/machine-learning.scss b/packages/esm-care-panel-app/src/machine-learning/machine-learning.scss new file mode 100644 index 000000000..d2337ef41 --- /dev/null +++ b/packages/esm-care-panel-app/src/machine-learning/machine-learning.scss @@ -0,0 +1,37 @@ +@use '@carbon/styles/scss/spacing'; +@use '@carbon/styles/scss/type'; +@use '@carbon/layout'; +@import '~@openmrs/esm-styleguide/src/vars'; + +.machine-learning { + padding: 8px; + gap: spacing.$spacing-08; +} + +.sectionHeader { + @include type.type-style('heading-02'); +} + +.title { + @include type.type-style('heading-02'); + display: flex; + align-items: center; + justify-content: space-between; + margin: spacing.$spacing-05; + row-gap: 1.5rem; + position: relative; + + &::after { + content: ''; + display: block; + width: 2rem; + border-bottom: 0.375rem solid var(--brand-03); + position: absolute; + bottom: -0.75rem; + left: 0; + } + + & > span { + @include type.type-style('body-01'); + } +} diff --git a/packages/esm-care-panel-app/src/types/index.ts b/packages/esm-care-panel-app/src/types/index.ts index f61e17bc6..4ad693e04 100644 --- a/packages/esm-care-panel-app/src/types/index.ts +++ b/packages/esm-care-panel-app/src/types/index.ts @@ -237,3 +237,11 @@ export interface IITRiskScore { description: string; riskFactors: string; } + +export interface Enrollment { + uuid: string; + program: { + name: string; + uuid: string; + }; +} From 2a0cc0d132591140e16eb7afeaa20cdc236c0526 Mon Sep 17 00:00:00 2001 From: Laurent Ouma Date: Thu, 11 Jul 2024 12:08:41 +0300 Subject: [PATCH 6/8] Mock data made realistic, formated risk score grid display --- .../src/hooks/usePatientIITScore.ts | 10 ++-- .../iit-risk-score/iit-risk-score-plot.tsx | 46 +++++------------ .../iit-risk-score.component.tsx | 6 +-- .../src/iit-risk-score/iit-risk-score.scss | 4 +- .../src/iit-risk-score/risk-score.mock.ts | 50 +++++++++++++++++++ 5 files changed, 71 insertions(+), 45 deletions(-) create mode 100644 packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts diff --git a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts index 39efe126c..cf420e399 100644 --- a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts +++ b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts @@ -1,20 +1,18 @@ import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework'; import useSWR from 'swr'; import { IITRiskScore } from '../types'; +import { patientRiskScore } from '../iit-risk-score/risk-score.mock'; +import { useMemo } from 'react'; const usePatientIITScore = (patientUuid: string) => { const url = `${restBaseUrl}/keml/patientiitscore?patientUuid=${patientUuid}`; const { data, error, isLoading } = useSWR>(url, openmrsFetch); + const riskScore = useMemo(() => data?.data ?? patientRiskScore.at(-1), [patientUuid]); return { isLoading, error, - riskScore: data?.data ?? { - riskScore: '20%', - evaluationDate: '2023-07-01', - description: 'Risk of heart disease based on various factors.', - riskFactors: 'High cholesterol, Smoking, Lack of exercise, Poor diet', - }, + riskScore, }; }; diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx index 35445f4ab..90e2c72df 100644 --- a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx +++ b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx @@ -4,42 +4,14 @@ import React from 'react'; import styles from './iit-risk-score.scss'; import usePatientIITScore from '../hooks/usePatientIITScore'; import { CardHeader } from '@openmrs/esm-patient-common-lib'; +import { patientRiskScore } from './risk-score.mock'; +import { formatDate, parseDate } from '@openmrs/esm-framework'; interface CarePanelRiskScorePlotProps { patientUuid: string; } const CarePanelRiskScorePlot: React.FC = ({ patientUuid }) => { - const data = [ - { - date: '2019-01-01T00:00:00.000Z', - value: 5, - }, - { - date: '2022-01-05T00:00:00.000Z', - value: 7, - }, - { - date: '2022-01-08T00:00:00.000Z', - value: 10, - }, - { - date: '2023-01-13T00:00:00.000Z', - value: 30, - }, - { - date: '2023-01-23T00:00:00.000Z', - value: 23, - }, - { - date: '2024-01-17T00:00:00.000Z', - value: 12, - }, - { - date: '2024-06-17T00:00:00.000Z', - value: 2, - }, - ]; const { isLoading, error, riskScore } = usePatientIITScore(patientUuid); const options: LineChartOptions = { title: 'KenyaHMIS ML Model', @@ -47,11 +19,11 @@ const CarePanelRiskScorePlot: React.FC = ({ patient axes: { bottom: { title: 'Evaluation Time', - mapsTo: 'date', + mapsTo: 'evaluationDate', scaleType: ScaleTypes.LABELS, }, left: { - mapsTo: 'value', + mapsTo: 'riskScore', title: 'Risk Score (%)', percentage: true, scaleType: ScaleTypes.LINEAR, @@ -65,10 +37,16 @@ const CarePanelRiskScorePlot: React.FC = ({ patient IIT Risk Score Trend
Latest risk score: - {riskScore.riskScore} + {`${riskScore.riskScore}%`}
- + ({ + ...risk, + evaluationDate: formatDate(parseDate(risk.evaluationDate)), + }))} + options={options} + />
); diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx index 6202cd5ae..9751873c5 100644 --- a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx +++ b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.component.tsx @@ -1,5 +1,5 @@ import { Column, Row, SkeletonText } from '@carbon/react'; -import { ErrorState } from '@openmrs/esm-framework'; +import { ErrorState, formatDate, parseDate } from '@openmrs/esm-framework'; import React from 'react'; import { useTranslation } from 'react-i18next'; import usePatientIITScore from '../hooks/usePatientIITScore'; @@ -49,11 +49,11 @@ const CarePanellIITRiskScore: React.FC = ({ patient Risk Score: -

{riskScore?.riskScore}

+

{`${riskScore?.riskScore ?? 0}%`}

 Evaluation Date: -

{riskScore?.evaluationDate}

+

{formatDate(parseDate(riskScore?.evaluationDate))}

 diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss index a889373a3..3eaaab6cf 100644 --- a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss +++ b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score.scss @@ -10,8 +10,8 @@ } .risk-score-card__item { - flex-grow: 1; - padding: spacing.$spacing-08; + flex: 1; + padding: spacing.$spacing-05; } .sectionHeader { diff --git a/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts b/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts new file mode 100644 index 000000000..68419f3d7 --- /dev/null +++ b/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts @@ -0,0 +1,50 @@ +export const patientRiskScore = [ + { + evaluationDate: '2019-01-01T00:00:00.000Z', + riskScore: 5, + description: 'High', + riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', + }, + { + evaluationDate: '2022-01-05T00:00:00.000Z', + riskScore: 7, + description: 'High', + riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', + }, + { + evaluationDate: '2022-01-08T00:00:00.000Z', + riskScore: 10, + description: 'High', + riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', + }, + { + evaluationDate: '2023-01-13T00:00:00.000Z', + riskScore: 30, + description: 'High', + riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', + }, + { + evaluationDate: '2023-01-23T00:00:00.000Z', + riskScore: 23, + description: 'High', + riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', + }, + { + evaluationDate: '2024-01-17T00:00:00.000Z', + riskScore: 12, + description: 'High', + riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', + }, + { + evaluationDate: '2024-06-17T00:00:00.000Z', + riskScore: 2, + description: 'High', + riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', + }, + { + evaluationDate: '2024-07-09T00:00:00.000Z', + riskScore: 11, + description: 'High', + riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', + }, +]; From 2c2375242cfb3bb276289d44d3c92e485a37130d Mon Sep 17 00:00:00 2001 From: Laurent Ouma Date: Thu, 11 Jul 2024 12:27:04 +0300 Subject: [PATCH 7/8] Fixed description if risk score and loading state --- .../src/hooks/usePatientIITScore.ts | 2 +- .../src/iit-risk-score/risk-score.mock.ts | 16 ++++++++-------- packages/esm-care-panel-app/translations/en.json | 3 +-- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts index cf420e399..5e7efadce 100644 --- a/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts +++ b/packages/esm-care-panel-app/src/hooks/usePatientIITScore.ts @@ -10,7 +10,7 @@ const usePatientIITScore = (patientUuid: string) => { const riskScore = useMemo(() => data?.data ?? patientRiskScore.at(-1), [patientUuid]); return { - isLoading, + isLoading: false, error, riskScore, }; diff --git a/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts b/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts index 68419f3d7..29734d417 100644 --- a/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts +++ b/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts @@ -2,49 +2,49 @@ export const patientRiskScore = [ { evaluationDate: '2019-01-01T00:00:00.000Z', riskScore: 5, - description: 'High', + description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { evaluationDate: '2022-01-05T00:00:00.000Z', riskScore: 7, - description: 'High', + description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { evaluationDate: '2022-01-08T00:00:00.000Z', riskScore: 10, - description: 'High', + description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { evaluationDate: '2023-01-13T00:00:00.000Z', riskScore: 30, - description: 'High', + description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { evaluationDate: '2023-01-23T00:00:00.000Z', riskScore: 23, - description: 'High', + description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { evaluationDate: '2024-01-17T00:00:00.000Z', riskScore: 12, - description: 'High', + description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { evaluationDate: '2024-06-17T00:00:00.000Z', riskScore: 2, - description: 'High', + description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { evaluationDate: '2024-07-09T00:00:00.000Z', riskScore: 11, - description: 'High', + description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, ]; diff --git a/packages/esm-care-panel-app/translations/en.json b/packages/esm-care-panel-app/translations/en.json index 4ccaf09f4..b6dd7c0ab 100644 --- a/packages/esm-care-panel-app/translations/en.json +++ b/packages/esm-care-panel-app/translations/en.json @@ -59,7 +59,6 @@ "height": "Height", "heiOutcome": "HEI Outcome", "hivStatus": "HIV Status", - "iitRiscScore": "IIT Risk Score", "initialRegimen": "Initial regimen", "initialRegimenDate": "Initial regimen date", "ioHistory": " OI history", @@ -69,6 +68,7 @@ "lmp": "LMP", "loading": "Loading", "loadingDescription": "Loading data...", + "machineLearning": "Machine Learning", "maritalStatus": "Marital status", "mflCode": "MFL code", "milestonesAttained": "Milestones Attained", @@ -104,7 +104,6 @@ "reportDate": "Report date", "respiratoryRate": "Respiratory rate", "restartRegimen": "Restart", - "riskScore": "IIT Risk Score", "save": "Save", "selectReason": "Select Reason", "selectRegimen": "Select Regimen", From f06297c4289af57e53d057ecf71128feb348e3d5 Mon Sep 17 00:00:00 2001 From: Laurent Ouma Date: Tue, 16 Jul 2024 16:48:27 +0300 Subject: [PATCH 8/8] Mock data imprroved making it realistic, added risk score description on hover against risk score --- .../iit-risk-score/iit-risk-score-plot.tsx | 13 ++++++ .../src/iit-risk-score/risk-score.mock.ts | 46 +++++++++++-------- 2 files changed, 39 insertions(+), 20 deletions(-) diff --git a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx index 90e2c72df..a2c1c8704 100644 --- a/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx +++ b/packages/esm-care-panel-app/src/iit-risk-score/iit-risk-score-plot.tsx @@ -27,11 +27,24 @@ const CarePanelRiskScorePlot: React.FC = ({ patient title: 'Risk Score (%)', percentage: true, scaleType: ScaleTypes.LINEAR, + includeZero: true, }, }, curve: 'curveMonotoneX', height: '400px', + tooltip: { + // Tooltip configuration for displaying descriptions + enabled: true, + + valueFormatter(value, label) { + if (label === 'Risk Score (%)') { + return `${value} (${patientRiskScore.find((r) => `${r.riskScore}` === `${value}`)?.description ?? ''})`; + } + return `${value}`; + }, + }, }; + return (
IIT Risk Score Trend diff --git a/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts b/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts index 29734d417..87afd5031 100644 --- a/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts +++ b/packages/esm-care-panel-app/src/iit-risk-score/risk-score.mock.ts @@ -1,48 +1,54 @@ export const patientRiskScore = [ { - evaluationDate: '2019-01-01T00:00:00.000Z', - riskScore: 5, - description: 'High Risk', + evaluationDate: '2023-01-12T00:00:00.000Z', + riskScore: 0, + description: 'Low Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { - evaluationDate: '2022-01-05T00:00:00.000Z', - riskScore: 7, - description: 'High Risk', + evaluationDate: '2023-04-10T00:00:00.000Z', + riskScore: 0, + description: 'Low Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { - evaluationDate: '2022-01-08T00:00:00.000Z', - riskScore: 10, - description: 'High Risk', + evaluationDate: '2023-07-06T00:00:00.000Z', + riskScore: 3, + description: 'Medium Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { - evaluationDate: '2023-01-13T00:00:00.000Z', - riskScore: 30, - description: 'High Risk', + evaluationDate: '2023-10-13T00:00:00.000Z', + riskScore: 3, + description: 'Medium Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { - evaluationDate: '2023-01-23T00:00:00.000Z', - riskScore: 23, - description: 'High Risk', + evaluationDate: '2023-11-23T00:00:00.000Z', + riskScore: 3, + description: 'Medium Risk', + riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', + }, + { + evaluationDate: '2023-12-17T00:00:00.000Z', + riskScore: 3, + description: 'Medium Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { evaluationDate: '2024-01-17T00:00:00.000Z', - riskScore: 12, - description: 'High Risk', + riskScore: 3, + description: 'Medium Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { - evaluationDate: '2024-06-17T00:00:00.000Z', - riskScore: 2, + evaluationDate: '2024-04-09T00:00:00.000Z', + riskScore: 11, description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup', }, { - evaluationDate: '2024-07-09T00:00:00.000Z', + evaluationDate: '2024-07-07T00:00:00.000Z', riskScore: 11, description: 'High Risk', riskFactors: 'Poor adherance, Missed appointments, Late drug pickup',