We use plugins to categorize and isolate behavioral and health data in the client platform. For example:
- Physical Data including Weight, Height and Body Mass Index (BMI) is managed by the physical data plugin
- Vital signs including blood pressure, oxygen saturation, etc. is managed by the vitals plugin
- And many data
A plugin is a client-side npm package exporting a custom interface object in its entry point.
The client platform has a plugin manager determines all available plugin form the config file and registers them to be used by other components.
A lifecycle hook is called for each plugin before registration. Here is the main lifecycle:
Get available plugins from the config file
onPreRegisterationhook for each plugin, if defined
Register plugins in the plugin manager
Plugins can use this lifecycle hook to import their dependencies, register other plugins, add event listeners, etc.
A plugin interface is an object defining the following properties, components and functions:
id: Plugin ID that must be unique
path: URL path to redirect to the plugin main component
name: Plugin name
MenuModule: Interface object to show plugin menu item
WidgetModule: Interface object to show plugin widget in dashboard
DataModule: Interface object to render the plugin main component to manage / visualize plugin data
TimelineModule: Interface object to show plugin data in timeline that is displayed in dashboard
Plugins are constructed by modules. All plugins must implement data module and one of menu or widget modules.
Menu modules show plugins in profile menus, using the following properties:
name: Menu item name to be shown in profile menus
icon: Material icon name to be used as menu item icon in profile menus, as listed here
priority: Menu item priority in profile menus, higher numbers at the top of the list
Widget modules show plugins in profile menus displayed in the header, using the following properties:
name: Widget name to be shown in dashboard
icon: Material icon name to be used as widget icon in dashboard, as listed here
Component: React component to be shown as widget in dashboard. This is very useful to visualize individual plugin data in dashboard.
priority: Menu item priority in profile menus, higher numbers in the left of the list
Define only one of "Component" or "icon" properties in the widget module!
Timeline modules provide plugin data to be visualized in dashboard timeline, using an array of objects with the following properties:
name: Data name to be shown in timeline
color: Data color to be shown in timeline
icon: Data icon to be shown in timeline legend
getData: Function to retrieve timeline data, providing an array of objects with the following properties:
date: Date/Time object of the data
value: Number value of the data
The timeline displayed in dashboard is very important component to visualize and compare different plugin data in one place.
Plugins should group timeline data on daily basis!
Data module is a React Component to be rendered when user is redirected by dashboard.