Blocks - Nummer
Blocks - Nummer
Met het Nummer-block kunt u uw data visualiseren in de vorm van een enkel nummer. Dit is ideaal om een belangrijke waarde te tonen. Ook kunt u iconen en een voor- of achtervoegsel toevoegen aan het block om de eenheid aan te geven.
Algemeen
- Geef een Titel.
- Geef eventueel een beschrijving.
- Kies eventueel een (andere) achtergrondkleur.
- Kies de taal.
- Kies het aantal decimalen dat weergegeven moet worden.
Data
- Kies de gewenste Dataset uit het Project waar de App in zit.
- Kies een attribuut. Let op: bij een string-attribuut kunnen de sum en average niet worden gebruikt. Gebruik bij voorkeur een nummer-attribuut (bv. float of integer).
- Kies de operator:
- Sum: het totaal aantal van de waarden.
- Count: het aantal (verschillende) waarden.
- Min: de laagste waarde
- Max: de hoogste waarde
- Average: de gemiddelde waarde
- Median: de middelste waarde
- Vink aan of de waarde als percentage weergegeven moet worden.
Filter
Eventueel kan er een filter worden gezet op de waarden die meegenomen worden.
- Kies het attribuut waarop het filter gezet dient te worden.
- Kies de operator.
- Kies de filterwaarde.
Icon
- Vul een URL naar het icoon in. Gebruik hiervoor bijvoorbeeld deze website: https://www.flaticon.com/
- Kies de breedte in pixels.
- Kies de hoogte in pixels.
Opmaak
- Voeg eventueel een voorvoegsel toe.
- Voeg eventueel een achtervoegsel toe.
- Kies eventueel een sub-titel.
- Selecteer de positie.
YAML
Aanvullende opties met YAML-formulier
Bepaalde variabelen zijn niet instelbaar vanuit het reguliere formulier. Onderstaand is daarom het volledige YAML-formulier te vinden om ook deze instellingen te kunnen gebruiken.
Let op! Deze is bruikbaar voor de nieuwste versies van Apps en Blocks, beschikbaar vanaf Release 30.
- Start door het betreffende Block in de Editor te bewerken.
- Wissel onderaan naar het YAML-formulier.
- Kopieer onderstaande code en plak deze in de Editor.
- Vul de variabelen in door overal number en string met de gewenste waarde te vervangen en bij de meerkeuzevariabelen alleen de gewenste optie te laten staan. Onder het onderstaande YAML-formulier is ter referentie een tabel te vinden met de veldtypen en standaardwaarden, welke gebruikt worden als een variabele volledig weggelaten wordt. Beschrijvingen zullen nader worden toegevoegd.
- Boolean: kies true om weer te geven of te gebruiken, kies false om dit niet te doen.
- String: geef een waarde op, dit kan o.a. een optie zoals in onderstaand YAML-formulier zijn, maar ook een stuk tekst of hex-waarde. Let op! Waarden van dit type moeten tussen aanhalingstekens worden gezet (bv. "#ffffff").
- Number: geef een getal als waarde op (vaak in pixels).
version: "1.0"
number:
liveTable: true | false
title: string
description: string
style:
backgroundColor: string (hex)
layout:
enableMarker: true | false
position: top-left | top | top-right | left | center | right | bottom-left | bottom | bottom-right
icon:
size: number
margin:
bottom: number
left: number
right: number
top: number
path: string
prefix: string
subtitle: string
suffix: string
format:
decimals: number
locale: string
data:
datasetId: string
operator: sum | count | min | max | avg | median
value: string
percentage: boolean
filter: # Where filter
enable: true | false
operator: "= | != | like | notlike | > | >= | < | =< | and | or"
attribute: string
value: string
filters:
- operator: "= | != | like | notlike | > | >= | < | =< | and | or"
attribute: string
value: string
filters:
- operator: "= | != | like | notlike | > | >= | < | =< | and | or"
attribute: string
value: string
Veld | Type | Beschrijving | Default-waarde indien van toepassing | Eenheid indien van toepassing |
---|---|---|---|---|
liveTable | boolean | Geeft de mogelijkheid om het nummer aan te passen op interactieve filters van grafieken | true | |
title | string | Titel boven diagram | [operator] op [values] van [dataset] | |
description | string | Beschrijving | ||
backgroundColor | string (hex) | Achtergrondkleur | # ffffff | |
position | string | Positie in het block | ||
icon.size | number | Grootte van het icoon | 80 | px |
icon.margin.bottom | number | Marge van het icoon tot aan de onderkant van het block | 10 | px |
icon.margin.left | number | Marge van het icoon tot aan de linkerkant van het block | 10 | px |
icon.margin.right | number | Marge van het icoon tot aan de rechterkant van het block | 10 | px |
icon.margin.top | number | Marge van het icoon tot aan de bovenkant van het block | 10 | px |
icon.path | string | URL naar het icoon | ||
prefix | string | Eenheid als voorvoegsel | ||
subtitle | string | Ondertitel | ||
suffix | string | Eenheid als achtervoegsel | ||
decimals | number | Aantal decimalen | 0 | |
locale | string | Taal | en | |
datasetId | string | ID van de dataset | ||
operator | string | Operator | ||
value | string | Datasetattribuut | ||
filter.enable | boolean | Of er een filter ingeschakeld moet worden | false | |
filter.attribute | string | Attribuut waarop gefilterd dient te worden | ||
filter.operator | string | Operator waarmee gefilterd dient te worden | ||
filter.value | string | Filterwaarde | ||
filters[0].operator | string | Operator wanneer er meervoudige filters worden toegepast | ||
filters[0].attribute | string | Attribuut wanneer er meervoudige filters worden toegepast | ||
filters[0].value | string | Attribuutwaarde wanneer er meervoudige filters worden toegepast |
Voorbeelden
Onderstaand een voorbeeld van een YAML voor een nummer-block. Deze kun je hergebruiken door de dataset-id, url, attribuut-definities en titels te vervangen.
version: "1.0"
number:
liveTable: true
style:
backgroundColor: "rgb(255, 255, 255)"
layout:
icon:
size: 180
path: "https://png.url.com/png/2222222-222.png"
position: "center"
format:
locale: "nl"
decimals: 0
data:
filter:
enable: false
datasetId:
id: "555555ff-b44b-444f-888f-ff88d8888f8f"
name: "Provinciekaart"
operator: "sum"
value: "totale_bevolking"
title: "Totaal aantal inwoners"
Meervoudig filter
Voor een voorbeeld van hoe je meervoudige filters op de data in kunt stellen zie deze handleiding.
Updated about 1 year ago