install

resources/views/vendor/filament-widgets/chart-widget.blade.php

@@ -0,0 +1,110 @@
+@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();
+@endphp
+
+<x-filament-widgets::widget class="fi-wi-chart">
+    <x-filament::section
+        :description="$description"
+        :heading="$heading"
+        :collapsible="$isCollapsible"
+    >
+        @if ($filters || method_exists($this, 'getFiltersSchema'))
+            <x-slot name="afterHeader">
+                @if ($filters)
+                    <x-filament::input.wrapper
+                        inline-prefix
+                        wire:target="filter"
+                        class="fi-wi-chart-filter"
+                    >
+                        <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>
+                @endif
+
+                @if (method_exists($this, 'getFiltersSchema'))
+                    <x-filament::dropdown
+                        placement="bottom-end"
+                        shift
+                        width="xs"
+                        class="fi-wi-chart-filter"
+                    >
+                        <x-slot name="trigger">
+                            {{ $this->getFiltersTriggerAction() }}
+                        </x-slot>
+
+                        <div class="fi-wi-chart-filter-content">
+                            {{ $this->getFiltersSchema() }}
+                        </div>
+                    </x-filament::dropdown>
+                @endif
+            </x-slot>
+        @endif
+
+        <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' => filled($maxHeight = $this->getMaxHeight()),
+                        ])
+                        ->style([
+                            'max-height: ' . $maxHeight => filled($maxHeight),
+                        ])
+                }}
+            >
+                <canvas x-ref="canvas"></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>