Dashboard
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 defineprefix
andprefix
columns.prefix
- The column to use for any text that would go _before_ thevalue
e.g. to add a currency sign before thevalue
.postfix
- The column to use for any text that would go _after_ thevalue
e.g. to add, say, "kWh" to avalue
.
-
panels
- An array of which panels will be displayed. They are in orderand each is of the form:name
- (required) References a specifictitle
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 thevalue
.min
- Used withscale
andmax
to define the colour scale.max
- Used withscale
andmin
to define the colour scale.
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
1. Simple panels§
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
.
This example was made with config
:
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
{
"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§
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 noteThing 3
19.2342019Thing 2
132Thing 4
£90kJan 2021This example was made with config
:
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
{
"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§
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 noteThing 3
192019Thing 2
132Thing 4
£90kJan 2021This example was made with config
:
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'
{
"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§
An example of
This example was made with config
:
title: name
value: numeric
units:
prefix: pre
postfix: post
note: footnote
data:
- name: Panel 1
numeric: 10
post: ' dB'
- name: Panel 2
numeric: 20
post: ' 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
{
"title": "name",
"value": "numeric",
"units": {
"prefix": "pre",
"postfix": "post"
},
"note": "footnote",
"data": [{
"name": "Panel 1",
"numeric": 10,
"post": " dB"
},{
"name": "Panel 2",
"numeric": 20,
"post": " 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§
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 dBPanel 2
20 dBPanel 3
50 dBPanel 4
100 dBPanel 5
110 dBPanel 6
120 dBThis example was made with config
:
title: name
value: numeric
units:
prefix: pre
postfix: post
note: footnote
width: 400px
data:
- name: Panel 1
numeric: 10
post: ' dB'
- name: Panel 2
numeric: 20
post: ' dB'
- name: Panel 3
numeric: 50
post: ' dB'
- name: Panel 4
numeric: 100
post: ' dB'
- name: Panel 5
numeric: 110
post: ' dB'
- name: Panel 6
numeric: 120
post: ' dB'
panels:
- name: Panel 1
scale: Viridis
min: 10
max: 120
- name: Panel 2
scale: Viridis
min: 10
max: 120
- 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
{
"title": "name",
"value": "numeric",
"units": {
"prefix": "pre",
"postfix": "post"
},
"note": "footnote",
"width": "400px",
"data": [{
"name": "Panel 1",
"numeric": 10,
"post": " dB"
},{
"name": "Panel 2",
"numeric": 20,
"post": " dB"
},{
"name": "Panel 3",
"numeric": 50,
"post": " dB"
},{
"name": "Panel 4",
"numeric": 100,
"post": " dB"
},{
"name": "Panel 5",
"numeric": 110,
"post": " dB"
},{
"name": "Panel 6",
"numeric": 120,
"post": " dB"
}],
"panels": [{
"name": "Panel 1",
"scale": "Viridis",
"min": 10,
"max": 120
},{
"name": "Panel 2",
"scale": "Viridis",
"min": 10,
"max": 120
},{
"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
}]
}