en GPS Tab2 Labels (matrix)

Owned by
Stefanie Schröder (Unlicensed)
Last updated: Dec 20, 2021
7 min read

Title

If the Enable checkbox is activated, the title will be displayed.

Title Text

Enter a Title for the matrix here. Multiline texts will be rendered accordingly, i.e. the line break will be applied. The following HTML tags can be used for formatting: 'b', 'i', 'p', 'span', 'div', 'br', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'ol', 'ul', 'li' and 'blockquote'.

For the following result
ACME Ltd.
P&L by Segment
2021 AC, BU

this input is necessary:

ACME Ltd.
<b>P&L</b> by <i>Segment</i>
2021 AC, BU

Size

Enter the size of the title's font. Select a CSS unit from the list (such as px, em),

Font

Size

Enter the size of the font. Select a CSS unit from the list (such as px, em),

Family

Define the global font. Clear the contents of the text box, and then choose Arial, Tahoma, Verdana, Lucida Console and Calibri from the suggested values. Alternatively, you can enter the name of a font installed on your system, even if no suggestions are displayed. For example, enter Comic Sans MS.

Color

This property defines the font color as HEX, RGB or HSL code. You can open a color picker by clicking on the colored circle and switch the color model by using the small arrows on the right.
Alternatively, you can also use the color picker.

Crop Header Texts

When this option is selected, long character strings are not wrapped but abbreviated with three dots - e.g. electronic prod... 

Value Format

With the Value Format you define the way the values are displayed in the matrix. You can define several formats and assign them to specific columns using filtering.

Multiple Value Format Rules (Assignments) are prioritized in descending order, i.e. definitions that are lower in the list overwrite those above them when there filters overlap. Therefore, the generally valid format of the table should be defined at the top of this list without any further filters. Value Formats defined below, restricted by filters, overwrite the formatting defined above - "From General to Special".

Value Format Assignment

You can access the configuration by clicking on an element in the list. You define another Value Format by clicking on the  symbol.

Value Format Pop-Up

Define the number format using the following options:

  • Filter: By clicking in the empty list or on the  symbol, you can define one or more dimension members for which these format settings should apply. For example, you select a measure column using the dimension "measures" and the actual measure (e.g. "gross") of the column to be formatted.
  • Locale: Defines abbreviations, decimal and thousand separators for the respective language. You can choose between en, de, fr and auto. If auto is selected, the Locale set in the respective host application is used. 
  • Format Type: Defines the type of number output. You can choose between number (decimal number), percent (percentage), ordinal (ordinal number) and Time (time unit).
  • Abbreviations: Defines the type of abbreviations. You can choose between mean (abbreviation most suitable for the mean value), min (abbreviation most suitable for the minimum value), max (abbreviation most suitable for the maximum value), auto (best-suited abbreviation for each respective number individually), trillion (trillion abbreviation), billion (billion abbreviation), million, thousand and none (no abbreviation at all). With this property you can, for example, ensure that numerical values are always displayed in thousands - e.g. 0.1k or 1000k.
  • Negative Sign: Defines how negative numbers are displayed. You can choose between minus, parenthesis, and none (no sign).
  • Prefix: The input value is placed before the number.
  • Suffix: The input value is placed after the number.
  • Thousands Separator: Replaces the thousand separator set by the selected locale.
  • Decimal Separator: Replaces the decimal separator set by the selected locale.
  • Total Digits: Defines how many digits the number may consist of. Total Digits is prioritized over Decimal Digits.
  • Decimal Digits: Defines how many decimal places of the formatted number are displayed.
  • Scaling Factor: The value of each data point is multiplied by the entered number to scale values.
  • Zero Format: When the checkbox is activated, any data value equal to 0 (the number zero) gets replaced by the entered value.
  • Null Format: Any data value that equals NULL (no value) gets replaced by the entered value.
  • Error Format: If a data value is undefined or the result of an arithmetic error such as dividing by 0 (zero), the data value is replaced by the entered value.
  • Rounding Method: Defines the rounding method. You can choose between half up (23.5 → 24, -23.5 → -23), commercial (23.5 → 24, -23.5 → -24) and trim (23.5 → 23, -23.5 → 23).
  • Explicit Positive Sign: Defines whether a positive number should always be preceded by a + (plus sign).
  • Time Units: If Time has been specified for the format type, the time units can be set here. The default setting interprets data values as seconds and displays them as hours and minutes with decimal places in the format h:mm.m 
  • Description: Short name that describes the configuration to be recognizable

Time Units Pop-Up

For the Format Type Time, a system of units can be configured with the help of the Time Units Property, which in the default setting consists of hours and minutes. Each number formatted in this way is then splitted in its values for each unit. The order of the unit list defines their relationship from the largest unit (top) to the smallest unit (bottom). Each unit contains the following options:

  • Modulus: defines the arithmetic relationship between the units. In terms of modular arithmetic, the number reflects how many entities of the next smaller unit fit into an entity of the current unit. If the current unit is the smallest of the unit system, the modulus establishes the reference to the raw value to be formatted. Thus, in the case of a unit system of hours and minutes with raw values that are given in minutes, the hours unit carries the modulus 60 and the minutes unit carries the modulus 1.
  • Prefix: Defines the local prefix with which the value of this unit should begin. It can be used as a separator to values of larger units.
  • Suffix: Defines the local suffix that should follow the value of this unit. For example, it can contain a unit abbreviation or be used as a separator to values of smaller units.
  • Omit If Zero: Sets whether values of this unit should be omitted if they equal 0.
  • Leading Zeros: Sets whether values of this unit should be displayed with one or more leading zeros (depending on the reference to the next larger unit).
  • Description: Sets a description for the unit to make it easier to recognize in the list.

Text Alignment

Specify how text content is aligned in the matrix: left-aligned (left), centered (center) and right-aligned (right).

Scripted Formatting

CFL Rules

Learning from the usage of other table components we decided to offer our customers a possibility to format the graphomate matrix very individually according to their requirements. The Cell Formatting Language (CFL) enables you to define rules which are executed for each cell of the matrix. These rules can be used to manipulate the appearance of cells based on cell properties, data properties or matrix properties. In this way, you can create a heat map, color elements, or apply conditional formatting with a few lines of code.

Cell Formatting Language:

The CFL is a script language for individual formatting of the graphomate matrix based on JavaScript syntax.
It allows to read from and write various properties to the global variable cell via getter and setter. A complete API documentation can be found here.

To simplify the programming of the CFL, we provide a web-based CFL editor from which the defined rules can be easily copied and pasted into the script body. This editor and some code templates can be found here.

For all CSS properties and values that can be set in the CFL, the usual notations apply. 

CFL-Pop-Up

The following properties can be defined:

  • Enable: This Boolean property makes it possible to (de)activate the rule.
  • Name: A name that is used to identify the rule.
  • Script Body: This String property contains the actual script in the CFL (Cell Formatting Language)

You can find the CFL editor here.

CFL Variables

At this point you can define your own variables that you want to use in a CFL rule. In The CFL Rule, the variable is accessed via the .getCflVariable method. The value of the variable must comply with the JSON format (examples: 5 or "center" or [1,2,3] or null or {"foo": "bar"}.

CFL Variables Pop-Up

The following properties can be defined:

  • Identifier: Assign a unique name that can be referenced in a CFL rule.
  • Value: The value of the variable must be according to the JSON format (examples: "car" for a string or 3.14159 for a numerical value).

Custom CSS

Use CSS code directly for the matrix if you cannot address complex selectors in the styling via the CFL.

Custom CSS Pop-Up

The following properties can be defined:

  • Enable: This boolean property allows to (de)activate the CSS snippet.
  • Name: A name which is used to identify the CSS snippet.
  • CSS: Here the CSS is inserted, which can consist of several CSS snippets.

Hierarchy Nodes

Here you control the color and font style of the hierarchy nodes in the table. 

Color

Here you define the font color of the Hierarchy Nodes. The color overwrites the general font Color from the Font group.
Use the Color Picker or enter color values as HEX, RGB, or HSL code. You switch between these color models using the small arrows on the right side of the color picker.

Bold

If you want hierarchy nodes to be displayed in bold, activate this property.

Italic

If hierarchy nodes should be displayed in italics, activate this property.

Row Indentation

Specify the size of the indentation of hierarchy nodes here. The indentation that is ultimately used is a multiple of the indentation set here and depends on the hierarchy level of the respective node. Select a CSS unit from the list (such as px, em).

Column Indentation

Set the size of the indentation of columns here. The final indentation used is a multiple of the indentation set here, and is based on the hierarchy level of the node in question. Select a CSS unit (such as px, em) from the list,

Node Divider Thickness

Set the thickness of the horizontal separator lines below cells whose rows represent hierarchy nodes. All other separators can be set in the tab Axes.

Extra Row Padding

Set here the value of the additional line spacing that will be applied to separate groups of child nodes and their parent nodes from each other. Choose a CSS unit from the list (such as px, em),

Node Divider Color

Here you can set the color of the horizontal separator lines below cells whose rows represent hierarchy nodes. All other separators can be set in the tab Axes.

Following Node Divider

This setting determines whether lines before or after a hierarchy node are interpreted as a separator line of the hierarchy node. All other separators can be set in the tab Axes.

Collapsible

If the hierarchy should be expandable and collapsible, activate the Collapsible property.

Collapsible On Whole Cell

If this property is activated, clicking anywhere into a cell causes the hierarchy node to expand or collapse. Selecting entire rows is not possible this way. If this property is inactive, only a click on the triangle causes the collapse, while a click on the rest of the cell only results in a selection of the row.


Styling

Matrix Background Color

Determine the background color of the matrix using Color Picker or HEX, RGB or HSL code. You can switch this using the small arrows on the right side of the color picker.

Matrix Padding

This property determines the outer padding of the matrix component. Select a CSS unit (such as px, em) from the list.

Footer Text

Enter the Footer text for the matrix in this field. Multiple-line texts are reproduced accordingly, i.e. the line break is adopted.

Size

Enter the footer's font size. Select a CSS unit from the list (such as px, em),