Tweaks to make it work smoothly with chartjs (#70)

README.md

@@ -19,6 +19,13 @@ You can install the package via composer:
 composer require digital-creative/nova-dashboard
 ```
 
+## List of current available widgets:
+
+- Value Widget: [https://github.com/dcasia/value-widget](https://github.com/dcasia/value-widget)
+- Table Widget: [https://github.com/dcasia/table-widget](https://github.com/dcasia/table-widget)
+- ChartJs Widget: [https://github.com/dcasia/chartjs-widget](https://github.com/dcasia/chartjs-widget)
+- [Add your widget here.](https://github.com/dcasia/nova-dashboard/edit/main/README.md)
+
 ## Usage
 
 The dashboard itself is simply a standard Laravel Nova card, so you can use it either as a card on any resource 
@@ -107,12 +114,6 @@ $widget->minWidth(2);
 $widget->minHeight(1);
 ```
 
-### List of current available widgets:
-
-- Value Widget: [https://github.com/dcasia/value-widget](https://github.com/dcasia/value-widget)
-- Table Widget: [https://github.com/dcasia/table-widget](https://github.com/dcasia/table-widget)
-- [Add your widget here.](https://github.com/dcasia/nova-dashboard/edit/main/README.md)
-
 ## Filters
 
 <picture>

dist/js/card.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /*!
- * GridStack 9.4.0
+ * GridStack 9.5.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny

package.json

@@ -7,12 +7,12 @@
     },
     "devDependencies": {
         "@vue/compiler-sfc": "^3.3.7",
-        "gridstack": "^9.4.0",
+        "gridstack": "^9.5.0",
         "laravel-mix": "^6.0.49",
         "mix-tailwindcss": "^1.3.0",
-        "sass": "^1.68.0",
+        "sass": "^1.69.5",
         "sass-loader": "^13.3.2",
-        "tailwindcss": "^3.3.4",
+        "tailwindcss": "^3.3.5",
         "vue-collapsed": "^1.2.8",
         "vue-loader": "^17.2.2"
     }

resources/js/components/Card.vue

@@ -103,7 +103,7 @@
 
                 this.grid = GridStack.init({
                     staticGrid: this.activeView.static,
-                    cellHeight: 160 + margin * 2,
+                    cellHeight: this.activeView.cellHeight + margin * 2,
                     margin: margin,
                     animate: false,
                     auto: false,

resources/js/components/Filter.vue

@@ -1,6 +1,6 @@
 <template>
 
-    <Card class="nova-dashboard-filter mb-4 transition-padding transition"
+    <Card class="nova-dashboard-filter mb-4"
           :style="{ '--columns-desktop': columns || 2 }"
           :class="{ '--active px-1 pb-1': filtersAreApplied, 'px-1': !filtersAreApplied, '--expanded': expanded }">
 
@@ -227,6 +227,8 @@
 
     .dark .nova-dashboard-filter {
 
+        @apply transition-all;
+
         &.\--expanded {
             @apply bg-gray-700;
         }

src/Card/View.php

@@ -60,6 +60,11 @@ public function icon(string $icon): self
         return $this->withMeta([ 'icon' => $icon ]);
     }
 
+    public function cellHeight(int $height): self
+    {
+        return $this->withMeta([ 'cellHeight' => $height ]);
+    }
+
     public function static(): self
     {
         return $this->withMeta([ 'static' => true ]);
@@ -85,6 +90,7 @@ public function jsonSerialize(): array
         return array_merge([
             'name' => $this->name,
             'key' => $this->key(),
+            'cellHeight' => 160,
         ], $this->meta());
     }
 }

src/Card/Widget.php

@@ -63,6 +63,11 @@ public function minHeight(int $height): self
         return $this->withMeta([ 'minHeight' => $height ]);
     }
 
+    public function getMeta(string $metaAttribute, mixed $default = null): mixed
+    {
+        return data_get($this->meta, $metaAttribute, $default);
+    }
+
     public function jsonSerialize(): array
     {
         $request = resolve(NovaRequest::class);

src/NovaDashboardServiceProvider.php

@@ -17,6 +17,15 @@ public function boot(): void
             $this->routes();
         });
 
+        /**
+         * Inject a new middleware to ensure nova-dashboard is always loaded before any widget
+         */
+        config([
+            'nova.middleware' => array_merge(config('nova.middleware', []), [
+                SortAssets::class,
+            ]),
+        ]);
+
         Nova::serving(function (ServingNova $event): void {
 
             Nova::script('nova-dashboard', __DIR__ . '/../dist/js/card.js');

src/SortAssets.php

@@ -0,0 +1,22 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace DigitalCreative\NovaDashboard;
+
+use Closure;
+use Illuminate\Http\Request;
+use Laravel\Nova\Nova;
+use Laravel\Nova\Script;
+use Laravel\Nova\Style;
+
+class SortAssets
+{
+    public function handle(Request $request, Closure $next): mixed
+    {
+        usort(Nova::$scripts, fn (Script $left, Script $right) => $right->name() === 'nova-dashboard');
+        usort(Nova::$styles, fn (Style $left, Style $right) => $right->name() === 'nova-dashboard');
+
+        return $next($request);
+    }
+}

src/Traits/GuessCaller.php

@@ -9,18 +9,26 @@
 
 trait GuessCaller
 {
-    private Dashboard|Resource $caller;
+    protected Dashboard|Resource $caller;
 
-    public function __construct()
+    public function __construct(Dashboard|Resource $caller = null)
     {
-        $caller = collect(debug_backtrace(DEBUG_BACKTRACE_PROVIDE_OBJECT | DEBUG_BACKTRACE_IGNORE_ARGS, 5))
-            ->firstWhere(function (array $data) {
+        if ($caller) {
 
-                return is_subclass_of(data_get($data, 'class'), Dashboard::class)
-                    || is_subclass_of(data_get($data, 'class'), Resource::class);
+            $this->caller = $caller;
 
-            });
+        } else {
 
-        $this->caller = $caller[ 'object' ];
+            $caller = collect(debug_backtrace(DEBUG_BACKTRACE_PROVIDE_OBJECT | DEBUG_BACKTRACE_IGNORE_ARGS, 5))
+                ->firstWhere(function (array $data) {
+
+                    return is_subclass_of(data_get($data, 'class'), Dashboard::class)
+                        || is_subclass_of(data_get($data, 'class'), Resource::class);
+
+                });
+
+            $this->caller = $caller[ 'object' ];
+
+        }
     }
 }

src/Traits/ResolveView.php

@@ -61,6 +61,9 @@ public function findWidgetByKey(string $key): ?Widget
 
     public function resolveWidgetValue(NovaRequest $request, string $key): mixed
     {
-        return $this->findWidgetByKey($key)?->resolveValue($request, $this);
+        $widget = $this->findWidgetByKey($key);
+        $widget?->configure($request);
+
+        return $widget?->resolveValue($request, $this);
     }
 }

tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
         extend: {
             ...theme.extend,
             transitionProperty: {
+                color: 'color',
                 width: 'width',
                 height: 'height',
                 padding: 'padding',