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.