I have a project called Odin - its a programmable, observable and distributed job scheduler.
For a while now, Odin has had a user interface, a dashboard written with Typescript and AngularJS. Metrics from jobs are stored in MongoDB and then displayed on this web UI.
I myself didn't actually build the dashboard and I think it leaves a lot to be desired when looking at Dashboards for other projects (such as Grafana).
Here's what the dashboard looks like at the moment:
I'd really appreciate any resources folks have which could help me out! Anything related to build dashboard interfaces like the image above would be great, I'd kind of at a dead end right now.
(Alternatively, if you'd like to sink your teeth into a new a project let me know.)
Top comments (2)
It's not terribly sexy, but have you considered using a prebuilt template? There are a number of resources that will sell templates for common frontend designs (like dashboards).
Most of them will be raw HTML, CSS and JS, but many nowadays will have React and Angular versions ready to go out of the box as well.
The company I currently work for specializes in dashboards like yours.
From a quick glance, I am already a bit lost. It is not immediately clear to me what information I am looking at. You have some pretty generic titles like "Metrics Graph" and "Metrics Table" which is pretty unhelpful as I already know one is a graph and one is a table. I'd encourage you to add more descriptive titles that help inform the users.
It looks like you already have some KPIs at the top, but the information inside of them is small and difficult to digest quickly. I'd recommend making those values larger and bolder so they stand out more.
It's important to have a clear idea on what the goal of this dashboard is: