Building Apps with SwiftUI

Finishing Dashboard Layout

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

In this video segment, we finish the dashboard view and clean the codebase.

Keywords

  • swiftui designs
  • ui elements
  • ux elements
  • xcode 13

About this video

Author(s)
Mehul Mohan
First online
22 August 2019
DOI
https://doi.org/10.1007/978-1-4842-5310-6_8
Online ISBN
978-1-4842-5310-6
Publisher
Apress
Copyright information
© Mehul Mohan 2019

Video Transcript

All right. Let’s just go ahead and in this video implement the graph feature right here as well. So what we have so far is basically this particular view right here, which on clicking would take us to hello.

So let’s just go ahead and create another view right here. And we’re going to call this a graph coin view. So again, it’s going to conform to the view protocol. So we’re going to implement the body.

And in the body, what I’m going to do is I’m going to say that, hey. I want the line shot controller again with some line coordinates. I’m going to pass in the line coordinates as, let’s say in this case, I’m going to pass in, let’s say, some bitcoin values.

That is 5,000, 6,000, 7,000 6,000, 10,000, 11,000, and 9,000. I guess that’s a little bit spiked up. And for inline this is not an inline one so I’m just going to pass in false.

And what I want to do next is obviously give it some padding so that we have some space for labels. And I’m going to apply a navigation bar title as well. And I’m going to see that this is text of title. Finally, we can just pass in the title from the view itself. So actually, this would be some view, not view.

All right. So now if I take this craft coin right here, and instead of the hello pas and the craft coin with the title scoring.name, what you’re going to see is once you build this is now, when we click on that, a graph would open and it would contain the coordinates something like these.

But obviously, what we want is we want to actually take a look. First of all, you can see we get a nice little view right here. But we want to customize the x-axis as well. So how do we do that?

Well, it’s simple, actually, if you think about it. You have already done that in the inline view. So what we’re going to do is just copy this thing right here. Say if it’s not inline, then I just want to say that this is. So let’s say January, February, March, April, May, June, and July. So that makes it 6 plus 1, 7.

And for the content view part, we’re going to see 1, 2, 3, 4, 5, 6, 7. So that’s right. So once we do that and run this one more time, what we’re going to see is now once the app opens, we’re going to click on Bitcoin. We see that we get nice little labeling on the end, plus we can just go ahead and click on any one of those.

But you see an obvious problem right now is that we are getting the same data on every click. So how do we go about that? Well, we can get this data again from the parent view. So I’m going to say let lined coordinates is a CG float array.

And how do we go about that is that I pass in the line coordinates from coin.linecoordinates. And finally for the coin part, what we can do is actually initialize these line coordinates with the value which we have.

So that would be, let’s say, 5,000 6,000, 7,000, 5,000, 4,000, 10,000 and 11,000. And for LPC, now I’m just plugging in random data. Obviously you want to take a look at your official data and do that. But I’m just going to go ahead and plug in random data already.

400. 150. Let’s say this is 300, 250, 500, 111. And TRON could be 1, 2, 3, or actually 0.12, 0.44, 0.21, 0.05. Let’s say 0.11, 0.01, and 0.03.

Similarly, for Ripple, we can have similar distributions. I’m not going to make you look at that again. And for Litecoin, we are going to have a reduced, let’s say 100 times reduced distribution. And that should be OK, I guess.

Finally, we can add this to our coin struct as well. So this is an array of CG float. And that does it. I guess we should be good to go now. So if we go ahead and build this solution, we get a build fail because we are missing an argument. In this case, OK.

Boy. So either you can go ahead and duplicate this, or what you could do is create separate coins out of them. So you can have a variable in bitcoin. You can have a variable in Litecoin. And you can individually add those coins right there. Or just go ahead and paste this for now.

So once we do that and build again, we should get a successful build. And yes, we do. And now if we take a look here in the application, we’re going to see, now if I click on Bitcoin, we get a nice little grab for Litecoin. Well, it was 100 times scale on graph, so it’s similar.

For Ripple, it’s good. For TRON, also, we get a kind of a similar graph because they were the same criterion. We have a different path. So yeah, that’s pretty much how it would look like. And this kind of could donate the value of our own wallet. And this is the current value for the wallet

So that more or less completes our dashboard in a way. So I’ll see you then in the next part.