DEV Community

Spiggle
Spiggle

Posted on

Stop Hardcoding Analytics: Build Visual Dashboards in Minutes with Laravel & Filament

If you build SaaS platforms, internal tools, or client portals, you’ve probably written this code a dozen times:

  1. A client asks for a quick breakdown of their metrics.
  2. You write three custom aggregation queries (groupBy, count, sum).
  3. You set up a Chart.js, ApexCharts, or custom Blade view.
  4. You spend two hours styling cards, aligning grid columns, and wiring date-range filters.
  5. Two weeks later, the client asks to swap a bar chart for an area trendline and track an entirely different metric.

Hardcoding dashboard widgets directly into your controllers and admin classes works fine for basic stats, but it quickly becomes an ongoing maintenance sink.

What if you could turn the models and data records already in your application into interactive, drag-and-drop dashboards without writing custom view logic each time?

Enter the Visual Dash package for Laravel and Filament.

What is Visual Dash?
Visual Dash is a modular package built for the modern Laravel and Filament ecosystem that bridges the gap between raw database models and end-user analytics.

Instead of writing rigid classes for every single metric, Visual Dash gives you a visual canvas inside your panel where you can:

  • Select an Eloquent model.
  • Pick your metrics, aggregations, and date bounds.
  • Drop charts and stat counters directly onto a responsive layout canvas.
  • Publish a clean, live dashboard view in just a few clicks.

Whether you need internal admin reporting or client-facing metric dashboards, it handles the boilerplate aggregation and layout plumbing so you can focus on building your actual core product.

Core Features at a Glance

1. Canvas-Based Widget Builder
No more hand-tweaking grid column widths or hacking Tailwind classes across multiple widget files. Visual Dash provides an interactive canvas where you can place, arrange, and resize charts, stat counters, and trend summaries visually.

2. Zero-Boilerplate Model Aggregations
Select the Eloquent model you want to query (Order, User, Ticket, Subscription), choose your aggregate function (COUNT, SUM, AVG), define the group-by timeframe (daily, weekly, monthly), and Visual Dash builds the query pipeline under the hood.

3. Native Filament v5 & Laravel 13 Synergy
Built specifically to take advantage of Filament’s robust form and panel architecture, Visual Dash integrates seamlessly into your existing PanelProvider. It honors your current panel theme, dark mode settings, and permission gates without introducing heavy external UI dependencies.

4. Client-Ready & Internal View Sharing
You can embed these dynamic dashboards directly inside your main admin panel or expose them as dedicated reporting views for specific roles, teams, or tenants.

Quick Start: Getting Up and Running

  1. Installation Pull in the package via Composer:
Bash
composer require spiggle/visual-dash
Run the package migrations and publish the assets:
Enter fullscreen mode Exit fullscreen mode
Bash
php artisan visual-dash:install
php artisan migrate
Enter fullscreen mode Exit fullscreen mode
  1. Register the Plugin Add the plugin to your Filament Panel Provider (usually app/Providers/Filament/AdminPanelProvider.php):
PHP
namespace App\Providers\Filament;

use Filament\Panel;
use Filament\PanelProvider;
use Spiggle\VisualDash\VisualDashPlugin;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->plugins([
                VisualDashPlugin::make(),
            ]);
    }
}
Enter fullscreen mode Exit fullscreen mode

3. Create Your First Dashboard

  1. Navigate to your Filament admin panel and click Dashboards → Create New.
  2. Give your dashboard a title (e.g., Revenue & Growth Overview).
  3. Click Add Widget, choose your target model (e.g., App\Models\Order), set your calculation (SUM(total_amount)), and select your visual format (Area Chart, Metric Badge, or Bar Graph).
  4. Drag and resize your widgets on the canvas.
  5. Hit Publish.

Your dashboard is immediately live, responsive, and query-optimized.

Why This Architecture Wins for Builders
Eliminates Redundant Migrations and Views
When you need to adjust how metrics are aggregated or add a secondary filter, you don't need to commit new code, rebuild assets, or trigger a deployment pipeline. You make the adjustment directly through the visual builder interface.

Keeps Your Codebase Lean
Admin codebases frequently suffer from "widget bloat"—dozens of single-use widget classes scattered across your app directory that differ by only a single SQL condition or chart type. Visual Dash condenses this into a single, clean database-driven engine.

Try It Out
If you're building with Laravel and Filament and want to cut hours of tedious dashboard scaffolding out of your workflow, check out the package and start building visual metrics today.

GitHub / Documentation: spiggle/visual-dash
Built for: Laravel 13, Filament v5, Livewire, Tailwind CSS

Have questions, feature suggestions, or custom widget ideas? Drop a comment below or open an issue on GitHub!

Top comments (0)