Repeat
{"each": data, "do": node} stands for one node per item, in place, wherever a child can go.
{
"name": "Week",
"gap": 12,
"padding": 20,
"fill": "#FFFFFF",
"cornerRadius": 16,
"column": [
{
"text": "Minutes practised",
"font": "Inter 13/18 600",
"color": "#6F6879"
},
{
"row": [
{
"each": [
{"d": "M", "m": 40},
{"d": "T", "m": 25},
{"d": "W", "m": 55},
{"d": "T", "m": 30},
{"d": "F", "m": 60},
{"d": "S", "m": 15},
{"d": "S", "m": 45}
],
"do": {
"column": [
{
"type": "rectangle",
"width": 24,
"height": "{m}",
"cornerRadius": 6,
"fill": "#F29F05"
},
{"text": "{d}", "font": "Inter 12/16 600", "color": "#6F6879"}
],
"gap": 6,
"align": "center"
}
}
],
"gap": 10,
"align": "end"
}
]
}
Seven bars from seven objects. "height": "{m}" takes the number itself, so the bar heights are the data.
What can be substituted
| Write | Becomes |
|---|---|
{.} | the item itself |
{field} | a field of an object item |
{i} | the index from 0 |
{#} | the number from 1 |
{n} | how many items there are |
data may be a list or a count: {"each": 12, "do": {"text": "{#}"}} makes 1 to 12. A string that is only {name} keeps the value's type (a number stays a number, a list is spread into the list around it); inside longer text the value is written as text.
With parts
each and parts combine: {"each": ["Sa", "Re", "Ga"], "do": {"chip": "{.}"}}.