📘

Blocks - Graadmeter

Met de Graadmeter-block kunt u numerieke data weergeven in de vorm van een meter. Dit is ideaal om bijvoorbeeld waarden in de huidige staat ten opzichte van een potentie of maximumwaarde te laten zien. Maak verschillende secties aan in uw graadmeter of stel een voor- en/of achtervoegsel in om uw graadmeter helemaal naar wens aan te passen.

Algemeen

1. Geef een titel.
2. Geef een beschrijving.
3. Kies de achtergrondkleur
4. Kies de taal.
5. Kies of er, en hoeveel decimalen getoond moeten worden.

Data

1. Kies de gewenste Dataset uit het Project waar de App in zit.
2. Kies een waarde.
3. Kies de operator:

• Sum: het totale aantal van de attribuutwaarden
• Count: het aantal (verschillende) attribuutwaarden
• Min: de laagste waarde
• Max: de hoogste waarde
• Average: de gemiddelde waarde
• Median: de middelste waarde

Filter

1. Kies eventueel een attribuut om op te filteren.
2. Kies een filter-operator:

• Gelijk aan
• Niet gelijk aan
• Als
• Niet als
• Groter dan
• Groter dan of gelijk aan
• Kleiner dan
• Gelijk aan of kleiner dan
• En - alleen bij YAML
• Of - alleen bij YAML

3. Vul de filterwaarde in.

Boog

Vul de maximale waarde voor de boog in.

Voor elk van de 4 secties:

1. Kies de kleur.
2. Voeg eventueel een achtervoegsel (tooltip) toe.
3. Kies de lengte van de sectie.

Opmaak

1. Kies eventueel een voorvoegsel om een eenheid aan te geven.
2. Kies eventueel een achtervoegsel om een eenheid aan te geven.

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'
gaugeChart:
  liveTable: true | false
  title: string
  description: string
  style:
    backgroundColor: string (hex)
  layout:
    arc:
      cornerRadius: number
      innerRadius: number
      startAngle: number
      endAngle: number
      maxValue: number
      padding: number
      sections:
        - color: string (hex)
          tooltipValue: string
          length: number
    circularGrid: true | false
    icon:
      bottom: number
      height: string
      margin:
        bottom: number
        left: number
        right: number
        top: number
      path: string;
      width: string
    labels: true | false
    margin:
      bottom: number
      left: number
      right: number
      top: number
    needle:
      color: string
    radialGrid: true | false
    value:
      bottom: number
      prefix: string
      suffix: string
  format:
    decimals: number
    locale: string
  data:
    datasetId: string
    operator: sum | count | min | max | avg | median
    value: string
    filter:
      enable: true | false
      operator: '= | != | like | notlike | > | >= | < | =< | and | or'
      attribute: string
      value: string
      filters:
        - operator: '= | != | like | notlike | > | >= | < | =< | and | or'
          attribute: string
          value: string
          filters: # En door
            - operator: '= | != | like | notlike | > | >= | < | =< | and | or'
              attribute: string
              value: string

Voorbeelden

Instellen kleuren

Onderstaand een voorbeeld van een YAML voor een graadmeter, waarmee de verschillende boogdelen ustom ingekleurd kunnen worden. Deze kun je hergebruiken door de dataset-id, attribuut-definities en titels te vervangen.

version: "1.0"
gaugeChart:
  title: "Aantal woonplaatsen in Nederland"
  description: "Aantal woonplaatsen in Nederland"
  style:
    backgroundColor: "rgb(255, 255, 255)"
  layout:
    suffix: "woonplaatsen"
    arc:
      maxValue: 3000
      startAngle: -120
      endAngle: 120
      sections:
        - color: "rgba(240, 240, 240, 1)"
          tooltipValue: "0 - 1800"
          length: 1800
        - color: "#55E12C"
          tooltipValue: "1800 - 2333"
          length: 533
        - color: "#A5CD19"
          tooltipValue: "2333 - 2666"
          length: 333
        - color: "#5A4008"
          tooltipValue: "2666 - 3000"
          length: 334
    radialGrid: true
    circularGrid: true
    labels: false
    needle:
      color: "#000000"
    value:
      bottom: 25
      suffix: "Woonplaatsen"
  data:
    datasetId:
      id: "888d88eb-8888-4a72-b289-b55ec6e0830c"
      name: "woonplaatskaart_2018"
    operator: "count"
    value: "woonplaats"

Meervoudig filter

Voor een voorbeeld van hoe je meervoudige filters in kunt stellen zie deze handleiding.