Section 7 (Lesson 7/8): In this lesson, we’re going to be creating the overview section of the company dashboard. We’ll be learning how to display some basic analytics as well as working with chart elements for the first time.

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

In this lesson, we're going to log back in as Hana, and we're going to create the overview page, where Hana will be able to view some basic analytics about the number of jobs that have recently been applied to. And we will also represent some of that data within a chart element, and that is something new. So let's dive in and see how it's done!

So I'm currently in the demo app. This is what we'll be building. We're going to build it from scratch. We have Total applications, Last 7 days applications, which is an important metric to see how we are doing basically within a seven day timeframe, and then we also have this chart element to be able to represent our month over month data showing how many applications per month were made.

So I'm still logged in as Sam from the previous lesson. I'm going to log out. Okay, we're at the log-in page now and I'm going to log in as Hana. Okay, so that is something we need to fix in terms of where Hana is routed to, which is the scratchpad page. But anyway, from a privacy standpoint, we can see that Hana can see her own data and she can see all the other users' data because of the Applied companies privacy field that we created. If Sam and Raymond had not applied to any Orbit jobs, then Hana would not be able to see their data.

Let's go to the log-in page and just fix this navigation. Log-in page, and when Button Log in is clicked, it currently says log the user in for step 1 and go to page scratchpad for step 2. So this is where we need to route the users through to their respective dashboards. So I'm going to say for this one, the destination page is "company," and the data to send is the Current User's Company. And we're only going to do this when the Current User's User Type is Company.

Okay, let's do the same for candidate and just change the data slightly. Copy, paste. This will now be the candidate page. We can clear the expression, and we're going to change the value "Company" in the Only when condition to "Candidate" on this step 3. Perfect!

Change the end of the URL to company/orbit. And if we click on "Overview," we don't get anything, and that's what we would like to create now. But let's just have a quick look at our candidates. Yeah, and here they are. So here are the candidates, and here are the job applications that have been made. Okay, let's shortlist a few here. Shortlist. One of each. If we click on "Shortlist," working beautifully. Right, let's design this.

I'm going to go across to the company page, to the Design tab, and I'm going to open up my Group Container, and then let's open up Group candidates. Now, we're simply just going to copy and paste Group candidates. We can do that by right-clicking, saying copy, and then clicking back into Group Container and paste. By now, you know all the different ways we could have done this. We could have done this in the Elements Tree, and we could have used this dropdown menu as well.

Okay, so for Group candidates copy (make sure we bring up the copy one), let's change this to "Group overview". Then on the Conditional tab, change the word "candidates" to "overview" as well. This word "Candidates" in the Appearance tab we can change to "Overview". And for the subtitle, "Here is your Workplace overview".

Okay, and we don't actually need this Group down here. I'm going to use my Elements Tree, so I'm going to say Group Table, right-click, and delete. And I'm also going to remove this Group Search by clicking backspace.

I can see we've got some stuff here we don't need. I'm going to pick up Text Overview, drag it outside of this Group (Group UZ). (Your Group might be called Group something else.) Basically, this Group held the text and a button. Don't need it anymore, so I'm going to delete it. That's what we're left with.

Just going to hide the Group candidates above, so it pulls us back into view. Great, now please grab a Group, drop a Group inside. I'm going to call this "Group Total" to represent total number of Applications. Lets change this style to a Card Medium. Let's try 120 px as the min height.

Let's grab some Text and drop it inside. Let's type "Total applications". On the Layout tab, remove the min width and the min height. Copy and paste Text Total applications, and for this, just type a number in the hundreds, "124" is what I'm going to do. I'm going to change it to a Heading 4 and dynamically, we'll come back. Let's just design this first. We'll come back to the dynamic elements.

So Card Medium, I'm actually looking for a border here so I'm going to detach the style, and we already have a Group Border style. Let me just see what that is. It doesn't have any padding. Let's keep as it was. I'm going to now add a border to this, so solid, our border color, 8 px in the roundness will do. Now we can call this Style "Group Border Medium" and create.

So now we need a "Last 7 days" metric. So let's create a new Group and call that "Group 7 days". Copy and paste. And here we'll say "Last 7 days" and in the placeholder text below it, let's just type 24. And all I wanted to do here is demonstrate how to work with dates. We can pull any applications that were created within the last seven days.

Okay, now I want these two to be side by side in a row, so I'm going to hold down shift so I can highlight both of them, right-click, "Group elements in" --> a "Row container". Okay, I'm going to bring up my Property Editor. By the way, in the Elements Tree, if you double-click on the icon, that brings up the Property Editor. If you double-click on the Group itself or the text, you can then change the name. I'm going to change this name to "Group Analytics".

Okay, so gap spacing, let's use column of 20 px. That looks pretty good. Maybe there's too much width here. So on the Group Analytics, I'm just going to set a max width of 768 px. Yeah, that looks a bit better.

Okay, now for our chart element. Actually, let's add a Group first. So add another Group. Let's call this "Group chart". And let's set the min height. This one needs to be a bit taller, so maybe 260 px. Remove the min width. And on the Appearance tab, lets change this to a Group Border Medium.

Now inside this Group chart, we're going to go to Visual Elements and look for the chart element. Okay, and I've not actually installed it yet, so let's go ahead and click "Install More". Type the word "chart", and let's look for just this basic chart by Bubble, which allows us to use line, bar charts, and polar charts. Don't forget to check out the other plugins as well. There's some very sophisticated chart plugins available to us.

Okay, so here is the Line/Bar Chart in the Visual Elements and I'm going to drop that inside. And let's just sort out the layout. So on the Layout tab, remove fixed width, remove min width, and the height - let me just see what this is like in conjunction with the page - that actually looks pretty good. Let's use a 360 px height here. Yeah, I'm happy with that. 360 px fixed height.

Okay, so the Series 1 color, let's use our brand color here. And the Series 1 fill color, I'm not overly keen on, so I'm going to change that to... let's just change this to 0% opacity. I'm also not keen on showing scale. Let's think about this. Maybe we should show some scale. Scale font, let's use brand colors where we can, so that's going to be a charcoal color. Actually, for the "Fill the dataset with a color," we can just uncheck this box. Okay, I like this. So we've got little plot points and we've got a bit of a scale in the background. Maybe we can change it from 10% to 5%. Grid line. Let's change it to 3%.

Okay, so we've got the option to do all these different types of charts, line, bar chart, etc. I use bar chart quite a lot to represent monthly income for my other company called "Buildcamp". But let's just keep it to a line chart for now.

So for the type of data, we're trying to track and plot the amount of Applications that have been made. Yes, you might think to yourself, it's not the most exciting metric, why would we track this? For educational purposes only. I just want to show you how charts work. When we get to the Admin section in next week's section, in section 8, then we will start pulling in more meaningful data. Because as the admin of Workplace, you'll be monetizing this, so we'll be pulling an interesting data into the charts. But let's just make a simple start and see how the data feeds through and see how we can represent data on this chart.

So what's the data source? Bubble is asking. Well, we're going to go just Do a search for Applications and let's get those Applications in. Do a search for Applications. Now the "Value expression" I'm going to come back to because we actually need to configure the database slightly for this. But the "Label expression" is basically a time-based expression. So the value is on the y-axis, up to the left-hand side, and the label is across the bottom. So what we can deduce from this is that we're looking for value over time. So you need those two things to be able to work with charts.

So the label expression is an easy one because that's the Created Date (Current point's Creation Date). Now the value expression is a little bit trickier because basically, Bubble is asking for a value and where charts make the most sense is if you think of revenue. So yesterday, you made $1,000. The day before, you made $500. The day before that, you made $20. Those are single values that It will help create a chart because it's value over time. Now, Applications, we actually don't have a value field, so we're going to just create one. We're going to create a number field that will be 1, represent 1, and then at least we can sum up how many applications were made on each day by summing up the value fields for each respective Application that's made.

So let's go back to the database, head over to Data types, and on the Application, there is no number field here, no value, but we do have time. Time is Created Date. In this instance, I'm using a workaround. I'm going to call this new field "Unit," and this is going to be a number field, and then create.

Okay, then in App data, I just want you to go through each of these Applications and just type "1" into the Unit field. And that just gives us a Unit to sum up and display on the chart.

Now, obviously, we need this in our workflow as well, so if we head back to the job page under step 1 when we create a new application, we're going to set another field that is going to be called "Unit," and we simply just put the number "1" in there as the value.

All right, again, this is just a bit of a workaround because I want to know how many Applications have been made, but I don't have a number field attached to an Application or I don't have a number field in an Application data type so we've just gone ahead and done that. Obviously, if this was a list of transactions, those transactions, financial transactions, those would have a cost, maybe VAT, and you can start plotting charts around those numbers.

Okay, let's head back to our company page and go find our Group overview. Open that up. What are these three issues here that are bugging me? Group No Data. Okay, just click on, you will have issues the same as me, so if you click on the first one, I just want you to remove this condition. And on the Line/Bar chart, we're going to get to that in a second.

Okay, so we've done the Label expression that is time, that's Current point's Creation Date. Now we can fill out the Value expression so we can say Current point's Unit. Okay, now, I want you to do the following. So this is a little bit hidden, but we need to actually click on the "more" option in the data source field after the search for Applications. I want you to scroll down to ":group by..." because we need to group the number of Applications per month (or per day or per week, whatever we decide). Scroll down to ":group by" and now we're going to create a new Grouping.

That Grouping is going to be Grouped around Creation Date. Type of grouping is going to be per day. I'm going to set the interval of days to 1 and the start day is going to be the date the first Application was made of the company Orbit. So we need to do a search for Applications where the Company = Current page's Company. So that has to be a match. Okay, now I'm going to click on close and then I'm going to say first item. So go back in time, first item's Creation Date. So that is when we should start searching for applications to plot on this chart. Go back, look for the first Application where Orbit equals the Company. That's when we start, it's the value for the Starting date in the grouping.

Okay, and now the aggregation is, okay, so what are we summing up per day? And that's why I created, we're going to say sum, and we're going to use the Unit here. That's why we created the Unit field, because we have no other options. If we didn't create the Unit field, there would be nothing to sum up. So 1 Application represents 1 Unit.

Okay, don't worry if this is a little bit complicated. Charts do take a bit of time to sink in. We are going to be using better data to plot charts in section 8 for the admin. So this is the starter, but the main course comes in section 8. Close it when you're done.

Now we just need to adapt the value and label expression because now it's a Current point's sum of Units. Okay, so it's a list of units that we're summing up. So on April 7th, we might have had seven applications and that will pull through. And also the label expression now needs to be back to the Current point's Creation Date. Okay, so once we use a :group by operator, we have to reconnect these two fields. Actually, I'm just going to change the Series 1 color here to black, I don't think we need our brand blue and this is a company so I want to keep it neutral.

Okay, and the last two things we're going to do here is let's make this dynamic. An actual fact, if we click back on the Line/Bar chart A and click in :group by, we can actually... I want to copy what we've done here. Let's copy this expression. Okay, then let's go to the Text 124. Let's insert dynamic data, paste the expression, and just remove from :first item and then click on the "More", and now we just want the count. So search for the number of Applications that have ever been made for the company Orbit. That's how that reads. I'm going to put the canvas placeholder back inside the canvas placeholder box just for design purposes.

Let's do the same for the Last 7 Days. Now we can copy this. This is going to be similar, but one significant difference in that I'm going to paste this in and then open up the constraints. Now, we have to match the Company with the Current page's Company, but also the Creation Date has to be within the last seven days. So let's click on Created Date in the list for the constraints. Now we're getting these options here, and I want you to say the Creation Date is larger than or equal to, and now we need a reference point for time. And whenever you need a reference point for time, when you're trying to calculate dates or last Monday or seven days ago, you always start with "Current date/time," and then you look at how we can either add or subtract from the Current date/time to achieve the result we're looking for.

I'm going to type in "date" that's going to bring up the "Current date/time". Now, I'll click on the "More" option. And then I'm going to say "+ days:". But in actual fact, we're going to subtract seven days, but we need this option down here, this operator "+ days". And then I'm going to type with my keyboard, I'm going to type "-7". Then I hit return. Okay, let's look at this again. So the Created Date of this Application needs to be greater than or equal to the Current date/time minus seven days. So the current date and time minus seven days for me is currently the 16th of April 2024. This expression, that's the current date and time, if I minus seven days from today, that takes me back to the 9th of April, and then this part of the constraint basically says the Created Date needs to be greater than or equal to seven days ago.

Okay, and you'll be comfortable with writing these expressions, but we can get very, very granular. We can do down to the seconds, minutes, hours, months, one year ago, all sorts of things here. We can change the date to the first, to number one, which means the first of this month. Change month to second month of the year if we put a two here. Start at any year you like. We can extract a part of a date such as the month or the day, all sorts of things we can do. Very powerful. And I'm going to type in the canvas placeholder "24".

Okay, let's preview the page. Okay, so total Applications was 5. Within the last seven days, 4 have been made. It basically shows you the timeline for recording this course. I've been doing one section a week. Those earlier applications were made seven days outside of the seven-day bracket because these four came from the four applications we created today with Sam and Raymond.

I have to go back to candidates. One, two, three, four, five, and we've got our five results here. This one here by Peter Hudson was created on April 1st. It's now Tuesday the 16th of April for me. One, two, three, four, created today. So that data is correct.

Okay, so this doesn't obviously render very well, but don't worry about that. We will be looking at chart data, as I said, in the next section. One more thing I want to do is just I'm going to format this date down here. I don't like that we've got the time here.

So under label expression, I'm going to say Current point's Creation Date, I'm going to click on the date section of this expression, click on "More", then go to :formatted. Now I'm just going to say - what we'll do is actually create our own custom one. And the one I'm after is "dd" - and as I'm doing this, you can see that we've now got 16 down here. If I had to put another "d" for another day, you can see it's changed to abbreviated Tuesday. Another "d" gets me "Tuesday". So I'm going to change this back to 2ds, which gives me the number, then space, then month, month, month (mmm). So now I've got 16th of Apr. I think we've got space for the full name of the month, so 4ms gives me, yeah, the full 16th of April.

Okay, just one more thing I'd like to look at. So on the first of April, I noticed the chart was set to 0 so the very first one I created in the database doesn't have a Unit. So I'm just going to add one to the Unit. I'm just going to make sure that... yeah, so do the same, just make sure you have at least a value of 1 in the Unit field for all of the Applications. Now, there it is there. Now it showed up in the chart. Okay, data doesn't lie in the database. Database is the single source of truth here, especially when working with charts.

All right, folks, I think I'm happy with the overview. And yeah, time to take a break, and I'll see you in the next lesson where we are going to start finishing off this section. I'll see you then.