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 are used by the dashboard to divide
// the layout into rows using the bootstrap grid
regions: [
{
id: 'text-row',
className: 'row',
children: [
{
type: 'DataTable',
header: 'Mi titulo',
cardClasses: ['col-md-6'],
key:"my_table",
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,
},
rows: {
height: 40,
}
}
}
]
},
{
id: 'metrics-row',
className: 'row',
accordion: true,
children: [
// each child is a react component defined by type
// paramaters are passed as props
{
type: 'Metric',
caption: 'Caption A',
cardStyle: 'metric',
dataTrigger: 'A',
iconClass: 'fa fa-bed',
data: [1],
background: '#687a99',
className: 'col-md-4',
key:"caption_1"
},
{
type: 'Metric',
caption: 'Caption B',
dataTrigger: 'B',
cardStyle: 'metric',
iconClass: 'fa fa-bed',
data: [2],
background: '#689994',
className: 'col-md-4',
key:"caption_1"
},
{
type: 'Metric',
caption: 'Caption C',
cardStyle: 'metric',
dataTrigger: 'C',
iconClass: 'fa fa-bed',
data: [3],
key:"caption_2",
background: '#8f6899',
className: 'col-md-4',
}
]
},
{
id: 'charts-row',
className: 'row',
children: [
{
type: 'Chart',
cardStyle: 'chart',
header: 'Header 1',
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: 'Header 2',
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,
},
rows: {
height: 40,
}
},
overrides: {
// target table columns with custom attributes
// use column header name as key
columns: {
bar: {
flexGrow: 9,
className: 'greenCell'
},
},
// target table rows with custom attributes
// use row index as key
rows: {
1: {
className: 'yellow'
}
},
// target individual cells with custom attributes
// define key using coordinate: headerName_rowIndex
cells: {
foo_1: {
className: 'red'
},
}
},
},
// 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