3.7 Pie Chart

So now that we have completed the hard entry table, I'm gonna move on to create the pie chart. So this will be a chart that shows off the distribution of the various file types within our hard file. I'll start off by creating a folder for the pie-chart, and then add a file called TypePieChart.jsx. So by this time, we should be familiar with the standard boiler plate I'm going to include now. This is the constructor in the render functions. Now within the render function, I will create this SVG tag within which we will put in our pie-chart. I'm also starting the for this vg tag. Which works well for our app. For now, I'm going to hard code this value in the state of type by chart. Now along with the spg width and height, I'm also setting the width and height properties of the container inside which we'll be drawing our pie-chart. So that'll just be half of the FPG width and height. But the reason why this is a little smaller than this SPG dimensions because we want to also include the labels around the pie-chart which might occupy a little more space than the chart itself. Now within the svg tag I'm also going to create a group tag and name it container. This is a tag inside which we will be actually rendering the pie-chart. To make sure our pie stays in the centre of sag, I'm gonna transform it by moving it to the center. Now the type pie-chart is a special kind of react] component. All gonna use react to kind of wrap the chart itself, we'll mostly be leveraging D3 to do the heavy lifting for building the chart. So in this case, we'll hook into the life cycle method of the react component and use that to create our B3 chart. A lot of them of course, is to component dMount, and they'll be one more which is component will to see props. Under both these evens, we wanted to call into D3 to bill our chart. So not surprisingly I'm gonna call this method as _buildChart and passing the entries that will be used to create the chart itself. Since the entries will be passed as a property I'm gonna add it to the default props. Now as I mentioned earlier, gather [INAUDIBLE] method will hook into is the component will receive props. Here I'm just gonna do a simple check to ensure the entries have changed. And calling to the build chart method. So the primary method purpose of the build chart method is to prepare the date which will the hand off to D3 to actually build the pie-chart. By in this case, this is a pie-chart showing you the distribution of file types. I'm gonna group the entries by the type and then hand it off to D3 to actually construct the pie chart. I'll create a helper model called getEntriesByGroup which will simply take the entries and then group it by the type of property. I'm gonna rely on low dash to do the actual grouping over here. First I'll group it by the type and then for each group I'll create a new object consisting of the type and the count that gives you the number of items in that group. Both of these will be rendered on the pie-chart and back to our real chart method. And this is where we'll take in the groups and then pass it along to D3 to construct the chart. Now the actual D3 construction will not happen inside type by chart. Instead we will create a separate module called chart builder and pass along all the contexts it needs to create the pie-chart. So in this case it will be the groups, the configuration, which is the width and height, and also the inside which we will be putting all of our chart elements. All right, so let's go ahead and create our chartBuilder module. This will be inside the same folder as the pie-chart. Now call it chart-builder.js. This module is simply going to export the factory function that will construct the D3 pie-chart. So it will take in the groups, the parentnode and the config, and then use that to create the chart. Now D3 gives us all of the helper methods to create the various elements of our pie. In this case, we'll need the arc which is used to construct the radius donut pieces of four pie and to do that we'll specify the inner and outer radius based off the radius calculation that we just did. Initially we also created a level arc which will be used to layout the labels and on the circumference of the pie. And as you can imagine the radius for this will be slightly higher, so as to push the labels outside the pie. Next, we'll configure the pie function, which will be used to draw the various segments of the chart. Since we're showing the distribution of the file types in our HAR file, the width of each segment in the pie will be driven by the number of elements in that particular group. So let's go to specify in the value function. So now that we have the pie configured, we can go in and build the elements of the chart. First, we'll start off by formatting our data in a way that the pie chart requires. Next, we'll use D3 to select the parent node which will become the container of our file elements. As you're probably aware with all the killer features of D3] is to data joins and selections. So let's go and do that by joining the data with the path elements that will be use to render the segments of the pie. With the data joined we essentially get three selections. The update, enter, and exit. The update selection is being stored in the path variable. The enter selection allows you to handle the newly added data items. And this is where we'll create the new path elements. Now enter also has a side effect of updating the update selection, to include these newly created path elements. So now in one go, we can set the attributes of the path elements. And this includes the ones that I have newly created and existing ones. By the D3 table this is commonly referred to as the generalized update pattern. So in this case I'm gonna set in the fill property and also add a transition to fade in the existing and the newly faded path element. And of course, we have the exit selection, which will be used to fade out, the needle element. And finally remove them from the svg] container. So with that we have generated the various segments of our pie-chart. Now let's move on to the labels, for putting the text against the other segments. So here again I'm gonna follow the same pattern, just in this case I'll do the beta join with the text element, create the ones which are more present in our data set and set the rate of attributes such as the text, the anchor, and other transforms which are needed to position the text element. Now I'll also include a transition to move the labels from the initial to the final position. And this way the fading and the positioning of the element happen simultaneously. Now it's pretty common to position the label in between the segment. And for doing that we'll put the start at an angle and use the average of those two angles to calculate the rotation of the label. No these angle are measured in gradients. So let's create helper function called display angle, that simply converts the angle from gradients to degrees. This will be useful for the calculations. Now, to make our labels more readable at some extreme angles, which are normally about a 90 degree mark. I'll just flip them, by 180 degrees. So with that our transform function can give back the translation and the rotation that needs to be applied to the label. In a similar reign that will also set the text to enter on the label to give a nice alignment of the label against the segment. This will again use a similar calculation as above to use the degrees and then set the anchor to either end or start. Depending on how extreme the angle is. And finally we'll set the most important attribute of the label, the text itself. And this will be driven by the type of the file and the number of elements of that file type. And last but not least we also have a similar exit selection for the text itself. Here we'll fade out the text elements that are no longer needed. This is almost identical to what we did for the path limits. Now with all these changes it's time to start using the pie-chart. So let's go ahead and replace the previous place holder that we had and put the type pie-chart element over there. And not to forget the import statement that we need. And for TypePieChart, we need to pass in the entries, which will be the currentPage.entires from the Har viewer. Now TypePieChart needs to appear above the filter bar, so let's move the tag to take care of that. Now the real proof is in the pudding right. So let's go ahead and test our pie-chart. And you can see that the labels and elements are fitting into the positions. When I switch between the hard files the pie-chart kinda adapts to show you the newly created file type. And removing the ones which are not needed in case of some hard files. And this is all happening through transitions in D3. It also notice the rotation of the labels and the anchoring that happens for certain extreme angles. Especially for the labels that are below and to the left of the 90 degree mark at the top. So with that, we have reached the end of the version one of our Har Viewer and also the React D5 course. Of course the journey to explore react does continue. In the next lesson I'll give you a few pointers to show you some other libraries that you are gonna explore in the react ecosystem. So let's catch up in the next lesson which is also the wrap up for this course.