14 - Dashboard Widgets: Charts and Tables

In this lesson, let's change our dashboard to something more interesting than static placeholders.

Typically, we have charts and numbers on the dashboard of such projects. So, we can calculate something like these:

Tasks completed vs in progress
Tasks due today
Tasks created this week, grouped by day

Let's show them all on the dashboard.

Change Factory and Re-Seed Data

To have some data to show, we need to randomize a few things and seed more tasks.

database/factories/TaskFactory.php:

return [
    'name' => fake()->name(),
    'is_completed' => fake()->boolean(),
    'due_date' => fake()->dateTimeBetween('now', '+1 month'), 
    'created_at' => fake()->dateTimeBetween(now()->startOfWeek(), now()->endOfWeek()), 
];

database/seeders/DatabaseSeeder.php:

Task::factory()->count(10)->create(); 
Task::factory()->count(100)->create();

And now, let's freshen and re-seed the whole database (yes, we lose the data, but this is a demo project, so I'm okay with that).

php artisan migrate:fresh --seed

Great, we have 100 random tasks in the database:

Dashboard Controller with Data

By default, we load the dashboard directly from the Routes file.

routes/web.php:

Route::get('dashboard', function () {
    return Inertia::render('dashboard');
})->name('dashboard');

Now, let's add more logic. So, we need a Controller...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (36 h 00 min)

You also get:

60 courses

Premium tutorials

Access to repositories

Private Discord

Get Premium for $129/year or $29/month

Already a member? Login here

Joe 1 year ago

The code works in that it runs, but it doesn't pass Typescript checking meaning that data will be higlighted as a Typescript error.

To correct this, define 2 new itefaces at the top under your imports:

interface ChartDataset {
    label: string;
    backgroundColor: string | string[];
    data: number[];
}
 
interface TaskChartData {
    labels: string[];
    datasets: ChartDataset[];
}

Then apply the correct types to completedVsPendingTaskChart and tasksCreatedByDay:

completedVsPendingTaskChart: TaskChartData;
tasksCreatedByDay: TaskChartData;

👍 3

Richard A. Hoyle 1 year ago

Tried to delete a task and got the following Error: SQLSTATE[23000]: Integrity constraint violation: 19 FOREIGN KEY constraint failed (Connection: sqlite, SQL: delete from "tasks" where "id" = 1)

Not sure where to go to fix this; can you help?

P.S. The Category Delete works fine no Errors.

Richard A. Hoyle 1 year ago

I thank I know what Is happening; there is a Category assigned to it. We need to do a unassign of the category first right?

Luis Antonio Parrado 1 year ago

I've just finished this wonderful course, thanks to the LaravelDaily team. I've never worked with React before (only Vue), but I see quite a few similarities. The same as until now I start using Typescript (I still need to study several concepts, of course).

I found an issue that can be easily fixed in the bar chart, only the first day of the week is being graphed and this is because the data is wrapped in an additional array in DashboardController.php, getTasksCreatedByDay() method.

'datasets' => [
    [
        'label' => 'Tasks',
        'backgroundColor' => '#3490dc',
        'data' => [ // remove open bracket
            collect(range(0, 6))
                ->map(function ($day) {
                    $date = now()->startOfWeek()->addDays($day);
 
                    return Task::query()->whereDate('created_at', $date)->count();
                })
                ->toArray(),
        ], // remove close bracket
    ],
],

It should be

'datasets' => [
    [
        'label' => 'Tasks',
        'backgroundColor' => '#3490dc',
        'data' => collect(range(0, 6))
            ->map(function ($day) {
                $date = now()->startOfWeek()->addDays($day);
 
                return Task::query()->whereDate('due_date', $date)->count();
            })
            ->toArray(),
    ],
],

👍 1

Modestas 1 year ago

Hi, thank you for the kind words and for telling us about the issue! I have updated the lesson to fix this issue :)

Osama Abbas 9 months ago

Thank you for this wonderful course.

Dashboard Widgets: Charts and Tables

Change Factory and Re-Seed Data

Dashboard Controller with Data

The Full Lesson is Only for Premium Members

We'd Love Your Feedback

Thank You!