Filter (userfilter)

Styring af hvilke objekter, der vises i kortet.

Herunder er et eksempel på inholdet af userfilter. Man angiver navnet på kolonnen samt hvilke egenskaber, der skal knyttes til dette filter. Der findes følgende typer: range, daterange, boolean, text, selectlist og multiselect. I eksemplet er der angivet to kolonner; "antal" og "belægning".

For kolonnen "antal" vises kun objekter, der har værdier mellem 0 og 50 (begge inklusive). For kolonnen "belægning" vises kun de objekter, der har værdier under 100. Begge ranges skal opfyldes for at objektet vises.

json

{
    "antal": {
        "type": "range",
        "min": 0,
        "max": 50,
        "limit": [0,110],
        "template": "Antal børn: <%= min %>-<%= max %> børn"
        "label": "Antal børn:",
        "unit": " børn"
    },
    "belægning": {
        "max": 100,
    }
}

Indholdet af userfilter kan også være en URL til en fil, der indeholder userfilter. Det gøres simpelt ved at angive "userfilter": "https://septima.dk/widget/data/userfilter.json". Herved kan et userfilter benyttes på tværs af lag og konfigurationer.

Herunder findes en beskrivelse af de enkelte egenskaber, et enkelt userfilter kan have.

type

Type: string
Default: range

Hvilken type filter er det. Angiv "range", "boolean", "selectlist", "text", "daterange" eller "multiselect".

label

Type: string

Benyttes blandt andet af filter funktionen til at vise en overskrift eller teksten på en boolean knap.

className

Type: string

Tilføjer en ekstra CSS-klasse på filter-containerelementet.

template

Type: string | object

Ved type:"range": Benyttes af filter funktionen til at vise det valgte interval. Herved er det muligt at lave et beregnet felt afhændigt af det valgte. Det kunne være at man gerne vil vise navnet på måneden i stedet for tallet. Læs mere om templates generelt her.

Bemærk at hvis template angives, benyttes label og unit ikke.

min

Type: number | string

Ved type:"range" og type:"daterange": Den værdi som kolonnen mindst skal have. Ved type:"daterange" er det en dato i samme format som angivet i "format". Alternativt kan syntaksen "today", der så er dags dato. Det er muligt at angive "today-3d" for at vælge tre dage før i dag. Eller "today+1M" for en måned fra i dag eller "today+2y" for om to år.

max

Type: number | string

Ved type:"range" og type:"daterange": Den værdi som kolonnen højst skal have. Ved type:"daterange" er det en dato i samme format som angivet i "format". Alternativt kan syntaksen "today", der så er dags dato. Det er muligt at angive "today-3d" for at vælge tre dage før i dag. Eller "today+1M" for en måned fra i dag eller "today+2y" for om to år.

fixedMin

Type: boolean
Default: false

Ved type:"range": Benyttes i forbindelse med filter funktionen til at fryse sliderens startpunkt.

fixedMax

Type: boolean
Default: false

Ved type:"range": Benyttes i forbindelse med filter funktionen til at fryse sliderens slutpunkt.

skin

Type: string
Default: round

Ved type:"range": Ion range slider skin.

event

Type: string
Default: onChange

Ved type:"range": Hvilket slider-event der udløser filtrering. Gyldige værdier: "onChange" (filtrerer mens slideren trækkes) eller "onFinish" (filtrerer først når slideren slippes).

startDate

Type: string

Ved type:"daterange": Den dato, der tidligst kan vælges. En dato i samme format som angivet i "format". Alternativt kan syntaksen "today", der så er dags dato. Det er muligt at angive "today-3d" for at vælge tre dage før i dag. Eller "today+1M" for en måned fra i dag eller "today+2y" for om to år.

endDate

Type: string

Ved og type:"daterange": Den dato, der senest kan vælges. En dato i samme format som angivet i "format". Alternativt kan syntaksen "today", der så er dags dato. Det er muligt at angive "today-3d" for at vælge tre dage før i dag. Eller "today+1M" for en måned fra i dag eller "today+2y" for om to år.

limit

Type: number[]

Ved type:"range": Benyttes blandt andet af filter funktionen til at angive, hvad udfaldsrummet maksimalt kan have

unit

Type: string

Ved type:"range": Benyttes blandt andet af filter funktionen til at vise det aktuelle valg med en enhed

sliderType

Type: string
Default: double

Ved type:"range": Brug single hvis man ønsker at have en slider med kun én værdi. Bemærk at min og max skal sættes til samme værdi for at få kortet til at vise det, der er valgt i slideren.

values

Type: string[] | object[]

Ved type:"multiselect", type:"selectlist" og type:"multiselectraw": Definerer de mulige filterværdier. Kan angives som en liste af strenge eller en liste af objekter.

Ved type:"text": En liste af tekstværdier, der er forudvalgt fra starten.

Simpel liste af strenge — bruger data-værdierne direkte som label og filterværdi:

json

"status": {
  "type": "selectlist",
  "label": "Status",
  "values": ["Aktiv", "Inaktiv", "Afventer"]
}

Liste af objekter — giver fuld kontrol over label, standardvalg, CSS-klasse m.m.:

json

"status": {
  "type": "selectlist",
  "label": "Status",
  "values": [
    { "value": "1", "label": "Aktiv",    "selected": true },
    { "value": "2", "label": "Inaktiv",  "selected": false },
    { "value": "3", "label": "Afventer", "selected": true, "className": "highlight" }
  ]
}

Hvert objekt kan indeholde følgende felter:

Felt	Type	Beskrivelse
`value`	`string \| number`	Den faktiske filterværdi, der sammenlignes med data
`label` eller `name`	`string`	Visningstekst for denne mulighed
`selected`	`boolean`	Om muligheden er valgt fra start (default: `true`)
`className`	`string`	Ekstra CSS-klasse på knappen/listeelementet
`disabled`	`boolean`	Deaktiverer muligheden i listen (kun `type:"multiselect"`)
`alias`	`string \| string[]`	Alternativt navn brugt i URL-parametre (se `urlParamNames`)
`template`	`string`	HTML-skabelon for visning af knappen (kun `type:"multiselectraw"`)
`id`	`string`	Brugerdefineret ID på elementet (kun `type:"multiselectraw"`)

Eksempel med type:"multiselectraw" og template — giver mulighed for at vise antal ved siden af teksten:

json

"kategori": {
  "type": "multiselectraw",
  "values": [
    {
      "value": "bolig",
      "template": "<%= value %> (<%= count %>)",
      "selected": true
    },
    {
      "value": "erhverv",
      "template": "<%= value %> (<%= count %>)",
      "selected": false
    }
  ]
}

Templaten har adgang til value, count (antal matchende features), active (om valgt) og id.

Eksempel med alias og urlParamNames — når URL-parameternavnet adskiller sig fra filterværdien:

json

"kommunekode": {
  "type": "selectlist",
  "urlParamNames": { "values": "kommune" },
  "values": [
    { "value": "101", "label": "København",  "alias": "kbh" },
    { "value": "751", "label": "Aarhus",     "alias": "aarhus" }
  ]
}

Med ovenstående kan siden kaldes med ?kommune=kbh for at forudvælge København.

allDefaultSelected

Type: boolean
Default: false

Ved type:"multiselect" og type:"selectlist": Alle værdier valgt fra starten. Et alternativ til at angive alle eksplicit

sort

Type: boolean

Ved type:"multiselect" og type:"selectlist": Skal filteret sorteres efter værdien

selectAll

Type: boolean | string

Ved type:"multiselectraw", type:"selectlist" og type:"multiselect": Tilføjer en "Vælg / fravælg alle" knap. Angiv true for default tekst eller en streng for brugerdefineret label.

selectAllText

Type: string

Ved type:"multiselectraw" og type:"selectlist": Brugerdefineret label på "Vælg alle" knappen. Alternativ til at angive teksten direkte i selectAll.

showZeroCount

Type: boolean
Default: false

Ved type:"multiselectraw": Vis muligheder med nul features. Hvis false skjules muligheder, der ikke matcher nogen features i det aktuelle datasæt.

clearOnAllSelected

Type: boolean
Default: false

Ved type:"multiselectraw": Når alle muligheder er valgt og der klikkes på én, fravælges alle andre i stedet for blot at fravælge den ene.

Type: boolean | string

Ved type:"multiselectraw": Pakker mulighederne ind i et klikbart dropdown. Angiv true for default label ("Vælg") eller en streng for brugerdefineret label.

ignoreData

Type: boolean
Default: false

Ved type:"multiselect": Undlad at auto-populere listen fra feature-data. Kun de værdier der er angivet i values vises.

datatype

Type: string
Default: String

Ved type:"multiselect": Datatype for de valgte værdier. Gyldige værdier: "String" eller "Number".

splitString

Type: string

Ved type:"range", type:"multiselect" og type:"selectlist": Hvis data indeholder flere værdier i samme tekstfelt, vil det være muligt at splitte teksten. Det betyder at hvis en kolonne i data f.eks. indholder værdien Have,Hus for én feature mens en anden indeholder Hus, så kan du lave et filter, der indeholder Have og Hus som hvert sit valg. Når brugeren vælger Hus, så vises begge features selvom den ene indeholdt teksten Have,Hus

buttontype

Type: check

Ved type:"selectlist": Skal listen fungere som checkbuttons eller radiobuttons. Ved "buttontype":"check" kan flere værdier fra listen være valgt på én gang. Ved "buttontype":"radio" kan kun én af værdierne i listen være valgt.

placeholder

Type: string

Ved type:"daterange" og type:"text": Placeholder-tekst vist i inputfeltet.

width

Type: string

Ved type:"daterange" og type:"text": CSS-bredde på filter-containeren, f.eks. "300px".

buttontext

Type: string

Ved type:"text": Brugerdefineret label på tilføj-knappen (default: "Tilføj").

customShortcuts

Type: object[]

Ved type:"daterange": Brugerdefinerede genveje i datovælgeren. Hvert element har name (label) og dates (array med to datostrengen).

value

Type: boolean

Ved type:"boolean": Skal de features, der overholder de booleske udtryk, vises.

eq

Type: boolean | number | string

Ved type:"boolean": Værdien som en feature skal have for, at den er true.

regexp

Type: string

Ved type:"boolean": Et regulært udtryk som en feature skal matche for, at den er true.

regexpTrue

Type: string
Default: .*

Ved type:"boolean": Et regulært udtryk som en feature skal matche for, at den er true. Herved er det muligt, at "true" og "false" ikke er komplementære. Benyttes sammen med "regexpFalse".

regexpFalse

Type: string
Default: .*

Ved type:"boolean": Et regulært udtryk som en feature skal matche for, at den er false. Herved er det muligt, at "true" og "false" ikke er komplementære. Benyttes sammen med "regexpTrue".

format

Type: string
Default: "DD.MM.YYYY"

Ved type:"daterange": Den måde hvorpå datoen vises, når den er valgt.

maxDateColumn

Type: string

Ved type:"daterange": Hvis data er et range, der er defineret af to datoer i hver sin kolonne, angives her den kolonne, der definere slutdatoen.

shortcuts

Type: object

Ved type:"daterange": Vis genveje til f.eks. "næste uge", "næste måned" og "næste år".

json

"shortcuts": {
  "prev": ["week", "month", "year"],
  "next": ["week", "month", "year"]
}

expand

Type: string
Default: up

Ved type:"daterange": Skal datovælgeren folde ud over (up) eller under (down) knappen.

overlapMethod

Type: string
Default: some

Ved type:"daterange": Kan have værdierne some, all og allSelected.

Ved some skal der blot være et overlap mellem det valgte interval og intervallet i data.
Ved all skal det valgte intervalg ligge fuldstændigt inden for intervallet i data.
Ved allSelected skal hele intervallet i data ligge inden for det valgte interval.

urlParamNames

Type: object

URL-parametre der indeholder startværdier for filteret.

Ved type:"daterange": Angiv eksempelvis {"min": "startdato","max": "slutdato"}. Herved er det muligt at kalde siden med &startdato=16.12.2015&slutdato=18.12.2015 hvor de to værdier bliver indsat som min og max. Bemærk, at formatet på datoen er det format, der er angivet under format.

Ved type:"multiselect", type:"selectlist", type:"multiselectraw" og type:"boolean": Angiv eksempelvis {"values": "filter"}. Herved er det muligt at kalde siden med &filter=value1,value2.

Layer

Filter (userfilter) ​

type ​

label ​

className ​

template ​

min ​

max ​

fixedMin ​

fixedMax ​

skin ​

event ​

startDate ​

endDate ​

limit ​

unit ​

sliderType ​

values ​

allDefaultSelected ​

sort ​

selectAll ​

selectAllText ​

showZeroCount ​

clearOnAllSelected ​

dropdown ​

ignoreData ​

datatype ​

splitString ​

buttontype ​

placeholder ​

width ​

buttontext ​

customShortcuts ​

value ​

eq ​

regexp ​

regexpTrue ​

regexpFalse ​

format ​

maxDateColumn ​

shortcuts ​

expand ​

overlapMethod ​

urlParamNames ​

Filter (userfilter)

type

label

className

template

min

max

fixedMin

fixedMax

skin

event

startDate

endDate

limit

unit

sliderType

values

allDefaultSelected

sort

selectAll

selectAllText

showZeroCount

clearOnAllSelected

dropdown

ignoreData

datatype

splitString

buttontype

placeholder

width

buttontext

customShortcuts

value

eq

regexp

regexpTrue

regexpFalse

format

maxDateColumn

shortcuts

expand

overlapMethod

urlParamNames