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