数据统计卡片

.gitignore

@@ -5,4 +5,4 @@ composer.lock
 /node_modules
 package-lock.json
 mix-manifest.json
-images/
+/images/

resources/assets/dcat/sass/_colors.scss

@@ -57,6 +57,9 @@
 .text-30 {
   color: $dark30!important;
 }
+.text-35 {
+  color: $dark35!important;
+}
 .text-40 {
   color: $dark40!important;
 }
@@ -132,6 +135,9 @@
 .bg-30 {
   background: $dark30!important;
 }
+.bg-35 {
+  background: $dark35!important;
+}
 .bg-40 {
   background: $dark40!important;
 }

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

@@ -32,10 +32,6 @@ html body .content .content-wrapper {
 ol, ul, dl {
   margin-bottom: 0;
 }
-.testcolor {
-  color: #00b5b5;
-  color: #01847f;
-}
 
 // 阴影
 .shadow-0 {

resources/assets/dcat/sass/variables/_colors.scss

@@ -43,6 +43,7 @@ $light: #F7F7F9;
 // 深色
 $dark20: #f6fbff;
 $dark30: #f4f7fa;
+$dark35: #e7eef7;
 $dark40: #ebf0f3;
 $dark50: #d3dde5;
 $dark60: #bacad6;

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

@@ -109,11 +109,6 @@ dl {
   margin-bottom: 0;
 }
 
-.testcolor {
-  color: #00b5b5;
-  color: #01847f;
-}
-
 .shadow-0 {
   box-shadow: none !important;
 }
@@ -202,6 +197,10 @@ dl {
   color: #f4f7fa !important;
 }
 
+.text-35 {
+  color: #e7eef7 !important;
+}
+
 .text-40 {
   color: #ebf0f3 !important;
 }
@@ -294,6 +293,10 @@ dl {
   background: #f4f7fa !important;
 }
 
+.bg-35 {
+  background: #e7eef7 !important;
+}
+
 .bg-40 {
   background: #ebf0f3 !important;
 }

resources/lang/en/admin.php

@@ -191,6 +191,9 @@ return [
     'grid_items_selected'      => '{n} items selected',
     'nothing_updated'          => 'Nothing has been updated.',
     'welcome_back'             => 'Welcome back, please login to your account.',
+    'documentation'            => 'Documentation',
+    'demo'                     => 'Demo',
+    'extensions'               => 'Extensions',
     'validation'               => [
         'match'     => 'The :attribute and :other must match.',
         'minlength' => 'The :attribute must be at least :min characters.',

resources/lang/zh-CN/admin.php

@@ -192,6 +192,9 @@ return [
     'grid_items_selected'      => '已选择 {n} 项',
     'nothing_updated'          => '没有任何数据被更改',
     'welcome_back'             => '欢迎回来，请登录您的账号。',
+    'documentation'            => '文档',
+    'demo'                     => '示例',
+    'extensions'               => '扩展',
     'validation'               => [
         'match'     => '与 :attribute 不匹配。',
         'minlength' => ':attribute 字符长度不能少于 :min。',

resources/views/dashboard/title.blade.php

@@ -1,7 +1,6 @@
 <style>
     .links {
         text-align: center;
-        /*margin-bottom: 20px;*/
     }
 
     .links > a {
@@ -11,7 +10,7 @@
         letter-spacing: .1rem;
         text-decoration: none;
         text-transform: uppercase;
-        color: {{ Admin::color()->white50() }};
+        color: rgba(255, 255, 255, 0.7);
     }
 
     .dashborard h1 {
@@ -20,15 +19,23 @@
     }
 </style>
 
-<div class="card" style="height: 176px;background: {{ Admin::color()->alpha('primary', 0.9) }}">
+<div class="card" style="background: {{ Admin::color()->alpha('primary', 0.95) }}">
     <div class="card-body">
         <div class="text-center dashborard">
+
+            <div class="avatar avatar-xl bg-white shadow mt-1">
+                <div class="avatar-content">
+                    <i class="feather icon-award text-primary font-large-1"></i>
+                </div>
+            </div>
+
             <div class="text-center mb-1">
                 <h1 class="mb-3 mt-2 white">Dcat Admin</h1>
                 <div class="links mb-2">
                     <a href="https://github.com/jqhph/dcat-admin" target="_blank">Github</a>
-                    <a href="https://jqhph.github.io/dcat-admin/docs.html" id="doc-link" target="_blank">Documentation</a>
-                    <a href="https://jqhph.github.io/dcat-admin/demo.html" id="demo-link" target="_blank">Demo</a>
+                    <a href="https://jqhph.github.io/dcat-admin/docs.html" id="doc-link" target="_blank">{{ __('admin.documentation') }}</a>
+                    <a href="https://jqhph.github.io/dcat-admin/docs/master/extensions.html" id="demo-link" target="_blank">{{ __('admin.extensions') }}</a>
+                    <a href="https://jqhph.github.io/dcat-admin/demo.html" id="demo-link" target="_blank">{{ __('admin.demo') }}</a>
                 </div>
             </div>
         </div>

src/Color.php

@@ -43,6 +43,7 @@ use Dcat\Admin\Support\Helper;
  * @method string tear1(int $amt = 0)
  * @method string dark20(int $amt = 0)
  * @method string dark30(int $amt = 0)
+ * @method string dark35(int $amt = 0)
  * @method string dark40(int $amt = 0)
  * @method string dark50(int $amt = 0)
  * @method string dark60(int $amt = 0)
@@ -136,6 +137,7 @@ class Color
         // 深色
         'dark20' => '#f6fbff',
         'dark30' => '#f4f7fa',
+        'dark35' => '#e7eef7',
         'dark40' => '#ebf0f3',
         'dark50' => '#d3dde5',
         'dark60' => '#bacad6',

src/Widgets/Metrics/BarChartCard.php

@@ -0,0 +1,100 @@
+<?php
+
+namespace Dcat\Admin\Widgets\Metrics;
+
+use Dcat\Admin\Admin;
+use Dcat\Admin\Support\Helper;
+use Illuminate\Contracts\Support\Renderable;
+
+class BarChartCard extends RadialBarChartCard
+{
+    /**
+     * 内容宽度.
+     *
+     * @var array
+     */
+    protected $contentWidth = [4, 8];
+
+    /**
+     * @var int
+     */
+    protected $chartHeight = 200;
+
+    /**
+     * @var int
+     */
+    protected $chartMarginBottom = 0;
+
+    /**
+     * @var bool
+     */
+    protected $chartPullRight = true;
+
+    /**
+     * 图表默认配置.
+     *
+     * @return array
+     */
+    protected function defaultChartOptions()
+    {
+        $color = Admin::color();
+        
+        $colors = [
+            $color->primary()
+        ];
+
+        return [
+            'chart' => [
+                'type' => 'bar',
+                'height' => 200,
+                'sparkline' => ['enabled' => true],
+                'toolbar' => ['show' => false],
+            ],
+            'states' => [
+                'hover' => [
+                    'filter' => 'none',
+                ],
+            ],
+            'colors' => $colors,
+            'series' => [
+                [
+                    'name' => 'Title',
+                    'data' => [75, 125, 225, 175, 125, 75, 25],
+                ],
+            ],
+            'grid' => [
+                'show' => false,
+                'padding' => [
+                    'left' => 0,
+                    'right' => 0,
+                ],
+            ],
+
+            'plotOptions' => [
+                'bar' => [
+                    'columnWidth' => '44%',
+                    'distributed' => true,
+                    //'endingShape' => 'rounded',
+                ],
+            ],
+            'tooltip' => [
+                'x' => ['show' => false],
+            ],
+            'xaxis' => [
+                'type' => 'numeric',
+            ],
+        ];
+    }
+
+    /**
+     * 设置柱间距.
+     *
+     * @param string $value
+     *
+     * @return $this
+     */
+    public function chartBarColumnWidth($value)
+    {
+        return $this->chartOption('plotOptions.bar.columnWidth', $value);
+    }
+}

src/Widgets/Metrics/DonutChartCard.php

@@ -9,7 +9,7 @@ class DonutChartCard extends Card
     /**
      * @var int
      */
-    protected $chartHeight = 135;
+    protected $chartHeight = 128;
 
     /**
      * 内容宽度.
@@ -63,7 +63,10 @@ class DonutChartCard extends Card
     {
         parent::init();
 
-        // 使用图表s
+        // 卡片默认高度
+        $this->height(165);
+
+        // 使用图表
         $this->useChart();
     }
 

src/Widgets/Metrics/SparklineChartCard.php → src/Widgets/Metrics/LineChartCard.php

@@ -2,8 +2,15 @@
 
 namespace Dcat\Admin\Widgets\Metrics;
 
-class SparklineChartCard extends Card
+class LineChartCard extends Card
 {
+    /**
+     * 图表默认高度
+     *
+     * @var int
+     */
+    protected $chartHeight = 51;
+
     /**
      * 趋势图图表默认配置
      *
@@ -65,6 +72,8 @@ class SparklineChartCard extends Card
     {
         parent::init();
 
+        $this->height(165);
+
         // 使用图表s
         $this->useChart();
     }
@@ -79,6 +88,16 @@ class SparklineChartCard extends Card
         return $this->chartOption('stroke.curve', 'straight');
     }
 
+    /**
+     * 设置线条为曲线.
+     *
+     * @return $this
+     */
+    public function chartSmooth()
+    {
+        return $this->chartOption('stroke.curve', 'smooth');
+    }
+
     /**
      * 渲染内容，加上图表.
      *

src/Widgets/Metrics/RadialBarChartCard.php

@@ -37,6 +37,13 @@ class RadialBarChartCard extends Card
      */
     protected $chartMarginBottom = -10;
 
+    /**
+     * 图表位置靠右.
+     *
+     * @var bool
+     */
+    protected $chartPullRight = false;
+
     /**
      * 初始化
      */
@@ -133,6 +140,20 @@ class RadialBarChartCard extends Card
         return $this;
     }
 
+    /**
+     * 图表位置靠右.
+     *
+     * @param bool $value
+     *
+     * @return $this
+     */
+    public function chartPullRight(bool $value = true)
+    {
+        $this->chartPullRight = $value;
+
+        return $this;
+    }
+
     /**
      * @return string
      */
@@ -152,12 +173,13 @@ class RadialBarChartCard extends Card
             $content = parent::renderContent();
 
             $content = <<<HTML
-<div class="metric-content col-sm-{$this->contentWidth[0]} d-flex flex-column flex-wrap text-center">
+<div class="metric-content col-sm-{$this->contentWidth[0]}">
     {$content}
 </div>
 HTML;
         }
 
+        $justifyClass = $this->chartPullRight ? 'justify-content-between' : 'justify-content-center';
 
         return <<<HTML
 <div class="card-content">
@@ -165,8 +187,9 @@ HTML;
         <div class="row">
             {$content}
             
-            <div class="col-sm-{$this->contentWidth[1]} d-flex justify-content-center">
-                {$this->renderChart()}
+            <div class="col-sm-{$this->contentWidth[1]} d-flex {$justifyClass}">
+                <div></div>
+                <div>{$this->renderChart()}</div>
             </div>
         </div>
         <div class="metric-footer d-flex justify-content-between">