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 the required elements
 **/
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';


/**
 * Extend the application and provide a render method
 **/
class App extends Component {
  render() {
    return (

    /**
    * Use the Dashboard component to wrap your
    * dashboard elements
    **/
    <Dashboard title="A Simple 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">
        <Metric 
          caption='Caption A'
          data={[1]}
          background='#687a99'
          cardClasses={['col-md-4']}
          iconClass='fa fa-bed'
        />
        <Metric
          caption='Caption B'
          data={[2]}
          background='#689994'
          cardClasses={['col-md-4']}
          iconClass='fa fa-bomb'
        />
        <Metric
          caption='Caption C'
          data={[3]}
          background='#8f6899'
          cardClasses={['col-md-4']}
          iconClass='fa fa-bathtub'
        />
      </div>
      <div className="row">
        <Chart 
          header="Header 1"
          iconClass="fa fa-cloud"
          cardClasses={['col-md-6']}
          key="chart1"
          data={[{x: 'foo', y: 10}, {x: 'bar', y: 20}, {x: 'bax', y: 30}]}
          settings={
            {
              type: 'pieChart',
              height: 300
            }
          }
        />
        <Chart 
          header="Header 2"
          iconClass="fa fa-cogs"
          cardClasses={['col-md-6']}
          key="chart2"
          data={[{x: 'Eeny', y: 1122}, {x: 'Meeny', y: 2220}, {x: 'Miney', y: 910}]}
          settings={
            {
              type: 'pieChart',
              height: 300,
            }
          }
        />
      </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:

/**
 * A very simple Dashboard implementation using
 * a settings object
 */
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';

/**
 * The settings object is passed as props to the Dashboard component
 **/
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.