open-index/open-npm huggingface dataset:
npm package: @openmrs/esm-user-dashboard
Description: A repo for creating openmrs microfrontend user dashboard
Latest version: 1.0.0

# Dashboard

ESM Package serves as an engine for rendering dashboard widgets based on the configuration served.

## Pre-Requesties

NodeJS

## How to Setup?

- Run `npm install` to install all the dependencies
- Run `npm start -- --https --port 8082` to start application in dev mode.
- If you are using with OpenMRS Micro Frontend, update/add the port:url in `import-map.json` file of `openmrs-esm-root-config`.
- Run `npm run build` for production build.

## Dashboard Configuration Schema

Refer [Architecture Decision Record](docs/adr-03-dashboard-configuration.md) for more details about configuration schema.

## Architecture Decision Records

Architecture decision records are available under `docs` folder.

## Features

- Responsive Layout
- User Context
- Breadcrumb
- Toast Messages

## Responsive Layout

Dashboard allows the developers/implementers to configure the layout of dashboard & widgets. They can control the layout at 2 levels.

1. Dashbaord Level

In configuration, you can configure howmany columns you want to have for the dashboard.
By default, dashbaord will contain 2 columns.

### Example

```
{
  ...

  "layout": {
    "columns": 10 //No of columns the dashboard should have. default: 2
  },

  ...
}
```

2. Widget Level

In configuration, you can configure howmany columns & rows a widget can take. By default it will be 1.

```
{
  ...
  "contents": [
    ...
    {
      size: {
        rows:2, // No of rows occupied by widget
        columns:1 // No of columns occupied by widget
      },
    }
    ...
  ]
  ...
}
```

## User Context

Dashboard will set the user related properties as context for the widgets. User context information will be passed as properties for the widgets.

Below user information are avaialble as properties for widgets.

1. uuid
2. locale

## Breadcrumb

Dashboard will show the breadcrumb based on the title of the dashboard.

## Toast Messages

Dashboard allows the widgets to show toast messages when they want to some information to the user. All the widgets will a reference property called `showMessage` which can be called with below signatature to a message to user.

### Sample Usage

```
// sample-widget.tsx

function SampleWidget(props) {
  const showSampleMessage = () =>{
    props.showMessage({type: "success", message: "You clicked the button"});
  };

  return <button onClick={showSampleMessage}>Show Message<button>
}

```

### Supported Message Types

- `success`
- `error`
- `warning`
npm package: @openmrs/esm-user-dashboard-app
Description: A repo for creating openmrs microfrontend user dashboard
Latest version: 1.0.1

# Dashboard

ESM Package serves as an engine for rendering dashboard widgets based on the configuration served.

Note: This package was initially published as `@openmrs/esm-user-dashboard`. It was renamed to `@openmrs/esm-user-dashboard-app` for it to be compatible with [Latest SPA](https://github.com/openmrs/openmrs-rfc-frontend/blob/master/text/0026-activation-distribution.md)

## Pre-Requesties

NodeJS

## How to Setup?

- Run `npm install` to install all the dependencies
- Run `npm start -- --https --port 8082` to start application in dev mode.
- If you are using with OpenMRS Micro Frontend, update/add the port:url in `import-map.json` file of `openmrs-esm-root-config`.
- Run `npm run build` for production build.

## Dashboard Configuration Schema

Refer [Architecture Decision Record](docs/adr-03-dashboard-configuration.md) for more details about configuration schema.

## Architecture Decision Records

Architecture decision records are available under `docs` folder.

## Features

- Responsive Layout
- User Context
- Breadcrumb
- Toast Messages

## Responsive Layout

Dashboard allows the developers/implementers to configure the layout of dashboard & widgets. They can control the layout at 2 levels.

1. Dashbaord Level

In configuration, you can configure howmany columns you want to have for the dashboard.
By default, dashbaord will contain 2 columns.

### Example

```
{
  ...

  "layout": {
    "columns": 10 //No of columns the dashboard should have. default: 2
  },

  ...
}
```

2. Widget Level

In configuration, you can configure howmany columns & rows a widget can take. By default it will be 1.

```
{
  ...
  "contents": [
    ...
    {
      size: {
        rows:2, // No of rows occupied by widget
        columns:1 // No of columns occupied by widget
      },
    }
    ...
  ]
  ...
}
```

## User Context

Dashboard will set the user related properties as context for the widgets. User context information will be passed as properties for the widgets.

Below user information are avaialble as properties for widgets.

1. uuid
2. locale

## Breadcrumb

Dashboard will show the breadcrumb based on the title of the dashboard.

## Toast Messages

Dashboard allows the widgets to show toast messages when they want to some information to the user. All the widgets will a reference property called `showMessage` which can be called with below signatature to a message to user.

### Sample Usage

```
// sample-widget.tsx

function SampleWidget(props) {
  const showSampleMessage = () =>{
    props.showMessage({type: "success", message: "You clicked the button"});
  };

  return <button onClick={showSampleMessage}>Show Message<button>
}

```

### Supported Message Types

- `success`
- `error`
- `warning`
npm package: @openmrs/esm-user-dashboard-widgets
Description: A repo for creating openmrs microfrontend dashboard widgets
Latest version: 1.0.3-pre.15

# User Dashboard Widgets

ESM Package serves widgets for OpenMRS Dashboard Engine.

## Available Widgets

- Todo

- Appointment

- Charts

- Reports

## Pre-Requisites

NodeJS

## How to Setup?

- Run `npm install` to install all the dependencies

- Run `npm start -- --https --port 8082` to start application in dev mode.

- If you are using with OpenMRS Micro Frontend, update/add the port:url in `import-map.json` file of `openmrs-esm-root-config`.

- Run `npm run build` for production build.

## Widgets

- Appointments
- Charts
- Todos
- Reports

## Appointments

This widget shows the list of appointments. It also allows the user to perform various actions like checkin, confirm.

Please refer the [Architecture Decision Record](docs/adr-03-appointment-configuration.md) for more information about how to configure an appointment widget.

### Sample screenshots

#### Appointments

![Appointments](./screenshots/appointment.png "Appointments")

#### Todo's

[!Todo's](./screenshots/todo.png "Todo's"))

#### Charts

![Charts](./screenshots/charts.png "Charts")

## Charts

This widget shows the charts based on the configuration. Refer below to check list of chart types supported.

Please refer the [Architecture Decision Record](docs/adr-04-charts-configuration.md) for more information about how to configure a chart widget.

### Chart Types

- LineChart

## Reports

This widget shows a list of report links. It will show chart or table based on the configuration when a report link is clicked.

Please refer the [Architecture Decision Record](docs/adr-05-reports-configuration.md) for more information about the configure a report widget.