Hello, Firstly can I say you've done a great job with the dashboard. Easy to install, understand and create new tiles. This isn't really an issue but some help please as the instructions are little unclear.

I am however currently struggling with how I would update the css that is within the Spatie vendor package. I am wanting to add another font size to the css.
eg.
fontSize: {
'xxs': '.65rem',
'xs': '.75rem',
'sm': '.875rem',
'tiny': '.875rem',
'base': '1rem',
'lg': '1.125rem',

I thought i could add it to the Spatie tailwind.config.js as i'd like it across the whole of the dashboard. I then can't work out how to update the dashboard.min.css file which is produced. Apolgoie if this is an easy answer but i would appreicate some direction.

I'm also unsure as to how i would add extra css using Dashboard::stylesheet($urlToStyleSheet); where do I put this line as in the documentation it says Spatie\Dashboard\Facades\Dashboard but i have tried that and nothing is happening?

Really appreciate your help.

<x-dashboard> <livewire:time-weather-tile position="a1" /> </x-dashboard>

is not rendering anything.. i have followed the doc. there is a data in my database of weather component but no on dashboard.

Please help!

I am not sure where to start looking hence posting here, I have copied the sample Laravel charts dashboard tile as a test, the example below

<x-dashboard> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExamplePieChart::class}}" position="a1:a2" height="140%"/> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleDoughnutChart::class}}" position="b1:b2" height="140%"/> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExamplePieChart::class}}" position="c1:c2" height="140%" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleDoughnutChart::class}}" position="d1:d2" height="140%" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleBarChart::class}}" position="a3:b4" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleLineChart::class}}" position="c3:d4" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleLineChart::class}}" position="a5:b6" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleBarChart::class}}" position="c5:d6" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleBarChart::class}}" position="a7:b8" /> <livewire:chart-tile chartFactory="{{\Fidum\ChartTile\Examples\ExampleLineChart::class}}" position="c7:d8" /> </x-dashboard>

renders as the image below

I see in the generated HTML

<canvas id="chart_Pcvl8uG4f9oKFP5iVlfS" height="1672" style="display: block; height: 1254px; width: 2688px;" width="3584" class="chartjs-render-monitor"></canvas> which I suspect is the problem or is it

The full HTML for the first element is

<div class="absolute inset-0 overflow-hidden p-4" style="mask-image: linear-gradient(black, black calc(100% - 1rem), transparent);"><div class="grid grid-rows-auto-1 gap-3 h-full"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div><canvas id="chart_Pcvl8uG4f9oKFP5iVlfS" height="1672" style="display: block; height: 1254px; width: 2688px;" width="3584" class="chartjs-render-monitor"></canvas> <div id="chart_Pcvl8uG4f9oKFP5iVlfS_loader" style="display: none; justify-content: center; opacity: 1; align-items: center;"><svg width="50" height="50" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="#22292F" stop-opacity="0" offset="0%"></stop> <stop stop-color="#22292F" stop-opacity=".631" offset="63.146%"></stop> <stop stop-color="#22292F" offset="100%"></stop></linearGradient></defs> <g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"></animateTransform></path> <circle fill="#22292F" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"></animateTransform></circle></g></g></svg></div></div> <div wire:id="alPldAc999aJKBEISJS7" wire:poll.3600s="" class="hidden"></div></div>

I suspect that it is the template styling but I have no idea what element styling would cause this

I made it locally, this worked perfectly. When I deployed my application with the dashboard to production I got this error.

syntax error, unexpected 'array' (T_ARRAY), expecting function (T_FUNCTION) or const (T_CONST)

I have followed the installation guide but I found this error
ErrorException Return value of Spatie\Dashboard\Dashboard::getTheme() must be of the type string, null returned (View: E:\solaarslide\resources\views\dashboard\index.blade.php)

Here's my controller

`public function index($folderName, $fileName, $id=false)
{
$id_user = session('user')['id'];
$list_panel = Panel::where('id_user', $id_user)->get();
$panel = null;
$user = null;
$energy = null;
$user_widget = [];

    if($id) {
        $panel = Panel::where(['id' => $id, 'id_user' => $id_user])->firstOrFail();
        $user_have_widget = PanelWidget::where('panel_id', $id)->get();
        
        foreach ($user_have_widget as $have) {
            $tmp = Widgets::firstWhere('id', $have['widget_id']);
            array_push($user_widget, [
                'id' => $tmp['id'],
                'order' => $have['order'],
                'content' => $tmp['content'],
                'image' => $tmp['image'],
                'graph_type' => $tmp['graph_type'],
                'graph_source' => $tmp['graph_source'],
                'status' => $tmp['status']
            ]);
        }
        $energy = $this->getData($id_user);
        if($energy===false) {
            return 'FTP connection error';
        }
        
    }
    // Render perticular view file by foldername and filename
    if (view()->exists($folderName . "." . $fileName)) {
        return view($folderName . "." . $fileName, compact('energy', 'panel', 'list_panel', 'user', 'user_widget'));
    }
    return abort(404);
}`

Discovered the information to publish the provider view for time-weather dashboard is referencing Calendar.
file:
docs/adding-tiles/time-weather.md

php artisan vendor:publish --provider="Spatie\CalendarTile\CalendarTileServiceProvider" --tag="dashboard-calendar-tile-views"

and should be:
php artisan vendor:publish --provider="Spatie\TimeWeatherTile\TimeWeatherTileServiceProvider" --tag="dashboard-time-weather-tile-views"

I attempted to make a pull request but submission is restricted

Let's take a look at the weather tile as an example. I have attached all the relevant code here.

If I check the API call with Postman, it works too. I have the feeling that the "fetch commands" are not working.

Can you help?

app/Console/Kernel.php

/**
 * Define the application's command schedule.
 *
 * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
 * @return void
 */
protected function schedule(Schedule $schedule)
{
    // $schedule->command('inspire')->hourly();
    $schedule->command(\spatie\TimeWeatherTile\Commands\FetchOpenWeatherMapDataCommand::class)->everyMinute();
    $schedule->command(\Spatie\TimeWeatherTile\Commands\FetchBuienradarForecastsCommand::class)->everyMinute();

    $schedule->command(\VineVax\UptimeRobotTile\Commands\FetchUptimeRobotDataCommand::class)->everyMinute();

    $schedule->command(\VitorHugoRo\StockTile\Commands\FetchStockDataCommand::class)->everyMinute();
}

config/dashboard.php

'time_weather' => [
'open_weather_map_key' => env('294c5fdb2d2d*********4c8e8eb4395cef'),
'open_weather_map_city' => 'Lindau',
'units' => 'metric', // 'metric' or 'imperial' (metric is default)
'buienradar_latitude' => env('47.55'),
'buienradar_longitude' => env('9.6833'),
],

config/dashboard.php

I'm using the Spatie Laravel Dashboard in Laravel Framework 8.49.0 and in my local machine (MacOS Big Sur / MAMP Pro / PHP 7.4) everything is working fine, but when I deployed to a production machine I get the error "Unable to locate a class or view for component [dashboard]."

I'm following the instructions in https://spatie.be/docs/laravel-dashboard/v2/basic-usage/creating-your-first-dashboard and have several custom made tiles. I believe both local and production systems are case sensitive, so I have no idea what the problem can be.

I'm trying to fix this for days with no success. Can you please help?

While preparing my packagist tile package for Laravel 9 ( https://gitlab.com/tjvb/laravel-dashboard-packagist-tile ) I found out that this package doesn't yet support Laravel 9.

I create this issue to see If I or anyone else has the time to add the support.

I'm building an internal dashboard, and each user is going to be interested in a different set of tiles. Can I load a different dashboard per user? I can load a blade template based on id - either constructed from the database or generated on a database change and stored somewhere in the resources/views file hierarchy. But I can't get livewire to render the result, so all I serve is the bare <x-dashboard>...</x-dashboard> html.

Is there a way to force livewire to render a template after choosing the right template dynamically?

Hey,

The provided CSS comes with a yellow/warning and a red/error color. But there should also be a green/success one.
For example a monitoring tile could use this to indicate that everything is okay.

Could you add one to this package? This will prevent developers from choosing their own green color and have to support light and dark mode.

Is there a package that can allow organising multiple tabs dashboard?

for non-dev screens a 4x3 grid seems to be the perfect layout, but I would need to organise dashboard on different topics

Any plans to support Laravel OpenID Connect on top of OAuth ?

If using in your custom tiles values like

class="bg-[#C9B037]"

it doesn't run. Why? Any Ideas?

Assets are managed in two ways:

• By appending (inline) scripts and stylesheets with Dashboard::script(), Dashboard::inlineScript(), Dashboard::stylesheet(), and Dashboard::inlineStylesheet().
• By @pushing assets to the asset stack in Blade

It's not a not a major issue but makes it more difficult to find out where an asset came from in the rendered dashboard.blade.php view.

More importantly, there's also no way to override assets that are registered by default. There should be a way to replace the main stylesheet instead of appending more styles (see #71).

Ideally there's one way to manage the dashboard's assets, with support to modify them (at least the default ones).

Hi! Awesome project!

Any ideas how to create dynamic tiles? For example: to show 5 minutes tile X and then 5 minutes tile Y.

Now I did this, in the welcome.blade.php:

<x-dashboard>
    <livewire:logo-tile position="a1:d1"/>

    @if($showWeather)
        <livewire:weather-tile position="e1:h5"/>
    @else
        <livewire:chart-tile chartClass="{{\App\Charts\CustomersChart::class}}" position="e1:h5"/>
    @endif

    @if($customTrigger)
        <livewire:phone-tile position="a2:d3"/> 
    @else
        <livewire:mail-tile position="a2:d3"/>
    @endif

</x-dashboard>
<script>
    window.setTimeout(function () {
        window.location.reload();
    }, 5 * 60 * 1000); // Refresh page every 5 minutes
</script>

In the routes:

<?php
Route::get('/', function () {
    return view('welcome', ['showWeather' => betweenTime('12:20', '13:05'), 'customTrigger' => getCustomTrigger());
})->middleware('access.token');

But I think there should be a nicer way, to do this without a page refresh? Any suggestions? I created a custom livewire component with 2 tiles in it, but that won't work when refresh.

Hello. I'm using this package as a way of me learning Livewire a bit more. I'm trying to recreate a dashboard we currently use, which uses jQuery Gridster.

The question/issue I have: does your package allow me to specific a tile size? (Can it span across more than one default size)?

For example, I need one column of tiles, then a larger area for a larger table, then two further columns of tile.

In gridster you can do this by defining a starting position for both x and y then a size definition for both x and y.

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" id="timecontainer">My tile view in here</li>

Is there a way to do that with your package?

I got this warning when I installed laravel-dashboard

Package phpunit/php-token-stream is abandoned, you should avoid using it. No replacement was suggested.

Hello,

I have a problem installing this dashboard

Here my CLI output:

➜ ddev composer create-project laravel/laravel 
Creating a "laravel/laravel" project at "./"
Info from https://repo.packagist.org: #StandWithUkraine
Installing laravel/laravel (v8.6.12)
  - Downloading laravel/laravel (v8.6.12)
  - Installing laravel/laravel (v8.6.12): Extracting archive
...
➜ ddev composer require spatie/laravel-dashboard
Using version ^2.1 for spatie/laravel-dashboard
./composer.json has been updated
...
➜  ddev artisan vendor:publish --provider="Spatie\Dashboard\DashboardServiceProvider" --tag="dashboard-migrations" 
Project-level command 'mysql' is overriding the global 'mysql' command
Project-level command 'launch' is overriding the global 'launch' command
Project-level command 'xdebug' is overriding the global 'xdebug' command
No publishable resources for tag [dashboard-migrations].
Publishing complete.
➜ Update .env file DB parameters
➜ ddev artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (22.51ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (6.87ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (6.81ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (9.80ms)
➜ ddev artisan vendor:publish --provider="Spatie\Dashboard\DashboardServiceProvider" --tag="dashboard-config"
Project-level command 'mysql' is overriding the global 'mysql' command
Project-level command 'launch' is overriding the global 'launch' command
Project-level command 'xdebug' is overriding the global 'xdebug' command
No publishable resources for tag [dashboard-config].
Publishing complete.

As you can see the Tags "dashboard-migrations" and "dashboard-config" were not found. I have searched full project for dashboard-config and it could not be found.

Stefan

How can I use this inside a laravel spark?
Once a client logs in I wan show them a dashboard.
but the fact that its a spark app seams to break it, vuejs wont render the javascript inside the x-dashboard tag
Is there a work arround?

I've installed the dashboard and an dummy-tile.
If i test it via "php artisan serve" under http://localhost:8000 all looks good.
The POST-Request to http://localhost:8000/livewire/message/dashboard-update-mode would triggered every 60s.

If i used my URL http://dashtest.local lifewire.js would not be found.

If i run "php artisan livewire:publish --assets" to publish the assets, livewire.js would be found but the POST Request for dashboard-update-mode doesn't work and returns an 404 Error.

Any ideas?

Regards Marco

When I try to install in Laravel 8 I get this error:

`composer require spatie/laravel-dashboard
Using version ^2.0 for spatie/laravel-dashboard
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Generating optimized autoload files

Illuminate\Foundation\ComposerScripts::postAutoloadDump
@php artisan package:discover --ansi

TypeError

Argument 1 passed to Spatie\Dashboard\Dashboard::script() must be of the type string, null given, called in /<full_path>/vendor/spatie/laravel-dashboard/src/DashboardServiceProvider.php on line 18

at vendor/spatie/laravel-dashboard/src/Dashboard.php:20
16▕ public array $stylesheets = [];
17▕
18▕ public array $inlineStylesheets = [];
19▕
➜ 20▕ public function script(string $url): self
21▕ {
22▕ $this->scripts[] = $url;
23▕
24▕ return $this;

  +9 vendor frames

10 [internal]:0
Illuminate\Foundation\Application::Illuminate\Foundation{closure}(Object(Spatie\Dashboard\DashboardServiceProvider))

  +5 vendor frames

16 artisan:37
Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1

Installation failed, reverting ./composer.json to its original content.`

How to use JS button click to dynamic position for tiles

Can I use postgres DB with this?

spatie/laravel-dashboard 2.1.4 requires livewire/livewire ^2.0 -> found livewire/livewire[v2.0.0, ..., v2.12.6] but it conflicts with your root composer.json require (^3.0)``

Making this package Livewire 3 compatible would make all Spatie fans very happy!

The changelog on the docs site (url: https://spatie.be/docs/laravel-dashboard/v2/changelog ) points to: https://github.com/spatie/laravel-dashboard/blob/master/docs/changelog.md that is a file without the information about the changes.
The changelog in https://github.com/spatie/laravel-dashboard/blob/master/CHANGELOG.md has the changes.

Is it wanted to have the documentation linked to the changelog in the root of the project or is it wanted to have it in the docs directory?

I'm willing to create a PR but not sure how it is wanted.

I seem to have everything else working, but when I update the config/dashboard file, I am not seeing any changes. I have done a config clear, and looked through the documentation. Is there something else that I need to do?

Specifically, I am trying to set some of the example tiles as well as adding a css file to the dashboard.