Everybody loves charts

Vega Console, the web app that people can use to interact with Vega Testnet, has come a long, long way from its initial launch. We’ve had a lot of positive feedback about the professional feel and the flexibility. As a result, testnet users have requested that the charts get even faster, more customisable… and you’ve also requested we fix a few bugs. (It happens.)

@Matt, could you share what you’ve been working on recently to improve the charts?

There’s even more customisation and functionality coming further down the road. If you’re a testnet user, what do you think of the charts on Console?

Haven’t yet signed up to the testnet waiting list? It’s still open, sign up on our site.

3 Likes

Yes so some changes, both visual and under the hood have come together to make the overall experience smoother and more useful, whilst also improving the developer experience.

One issue we wanted to tackle was to reduce the amount of overlap between the candles and the volume bars, which at times was making it tricky to see differences in volume.

Our charts are a custom implementation based on D3, a widely-used JavaScript library for creating interactive data visualizations. It provides a rich set of features for dealing with visual data which we were able to utilise to adjust our scales, creating the necessary padding under the candles in which we could render the volume bars, with little to no overlap.

Before:

After:

The zoom and pan experience has also been improved as we now pre-fetch candles on the fly to ensure you are never waiting for candles to load. The pan event from D3 can be called several times per second so we throttle it to avoid over fetching. Additionally, we fixed an issue where we were still holding candle data in memory even if that candle was out of view. This resulted in the memory usage of the chart continually growing, which could eventually lead to a slow down in performance if you left the tab open for too long.

This iteration of the candlestick chart saw us make a full switch to using react hooks, which really improved the developer experience by making the code more declarative and maintainable. It also resulted in less lines of code.

We also improved performance by splitting out different components of the chart into individual canvas elements. For example, the crosshair is something that draws with every movement of the mouse, which can be easily 100 times a second so we added a separate canvas element specifically for drawing the crosshair, which avoids unnecessarily drawing other parts of the chart such as the candles or axes.

Overall we’ve been really happy with the changes and expect to deploy these to testnet over the coming weeks. That said we are striving to keep improving in this area and one of our stretch goals for 2020 is to start introducing more customisation, particularly with regard to chart indicators such as Bollinger bands and Ichimoku clouds. We are aiming to expand the controls in the chart navigation, allowing you to select what indicators to display and to save them to your browser’s local database (IndexedDB). However, we would also like to do further optimisation of the API itself, which will help us better manage the candle data.

If you’re an API user I’d love to hear what you like or dislike about it as we want to make 3rd party chart integrations as easy as possible.

7 Likes

Love this @matt!

I really appreciate the speedups and little quality of life improvements. One of my favourite things about Vega charts is that we don’t just shove a TradingView embed in there and leave it at that. As you say, tons more we can add to both trhe charts themselves and the APIs that each Vega node exposes to cover people’s different use cases and improvem performance and usability, but it’s great to see how much they’ve improved already :smile_cat:

2 Likes