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.

620

Voorbeeld - Nummer-block

Algemeen

  1. Geef een Titel.
  2. Geef eventueel een beschrijving.
  3. Kies eventueel een (andere) achtergrondkleur.
  4. Kies de taal.
  5. Kies het aantal decimalen dat weergegeven moet worden.

Data

  1. Kies de gewenste Dataset uit het Project waar de App in zit.
  2. 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).
  3. 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
  1. Vink aan of de waarde als percentage weergegeven moet worden.

Filter

Eventueel kan er een filter worden gezet op de waarden die meegenomen worden.

  1. Kies het attribuut waarop het filter gezet dient te worden.
  2. Kies de operator.
  3. Kies de filterwaarde.

Icon

  1. Vul een URL naar het icoon in. Gebruik hiervoor bijvoorbeeld deze website: https://www.flaticon.com/
  2. Kies de breedte in pixels.
  3. Kies de hoogte in pixels.

Opmaak

  1. Voeg eventueel een voorvoegsel toe.
  2. Voeg eventueel een achtervoegsel toe.
  3. Kies eventueel een sub-titel.
  4. 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.

  1. Start door het betreffende Block in de Editor te bewerken.
  2. Wissel onderaan naar het YAML-formulier.
  3. Kopieer onderstaande code en plak deze in de Editor.
  4. 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
VeldTypeBeschrijvingDefault-waarde indien van toepassingEenheid indien van toepassing
liveTablebooleanGeeft de mogelijkheid om het nummer aan te passen op interactieve filters van grafiekentrue
titlestringTitel boven diagram[operator] op [values] van [dataset]
descriptionstringBeschrijving
backgroundColorstring (hex)Achtergrondkleur# ffffff
positionstringPositie in het block
icon.sizenumberGrootte van het icoon80px
icon.margin.bottomnumberMarge van het icoon tot aan de onderkant van het block10px
icon.margin.leftnumberMarge van het icoon tot aan de linkerkant van het block10px
icon.margin.rightnumberMarge van het icoon tot aan de rechterkant van het block10px
icon.margin.topnumberMarge van het icoon tot aan de bovenkant van het block10px
icon.pathstringURL naar het icoon
prefixstringEenheid als voorvoegsel
subtitlestringOndertitel
suffixstringEenheid als achtervoegsel
decimalsnumberAantal decimalen0
localestringTaalen
datasetIdstringID van de dataset
operatorstringOperator
valuestringDatasetattribuut
filter.enablebooleanOf er een filter ingeschakeld moet wordenfalse
filter.attributestringAttribuut waarop gefilterd dient te worden
filter.operatorstringOperator waarmee gefilterd dient te worden
filter.valuestringFilterwaarde
filters[0].operatorstringOperator wanneer er meervoudige filters worden toegepast
filters[0].attributestringAttribuut wanneer er meervoudige filters worden toegepast
filters[0].valuestringAttribuutwaarde 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.