103 lines
3.9 KiB
PHP
103 lines
3.9 KiB
PHP
@php
|
|
use Filament\Widgets\View\Components\ChartWidgetComponent;
|
|
use Illuminate\View\ComponentAttributeBag;
|
|
|
|
$color = $this->getColor();
|
|
$heading = $this->getHeading();
|
|
$description = $this->getDescription();
|
|
$filters = $this->getFilters();
|
|
$isCollapsible = $this->isCollapsible();
|
|
$type = $this->getType();
|
|
$maxHeight = $this->getMaxHeight();
|
|
$hasMaxHeight = filled($maxHeight) && $maxHeight !== '100%';
|
|
@endphp
|
|
|
|
<x-filament-widgets::widget class="fi-wi-chart">
|
|
<x-filament::section
|
|
:description="$description"
|
|
:heading="$heading"
|
|
:collapsible="$isCollapsible"
|
|
>
|
|
<x-slot name="headerEnd">
|
|
<div class="flex items-center gap-3">
|
|
<!-- Metric Selector -->
|
|
<x-filament::input.wrapper class="w-44">
|
|
<x-filament::input.select wire:model.live="activeMetric">
|
|
<option value="total">{{ __('filament-short-url::default.stats_card_total') }}</option>
|
|
<option value="unique">{{ __('filament-short-url::default.stats_card_unique') }}</option>
|
|
<option value="qr">{{ __('filament-short-url::default.stats_card_qr_scans') }}</option>
|
|
</x-filament::input.select>
|
|
</x-filament::input.wrapper>
|
|
|
|
<!-- Granularity Selector -->
|
|
@if ($filters)
|
|
<x-filament::input.wrapper class="w-32">
|
|
<x-filament::input.select wire:model.live="filter">
|
|
@foreach ($filters as $value => $label)
|
|
<option value="{{ $value }}">
|
|
{{ $label }}
|
|
</option>
|
|
@endforeach
|
|
</x-filament::input.select>
|
|
</x-filament::input.wrapper>
|
|
@endif
|
|
</div>
|
|
</x-slot>
|
|
|
|
<div
|
|
@if ($pollingInterval = $this->getPollingInterval())
|
|
wire:poll.{{ $pollingInterval }}="updateChartData"
|
|
@endif
|
|
>
|
|
<div
|
|
x-load
|
|
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
|
|
wire:ignore
|
|
data-chart-type="{{ $type }}"
|
|
x-data="chart({
|
|
cachedData: @js($this->getCachedData()),
|
|
options: @js($this->getOptions()),
|
|
type: @js($type),
|
|
})"
|
|
{{
|
|
(new ComponentAttributeBag)
|
|
->color(ChartWidgetComponent::class, $color)
|
|
->class([
|
|
'fi-wi-chart-canvas-ctn',
|
|
'fi-wi-chart-canvas-ctn-no-aspect-ratio' => $hasMaxHeight,
|
|
])
|
|
}}
|
|
>
|
|
<canvas
|
|
x-ref="canvas"
|
|
@style([
|
|
'width: 100%',
|
|
'height: 100%; max-height: 100%' => ! $hasMaxHeight,
|
|
"max-height: {$maxHeight}" => $hasMaxHeight,
|
|
])
|
|
></canvas>
|
|
|
|
<span
|
|
x-ref="backgroundColorElement"
|
|
class="fi-wi-chart-bg-color"
|
|
></span>
|
|
|
|
<span
|
|
x-ref="borderColorElement"
|
|
class="fi-wi-chart-border-color"
|
|
></span>
|
|
|
|
<span
|
|
x-ref="gridColorElement"
|
|
class="fi-wi-chart-grid-color"
|
|
></span>
|
|
|
|
<span
|
|
x-ref="textColorElement"
|
|
class="fi-wi-chart-text-color"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</x-filament::section>
|
|
</x-filament-widgets::widget>
|