¶ Decorators in visualizations
Decorators provide an extra label under or above avatars.
The value and background color can be:
- set manually,
- taken from an avatar's property
- computed from an avatar's property
Decorators can only be used in Graph2D, Plan2D and Map2D Openstreetmap.
example:
{
"type": "percentage",
"value": "85",
"unit": "%"
}
¶ parameters
position:
Position of the decorator: above the icon (top) or below the icon (bottom). Default is bottom.
width:
Width of the decorator in pixels. With the special value _auto_, the decorator will adapt its width to the text width. Default is twice the 'marble radius'.
type (for further use):
Type of the decorator that will set its default behavior
value:
The literal value to show in the decorator. Default is no value.
valueField:
This is the iri of a dataProperty or label in which the value of the decorator is taken. If the dataProperty is missing, the value parameter will be used. By exemple, you can set the value parameter to a default value. Default is none
valueFieldForBackground:
This is the iri of a dataProperty or label in which the value of the background color of the decorator is taken. If the dataProperty is missing, the valueField parameter will be used. By exemple, you can set the value parameter to a default value. Default is none
valueTransform:
Single or array of transformation functions of the value before display. Default is identity.
Any fail of transformation will stop the transformation chain.
Few exemples:
- for numeric values:
["/100","toFixed(1)"]Value will be divided by 100 and the displayed with only one digit after decimal.
- for string values:
["lowerCase","first(5)"]. The string value will be lowercased and then only the first 5 characters will be displayed.["cut(8)","first(5)", "capitalize"]. This will ignore the first 8 characters, keep the next 5 characters and then capitalize before display.["capitalize","ellipsis(3)"]. The string value will be capitalized and then ... will added after the first 3 characters.
The available operations are +, -, /, *.
The available functions are lowerCase, upperCase, capitalize, toFixed(n), first(n), cut(n), ellipsis(n)
Useless spaces are trimed.
unit:
The unit parameter will be displayed after the decorator's value. No space will be added. If you need a space between value and unit, add it in the unit parameter. Default is no unit.
color:
Color of the decorator's text. Default is _auto_. With the specific value _auto_, the system will determine the best color for writing on the background color.
backgroundColor:
Background color of the decorator. Default is beige.
backgroundColorField:
This is the iri of a dataProperty in which the value of the decorator is taken. If the dataProperty is missing, the backgroundColor parameter will be used. By exemple, you can set the backgroundColor parameter to a default value. Default is none.
computedBackgroundColor:
Allows to vary the background color accordingly to the value for background (see valueFieldForBackground).
- discrete values:
{'on':'green', 'off':'red'} - range values :
{'[0,70]':'green', '[70,85]':'darkorange', '[85,100]':'red'}
¶ Examples
¶ Decorator's background depending on a value
"https://w3id.org/saref#TemperatureSensor": {
"type": "temperature",
"valueField": "http://www.disit.org/km4city/schema#temperature",
"valueTransform": ["toFixed(1)"],
"unit": "°C",
"computedBackgroundColor": {
"[-100,0]":"blue",
"[0,4]":"turquoise",
"[4,15]":"green",
"[15,24]":"darkorange",
"[24,100]":"red"
},
"color": "_auto_"
}
The value is taken from "http://www.disit.org/km4city/schema#temperature" dataProperty.
THe background color depends from the value, accordingly to the ranges in computedBackgroundColor.
The text color is computed from the background color.
¶ Value conversion
"https://w3id.org/saref#TemperatureSensor": {
"type": "temperature",
"valueField": "http://www.disit.org/km4city/schema#temperature",
"valueTransform": ["-32", "/1.8", "toFixed(1)"],
"unit": "°C",
}
Value of "http://www.disit.org/km4city/schema#temperature" in farenheight is converted to celcius for display. Formule is °C = (°F - 32) / 1.8