Dashboard Since 0.1.0

Panels with big numbers.

Usage

To use this component in a Nunjucks template you would add the following (assumes you've loaded OI Lume Viz into componentNamespace: 'oi'):

{% comp 'oi.dashboard', { "config": config } %}{% endcomp %}

where config is replaced by an object that contains some or all of these variables:

data - Either a reference to a CSV file in the Lume site or an array of rows with named attributes.
columns - As with many of the visualisation types you can optionally add virtual columns.
colours - Define some visualisation-specific named colours.
width - An optional minimum width (e.g. 400px) for each panel. Panels may then be arranged by however many columns will fit in the page width.
title - The title of the column that will be used to get a title of the panel.
value - The title of the column that will be used to get the value of the panel.
note - The title of the column that will be used to get a footnote for the panel.
units - A structure to define prefix and prefix columns.
- prefix - The column to use for any text that would go _before_ the value e.g. to add a currency sign before the value.
- postfix - The column to use for any text that would go _after_ the value e.g. to add, say, "kWh" to a value.
panels - An array of which panels will be displayed. They are in order and each is of the form:
- name - (required) References a specific title value.
- precision - The level of precision to use for the number e.g. 0.1 would round the value to the nearest 0.1.
- colour - The hex colour to use for the panel.
- class - A CSS class to add to the panel (may be useful for consistent styling).
- scale - A colour scale to use to set the panel's background colour based on the value.
- min - Used with scale and max to define the colour scale.
- max - Used with scale and min to define the colour scale.
- compact-format0.16.3 - By default this will be set to true. It will show numbers to the nearest thousand, million, billion etc. So 1,500 will become 1.5k.
attribution - Add a line of attribution text under the visualisation.

Examples

Simple panels
Add units and notes
Set the colours of panels
Set the colours of panels using a colour scale
Setting the width of panels
Vertically aligning elements of a dashboard panel

1. Simple panels§

Embeddable version

This basic example shows four panels. Each has a title (set to the Title column), a value (set to the Value column), and is given the default background colour. We only show panels for specified items in the data, not every row. The order of panels is the order they will appear on the page and doesn't have to match the order in the data.

Thing 1

Thing 3

Thing 2

132

Thing 4

This example was made with config:

YAML

title: Title
value: Value
data:
  - Title: Thing 1
    Value: 15
  - Title: Thing 2
    Value: 132
  - Title: Thing 3
    Value: 19
  - Title: Thing 4
    Value: 90
  - Title: Thing 5
    Value: 56.4
panels:
  - name: Thing 1
  - name: Thing 3
  - name: Thing 2
  - name: Thing 4

JSON

{
	"title": "Title",
	"value": "Value",
	"data": [{
			"Title": "Thing 1",
			"Value": 15
		},{
			"Title": "Thing 2",
			"Value": 132
		},{
			"Title": "Thing 3",
			"Value": 19
		},{
			"Title": "Thing 4",
			"Value": 90
		},{
			"Title": "Thing 5",
			"Value": 56.4
		}],
	"panels": [{
			"name": "Thing 1"
		},{
			"name": "Thing 3"
		},{
			"name": "Thing 2"
		},{
			"name": "Thing 4"
		}]
}

2. Add units and notes§

Embeddable version

In this example we will add a note (set to the column Footnote) below the value in panels. We can also augment the displayed values with units by adding prefix or postfix. For the "Thing 3" panel we set the precision to "0.1" to force the number to be displayed with one decimal place.

Thing 1

15%A note

Thing 3

19.2342019

Thing 2

132

Thing 4

£90kJan 2021

This example was made with config:

YAML

title: Title
value: Value
note: Footnote
data:
  - Title: Thing 1
    Value: 15
    Footnote: A note
    Post: '%'
  - Title: Thing 2
    Value: 132
  - Title: Thing 3
    Value: 19.234
    Footnote: '2019'
  - Title: Thing 4
    Value: 90
    Footnote: Jan 2021
    Pre: £
    Post: k
  - Title: Thing 5
    Value: 56.4
    Footnote: Test
    Post: '%'
units:
  prefix: Pre
  postfix: Post
panels:
  - name: Thing 1
  - name: Thing 3
    precision: 0.1
  - name: Thing 2
  - name: Thing 4

JSON

{
	"title": "Title",
	"value": "Value",
	"note": "Footnote",
	"data": [{
			"Title": "Thing 1",
			"Value": 15,
			"Footnote": "A note",
			"Post": "%"
		},{
			"Title": "Thing 2",
			"Value": 132
		},{
			"Title": "Thing 3",
			"Value": 19.234,
			"Footnote": "2019"
		},{
			"Title": "Thing 4",
			"Value": 90,
			"Footnote": "Jan 2021",
			"Pre": "£",
			"Post": "k"
		},{
			"Title": "Thing 5",
			"Value": 56.4,
			"Footnote": "Test",
			"Post": "%"
		}],
	"units": {
		"prefix": "Pre",
		"postfix": "Post"
	},
	"panels": [{
			"name": "Thing 1"
		},{
			"name": "Thing 3",
			"precision": 0.1
		},{
			"name": "Thing 2"
		},{
			"name": "Thing 4"
		}]
}

3. Set the colours of panels§

Embeddable version

This example shows four differently coloured panels. Some panels have prefixes or postfixes around the values. We only show panels for specified items in the data. The order of panels is the order they will appear on the page and doesn't have to match the order in the data.

Thing 1

15%A note

Thing 3

192019

Thing 2

132

Thing 4

£90kJan 2021

This example was made with config:

YAML

title: Title
value: Value
note: Footnote
data:
  - Title: Thing 1
    Value: 15
    Footnote: A note
    Post: '%'
  - Title: Thing 2
    Value: 132
  - Title: Thing 3
    Value: 19
    Footnote: '2019'
  - Title: Thing 4
    Value: 90
    Footnote: Jan 2021
    Pre: £
    Post: k
  - Title: Thing 5
    Value: 56.4
    Footnote: Test
    Post: '%'
units:
  prefix: Pre
  postfix: Post
panels:
  - name: Thing 1
    colour: '#722EA5'
  - name: Thing 3
    colour: '#0DBC37'
  - name: Thing 2
    colour: '#F9BC26'
  - name: Thing 4
    colour: '#08DEF9'

JSON

{
	"title": "Title",
	"value": "Value",
	"note": "Footnote",
	"data": [{
			"Title": "Thing 1",
			"Value": 15,
			"Footnote": "A note",
			"Post": "%"
		},{
			"Title": "Thing 2",
			"Value": 132
		},{
			"Title": "Thing 3",
			"Value": 19,
			"Footnote": "2019"
		},{
			"Title": "Thing 4",
			"Value": 90,
			"Footnote": "Jan 2021",
			"Pre": "£",
			"Post": "k"
		},{
			"Title": "Thing 5",
			"Value": 56.4,
			"Footnote": "Test",
			"Post": "%"
		}],
	"units": {
		"prefix": "Pre",
		"postfix": "Post"
	},
	"panels": [{
			"name": "Thing 1",
			"colour": "#722EA5"
		},{
			"name": "Thing 3",
			"colour": "#0DBC37"
		},{
			"name": "Thing 2",
			"colour": "#F9BC26"
		},{
			"name": "Thing 4",
			"colour": "#08DEF9"
		}]
}

4. Set the colours of panels using a colour scale§

Embeddable version

An example of setting the panel backgrounds using a colour scale. For each panel we set scale, min and max.

Panel 1

10 dB

Panel 2

20 dBThis is very quiet

This example was made with config:

YAML

title: name
value: numeric
units:
  prefix: pre
  postfix: post
note: footnote
data:
  - name: Panel 1
    numeric: 10
    post: '&thinsp;dB'
  - name: Panel 2
    numeric: 20
    post: '&thinsp;dB'
    footnote: This is very quiet
panels:
  - name: Panel 1
    class: plum
    scale: Viridis
    min: 0
    max: 25
  - name: Panel 2
    class: cyan
    scale: Viridis
    min: 0
    max: 25

JSON

{
	"title": "name",
	"value": "numeric",
	"units": {
		"prefix": "pre",
		"postfix": "post"
	},
	"note": "footnote",
	"data": [{
			"name": "Panel 1",
			"numeric": 10,
			"post": "&thinsp;dB"
		},{
			"name": "Panel 2",
			"numeric": 20,
			"post": "&thinsp;dB",
			"footnote": "This is very quiet"
		}],
	"panels": [{
			"name": "Panel 1",
			"class": "plum",
			"scale": "Viridis",
			"min": 0,
			"max": 25
		},{
			"name": "Panel 2",
			"class": "cyan",
			"scale": "Viridis",
			"min": 0,
			"max": 25
		}]
}

5. Setting the width of panels§

Embeddable version

Set the minimum width of a panel to 400px. The panel will either be the specified width or will get larger to fit a whole number of columns.

Panel 1

10 dB

Panel 2

20 dB

Panel 3

50 dB

Panel 4

100 dB

Panel 5

110 dB

Panel 6

120 dB

This example was made with config:

YAML

title: title
value: numeric
units:
  prefix: pre
  postfix: post
note: footnote
width: 400px
data:
  - title: Panel 1
    numeric: 10
    post: '&thinsp;dB'
  - title: Panel 2
    numeric: 20
    post: '&thinsp;dB'
  - title: Panel 3
    numeric: 50
    post: '&thinsp;dB'
  - title: Panel 4
    numeric: 100
    post: '&thinsp;dB'
  - title: Panel 5
    numeric: 110
    post: '&thinsp;dB'
  - title: Panel 6
    numeric: 120
    post: '&thinsp;dB'
panels:
  - name: Panel 1
    scale: Viridis
    min: 10
    max: 120
  - name: Panel 2
    scale: Viridis
    min: 10
    max: 120
    footnote: Some text making a footnote
  - name: Panel 3
    scale: Viridis
    min: 10
    max: 120
  - name: Panel 4
    scale: Viridis
    min: 10
    max: 120
  - name: Panel 5
    scale: Viridis
    min: 10
    max: 120
  - name: Panel 6
    scale: Viridis
    min: 10
    max: 120

JSON

{
	"title": "title",
	"value": "numeric",
	"units": {
		"prefix": "pre",
		"postfix": "post"
	},
	"note": "footnote",
	"width": "400px",
	"data": [{
			"title": "Panel 1",
			"numeric": 10,
			"post": "&thinsp;dB"
		},{
			"title": "Panel 2",
			"numeric": 20,
			"post": "&thinsp;dB"
		},{
			"title": "Panel 3",
			"numeric": 50,
			"post": "&thinsp;dB"
		},{
			"title": "Panel 4",
			"numeric": 100,
			"post": "&thinsp;dB"
		},{
			"title": "Panel 5",
			"numeric": 110,
			"post": "&thinsp;dB"
		},{
			"title": "Panel 6",
			"numeric": 120,
			"post": "&thinsp;dB"
		}],
	"panels": [{
			"name": "Panel 1",
			"scale": "Viridis",
			"min": 10,
			"max": 120
		},{
			"name": "Panel 2",
			"scale": "Viridis",
			"min": 10,
			"max": 120,
			"footnote": "Some text making a footnote"
		},{
			"name": "Panel 3",
			"scale": "Viridis",
			"min": 10,
			"max": 120
		},{
			"name": "Panel 4",
			"scale": "Viridis",
			"min": 10,
			"max": 120
		},{
			"name": "Panel 5",
			"scale": "Viridis",
			"min": 10,
			"max": 120
		},{
			"name": "Panel 6",
			"scale": "Viridis",
			"min": 10,
			"max": 120
		}]
}

6. Vertically aligning elements of a dashboard panel§

Embeddable version

From v0.15.12 onwards, setting align=true will make sure that the parts of a panel (title, value and note) remain vertically aligned with their corresponding parts of other panels. For instance we can make sure that the "10dB" lines up with the "20dB" despite the titles taking up different amounts of space.

Panel 1 has quite a long title that will likely continue onto another line

10 dB

Panel 2

20 dBThis is very quiet

This example was made with config:

YAML

title: name
value: numeric
units:
  prefix: pre
  postfix: post
note: footnote
align: true
data:
  - name: Panel 1 has quite a long title that will likely continue onto another line
    numeric: 10
    post: '&thinsp;dB'
  - name: Panel 2
    numeric: 20
    post: '&thinsp;dB'
    footnote: This is very quiet
panels:
  - name: Panel 1 has quite a long title that will likely continue onto another line
    class: plum
    scale: Viridis
    min: 0
    max: 25
  - name: Panel 2
    class: cyan
    scale: Viridis
    min: 0
    max: 25

JSON

{
	"title": "name",
	"value": "numeric",
	"units": {
		"prefix": "pre",
		"postfix": "post"
	},
	"note": "footnote",
	"align": true,
	"data": [{
			"name": "Panel 1 has quite a long title that will likely continue onto another line",
			"numeric": 10,
			"post": "&thinsp;dB"
		},{
			"name": "Panel 2",
			"numeric": 20,
			"post": "&thinsp;dB",
			"footnote": "This is very quiet"
		}],
	"panels": [{
			"name": "Panel 1 has quite a long title that will likely continue onto another line",
			"class": "plum",
			"scale": "Viridis",
			"min": 0,
			"max": 25
		},{
			"name": "Panel 2",
			"class": "cyan",
			"scale": "Viridis",
			"min": 0,
			"max": 25
		}]
}