Configuring the dashboard - settings.js¶
settings.js defines a declarative configuration for our react-dash.
A simple example:
import 'bootstrap/dist/css/bootstrap.min.css';
export var settings = {
title: 'React-Dash Javascript Settings Example',
doFilterRouting: false,
regions: [
{
id: 'metrics-row',
className: 'row',
children: [
{
type: 'Metric',
caption: 'Caption A',
cardStyle: 'metric',
iconClass: 'fa fa-bed',
data: [1],
background: '#687a99',
className: 'col-md-4',
},
{
type: 'Metric',
caption: 'Caption A',
cardStyle: 'metric',
iconClass: 'fa fa-bed',
data: [2],
background: '#689994',
className: 'col-md-4',
},
{
type: 'Metric',
caption: 'Caption A',
cardStyle: 'metric',
iconClass: 'fa fa-bed',
data: [3],
background: '#8f6899',
className: 'col-md-4',
}
]
},
{
id: 'charts-row',
className: 'row',
children: [
{
type: 'Chart',
cardStyle: 'chart',
header: 'Foo',
iconClass: 'fa fa-cloud',
className: 'col-md-6',
key: 'c1',
data: [{x: 'foo', y: 10}, {x: 'bar', y: 20}, {x: 'baz', y: 30}],
settings: {
type: 'pieChart',
height: 300
}
},
{
type: 'Chart',
cardStyle: 'chart',
header: 'Eeny',
iconClass: 'fa fa-cloud',
className: 'col-md-6',
key: 'c2',
data: [{x: 'eeny', y: 110}, {x: 'meeny', y: 920}, {x: 'mo', y: 430}],
settings: {
type: 'pieChart',
height: 300
},
},
// start DataTable Example
{
type: 'DataTable',
header: 'Mi titulo',
data:
[
[
{foo: 1, bar: 2},
{foo: 11, bar: 21},
{foo: 111, bar: 222},
{foo: 1, bar: 2},
]
],
settings: {
table: {
rowHeight: 40,
width: 800,
maxHeight: 300,
headerHeight:40
},
columns: {
flexGrow: 1,
width: 150,
},
cells: {
height: 40,
width: 500,
}
}
},
// end DataTable Example
]
}
]
}
Regions¶
Boostrap rows¶
Regions are rendered into divs, allowing you to add bootstrap row
class, and thus to organize the dashboard into rows using the responsive grid.
Conditional Rendering¶
If region.multi = true
then you can use conditional rendering to render the region. If this is the case, then the region should contain an elements
object. The elements object has keys which each contain a different array of elements. The muli-region should also define a datahandler. The datahandler returns a string which is used as the key to chose an array from the elements object.
@@TODO add example