QPR ProcessAnalyzer Dashboard Designer: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
No edit summary
Line 1: Line 1:
The dashboard designer is for designing and implementing dashboards by adding components from the tool palette, adjusting their sizes and positions and making settings for each component.
Dashboards may be in '''viewing mode''' and '''editor mode'''. When in editor mode, charts can only be moved and resized. Interacting with the charts (e.g. clicking buttons) is possible when the viewing mode is used.
== View Settings ==
== View Settings ==
* Properties
* Properties
** '''Name''': Name of the dashboard. Tags can be used in panel names. View name is visible in workspaces screens and view header. Maximum length for the name field is 100 characters.
** '''Name''': Name of the dashboard. Maximum length for the name is 100 characters.
** '''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 views by using the sys:dashboardIdentifier variable.
** '''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 views by using the sys:dashboardIdentifier variable.
** '''Description''': Description of the dashboard. The description is not visible for the dashboard viewers, but it can be used e.g. to include documentation for the dashboard designer users.
** '''Description''': Additional descriptive text for the dashboard.
* Presentation
** '''Aspect ratio flex''': Decimal number determining how much the view's aspect ratio (width divided by height) is allowed to vary.
** '''Aspect ratio flex''': Decimal number determining how much panel content's aspect ratio (width divided by height) is allowed to vary. Note that this setting doesn't affect the aspect ratio of the panel itself in a dashboard (it's determined in the dashboard designer), but only its contents.
*** View has a '''design aspect ratio''' which is determined by how presentation objects are arranged during the designing. Note that the whole available design area doesn't matter - only the actual presentation objects determine the shown area and the design aspect ratio.
*** Panel has a '''design aspect ratio''' which is determined by how presentation objects are arranged in the panel designer. Note that the whole available design area doesn't matter - only the actual presentation objects determine the shown area and the design aspect ratio.
*** 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, panel'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''', panel's 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, panel's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8).
*** Contents always takes all available space horizontally. 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.
*** Panel contents always takes all available space horizontally. If the aspect ratio's lower limit is reached (i.e. panel contents is not allowed use all available space vertically), there may be empty space in the bottom of the panel. If the aspect ratio's higher limit is reached (i.e. panel contents doesn't fit vertically), the panel has a vertical scrollbar.
*** The aspect ratio flex is useful for charts which don't work properly if the aspect ratio stretches to too extreme.
*** The aspect ratio flex is useful e.g. for presentation objects which don't work properly if the aspect ratio stretches to too extreme.
** '''Inner margin''': For dashboards, horizontal/vertical space, in pixels, between the charts in the dashboard.
** '''Inner margin''': For dashboards, horizontal/vertical space between the panels in the dashboard. For panels, horizontal/vertical space between the presentation objects in the panel. Defined in pixels.
** '''Outer margin''': For dashboards, space between the charts and the dashboard outer border, in pixels.
** '''Outer margin''': For dashboards, space between the panels and the dashboard outer border. For panels, space between the presentation object(s) and the panel border. Defined in pixels.
** '''Background color''': Background color of the dashboard. It's possible to set transparent background by setting the value of the alpha channel in the rgba to 0 either by inputting the value or by using the rightmost slider.
** '''Background color''': Background color of the dashboard. Panels inside the dashboard may have other background colors than the dashboard. It's possible to set transparent background by setting the value of the alpha channel in the rgba to 0 either by inputting the value or by using the rightmost slider. For panels, the background color doesn't affect the panel header background, which is always white. Note that presentation objects inside the panel may be transparent or have other background color than the panel.
** '''SVG background''': The SVG image to use as the background. The SVG image will be rendered on top of the defined background color.
** '''SVG background''': The SVG image to use as the panel background. The SVG image will be rendered on top of the defined panel Background color. The SVG image is defined in the same way as with [[SVG_Properties|SVG Presentation Objects]], except that the SVG image used as the panel background cannot contain actions.
* [[Dashboard Variables]]
* [[Dashboard Variables]]


== View Scaling in Different Screen Sizes==
== Dashboard Scaling in Different Screen Sizes==
Views and panels have the following scaling options:
Views 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 '''fixed height mode''' 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.
* 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.
* In the '''relative height mode''', 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 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.
* There is also a '''hybrid mode''', where 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.
 
== Viewing and Editor Modes ==
Dashboards may be seen in two modes: '''viewing mode''' and '''editor mode'''. When in editor mode, the panels and presentation objects can only be moved and resized. Interacting with presentation objects (e.g. clicking buttons) is possible when the viewing mode is used.


[[Category: QPR ProcessAnalyzer]]
[[Category: QPR ProcessAnalyzer]]

Revision as of 15:55, 9 March 2020

The dashboard designer is for designing and implementing dashboards by adding components from the tool palette, adjusting their sizes and positions and making settings for each component.

Dashboards may be in viewing mode and editor mode. When in editor mode, charts can only be moved and resized. Interacting with the charts (e.g. clicking buttons) is possible when the viewing mode is used.

View Settings

  • Properties
    • Name: Name of the dashboard. Maximum length for the name is 100 characters.
    • 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 views by using the sys:dashboardIdentifier variable.
    • Description: Additional descriptive text for the dashboard.
    • Aspect ratio flex: Decimal number determining how much the view's aspect ratio (width divided by height) is allowed to vary.
      • View has a design aspect ratio which is determined by how presentation objects are arranged during the designing. Note that the whole available design area doesn't matter - only the actual presentation objects determine the shown area and the design aspect ratio.
      • 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, panel's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8).
      • Contents always takes all available space horizontally. 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.
      • The aspect ratio flex is useful for charts which don't work properly if the aspect ratio stretches to too extreme.
    • Inner margin: For dashboards, horizontal/vertical space, in pixels, between the charts in the dashboard.
    • Outer margin: For dashboards, space between the charts and the dashboard outer border, in pixels.
    • Background color: Background color of the dashboard. It's possible to set transparent background by setting the value of the alpha channel in the rgba to 0 either by inputting the value or by using the rightmost slider.
    • SVG background: The SVG image to use as the background. The SVG image will be rendered on top of the defined background color.
  • Dashboard Variables

Dashboard Scaling in Different Screen Sizes

Views have the following scaling options:

  • In the fixed height mode 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.
  • In the relative height mode, 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 view or panel Aspect Ratio Flex to a high enough number, such as 100.
  • There is also a hybrid mode, where 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.