Chart generation - quantifiedstudent/QS-Dashboard GitHub Wiki

The quantified student dashboard has a lot of graphs. To create and configure every graph by hand is not very scalable. So in order to make the process of adding and generating graphs easier I have made this a totally generic process which I will walk you through in this documentation.

There are a few components and classes to this graph generation process. The main thing is an array of ChartContainer objects which hold the charts. These chart containers are then being displayed in the modular grid. But there is one step above displaying the graph and that is the graph definition. In the dashboard you are able to select the graph you want to add to the dashboard. These different graphs are pre-defined by the class QsGraph

The static readonly properties are the predefined graphs with the necessary data. The DEFAULT property however serves as a loading state for when the data is not loaded yet. The first is the label the graph should get. The second is the graph type. These are defined in an enum which is shown next to the QsGraph class. And the third property is the api endpoint the data should come from.

So when you select a new graph to add to the dashboard you are selecting one or more of these underlaying classes. Which then will be provided to the chartContainer component.

The chartContainer component is responsible to fetch the data from the desired graph(s). and pass it down to the actual chartComponent. There will be an useState hook to keep track of the data the api has provided. But when there is not data yet, this will be the default graph I discussed earlier. Then the component will fetch the data for every graph provided and add for every graph an object to the returnValue array. This is to keep track which labels and data belong to which graph. After all the fetching is finished the state will be set to the fetched data in order to be used by the chartComponent.

The ChartContainer component makes use of one other class called ApiRequest to make the actual request and to extract the gotten data into usable data. This ApiRequest class does two things at the moment. It is initiated with the endpoint the request is supposed to go to, and then there are two methods. The GetData method makes the actual api call and after it gets an response from the api it will provide that data to the extract class which is responsible for extracting the data into a usable form factor.

After the ChartContainer has all the data it will be passed on to the ChartComponent which is responsible for displaying the actual chart. It gathers the data provided to it and passes it on to the QsChart class which on his turn is responsible for generating the chart.

The QsChart class has a few properties. Charts which quires an array of objects with chart, labels and data (the object that is generated by ChartComponent) Labels, this is the X axis of the chart And an canvas html element to draw the chart on. Then this class generates for every chart a dataset with the label, data and type, It gives every graph another colour and generates the configuration for the chart. And after all of that it generates the chart with Chart.js and return it to be displayed on the screen