React Dash aka React Dashboard¶

React Dash is a library for quickly building custom data visualization dashboards based on re-usable components.

Features¶

NVD3 Components
HTML Components
Choropleth Mapping in geoJson and topoJson
Custom Filtering
Custom Data Handling
CSV Integration
DKAN API Integration

Table of Contents¶

Getting Started¶

Starting a standalone project¶

Make sure that you have npm installed on your system

Install the react-dashboard-boilerplate project and its dependencies:

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

The project structure is as follows:

Building a DKAN project¶

React Dash Developer Guide¶

Overview¶

directory structure¶

/project_home
 app.js
 dashboard.js
 customDatahandlers.js
 /static
   custom.css
   your.img

Components¶

Provided components¶

Filter components¶

onFilter actions¶

Choropleth Maps¶

instantiating data¶

geojson¶

topojson¶

Creating custom components¶

Extending components¶

Data Handlers¶

Data handlers do everything

Theming¶

cards¶

custom css¶

inline styles¶

Examples and Uses¶

@@GOSA¶

@@ UCR Crime Data¶

Climate Data¶

Roadmap¶

The react dash project is currently under very active development. There are a number of supported projects out in the wild (see @@Examples and Uses). That said, the React Dash was developed quickly under real-world pressure to deliver projects under deadline.

Redux¶

Versioning¶

React Dash loosely follow semantic versioning (@@LINK)

Backwards Compatibility¶

Until version 1.0.0 is released, we do not guarantee backwards compatibility. We do, however, intend to maintain an upgrade path for projects implemented with earlier versions of the library.

Contribute to React Dash¶

@@LINK - to github page

Report a bug
Submit a patch or pull request
Suggest an improvement
Show us what you have built!