dcatadmin2
/
dcat-admin2


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<?php

namespace Dcat\Admin\Widgets\Metrics;

use Dcat\Admin\Admin;
use Dcat\Admin\Support\Helper;
use Illuminate\Contracts\Support\Renderable;

class RadialBarCard extends Card
{
    /**
     * @var array
     */
    protected $options = [
        'icon'     => null,
        'title'    => null,
        'header'   => null,
        'content'  => null,
        'footer'   => null,
        'dropdown' => [],
    ];

    /**
     * @var int
     */
    protected $chartHeight = 150;

    /**
     * 内容宽度.
     *
     * @var array
     */
    protected $contentWidth = [2, 10];

    /**
     * @var int
     */
    protected $chartMarginBottom = -10;

    /**
     * 初始化
     */
    public function init()
    {
        parent::init();

        $this->useChart();

        $this->chart->style("margin-bottom: {$this->chartMarginBottom}px;");
    }

    /**
     * 图表默认配置.
     *
     * @return array
     */
    protected function defaultChartOptions()
    {
        $gradientColor = Admin::color()->success();
        $labelColor = '#99a2ac';

        return [
            'chart' => [
                'type' => 'radialBar',
            ],
            'plotOptions' => [
                'radialBar' => [
                    'size' => 150,
                    'startAngle' => -150,
                    'endAngle' => 150,
                    'offsetY' => 20,
                    'hollow' => [
                        'size' => '65%',
                    ],
                    'track' => [
                        'background' => '#fff',
                        'strokeWidth' => '100%',
                    ],
                    'dataLabels' => [
                        'value' => [
                            'offsetY' => 30,
                            'color' => $labelColor,
                            'fontSize' => '2rem'
                        ]
                    ]
                ],
            ],
            'fill' => [
                'type' => 'gradient',
                'gradient' => [
                    'shade' => 'dark',
                    'type' => 'horizontal',
                    'shadeIntensity' => 0.5,
                    'gradientToColors' => [$gradientColor],
                    'inverseColors' => true,
                    'opacityFrom' => 1,
                    'opacityTo' => 1,
                    'stops' => [0, 100]
                ],
            ],
            'stroke' => [
                'dashArray' => 8
            ],
        ];
    }

    /**
     * 设置卡片底部内容.
     *
     * @param string|\Closure|Renderable $value
     *
     * @return $this
     */
    public function footer($value)
    {
        $this->options['footer'] = $value;

        return $this;
    }

    /**
     * 设置内容宽度.
     *
     * @param int $left
     * @param int $right
     *
     * @return $this
     */
    public function contentWidth(int $left, int $right)
    {
        $this->contentWidth = [$left, $right];

        return $this;
    }

    /**
     * @return string
     */
    public function renderFooter()
    {
        return Helper::render($this->options['footer']);
    }

    /**
     * @return string
     */
    public function renderContent()
    {
        $content = parent::renderContent();

        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">
                {$this->renderChart()}
            </div>
        </div>
        <div class="chart-info metric-footer d-flex justify-content-between">
            {$this->renderFooter()}
        </div>
    </div>
</div>
HTML;
    }
}