Description

Dashboard is a container component for visualizing independent sections of information in an organized manner. Dashboard itself does not provide any content.

Components

Dashboard is a composition of different components.

Charting

Charting is used for visualizing data e.g. as pie charts.

Grid layout

Grid layouting is used for creating configurable, draggable and resizable grid layout container for gadgets.

Card

Card is not used yet, but should be considered as a wrapping component for the content in order to have a consistent look and feel throughout the solutions.

Features

• Create new dashboard.
• Delete dashboard.
• Rename dashboard.
• Add gadgets.
• Remove gadget.
• Reorder gadgets using drag and drop.
• Resize gadgets
• Responsive
• Initialization of gadgets with their order and size from an object.
• Gadget full screen mode.
• Gadget canvas mode. Canvas mode is used for alternate e.g. detailed content.

Common component

Dashboard is not yet available as a common component.

Gadgets

Clock

This could be extracted and added into the common component library.

Graphs

Recharts library provides React components and those are dry i.e. there is not much boilerplate code.

API & Models

Models i.e. object structures for dashboard and gadgets should be documented and extracted as classes into common component library.

Dashboard could e.g. provide a Promise , requires polyfill for IE, based API interface which the consumer implements and passes as an object via props.

    /** Consumer **/
    ...
    addDashboard = (dashboard) => {
        return Promise((resolve, reject) => {
            asyncAddDashboard(dashboard).then(
                (result) => {
                    ...
                    resolve(result.id);
                },
                (error) => {
                    ...
                    reject(error);
                }
            )
        });
    }
    ...
    const api = { addDashboard: this.addDashboard };
    ...
    <Dashboard api={this.api} .../>

    /** Dashboard **/
    ...
    onAddDashboard = (dashboard) => {
        this.props.api.addDashboard(dashboard).then(
            (result) => { /** Update state **/ },
            (error) => { /** Handle error **/  }
        )
    }
    ...

By using API the dashboard does not need to know anything about the concrete implementation and consumer can implement it in any way needed.

Translations

Translations for dashboard texts, e.g. Add new dashboard should be provided via props. Dashboard could provide fallback translations e.g. in English.

Example