Overview

Currently, there are two formats avialable for defining dashboards:

JSX

You can define a dashboard using familiar JSX syntax. Following is a complete example of a simple dashboard defined in JSX:

npm run jsx-example will load the following dashboard:

/**
 * This example shows how to build a basic dashboard using available components
 * and basic React JSX syntax.
 **/
import 'bootstrap/dist/css/bootstrap.min.css';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Dashboard, Region, Card, Metric, Chart } from '../../src/ReactDashboard';

class App extends Component {
  render() {
    return (
   <Dashboard title="A Frivolous Dashboard Writ in JSX" doFilterRouting={false}>
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
      <div className="row">
        <Card cardStyle="metric" className="col-md-4">
          <Metric 
            caption='Caption A'
            data={[1]}
            background='#687a99'
            iconClass='fa fa-bed'
          />
        </Card>
        <Card cardStyle="metric" className="col-md-4">
          <Metric
            caption='Caption B'
            data={[2]}
            background='#689994'
            iconClass='fa fa-bomb'
          />
        </Card>
        <Card cardStyle="metric" className="col-md-4">
          <Metric
            caption='Caption C'
            data={[3]}
            background='#8f6899'
            iconClass='fa fa-bathtub'
          />
        </Card>
      </div>
      <div className="row">
        <Card cardStyle="chart" className="col-md-6">
          <Chart 
            header="Foo"
            iconClass="fa fa-cloud"
            key="chart1"
            data={[{x: 'foo', y: 10}, {x: 'bar', y: 20}, {x: 'bax', y: 30}]}
            settings={
              {
                type: 'pieChart',
                height: 300
              }
            }
          />
        </Card>
        <Card cardStyle="chart" className="col-md-6">
          <Chart 
            header="Eeny"
            iconClass="fa fa-cogs"
            key="chart2"
            data={[{x: 'Eeny', y: 1122}, {x: 'Meeny', y: 2220}, {x: 'Miney', y: 910}]}
            settings={
              {
                type: 'pieChart',
                height: 300,
              }
            }
          />
        </Card>
        </div>
    </Dashboard>
    )
  }
}

document.addEventListener('DOMContentLoaded', function(event) {
    ReactDOM.render(<App/>, document.getElementById('root'));
});

Javascript Settings object

In many cases it is useful to define dashboard configuration in JSON - allowing for database storage, programmatic creation, etc. Here is the above Dashboard defined as a Javascript object.

npm run js-example will load the following dashboard configuration at localhost:3000:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { settings } from './settings';
import { Dashboard } from '../../src/ReactDashboard';
import 'fixed-data-table/dist/fixed-data-table.min.css';

document.addEventListener('DOMContentLoaded', function(event) {
    ReactDOM.render(<Dashboard {...settings}/>, document.getElementById('root'));
});

Complete Dashboard Application

The app at /examples/app.js runs an example of a more robust application with datahandling, filtering, etc.

npm run start will from the react-dash repository will run the application.

Boilerplate project

The boilerplate module includes the above application in a complete development environment suitable for doing dashbaord development.

git clone https://github.com/NuCivic/react-dash-boilerplate.git cd react-dash-boilerplate npm install npm run init npm run start

This will spin up the example application, and you can use it as a starting point for developing your own app.