114 lines
4.1 KiB
PHP
114 lines
4.1 KiB
PHP
@php
|
|
use Filament\Support\Facades\FilamentView;
|
|
|
|
$color = $this->getColor();
|
|
$heading = $this->getHeading();
|
|
$description = $this->getDescription();
|
|
$filters = $this->getFilters();
|
|
@endphp
|
|
|
|
<x-filament-widgets::widget class="fi-wi-chart">
|
|
<x-filament::section :description="$description" :heading="$heading">
|
|
@if ($filters)
|
|
<x-slot name="headerEnd">
|
|
<x-filament::input.wrapper
|
|
inline-prefix
|
|
wire:target="filter"
|
|
class="w-max sm:-my-2"
|
|
>
|
|
<x-filament::input.select
|
|
inline-prefix
|
|
wire:model.live="filter"
|
|
>
|
|
@foreach ($filters as $value => $label)
|
|
<option value="{{ $value }}">
|
|
{{ $label }}
|
|
</option>
|
|
@endforeach
|
|
</x-filament::input.select>
|
|
</x-filament::input.wrapper>
|
|
</x-slot>
|
|
@endif
|
|
|
|
<div
|
|
@if ($pollingInterval = $this->getPollingInterval())
|
|
wire:poll.{{ $pollingInterval }}="updateChartData"
|
|
@endif
|
|
>
|
|
<div
|
|
@if (FilamentView::hasSpaMode())
|
|
ax-load="visible"
|
|
@else
|
|
ax-load
|
|
@endif
|
|
ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
|
|
wire:ignore
|
|
x-data="chart({
|
|
cachedData: @js($this->getCachedData()),
|
|
options: @js($this->getOptions()),
|
|
type: @js($this->getType()),
|
|
})"
|
|
x-ignore
|
|
@class([
|
|
match ($color) {
|
|
'gray' => null,
|
|
default => 'fi-color-custom',
|
|
},
|
|
is_string($color) ? "fi-color-{$color}" : null,
|
|
])
|
|
>
|
|
<canvas
|
|
x-ref="canvas"
|
|
@if ($maxHeight = $this->getMaxHeight())
|
|
style="max-height: {{ $maxHeight }}"
|
|
@endif
|
|
></canvas>
|
|
|
|
<span
|
|
x-ref="backgroundColorElement"
|
|
@class([
|
|
match ($color) {
|
|
'gray' => 'text-gray-100 dark:text-gray-800',
|
|
default => 'text-custom-50 dark:text-custom-400/10',
|
|
},
|
|
])
|
|
@style([
|
|
\Filament\Support\get_color_css_variables(
|
|
$color,
|
|
shades: [50, 400],
|
|
alias: 'widgets::chart-widget.background',
|
|
) => $color !== 'gray',
|
|
])
|
|
></span>
|
|
|
|
<span
|
|
x-ref="borderColorElement"
|
|
@class([
|
|
match ($color) {
|
|
'gray' => 'text-gray-400',
|
|
default => 'text-custom-500 dark:text-custom-400',
|
|
},
|
|
])
|
|
@style([
|
|
\Filament\Support\get_color_css_variables(
|
|
$color,
|
|
shades: [400, 500],
|
|
alias: 'widgets::chart-widget.border',
|
|
) => $color !== 'gray',
|
|
])
|
|
></span>
|
|
|
|
<span
|
|
x-ref="gridColorElement"
|
|
class="text-gray-200 dark:text-gray-800"
|
|
></span>
|
|
|
|
<span
|
|
x-ref="textColorElement"
|
|
class="text-gray-500 dark:text-gray-400"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</x-filament::section>
|
|
</x-filament-widgets::widget>
|