...

Web OC Dashboards can be configured in the WebOCDashboards.xml. A dashboard cont

A Data Analysis Display contains 2 to 4 panels, depending on the configuration:

1. Data Selection
2. Analysis (if configured in Toolboxes)
3. Analysis Workflows (if configured in Toolboxes)
4. Settings

is a predefined display that can contain one or more Web OC components.

Web OC Dashboard configuration

...

• 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 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. 

...

• 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

The other 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 . 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>

...