Web dashboard to summarize data streamed via a socket connection and make API calls

Question

I'm looking for something more customizable than Grafana (I should be able to touch the code) and less involved than creating a web dashboard from scratch.

I want some generic display of data in tables and graphs (to show order book and open order data) that also allows me to add my own buttons which make outgoing API calls. The end result would be something like BitMEX's trading interface:

I'm willing to compromise on customizability of look and feel and nitty gritty details of JS components and rendering.

Ideally, I would just write the code to adapt the format that my WebSocket serves to a format that the framework / software can use to understand which table / graph to update, and do some minimal customizing around the numbers, names, types, and layout of the components.

In summary, my "need to haves" are:

• Listen to data coming over a WebSocket connection, update the displayed data accordingly.
• Allow inserting links, buttons, and input that I control (with the purpose of being able to send out API requests using the socket connection).
• Provide some advantage over implementing this behavior from scratch — maybe this a way of updating the display, a well thought-out data format, an easy way to create and organize the visual components, or some combination.

Answer 1

One possibility, but maybe a little more work than you would prefer would be a Jupyter notebook with ipyWidgets & the Dashboards extension.

Jupyter notebooks consist of a series of cells that can be one of Markdown text and active cells in the coding language for the selected Kernel - where the kernel can be iPython, R, Scala & lots more.

Taking Python as an example plots which are generated from live data can be included inline and buttons can be added, (or code), to make API calls no problem.

There is a good walk-through of doing this at Python for Finance: Stock Portfolio Analyses you could possibly expand this into a Dash web dashboard which is covered in a second article of the series.