Charting Sentiment Values

[00:00:00]
>> Now that we have that, if we go back to our page, we can finally write our query. So we wanna find where userId is user.id, like that. And now we have our analysis. But I just wanna select the sentiment score and nothing else, I don't really care about anything else.

[00:00:29]
And then I'll return the analyses, then I'll also return the, I'll return the average analysis score. So average or guess some would be analysis.reduce. You know, what is this all And then like current, so just be all plus current, so that'll add them all up. And cons would be average sum divided by analysis.length.

[00:01:20]
And I'll just make sure that it is, we'll be optimist and round up. Cool and our average Operator plus replied to types number and yeah, I guess I need to do that current dot since my score. There we go. All right, so we got that. Let's see what we broke here.

[00:02:03]
Or average, and then analyses. Okay, data, cool. And I'll just put the average in here. Let's see what we get and I'll just log the analysis. All right. Man, I haven't used reduce in a minute. Felt weird. Okay, and then we go to History, looks like it's working.

[00:02:45]
It has success 2 and then on the server side, we can see the analysis. So wow, he was really down bad on that first one and then this was really good. Really happy and somewhere just slightly above neutral. I feel like everyone needs to shoot for five in life.

[00:03:02]
Maybe shoot for five. Like this is, you're asking to let down at eight and at seven, you probably need to check in somewhere, but at five, that's healthy. So shoot for five, put that up on your wall in your office, shoot for five. All right, so we got that.

[00:03:23]
Now let's, let's make some charts. Let's make something, make something out of this. So we're gonna install a package called rechart. So npm install recharts or recharts. It's I think it's plural watch it be rechart and someone else made something called recharts that's not this, and it's going to mess me up, right?

[00:03:46]
Isn't it always like that? Let's just go verify. It was definitely called, yeah, it's plural, okay. You just never know, never know with people these days, man. Okay, so we're gonna make a chart. But a chart is mostly all client-side stuff, so we need a client component. So let's do that.

[00:04:17]
I'm just gonna go to our component folder where we put pretty much all of our client components but components can be server components too. It's not only pages. Yes, you want me to say that? Okay, yeah.
>> A question for you.
>> Okay.
>> Is it going to be a client component because of interactivity, use of hooks, or is it a client component because it's pulling in a third party library into the stage?

[00:04:37]
>> That's a great question. Yeah, both. So it's a client component because it's pulling in a third party library that I know is using interactivity as far as like hooks and stuff like that. So it just won't work unless you at least put clang component on top of it.

[00:04:54]
Yeah, so great question. So we'll make a history chart. HistoryChart.tsx here, I'm going to say use clients. Cool, HistoryChart, it's gonna take in. Some data that's gonna be the entries or the sentiment scores. I just realized I want to get the date of them too so I can plot them on a date.

[00:05:32]
So we'll go back and change the select from just sentiment score to also get created at as well so I can get that date. Okay, cool so we got that and then basically. This one's kind of cool. It actually is very simple to render this basically all we have to do is just I'm making a line chart.

[00:05:54]
So it's very simple to do it they have a line chart component. You don't need the x axis for it if you don't want but I did, so I can like plot it have updated out here but now I think created out is better because you want to see.

[00:06:04]
How you felt that day regardless if you went back and updated it. If you go back and update a journal entry, you're still updating it based off what you felt that day when you originally made it. So if I made a drone interest today, and then a week later, I went back and updated it.

[00:06:19]
I'm not going to update it, but what I felt today. I'm going to update it, but what like, I have a new thought on what I felt when I wrote this. So, I think I'm gonna change that to create it not updated at but yeah, we're gonna import from recharts a few things.

[00:06:33]
So we need the container line chart line x-axis and then tooltip to make some really cool tooltips there. So we'll do that imports from recharts in the responsive container, we got the line. We got the x--axis, we got the tooltip. What else do we need? Line chart. Now the last one line chart.

[00:07:02]
Cool, we got that. From here, we can just return the responsive design, or the responsive container, like that. We can give it a width of 100%, And a height. I can't remember, I think you got to give this a number Now you can do it, okay? It's the other ones you got your number two.

[00:07:30]
So we got the responsive container here and then from here we want to do line chart, Like so. And a line chart takes a width and a height, which doesn't really matter because it's gonna be responsive but this is mostly like you putting the aspect ratio. So I do like a width of 300, a height of 100 and then this is where you pass in the data.

[00:07:55]
So we'll say data. Data needs to be an array of object which entries is that that will be passing in and then now we just say what properties we want to go on what axes and lines, right? So for instance, this line, the main line, we were going to say the data key for that is gonna be called sentimentScore.

[00:08:15]
So look for an object on this array of data. And for each one of those, this is what's gonna create a lot of the points in a line. So let's do that. Not link but line. We can say data key is sentiment score like that, color. I'm sorry, type that's what I want.

[00:08:44]
Monotone. Also I have an error so the stroke was gonna copy that stroke color. I should just copy all of these. So stroke color you put whatever you want, just like some lavender color that GPT gave me export. And stroke was the thickness of the line and this dot, just a radius of the circle on which the dots are when you hover over them.

[00:09:09]
The bigger the number, the bigger the circle. Active dot as in when you're hovering over it. We want the x-axis and we want that to be that key that I talked about. I'm gonna put created at instead of updated at. X-axis, data key CreatedAt like that, and then the last one is a tooltip that you don't really need, but I think if you hover over a point.

[00:09:34]
It's really nice to see when you made that entry and what your mood was or whatever other information you want to put on that. But by default, the tooltip is gross looking so I couldn't stand it. I know we didn't do a lot of styling in this one, but this was so bad I couldn't take it.

[00:09:53]
So, we're gonna make a custom Tooltip, and the way we could do that is just do content like this and then we can pass in a custom component for CustomTool tips. So we'll make that one up here. I'll just say CustomToolTip. You can put more than one component in the file if you want, although I don't recommend it.

[00:10:13]
I think in this case it's fine seeing how this component's never gonna be used anywhere else other than this chart. But because it's not exported, you probably couldn't test it. But that's fine. This thing takes in a couple things. It takes in payload, I think. Label and something else Active, whether it's active or not there we go yep.

[00:10:42]
So for this one I mean, it's subjective, it's just design. So I'm just gonna return basically kinda what I had before. I'm actually probably just gonna copy most of it. Cuz it's mostly just design, and I'll talk about it. Yeah, so I'm only really showing three things here I am going to be showing words that I put like a little dot in the left, that's the color that since analysis, you get back.

[00:11:17]
I'm gonna put them, dateLabel will configure that. So whatever date this is created, and then I put the mood. So, it looks like I'm getting back everything the analysis, I'll have to go back to our query to make sure we get the analysis and not just a sentiment score, like the whole thing.

[00:11:31]
So we'll do that. And then for the analysis itself, we can just get that from the payload. So I'll just say payload=, I'm sorry, analysis Analysis. There we go. It goes payload, which is an array0. I think the payload from that. So that's the analysis. I'm gonna format the date string because it's just bad if you don't and this one's really easy.

[00:12:10]
You can just do dot to local string. The label itself will be the x-axis label, which in our case will be the CreatedAt. So that'll be the create at time string, make a new date out of it. And then this is just me saying I want to show the week, year, month, day, hour and minute, and it'll format that for me.

[00:12:28]
So we got our date label And I really only want to do this if it's active. So as you're hovering over it, so I'll say if active. Return this otherwise just return no, don't show anything. Cool and now we can just go out here and say CustomToolTip. Like that.

[00:12:58]
Don't worry about this error. All right, have our HistoryChart. All we need to do now is bring that in but before, let's fix this. So before I was only selecting sentiment score, we're actually gonna select everything now because we wanted everything. After looking at what I was doing in HistoryChart, I realized we needed everything.

[00:13:29]
We needed the mood, the color, right? We needed the created app. So we'll just select everything, get rid of that. Select, we have our analysis. Now we can just bring that in. So we'll just say, let's put a div here. This will be like average sentiment. Average like that.

[00:13:55]
I don't like putting white space in here like this, cuz it's not guaranteed. You might have a tool that like clears it. So if you want to maintain white space, I just recommend like putting it in the brackets and doing this, and that way it will maintain white space.

[00:14:13]
So I'll do that and then here's where the chart will go. And that's just gonna take in the data Which is the analysis. All right, let's see what we broke. Okay, so I don't I know why it's not rendering, so I don't think it's rendering because this thing doesn't have a height on it.

[00:14:47]
Because it has a height of like full 100% and right now there's no height so I'll just put First you got to put a height on this one, I believe. So let's say with full height full. Start with that, that doesn't do it and then down here, I could just do the same thing.

[00:15:11]
Let's see what happens. Okay, here we go. So this thing says can't render payloads. Let's go take a look at what payload is. That's what I thought it was, I guess not. I think I know why. It's because it only shows a payload if it's active, so you gotta move that down to active.

[00:15:40]
Okay, and there we go. Okay, so it's backwards cuz, we want to sort this. Yeah, so we wanna say orderBy, CreatedAt, and ascending, or yeah, sending there we go. There we go. So he started off really bad, resigned. That was the mood? [LAUGH] I've never heard someone describe what it was like I'm just resigned just over it.

[00:16:19]
And then Contain and then, calm. You can kind of see how that pots over time, so he added, we go back ass some more. So let's go have some more, let's go ahead and do one here. I will go back to try to achieve like okay, this was cool but what happened this morning when you woke up creates a short entry.

[00:17:01]
I woke up naturally, without the need for my alarm.
>> This is a better character arc than some films I've seen.
>> Sometimes. [LAUGH] I can be like, OK, but what about your friends? What did you do with your friends? And then it gets crazy, I'm telling you.

[00:17:17]
We'll find some stuff out. OK, let's do that. Today's dawn was a comfortable talks like this is so funny, okay. Let's go back hey there we go, so you can see his mood has definitely gone up to renew from resigned to renewed. That's progress that's beautiful I love to see it