Präsentation - Ergebniskonfiguration

The presentation designer is used for customizing how your results will be displayed.

There are three different objects to distinguish:

• Column group: Is a set of columns which are either fixed or repeated (loop) based on a condition.
• Column: Single column which can be sorted.
• Cell: This is where the actual content is shown.

Configure column group

Either press the plus icon to add a new column group or edit next to the column header.

Here you can choose between two types:

• Fixed: The columns in this group will be shown once.
• Dynamic: All columns in this group wil be repeated N times. N is dynamically based on available results. Mostly you want to pick level 1 which means for every lap all columns in this group will be repeated.

You can also define a header. When using dynamic type, there is also a variable i which indicates the index of the loop and is helpful for displaying the current number of lap.

Configure column

Now you can add or edit a column. Remember this is just the column definition and still not the cell content.

You can set the header of the column and define based on which property the sorting should happen. Please take a look at your calculations and take an identifier from there. You can define the overall alignment of the cell content and move the column right or left.

Configure cell

Now we can define the content of each cell.

You can choose from two commonly used templates: Time and speed display. Both calculate the difference to the fastest lap. First you need to choose the calculation which you want to display, then you can configure the formatting of time and speed. If you want to do some special formatting for displaying multiple values in one column, you can choose the custom type.

Write custom code

You need to write custom code to display your calculations. The easiest way to display a value is to enclose the identifier of your desired calculation in double curly braces. For example:

{{cell.biathlon.lap.duration}}

When the template is executed, this expression is replaced with the actual value in this row. As you can see we used the identifier of our calculation with the "cell." prefix. We will discover later why it is used and how we can use other prefixes to our advantage. You can also use normal HTML code to format your cells. The syntax of this code is further described in detail here: https://handlebarsjs.com/guide/#what-is-handlebars.

Just displaying a single value is not useful. Most of the time we want to compare the value to something else. This is where our prefix comes into play. The the prefix "column" you will get all values for the given identifier. Of course this will be an array so we need to somehow aggregate this array. You can use one of the functions below. Lets make an example:

{{max column.biathlon.lap.speed.avg}}

It will output the maximum average speed.

To make life easier, we have included additional functions:

• eq arg1 arg2: Equal
• ne arg1 arg2: Not equal
• lt arg1 arg2: Less than
• gt arg1 arg2: Greater than
• lte arg1 arg2: Less than or equal
• gte arg1 arg2: Greater than or equal
• and arg1 ... : Logical and
• or arg1 ... : Logical or
• add arg1 arg2: Mathematical +
• sub arg1 arg2: Mathematical -
• mul arg1 arg2: Mathematical *
• div arg1 arg2: Mathematical /
• mod arg1 arg2: Mathematical %
• min arg1 ... : Minimum of all values
• max arg1 ... : Maximum of values
• avg arg1 ... : Average of values
• sum arg1 ... : Sum of values
• range num : Creates and array with 0 - num elements.
• filter arr val opt: Filters an array for a given value. Opt can be used to define property lik prop="test".
• filterMap arr1 arr2 val opt: Same as filter where the condition is applied to arr1 and arr2 will be returned.
• round num places: Round num to places decimals.
• date val fmt : Formats the given date (unix timestamp) based on the given format. The following formaters are available: https://date-fns.org/v3.6.0/docs/format
• perc val1 val2 fmt : Gets the percentage difference between val1 and val2. Default will be the relative change but if you want absolut you can set fmt to "absolute".
• dateDiff val1 val2 fmt : Gets the difference between to date/times with a given format. This avoids issues with calculating the difference and then formating the value.

Cell examples

Convert m/s to km/h and rounds it to one decimal place:

{{round (mul cell.generic.lap.speed.max 3.6) 1}} km/h

Duration difference. It will display the duration and calculate the difference to the fastest duration. It will hide the difference if it is zero.

‍{{#if (gt (sub cell.generic.lap.duration (min column.generic.lap.duration)) 0)}}

   <span style="color:#DB3100;font-size:10px;margin-right:6px;font-weight:bold">+{{dateDiff cell.generic.lap.duration (min column.generic.lap.duration) "s.SS"}}</span>

{{/if}}

{{date cell.generic.lap.duration "s.SS"}}

Same as above but with speed. ‍
{{#if (gt (sub (max column.generic.lap.sec3.speed.max) cell.generic.lap.sec3.speed.max) 0)}}

<span style="color:#DB3100;font-size:10px;margin-right:6px;font-weight:bold">-{{round (sub (max column.generic.lap.sec3.speed.max) cell.generic.lap.sec3.speed.max) 1}}</span>

{{/if}}

{{round (mul cell.generic.lap.sec3.speed.max 3.6) 1}} km/h

‍