123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- @php
- use Filament\Support\Enums\IconPosition;
- use Filament\Support\Facades\FilamentView;
-
- $chartColor = $getChartColor() ?? 'gray';
- $descriptionColor = $getDescriptionColor() ?? 'gray';
- $descriptionIcon = $getDescriptionIcon();
- $descriptionIconPosition = $getDescriptionIconPosition();
- $url = $getUrl();
- $tag = $url ? 'a' : 'div';
- $dataChecksum = $generateDataChecksum();
-
- $descriptionIconClasses = \Illuminate\Support\Arr::toCssClasses([
- 'fi-wi-stats-overview-stat-description-icon h-5 w-5',
- match ($descriptionColor) {
- 'gray' => 'text-gray-400 dark:text-gray-500',
- default => 'text-custom-500',
- },
- ]);
-
- $descriptionIconStyles = \Illuminate\Support\Arr::toCssStyles([
- \Filament\Support\get_color_css_variables(
- $descriptionColor,
- shades: [500],
- alias: 'widgets::stats-overview-widget.stat.description.icon',
- ) => $descriptionColor !== 'gray',
- ]);
-
- $prefixLabel = $getPrefixLabel();
- $suffixLabel = $getSuffixLabel();
- @endphp
-
- <{!! $tag !!}
- @if ($url)
- {{ \Filament\Support\generate_href_html($url, $shouldOpenUrlInNewTab()) }}
- @endif
- {{
- $getExtraAttributeBag()
- ->class([
- 'fi-wi-stats-overview-stat relative rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10',
- ])
- }}
- >
- <div class="grid gap-y-2">
- <div class="flex items-center gap-x-2">
- @if ($icon = $getIcon())
- <x-filament::icon
- :icon="$icon"
- class="fi-wi-stats-overview-stat-icon h-5 w-5 text-gray-400 dark:text-gray-500"
- />
- @endif
-
- <span
- class="fi-wi-stats-overview-stat-label text-sm font-medium text-gray-500 dark:text-gray-400"
- >
- {{ $getLabel() }}
- </span>
- </div>
-
- <div
- class="fi-wi-stats-overview-stat-value text-2xl font-semibold tracking-tight text-gray-950 dark:text-white"
- >
- @if ($prefixLabel)
- <span class="prefix-label text-base font-medium text-gray-500 dark:text-gray-400">
- {{ $prefixLabel }}
- </span>
- @endif
-
- {{ $getValue() }}
-
- @if ($suffixLabel)
- <span class="suffix-label text-base font-medium text-gray-500 dark:text-gray-400">
- {{ $suffixLabel }}
- </span>
- @endif
- </div>
-
- @if ($description = $getDescription())
- <div class="flex items-center gap-x-1">
- @if ($descriptionIcon && in_array($descriptionIconPosition, [IconPosition::Before, 'before']))
- <x-filament::icon
- :icon="$descriptionIcon"
- :class="$descriptionIconClasses"
- :style="$descriptionIconStyles"
- />
- @endif
-
- <span
- @class([
- 'fi-wi-stats-overview-stat-description text-sm',
- match ($descriptionColor) {
- 'gray' => 'text-gray-500 dark:text-gray-400',
- default => 'fi-color-custom text-custom-600 dark:text-custom-400',
- },
- is_string($descriptionColor) ? "fi-color-{$descriptionColor}" : null,
- ])
- @style([
- \Filament\Support\get_color_css_variables(
- $descriptionColor,
- shades: [400, 600],
- alias: 'widgets::stats-overview-widget.stat.description',
- ) => $descriptionColor !== 'gray',
- ])
- >
- {{ $description }}
- </span>
-
- @if ($descriptionIcon && in_array($descriptionIconPosition, [IconPosition::After, 'after']))
- <x-filament::icon
- :icon="$descriptionIcon"
- :class="$descriptionIconClasses"
- :style="$descriptionIconStyles"
- />
- @endif
- </div>
- @endif
- </div>
-
- @if ($chart = $getChart())
- {{-- An empty function to initialize the Alpine component with until it's loaded with `ax-load`. This removes the need for `x-ignore`, allowing the chart to be updated via Livewire polling. --}}
- <div x-data="{ statsOverviewStatChart: function () {} }">
- <div
- @if (FilamentView::hasSpaMode())
- ax-load="visible"
- @else
- ax-load
- @endif
- ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('stats-overview/stat/chart', 'filament/widgets') }}"
- x-data="statsOverviewStatChart({
- dataChecksum: @js($dataChecksum),
- labels: @js(array_keys($chart)),
- values: @js(array_values($chart)),
- })"
- @class([
- 'fi-wi-stats-overview-stat-chart absolute inset-x-0 bottom-0 overflow-hidden rounded-b-xl',
- match ($chartColor) {
- 'gray' => null,
- default => 'fi-color-custom',
- },
- is_string($chartColor) ? "fi-color-{$chartColor}" : null,
- ])
- @style([
- \Filament\Support\get_color_css_variables(
- $chartColor,
- shades: [50, 400, 500],
- alias: 'widgets::stats-overview-widget.stat.chart',
- ) => $chartColor !== 'gray',
- ])
- >
- <canvas x-ref="canvas" class="h-6"></canvas>
-
- <span
- x-ref="backgroundColorElement"
- @class([
- match ($chartColor) {
- 'gray' => 'text-gray-100 dark:text-gray-800',
- default => 'text-custom-50 dark:text-custom-400/10',
- },
- ])
- ></span>
-
- <span
- x-ref="borderColorElement"
- @class([
- match ($chartColor) {
- 'gray' => 'text-gray-400',
- default => 'text-custom-500 dark:text-custom-400',
- },
- ])
- ></span>
- </div>
- </div>
- @endif
- </{!! $tag !!}>
|