Data Visualization Overview

[00:00:00]
>> Next up we have one additional tab, application for analytics. So there's all kinds of things you can do with data once you have it. And this is a good opportunity to try your hand at some Data Visualization. So for this task I would recommend you use something like victory, which is a charting library.

[00:00:24]
For React web and React Native as well. And you can use it to for example, create a pie chart for the moods. So the victory talks are pretty comprehensive, and they have all kinds of different animation like charting and utilities that you can use. You can create by charts or line charts.

[00:00:44]
You can get pretty fancy with what you create. All right, so basically to create this we will use victory native. So we do yarn add victory native. And victory native actually has a dependency of React Native SVG PG. So that's where it uses to render all of the charting stuff and we already have React Native SVG because we need to install it for our bottom tab icons.

[00:01:07]
So there's actually no native dependencies on this one, we'll just work. I can just add it. And next, if you look at the documentation for victory pie, which is what I use for my analytics tab, it is looking for data, that's in a format of X cats and x with which is the title that you're going to be using.

[00:01:33]
And Y being the number of those items in the set. And obviously, our data doesn't look like that. So we need to convert it into that format. For this, I use lodash. But you can do it in plain JavaScript. So lodash doesn't have those gift types. So if you want to use you with TypeScript you'll have to install types to community types which are thankfully available and you can do that with yarn add a type slash lodash slash lodash So, here, this is an example of how you could group the energy.

[00:02:10]
So, you can use group by from lodash, which basically automatically create groups based on a key value on an object. And then you can call operator entries on that so you could map over it. And then we can pass the data down to victory PI. And then there are a bunch of properties, so if you look at my solution, so here are a bunch of properties that are used to create the right colors and sizes that I was looking for.

[00:02:34]
But you can sell it to your heart's content.