Structure of the dashboard
In this article
Structure of the dashboard
A dashboard is structured as follows:
- Dashboard: overall workspace containing all data and visualizations
- Pages or sheets: sections within the dashboard
- Tabs: sub-sections within each page
- Objects: visual elements such as KPI boxes, charts, tables, or filter boxes
The term dashboard refers to the entire structure, including all pages, charts, tables and data that make up the interface.
Dashboard
Pages/Sheets
The dashboard is organized into pages (also referred to as sheets). These are available via the menu bar. Examples of the dashboard pages include Introduction, GD Data Overview, ISO Committee Roles, and Organizations – National Organizations.
Tabs
Based on design requirements and the amount of information that needs to be conveyed to the audience, a page may or may not contain tabs.
The purpose of a tab is to optimize the space on the page, by dynamically displaying or hiding charts and objects when the user interacts with the tab buttons. It is denoted with the icon
The specific actions triggered by a tab are always the same and cannot be personalized. Clicking on the tab will activate a series of KPIs or metrics underneath the tab. When the tab is active, the tab button will be in dark red.
In the example, I have selected Committee Officer Roles as my active tab. This has activated specific objects such as Committee Manager, Committee Manager Support Team, etc.
Alternatively, clicking on the tab Decentralized Roles will display a different set of objects:
Objects: buttons, charts, tables, filters
Objects are the lowest level of the dashboard and contain the data within the pages and tabs. Examples of the most used objects include clickable buttons, KPIs, charts, tables, and filters.
Clickable buttons
Some buttons or KPIs are clickable and are denoted with the icon
A clickable button will contain a metric, for instance the count of Voter or the count of Ballot Monitor. Clicking on the button will activate the metric and will display it with a red background. In the example below, Voter is activated
Just underneath button objects you will see the row level data that makes up the numbers of the active button. In this example Voter is the active button and therefore, I can see the list of Voters behind the metric:
KPI box
Unlike the previous object, KPI boxes are not clickable and therefore will not perform any action or display any additional information. These boxes do not contain the icon
KPI boxes contain one or two metrics, which will change depending on user selections on other objects on the page. If we take the page ISO Ballots for instance, KPI boxes include Ballots, Cast Votes, Downgrades, etc.
Table
A table will contain headers and rows. Some tables will have a magnifying glass icon in the column header, which will allow the user to do a search and to filter the column values.
When applying these filters, they won’t only apply to the table but also to the rest of the page.
To optimize space, tables will only appear if the associated button is activated. Tables will display the data that make up the calculated value displayed in the associated clickable button.
In the example below, clicking on National Secretary will display the table National Secretary, including a Count column that adds up to the number in the associated button (National Secretary).
Bar Chart
A bar chart is a visual way of representing and comparing data based on some predefined parameters. In the example below, the Bar Chart represents the total number of New Work Item Proposed over time, broken down by type (IS, IWA, PAS, TS).
Hovering over the bars will display more information about its values.
On the same page where a bar chart is displayed, there will also be a table containing row level data related to the bar chart. The information within the table should be aligned to the bar chart(s).
Pie Chart
While bar charts may show a count of measures with different dimensions (e.g total of NWIP per year and total of NWIP per type), pie charts will show only one measure and one type of dimension. The overall message of a pie chart is to add another layer of detail to a number.
In the example below the purpose of the pie chart is to have a visual representation of attendance to P-membership meetings based on meeting type (hybrid, face-to-face, and virtual).
Sankey Chart
A Sankey chart visually represents the flow of a single measurement (e.g the number of meetings attended) across different dimensions (e.g meeting type, meeting level, participant role in the meeting).
Filter Pane
Typically placed at the top of the page, just below the page navigation bar, a filter pane allows users to refine the displayed data by selecting relevant dimensions. It consists of multiple filters that help users narrow down the information shown on the page.
In the example below, on the ISO Meetings page, the end user is able select a series of filter such as Meeting Title, Committee Sector, etc.
Clicking on Meeting Title in the filter pane will bring a list of meeting titles from the data within the dashboard. The end user may scroll and search for a meeting by its title, or use the search and start typing to find the desired meeting.
Date Search
A Date Search object is strategically placed on some pages next to the filter pane to allow users to filter data based on a specific date range. When clicked, the Date Search object opens a date range selector (see example below), enabling users to define the period they want to view.
