安装模板

src/Console/InstallCommand.php

@@ -77,9 +77,11 @@ class InstallCommand extends Command
         $this->line('<info>Admin directory was created:</info> '.str_replace(base_path(), '', $this->directory));
 
         $this->makeDir('Controllers');
+        $this->makeDir('Metrics/Examples');
 
         $this->createHomeController();
         $this->createAuthController();
+        $this->createMetricCards();
 
         $this->createBootstrapFile();
         $this->createRoutesFile();
@@ -114,11 +116,52 @@ class InstallCommand extends Command
 
         $this->laravel['files']->put(
             $authController,
-            str_replace('DummyNamespace', config('admin.route.namespace'), $contents)
+            str_replace(
+                ['DummyNamespace', 'MetricsNamespace'],
+                [$this->namespace('Controllers'), $this->namespace('Metrics\\Examples')],
+                $contents
+            )
         );
         $this->line('<info>AuthController file was created:</info> '.str_replace(base_path(), '', $authController));
     }
 
+    /**
+     * @return void
+     */
+    public function createMetricCards()
+    {
+        $map = [
+            '/Metrics/Examples/NewUsers.php'      => 'metrics/NewUsers',
+            '/Metrics/Examples/NewDevices.php'    => 'metrics/NewDevices',
+            '/Metrics/Examples/ProductOrders.php' => 'metrics/ProductOrders',
+            '/Metrics/Examples/Sessions.php'      => 'metrics/Sessions',
+            '/Metrics/Examples/Tickets.php'       => 'metrics/Tickets',
+        ];
+
+        $namespace = $this->namespace('Metrics\\Examples');
+
+        foreach ($map as $path => $stub) {
+            $this->laravel['files']->put(
+                $this->directory.$path,
+                str_replace(
+                    'DummyNamespace',
+                    $namespace,
+                    $this->getStub($stub)
+                )
+            );
+        }
+    }
+
+    /**
+     * @param string $name
+     *
+     * @return string
+     */
+    protected function namespace($name = null)
+    {
+        return trim(str_replace('/', '\\', $this->directory), '\\').($name ? "\\{$name}" : '');
+    }
+
     /**
      * Create routes file.
      *

src/Console/stubs/HomeController.stub

@@ -1,47 +1,36 @@
 <?php
 
-namespace App\Admin\Controllers;
+namespace DummyNamespace;
 
+use MetricsNamespace\Examples;
 use App\Http\Controllers\Controller;
 use Dcat\Admin\Controllers\Dashboard;
 use Dcat\Admin\Layout\Column;
 use Dcat\Admin\Layout\Content;
 use Dcat\Admin\Layout\Row;
-use Dcat\Admin\Widgets\Box;
 
 class HomeController extends Controller
 {
     public function index(Content $content)
     {
         return $content
-            ->title('Dashboard')
+            ->header('Dashboard')
             ->description('Description...')
-            ->row(Dashboard::title())
-            ->row(function (Row $row) {
+            ->body(function (Row $row) {
+                $row->column(6, function (Column $column) {
+                    $column->row(Dashboard::title());
+                    $column->row(new Examples\Tickets());
+                });
 
-                $row->column(
-                    4,
-                    Box::make('Environment', Dashboard::environment())
-                        ->padding('0')
-                        ->style('default')
-                        ->collapsable()
-                );
+                $row->column(6, function (Column $column) {
+                    $column->row(function (Row $row) {
+                        $row->column(6, new Examples\NewUsers());
+                        $row->column(6, new Examples\NewDevices());
+                    });
 
-                $row->column(
-                    4,
-                    Box::make('Dependencies', Dashboard::dependencies())
-                        ->padding('0')
-                        ->style('default')
-                        ->collapsable()
-                );
-
-                $row->column(
-                    4,
-                    Box::make('Extensions', Dashboard::extensions())
-                        ->padding('0')
-                        ->style('default')
-                        ->collapsable()
-                );
+                    $column->row(new Examples\Sessions());
+                    $column->row(new Examples\ProductOrders());
+                });
             });
     }
 }

src/Console/stubs/metrics/NewDevices.stub

@@ -0,0 +1,99 @@
+<?php
+
+namespace DummyNamespace;
+
+use Dcat\Admin\Admin;
+use Dcat\Admin\Widgets\Metrics\DonutChartCard;
+
+class NewDevices extends DonutChartCard
+{
+    protected $labels = ['Desktop', 'Mobile'];
+
+    /**
+     * 初始化卡片内容
+     */
+    protected function init()
+    {
+        parent::init();
+
+        $color = Admin::color();
+        $colors = [$color->primary(), $color->alpha('blue2', 0.5)];
+
+        $this->title('New Devices');
+        $this->subTitle('Last 30 days');
+        $this->chartLabels($this->labels);
+        // 设置图表颜色
+        $this->chartColors($colors);
+    }
+
+    /**
+     * 渲染模板
+     *
+     * @return string
+     */
+    public function render()
+    {
+        $this->fill();
+
+        return parent::render();
+    }
+
+    /**
+     * 写入数据.
+     *
+     * @return void
+     */
+    public function fill()
+    {
+        $this->withContent(44.9, 28.6);
+
+        // 图表数据
+        $this->withChart([44.9, 28.6]);
+    }
+
+    /**
+     * 设置图表数据.
+     *
+     * @param array $data
+     *
+     * @return $this
+     */
+    public function withChart(array $data)
+    {
+        return $this->chart([
+            'series' => $data
+        ]);
+    }
+
+    /**
+     * 设置卡片头部内容.
+     *
+     * @param mixed $desktop
+     * @param mixed $mobile
+     *
+     * @return $this
+     */
+    protected function withContent($desktop, $mobile)
+    {
+        $blue = Admin::color()->alpha('blue2', 0.5);
+
+        $style = 'margin-bottom: 8px';
+
+        return $this->content(
+            <<<HTML
+<div class="d-flex justify-content-between pl-1 pr-1 pt-1" style="{$style}">
+    <div>
+        <i class="fa fa-circle text-primary"></i> {$this->labels[0]}
+    </div>
+    <div>{$desktop}</div>
+</div>
+<div class="d-flex justify-content-between pl-1 pr-1" style="{$style}">
+    <div>
+        <i class="fa fa-circle" style="color: $blue"></i> {$this->labels[1]}
+    </div>
+    <div>{$mobile}</div>
+</div>
+HTML
+        );
+    }
+}

src/Console/stubs/metrics/NewUsers.stub

@@ -0,0 +1,93 @@
+<?php
+
+namespace DummyNamespace;
+
+use Dcat\Admin\Widgets\Metrics\LineChartCard;
+use Illuminate\Http\Request;
+
+class NewUsers extends LineChartCard
+{
+    /**
+     * @var string
+     */
+    protected $label = 'New Users';
+
+    /**
+     * 初始化卡片内容
+     *
+     * @return void
+     */
+    protected function init()
+    {
+        parent::init();
+
+        $this->title($this->label);
+        $this->dropdown([
+            '7' => 'Last 7 Days',
+            '28' => 'Last 28 Days',
+            '30' => 'Last Month',
+            '365' => 'Last Year',
+        ]);
+    }
+
+    /**
+     * 处理请求
+     *
+     * @param Request $request
+     *
+     * @return mixed|void
+     */
+    public function handle(Request $request)
+    {
+        switch ($request->get('option')) {
+            case '365':
+            case '30':
+            case '28':
+            case '7':
+            default:
+                // 卡片内容
+                $this->withContent('89.2k');
+
+                // 图表数据
+                $this->withChart([28, 40, 36, 52, 38, 60, 55,]);
+        }
+    }
+
+    /**
+     * 设置图表数据.
+     *
+     * @param array $data
+     *
+     * @return $this
+     */
+    public function withChart(array $data)
+    {
+        return $this->chart([
+            'series' => [
+                [
+                    'name' => $this->label,
+                    'data' => $data,
+                ],
+            ],
+        ]);
+    }
+
+    /**
+     * 设置卡片内容.
+     *
+     * @param string $content
+     *
+     * @return $this
+     */
+    public function withContent($content)
+    {
+        return $this->content(
+            <<<HTML
+<div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px">
+    <h2 class="ml-1 font-large-1">{$content}</h2>
+    <span class="mb-0 mr-1 text-80">{$this->label}</span>
+</div>
+HTML
+        );
+    }
+}

src/Console/stubs/metrics/ProductOrders.stub

@@ -0,0 +1,115 @@
+<?php
+
+namespace DummyNamespace;
+
+use Dcat\Admin\Widgets\Metrics\RoundChartCard;
+use Illuminate\Http\Request;
+
+class ProductOrders extends RoundChartCard
+{
+    /**
+     * 初始化卡片内容
+     */
+    public function init()
+    {
+        parent::init();
+
+        $this->title('Product Orders');
+        $this->height(180);
+        $this->chartLabels(['Finished', 'Pending', 'Rejected']);
+        $this->dropdown([
+            '7' => 'Last 7 Days',
+            '28' => 'Last 28 Days',
+            '30' => 'Last Month',
+            '365' => 'Last Year',
+        ]);
+    }
+
+    /**
+     * 处理请求
+     *
+     * @param Request $request
+     *
+     * @return mixed|void
+     */
+    public function handle(Request $request)
+    {
+        switch ($request->get('option')) {
+            case '365':
+            case '30':
+            case '28':
+            case '7':
+            default:
+                // 卡片内容
+                $this->withContent(23043, 14658, 4758);
+
+                // 图表数据
+                $this->withChart([70, 52, 26]);
+
+                // 总数
+                $this->chartTotal('Total', 344);
+        }
+    }
+
+    /**
+     * 设置图表数据.
+     *
+     * @param array $data
+     *
+     * @return $this
+     */
+    public function withChart(array $data)
+    {
+        return $this->chart([
+            'series' => $data,
+        ]);
+    }
+
+    /**
+     * 卡片内容.
+     *
+     * @param int $finished
+     * @param int $pending
+     * @param int $rejected
+     *
+     * @return $this
+     */
+    public function withContent($finished, $pending, $rejected)
+    {
+        return $this->content(
+            <<<HTML
+<div class="col-12 d-flex flex-column flex-wrap text-center" style="max-width: 220px">
+    <div class="chart-info d-flex justify-content-between mb-1 mt-2" >
+          <div class="series-info d-flex align-items-center">
+              <i class="fa fa-circle-o text-bold-700 text-primary"></i>
+              <span class="text-bold-600 ml-50">Finished</span>
+          </div>
+          <div class="product-result">
+              <span>{$finished}</span>
+          </div>
+    </div>
+
+    <div class="chart-info d-flex justify-content-between mb-1">
+          <div class="series-info d-flex align-items-center">
+              <i class="fa fa-circle-o text-bold-700 text-warning"></i>
+              <span class="text-bold-600 ml-50">Pending</span>
+          </div>
+          <div class="product-result">
+              <span>{$pending}</span>
+          </div>
+    </div>
+
+     <div class="chart-info d-flex justify-content-between mb-1">
+          <div class="series-info d-flex align-items-center">
+              <i class="fa fa-circle-o text-bold-700 text-danger"></i>
+              <span class="text-bold-600 ml-50">Rejected</span>
+          </div>
+          <div class="product-result">
+              <span>{$rejected}</span>
+          </div>
+    </div>
+</div>
+HTML
+        );
+    }
+}

src/Console/stubs/metrics/Sessions.stub

@@ -0,0 +1,130 @@
+<?php
+
+namespace DummyNamespace;
+
+use Dcat\Admin\Admin;
+use Dcat\Admin\Widgets\Metrics\BarChartCard;
+use Illuminate\Http\Request;
+
+class Sessions extends BarChartCard
+{
+    /**
+     * 卡片内容宽度.
+     *
+     * @var array
+     */
+    protected $contentWidth = [5, 7];
+
+    /**
+     * @var array
+     */
+    protected $dropdownItems = [
+        '7' => 'Last 7 Days',
+        '28' => 'Last 28 Days',
+        '30' => 'Last Month',
+        '365' => 'Last Year',
+    ];
+
+    /**
+     * 初始化卡片内容
+     */
+    public function init()
+    {
+        parent::init();
+
+        $color = Admin::color();
+
+        $dark35 = $color->dark35();
+
+        $this->title('Avg Sessions');
+        // 设置卡片高度，可以不设置
+        $this->height(280);
+        // 设置图表高度
+        $this->chartHeight(200);
+        // 设置下拉选项
+        $this->dropdown($this->dropdownItems);
+        // 设置图表颜色
+        $this->chartColors([
+            $dark35,
+            $dark35,
+            $color->primary(),
+            $dark35,
+            $dark35,
+            $dark35
+        ]);
+    }
+
+    /**
+     * 处理请求
+     *
+     * @param Request $request
+     *
+     * @return mixed|void
+     */
+    public function handle(Request $request)
+    {
+        switch ($request->get('option')) {
+            case '7':
+            default:
+                // 卡片内容
+                $this->withContent('2.7k', '+5.2%');
+
+                // 图表数据
+                $this->withChart([
+                    [
+                        'name' => 'Sessions',
+                        'data' => [75, 125, 225, 175, 125, 75, 25],
+                    ],
+                ]);
+        }
+    }
+
+    /**
+     * 设置图表数据.
+     *
+     * @param array $data
+     *
+     * @return $this
+     */
+    public function withChart(array $data)
+    {
+        return $this->chart([
+            'series' => $data,
+        ]);
+    }
+
+    /**
+     * 设置卡片内容.
+     *
+     * @param string $title
+     * @param string $value
+     * @param string $style
+     *
+     * @return $this
+     */
+    public function withContent($title, $value, $style = 'success')
+    {
+        // 根据选项显示
+        $label = strtolower(
+            $this->dropdownItems[request()->option] ?? 'last 7 days'
+        );
+
+        $minHeight = '200px';
+
+        return $this->content(
+            <<<HTML
+<div class="d-flex flex-column justify-content-between" style="width: 100%;height: 100%;min-height: {$minHeight}">
+    <div class="text-left">
+        <h1 class="font-large-2 mt-2 mb-0">{$title}</h1>
+        <h5 class="font-medium-2" style="margin-top: 10px;">
+            <span class="text-{$style}">{$value} </span>
+            <span>vs {$label}</span>
+        </h5>
+    </div>
+
+    <a href="#" class="btn btn-primary shadow waves-effect waves-light">View Details <i class="feather icon-chevrons-right"></i></a>
+</div>
+HTML
+        );
+    }
+}

src/Console/stubs/metrics/Tickets.stub

@@ -0,0 +1,116 @@
+<?php
+
+namespace DummyNamespace;
+
+use Dcat\Admin\Widgets\Metrics\RadialBarChartCard;
+use Illuminate\Http\Request;
+
+class Tickets extends RadialBarChartCard
+{
+    /**
+     * 初始化卡片内容
+     */
+    public function init()
+    {
+        parent::init();
+
+        $this->title('Tickets');
+        $this->height(380);
+        $this->chartHeight(270);
+        $this->chartLabels('Completed Tickets');
+        $this->dropdown([
+            '7' => 'Last 7 Days',
+            '28' => 'Last 28 Days',
+            '30' => 'Last Month',
+            '365' => 'Last Year',
+        ]);
+    }
+
+    /**
+     * 处理请求
+     *
+     * @param Request $request
+     *
+     * @return mixed|void
+     */
+    public function handle(Request $request)
+    {
+        switch ($request->get('option')) {
+            case '365':
+            case '30':
+            case '28':
+            case '7':
+            default:
+                // 卡片内容
+                $this->withContent(162);
+
+                // 卡片底部
+                $this->withFooter(29, 63, '1d');
+
+                // 图表数据
+                $this->withChart(83);
+        }
+    }
+
+    /**
+     * 设置图表数据.
+     *
+     * @param int $data
+     *
+     * @return $this
+     */
+    public function withChart(int $data)
+    {
+        return $this->chart([
+            'series' => [$data],
+        ]);
+    }
+
+    /**
+     * 卡片内容
+     *
+     * @param string $content
+     *
+     * @return $this
+     */
+    public function withContent($content)
+    {
+        return $this->content(
+            <<<HTML
+<div class="d-flex flex-column flex-wrap text-center">
+    <h1 class="font-large-2 mt-2 mb-0">{$content}</h1>
+    <small>Tickets</small>
+</div>
+HTML
+        );
+    }
+
+    /**
+     * 卡片底部内容.
+     *
+     * @param string $new
+     * @param string $open
+     * @param string $response
+     *
+     * @return $this
+     */
+    public function withFooter($new, $open, $response)
+    {
+        return $this->footer(
+            <<<HTML
+<div class="text-center">
+    <p>New Tickets</p>
+    <span class="font-large-1">{$new}</span>
+</div>
+<div class="text-center">
+    <p>Open Tickets</p>
+    <span class="font-large-1">{$open}</span>
+</div>
+<div class="text-center">
+    <p>Response Time</p>
+    <span class="font-large-1">{$response}</span>
+</div>
+HTML
+        );
+    }
+}

src/Widgets/ApexCharts/Chart.php

@@ -8,6 +8,13 @@ use Dcat\Admin\Traits\InteractsWithApi;
 use Dcat\Admin\Widgets\Widget;
 use Illuminate\Support\Str;
 
+/**
+ * Class Chart
+ *
+ * @package Dcat\Admin\Widgets\ApexCharts
+ *
+ * @see https://apexcharts.com/
+ */
 class Chart extends Widget
 {
     use InteractsWithApi;

src/Widgets/Metrics/DonutChartCard.php

@@ -68,6 +68,8 @@ class DonutChartCard extends Card
 
         // 使用图表
         $this->useChart();
+
+        $this->chart->style('margin-top: 10px;');
     }
 
     /**

src/Widgets/Metrics/LineChartCard.php

@@ -9,10 +9,10 @@ class LineChartCard extends Card
      *
      * @var int
      */
-    protected $chartHeight = 51;
+    protected $chartHeight = 57;
 
     /**
-     * 趋势图图表默认配置
+     * 图表默认配置
      *
      * @var array
      */