Menu
Table of Contents

Analytics - v1.3.0

Components Overview

ArtisanPack UI Analytics provides pre-built Livewire components for displaying analytics data in your application.

Available Components

Component Description
Analytics Dashboard Full-featured dashboard with all widgets
Stats Cards Key metrics in card format
Visitors Chart Line chart of visitors over time
Top Pages Table of most viewed pages
Traffic Sources Breakdown of traffic sources
Realtime Visitors Live visitor count widget
Bot Traffic Filtered bot traffic summary (since 1.2.0)

Quick Usage

Full Dashboard

<livewire:artisanpack-analytics::analytics-dashboard />

Individual Widgets

{{-- Stats cards --}}
<livewire:artisanpack-analytics::widgets.stats-cards />

{{-- Visitors chart --}}
<livewire:artisanpack-analytics::widgets.visitors-chart />

{{-- Top pages table --}}
<livewire:artisanpack-analytics::widgets.top-pages />

{{-- Traffic sources --}}
<livewire:artisanpack-analytics::widgets.traffic-sources />

{{-- Real-time visitors --}}
<livewire:artisanpack-analytics::widgets.realtime-visitors />

{{-- Bot traffic (since 1.2.0) --}}
<livewire:artisanpack-analytics::widgets.bot-traffic />

Common Properties

All analytics components share these common properties:

Property Type Default Description
dateRangePreset ?string 'last7days' Date range preset
siteId ?int null Site ID for multi-tenant

Date Range Presets

Available presets:

  • 'today'
  • 'yesterday'
  • 'last7days'
  • 'last30days'
  • 'last90days'
  • 'thisWeek'
  • 'lastWeek'
  • 'thisMonth'
  • 'lastMonth'
  • 'thisYear'

Customization

Using Props

<livewire:artisanpack-analytics::widgets.stats-cards
    date-range-preset="last30days"
    :site-id="$siteId"
    :show-comparison="true"
/>

Listening for Events

Components dispatch events you can listen for:

<div x-data @analytics-data-loaded.window="handleDataLoaded($event.detail)">
    <livewire:artisanpack-analytics::widgets.stats-cards />
</div>

Refreshing Data

Dispatch the refresh event to update all widgets:

// From a Livewire component
$this->dispatch('refresh-analytics-widgets');

// From JavaScript
Livewire.dispatch('refresh-analytics-widgets');

Styling

Components use Tailwind CSS and daisyUI for styling. They respect your application's theme and dark mode settings.

Custom Styling

Override styles using Tailwind's @apply or by publishing and modifying the views:

php artisan vendor:publish --tag=analytics-views

Views will be published to resources/views/vendor/artisanpack-analytics/.

Chart.js Integration

The Visitors Chart component requires Chart.js. Include it in your layout:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Or install via npm:

npm install chart.js

// In your app.js
import Chart from 'chart.js/auto';
window.Chart = Chart;

Multi-Tenant Usage

For multi-tenant applications, pass the site ID:

<livewire:artisanpack-analytics::analytics-dashboard
    :site-id="$currentSite->id"
/>

Or use the dedicated multi-tenant dashboard:

<livewire:artisanpack-analytics::multi-tenant-dashboard />

Building Custom Widgets

Create custom widgets using the WithAnalyticsWidget trait:

use ArtisanPackUI\Analytics\Http\Livewire\Concerns\WithAnalyticsWidget;
use Livewire\Component;

class CustomWidget extends Component
{
    use WithAnalyticsWidget;

    public function mount(?string $dateRangePreset = null, ?int $siteId = null): void
    {
        $this->initializeWidget($dateRangePreset, $siteId);
        $this->loadData();
    }

    public function loadData(): void
    {
        $query = $this->getAnalyticsQuery();
        $range = $this->getDateRange();
        $filters = $this->getFilters();

        // Use query methods...
        $this->data = $query->getStats($range, true, $filters);
    }

    public function render()
    {
        return view('livewire.custom-widget');
    }
}

React & Vue Components (since 1.1.0)

In addition to Livewire components, the analytics package provides pre-built dashboard components for React and Vue, powered by Inertia.js. These provide the same analytics data as the Livewire widgets but render in your React or Vue application.

See the Frontend Components documentation for:

Next Steps