Value tile :: configuration examples

Warning

This is only available from the old home configuration and code mode. ⚠️ the chartOptions & data are deprecated, make sure to use de datasets/charts configuration.

Data structure

This dataset is used for all the following examples

| country    | nb_films | evo_LY | nb_films_LY | rating_value |
|------------|----------|--------|-------------|--------------|
| France     | 1845     | 0,025  | 1800        | 0,6          |

Ex0: Simple Value

value dynamic simple

value dynamic simple

Single value displayed in the tile. Here, I use my_value as as parameter for value.

Configuration

{
  name: 'Simple Value'
  type: 'value-dynamic'
  value: 'my_value'
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
}

Ex1: Value with Source

value dynamic source

value dynamic source

A source is added at the bottom left of the tile. Note : dynamic objects can be used in the source (such as dates, values etc…). These variable must be defined in the data block.

Configuration

{
  name: 'Value with source'
  type: 'value-dynamic'
  source: "Toucan Toco Movies fake data, 2018"
  value: 'my_value'
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
}

Ex2: Value with Units

value dynamic units

value dynamic units

Units help to better understand the value to display.

Configuration

{
  name: 'Value with units'
  type: 'value-dynamic'
  value: 'my_value'
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
  unit: " Films"
}

Ex3: Value with Precision

value dynamic precision

value dynamic precision

Precision helps to better understand and read the value and the comparison to display.

Configuration

{
  name: 'Value with precision'
  type: 'value-dynamic'
  value: 'my_value'
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
  unit: " Films"
  precision:
    my_value: ",.0f"
}

Ex4: Value with bullet badge and non dynamic comment

value dynamic badge

value dynamic badge

Comments give another information about the main value displayed in the tile. It can be an evolution vs Last Year, vs an average etc… Remember that comparisons empowers your data.

Here, the badge is a bullet and comments will always be the same.

Configuration

{
  name: 'Value with badge and non dynamic comment'
  type: 'value-dynamic'
  value: 'my_value'
  badge: "bullet"
  comment: " +3% vs last year"
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
  unit: " Films"
  precision:
    my_value: ",.0f"
}

Ex5: Value with badge and dynamic comment

value dynamic comparison

value dynamic comparison

The badge is an up/better/equal symbol based on a value defined in the data block. The comparison is dynamic, based on the value of my_comparison.

Configuration

{
  name: 'Value with comparison and comment'
  type: 'value-dynamic'
  value: 'my_value'
  badge: "my_comparison"
  comment: "<%=\' \' + my_comparison + \' vs last year\' %>"
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
    my_comparison:
      query:
        domain: "value_dynamic_data"
      field: "evo_LY"
  unit: " Films"
  precision:
    my_value: ",.0f"
    my_comparison: ".0%"
}

Ex6: Value with sentiment

value dynamic sentiment

value dynamic sentiment

The sentiment option is to used as often as possible. It highlights the main value and helps to deliver powerful messages about performance.

Configuration

{
  name: 'Value with sentiment'
  type: 'value-dynamic'
  value: 'my_value'
  badge: "my_comparison"
  comment: "<%=\' \' + my_comparison + \' vs last year\' %>"
  sentiment:
    my_comparison:
      domain: [0]
      range: ['negative','positive']
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
    my_comparison:
      query:
        domain: "value_dynamic_data"
      field: "evo_LY"
  unit: " Films"
  precision:
    my_value: ",.0f"
    my_comparison: ".0%"
}

Ex6: Value with dynamic computing

value dynamic compute

value dynamic compute

Available variables from the data can be combined in the compute block. In the following example, the my_badge ariable is calculated from my_value and my_comparison. And it is used as the value for the badge and in the comment.

Configuration

{
  name: 'Value with dynamic computing'
  type: 'value-dynamic'
  value: 'my_value'
  badge: "my_badge"
  comment: "<%=\' \' + my_badge + \' films last year\' %>"
  sentiment:
    my_value:
      domain: ["my_comparison"]
      range: ['negative','positive']
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
    my_comparison:
      query:
        domain: "value_dynamic_data"
      field: "nb_films_LY"
  compute:
    my_badge: 'my_value - my_comparison'

  unit: " Films"
  precision:
    my_value: ",.0f"
    my_badge: "+,.0f"
}

Ex7: Value with stars

In this widget you can display 5 stars in the widget title.

value dynamic stars

value dynamic stars

The rating value must be between 0 and 1. The stars will be completed depending on the value :

  • 1 => all five stars will be completed
  • 0 => no star will be colored in the title
  • 0,5 => 3 stars will be colored in the title

Configuration

{
  name: 'Value with stars <%= stars(rating) %>'
  type: 'value-dynamic'
  value: 'my_value'
  badge: "my_comparison"
  comment: "<%=\' \' + my_comparison + \' vs last year\' %>"
  sentiment:
    my_comparison:
      domain: [0]
      range: ['negative','positive']
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
    my_comparison:
      query:
        domain: "value_dynamic_data"
      field: "evo_LY"
    rating:
      query:
        domain: "value_dynamic_data"
      field: "rating_value"
  unit: " Films"
  precision:
    my_value: ",.0f"
    my_comparison: ".0%"
}

Ex7: Value with stars

In this widget you can display 5 stars in the widget title.

value dynamic stars

value dynamic stars

The rating value must be between 0 and 1. The stars will be completed depending on the value :

  • 1 => all five stars will be completed
  • 0 => no star will be colored in the title
  • 0,5 => 3 stars will be colored in the title

Configuration

{
  name: 'Value with stars <%= stars(rating) %>'
  type: 'value-dynamic'
  value: 'my_value'
  badge: "my_comparison"
  comment: "<%=\' \' + my_comparison + \' vs last year\' %>"
  sentiment:
    my_comparison:
      domain: [0]
      range: ['negative','positive']
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
    my_comparison:
      query:
        domain: "value_dynamic_data"
      field: "evo_LY"
    rating:
      query:
        domain: "value_dynamic_data"
      field: "rating_value"
  unit: " Films"
  precision:
    my_value: ",.0f"
    my_comparison: ".0%"
}

Ex8: Value dynamic - Full Options

value dynamic full

value dynamic full

Configuration

{
  name: 'Value Dynamic Full Options <%= stars(rating) %>'
  type: 'value-dynamic'
  value: 'my_value'
  badge: "my_comparison"
  source: "Toucan Toco Movies fake data, 2018"
  comment: "<%=\' \' + my_comparison + \' vs last year\' %>"
  sentiment:
    my_comparison:
      domain: [0]
      range: ['negative','positive']
  data:
    my_value:
      query:
        domain: "value_dynamic_data"
      field: "nb_films"
    my_comparison:
      query:
        domain: "value_dynamic_data"
      field: "evo_LY"
    rating:
      query:
        domain: "value_dynamic_data"
      field: "rating_value"
  compute:
    my_badge: 'my_value - my_comparison'
  unit: " Films"
  precision:
    my_value: ",.0f"
    my_comparison: ".0%"
}