(feat) O3-3018: Adding metric tiles to the refApp homepage. #1075

arodidev · 2024-04-02T09:13:09Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
My work includes tests or is validated by existing tests.

Summary

This PR introduces metric tiles to the refApp homepage that track three key reporting metrics:

Active visits.
Total visits for the day.
Patient appointments scheduled for the day.

The metric tiles are loaded into the metrics-extension-slot created within this monorepo in a bid to give more control over positioning of the tiles within a parent container, thus negating the need to add a display: flex property to the extension slots within the homepage. This extension is then loaded into the home-dashboard-slot within openmrs-esm-home.

This PR together with the homepage dashboard header PR should complete the initial phase of the home dashboard revamp.

Screenshots

Screen.Recording.2024-04-16.at.11.51.58.mov

Related Issue

Other

Added tiles, and the data pulls and loads, need to see if the extensions load correctly

…-management into create-extension-slot-from-pt-mgt

pirupius · 2024-04-11T14:49:05Z

@arodidev some quick design comments as i look at the code. Are u able to add a video showing the responsiveness? There is also some discrepancy with the text styling for example the word Patients seems to be bold which doesn't match this guideline https://zeroheight.com/23a080e38/p/8358ed-page-header

pirupius

Thanks @arodidev for the work on this. I've left some early clean up comments

...ve-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.component.tsx

pirupius · 2024-04-11T15:07:17Z

...ve-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.component.tsx

+    urlSearchParams.append('includeInactive', 'false');
+    urlSearchParams.append('totalCount', 'true');
+    urlSearchParams.append('location', `${sessionLocation}`);


Is there a use case for this? Is this tied to other data within the home screen that has a search functionality or is this purely a way to chain params to the url?

Majorly chaining params together, although I am not sure I fully understand your question, but it is tied to sessionLocation from the home page.

...ve-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.component.tsx

.../esm-active-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.scss

pirupius · 2024-04-12T09:29:07Z

packages/esm-active-visits-app/src/home-page-tiles/metrics-slot.component.tsx

+import { ExtensionSlot } from '@openmrs/esm-framework';
+import React from 'react';
+
+const MetricsSlot = () => {


This becomes tricky when we're adding tiles from other esms. Can we maintain this in the esm home?

My though process behind this:

We need a way to manage the parent container of the metric tiles that does not rely on openmrs-esm-home since that slot should be totally generic and agnostic of whatever is loaded into it.

This works since the different tiles reside within different esms (esm-active-visits-app, esm-appointments-app) but need to live inside a single container for the purposes of uniformity of styling/ alignment, and also so that they are loaded into the extension slot within openmrs-esm-home as a single unit instead of three individual tiles.

This is my understanding;

This component(MetricSlot) introduces the Metrics slot which is specific to the home.

Different esm can then define tiles that are attached to this slot.

What am suggesting is this specific component defining the metrics-slot should be esm-home and patient-management let alone the esm-visits-app. It's not a tied to the visits esm and implementers who decide not to include the esm-visits in the importmap would have this. But implementations that have esm-home should be able to take advantage of the metrics-tiles-slot

Aah, I see what you mean! Which begs the question, where within patient-management would you suggest I define this? Could there be a way to represent this logic independent of any of the modules? I hope my understanding of what you said was correct.

packages/esm-active-visits-app/src/routes.json

pirupius · 2024-04-12T09:31:48Z

packages/esm-active-visits-app/src/types/index.ts

+  startDatetime: string;
+  stopDatetime?: string;
+  attributes?: Array<OpenmrsResource>;
+  [anythingElse: string]: any;


Was this a placeholder?

Are you referring to: [anythingElse: string]: any;?
If so then this was just a contingency.

I think it's best not to have this. That forces us to confront any short-comings in the types instead of ignoring them... and if someone really needs to use a different property, there's always (visit as any).prop = value as a work-around.

Thank you for the clarity, will resolve this.

packages/esm-active-visits-app/src/types/index.ts

packages/esm-appointments-app/src/homepage-tile/appointments-tile.component.tsx

packages/esm-appointments-app/src/routes.json

arodidev · 2024-04-12T10:11:05Z

Thanks @arodidev for the work on this. I've left some early clean up comments

Will get to work on these, thank you for your review.

pirupius

Thanks @arodidev for the continuous work on this. I've left some more todo's to clean this up

pirupius · 2024-04-16T15:43:19Z

...ve-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.component.tsx

+  return (
+    <React.Fragment>
+      <Tile className={styles.tileContainer}>
+        <div>


This tag seems redundant

pirupius · 2024-04-16T15:47:04Z

...ve-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.component.tsx

+            <div className={styles.tileHeader}>
+              <header>{t('activeVisits', 'Active Visits')}</header>


Can we just move the className to the header and eliminate the need for the extra

pirupius · 2024-04-16T15:47:48Z

...ve-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.component.tsx

+              <header>{t('activeVisits', 'Active Visits')}</header>
+            </div>
+            <div className={styles.displayDetails}>
+              <div className={styles.countLabel}>Patients</div>


Add translation for Patients

pirupius · 2024-04-16T15:50:54Z

...ve-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.resources.tsx

+  const customRepresentation = 'custom:(uuid,startDatetime,stopDatetime)';
+
+  const getUrl = () => {
+    let url = `/ws/rest/v1/visit?v=${customRepresentation}&`;


Suggested change

let url = `/ws/rest/v1/visit?v=${customRepresentation}&`;

let url = `${restBaseUrl}/visit?v=${customRepresentation}&`;

pirupius · 2024-04-16T15:53:20Z

...tive-visits-app/src/home-page-tiles/total-visits-metric-tile/total-visits-tile.component.tsx

+        <div>
+          <div className={styles.tileContent}>
+            <div className={styles.tileHeader}>
+              <header>{t('totalVisits', 'Total Visits Today')}</header>
+            </div>


Same comments apply to this component about cleaning this up

pirupius · 2024-04-16T15:55:49Z

...tive-visits-app/src/home-page-tiles/total-visits-metric-tile/total-visits-tile.resources.tsx

+  const responseData = data?.data.results;
+
+  return { data: responseData, error, isLoading };


Suggested change

const responseData = data?.data.results;

return { data: responseData, error, isLoading };

return { data: data?.data.results, error, isLoading };

pirupius · 2024-04-16T15:56:35Z

packages/esm-active-visits-app/src/types/index.ts

+  startDatetime: string;
+  stopDatetime?: string;
+  attributes?: Array<OpenmrsResource>;
+  [anythingElse: string]: any;


Let's delete this

pirupius · 2024-04-16T15:57:12Z

packages/esm-appointments-app/src/homepage-tile/appointments-tile.component.tsx

+        <div>
+          <div className={styles.tileContent}>
+            <div className={styles.tileHeader}>
+              <header>{t('scheduledForToday', 'Scheduled For Today')}</header>
+            </div>
+            <div className={styles.displayDetails}>
+              <div className={styles.countLabel}>Patients</div>
+              <div className={styles.displayData}>{appointmentsData?.length ?? 0}</div>


Same comments apply about cleaning this component

pirupius · 2024-04-16T15:57:57Z

packages/esm-appointments-app/src/homepage-tile/appointments-tile.resources.tsx

+  const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+  const appointmentDate = dayjs(new Date().setHours(0, 0, 0, 0)).format(omrsDateFormat);
+
+  const url = `ws/rest/v1/appointment/all?forDate=${appointmentDate}`;


Suggested change

const url = `ws/rest/v1/appointment/all?forDate=${appointmentDate}`;

const url = `${restBaseUrl}/appointment/all?forDate=${appointmentDate}`;

pirupius · 2024-04-16T16:01:14Z

packages/esm-appointments-app/src/homepage-tile/appointments-tile.resources.tsx

+  const responseData = data?.data;
+
+  return { data: responseData, error, isLoading };


Was this intentional? Does data?.data have the necessary information to be displayed or do u have to chain results like the rest

On the initial render data.data will throw an error because the network request hasn't been fulfilled yet.

arodidev added 10 commits March 25, 2024 12:38

WIP

b5e71d5

Added tiles, and the data pulls and loads, need to see if the extensions load correctly

Translations

3a3f706

Updated slot receiving extensions

41b5fbe

Translations

5e30eec

cleanup

c8fec9a

Merge branch 'openmrs:main' into metrics-test-branch

c0df520

Working instance displaying metric tiles using grid display

5f5c033

cleanup

a498561

cleanup

80e7ab7

Merge branch 'main' into create-extension-slot-from-pt-mgt

70b1138

arodidev requested review from denniskigen, CynthiaKamau and ibacher April 2, 2024 09:15

arodidev added 5 commits April 3, 2024 20:18

Merge branch 'main' into create-extension-slot-from-pt-mgt

d54bca9

Load tile container into home-metrics-tiles-slot

91ca09b

Merge branch 'main' of https://github.com/openmrs/openmrs-esm-patient…

f8a23de

…-management into create-extension-slot-from-pt-mgt

Merge branch 'main' into create-extension-slot-from-pt-mgt

85c7d8f

Merge branch 'main' into create-extension-slot-from-pt-mgt

a52fb6d

pirupius reviewed Apr 12, 2024

View reviewed changes

arodidev added 2 commits April 16, 2024 16:35

PR resolutions

afd8ef8

Merge branch 'main' into create-extension-slot-from-pt-mgt

31b1421

arodidev requested a review from pirupius April 16, 2024 14:01

pirupius requested changes Apr 16, 2024

View reviewed changes

arodidev added 2 commits April 16, 2024 21:13

PR resolutions

f151e66

translations

530e4cf

arodidev requested a review from pirupius April 16, 2024 18:21

Merge branch 'main' into create-extension-slot-from-pt-mgt

2dccd12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(feat) O3-3018: Adding metric tiles to the refApp homepage. #1075

(feat) O3-3018: Adding metric tiles to the refApp homepage. #1075

arodidev commented Apr 2, 2024 •

edited

pirupius commented Apr 11, 2024

pirupius left a comment

pirupius Apr 11, 2024

arodidev Apr 16, 2024

pirupius Apr 12, 2024

arodidev Apr 16, 2024

pirupius Apr 16, 2024

arodidev Apr 16, 2024

pirupius Apr 12, 2024

arodidev Apr 16, 2024

ibacher Apr 16, 2024

arodidev Apr 16, 2024

arodidev commented Apr 12, 2024

pirupius left a comment

pirupius Apr 16, 2024

pirupius Apr 16, 2024

pirupius Apr 16, 2024

pirupius Apr 16, 2024

pirupius Apr 16, 2024

pirupius Apr 16, 2024

pirupius Apr 16, 2024

pirupius Apr 16, 2024

pirupius Apr 16, 2024

pirupius Apr 16, 2024 •

edited

arodidev Apr 16, 2024

		<div className={styles.tileHeader}>
		<header>{t('activeVisits', 'Active Visits')}</header>

	let url = `/ws/rest/v1/visit?v=${customRepresentation}&`;
	let url = `${restBaseUrl}/visit?v=${customRepresentation}&`;

		const responseData = data?.data.results;

		return { data: responseData, error, isLoading };

	const url = `ws/rest/v1/appointment/all?forDate=${appointmentDate}`;
	const url = `${restBaseUrl}/appointment/all?forDate=${appointmentDate}`;

		const responseData = data?.data;

		return { data: responseData, error, isLoading };

(feat) O3-3018: Adding metric tiles to the refApp homepage. #1075

Are you sure you want to change the base?

(feat) O3-3018: Adding metric tiles to the refApp homepage. #1075

Conversation

arodidev commented Apr 2, 2024 • edited

Requirements

Summary

Screenshots

Related Issue

Other

pirupius commented Apr 11, 2024

pirupius left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arodidev commented Apr 12, 2024

pirupius left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pirupius Apr 16, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arodidev commented Apr 2, 2024 •

edited

pirupius Apr 16, 2024 •

edited