How to Create a Dashboard Using Stats, Widgets & Tables in FilamentPHP - FilamentPHP for Beginners

what's up developer says Dory here and welcome back to a new video where we're going to continue on with the 11th episode of our filament PHP video series where we're going to create a dashboard and filament PHP using widgets and charts a dashboard is quite important in admin panels because it provides a quick and easy way to view relevant information and metrics in one place they basically help to identify Trends and patterns in data think about the average order price the total number of users and way more all of these things are mostly visually shown through widgets and charts any filament PHP project ships with a dashboard page where you will see two boxes these boxes are called widgets and by default filament PHP allows you to Define four types of widgets it has a stats overview which is a widget that displays any data of the numbers as stats in a row a chart widget which displays numeric data in a visual chart a table widget which displays a table on your dashboard as you can create custom widgets which we won't cover in this episode quick note widgets can also be placed right above your resource table we won't be covering that in this episode but it's good for you to know let's navigate to the CLI because we're going to create our first widget with the help of artisan which will be a stats widget so let's say PHP artisan make column filament Dash widget we're gonna name it stats overview and we're going to add a dash dash stats option of overview it's asking us whether we want to add it inside a resource for now let's just hit enter Because this is an optional option and it will also prompt you with a question whether you want to create your widget in the dashboard panel or alongside other Livewire components we're going to choose the dashboard panel now this command has created a new directory and class for us so let's navigate back to phpstorm where you will see that a new widgets directory has been created inside the filament directory where right here you will find a stats overview class Miami actually close off all the tabs that I have open all right now right inside of the class you will find a method named get stats which returns an array of stats to be displayed in a stats overview widget now we can pass in a key value pair right here of strings since we need to use the stat component so let's use our stat component and use the make method now it accepts a label and a value the label will basically be the title shown to you so let's say total customers and for the value we're simply going to pass in 10k once we navigate to the browser and refresh our dashboard endpoint you will see that we have created the simplest widgets which shows the total users which is 10K now we could navigate back and replace our second argument so the value with an eloquent query so let's say customer model colon colon counts once we navigate back to Google Chrome and refresh it you'll see that the total customers is equal to one and if we click on customers you will see that that is correct there are some additional information that you could pass into your stat components now let's see which ones you have we're going to chain the first method which is the description method so let's say that the description is increase and customers we can add a description icon which will basically be a hero icon so let's say hero icon Dash M Dash Arrow Dash trending Dash up we can add a color of the hero icon so let's say color is success and we can pass in the chart methods the chart method on a stat component allows you to display a chart along with the numeric value of the stat the method takes an array of numeric values which will be used to populate the charts so let's pass in a couple random numbers so give me a moment all right once we navigate back to the browser and refresh it you will see that we have improved our stat components quite well now by default the stat will refresh every 5 seconds so if you quickly create a user and navigate to the browser within five seconds the counter will still be one now I personally think that with any use applications where there are quite some queries this could be customized and refreshed to let's say every 15 seconds to update that we need to overwrite a property so let's navigate back to phpstorm now right above our getstat method we're going to define a protected static optional string named polling interfall where we're going to set the value equal to 15 s for seconds you could even disable it completely where you need to set the value equal to null but that's completely up to you and there's one more property that I want to cover which is the protected static bull named is lazy where I want to set the value equal to true by default widgets are being lazy loaded which you can disable with this property now you could even Place multiple widgets next to each other where you simply need to create a new stat right inside of the array so let's name this one total products where the value will be product model column column count we're gonna change the description method to it which shows total products in app we have the description icon which will be hero icon Dash M Dash Arrow Dash trending Dash Down the color will be something else this time so let's say Danger and we have the charts which I will actually copy from above now let's actually create one more before we navigate to the browser and refresh it or let's say stat make pending orders where the query will be order model where the status is equal to our order status enum pending and we're going to change the Value method to it and let's actually copy paste the description description icon color and chart well I actually forgot to change the count method on our query navigate back to Google Chrome refresh it where you will see three charts the first one is the total customers we have the total products and we have depending orders now let's move on to the second widget that we can create which is a chart and once again a chart is a widget that displays numeric data in a visual chart this allows you to identify Trends and patterns in data making it a useful tool for analyzing information so let's navigate back to iterm now let's create a new widget by saying PHP artisan make me a new filament Dash widget named products chart and we're going to add a dash dash chart to it right here you will see that we have the option to create it inside a resource or let's just hit enter we're gonna place it inside the dashboard panel and right here you will see that we have the option to choose between five different types of shards for this example let's choose a line chart and you can modify this later on so don't worry about it let's navigate back to phpstorm let's open our newly created chart which is the products chart and right here you will see one additional method which is the get type method where you can change the type of the charts for now we're simply going to stick to a line chart so let's set it up inside the get data methods we're gonna Define a data sets which is equal to another array where we're going to pass in an array with data with key value pairs so let's say label is equal to blog posts created we have the data which is once again an array with random integers so let's add a couple values right here and then right outside of our data set we're going to add the labels which is also equal to an array and the values right here are strings that represents the label for the x-axis of the charts which in this case are the months of the year so let's say January February March April May and let's actually add one more let's say June if we navigate to the browser and refresh it you will see that we have created a pretty cool chart isn't it the design has been messed up but we will cover that in a bit because I first want to show the data from the database so let's navigate to phpstorm now let's actually create a new method right below the gas type method let's say private function get products per month well let's type into it to an array and I'm going to do this relatively quickly because this is just larva code and it takes quite some time to cover all the steps that we're going to perform so we're first going to get the current time by defining a new variable name now and setting it equal to carbon colon colon now we're going to define a new array or let's say products per month which is equal to an empty array then we're going to define a new variable named months which is equal to the collect method it ranges from 1 to 12 and we're gonna map it we need to pass in a callback function so that's a function parentheses but we're going to use our variable now and our variable products per month we do need to pass in a variable inside a function which will be one single month variables that we're going to use we're going to add curly braces and hit enter so we're first going to get the count so let's say dollar sign counts is equal to product the product model where months is created underscore at and we're then going to use carbon again we're going to parse the now month where we're going to pass in the months that we have defined per loop we're then going to format it where the format will be years Dash M and then we're going to chain the count methods to it then every time it Loops we need to add the month into the products per month I made a typo right here all right this looks better so what we can do is basically say well products per month brackets is equal to the count and we're going to return now month we're going to once again pass in our variable months and chain the format method to it where the format will be capital M for the month now on our months variable we're gonna chain the two array method to it because we're simply going to use the array inside our get data methods so outside of it we're going to return an array where we have two key value pairs the first key is products per month where the value is products per month and we have the months itself which will be variable months then we need to update the get data method where we're first going to Define a variable named data which we're going to set equal to this get products per month we're going to replace the actual data right here the array with our variable data brackets products per month all right and then we're going to replace the labels with data brackets months once you navigate to the browser and refresh it you'll see that we have made a typo right here so let's scroll down for a moment because the where months needs to be a month with th let's navigate back to Google Chrome where you will see that it has defined a pretty nice chart well we actually created all the products in August and September but that doesn't matter just like the sword of the navigation items we have a source property that we could overwrite on our widgets so let's navigate back now let's open our stats overview scroll up now let's define a new property let's say Protect it static optional end named sort which is equal to two now let's copy it because we need to place it inside our products chart as well right above our gate data method we're gonna paste it but the integer value will be equal to three if we navigate back to Google Chrome and refresh it you'll see that the sort of two has been placed right above the sort of tree now I want to create one more chart where I want to show the product status and a bar chart which is also pretty cool I think so let's navigate back to item now let's perform a clear right here and let's say PHP artisan make me a new filament Dash widget and let's name it orders chart dash dash charts I made a typo because it is chart with an H all right we're not going to create it inside a resource it is for the dashboard panel and this one will be a bar chart let's navigate back to Google Chrome or let's open our orders chart let's paste in the sort that we have which will be the same sort as our product sort because we want to place them next to each other right so let's navigate back and say tree where if I refresh it you'll see that they have in place right next to each other let's navigate back because we need to focus on the get data methods where I want to show the order statuses in a bar chart format so let's define a new variable named data let's set it equal to the order model we're going to select the status and we're going to perform a DB query which is a raw one where we want to get the count as count and then we're going to chain the group buy method to it because we're going to group it by the status and we're going to pluck the count and the status and we're going to chain the two array methods to it all right inside our return statement we're once again going to define a data sets which is equal to an array where we're going to pass in an array with a label of orders we have data which will come from array underscore values our variable data that we have defined right here and then we're gonna pass in the labels on the bar charts which will come from our order status you know cases pretty cool let's navigate back refresh it well right here you will see that we have two pending orders we've got one more left which is a table widget now let's say that we want to show the latest orders in a table format right below our charts let's navigate back to iterm let's perform a clear let's say PHP artisan make me a new filament Dash widget named latest orders and I'm going to add a dashed Ash table to it we're not going to create a page inside a resource page it is for the dashboard panel and as you can see it has been created successfully let's navigate back to phpstorm open our latest order we're first going to define the sort so let's say Protect it static and dollar sign sort is for and right here you will find the same table method as we have seen before within our resources now before we Define The Columns or let's define the query first which will set the query that will be used to populate a table which will come from our order resource and we're going to use the get eloquent query method right here then we're going to chain the default pagination page options method which will set the number of items that will be displayed per page in our case we're simply going to pass in five then we're gonna change the default sort methods to it which sets the default sorting of the table we're gonna say look at the created underscore add column and sort it in a descending order and then we're going to focus on the columns methods which will take an array of column objects and I don't want to Define it myself so I'm going to open the order resource scroll down to the table methods and copy the text columns that we have navigate to my latest orders paste it right here navigate to the browser or refresh it scroll down where you will see that the styling got a little bit messed up but we can't fix this by navigating back to our phpstorm inside our latest order to find another property so let's say Protect it end pipe string pipe array named column span where the value will be set equal to 4. if we navigate back refresh it scroll to the bottom you will indeed see that it has been full spanned and the latest orders are visible for now I want to wrap up this video where we have created our dashboard using widgets charts and tables this was it for today's video if you enjoy the content and you want to see more please give this video a thumbs up and if you're new to this channel don't forget to hit the Subscribe button

Channel: Code With Dary

Views: 12,281

Keywords: how to add admin panel in laravel, 10 create custom widgets - laravel filament tutorial, a winning combination for dynamic web apps in laravel filament, laravel filament packages dashboard, filament admin panel, introduction to laravel filament, how to setup filament laravel, how to build admin panels in laravel, filament for beginners, learn filament step by step, resources in laravel, how to setup a dashboard in filamentphp, widgets in filamentphp, charts in filamentphp

Id: lBOQnPUWyZ0

Length: 19min 6sec (1146 seconds)

Published: Wed Sep 06 2023