Adding metrics widgets to metrics extension slot(WIP)

packages/esm-home-app/src/homepage-metrics/TestDataTile.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tile, Layer } from '@carbon/react';
+import styles from './home-metrics-widget.scss';
+import { ArrowRight } from '@carbon/react/icons';
+
+interface DataTileProps {}
+
+const DataTile = () => {
+  const dataValue = 'default';
+  return (
+    <React.Fragment>
+      <Layer className={styles.container}>
+        <Tile className={styles.tileContainer}>
+          <div>
+            <h2>Data to display: {dataValue}</h2>
+          </div>
+        </Tile>
+      </Layer>
+    </React.Fragment>
+  );
+};
+
+export default DataTile;

packages/esm-home-app/src/homepage-metrics/home-metrics-widget.scss

@@ -0,0 +1,5 @@
+@use '@carbon/styles/scss/spacing';
+
+.homeMetricsWidget {
+    padding: spacing.$spacing-05
+}

packages/esm-home-app/src/homepage-metrics/home-metrics-widgets.component.tsx

@@ -0,0 +1,11 @@
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './home-metrics-widget.scss';
+
+interface HomeMetricsWidgetProps {}
+
+const HomeMetricsWidgets: React.FC<HomeMetricsWidgetProps> = () => {
+  return <ExtensionSlot className={styles.homeMetricsWidget} name="home-metrics-widgets-slot" />;
+};
+
+export default HomeMetricsWidgets;

packages/esm-home-app/src/index.ts

@@ -5,6 +5,8 @@ import { esmHomeSchema } from './openmrs-esm-home-schema';
 import rootComponent from './root.component';
 import homeNavMenuComponent from './side-menu/side-menu.component';
 import homeWidgetDashboardComponent from './home-page-widgets/home-page-widgets.component';
+import HomeMetricsWidgetsComponent from './homepage-metrics/home-metrics-widgets.component';
+import DataTile from './homepage-metrics/TestDataTile.component';
 
 const moduleName = '@openmrs/esm-home-app';
 const pageName = 'home';
@@ -24,6 +26,10 @@ export const homeWidgetDbLink = getSyncLifecycle(createDashboardLink(dashboardMe
 
 export const homeWidgetDashboard = getSyncLifecycle(homeWidgetDashboardComponent, options);
 
+export const homeMetricsWidgetDashboard = getSyncLifecycle(HomeMetricsWidgetsComponent, options);
+
+export const metricTile = getSyncLifecycle(DataTile, options);
+
 export function startupApp() {
   defineConfigSchema(moduleName, esmHomeSchema);
   // t('Home', 'Home');

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

@@ -32,12 +32,26 @@
       "online": true,
       "offline": true
     },
+    {
+      "name": "home-metrics-widget-dashboard",
+      "slot": "home-dashboard-slot",
+      "component": "homeMetricsWidgetDashboard",
+      "online": true,
+      "offline": true
+    },
     {
       "name": "home-widget-dashboard",
       "slot": "home-dashboard-slot",
       "component": "homeWidgetDashboard",
       "online": true,
       "offline": true
+    },
+    {
+      "name": "matric-tile",
+      "slot": "home-metrics-widgets-slot",
+      "component": "metricTile",
+      "online": true,
+      "offline": true
     }
   ]
 }