Home Explore Help
Register Sign In
wangjunyun
/
Dcat-Admin
mirror of https://gitee.com/jqhph/dcat-admin.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

chart card

jqh 5 years ago
parent
864411083e
commit
7a2d3c45d3
6 changed files with 257 additions and 113 deletions
Split View Show Diff Stats
  1. 4 4
      resources/views/partials/alerts.blade.php
  2. 1 1
      src/Widgets/Metrics/DonutChartCard.php
  3. 17 7
      src/Widgets/Metrics/RadialBarChartCard.php
  4. 51 3
      src/Widgets/Metrics/RoundChartCard.php
  5. 86 0
      src/Widgets/Metrics/SingleRoundChartCard.php
  6. 98 98
      src/Widgets/Metrics/SparklineChartCard.php

+ 4 - 4
resources/views/partials/alerts.blade.php
View File 

@@ -1,7 +1,7 @@
 
 @if($error = session()->get('error'))
 
     <div class="alert alert-danger alert-dismissable">
 
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
 
-        <h4><i class="icon fa fa-ban"></i>{{ \Illuminate\Support\Arr::get($error->get('title'), 0) }}</h4>
 
+        <h4><i class="icon fa fa-ban"></i> &nbsp;{{ \Illuminate\Support\Arr::get($error->get('title'), 0) }}</h4>
 
         <p>{!!  \Illuminate\Support\Arr::get($error->get('message'), 0) !!}</p>
 
     </div>
 
 @elseif ($errors = session()->get('errors'))
 
@@ -19,7 +19,7 @@
 
 @if($success = session()->get('success'))
 
     <div class="alert alert-success alert-dismissable">
 
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
 
-        <h4><i class="icon fa fa-check"></i>{{ \Illuminate\Support\Arr::get($success->get('title'), 0) }}</h4>
 
+        <h4><i class="icon fa fa-check"></i> &nbsp;{{ \Illuminate\Support\Arr::get($success->get('title'), 0) }}</h4>
 
         <p>{!!  \Illuminate\Support\Arr::get($success->get('message'), 0) !!}</p>
 
     </div>
 
 @endif
 
@@ -27,7 +27,7 @@
 
 @if($info = session()->get('info'))
 
     <div class="alert alert-info alert-dismissable">
 
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
 
-        <h4><i class="icon fa fa-info"></i>{{ \Illuminate\Support\Arr::get($info->get('title'), 0) }}</h4>
 
+        <h4><i class="icon fa fa-info"></i> &nbsp;{{ \Illuminate\Support\Arr::get($info->get('title'), 0) }}</h4>
 
         <p>{!!  \Illuminate\Support\Arr::get($info->get('message'), 0) !!}</p>
 
     </div>
 
 @endif
 
@@ -35,7 +35,7 @@
 
 @if($warning = session()->get('warning'))
 
     <div class="alert alert-warning alert-dismissable">
 
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
 
-        <h4><i class="icon fa fa-warning"></i>{{ \Illuminate\Support\Arr::get($warning->get('title'), 0) }}</h4>
 
+        <h4><i class="icon fa fa-warning"></i> &nbsp;{{ \Illuminate\Support\Arr::get($warning->get('title'), 0) }}</h4>
 
         <p>{!!  \Illuminate\Support\Arr::get($warning->get('message'), 0) !!}</p>
 
     </div>
 
 @endif

+ 1 - 1
src/Widgets/Metrics/DonutCard.php → src/Widgets/Metrics/DonutChartCard.php
View File 

@@ -4,7 +4,7 @@ namespace Dcat\Admin\Widgets\Metrics;
 
 
 use Dcat\Admin\Admin;
 
 
-class DonutCard extends Card
 
+class DonutChartCard extends Card
 
 {
 
     /**
 
      * @var int

+ 17 - 7
src/Widgets/Metrics/RadialBarCard.php → src/Widgets/Metrics/RadialBarChartCard.php
View File 

@@ -6,7 +6,7 @@ use Dcat\Admin\Admin;
 
 use Dcat\Admin\Support\Helper;
 
 use Illuminate\Contracts\Support\Renderable;
 
 
-class RadialBarCard extends Card
 
+class RadialBarChartCard extends Card
 
 {
 
     /**
 
      * @var array
 
@@ -146,20 +146,30 @@ class RadialBarCard extends Card
 
      */
 
     public function renderContent()
 
     {
 
-        $content = parent::renderContent();
 
+        $content = null;
 
+
 
+        if ($this->contentWidth[0]) {
 
+            $content = parent::renderContent();
 
+
 
+            $content = <<<HTML
 
+<div class="metric-content col-sm-{$this->contentWidth[0]} d-flex flex-column flex-wrap text-center">
 
+    {$content}
 
+</div>
 
+HTML;
 
+        }
 
+
 
 
         return <<<HTML
 
 <div class="card-content">
 
     <div class="card-body pt-0">
 
         <div class="row">
 
-            <div class="metric-content col-sm-{$this->contentWidth[0]} col-12 d-flex flex-column flex-wrap text-center">
 
-                {$content}
 
-            </div>
 
-            <div class="col-sm-{$this->contentWidth[1]} col-12 d-flex justify-content-center">
 
+            {$content}
 
+            
+            <div class="col-sm-{$this->contentWidth[1]} d-flex justify-content-center">
 
                 {$this->renderChart()}
 
             </div>
 
         </div>
 
-        <div class="chart-info metric-footer d-flex justify-content-between">
 
+        <div class="metric-footer d-flex justify-content-between">
 
             {$this->renderFooter()}
 
         </div>
 
     </div>

+ 51 - 3
src/Widgets/Metrics/RoundRadialBarCard.php → src/Widgets/Metrics/RoundChartCard.php
View File 

@@ -7,7 +7,7 @@ use Dcat\Admin\Support\Helper;
 
 use Dcat\Admin\Support\JavaScript;
 
 use Illuminate\Contracts\Support\Renderable;
 
 
-class RoundRadialBarCard extends RadialBarCard
 
+class RoundChartCard extends RadialBarChartCard
 
 {
 
     /**
 
      * @var array
 
@@ -90,7 +90,7 @@ class RoundRadialBarCard extends RadialBarCard
 
      *
 
      * @return $this
 
      */
 
-    public function radialBarSize(int $size)
 
+    public function chartRadialBarSize(int $size)
 
     {
 
         return $this->chartOption('plotOptions.radialBar.size', $size);
 
     }
 
@@ -102,7 +102,7 @@ class RoundRadialBarCard extends RadialBarCard
 
      *
 
      * @return $this
 
      */
 
-    public function radialBarMargin(int $margin)
 
+    public function chartRadialBarMargin(int $margin)
 
     {
 
         return $this->chartOption('plotOptions.radialBar.track.margin', $margin);
 
     }
 
@@ -123,4 +123,52 @@ class RoundRadialBarCard extends RadialBarCard
 
             'formatter' => JavaScript::make("function () { return {$number}; }"),
 
         ]);
 
     }
 
+
 
+    /**
 
+     * 设置图标 dataLabel name 的字体尺寸.
 
+     *
 
+     * @param mixed $size
 
+     *
 
+     * @return $this
 
+     */
 
+    public function chartLabelNameFontSize($size)
 
+    {
 
+        return $this->chartOption('plotOptions.radialBar.dataLabels.name.fontSize', $size);
 
+    }
 
+
 
+    /**
 
+     * 设置图标 dataLabel name 的Y轴偏移量.
 
+     *
 
+     * @param mixed $size
 
+     *
 
+     * @return $this
 
+     */
 
+    public function chartLabelNameOffsetY(int $offset)
 
+    {
 
+        return $this->chartOption('plotOptions.radialBar.dataLabels.name.offsetY', $offset);
 
+    }
 
+
 
+    /**
 
+     * 设置图标 dataLabel value 的字体尺寸.
 
+     *
 
+     * @param mixed $size
 
+     *
 
+     * @return $this
 
+     */
 
+    public function chartLabelValueFontSize($size)
 
+    {
 
+        return $this->chartOption('plotOptions.radialBar.dataLabels.value.fontSize', $size);
 
+    }
 
+
 
+    /**
 
+     * 设置图标 dataLabel value 的Y轴偏移量.
 
+     *
 
+     * @param mixed $size
 
+     *
 
+     * @return $this
 
+     */
 
+    public function chartLabelValueOffsetY(int $offset)
 
+    {
 
+        return $this->chartOption('plotOptions.radialBar.dataLabels.value.offsetY', $offset);
 
+    }
 
 }

+ 86 - 0
src/Widgets/Metrics/SingleRoundChartCard.php
View File 

@@ -0,0 +1,86 @@
 
+<?php
 
+
 
+namespace Dcat\Admin\Widgets\Metrics;
 
+
 
+use Dcat\Admin\Admin;
 
+
 
+class SingleRoundChartCard extends RoundChartCard
 
+{
 
+
 
+    /**
 
+     * @var int
 
+     */
 
+    protected $chartMarginBottom = 0;
 
+
 
+    /**
 
+     * 图表默认配置.
 
+     *
 
+     * @return array
 
+     */
 
+    protected function defaultChartOptions()
 
+    {
 
+        $color = Admin::color();
 
+
 
+        $colors = [$color->success()];
 
+        $gradientToColors = ['#00b5b5'];
 
+        $strokColor = '#b9c3cd';
 
+
 
+        return [
 
+            'chart' => [
 
+                'type' => 'radialBar',
 
+                'sparkline' => [
 
+                    'enabled' => true,
 
+                ],
 
+                'dropShadow' => [
 
+                    'enabled' => true,
 
+                    'blur' => 3,
 
+                    'left' => 1,
 
+                    'top' => 1,
 
+                    'opacity' => 0.1
 
+                ],
 
+            ],
 
+            'colors' => $colors,
 
+            'plotOptions' => [
 
+                'radialBar' => [
 
+                    'size' => 70,
 
+                    'startAngle' => -150,
 
+                    'endAngle' => 150,
 
+                    'hollow' => [
 
+                        'size' => '74%',
 
+                    ],
 
+                    'track' => [
 
+                        'background' => $strokColor,
 
+                        'strokeWidth' => '50%',
 
+                    ],
 
+                    'dataLabels' => [
 
+                        'name' => [
 
+                            'show' => false
 
+                        ],
 
+                        'value' => [
 
+                            'offsetY' => 14,
 
+                            'color' => $strokColor,
 
+                            'fontSize' => '2.8rem'
 
+                        ]
 
+                    ]
 
+                ]
 
+            ],
 
+            'fill' => [
 
+                'type' => 'gradient',
 
+                'gradient' => [
 
+                    'shade' => 'dark',
 
+                    'type' => 'horizontal',
 
+                    'shadeIntensity' => 0.5,
 
+                    'gradientToColors' => $gradientToColors,
 
+                    'inverseColors' => true,
 
+                    'opacityFrom' => 1,
 
+                    'opacityTo' => 1,
 
+                    'stops' => [0, 100]
 
+                ],
 
+            ],
 
+            'series' => [100],
 
+            'stroke' => [
 
+                'lineCap' => 'round'
 
+            ],
 
+        ];
 
+    }
 
+}

+ 98 - 98
src/Widgets/Metrics/SparklineCard.php → src/Widgets/Metrics/SparklineChartCard.php
View File 

@@ -1,98 +1,98 @@
 
-<?php

-

-namespace Dcat\Admin\Widgets\Metrics;

-

-class SparklineCard extends Card

-{

-    /**

-     * 趋势图图表默认配置

-     *

-     * @var array

-     */

-    protected $chartOptions = [

-        'chart' => [

-            'type' => 'area',

-            'toolbar' => [

-                'show' => false,

-            ],

-            'sparkline' => [

-                'enabled' => true,

-            ],

-            'grid' => [

-                'show' => false,

-                'padding' => [

-                    'left' => 0,

-                    'right' => 0,

-                ]

-            ],

-        ],

-        'tooltip' => [

-            'x' => [

-                'show' => false,

-            ],

-        ],

-        'xaxis' => [

-            'labels' => [

-                'show' => false,

-            ],

-            'axisBorder' => [

-                'show' => false,

-            ],

-        ],

-        'yaxis' => [

-            'y' => 0,

-            'offsetX' => 0,

-            'offsetY' => 0,

-            'padding' => ['left' => 0, 'right' => 0],

-        ],

-        'dataLabels' => [

-            'enabled' => false,

-        ],

-        'stroke' => [

-            'width' => 2.5,

-            'curve' => 'smooth'

-        ],

-        'fill' => [

-            'opacity' => 0.1,

-            'type' => 'solid',

-        ],

-    ];

-

-    /**

-     * 初始化

-     */

-    protected function init()

-    {

-        parent::init();

-

-        // 使用图表s

-        $this->useChart();

-    }

-

-    /**

-     * 设置线条为直线.

-     *

-     * @return $this

-     */

-    public function chartStraight()

-    {

-        return $this->chartOption('stroke.curve', 'straight');

-    }

-

-    /**

-     * 渲染内容，加上图表.

-     *

-     * @return string

-     */

-    public function renderContent()

-    {

-        $content = parent::renderContent();

-

-        return <<<HTML

-{$content}

-<div class="card-content" style="position: relative;width: 100%">

-    {$this->renderChart()}

-</div>

-HTML;

-    }

-}

+<?php
 
+
 
+namespace Dcat\Admin\Widgets\Metrics;
 
+
 
+class SparklineChartCard extends Card
 
+{
 
+    /**
 
+     * 趋势图图表默认配置
 
+     *
 
+     * @var array
 
+     */
 
+    protected $chartOptions = [
 
+        'chart' => [
 
+            'type' => 'area',
 
+            'toolbar' => [
 
+                'show' => false,
 
+            ],
 
+            'sparkline' => [
 
+                'enabled' => true,
 
+            ],
 
+            'grid' => [
 
+                'show' => false,
 
+                'padding' => [
 
+                    'left' => 0,
 
+                    'right' => 0,
 
+                ]
 
+            ],
 
+        ],
 
+        'tooltip' => [
 
+            'x' => [
 
+                'show' => false,
 
+            ],
 
+        ],
 
+        'xaxis' => [
 
+            'labels' => [
 
+                'show' => false,
 
+            ],
 
+            'axisBorder' => [
 
+                'show' => false,
 
+            ],
 
+        ],
 
+        'yaxis' => [
 
+            'y' => 0,
 
+            'offsetX' => 0,
 
+            'offsetY' => 0,
 
+            'padding' => ['left' => 0, 'right' => 0],
 
+        ],
 
+        'dataLabels' => [
 
+            'enabled' => false,
 
+        ],
 
+        'stroke' => [
 
+            'width' => 2.5,
 
+            'curve' => 'smooth'
 
+        ],
 
+        'fill' => [
 
+            'opacity' => 0.1,
 
+            'type' => 'solid',
 
+        ],
 
+    ];
 
+
 
+    /**
 
+     * 初始化
 
+     */
 
+    protected function init()
 
+    {
 
+        parent::init();
 
+
 
+        // 使用图表s
 
+        $this->useChart();
 
+    }
 
+
 
+    /**
 
+     * 设置线条为直线.
 
+     *
 
+     * @return $this
 
+     */
 
+    public function chartStraight()
 
+    {
 
+        return $this->chartOption('stroke.curve', 'straight');
 
+    }
 
+
 
+    /**
 
+     * 渲染内容，加上图表.
 
+     *
 
+     * @return string
 
+     */
 
+    public function renderContent()
 
+    {
 
+        $content = parent::renderContent();
 
+
 
+        return <<<HTML
 
+{$content}
 
+<div class="card-content">
 
+    {$this->renderChart()}
 
+</div>
 
+HTML;
 
+    }
 
+}