QPR ProcessAnalyzer Dashboard Designer: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(56 intermediate revisions by the same user not shown)
Line 1: Line 1:
A QPR UI '''view''' is the topmost area consisting of '''panels''' that have '''presentation objects''' inside them. The location and size of the panels within the view can be edited.
The dashboard designer is for viewing and editing dashboards, depending on the mode that is in use. ''Preview mode'' is for viewing the dashboard, ''Edit mode'' is for editing chart and other component settings, and ''Add component mode'' is for adding, removing, resizing and moving charts.


== View and Panel Settings ==
== Viewing and Editing Dashboards ==
* Properties
Dashboards can be viewed in the following modes:
** '''Version''': Version of the view/panel (read-only information). For panels it's also shown, whether the view is linked to the ''latest version'' of the panel. For example, if a view is linked to the latest version of a panel, and the current latest version is 1, when a new version of that panel is created, the view uses the version 2.
* '''Preview''': When opening a dashboard, the ''Preview mode'' is in use. It's for viewing the dashboard without ability to change the dashboard settings. Chart settings can be changed while viewing to make temporary changes, 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.
** '''Path''': The path of the panel (read-only information). Shown for panels which are added to the view via using the [[#Adding a Panel|"Latest version using path"]] option described below.
* '''Edit''': ''Edit mode'' is for making savable changes to the dashboard. The changes are saved by pressing the '''Save''' button. When exiting the Edit mode without saving changes, there is a notification about the changes that might be lost.
** '''Name''': Name of the view/panel/repeater. Note that it's not possible to use [[Dynamic_Tags_in_QPR_UI|tags]] in view and repeater names. Tags can be used in panel names. View name is visible in workspaces screens and view header. Panel name is visible in panel header (if it's set visible). Maximum length for the name field is 100 characters.
* '''Add component''': The ''Add component mode'' can be activated from the ''Edit mode''. It's for adding, removing, moving, resizing, and duplicating charts. In addition, the stacking order of components can be changed. New charts are added from the tool palette. The selected chart can be removed and duplicated using the icon buttons on the top right of the chart, and the stacking order can be changed using the '''Bring to front''', '''Bring forward''', '''Send to back''' and '''Send backward''' buttons. 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.
** '''Identifier''': Identifier of the view/panel. The identifier is a text that must be unique in the folder where the view/panel is located. Identifiers are case sensitive, they must not contain "/" characters, and the maximum length is 2048 characters. Identifiers are used to open views by using the sys:dashboardIdentifier variable or to define the [[QPR_UI_System_Settings#Other_settings|default view]] to be opened when a user logs in. For panel identifiers, the identifier is visible in the '''Select panel to be added to view''' dialog for better identification.
** '''Description''': Description of the view/panel/repeater. The description is not visible for the dashboard viewers, but it can be used e.g. to include documentation for the dashboard designer users.
* [[Datasets_in_QPR_UI|Datasets]]
* [[Container_Presentation_Settings_in_QPR_UI|Presentation]]
* [[Variables_in_QPR_UI|Context]]


== View and Panel Scaling in Different Screen Sizes==
The ''Edit mode'' can be activated by clicking the '''Edit''' button in the ''Preview mode''. Note that editing is not available, 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.
Views and panels have the following scaling options:
* In the '''fixed height mode''' all panels have fixed height in pixels, and the height of panels doesn't change between different screen sizes. The fixed height mode is switched on by defining view or panel Aspect ratio flex to 1 (more information about [[Container_Presentation_Settings_in_QPR_UI|Aspect Ratio Flex]]).
* In the '''relative height mode''', all panels 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 view or panel Aspect Ratio Flex to a high enough number, such as 100.
* There is also a '''hybrid mode''', where panels' height adjust to some degree to the available space, but there is a certain adjustable limit for panels' 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.


View and panel width is always determined by the relative height principle. The views and panels are never scrollable horizontally, but the content always takes the whole available space.
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.


{{MBDViewAndEditModes}}
== Dashboard General Settings ==
* '''Name''': Short name for the dashboard that doesn't need to be unique. Dashboard name cannot be empty, maximum length is 440 characters, and the name cannot contain the slash (/) character.
* '''Identifier''': Dashboard identifier that must be unique in the project where the dashboard is located. Identifiers are used to link dashboards by using the [[Dashboard_Variables#System_Variables|sys:dashboardIdentifier]] variable. Identifiers are case sensitive, the maximum length is 440 characters and they must not contain "/" characters. Dashboard identifier is an optional field.
* '''Description''': Optional descriptive text for the dashboard.


[[Category: QPR ProcessAnalyzer]]
== 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 [[#Dashboard Scaling to Adjust Screen|below]].
 
== [[Dashboard Variables]] ==
Variables are for storing session time information and interacting between charts on other components. See the main article about the [[Dashboard Variables|dashboard variables]].
 
== Dashboard Size Scaling ==
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.

Latest revision as of 12:23, 9 August 2023

The dashboard designer is for viewing and editing dashboards, depending on the mode that is in use. Preview mode is for viewing the dashboard, Edit mode is for editing chart and other component settings, and Add component mode is for adding, removing, resizing and moving charts.

Viewing and Editing Dashboards

Dashboards can be viewed in the following modes:

  • Preview: When opening a dashboard, the Preview mode is in use. It's for viewing the dashboard without ability to change the dashboard settings. Chart settings can be changed while viewing to make temporary changes, 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: Edit mode is for making savable changes to the dashboard. The changes are saved by pressing the Save button. When exiting the Edit mode without saving changes, there is a notification about the changes that might be lost.
  • Add component: The Add component mode can be activated from the Edit mode. It's for adding, removing, moving, resizing, and duplicating charts. In addition, the stacking order of components can be changed. New charts are added from the tool palette. The selected chart can be removed and duplicated using the icon buttons on the top right of the chart, and the stacking order can be changed using the Bring to front, Bring forward, Send to back and Send backward buttons. 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 editing is not available, 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 name for the dashboard that doesn't need to be unique. Dashboard name cannot be empty, maximum length is 440 characters, and the name cannot contain the slash (/) character.
  • Identifier: Dashboard identifier that must be unique in the project where the dashboard is located. Identifiers are used to link dashboards by using the sys:dashboardIdentifier variable. Identifiers are case sensitive, the maximum length is 440 characters and they must not contain "/" characters. Dashboard identifier is an optional field.
  • Description: Optional 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 Variables

Variables are for storing session time information and interacting between charts on other components. See the main article about the dashboard variables.

Dashboard Size Scaling

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.