chart

resources/assets/dcat/sass/dcat-app.scss

@@ -143,6 +143,10 @@ a.disabled {
   background-color: #d2d6de;
 }
 
+.bg-primary-gradient {
+  background: linear-gradient(118deg, $primary, rgba($primary, .7));
+}
+
 .img {
   cursor: pointer;
 }

resources/dist/css/plugins/loaders/animations/ball-grid-beat.css

@@ -27,66 +27,66 @@
 }
 
 .ball-grid-beat > div:nth-child(1) {
-  -webkit-animation-delay: 0.19s;
-          animation-delay: 0.19s;
-  -webkit-animation-duration: 0.87s;
-          animation-duration: 0.87s;
+  -webkit-animation-delay: -0.02s;
+          animation-delay: -0.02s;
+  -webkit-animation-duration: 0.92s;
+          animation-duration: 0.92s;
 }
 
 .ball-grid-beat > div:nth-child(2) {
-  -webkit-animation-delay: 0.8s;
-          animation-delay: 0.8s;
-  -webkit-animation-duration: 0.95s;
-          animation-duration: 0.95s;
+  -webkit-animation-delay: 0.51s;
+          animation-delay: 0.51s;
+  -webkit-animation-duration: 0.62s;
+          animation-duration: 0.62s;
 }
 
 .ball-grid-beat > div:nth-child(3) {
-  -webkit-animation-delay: 0.61s;
-          animation-delay: 0.61s;
-  -webkit-animation-duration: 0.74s;
-          animation-duration: 0.74s;
+  -webkit-animation-delay: -0.03s;
+          animation-delay: -0.03s;
+  -webkit-animation-duration: 1.35s;
+          animation-duration: 1.35s;
 }
 
 .ball-grid-beat > div:nth-child(4) {
-  -webkit-animation-delay: 0.11s;
-          animation-delay: 0.11s;
-  -webkit-animation-duration: 1.57s;
-          animation-duration: 1.57s;
+  -webkit-animation-delay: 0.7s;
+          animation-delay: 0.7s;
+  -webkit-animation-duration: 1.28s;
+          animation-duration: 1.28s;
 }
 
 .ball-grid-beat > div:nth-child(5) {
-  -webkit-animation-delay: 0.52s;
-          animation-delay: 0.52s;
-  -webkit-animation-duration: 1.33s;
-          animation-duration: 1.33s;
+  -webkit-animation-delay: 0.73s;
+          animation-delay: 0.73s;
+  -webkit-animation-duration: 1.43s;
+          animation-duration: 1.43s;
 }
 
 .ball-grid-beat > div:nth-child(6) {
-  -webkit-animation-delay: 0.62s;
-          animation-delay: 0.62s;
-  -webkit-animation-duration: 1.26s;
-          animation-duration: 1.26s;
+  -webkit-animation-delay: -0.19s;
+          animation-delay: -0.19s;
+  -webkit-animation-duration: 1.24s;
+          animation-duration: 1.24s;
 }
 
 .ball-grid-beat > div:nth-child(7) {
-  -webkit-animation-delay: 0.55s;
-          animation-delay: 0.55s;
-  -webkit-animation-duration: 0.78s;
-          animation-duration: 0.78s;
+  -webkit-animation-delay: 0.23s;
+          animation-delay: 0.23s;
+  -webkit-animation-duration: 1.26s;
+          animation-duration: 1.26s;
 }
 
 .ball-grid-beat > div:nth-child(8) {
-  -webkit-animation-delay: 0.57s;
-          animation-delay: 0.57s;
-  -webkit-animation-duration: 0.97s;
-          animation-duration: 0.97s;
+  -webkit-animation-delay: -0.04s;
+          animation-delay: -0.04s;
+  -webkit-animation-duration: 0.67s;
+          animation-duration: 0.67s;
 }
 
 .ball-grid-beat > div:nth-child(9) {
-  -webkit-animation-delay: -0.16s;
-          animation-delay: -0.16s;
-  -webkit-animation-duration: 0.7s;
-          animation-duration: 0.7s;
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+  -webkit-animation-duration: 0.68s;
+          animation-duration: 0.68s;
 }
 
 .ball-grid-beat > div {

resources/dist/css/plugins/loaders/animations/ball-grid-pulse.css

@@ -39,66 +39,66 @@
 }
 
 .ball-grid-pulse > div:nth-child(1) {
-  -webkit-animation-delay: 0.46s;
-          animation-delay: 0.46s;
-  -webkit-animation-duration: 1.49s;
-          animation-duration: 1.49s;
+  -webkit-animation-delay: 0.66s;
+          animation-delay: 0.66s;
+  -webkit-animation-duration: 1.42s;
+          animation-duration: 1.42s;
 }
 
 .ball-grid-pulse > div:nth-child(2) {
-  -webkit-animation-delay: 0.27s;
-          animation-delay: 0.27s;
-  -webkit-animation-duration: 1.38s;
-          animation-duration: 1.38s;
+  -webkit-animation-delay: 0.77s;
+          animation-delay: 0.77s;
+  -webkit-animation-duration: 0.89s;
+          animation-duration: 0.89s;
 }
 
 .ball-grid-pulse > div:nth-child(3) {
-  -webkit-animation-delay: 0.68s;
-          animation-delay: 0.68s;
-  -webkit-animation-duration: 0.76s;
-          animation-duration: 0.76s;
+  -webkit-animation-delay: 0.64s;
+          animation-delay: 0.64s;
+  -webkit-animation-duration: 0.91s;
+          animation-duration: 0.91s;
 }
 
 .ball-grid-pulse > div:nth-child(4) {
-  -webkit-animation-delay: -0.17s;
-          animation-delay: -0.17s;
-  -webkit-animation-duration: 1.51s;
-          animation-duration: 1.51s;
+  -webkit-animation-delay: 0.53s;
+          animation-delay: 0.53s;
+  -webkit-animation-duration: 1.5s;
+          animation-duration: 1.5s;
 }
 
 .ball-grid-pulse > div:nth-child(5) {
-  -webkit-animation-delay: 0.03s;
-          animation-delay: 0.03s;
-  -webkit-animation-duration: 0.98s;
-          animation-duration: 0.98s;
+  -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
+  -webkit-animation-duration: 1.35s;
+          animation-duration: 1.35s;
 }
 
 .ball-grid-pulse > div:nth-child(6) {
-  -webkit-animation-delay: -0.16s;
-          animation-delay: -0.16s;
-  -webkit-animation-duration: 0.93s;
-          animation-duration: 0.93s;
+  -webkit-animation-delay: 0.13s;
+          animation-delay: 0.13s;
+  -webkit-animation-duration: 1.11s;
+          animation-duration: 1.11s;
 }
 
 .ball-grid-pulse > div:nth-child(7) {
-  -webkit-animation-delay: -0.1s;
-          animation-delay: -0.1s;
-  -webkit-animation-duration: 0.65s;
-          animation-duration: 0.65s;
+  -webkit-animation-delay: 0.33s;
+          animation-delay: 0.33s;
+  -webkit-animation-duration: 1.58s;
+          animation-duration: 1.58s;
 }
 
 .ball-grid-pulse > div:nth-child(8) {
-  -webkit-animation-delay: 0.53s;
-          animation-delay: 0.53s;
-  -webkit-animation-duration: 1.12s;
-          animation-duration: 1.12s;
+  -webkit-animation-delay: 0.69s;
+          animation-delay: 0.69s;
+  -webkit-animation-duration: 0.66s;
+          animation-duration: 0.66s;
 }
 
 .ball-grid-pulse > div:nth-child(9) {
-  -webkit-animation-delay: -0.08s;
-          animation-delay: -0.08s;
-  -webkit-animation-duration: 1.33s;
-          animation-duration: 1.33s;
+  -webkit-animation-delay: 0.23s;
+          animation-delay: 0.23s;
+  -webkit-animation-duration: 1.28s;
+          animation-duration: 1.28s;
 }
 
 .ball-grid-pulse > div {

resources/dist/css/plugins/loaders/animations/line-scale-random.css

@@ -31,31 +31,31 @@
 }
 
 .line-scale-party > div:nth-child(1) {
-  -webkit-animation-delay: 0.31s;
-          animation-delay: 0.31s;
+  -webkit-animation-delay: -0.02s;
+          animation-delay: -0.02s;
   -webkit-animation-duration: 0.57s;
           animation-duration: 0.57s;
 }
 
 .line-scale-party > div:nth-child(2) {
-  -webkit-animation-delay: 0.5s;
-          animation-delay: 0.5s;
-  -webkit-animation-duration: 0.61s;
-          animation-duration: 0.61s;
+  -webkit-animation-delay: 0.29s;
+          animation-delay: 0.29s;
+  -webkit-animation-duration: 1.25s;
+          animation-duration: 1.25s;
 }
 
 .line-scale-party > div:nth-child(3) {
-  -webkit-animation-delay: 0.09s;
-          animation-delay: 0.09s;
-  -webkit-animation-duration: 0.45s;
-          animation-duration: 0.45s;
+  -webkit-animation-delay: -0.19s;
+          animation-delay: -0.19s;
+  -webkit-animation-duration: 0.95s;
+          animation-duration: 0.95s;
 }
 
 .line-scale-party > div:nth-child(4) {
-  -webkit-animation-delay: 0.52s;
-          animation-delay: 0.52s;
-  -webkit-animation-duration: 0.82s;
-          animation-duration: 0.82s;
+  -webkit-animation-delay: 0.72s;
+          animation-delay: 0.72s;
+  -webkit-animation-duration: 1.02s;
+          animation-duration: 1.02s;
 }
 
 .line-scale-party > div {

resources/dist/css/plugins/loaders/loaders.css

@@ -1454,66 +1454,66 @@
 }
 
 .ball-grid-beat > div:nth-child(1) {
-  -webkit-animation-delay: 0.57s;
-          animation-delay: 0.57s;
-  -webkit-animation-duration: 1.14s;
-          animation-duration: 1.14s;
+  -webkit-animation-delay: 0.53s;
+          animation-delay: 0.53s;
+  -webkit-animation-duration: 0.81s;
+          animation-duration: 0.81s;
 }
 
 .ball-grid-beat > div:nth-child(2) {
-  -webkit-animation-delay: 0.57s;
-          animation-delay: 0.57s;
-  -webkit-animation-duration: 0.76s;
-          animation-duration: 0.76s;
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+  -webkit-animation-duration: 1.07s;
+          animation-duration: 1.07s;
 }
 
 .ball-grid-beat > div:nth-child(3) {
-  -webkit-animation-delay: 0.23s;
-          animation-delay: 0.23s;
-  -webkit-animation-duration: 1.4s;
-          animation-duration: 1.4s;
+  -webkit-animation-delay: 0.09s;
+          animation-delay: 0.09s;
+  -webkit-animation-duration: 0.82s;
+          animation-duration: 0.82s;
 }
 
 .ball-grid-beat > div:nth-child(4) {
-  -webkit-animation-delay: 0.57s;
-          animation-delay: 0.57s;
-  -webkit-animation-duration: 0.86s;
-          animation-duration: 0.86s;
+  -webkit-animation-delay: -0.13s;
+          animation-delay: -0.13s;
+  -webkit-animation-duration: 1.23s;
+          animation-duration: 1.23s;
 }
 
 .ball-grid-beat > div:nth-child(5) {
-  -webkit-animation-delay: 0s;
-          animation-delay: 0s;
-  -webkit-animation-duration: 0.67s;
-          animation-duration: 0.67s;
+  -webkit-animation-delay: 0.26s;
+          animation-delay: 0.26s;
+  -webkit-animation-duration: 0.82s;
+          animation-duration: 0.82s;
 }
 
 .ball-grid-beat > div:nth-child(6) {
-  -webkit-animation-delay: 0.21s;
-          animation-delay: 0.21s;
-  -webkit-animation-duration: 1.53s;
-          animation-duration: 1.53s;
+  -webkit-animation-delay: 0.77s;
+          animation-delay: 0.77s;
+  -webkit-animation-duration: 1.23s;
+          animation-duration: 1.23s;
 }
 
 .ball-grid-beat > div:nth-child(7) {
-  -webkit-animation-delay: -0.03s;
-          animation-delay: -0.03s;
-  -webkit-animation-duration: 0.73s;
-          animation-duration: 0.73s;
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+  -webkit-animation-duration: 1.13s;
+          animation-duration: 1.13s;
 }
 
 .ball-grid-beat > div:nth-child(8) {
-  -webkit-animation-delay: 0.75s;
-          animation-delay: 0.75s;
-  -webkit-animation-duration: 1.33s;
-          animation-duration: 1.33s;
+  -webkit-animation-delay: 0.31s;
+          animation-delay: 0.31s;
+  -webkit-animation-duration: 0.79s;
+          animation-duration: 0.79s;
 }
 
 .ball-grid-beat > div:nth-child(9) {
-  -webkit-animation-delay: 0.34s;
-          animation-delay: 0.34s;
-  -webkit-animation-duration: 0.99s;
-          animation-duration: 0.99s;
+  -webkit-animation-delay: 0.65s;
+          animation-delay: 0.65s;
+  -webkit-animation-duration: 1.15s;
+          animation-duration: 1.15s;
 }
 
 .ball-grid-beat > div {
@@ -1575,66 +1575,66 @@
 }
 
 .ball-grid-pulse > div:nth-child(1) {
-  -webkit-animation-delay: 0.68s;
-          animation-delay: 0.68s;
-  -webkit-animation-duration: 0.74s;
-          animation-duration: 0.74s;
+  -webkit-animation-delay: 0.75s;
+          animation-delay: 0.75s;
+  -webkit-animation-duration: 1.03s;
+          animation-duration: 1.03s;
 }
 
 .ball-grid-pulse > div:nth-child(2) {
-  -webkit-animation-delay: 0.51s;
-          animation-delay: 0.51s;
-  -webkit-animation-duration: 1.36s;
-          animation-duration: 1.36s;
+  -webkit-animation-delay: 0.49s;
+          animation-delay: 0.49s;
+  -webkit-animation-duration: 0.93s;
+          animation-duration: 0.93s;
 }
 
 .ball-grid-pulse > div:nth-child(3) {
-  -webkit-animation-delay: 0.72s;
-          animation-delay: 0.72s;
-  -webkit-animation-duration: 1.31s;
-          animation-duration: 1.31s;
+  -webkit-animation-delay: 0.44s;
+          animation-delay: 0.44s;
+  -webkit-animation-duration: 0.65s;
+          animation-duration: 0.65s;
 }
 
 .ball-grid-pulse > div:nth-child(4) {
-  -webkit-animation-delay: 0.06s;
-          animation-delay: 0.06s;
-  -webkit-animation-duration: 1.46s;
-          animation-duration: 1.46s;
+  -webkit-animation-delay: 0.34s;
+          animation-delay: 0.34s;
+  -webkit-animation-duration: 0.74s;
+          animation-duration: 0.74s;
 }
 
 .ball-grid-pulse > div:nth-child(5) {
-  -webkit-animation-delay: 0.01s;
-          animation-delay: 0.01s;
-  -webkit-animation-duration: 0.79s;
-          animation-duration: 0.79s;
+  -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
+  -webkit-animation-duration: 1.09s;
+          animation-duration: 1.09s;
 }
 
 .ball-grid-pulse > div:nth-child(6) {
-  -webkit-animation-delay: -0.13s;
-          animation-delay: -0.13s;
-  -webkit-animation-duration: 1.34s;
-          animation-duration: 1.34s;
+  -webkit-animation-delay: 0.51s;
+          animation-delay: 0.51s;
+  -webkit-animation-duration: 0.71s;
+          animation-duration: 0.71s;
 }
 
 .ball-grid-pulse > div:nth-child(7) {
-  -webkit-animation-delay: 0.63s;
-          animation-delay: 0.63s;
-  -webkit-animation-duration: 0.66s;
-          animation-duration: 0.66s;
+  -webkit-animation-delay: 0.37s;
+          animation-delay: 0.37s;
+  -webkit-animation-duration: 1.35s;
+          animation-duration: 1.35s;
 }
 
 .ball-grid-pulse > div:nth-child(8) {
-  -webkit-animation-delay: 0.5s;
-          animation-delay: 0.5s;
-  -webkit-animation-duration: 0.78s;
-          animation-duration: 0.78s;
+  -webkit-animation-delay: -0.01s;
+          animation-delay: -0.01s;
+  -webkit-animation-duration: 1.52s;
+          animation-duration: 1.52s;
 }
 
 .ball-grid-pulse > div:nth-child(9) {
-  -webkit-animation-delay: -0.02s;
-          animation-delay: -0.02s;
-  -webkit-animation-duration: 0.94s;
-          animation-duration: 0.94s;
+  -webkit-animation-delay: 0.68s;
+          animation-delay: 0.68s;
+  -webkit-animation-duration: 1.6s;
+          animation-duration: 1.6s;
 }
 
 .ball-grid-pulse > div {
@@ -2181,31 +2181,31 @@
 }
 
 .line-scale-party > div:nth-child(1) {
-  -webkit-animation-delay: 0.26s;
-          animation-delay: 0.26s;
-  -webkit-animation-duration: 1.01s;
-          animation-duration: 1.01s;
+  -webkit-animation-delay: 0.68s;
+          animation-delay: 0.68s;
+  -webkit-animation-duration: 0.6s;
+          animation-duration: 0.6s;
 }
 
 .line-scale-party > div:nth-child(2) {
-  -webkit-animation-delay: -0.12s;
-          animation-delay: -0.12s;
-  -webkit-animation-duration: 1s;
-          animation-duration: 1s;
+  -webkit-animation-delay: 0.78s;
+          animation-delay: 0.78s;
+  -webkit-animation-duration: 0.39s;
+          animation-duration: 0.39s;
 }
 
 .line-scale-party > div:nth-child(3) {
-  -webkit-animation-delay: -0.19s;
-          animation-delay: -0.19s;
-  -webkit-animation-duration: 1.07s;
-          animation-duration: 1.07s;
+  -webkit-animation-delay: 0.11s;
+          animation-delay: 0.11s;
+  -webkit-animation-duration: 0.84s;
+          animation-duration: 0.84s;
 }
 
 .line-scale-party > div:nth-child(4) {
-  -webkit-animation-delay: 0.7s;
-          animation-delay: 0.7s;
-  -webkit-animation-duration: 1.07s;
-          animation-duration: 1.07s;
+  -webkit-animation-delay: -0.09s;
+          animation-delay: -0.09s;
+  -webkit-animation-duration: 0.56s;
+          animation-duration: 0.56s;
 }
 
 .line-scale-party > div {

resources/dist/dcat/css/dcat-app.css

@@ -2888,6 +2888,10 @@ a.disabled {
   background-color: #d2d6de;
 }
 
+.bg-primary-gradient {
+  background: linear-gradient(118deg, #5c6bc6, rgba(92, 107, 198, 0.7));
+}
+
 .img {
   cursor: pointer;
 }

src/Controllers/Dashboard.php

@@ -20,7 +20,6 @@ class Dashboard
     {
         return Tab::make()
             ->padding(0)
-            ->custom()
             ->add('Environment', static::environment())
             ->add('Extensions', static::extensions())
             ->add('Dependencies', static::dependencies());

src/Layout/Assets.php

@@ -168,6 +168,9 @@ class Assets
         '@jquery.inputmask' => [
             'js' => '@admin/dcat/plugins/input-mask/jquery.inputmask.bundle.min.js',
         ],
+        '@apex-charts' => [
+            'js' => '@admin/vendors/js/charts/apexcharts.min.js',
+        ],
     ];
 
     /**

src/Widgets/ApexCharts/Chart.php

@@ -0,0 +1,271 @@
+<?php
+
+namespace Dcat\Admin\Widgets\ApexCharts;
+
+use Dcat\Admin\Support\Helper;
+use Dcat\Admin\Widgets\Widget;
+use Illuminate\Support\Str;
+
+class Chart extends Widget
+{
+    public static $js = '@apex-charts';
+
+    protected $containerSelector;
+
+    protected $options = [];
+
+    protected $built = false;
+
+    protected $scripts = [
+        'extend' => 'return options',
+    ];
+
+    public function __construct($containerSelector = null, $options = [])
+    {
+        if ($containerSelector && ! is_string($containerSelector)) {
+            $options = $containerSelector;
+            $containerSelector = null;
+        }
+
+        $this->selector($containerSelector);
+
+        $this->options($options);
+    }
+
+    /**
+     * 设置或获取图表容器选择器
+     *
+     * @param string|null $selector
+     *
+     * @return $this|string|null
+     */
+    public function selector(?string $selector = null)
+    {
+        if ($selector === null) {
+            return $this->containerSelector;
+        }
+
+        $this->containerSelector = $selector;
+
+        if ($selector && ! $this->built) {
+            $this->autoRender();
+        }
+
+        return $this;
+    }
+
+    /**
+     * @param string|array $title
+     *
+     * @return $this
+     */
+    public function title($title)
+    {
+        if (is_string($title)) {
+            $options = ['text' => $title];
+        } else {
+            $options = Helper::array($title);
+        }
+
+        $this->options['title'] = $options;
+
+        return $this;
+    }
+
+    /**
+     * @param array $series
+     *
+     * @return $this
+     */
+    public function series($series)
+    {
+        $this->options['series'] = Helper::array($series);
+
+        return $this;
+    }
+
+    /**
+     * @param array $value
+     *
+     * @return $this
+     */
+    public function labels($value)
+    {
+        $this->options['labels'] = Helper::array($value);
+
+        return $this;
+    }
+
+    /**
+     * @param string|array $colors
+     *
+     * @return $this
+     */
+    public function colors($colors)
+    {
+        $this->options['colors'] = Helper::array($colors);
+
+        return $this;
+    }
+
+    /**
+     * @param array $value
+     *
+     * @return $this
+     */
+    public function stroke($value)
+    {
+        $this->options['stroke'] = Helper::array($value);
+
+        return $this;
+    }
+
+    /**
+     * @param array $value
+     *
+     * @return $this
+     */
+    public function xaxis($value)
+    {
+        $this->options['xaxis'] = Helper::array($value);
+
+        return $this;
+    }
+
+    /**
+     * @param array $value
+     *
+     * @return $this
+     */
+    public function tooltip($value)
+    {
+        $this->options['tooltip'] = Helper::array($value);
+
+        return $this;
+    }
+
+    /**
+     * @param array $value
+     *
+     * @return $this
+     */
+    public function yaxis($value)
+    {
+        $this->options['yaxis'] = Helper::array($value);
+
+        return $this;
+    }
+
+    /**
+     * @param array $value
+     *
+     * @return $this
+     */
+    public function fill($value)
+    {
+        $this->options['fill'] = Helper::array($value);
+
+        return $this;
+    }
+
+   /**
+     * @param array $value
+     *
+     * @return $this
+     */
+    public function chart($value)
+    {
+        $this->options['chart'] = Helper::array($value);
+
+        return $this;
+    }
+
+    /**
+     * @param array|bool $value
+     *
+     * @return $this
+     */
+    public function dataLabels($value)
+    {
+        if (is_bool($value)) {
+            $value = ['enabled' => $value];
+        }
+
+        $this->options['dataLabels'] = Helper::array($value);
+
+        return $this;
+    }
+
+    /**
+     * @param string|\Closure $script
+     *
+     * @return $this
+     */
+    public function extendOptions($script)
+    {
+        $this->scripts['extend'] = value($script);
+
+        return $this;
+    }
+
+    /**
+     * @return string
+     */
+    protected function script()
+    {
+        $options = json_encode($this->options);
+
+        return <<<JS
+var options = {$options}, extend = function (options) {
+    {$this->scripts['extend']}
+};
+
+var chart = new ApexCharts(
+    document.querySelector("{$this->containerSelector}"), 
+    $.extend(options, extend(options))
+);
+chart.render();
+JS;
+    }
+
+    /**
+     * @return string
+     */
+    public function render()
+    {
+        if ($this->built) {
+            return;
+        }
+        $this->built = true;
+
+        $hasSelector = $this->containerSelector ? true : false;
+
+        if (! $hasSelector) {
+            $id = $this->generateId();
+
+            $this->selector('#'.$id);
+        }
+
+        $this->script = $this->script();
+
+        $this->collectAssets();
+
+        if ($hasSelector) {
+            return;
+        }
+
+        // 没有指定容器选择器，则需自动生成
+        $this->setHtmlAttribute([
+            'id' => $id,
+        ]);
+
+        return <<<HTML
+<div {$this->formatHtmlAttributes()}></div>
+HTML;
+    }
+
+    protected function generateId()
+    {
+        return 'apex-chart-'.$this->type.Str::random(8);
+    }
+}

src/Widgets/Chart/Chart.php

@@ -26,6 +26,9 @@ abstract class Chart extends Widget
     public static $globalSettings = [
         'defaultFontColor'  => '#555',
         'defaultFontFamily' => 'Nunito,system-ui,sans-serif',
+
+        'scaleShowGridLines' => false,
+        'scaleShowHorizontalLines' => false,
     ];
 
     public $colors = [];
@@ -363,26 +366,6 @@ abstract class Chart extends Widget
         }
     }
 
-    /**
-     * Make element id.
-     *
-     * @return void
-     */
-    protected function makeId()
-    {
-        if ($this->id) {
-            return;
-        }
-        $this->id = 'chart_'.$this->type.Str::random(8);
-    }
-
-    public function getId()
-    {
-        $this->makeId();
-
-        return $this->id;
-    }
-
     /**
      * Setup script.
      *
@@ -390,6 +373,8 @@ abstract class Chart extends Widget
      */
     protected function script()
     {
+        $this->setupGlobalSettingScripts();
+
         $config = [
             'type'    => $this->type,
             'data'    => &$this->data,
@@ -397,34 +382,45 @@ abstract class Chart extends Widget
         ];
         $options = json_encode($config);
 
-        // Global configure.
-        $globalSettings = '';
-        foreach (self::$globalSettings as $k => $v) {
-            $globalSettings .= sprintf('Chart.defaults.global.%s="%s";', $k, $v);
-        }
-
         if (! $this->allowBuildRequestScript()) {
             return <<<JS
-{$globalSettings}
-setTimeout(function(){ new Chart($("#{$this->id}").get(0).getContext("2d"), $options) },60)
+setTimeout(function () { 
+    new Chart($("#{$this->getId()}").get(0).getContext("2d"), $options) 
+}, 60)
 JS;
         }
 
         $this->fetched(
             <<<JS
-if (!response.status) {
+if (! response.status) {
     return Dcat.error(response.message || 'Server internal error.');
 }        
-var id = '{$this->id}', opt = $options, prev = window['obj'+id];
+var id = '{$this->getId()}', opt = $options, prev = window['chart'+id];
+
 opt.options = $.extend(opt.options, response.options || {});
 opt.data.datasets = response.datasets || opt.data.datasets;
-if (prev) prev.destroy();
 
-window['obj'+id] = new Chart($("#"+id).get(0).getContext("2d"), opt);
+if (prev) {
+    prev.destroy();
+}
+
+window['chart'+id] = new Chart($("#"+id).get(0).getContext("2d"), opt);
 JS
         );
 
-        return $globalSettings.$this->buildRequestScript();
+        return $this->buildRequestScript();
+    }
+
+    protected function setupGlobalSettingScripts()
+    {
+        // Global configure.
+        $globalSettings = '';
+
+        foreach (self::$globalSettings as $k => $v) {
+            $globalSettings .= sprintf('Chart.defaults.global.%s="%s";', $k, $v);
+        }
+
+        Admin::script($globalSettings);
     }
 
     /**
@@ -448,13 +444,12 @@ JS
      */
     public function render()
     {
-        $this->makeId();
         $this->fillColor();
 
         $this->script = $this->script();
 
         $this->setHtmlAttribute([
-            'id' => $this->id,
+            'id' => $this->getId(),
         ]);
 
         $this->collectAssets();
@@ -514,4 +509,14 @@ HTML;
             $this->colors = Color::$chartTheme['blue'];
         }
     }
+
+    protected function generateId()
+    {
+       return 'chart-'.$this->type.Str::random(8);
+    }
+
+    public function getId()
+    {
+        return $this->id ?: ($this->id = $this->generateId());
+    }
 }