Dashboard configuration

The dashboard configuration is a form element that prepares the data from its data service so that it can be displayed by a chart element. Thereby it is possible to cluster (group) according to certain values and to create value series via categories (similar to an OLAP cube).

The procedure always follows the same principle.

images/download/attachments/189435344/source-version-1-modificationdate-1729505947942-api-v2.png

Source
Loads data from a random source and fills a data provider, which can be identified by an ID (e.g. sourceData).

images/download/attachments/189435344/arrow-version-1-modificationdate-1729505947939-api-v2.png


images/download/attachments/189435344/chart-version-1-modificationdate-1729505947948-api-v2.png

Dashboard configuration (Summarization)

Uses the data provider filled by the source, creates clusters, categories and series (OLAP cubes)
and in turn fills a data provider, which is also identifiable by an ID (e.g. chartData).
Of course, multiple dashboard configurations can also use the same source provider.

images/download/attachments/189435344/arrow-version-1-modificationdate-1729505947939-api-v2.png


images/download/attachments/189435344/dashboardconfig-version-1-modificationdate-1729505947945-api-v2.png

Charts (Visualization)
Use the data provider populated by the dashboard configuration and visualize the data it contains accordingly.
Several charts can also use the same data provider. The chart type is interchangeable (except for the special case 'Map').

►CAUTION◄ The Lobster_pro dashboard is a pure visualization layer for statistical data. The number of data sets to be processed therefore has natural limits. Where this limit lies depends on the processing power of the client system and must be determined primarily by testing. Loading and aggregation of data in the dashboard configuration is performed exclusively by the client (browser), which can significantly affect the performance of the application, depending on the amount of data. In such cases, it is recommended to pre-summarize the data externally (e.g. via a data mining tool or by incrementally exporting the relevant data to an external database table) and then load it e.g. via a Profilaufruf (Lobster_data) for processing in the Lobster_pro Dashboard.

'Dashboard' properties category

images/download/attachments/189435344/image-2024-10-21_16-6-0-version-1-modificationdate-1729519559734-api-v2.png

Editable: Determines whether the user is allowed to modify the dashboard configuration (if visible).

No elements defined: Contains the list of attributes/fields which are available for collecting statistical data. Fields automatically appear here if the dashboard configuration has already been filled with correct data once in test mode (see Erste Schritte). By double-clicking on an entry, further setting options related to this entry can be made.

►NOTE◄ If a field has not been listed here, it can also be added manually via Add value images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/add.svg .

Add item: Manually synchronizes the field list with the fields of the entries from the data source.

Add category: Provides the possibility to sort data categories. If enabled, the categories by default will be sorted by the average of their series values in ascending order. In addition, a calculation expression is displayed, which is used to adjust the sorting behaviour. See Sortieren der Kategorien for more details.

First steps

To demonstrate the possibilities, the following shows how to create a dashboard that generates statistics about users' login history and visualizes them with different types of charts.

The source is a simple button which, when clicked with the form data loaded, performs a tuple search for logon history objects and writes the resulting entries to a shared data provider with the ID 'sourceData' (Action: Set shared data provider).

Tip: In the editor element section 'Data sources' templates can be dragged into the form for this purpose.

Source (Button)

Dashboard configuration (Data service)

images/download/attachments/189435344/image-2024-10-21_16-21-30-version-1-modificationdate-1729520490073-api-v2.png

The tuple search looks for 'login history' objects.
The following fields are selected:

  • ID (id)

  • Agent Name (userAgentName)

The shared data provider 'sourceData' is filled via an action. The name is arbitrary but must be unique.

images/download/attachments/189435344/image-2024-10-21_16-22-13-version-1-modificationdate-1729520533010-api-v2.png

The data provider 'sourceData' filled by the source is used as the data source for the dashbaord.

Tip: By using a 'Shared Data Provider', several different dashboard configurations can also process the same data source. The dashboard configuration is now already filled with source data when the form is loaded.

►IMPORTANT◄ In order for the available data fields of the source to become known and for subsequent configurations to be made with them, the dashboard configuration must be filled with data once in test mode. In this example, it is therefore sufficient to start and end the test mode again. This must also be done when reopening the Dashboard Designer so that the chart components are drawn in the first place.

After exiting test mode, the tuple fields are known and available for configuration. The fields now appear in the Dashboard properties section of the Dashboard Configuration element after pressing the 'Update' button.

►NOTE◄ The field with the label '*' is used as a placeholder to be able to use it later for counting results without having to configure an extra field (like id here).

images/download/attachments/189435344/image-2024-10-21_16-15-41-version-1-modificationdate-1729520141294-api-v2.png

These fields are also available as child elements of the dashboard configuration and can be configured individually (e.g. labeling).

See element tree in the editor:

images/download/attachments/189435344/image-2024-10-21_16-16-33-version-1-modificationdate-1729520193171-api-v2.png

Field configuration

By double-clicking a field in the list (on the left) or by selecting the corresponding child element in the element tree, the configuration of the field can be made.

images/download/attachments/189435344/image2020-10-23_17-13-23-version-1-modificationdate-1729505948071-api-v2.png

The Data field corresponds to the data field of the entries from the source. The Label is used in all places where the value of this field is visualized in charts and lists. If the values of the field are numerical, the Precision can be used to define how many digits after the decimal point are to be displayed. The value is rounded up or down accordingly. If the Calculation field option is activated, the values of this field can additionally be converted via a Calculation expression. For example, a Unix timestamp can become a formatted date.

Dashboard configuration (clusters, categories and series)

After the input data and dashboard fields are configured, the data to be generated by the dashboard configuration can be defined.

The configuration of the clusters, categories and series is done by clicking on the settings icon (images/download/attachments/189435344/image2020-10-23_17-27-36-version-1-modificationdate-1729505948067-api-v2.png ) in the dashboard configuration element.

images/download/attachments/189435344/image2020-10-23_17-36-51-version-1-modificationdate-1729505948061-api-v2.png

The dialog that appears configures the meaning of the data fields in relation to the statistical data to be created. The fields from (1) can be moved to the corresponding areas (1-5) with drag and drop.

Explanation of the dialog:
In (1) all fields are listed that are known to the dashboard configuration (the fields from the entries of the data source). The field with the label '*' acts as a placeholder if only one field is present and simply the number of entries is to be evaluated. (2) specifies which information is to be used as values of a graph series. What the measured values are is again defined in the section 'Measured' (3). 'Category attributes' (4) define which field is used to create categories. 'Cluster attributes' (5) specifies which data field data groups (clusters) are to be created (more on this in the subchapter Cluster).

To apply changes or close the dialog, click the Apply (6) button.

Example

images/download/attachments/189435344/image2020-10-23_17-56-8-version-1-modificationdate-1729505948054-api-v2.png

The setting shown above collects the number of user logins per browser. The 'Browser' field forms the categories and on the basis of the 'id' field the measured values are generated via so-called aggregations.

Aggregations

For the collection of measured values, various aggregation functions are available in the 'Measured' area for each field, which are applied over all values of the field within a category (e.g. sum over all values of field X in a category). Aggregation functions can be added images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/add.svg or removed images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/error.svg . Multiple aggregations can also be added. Each aggregation represents an independent series of measured values (e.g. a line in a graph).

Tip: Other fields also form further series according to the same principle. Via drag & drop, the order of the aggregation functions can be changed. The menu button (images/download/attachments/189435344/image2020-10-23_18-3-49-version-1-modificationdate-1729505948051-api-v2.png ) can be used to set additional options per aggregation function. For details see the chapter Serien- und Datenabhängige Einstellungen.

The following aggregations are available:

Aggregation

Explanation

Sum

Calculates the total of all values in the field

Average value

Calculates the average over all the values in the field

Minimum/Maximum

Returns the minimum/maximum of all values of the field

First/Last

Returns the field value of the first/last entry from the source matching the category

Visualization of data in chart components

As soon as the dashboard configuration data provider is updated or the dashboard settings are changed, the dashboard configuration element re-evaluates the statistical data. The progress of this operation is indicated by a progress bar.
Once the data is prepared, the dashboard configuration element triggers the Dashboard query executed (Dashboards) event (keyword: Behaviours). The resulting data provider is thereby passed to the configured behaviour.

In this way, a shared data provider with a unique ID can be set via the Set shared data provider action, which in turn will be used as a data source by any chart component.

Dashboard configuration

Chart (Data service)

images/download/attachments/189435344/image-2024-10-21_16-11-46-version-1-modificationdate-1729519905940-api-v2.png

The prepared data is provided as a shared data provider 'chartData'. The name is arbitrary but must be unique.

images/download/attachments/189435344/image-2024-10-21_16-12-15-version-1-modificationdate-1729519935266-api-v2.png

The data provider 'chartData' filled by the dashboard configuration is now used as the data source for any chart.

Tip: By using a 'shared data provider', several different charts can also visualize the same dashboard source.

Example with the 'Summary chart' chart type:

images/download/attachments/189435344/image2020-10-26_7-47-5-version-1-modificationdate-1729505948026-api-v2.png

Example with the 'Bar chart' type and 'Pie' chart type side by side (both use the same shared data provider 'chartData'):

images/download/attachments/189435344/image2020-10-23_19-21-4-version-1-modificationdate-1729505948032-api-v2.png

Cluster (grouped data)

In addition to the declaration of measured value and category attributes, it is also possible to define attributes according to which the summarized data are additionally divided into individual clusters. Clusters could be for example (related to the above scenario) the listing of user login numbers per month separately for each browser type. The chart components draw a separate chart for each cluster.

►CAUTION◄ Displaying a large number of diagrams can severely affect the performance of the client.

Example: User login numbers per month grouped by browser type

images/download/attachments/189435344/image2020-10-26_8-39-39-version-1-modificationdate-1729505948022-api-v2.png

How many charts are displayed per row can be defined via the Max. columns for cluster charts setting. By activating the 'Chart display' option Show title, the cluster attribute labels above each chart will also be visible.

To configure this example, the field Login time (loginTime) must also be selected in the login history tuple search. After starting the dashboard test mode, which re-runs the search, the new data field 'loginTime' is available in the dashboard configuration element. Since this field will later serve as a category attribute, but contains many different values, only the year and month of the values will be used here for the categorization. This is done via a Calculation expression in the Calculations property section, in which the Calculation field option is activated.

The following calculation expression returns the values as year/month:: $fd({loginTime},yyyy/MM)

In the dashboard settings (images/download/attachments/189435344/image2020-10-23_17-27-36-version-1-modificationdate-1729505948067-api-v2.png ) the attributes can now be configured as follows:

images/download/attachments/189435344/image2020-10-26_9-0-44-version-1-modificationdate-1729505947984-api-v2.png
The data field 'loginTime' was named in the settings of the field 'Login time' (label).

Series and data dependent settings

In the dashboard settings (images/download/attachments/189435344/image2020-10-23_17-27-36-version-1-modificationdate-1729505948067-api-v2.png ) there is the possibility to make additional configurations for the series and their data. To do this, simply click on the menu icon behind a measured value row. A selection menu opens, which offers further setting options for each configured aggregator (e.g. number) (see image).

images/download/attachments/189435344/image2020-10-26_9-21-5-version-1-modificationdate-1729505947980-api-v2.png

In the following sections the different points are introduced.

Label expression (labeling of a series)

Opens a dialog for entering a Berechnungsausdrucks, which determines the label of the resulting series of values (e.g. a graph in a diagram). This label is displayed, for example, in the legend of a graph or when hovering over a series or value with the mouse cursor.

Two fields are available in the calculation expression, which can be accessed with curly brackets:

  • aggregator: The aggregator used (e.g. number). Used as text, simply the translated name of the aggregator is read here.

  • attribute: The configuration of the attribute field. Used as text, the label of the field is simply read here.

The default expression is '{aggregator} [common,$of] {attribute}' where '[common,$of]' reads the language management value '$of' from the 'common' bundle. Using the example of the aggregator 'Count' with the field 'id', the default expression would result in the label: 'Number of id'.

Series color printout (Series color)

Opens a dialog for entering a calculation expression that determines the color of the entire series of values (e.g. a graph in a diagram). The expression must return an RGB color value in (hex) decimal notation, e.g. ff0000, #ff0000, 0xff0000, 16711680 for red or e.g. $getStyleVar(primaryColor) for the primary color from the Styles colors. The color of a series is also displayed in the legend of a diagram.

►NOTE◄ If the color printout returns an empty or invalid value, the series color is obtained from the chart's color palette (Styles).

Example of a series with the color green

images/download/attachments/189435344/image2020-10-26_12-31-28-version-1-modificationdate-1729505947977-api-v2.png
The chart type is a line chart and the calculation expression for 'Number of color expression of the series' was simply specified as '#00ff00' (green).

Color printout of the values (colors of the values)

Opens a dialog for entering a Berechnungsausdrucks that determines the color for each individual value in a series. The expression must return an RGB color value in (hex) decimal notation, e.g. 0000ff, #0000ff, 0x0000ff, 255 for blue or e.g. $getStyleVar(secondaryColor) for the secondary color from the Styles colors.

►NOTE◄ If the color printout returns an empty or invalid value, the color value of the series is used or the default color value (if the series does not define a color).

In the calculation expression several fields are available, which can be accessed with curly brackets:

  • category: The value of the category (in the example above e.g. 'chrome' or 'firefox' as text. The type depends on the category attribute field and can also be the value of a dynamic enumeration, for example)

  • value: The numerical value (The value of the series for the category)

  • default: The default color value from the chart color palette (Styles)

  • index: The category index starting at 0 (0 <= index < number of categories)

These fields allow dynamic coloring depending on the category and value.

Value color examples:

Expression

Effect

Empty

Without a color printout for values, either the series color (if explicitly defined) or the colors from the chart color palette are used.

images/download/attachments/189435344/image2020-10-26_15-34-48-version-1-modificationdate-1729505947951-api-v2.png

$if($cmp({value},<,100,n),#ff0000,#0000ff)

If the value is less than 100, the value is drawn in red, otherwise in blue.

images/download/attachments/189435344/image2020-10-26_15-14-39-version-1-modificationdate-1729505947973-api-v2.png

images/download/attachments/189435344/image2020-10-26_15-15-23-version-1-modificationdate-1729505947970-api-v2.png

images/download/attachments/189435344/image2020-10-26_15-16-26-version-1-modificationdate-1729505947966-api-v2.png
The series color (here orange) remains untouched.


$if($cmp({category},=,ie),#808080,)

If the category is 'ie', the value is drawn in gray, otherwise the color of the series or the default color.

images/download/attachments/189435344/image2020-10-26_15-20-13-version-1-modificationdate-1729505947961-api-v2.png

$if($cmp($calc({index} % 2),=,0),#ff0000,#0000ff)

Values of each category with an even index (index modulo 2 = 0) are drawn red, with an odd index blue.

images/download/attachments/189435344/image2020-10-26_15-21-6-version-1-modificationdate-1729505947959-api-v2.png

images/download/attachments/189435344/image2020-10-26_15-22-30-version-1-modificationdate-1729505947956-api-v2.png


Sort categories

In the 'Dashboard' properties category you can activate the sorting of the categories.

images/download/attachments/189435344/image-2024-10-21_16-13-0-version-1-modificationdate-1729519979602-api-v2.png

In addition, two Calculation expression appear which control the sorting behaviour. By default, the expressions here are set to sort in ascending order according to the average of the category serial values.

The calculation expression Category sort value determines an arbitrary value per category, which can then be used in the Category sort value expression in the value field.

The following fields are available in this expression:

  • seriesValues: The values of all series within the category as a list (array). Tip: This can be passed directly as a parameter of the math functions. e.g. $avg( {a.seriesValues} )

  • category: The value of the category (depending on the type of the dashboard attribute, e.g. string, dynamic enumeration, date, etc.)

  • categoryLabel: The label of the category

The Category sort value expression controls how sorting is done by always comparing two categories (a and b) with each other. The return value of the expression must be a numeric value, which decides whether a is sorted before or after b.

The following applies:
If the Return value < 0, a is sorted behind b, if > 0, a is sorted in front of b. At 0 the positions of a and b are not changed.
The expression is then called for each neighboring pair of categories until no category position has been changed and the categories are therefore completely sorted.

Thus, it is possible to obtain the desired sorting by a simple subtraction of the values of b from the values of a. For other cases you can simply work with the values -1, 0 and 1.

The following fields are available to the calculation expression for a and b respectively:

  • seriesValues: The values of all series within the category as a list (array). Tip: This can be passed directly as a parameter of the Math functions. e.g. $avg( {a.seriesValues} ).

  • value: The value determined by the 'Category sort value expression' or the first series value if the expression was not specified.

  • category: The value of the category (depending on the type of dashboard attribute, e.g. string, dynamic enumeration, date, etc.).

  • categoryLabel: The category label.

Tip: If the order is to be changed from ascending to descending, the calculation result only has to be negated.

Runtime example for the standard expressions given above

images/download/attachments/189435344/image2020-11-11_11-22-48-version-1-modificationdate-1729505947922-api-v2.png

Example with statically sorted categories

'Known' categories can be sorted forward or backward by simply defining a consecutive number as the sort value.

Configuration

Result

Category sort value expression

$trim(
$if($cmp({category},=,safari),5,)
$if($cmp({category},=,firefox),4,)
$if($cmp({category},=,chrome),3,)
$if($cmp({category},=,ie),2,)
$if($cmp({category},=,edge),1,)
)

Category sort expression

$calc( {a.value} - {b.value} )


images/download/attachments/189435344/image2020-11-11_12-40-12-version-1-modificationdate-1729505947896-api-v2.png

Tip: 'Unknown' categories would always be ranked backwards with this approach.