README

A powerful, modular report builder for Laravel that simplifies the generation of cards, charts, and tables.
Easily configurable via config/report.php, it provides a unified JSON structure perfect for HighCharts and modern frontends like Vue, React, or Inertia.

✨ Features

🚀 Unified Data Structure: Seamlessly generate cards, charts, and tables.
📈 HighCharts Ready: Pre-configured for popular chart types (Bar, Line, Spline, Area, Column, Pie).
🧩 Modular & Clean: Define report pages in config and implement logic in dedicated classes.
🛠 Dynamic Filtering: Built-in support for date ranges and custom advanced filters.
🌍 Multi-language Support: Automatic translation of labels and titles using Laravel's localization.
🎨 Frontend Agnostic: Clean JSON response ready for any JS library.

📦 Installation

composer require hasanhawary/report-builder

Publish the configuration files:

php artisan vendor:publish --tag=report-builder-config

⚙️ Configuration

Define your report structure in config/report.php:

return [
    'namespace' => 'App\\Reports', // Where your report classes live

    'pages' => [
        'user' => [
            'type' => 'page',
            'report' => [
                'stats' => [
                    'type' => 'card',
                    'size' => ['cols' => '12', 'md' => '12', 'lg' => '12'],
                ],
                'registered_by_date' => [
                    'type' => 'spline',
                    'size' => ['cols' => '12', 'md' => '6', 'lg' => '6'],
                ],
                'user_list' => [
                    'type' => 'table',
                    'size' => ['cols' => '12', 'md' => '6', 'lg' => '6'],
                ],
            ],
        ]
    ],
];

🛠 Usage

1. Create your Report Class

Extend BaseReport and implement methods matching your config keys (prefixed with get).

namespace App\Reports;

use HasanHawary\ReportBuilder\BaseReport;
use Illuminate\Support\Facades\DB;

class UserReport extends BaseReport
{
    public string $table = 'users';

    /**
     * Data for summary cards
     */
    public function getStats(): array
    {
        $data = [
            'total' => DB::table($this->table)->count(),
            'active' => DB::table($this->table)->where('active', 1)->count(),
        ];

        return $this->cardResponse($data);
    }

    /**
     * Data for a spline chart
     */
    public function getRegisteredByDate(): array
    {
        $data = DB::table($this->table)
            ->selectRaw("DATE_FORMAT(created_at, '%Y-%m-%d') as date, COUNT(*) as count")
            ->groupBy('date')
            ->get();

        return $this->chartResponse('date', $data);
    }

    /**
     * Data for a table
     */
    public function getUserList(): array
    {
        $data = DB::table($this->table)
            ->select('id', 'name', 'email', 'created_at')
            ->limit(10)
            ->get();

        return $this->chartResponse('id', $data); // chartResponse handles 'table' type automatically
    }
}

2. Fetch the Report

Use the Report facade or ReportBuilder class in your controller.

use HasanHawary\ReportBuilder\Facades\Report;

public function index()
{
    return Report::filter([
        'page' => 'user',
        'apply_date' => true,
        'start' => '2024-01-01',
        'end' => '2024-12-31',
    ])->response();
}

📊 Available Response Helpers

Inside your report classes, use these helpers to format data:

$this->cardResponse($data): Formats simple key-value pairs into card data.
$this->chartResponse($groupByField, $data): Formats collections into HighCharts-ready structures.
$this->guessDateFormat(): Automatically determines the best date format for chart axes based on filtered range.

🌍 Localization

The package automatically looks for translations in resources/lang/{locale}/report.php. Label keys (like total_users) will be converted to __('report.total_users').

🎨 Frontend Integration

Vue 3 + Highcharts

<script setup>
import { ref, onMounted } from 'vue';
import Highcharts from 'highcharts';

const reports = ref(null);

onMounted(async () => {
  const res = await fetch('/api/reports?page=user');
  const json = await res.json();
  reports.value = json.report;
});
</script>

<template>
  <div v-if="reports">
    <!-- Render Cards -->
    <div v-for="card in reports.cards.data" :key="card.key">
       {{ card.label }}: {{ card.value }}
    </div>

    <!-- Render Charts -->
    <div v-for="chart in reports.charts" :key="chart.title">
       <highcharts :options="chart.data[chart.type]" />
    </div>
  </div>
</template>

✅ Version Support

PHP: 8.0+
Laravel: 10, 11, 12, 13

hasanhawary / report-builder

Maintainers

Package info

Statistics

Security