Data representation

A bar chart component that will receive data from the higher order component and render the bar chart using Chartjs.

Its important to note that the higher order component i.e the parent component will handle all changes of data. When the parent component changes its state, this data will be drilled back down into its child component i.e the BarChart component

This is a common pattern in a typical React project. Having a component hierarchy like this provides a separation of concerns between a component that deals with logic and a component that receives its data.

Having interfaces defined like this helps to determine what properties are accessible from a data request at compile time.

Interfaces also enable Intellisense to provide further information about in your coding environment.

Axios

We want to retrieve crypto information using the HTTP library Axios, once this data is retrieved it will flow down into the BarChart component. Before the App.tsx higher level component mounts we want to to fire off all the Axios actions.

componentWillMount() {
this.getCoinTypes()
this.getCoinCompare()
}

In getCoinTypes()we query the coin list endpoints in order to get a comprehensive list coins to populate the comparison dropdown:

Again, we are setting the loading state when the call occurs, retrieving coin data and updating our components state with this new information to filter down to the BarChart component.

Note, that we are using await and wrapping the function withasync. This is ES6 shorthand syntax for handling Promises. This allows us to handle our data asynchronously without the need for invoking .then() like a regular promise implementation.

In otherwords, any code below the await will not occur until the request has completed. This shorthand syntax is very handy for asynchronous data calls. If you are interested in finding out more about async+await have a look here.

Chart Options

The Chartjs library contains a wide array of options for customizing a bar chart. These options include styling the chart, changing the axis types, specifying labels and much more. I want to highlight the important options used in this example.

Data

this.props.barChartData[this.state.selectedCurrency] represents the default coin selected for this tutorial (Etheruem)

this.props.barChartFilters.coinToCompare[ this.state.selectedCurrency ] represents the coin selected for by the user from the comparison coin dropdown.

Currency Formatting

The ticks on both axis’s of the chart contain values of the retrieved crypto data. Ideally, we want each individual tick to be in the format of the currency shown. This is achieved by using a callback in scales property.

Notice we are manipulating the tick value being returned and prefixing it with our desired currency symbol. This ensures our axis value is properly formatted and has a cap on how many digits it can show using maximumSignificantDigits.

React Modular Components

A key takeaway from this demonstration is that the BarChart component now exists in its own right. It is modular and recyclable and with a small bit of tweaking, any data can be injected into it. This is quite a powerful concept, as having a component means that it can be reused in many different projects

This is a great benefit of libraries like React and shows how effective it can be for creating modular data visualisation components. The bar chart component embodies its own specific functionality and can be used as part of a bigger data visualisation dashboard.