React Dazzle

Dashboards made easy in React JS

Dazzle is a library for building dashboards with React JS. Dazzle does not depend on any front-end libraries but it makes it easier to integrate with them.

Dazzle's goal is to be flexible and simple. Even though there are some UI components readily available out of the box, you have the complete control to override them as you wish with your own styles and layout.

Features

• Grid based layout
• Add/Remove widgets
• Drag and drop widget re-ordering
• UI framework agnostic
• Simple yet flexible
• Well documented (It's a feature! Don't you think?)

Installation

$ npm install react-dazzle --save

Dazzle me

Here is a demo. Widgets shows fake data but they look damn cool though.

Sample is available here.

Usage

import React, { Component } from 'react';
import Dashboard, { addWidget } from 'react-dazzle';

// Your widget. Just another react component.
import CounterWidget from './widgets/CounterWidget';

// Default styles.
import 'react-dazzl/lib/style/style.css';

class App extends Component {
  constructor() {
    this.state = {      
      widgets: {
        WordCounter: {
          type: CounterWidget,
          title: 'Counter widget',
        }
      },
      layout: {
        rows: [{
          columns: [{
            className: 'col-md-12',
            widgets: [{key: 'WordCounter'}],
          }],
        }],
      }
    };
  }

  render() {
    return <Dashboard  widgets={this.state.widgets} layout={this.state.layout}  />
  }
}

API

Props	Type	Description	Required
layout	Object	Layout of the dashboard.	Yes
widgets	Object	Widgets that could be added to the dashboard.	Yes
editable	Boolean	Indicates weather the dashboard is in editable mode.	No
rowClass	string	CSS class name(s) that should be given to the row. Default is row div element.	No
editableColumnClass	string	CSS class name(s) that should be used when a column is in editable mode.	No
droppableColumnClass	string	CSS class name(s) that should be used when a widget is about to be dropped in a column.	No
frameComponent	Component	Customized frame component which should be used instead of the default frame.	No
addWidgetComponent	Component	Customized add widget component which should be used instead of the default AddWidgetComponent.	No
addWidgetComponentText	string	Text that should be displayed in the Add Widget component.	No
onAdd(layout, rowIndex, columnIndex)	Function	Will be called when a widget is added.	No
onRemove(layout)	Function	Will be called when a widget is removed.	No
onMove(layout)	Function	Will be called when a widget is moved.	No

Providing widgets

widgets prop of the Dashboard component takes an object. A sample widgets object would look like below. This object holds all the widgets that could be used in the dashboard.

{
  HelloWorldWidget: {
    type: HelloWorld,
    title: 'Hello World Title'
  },
  AnotherWidget: {
    type: AnotherWidget,
    title: 'Another Widget Title'
  }
 }

• type property - Should be a React component function or class.
• title property - Title of the widget that should be displayed on top of the widget.

Dashboard layout

The layout prop takes the current layout of the dashboard. Layout could have multiple rows and columns. A sample layout object with a single row and two columns would look like below.

{
  rows: [{
    columns: [{
      className: 'col-md-6 col-sm-6 col-xs-12',
      widgets: [{key: 'HelloWorldWidget'}]
    }, {
      className: 'col-md-6 col-sm-6 col-xs-12',
      widgets: [{key: 'AnotherWidget'}]
    }]
  }]
}

• className property - CSS class(es) that should be given to the column in the grid layout. Above sample layout uses the classes from bootstrap library. You could use the classes of your CSS library.
• widgets property - An array of widgets that should be rendered in the dashboard. key property of the widgets array should be a key from the layout object.

Edit mode

Setting editable prop to true will make the dashboard editable.

Add new widget

When user tries to add a new widget, the onAdd callback will be called. More info here on how to handle widget addition.

Remove a widget

When a widget is removed, onRemove method will be called and new layout (The layout with the widget removed) will be available as an argument of onRemove method. Set the provided layout again to the dashboard to complete the widget removal.

Customization

Implementing custom WidgetFrame component

A frame is the component which surrounds a widget. A frame has the title and the close button. Dazzle provides a default frame out of the box. But if you want, you can customize the frame as you like. More info here.

Implementing custom AddWidget component

Dazzle also allows you to customize the Add Widget component which appears when you enter edit mode. More info here.

Issues

• Improve drag and drop experience (#1)

License

MIT © Raathigeshan