wip

package.json

@@ -42,6 +42,6 @@
         "stylelint-config-sass-guidelines": "^10.0.0"
     },
     "engines": {
-        "node": "^18.0 || ^19.0 || ^20.0"
+        "node": "^18.0 || ^19.0 || ^20.0 || ^21.0"
     }
 }

public/build/assets/app-8c4d86f4.js

@@ -0,0 +1 @@
+import{a as f}from"./app-34baaef9.js";export{f as default};

public/build/assets/chart-ca6a94d4.js

@@ -0,0 +1 @@
+import"./app-34baaef9.js";

public/build/assets/dropdown-ca6a94d4.js

@@ -0,0 +1 @@
+import"./app-34baaef9.js";

public/build/assets/editor-ca6a94d4.js

@@ -0,0 +1 @@
+import"./app-34baaef9.js";

public/build/assets/media-manager-ca6a94d4.js

@@ -0,0 +1 @@
+import"./app-34baaef9.js";

public/build/assets/repeater-ca6a94d4.js

@@ -0,0 +1 @@
+import"./app-34baaef9.js";

public/build/assets/table-ca6a94d4.js

@@ -0,0 +1 @@
+import"./app-34baaef9.js";

public/build/manifest.json

@@ -7,52 +7,60 @@
     "css": [
       "assets/app-d00ef1bd.css"
     ],
-    "file": "assets/app-33c235a1.js",
+    "file": "assets/app-34baaef9.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   },
+  "resources/js/chart.js": {
+    "file": "assets/chart-ca6a94d4.js",
+    "imports": [
+      "resources/js/app.js"
+    ],
+    "isEntry": true,
+    "src": "resources/js/chart.js"
+  },
   "resources/js/dropdown.js": {
-    "file": "assets/dropdown-180e6571.js",
+    "file": "assets/dropdown-ca6a94d4.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/dropdown.js"
   },
   "resources/js/editor.js": {
-    "file": "assets/editor-180e6571.js",
+    "file": "assets/editor-ca6a94d4.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/editor.js"
   },
   "resources/js/media-manager.js": {
-    "file": "assets/media-manager-180e6571.js",
+    "file": "assets/media-manager-ca6a94d4.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/media-manager.js"
   },
   "resources/js/repeater.js": {
-    "file": "assets/repeater-180e6571.js",
+    "file": "assets/repeater-ca6a94d4.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/repeater.js"
   },
   "resources/js/table.js": {
-    "file": "assets/table-180e6571.js",
+    "file": "assets/table-ca6a94d4.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/table.js"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-8666ab41.js",
+    "file": "assets/app-8c4d86f4.js",
     "imports": [
       "resources/js/app.js"
     ],

resources/js/chart.js

@@ -1,13 +1,11 @@
 import ApexCharts from 'apexcharts';
 
-document.addEventListener('alpine:init', () => {
-    window.Alpine.data('chart', (config) => {
-        return {
-            init() {
-                const chart = new ApexCharts(this.$el, config);
+Alpine.data('chart', (config) => {
+    return {
+        init() {
+            const chart = new ApexCharts(this.$el, config);
 
-                chart.render();
-            },
-        };
-    });
+            chart.render();
+        },
+    };
 });

resources/views/components/chart.blade.php

@@ -0,0 +1,12 @@
+@if(! empty($config))
+    <div x-data="chart({{ json_encode($config) }})"></div>
+@endif
+
+{{-- Script --}}
+@pushOnce('scripts')
+    {{
+        Vite::withEntryPoints('resources/js/chart.js')
+            ->useBuildDirectory('vendor/root/build')
+            ->useHotFile(public_path('vendor/root/hot'))
+    }}
+@endpushOnce

resources/views/fields/editor.blade.php

@@ -34,8 +34,6 @@ class="form-group--row form-group--row:vertical-start"
     @endif
 </div>
 
-{{-- Modal --}}
-
 {{-- Script --}}
 @pushOnce('scripts')
     {{

resources/views/resources/index.blade.php

@@ -18,7 +18,7 @@
     @if(! empty($widgets))
         <div class="l-row l-row--column:sm:2 l-row--column:lg:3">
             @foreach($widgets as $widget)
-                @include('root::widgets.pending-widget', $widget)
+                @include($widget['template'], $widget)
             @endforeach
         </div>
     @endif

resources/views/widgets/trend.blade.php

@@ -1,13 +1,15 @@
-<turbo-frame id="widget-{{ $key }}">
+<turbo-frame id="widget-{{ $key }}" @if(! $isTurbo) src="{{ $url }}" @endif>
     <div {{ $attrs }}>
         <div class="app-widget__column">
             <h2 class="app-widget__title">
                 {{ $name }}
             </h2>
-            <p class="app-widget__data">65</p>
+            @if(! is_null($data['value']))
+                <p class="app-widget__data">{{ $value }}</p>
+            @endif
         </div>
         <div class="app-widget__chart">
-            <div x-data="trend({{ json_encode($config) }})"></div>
+            <x-root::chart :config="$data['chart']" />
         </div>
     </div>
 </turbo-frame>

resources/views/widgets/value.blade.php

@@ -1,4 +1,4 @@
-<turbo-frame id="widget-{{ $key }}">
+<turbo-frame id="widget-{{ $key }}" @if(! $isTurbo) src="{{ $url }}" @endif>
     <div {{ $attrs }}>
         @if(! is_null($icon))
             <div class="app-widget__icon">
@@ -9,17 +9,19 @@
             <h2 class="app-widget__title">
                 {{ $name }}
             </h2>
-            <p class="app-widget__data">{{ $data['current'] }}</p>
-            @if($data['trend'] < 0)
-                <div class="trending trending--down app-widget__trending">
-                    <span class="trending__caption">{{ $data['trend'] }}%</span>
-                    <x-root::icon name="trending-down" class="trending__icon" />
-                </div>
-            @elseif($data['trend'] > 0)
-                <div class="trending trending--up app-widget__trending">
-                    <span class="trending__caption">+{{ $data['trend'] }}%</span>
-                    <x-root::icon name="trending-up" class="trending__icon" />
-                </div>
+            @if(! empty($data))
+                <p class="app-widget__data">{{ $data['current'] }}</p>
+                @if($data['trend'] < 0)
+                    <div class="trending trending--down app-widget__trending">
+                        <span class="trending__caption">{{ $data['trend'] }}%</span>
+                        <x-root::icon name="trending-down" class="trending__icon" />
+                    </div>
+                @elseif($data['trend'] > 0)
+                    <div class="trending trending--up app-widget__trending">
+                        <span class="trending__caption">+{{ $data['trend'] }}%</span>
+                        <x-root::icon name="trending-up" class="trending__icon" />
+                    </div>
+                @endif
             @endif
         </div>
     </div>

resources/views/widgets/widget.blade.php

@@ -1,3 +1,3 @@
-<turbo-frame id="widget-{{ $key }}">
+<turbo-frame id="widget-{{ $key }}" @if(! $isTurbo) src="{{ $url }}" @endif>
     <div {{ $attrs }}></div>
 </turbo-frame>

src/Resources/Resource.php

@@ -435,7 +435,7 @@ public function toIndex(Request $request): array
             'widgets' => $this->resolveWidgets($request)
                 ->authorized($request)
                 ->visible('index')
-                ->toArray(),
+                ->mapToDisplay($request),
             'perPageOptions' => $this->getPerPageOptions(),
             'perPageKey' => $this->getPerPageKey(),
             'sortKey' => $this->getSortKey(),
@@ -490,7 +490,7 @@ public function toShow(Request $request, Model $model): array
             'widgets' => $this->resolveWidgets($request)
                 ->authorized($request, $model)
                 ->visible('show')
-                ->toArray(),
+                ->mapToDisplay($request),
             'relations' => $this->resolveFields($request)
                 ->subResource()
                 ->authorized($request, $model)

src/View/Components/Chart.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Cone\Root\View\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class Chart extends Component
+{
+    /**
+     * The icon name.
+     */
+    protected array $config = [];
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(array $config = [])
+    {
+        $this->config = $config;
+    }
+
+    /**
+     * Get the view / view contents that represent the component.
+     */
+    public function render(): View
+    {
+        return $this->view('root::components.chart', [
+            'config' => $this->config,
+        ]);
+    }
+}

src/Widgets/Metric.php

@@ -135,7 +135,7 @@ public function data(Request $request): array
     {
         return array_merge(parent::data($request), [
             'ranges' => $this->ranges(),
-            'data' => $this->calculate($request)->toArray(),
+            'data' => $request->hasHeader('Turbo-Frame') ? $this->calculate($request)->toArray() : [],
         ]);
     }
 
@@ -206,4 +206,14 @@ public function calculate(Request $request): Result
     {
         return $this->count($request, $this->resolveQuery($request));
     }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function toArray(): array
+    {
+        return array_merge(parent::toArray(), [
+            'data' => [],
+        ]);
+    }
 }

src/Widgets/Results/TrendResult.php

@@ -22,6 +22,17 @@ public function __construct(array $data)
      */
     public function toArray(): array
     {
-        return $this->data;
+        return [
+            'current' => array_sum($this->data),
+            'chart' => [
+                'series' => [
+                    [
+                        'name' => __('Value'),
+                        'data' => array_values($this->data),
+                    ],
+                ],
+                'labels' => array_keys($this->data),
+            ],
+        ];
     }
 }

src/Widgets/Trend.php

@@ -200,6 +200,20 @@ protected function format(string $interval): string
         };
     }
 
+    /**
+     * Get the data.
+     */
+    public function data(Request $request): array
+    {
+        return array_replace_recursive([
+            'ranges' => $this->ranges(),
+            'data' => [
+                'chart' => $request->hasHeader('Turbo-Frame') ? $this->config : [],
+                'value' => null,
+            ],
+        ], parent::data($request));
+    }
+
     /**
      * Convert the query to result.
      */
@@ -217,14 +231,4 @@ public function toResult(Request $request, Builder $query): TrendResult
             array_replace($dates, $data)
         );
     }
-
-    /**
-     * {@inheritdoc}
-     */
-    public function toArray(): array
-    {
-        return array_merge(parent::toArray(), [
-            'config' => $this->config,
-        ]);
-    }
 }

src/Widgets/Widget.php

@@ -75,7 +75,9 @@ public function render(): View
      */
     public function data(Request $request): array
     {
-        return $this->toArray();
+        return array_merge($this->toArray(), [
+            'isTurbo' => $request->hasHeader('Turbo-Frame'),
+        ]);
     }
 
     /**

src/Widgets/Widgets.php

@@ -38,6 +38,14 @@ public function visible(string|array $context): static
         return $this->filter->visible($context)->values();
     }
 
+    /**
+     * Map the widgets to display.
+     */
+    public function mapToDisplay(Request $request): array
+    {
+        return $this->map->data($request)->all();
+    }
+
     /**
      * Register the widget routes.
      */