Web Components for Insights Hub and Industrial IoT
Event Chart

The Event Chart displays events for one or multiple assets in a chart. The icons are colored based on their severity. When hovering over the icon, the Event description is displayed.

This component can be used to give a graphical overview, where Events are available for a given time range.

Examples¶

Event-Chart

Interface¶

Selector¶

<mdsp-event-chart></mdsp-event-chart>

Properties¶

Name	Type	Corresponding attribute	Default	Description	Allowed Values
context	`string`	context		Configures the context of the component. See also here.
dateRange	`TimeZoneDateRange`			Specifies the date range using `from`, `to`, `isAllDay` and `timeZone` properties.
errorNotification	`boolean`	error-notification		Enables error control if an error is thrown. This can be used for debug purposes. For productive use, the error event should be caught and handled in the application. See also here.
dragMode	`ChartDragMode`	drag-mode	Move	Specifies the behavior when dragging. Via `Select` zooming into specified area is triggered. With `Move` the chart can be moved while dragging.	- Move - Select
eventPaths	`EventPath`			Configures the asset whose events are displayed using its asset ID. If this property is not set, an additional 'Asset Id' column will be displayed and all events of the whole tenant are shown.
legendDisabled	`boolean`	legend-disabled	false	Disables legend for the chart if `true`.
locale	`string`	locale		Specifies the locale in which the component is displayed. The locales `en` and `de` are provided by default. See also here.
localeManager	`LocaleManager`			Returns a LocaleManager object. This can be used to add locales or to get the locale settings. See also here.
model	`IDataModel`			Returns an object for data model handling, refer to IDataModel model.
sharedAssets	`boolean`	shared-assets	false	Specifies whether shared assets from other tenants are supported.
timeZone	`TimeZone`	time-zone		Specifies the selected time zone.
view	`IChartViewModel`			Returns an object for view handling, refer to IViewModel model.
wheelZoom	`boolean`	wheel-zoom	false	Enables zoom control by mouse wheel if `true`. Otherwise, the control key must be pressed for zooming. Requires that `zoom-disabled` is `false`.
zoomDisabled	`boolean`	zoom-disabled	false	Disables zooming for the chart if `true`.

Events¶

Name	Type	Description
dateRangeChanged	`EventEmitter<IDateRange>`	Triggered when the date range changes, e.g. when the user zooms or moves inside the chart.
connected	`EventEmitter<any>`	Triggered after the component is created, initialized and appended to the DOM tree.
error	`EventEmitter<MdspUiError>`	Triggered when an error occurs in the component or while accessing APIs. See also here.

Models¶

TimeZoneDateRange

    interface TimeZoneDateRange {
    from: Date;
    to: Date;
    isAllDay: boolean;
    timeZone: TimeZone;
}

IDataModel

interface IDataModel {
    // forces reload of data, e.g. re-loading the events
    refresh(): void;
}

IViewModel

interface IViewModel {
  refresh(): void;
}

TimeZone

enum TimeZone {
    Local = 'Local',
    UTC = 'UTC',
}

Remarks¶

For each given Asset, the Event Chart displays maximum of the last 100 Events.

Roles¶

mdsp:core:em.xxx (Event Management API is used)

Display Events of an Asset with Alias Name¶

The following sample configures the Event Chart to display events for asset 3e4ee7f129ca4ee3af868c1645c664e8. The alias is set to a readable Asset name.

<mdsp-event-chart></mdsp-event-chart>

const eventChartComp = document.querySelector('mdsp-event-chart');
eventChartComp.eventPaths = [{'assetId':'3e4ee7f129ca4ee3af868c1645c664e8', 'alias': 'Demo Pump KHE' }];

Event Chart with Alias

Display Events of multiple Assets¶

<mdsp-event-chart></mdsp-event-chart>

const eventChartComp = document.querySelector('mdsp-event-chart');
eventChartComp.eventPaths = [
    {'assetId':'3e4ee7f129ca4ee3af868c1645c664e8', 'alias': 'Pump KHE' }, {'assetId':'a74156bf951840e3b06ce471ae546964', 'alias': 'Pump STG' }, {'assetId':'0dbf54088d0a4f97a6dd2b8ffa087335', 'alias': 'Pump BLN' },{'assetId':'163c7d81f24a4335a297fa7bb2f2166b', 'alias': 'Pump HMB' }, {'assetId':'47ee35ca98234116bcca059f4ecd3a85', 'alias': 'Pump FRA' }, {'assetId':'76ffbd22eba9480f96bd27a4eab28ce6', 'alias': 'Pump NBG' }
];

Events for multiple Assets

Zoom into specific time range via Chart Selection¶

<mdsp-event-chart></mdsp-event-chart>

const eventChartComp = document.querySelector('mdsp-event-chart');
eventChartComp.eventPaths = [
    {'assetId':'3e4ee7f129ca4ee3af868c1645c664e8', 'alias': 'Pump KHE' },
    {'assetId':'a74156bf951840e3b06ce471ae546964', 'alias': 'Pump STG' },
    {'assetId':'0dbf54088d0a4f97a6dd2b8ffa087335', 'alias': 'Pump BLN' },
    {'assetId':'163c7d81f24a4335a297fa7bb2f2166b', 'alias': 'Pump HMB' },
    {'assetId':'47ee35ca98234116bcca059f4ecd3a85', 'alias': 'Pump FRA' },
    {'assetId':'76ffbd22eba9480f96bd27a4eab28ce6', 'alias': 'Pump NBG' }
];
eventChartComp.dragMode = 'Select';