Introduction

(Since 2024.01)

Web OC Dashboards can be configured in the WebOCDashboards.xml. A dashboard is a predefined display that can contain one or more Web OC components.

Web OC Dashboard configuration

The configuration of a Web OC Dashboard consist of the following components:

• dashboard layout through the css template
• dashboard content: through <groups>, <elements> and <items>.
• dashboard interaction: through <actionId> 

Each component will be explained in the coming paragraphs.

Dashboard layout: css template

The layout of a dashboard is controlled by its CSS template. In a template the screen is divided into rectangle shapes. In the example below the screen is divided into 4 area's, by creating two rows and two columns of equal size. The css template must be placed in the WebResourceFiles and within the dashboard configuration the reference is made to the CSS template through the element <cssTemplate>css/four_equal_areas.css</cssTemplate>, please note that this is a path relative to the WebResourceFiles folder. 

.dashboard-container {
  grid-template-areas:
    'area1 area2'
    'area3 area4';
  grid-template-columns: 0.5fr 0.5fr;
  grid-template-rows:
    0.5fr 0.5fr;
}

Dashboard content: groups, elements & items

• Groups: A dashboard consist of one or more groups of elements. The function of a group is to control interaction between the elements. There is only interaction possible within a group.
• Elements: An element is connected to a gridTemplateArea in the CSS template. Each grid template area can only connect to one element. 
• Items: An item contains the data definition that visible in the element. It consist of:
  • <topologyNodeId>: The content of an item is determined by the <topologyNodeId> that is referenced, in combination with the <component>.
  • <component>: Through the <component> element you specify what part of the topology node you want to visualize in the dashboard. This is necessary because topology nodes can contain a multitude of data and Web OC display types.
  • <componentSettingsId>: this optional element allows for advanced configuration of the visualised component. See 37 Web OC Component Settings
  • <actionId>: optional element. By default the first configured item is shown. Through the <actionId>, other configured <items> can be visualised. They will be shown when their configured <actionId> is triggered from a Schematic Status Display object. See 15 Schematic Status Display  and the paragraph "Configurable interaction" below. 

The example below shows the configuration on an item. 

<groups>
			<group>
				<elements>
					<element>
						<gridTemplateArea>area1</gridTemplateArea>
						<items>
							<item>
								<topologyNodeId>viewer_main_meteo_precipitation_singv</topologyNodeId>
								<component>map</component>
								<componentSettingsId>gridComparisonSettings</componentSettingsId>
								<actionId>test.action</actionId>
							</item>
						</items>
					</element>
				</elements>
			</group>

An example of a dashboard containing 2 groups and 4 elements.

Synchronization and interaction on a dashboard

By default the times and timeslider interaction on a dashboard are synchronized. Individual elements can have different timesteps, e.g. 1-hour for a map component and 5-minutes for a schematic status display. When a dashboard is loaded, an interaction of the timesteps of all components is made. NOTE: Because the components can have different relative view periods and timesteps, this can result in a timeslider that is not equidistant. 

Interaction between elements

There is only interaction possible if elements are in the same group. 

Automatic / Default synchronisation & interaction

If elements are in the same group, the following:

• between map components:
  • view extent and zoomlevels are synchronised
  • if the maps have the same classBreakId, rescaling will be synchronised
• between chart components: zoom and panning are synchronised.

Configurable interaction

By default only the first <item> in an <element> is visualized. Other items can be visualised through the interaction on a SVGObject. This is done through the configuration of a WebOCDashboardAction with an <actionId> configured in a Schematic Status Display. See 15 Schematic Status Display . When the object is clicked on, the actionId is fired. All items that have this <actionId> will be activated.  An item can contain multiple <actionIds>

Example Configuration

<dashboard>
		<id>main_precipiation_comparison_dashboard</id>
		<name>Precipitation Dashboard</name>
		<cssTemplate>css/four_equal_areas.css</cssTemplate>
		<groups>
			<group>
				<elements>
					<element>
						<gridTemplateArea>area1</gridTemplateArea>
						<items>
							<item>
								<topologyNodeId>viewer_main_meteo_precipitation_singv</topologyNodeId>
								<component>map</component>
								<componentSettingsId>gridComparisonSettings</componentSettingsId>
							</item>
						</items>
					</element>
				</elements>
			</group>
			<group>
				<elements>
					<element>
						<gridTemplateArea>area2</gridTemplateArea>
						<items>
							<item>
								<topologyNodeId>viewer_main_meteo_precipitation_blended</topologyNodeId>
								<component>map</component>
								<componentSettingsId>gridComparisonSettings</componentSettingsId>
							</item>
						</items>
					</element>
				</elements>
			</group>
			<group>
				<elements>
					<element>
						<gridTemplateArea>area3</gridTemplateArea>
						<items>
							<item>
								<topologyNodeId>viewer_main_meteo_precipitation_nea_radar</topologyNodeId>
								<component>map</component>
								<componentSettingsId>gridComparisonSettings</componentSettingsId>
							</item>
						</items>
					</element>
				</elements>
			</group>
			<group>
				<elements>
					<element>
						<gridTemplateArea>area4</gridTemplateArea>
						<items>
							<item>
								<topologyNodeId>viewer_main_meteo_precipitation_pysteps_nowcast</topologyNodeId>
								<component>map</component>
								<componentSettingsId>gridComparisonSettings</componentSettingsId>
							</item>
						</items>
					</element>
				</elements>
			</group>
		</groups>
	</dashboard>