Setting up interactions in React, and wrapping up

[00:00 - 01:51] Okay, so our next step for drawing your chart is to create interactions. It seems a little bit of a tangent right now, so we're not going to implement that, but when you 're creating your own components, most charts can benefit from having a tooltip. There's two ways you could create a tooltip for your chart library. You could add a rectangle over your chart that listens for mouse events. So within chart JSX, you can add a rectangle above it that's transparent and then pass those mouse events up to say timeline and then it can handle creating that tooltip. You could also add a listener to your line element and then use pointer and least index like we did in module five to figure out what the closest data element is and have timeline handle creating that tooltip. There's really a lot of options here, but they should be fairly straightforward using the principles that we've talked about already. So to wrap up, if we go to app, we can comment out these three lines and show our completed components. So if we look at our completed dashboard, it has our timeline filled out, our scatter plot filled out, and our bar chart filled out. So there's some really nice elements here like these charts resized whenever the window is resized. That is something you get for free with that used chart dimensions hook.

[01:52 - 04:26] And if you're curious about the code for these other charts, go ahead and look inside this completed folder for histogram, scatter plot, or timeline. So for our timeline, we've added some extra pizzazz here for we added a gradient. So if you go in here, we're creating a gradient ID, using a unique ID. This is another custom hook in that utility utility file here, and basically just increments this ID every time it gets called. And this is important for using and react because you might have multiple timelines on the same page, and you might want different gradients for those two. So you want to make sure that their gradient IDs are unique from each other. And then we're grabbing these colors, we're creating this gradient, we created this gradient element in here that basically maps over each of the colors and creates a stop. So there's some good stuff in here that it's just it's a good example of how to make components that are a little bit generic. So you can use them in multiple places, but also customized to your dashboard, they have your styles in there. And they 're really usable even for people like your coworkers who aren't as familiar with C3 or creating data visualizations, they can still go in there and edit things. So I'd encourage you to poke around. And if you're feeling like you understand what's going on, then maybe try playing around with changing the size of these the circles for the scatter plot, change the color at a color scale, you can try adding different gradients, or I don't know, maybe even going a little crazy and trying out a radar chart and figuring out how the principles we talked about would apply to something like a radar chart. And I think as long as you remember that usually the least hacky way is to use React for rendering everything and then using D3 as a really powerful utility library. That's generally the approach that I like to take and the approach that's worked really well for me in the past.