wip

config/root.php

@@ -113,4 +113,49 @@
         ],
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Widget Chart Settings
+    |--------------------------------------------------------------------------
+    |
+    | You can specify the default ApexCharts config for each chart type here.
+    | For more info visit the official documentation: https://apexcharts.com
+    |
+    */
+
+    'widgets' => [
+        'trend' => [
+            'chart' => [
+                'type' => 'area',
+                'height' => 80,
+                'width' => '100%',
+                'sparkline' => ['enabled' => true],
+            ],
+            'stroke' => [
+                'curve' => 'smooth',
+                'width' => 2,
+            ],
+            'fill' => [
+                'type' => 'gradient',
+                'opacity' => 0.75,
+                'gradient' => [
+                    'shadeIntensity' => 1,
+                    'opacityFrom' => 0.75,
+                    'opacityTo' => 0,
+                    'stops' => [0, 100],
+                ],
+            ],
+            'xaxis' => ['type' => 'datetime'],
+            'yaxis' => ['min' => 0],
+            'colors' => ['#fff'],
+            'tooltip' => [
+                'enabled' => true,
+                'marker' => ['show' => false],
+            ],
+            'grid' => [
+                'padding' => ['top' => 10, 'bottom' => 10],
+            ],
+        ],
+    ],
+
 ];

resources/js/widget.js

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

resources/views/widgets/trend.blade.php

@@ -3,14 +3,6 @@
         <div class="app-widget__column">
             <h2 class="app-widget__title">
                 {{ $name }}
-                <div class="form-group">
-                    <label class="form-label sr-only" for="widget-{{ $key }}-interval">{{ __('Interval') }}</label>
-                    <select class="form-control form-control--sm" id="widget-{{ $key }}-interval">
-                        <option value="this-week">This Week</option>
-                        <option value="last-week">Last Week</option>
-                        <option value="last-month">Last Month</option>
-                    </select>
-                </div>
             </h2>
             <p class="app-widget__data">65</p>
             <div class="trending trending--up app-widget__trending">
@@ -19,7 +11,7 @@
             </div>
         </div>
         <div class="app-widget__chart">
-            <div id="chart01"></div>
+            <div x-init=""></div>
         </div>
     </div>
 </turbo-frame>

resources/views/widgets/value.blade.php

@@ -8,14 +8,6 @@
         <div class="app-widget__column">
             <h2 class="app-widget__title">
                 {{ $name }}
-                <div class="form-group">
-                    <label class="form-label sr-only" for="widget-{{ $key }}-interval">{{ __('Interval') }}</label>
-                    <select class="form-control form-control--sm" id="widget-{{ $key }}-interval">
-                        <option value="this-week">This Week</option>
-                        <option value="last-week">Last Week</option>
-                        <option value="last-month">Last Month</option>
-                    </select>
-                </div>
             </h2>
             <p class="app-widget__data">{{ $data['current'] }}</p>
             @if($data['trend'] < 0)
@@ -30,8 +22,5 @@
                 </div>
             @endif
         </div>
-        <div class="app-widget__chart">
-            <div id="chart01"></div>
-        </div>
     </div>
 </turbo-frame>

src/Widgets/Metric.php

@@ -5,10 +5,11 @@
 use Closure;
 use Cone\Root\Exceptions\QueryResolutionException;
 use Cone\Root\Widgets\Results\Result;
-use DateTimeInterface;
+use DateInterval;
+use DatePeriod;
+use DateTimeImmutable;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Date;
 
 abstract class Metric extends Widget
 {
@@ -62,47 +63,39 @@ public function resolveQuery(Request $request): Builder
     }
 
     /**
-     * Get the to date.
-     */
-    public function to(Request $request): DateTimeInterface
-    {
-        return Date::now();
-    }
-
-    /**
-     * Get the from date.
+     * Get the current range.
      */
-    public function from(Request $request): DateTimeInterface
+    public function getCurrentRange(Request $request): string
     {
-        $to = $this->to($request);
-
-        $range = empty($this->ranges()) ? 'ALL' : $this->getCurrentRange($request);
-
-        return $this->range($to, $range);
+        return $request->input('range', 'MONTH');
     }
 
     /**
-     * Get the current range.
+     * Calculate the range.
      */
-    public function getCurrentRange(Request $request): string
+    protected function currentPeriod(string $range): DatePeriod
     {
-        return $request->input('range', 'MONTH');
+        return new DatePeriod(
+            (new DateTimeImmutable())->setTimestamp($this->rangeToTimestamp($range)),
+            new DateInterval('P1D'),
+            new DateTimeImmutable()
+        );
     }
 
     /**
-     * Calculate the range.
+     * Convert the range to timestamp.
      */
-    protected function range(DateTimeInterface $date, string $range): mixed
+    protected function rangeToTimestamp(string|int $range, ?int $base = null): int
     {
         return match ($range) {
-            'TODAY' => $date->startOfDay(),
-            'DAY' => $date->subDay(),
-            'WEEK' => $date->subWeek(),
-            'MONTH' => $date->subMonth(),
-            'QUARTER' => $date->subQuarter(),
-            'YEAR' => $date->subYear(),
-            'ALL' => Date::parse('0000-01-01'),
-            default => $date->subDays((int) $range),
+            'TODAY' => strtotime('today', $base),
+            'DAY' => strtotime('-1 day', $base),
+            'WEEK' => strtotime('-1 week', $base),
+            'MONTH' => strtotime('-1 month', $base),
+            'QUARTER' => strtotime('-3 months', $base),
+            'YEAR' => strtotime('-1 year', $base),
+            'ALL' => 0,
+            default => strtotime(sprintf('-%d days', (int) $range), $base),
         };
     }
 

src/Widgets/Results/TrendResult.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace Cone\Root\Widgets\Results;
+
+class TrendResult extends Result
+{
+    /**
+     * Convert the result as an array.
+     */
+    public function toArray(): array
+    {
+        return [];
+    }
+}

src/Widgets/Results/ValueResult.php

@@ -12,23 +12,25 @@ class ValueResult extends Result
     /**
      * The previous value.
      */
-    protected float $previous;
+    protected ?float $previous = null;
 
     /**
      * Create a new result instance.
      */
-    public function __construct(float $current, float $previous = 0)
+    public function __construct(float $current, ?float $previous = null)
     {
         $this->current = round($current, 2);
-        $this->previous = round($previous, 2);
+        $this->previous = is_null($previous) ? $previous : round($previous, 2);
     }
 
     /**
      * Calculate the trend.
      */
     public function trend(): float
     {
-        return $this->previous === 0 ? 0 : round(($this->current - $this->previous) / (($this->current + $this->previous) / 2) * 100, 1);
+        return is_null($this->previous)
+            ? 0
+            : round(($this->current - $this->previous) / (($this->current + $this->previous) / 2) * 100, 1);
     }
 
     /**

src/Widgets/Trend.php

@@ -2,10 +2,87 @@
 
 namespace Cone\Root\Widgets;
 
+use Closure;
+use Cone\Root\Widgets\Results\TrendResult;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Config;
+
 abstract class Trend extends Metric
 {
     /**
      * The Blade template.
      */
     protected string $template = 'root::widgets.trend';
+
+    /**
+     * The trend chart config.
+     */
+    protected array $config = [];
+
+    /**
+     * Create a new trend chart instance.
+     */
+    public function __construct()
+    {
+        $this->config = Config::get('root.widgets.trend', []);
+    }
+
+    /**
+     * Set the configuration.
+     */
+    public function withConfig(Closure $callback): static
+    {
+        $this->config = call_user_func_array($callback, [$this->config]);
+
+        return $this;
+    }
+
+    /**
+     * Get the widget configuration.
+     */
+    public function getConfig(): array
+    {
+        return $this->config;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function resolveQuery(Request $request): Builder
+    {
+        return parent::resolveQuery($request);
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function calculate(Request $request): TrendResult
+    {
+        return new TrendResult();
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function ranges(): array
+    {
+        return [
+            'TODAY' => __('Today'),
+            'WEEK' => __('Week to today'),
+            'MONTH' => __('Month to today'),
+            'QUARTER' => __('Quarter to today'),
+            'YEAR' => __('Year to today'),
+        ];
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function toArray(): array
+    {
+        return array_merge(parent::toArray(), [
+            'config' => $this->config,
+        ]);
+    }
 }