MyHealth Webcomponent Reports

The MyHealth Webcomponent Reports provides a comprehensive view of a user's health webcomponent-reports.

All MyHealth webcomponents implement the MyHealth - Web Component Integration and use the MyHealth - Angular design kit package for styling.

Usage

To use the MyHealth Webcomponent Reports, import and call the package's boostrap into your application:

import { manifest, bootstrap } from '@myhealth-belgium/web-component-reports';

// Call bootstrap function with your HostSettings & HostServices
bootstrap({ settings: SETTINGS, services: SERVICES });

// Place the webcomponent in your HTML for it to render
return (
  <mh-web-component-reports-overview onopen={e => openDetail(e.detail.props.reportSummary) }></mh-web-component-reports-overview>
  <mh-web-component-reports-detail reportSummary={ reportSummary } ondownload={e => downloadReport(e)}></mh-web-component-reports-detail>
)

To integrate the design-kit, also import the webcomponent's styles in your code. For more information, see Design kit integration.

import '@myhealth-belgium/web-component-reports/styles.css';

Bootstrap settings and services

The bootstrap() function is called with 2 objects, HostSettings and HostServices. These follow the guidelines provided by the MyHealth - Web Component Integration.

The HostSettings will define the component's inputs, however these can be overriden by passing these settings as attributes to the component's HTML implementation.

Additionally, there is an optional boolean useIcons that can be passed to the bootstrap function. By default, this is set to false as icons preferrably are initialized top-level in the app using the MyHealth - Angular design kit. Setting this setting to true while importing the component's stylesheet, will create a new font for the component's icons.

Manifest, inputs & outputs

Each MyHealth webcomponent provides a manifest constant that is compliant with the guidelines provided by the MyHealth - Web Component Integration.

The manifest can be viewed to see the component(s) inside the package, as well as required additional inputs and outputs that the component may emit.

Reports overview component

tagName: <mh-web-component-reports-overview />

| Property | Type | Required | Description | | --------------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- | | user-language | UserLanguage | No | The language for the webcomponent interface. Automatically updates the translation service when changed. | | config-name | ConfigName | No | The configuration name that determines the environment and API endpoints. Set to "demo" to use mock data instead of API calls. |

| Event | Type | Required | Description | | -------- | ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | onopen | openEvent | Yes | Even to display a webcomponent. Emits componentTag property: The tagName of the component to display & reportSummary object, to be passed to render detail. |

Reports detail component

tagName: <mh-web-component-reports-detail />

| Property | Type | Required | Description | | --------------- | --------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- | | user-language | UserLanguage | No | The language for the webcomponent interface. Automatically updates the translation service when changed. | | config-name | ConfigName | No | The configuration name that determines the environment and API endpoints. Set to "demo" to use mock data instead of API calls. | | reportSummary | ReportSummary | Yes | Received from the reports overview component and needs to be passed to the details component for correct rendering. |

| Event | Type | Required | Description | | ------------ | -------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- | | ondownload | { title: string, url: string } | No | Emitted when a user downloads a file from a report. Contains the file title and a data URL with the base64-encoded content. |

Mock data

There is an option to display simple mock data with this webcomponent by changing the config-name attribute passed to the webcomponent to: config-name="demo", or configure it in HostSettings. When in demo mode, the webcomponent will not make API calls and use standard mock data instead.

Design kit integration

As stated before, all MyHealth webcomponents use the MyHealth - Angular design kit package.

This means all webcomponents use the core functionality of the design kit, and override the Material components that the webcomponent consumes.

By default, importing @myhealth-belgium/web-component-reports/styles.css will execute the mixins below.

@include mh.core($use-material: true, $symbols-font-url: url('./assets/fonts/MatSymbols-Rounded.ttf'));
@include mh.override-mat-table();
@include mh.override-mat-paginator();
@include mh.override-mat-button();
@include mh.override-mat-button-icon();

You can leave out the styling if you provide these mixins yourself using the MyHealth - Angular design kit.

This package is owned and maintained by:

FPS Health, Food Chain Safety & Environment Av. Galilée 5 bus 2, 1210 Brussels