4.7. Pages

MQC structures all the important information of your project and shows it on different pages. Mainly, there are three kinds of pages, showing either quality, the imported data or data availability (see Interactive Pages).

On all pages the main visualization always shows one revision with the possibility to switch revisions from the dropdown menu above (see Revision Selection). By default, Everything means that all revisions with imported data will be shown. For example, if revision granularity is set to Days, days without imported data are not shown in the visualizations.

All pages contain interactive visualizations. If you click into any of the visualizations, the other visualizations will react and show information related to what you have marked (see Marking).

Based on the Project Structure you have imported, the filter panel on the right (see Filter Panel) will display options for filtering the data.

All MQC pages can be easily enabled or disabled by selecting the corresponding page in the Pages dialog of the left-hand side panel .

Figure 4.83 Pages dialog for page configurations

In the Pages dialog the Layout Sources and Dashboard Sources can be configured, saved and exported similar to all other configuration sources (see Configuration Sources).

4.7.1. Pages Layouts

MQC allows you to create custom page layout configurations for the Interactive pages, so you can define personalized pages that will fit your needs and only display the relevant data.

MQC is shipped with one default Page Layout Template source containing different Page Layout definitions. The active page layouts are stored in the Page Layout sources: QualityPageLayout.yml, DataPageLayout.yml and AvailabilityPageLayout.yml. The Template source contains the different page Templates for one Page with given Name (e.g., for Quality named Status as shown in Listing 4.23). You can define a custom Layout where visualizations for the three main areas of the page: Top, Structure and Main can be specified. For each area Visuals can be defined with the corresponding Identifier. Which visualization should be active is specified in ActiveVisualization by giving the Identifier of the visualization. The source can be defined as shown in Listing 4.23.

Listing 4.23 Code snipped from the default MQC Page Layout Template source in YAML

$schema: http://quality-commander.de/userguide/v83/schema/PageLayoutSource.schema.json
$version: 1.0
Templates:
  - Page: Quality
    Name: Status
    Layout:
        Top:
          - Visuals:
              - Identifier: QualityBinTrend # Visualization tab 1
              - Identifier: QualityTrend # Visualization tab 2
            ActiveVisual:
                Identifier: QualityBinTrend # Visualization tab 2
        Structure:
          - Visuals:
              - Identifier: QualityStructureArtifact # Visualization tab 3
            ActiveVisual:
                Identifier: QualityStructureArtifact # Visualization tab 3
          - Visuals:
              - Identifier: QualityStructureQualityProperty # Visualization tab 4
            ActiveVisual:
              Identifier: QualityStructureQualityProperty # Visualization tab 4
        Main:
          - Visuals:
              - Identifier: QualityHeatmap # Visualization tab 5
              - Identifier: QualitySunburst # Visualization tab 6
              - Identifier: QualityDataOrigin # Visualization tab 7
          ActiveVisual:
              Identifier: QualityHeatmap # Visualization tab 5
  - Page: Quality
    Name: Trend
    Layout:
        Top:
          - Visuals:
              - Identifier: QualityBinTrend
              - Identifier: QualityTrend
            ActiveVisual:
              Identifier: QualityBinTrend
        Structure:
          - Visuals:
              - Identifier: QualityStructureArtifact
            ActiveVisual:
              Identifier: QualityStructureArtifact
          - Visuals:
              - Identifier: QualityStructureQualityProperty
            ActiveVisual:
              Identifier: QualityStructureQualityProperty
        Main:
            - Stacked:
                - Visuals:
                    - Identifier: QualityTrendByArtifact
                ActiveVisual:
                    Identifier: QualityTrendByArtifact
                - Visuals:
                    - Identifier: QualityTrendByQualityProperty
                ActiveVisual:
                    Identifier: QualityTrendByQualityProperty

Figure 4.84 Default Quality Page

If you want some visualizations to be shown on top of each other in one area you can use the keyword Stacked and specify the Visuals as shown in Listing 4.23.

The current Layout for a Page can be changed from the Page Layout Switcher in the left hand side (see Templates).

4.7.2. Dashboards

MQC provides the possibility to create custom dashboard page configurations. This allows you to define personalized dashboard pages that fit your needs.

To configure a Dashboard source, you need to create a YAML file in which you specify the Authors and DashboardPages. For each dashboard page Name and Items should be specified. You can define a visualization by adding the Visual in Items. The Visual should contain the category and the name of the visual (e.g., Project.InformationCard). In addition, the Position (X and Y) and the Size (Width and Height) of the element should be defined. It is also possible to hide the title of the visualization by setting the property TitleBarHidden to true.

The configuration can be done in YAML following the schema:

Listing 4.24 Defining dashboard source in YAML

$schema: http://quality-commander.de/userguide/v83/schema/DashboardSource.schema.json
$version: 1.0
Authors:
    - Model Engineering Solutions GmbH
DashboardPages:
    - Name: 'Dashboard'
    Items:
    - Visual: 'Project.InformationCard'
        Position:
            X: 0
            Y: 0
        Size:
            Width: 6
            Height: 8
    - Visual: 'Quality.TrendLineChart'
        Position:
            X: 6
            Y: 0
        Size:
            Width: 18
            Height: 8
    - Visual: 'Data.WorstArtifactsStructureChart'
        Position:
            X: 16
            Y: 11
        Size:
            Width: 8
            Height: 5
        TitleBarHidden: true

In this way a dashboard file may be used for multiple projects as well.