add metrics options and dark mode config

config/horizon.php

@@ -101,6 +101,38 @@
         'monitored' => 10080,
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Metrics
+    |--------------------------------------------------------------------------
+    |
+    | Here you can configure how many snapshots should be kept to display in
+    | the metrics graph. You should use this in conjunction with the
+    | `horizon:snapshot` schedule to define how long of a timespan
+    | you want to see in the metrics.
+    |
+    */
+
+    'metrics' => [
+        'trim_snapshots' => [
+            'job' => 24,
+            'queue' => 24,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Theme
+    |--------------------------------------------------------------------------
+    |
+    | Here you can define which theme Horizon should load.
+    |
+    | Supported: "light", "dark"
+    |
+    */
+
+    'theme' => 'light',
+
     /*
     |--------------------------------------------------------------------------
     | Fast Termination

resources/js/components/LineChart.vue

@@ -62,6 +62,6 @@
 
 <template>
     <div style="position: relative;">
-        <canvas ref="canvas" height="70"></canvas>
+        <canvas ref="canvas" height="120"></canvas>
     </div>
 </template>

resources/js/screens/metrics/preview.vue

@@ -57,7 +57,7 @@
             prepareData(data) {
                 return _.chain(data)
                     .map(value => {
-                        value.time = this.formatDate(value.time).format("hh:mmA");
+                        value.time = this.formatDate(value.time).format("MMM-D hh:mmA");
 
                         return value;
                     })
@@ -86,10 +86,11 @@
                             label: label,
                             data: _.map(data, attribute),
                             lineTension: 0,
-                            backgroundColor: 'rgba(235, 243, 249, 0.4)',
-                            pointBackgroundColor: '#3981B4',
-                            borderColor: '#3981B4',
-                            borderWidth: 4,
+                            backgroundColor: 'transparent',
+                            pointBackgroundColor: '#fff',
+                            pointBorderColor: '#7746ec',
+                            borderColor: '#7746ec',
+                            borderWidth: 2,
                         },
                     ],
                 };

src/Horizon.php

@@ -59,6 +59,11 @@ class Horizon
         'Metrics', 'Locks', 'Processes',
     ];
 
+    public function __construct()
+    {
+        static::$useDarkTheme = config('horizon.theme') === 'dark';
+    }
+
     /**
      * Determine if the given request can access the Horizon dashboard.
      *
@@ -108,11 +113,12 @@ public static function use($connection)
     /**
      * Specifies that Horizon should use the dark theme.
      *
+     * @param  boolean  $on
      * @return static
      */
-    public static function night()
+    public static function night($on = true)
     {
-        static::$useDarkTheme = true;
+        static::$useDarkTheme = $on;
 
         return new static;
     }

src/Repositories/RedisMetricsRepository.php

@@ -274,7 +274,7 @@ protected function storeSnapshotForJob($job)
         );
 
         $this->connection()->zremrangebyrank(
-            'snapshot:'.$key, 0, -25
+            'snapshot:'.$key, 0, -abs(1 + config('horizon.metrics.trim_snapshots.job', 24))
         );
     }
 
@@ -298,7 +298,7 @@ protected function storeSnapshotForQueue($queue)
         );
 
         $this->connection()->zremrangebyrank(
-            'snapshot:'.$key, 0, -25
+            'snapshot:'.$key, 0, -abs(1 + config('horizon.metrics.trim_snapshots.queue', 24))
         );
     }