QPR ProcessAnalyzer Dashboard Designer: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
No edit summary
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
The dashboard designer is for editing dashboards, allowing to add components from the tool palette, adjust component sizes and positions, and change settings for each component.
The dashboard designer is for editing dashboards, allowing to add charts from the tool palette, adjust chart sizes and positions and change settings for each chart.


== Editing Dashboards ==
== Editing Dashboards ==
The dashboard designer has the following modes:
The dashboard designer has the following modes:
* '''Preview''': When opening a dashboard, the Preview mode is by default in use and it's used to view the dashboard. Chart settings can be changed temporarily while viewing, and so the changes are not saved to the dashboard. There is no confirmation message related to the changes when going to another dashboard, so the changes are lost when opening another dashboard.
* '''Preview''': When opening a dashboard, the ''Preview mode'' is in use and it's for viewing the dashboard without the intention to change the dashboard. Chart settings can be changed while viewing, and the changes are temporary, i.e. they are not saved to the dashboard. There is no confirmation message related to the changes when going to another dashboard, so the changes are lost when opening another dashboard.
* '''Edit''': Used to make savable changes to the dashboard. When opening the dashboard in a next time, it opens in the saved state. When exiting the Edit mode without saving changes, there is a notification message about the changes that might be lost.
* '''Edit''': The ''Edit mode'' is for making savable changes to the dashboard. When opening the dashboard in a next time, it opens in the saved state. When exiting the Edit mode without saving changes, there is a notification message about the changes that might be lost.
* '''Add component''': This mode can be activated from the Edit mode, and it's used to add new charts, remove charts and move/resize charts.
* '''Add component''': The ''Add component mode''  can be activated from the ''Edit mode'', and it's for adding, removing, moving/resizing, and duplicating charts. New charts are added from the tool palette. Charts are removed and duplicated using the icon buttons on the top right of the chart (the chart needs to be selected first). Charts can be moved by selecting the chart and dragging it with the mouse. Charts can be resized by dragging the chart from the circular resize handles in the corners of the chart.


Edit mode can be activated by clicking the '''Edit''' button in the Preview mode. Note that there is no Edit button, if the user doesn't have permissions to edit the dashboard. The Add component mode can be activated by clicking the '''Plus''' button in the Edit mode. It's possible to go back to the Edit mode from the Add component mode by clicking the '''Done''' button.
The ''Edit mode'' can be activated by clicking the '''Edit''' button in the ''Preview mode''. Note that there is no Edit button, if the user doesn't have permissions to edit the dashboard. The ''Add component'' mode can be activated by clicking the '''Plus''' button in the ''Edit mode''. It's possible to go back to the ''Edit mode'' from the ''Add component'' mode by clicking the '''Done''' button.


When there are changes made in the Preview mode and the Edit mode is activated, the changes are preserved allowing to save them in the the Edit mode. Note that when going back to the Preview mode from the Edit mode, changes either need to be saved or discarded.
When there are changes made in the ''Preview mode'' and the ''Edit mode'' is activated, the changes are preserved allowing to save them in the the ''Edit mode''. When going back to the ''Preview mode'' from the ''Edit mode'', changes either need to be saved or discarded.


== Dashboard General Settings ==
== Dashboard General Settings ==
* '''Name''': Name of the dashboard. Maximum length for the name is 100 characters.
* '''Name''': Short descriptive name for the dashboard. Dashboard names don't need to be unique. There are following requirements for the dashboard name: name cannot be empty, maximum length is 440 characters, and the name cannot contain the slash (/) character.
* '''Identifier''': Identifier of the dashboard. The identifier is a text that must be unique in the folder where the dashboard is located. Identifiers are case sensitive, they must not contain "/" characters, and the maximum length is 2048 characters. Identifiers are used to open dashboards by using the sys:dashboardIdentifier variable.
* '''Identifier''': Dashboard identifier which is a text that must be unique in the project where the dashboard is located. Identifiers are used to open dashboards by using the [[Dashboard_Variables#System_Variables|sys:dashboardIdentifier]] variable. Identifiers are case sensitive, they must not contain "/" characters, and the maximum length is 440 characters. Dashboard identifier is an optional field.
* '''Description''': Additional descriptive text for the dashboard.
* '''Description''': Additional descriptive text for the dashboard.


== Dashboard Layout Settings ==
== Dashboard Layout Settings ==
* '''Aspect ratio flex''': Decimal number determining how much the dashboard's aspect ratio (width divided by height) is allowed to vary when trying to fit the dashboard to the available screen space. Minimum allowed value is 1. See more information [[#Dashboard Scaling to Adjust Screen|below]].
* '''Chart margin''': Horizontal and vertical space around charts in the dashboard. Defined in pixels.
* '''Chart margin''': Horizontal and vertical space around charts in the dashboard. Defined in pixels.
* '''Dashboard margin''': Horizontal and vertical space in the outer borders of the dashboard. Defined in pixels.
* '''Dashboard margin''': Horizontal and vertical space in the outer borders of the dashboard. Defined in pixels.
* '''Background color''': Background color of the dashboard. It's possible to set transparent background by setting the alpha value (A) to 0.
* '''Background color''': Background color of the dashboard. It's possible to set transparent background by setting the alpha value (A) to 0.
* '''Aspect ratio flex''': Decimal number determining how much the dashboard's aspect ratio (width divided by height) is allowed to vary when trying to fit the dashboard to the available screen space. Minimum allowed value is 1. See more information [[#Dashboard Scaling to Adjust Screen|below]].


== Dashboard Scaling to Adjust Screen ==
== Dashboard Scaling to Adjust Screen ==
Dashboards have the following scaling options based on how the '''aspect ratio flex''' setting:
Dashboards have the following scaling options based on how the '''aspect ratio flex''' setting:
* '''Fixed height''': all charts have fixed height in pixels, and the height of charts doesn't change between different screen sizes. The fixed height mode is switched on by defining dashboard Aspect ratio flex to 1.
* '''Fixed height''' (default): all charts have fixed height in pixels, and the height of charts doesn't change between different screen sizes. The fixed height mode is switched on by defining dashboard Aspect ratio flex to 1.
* '''Relative height''': all height adjust to the available screen height in a way that the content always takes the entire screen height so the screen is never scrollable nor there is empty space in the bottom of the screen. The relative height mode is switched on by defining dashboards Aspect Ratio Flex to a high enough number, such as 100.
* '''Relative height''': all height adjust to the available screen height in a way that the content always takes the entire screen height so the screen is never scrollable nor there is empty space in the bottom of the screen. The relative height mode is switched on by defining dashboards Aspect Ratio Flex to a high enough number, such as 100.
* '''Balanced''': height adjusts to some degree to the available space, but there is a certain adjustable limit for dashboards' height. The hybrid mode is used when the Aspect ratio flex is set to greater than 1 but not too big number. For example 1.2 - 2.0 might be suitable. This aspect ratio flex setting is useful for charts which don't work properly if the aspect ratio stretches to too extreme.
* '''Balanced''': height adjusts to some degree to the available space, but there is a certain adjustable limit for dashboards' height. The hybrid mode is used when the Aspect ratio flex is set to greater than 1 but not too big number. For example 1.2 - 2.0 might be suitable. This aspect ratio flex setting is useful for charts which don't work properly if the aspect ratio stretches to too extreme.


Described accurately, the aspect ratio is calculated as follows:
The aspect ratio is calculated as follows:
* Dashboard has a '''design aspect ratio''' which is determined by how charts are arranged during designing.
* Dashboard has a '''design aspect ratio''' which is determined by how charts are arranged during designing.
* Aspect ratio calculation rule: If design aspect ratio is '''A''' and aspect ratio flex is '''B''', the aspect ratio is allowed to change between '''A/B''' and '''A*B'''. Example: If design aspect ratio is 2 and aspect ratio flex is 4, the dashboard's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8).
* Aspect ratio calculation rule: If design aspect ratio is '''A''' and aspect ratio flex is '''B''', the aspect ratio is allowed to change between '''A/B''' and '''A*B'''. Example: If design aspect ratio is 2 and aspect ratio flex is 4, the dashboard's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8).

Revision as of 17:27, 28 September 2021

The dashboard designer is for editing dashboards, allowing to add charts from the tool palette, adjust chart sizes and positions and change settings for each chart.

Editing Dashboards

The dashboard designer has the following modes:

  • Preview: When opening a dashboard, the Preview mode is in use and it's for viewing the dashboard without the intention to change the dashboard. Chart settings can be changed while viewing, and the changes are temporary, i.e. they are not saved to the dashboard. There is no confirmation message related to the changes when going to another dashboard, so the changes are lost when opening another dashboard.
  • Edit: The Edit mode is for making savable changes to the dashboard. When opening the dashboard in a next time, it opens in the saved state. When exiting the Edit mode without saving changes, there is a notification message about the changes that might be lost.
  • Add component: The Add component mode can be activated from the Edit mode, and it's for adding, removing, moving/resizing, and duplicating charts. New charts are added from the tool palette. Charts are removed and duplicated using the icon buttons on the top right of the chart (the chart needs to be selected first). Charts can be moved by selecting the chart and dragging it with the mouse. Charts can be resized by dragging the chart from the circular resize handles in the corners of the chart.

The Edit mode can be activated by clicking the Edit button in the Preview mode. Note that there is no Edit button, if the user doesn't have permissions to edit the dashboard. The Add component mode can be activated by clicking the Plus button in the Edit mode. It's possible to go back to the Edit mode from the Add component mode by clicking the Done button.

When there are changes made in the Preview mode and the Edit mode is activated, the changes are preserved allowing to save them in the the Edit mode. When going back to the Preview mode from the Edit mode, changes either need to be saved or discarded.

Dashboard General Settings

  • Name: Short descriptive name for the dashboard. Dashboard names don't need to be unique. There are following requirements for the dashboard name: name cannot be empty, maximum length is 440 characters, and the name cannot contain the slash (/) character.
  • Identifier: Dashboard identifier which is a text that must be unique in the project where the dashboard is located. Identifiers are used to open dashboards by using the sys:dashboardIdentifier variable. Identifiers are case sensitive, they must not contain "/" characters, and the maximum length is 440 characters. Dashboard identifier is an optional field.
  • Description: Additional descriptive text for the dashboard.

Dashboard Layout Settings

  • Chart margin: Horizontal and vertical space around charts in the dashboard. Defined in pixels.
  • Dashboard margin: Horizontal and vertical space in the outer borders of the dashboard. Defined in pixels.
  • Background color: Background color of the dashboard. It's possible to set transparent background by setting the alpha value (A) to 0.
  • Aspect ratio flex: Decimal number determining how much the dashboard's aspect ratio (width divided by height) is allowed to vary when trying to fit the dashboard to the available screen space. Minimum allowed value is 1. See more information below.

Dashboard Scaling to Adjust Screen

Dashboards have the following scaling options based on how the aspect ratio flex setting:

  • Fixed height (default): all charts have fixed height in pixels, and the height of charts doesn't change between different screen sizes. The fixed height mode is switched on by defining dashboard Aspect ratio flex to 1.
  • Relative height: all height adjust to the available screen height in a way that the content always takes the entire screen height so the screen is never scrollable nor there is empty space in the bottom of the screen. The relative height mode is switched on by defining dashboards Aspect Ratio Flex to a high enough number, such as 100.
  • Balanced: height adjusts to some degree to the available space, but there is a certain adjustable limit for dashboards' height. The hybrid mode is used when the Aspect ratio flex is set to greater than 1 but not too big number. For example 1.2 - 2.0 might be suitable. This aspect ratio flex setting is useful for charts which don't work properly if the aspect ratio stretches to too extreme.

The aspect ratio is calculated as follows:

  • Dashboard has a design aspect ratio which is determined by how charts are arranged during designing.
  • Aspect ratio calculation rule: If design aspect ratio is A and aspect ratio flex is B, the aspect ratio is allowed to change between A/B and A*B. Example: If design aspect ratio is 2 and aspect ratio flex is 4, the dashboard's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8).
  • If the aspect ratio's lower limit is reached (i.e. contents is not allowed use all available space vertically), there may be empty space in the bottom. If the aspect ratio's higher limit is reached (i.e. contents doesn't fit vertically), there is a vertical scrollbar.

Dashboard Variables