New Angular 4 Dashboard Demo Site

A while ago, I created a time sheet demo site using AngularJS (1.x). Now I’ve finally gotten around to creating a different demo site using Angular 4. This demo site is a dashboard. The dashboard is configurable with any number and combination of items, but the data is manually set (using a built-in form) instead of pulling automatically from various sources like you would probably want a real-life dashboard to function. Since the dashboard is just for demo purposes, I didn’t really worry about trying to take it that far. It should not be too much of a stretch, however, to change the back-end to populate the dashboard data automatically from external sources.

Besides Angular, the dashboard also uses Chartist to draw gauges and background charts of time-series data. The back end is an ASP.NET Core (C#) Web API, using JSON web tokens (bearer tokens) for authentication.

For storage, again since this is a demo, I went with something simpler than a database and used a library I created called FilePersist which simply serializes the dashboard object to a file in a directory. FilePersist was inspired by the node-persist library for Node.js.

Here are some screenshots showing the functionality of the dashboard

Leave a Reply

Your email address will not be published. Required fields are marked *