simplenotsimpler / modern-javascript-dashboard

Sample themable JavaScript dashboard template that employs modern ES6, Bootstrap 4 and CSS grid. Uses color-blind friendly theme.

Modern JavaScript Dashboard

Sample themable JavaScript dashboard starter template that employs modern ES6, Bootstrap 4 and CSS grid. Uses modern-table library.

Current theme: Microsoft Power BI Color Blind Friendly.

Notes:

• Only targets modern browsers.
• To help Microsoft phase out IE11 and in anticipation of Bootstrap 5 dropping IE support, IE is not supported.
• Compatible with Bootstrap 4.4.1 and higher.
• Specifically tested with Bootstrap 4.4.1 and 4.5.3.
• Theoretically, this should work with other CSS frameworks. However, this has NOT been tested with other CSS frameworks, so your mileage may vary.
• If number or date formatting are specified in the configuration, but the proper library does not load, this gracefully fails to no formatting.
• Strongly recommended to use ISO 8601 date formats in your source data and configuration. Then use the UI for localization.
• Accessibility: Minimal level (Level A ??).
• Site search intentionally left non-functional since developers will likely want to use their own tool, e.g. Elasticsearch, etc.

Live Demo

https://simplenotsimpler.github.io/modern-javascript-dashboard/

Getting Started

Download or clone from modern-javascript-dashboard.

Requires:

• Bootstrap - either of the versions below:
  • Bootstrap 4.4.1
  • Bootstrap 4.5.3
• Apex Charts
• ModernTable Library
• JSON data source
• Container to hold the datatable

Recommended:

• Number formatting: format-intl-number library
• Date formatting: Moment.js

License

This project is MIT licensed.