Statistical data cards

Dcat Admin has a variety of commonly used statistical cards built in, which can be easily interacted with the back-end API, the following is an introduction to the Usage.

Basic cards

The base card (Dcat\Admin\Widgets\Metrics\Card) is a card that does not display charts by default and is the simplest of the data cards.

Statistical data cards - 图1

Simple Example

The use of the basic cards can be found in the built-in App\Admin\Metrics\Examples\TotalUsers category.

  1. <?php
  3. namespace App\Admin\Metrics\Examples;
  5. use Dcat\Admin\Widgets\Metrics\Card;
  6. use Illuminate\Contracts\Support\Renderable;
  7. use Illuminate\Http\Request;
  9. class TotalUsers extends Card
  10. {
  11.     /**
  12.      * Card footer content.
  13.      *
  14.      * @var string|Renderable|\Closure
  15.      */
  16.     protected $footer;
  18.     // Save custom parameters
  19.     protected $data = [];
  21.     // The method parameters must be set to default values
  22.     public function __construct(array $data = []) 
  23.     {
  24.         $this->data = [];
  26.         parent::__construct();
  27.     }
  29.     protected function init()
  30.     {
  31.         parent::init();
  33.         // Setting the TITLE
  34.         $this->title('Total Users');
  35.         // Setting the drop-down menu
  36.         $this->dropdown([
  37.             '7' => 'Last 7 Days',
  38.             '28' => 'Last 28 Days',
  39.             '30' => 'Last Month',
  40.             '365' => 'Last Year',
  41.         ]);
  42.     }
  44.     /**
  45.      * Processing of requests.
  46.      *
  47.      * @param Request $request
  48.      *
  49.      * @return void
  50.      */
  51.     public function handle(Request $request)
  52.     {
  53.         // Get custom parameters passed externally
  54.         $key1 = $request->get('key1');
  56.         switch ($request->get('option')) {
  57.             case '365':
  58.                 $this->content(mt_rand(600, 1500));
  59.                 $this->down(mt_rand(1, 30));
  60.                 break;
  61.             case '30':
  62.                 $this->content(mt_rand(170, 250));
  63.                 $this->up(mt_rand(12, 50));
  64.                 break;
  65.             case '28':
  66.                 $this->content(mt_rand(155, 200));
  67.                 $this->up(mt_rand(5, 50));
  68.                 break;
  69.             case '7':
  70.             default:
  71.                 $this->content(143);
  72.                 $this->up(15);
  73.         }
  74.     }
  76.     // Passing a custom parameter to the handle method
  77.     public function parameters() : array
  78.     {
  79.         return $this->data;
  80.     }
  82.     /**
  83.      * @param int $percent
  84.      *
  85.      * @return $this
  86.      */
  87.     public function up($percent)
  88.     {
  89.         return $this->footer(
  90.             "<i class=\"feather icon-trending-up text-success\"></i> {$percent}% Increase"
  91.         );
  92.     }
  94.     /**
  95.      * @param int $percent
  96.      *
  97.      * @return $this
  98.      */
  99.     public function down($percent)
  100.     {
  101.         return $this->footer(
  102.             "<i class=\"feather icon-trending-down text-danger\"></i> {$percent}% Decrease"
  103.         );
  104.     }
  106.     /**
  107.      * Set the content of the footer of the card
  108.      *
  109.      * @param string|Renderable|\Closure $footer
  110.      *
  111.      * @return $this
  112.      */
  113.     public function footer($footer)
  114.     {
  115.         $this->footer = $footer;
  117.         return $this;
  118.     }
  120.     /**
  121.      * Render the card content.
  122.      *
  123.      * @return string
  124.      */
  125.     public function renderContent()
  126.     {
  127.         $content = parent::renderContent();
  129.         return <<<HTML
  130. <div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px">
  131.     <h2 class="ml-1 font-large-1">{$content}</h2>
  132. </div>
  133. <div class="ml-1 mt-1 font-weight-bold text-80">
  134.     {$this->renderFooter()}
  135. </div>
  136. HTML;
  137.     }
  139.     /**
  140.      * @return string
  141.      */
  142.     public function renderFooter()
  143.     {
  144.         return $this->toString($this->footer);
  145.     }
  146. }

Basic card method

initialization (init)

The init method is called in the card constructor method and can be used for card initialization operations.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         // Your initialization operation
  8.     }
  9. }

set TITLE (title)

The title method allows you to set a TITLE in the top left corner of the card.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->title('active user');
  8.     }
  9. }

Set dropdown menu (dropdown)

The dropdown method allows you to set a dropdown menu button in the upper right corner of the card, which needs to be used in combination with the handle method to have result.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         $this->dropdown([
  6.             '7' => 'Last 7 Days',
  7.             '28' => 'Last 28 Days',
  8.             '30' => 'Last Month',
  9.             '365' => 'Last Year',
  10.         ]);
  11.     }
  12. }

set subTitle (subTitle)

The subTitle method allows you to set a subTitle in the upper corner of the card.

{tip} This method will conflict with the dropdown method, so if the dropdown button is set, there is no need to set a secondary TITLE.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->subTitle('Last 30 days');
  8.     }
  9. }

Set header content (header)

The header method is used to set the content of the card header. This method accepts one parameter, which can be string, Closure, or a template view (Illuminate\Contracts\Support\Renderable).

{tip} The content set in this way is in the same div container as title.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->header(
  8.             <<<HTML
  9.             <div>Header content</div>        
  10. HTML            
  11.         );
  13.         // You can also pass a closure
  14.         $this->header(function () {
  15.             return ...;
  16.         });
  18.         // You can also pass views
  19.         $this->header(view('...'));
  20.     }
  21. }

Set the main content (content)

The content method accepts one parameter, which can be string, Closure, or template view (Illuminate\Contracts\Support\Renderable).

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->withContent('Custom Content');
  8.     }
  10.     /**
  11.      * Card Content
  12.      *
  13.      * @param string $content
  14.      *
  15.      * @return $this
  16.      */
  17.     public function withContent($content)
  18.     {
  19.         return $this->content(
  20.             <<<HTML
  21. <div class="d-flex flex-column flex-wrap text-center">
  22.     <h1 class="font-large-2 mt-2 mb-0">{$content}</h1>
  23.     <small>Tickets</small>
  24. </div>
  25. HTML
  26.         );
  27.     }
  28. }

Setting height (height)

Through the height method, you can set the minimum height of the card, the default is 165.

  1. protected function init()
  2. {
  3.     parent::init();
  5.     $this->height(200);
  6. }

Passing custom parameters (parameters)

Parameters can be passed to the handle method via the parameters method.

  1. // Passing a custom parameter to the handle method
  2. public function parameters() : array
  3. {
  4.     return [
  5.         'key1' => 'value1',
  7.         ...
  8.     ];
  9. }

Get custom parameters

  1. public function handle(Request $request)
  2. {
  3.     // Get custom parameters
  4.     $key1 = $request->get('key1');
  5. }

Rendering content (renderContent)

To ensure flexibility and scalability of the content, the system does not have any preset styles for the card content (i.e., just display whatever content is set, with no preset layouts or other styles). The renderContent method allows you to change the default rendering of a card.

The following example demonstrates the main functionality of the renderContent method.

  1. use Dcat\Admin\Support\Helper;
  3. class MyCard extend Card
  4. {
  5.     protected $footer;
  7.     protected function init()
  8.     {
  9.         parent::init();
  11.         // Set the card content
  12.         $this->content(...);
  13.         // Set the content at the bottom of the card
  14.         $this->footer(...);
  15.     }
  17.     /**
  18.      * Add this method to set the content at the bottom of the card
  19.      *
  20.      * @return $this
  21.      */
  22.     public function footer($footer)
  23.     {
  24.         $this->footer = $footer;
  26.         return $this;
  27.     }
  29.     /**
  30.      * Rendering bottom content
  31.      *
  32.      * @return $this
  33.      */
  34.     public function renderFooter()
  35.     {
  36.         return Helper::render($this->footer);
  37.     }
  39.     /**
  40.      * Render the card content
  41.      * You can add the bottom of the card here
  42.      *
  43.      * @return string
  44.      */
  45.     public function renderContent()
  46.     {
  47.         $content = parent::renderContent();
  48.         $footer = $this->renderFooter();
  50.         return <<<HTML
  51. <div class="card-content">
  52.     <div class="row">
  53.         {$content}
  54.     </div>
  55.     <div class="metric-footer">
  56.         {$footer}
  57.     </div>
  58. </div>
  59. HTML;      
  60.     }
  61. }

Enable and render charts.

Basic cards have charting enabled by default, you can enable charting by using the useChart method, which instantiates a chart class and saves it in the chart property.

When the chart is enabled, you need to render the chart in your card content, otherwise the chart will be initialized, but still can not be displayed.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         // Enable Charts
  8.         $this->useChart();
  9.     }
  11.     /**
  12.      * Render the card content
  13.      * You need to add the code to render the chart here
  14.      *
  15.      * @return string
  16.      */
  17.     public function renderContent()
  18.     {
  19.         // Content set by the content method
  20.         $content = parent::renderContent();
  22.         // Rendering Charts
  23.         $chart = $this->renderChart();
  25.         return <<<HTML
  26.     <div class="my-chart">{$chart}</div>
  27.     {$content}    
  28. HTML           
  29.     }
  30. }

Chart Default Configuration (defaultChartOptions)

The default chart configuration can be set by the defaultChartOptions method, which is available only when the chart is enabled.

{tip} The chart configuration here also supports setting executable JS code, please refer to chart configuration setting executable JS code for detailed usage.

  1. class MyCard extend Card
  2. {
  3.     protected function defaultChartOptions()
  4.     {
  5.         // Return the configuration of the chart
  6.         return [
  7.             ...
  8.         ];
  9.     }
  10. }

Set up a chart (chart)

The chart method allows you to set the chart configuration.

{tip} The chart configuration here also supports setting executable JS code, please refer to chart configuration setting executable JS code for detailed usage.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chart([...]);
  8.     }
  9. }

Setting the chart configuration (chartOption)

Through the chartOption method, you can set the chart configuration, this method can only set one parameter at a time, supports setting multidimensional parameters.

{tip} The chart configuration here also supports setting executable JS code, please refer to chart configuration setting executable JS code for detailed usage.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartOption('stroke.curve', 'smooth');
  8.         $this->chartOption(
  9.             'plotOptions.radialBar.dataLabels.total.formatter',
  10.             // The return code of this value will be executed as JS code
  11.             JavaScript::make("function () { return {$number}; }")
  12.         );
  13.     }
  14. }

Set Chart Height (chartHeight)

Through the chartHeight method can set the height of the chart, this method is very important, often need to be used in conjunction with the height method to adjust the overall height of the card.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartHeight(150);
  8.     }
  9. }

Set the spacing on the chart (chartMarginTop)

The distance between the chart and the parent element can be set by the chartMarginTop method, which accepts a parameter of type int and can pass a negative number.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartMarginTop(-10);
  8.     }
  9. }

Set the bottom spacing of the chart (chartMarginBottom)

The chartMarginBottom method is used to set the distance between the chart and the lower elements, the method accepts an int type parameter and can pass a negative number.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartMarginBottom(10);
  8.     }
  9. }

Set chart labels (chartLabels)

The chartLabels method allows you to set the label (labels) configuration of the chart.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartLabels('Label 1');
  9.         // You can also pass arrays
  10.         $this->chartLabels(['Label 1']);
  11.     }
  12. }

Set Chart Color (chartColors)

The chartColors method allows you to set the color (colors) configuration of the chart.

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartColors('#4f41a1');
  9.         // You can also pass arrays
  10.         $this->chartColors(['#4f41a1']);
  11.     }
  12. }

Rendering Charts (renderChart)

The renderChart method is used to render the chart

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         // Enable Charts
  8.         $this->useChart();
  9.     }
  11.     /**
  12.      * Render the card content
  13.      * You need to add the code to render the chart here
  14.      *
  15.      * @return string
  16.      */
  17.     public function renderContent()
  18.     {
  19.         // Content set by the content method
  20.         $content = parent::renderContent();
  22.         // Rendering Charts
  23.         $chart = $this->renderChart();
  25.         return <<<HTML
  26.     <div class="my-chart">{$chart}</div>
  27.     {$content}    
  28. HTML           
  29.     }
  30. }

Linear trend chart cards (Line)

The Linear Trend (Dcat\Admin/Widgets\Metrics\Line) is a statistical card with a polyline/line graph, inherited from the base card Dcat\Admin/Widgets\Metrics\Card.

Statistical data cards - 图2

Example

Reference may be made to the built-in App\Admin\Metrics\Examples\NewUsers category.

  1. <?php
  3. namespace App\Admin\Metrics\Examples;
  5. use Dcat\Admin\Widgets\Metrics\Line;
  6. use Illuminate\Http\Request;
  8. class NewUsers extends Line
  9. {
  10.     /**
  11.      * @var string
  12.      */
  13.     protected $label = 'New Users';
  15.     /**
  16.      * Initialize card content
  17.      *
  18.      * @return void
  19.      */
  20.     protected function init()
  21.     {
  22.         parent::init();
  24.         $this->title($this->label);
  25.         $this->dropdown([
  26.             '7' => 'Last 7 Days',
  27.             '28' => 'Last 28 Days',
  28.             '30' => 'Last Month',
  29.             '365' => 'Last Year',
  30.         ]);
  31.     }
  33.     /**
  34.      * Processing of requests
  35.      *
  36.      * @param Request $request
  37.      *
  38.      * @return mixed|void
  39.      */
  40.     public function handle(Request $request)
  41.     {
  42.         $generator = function ($len, $min = 10, $max = 300) {
  43.             for ($i = 0; $i <= $len; $i++) {
  44.                 yield mt_rand($min, $max);
  45.             }
  46.         };
  48.         switch ($request->get('option')) {
  49.             case '365':
  50.                 // Card Content
  51.                 $this->withContent(mt_rand(1000, 5000).'k');
  52.                 // Chart data
  53.                 $this->withChart(collect($generator(30))->toArray());
  54.                 // 直线
  55.                 break;
  56.             case '30':
  57.                 // Card Content
  58.                 $this->withContent(mt_rand(400, 1000).'k');
  59.                 // Chart data
  60.                 $this->withChart(collect($generator(30))->toArray());
  61.                 // 直线
  62.                 break;
  63.             case '28':
  64.                 // Card Content
  65.                 $this->withContent(mt_rand(400, 1000).'k');
  66.                 // Chart data
  67.                 $this->withChart(collect($generator(28))->toArray());
  68.                 // 直线
  69.                 break;
  70.             case '7':
  71.             default:
  72.                 // Card Content
  73.                 $this->withContent('89.2k');
  74.                 // Chart data
  75.                 $this->withChart([28, 40, 36, 52, 38, 60, 55,]);
  76.         }
  77.     }
  79.     /**
  80.      * Setting up chart data.
  81.      *
  82.      * @param array $data
  83.      *
  84.      * @return $this
  85.      */
  86.     public function withChart(array $data)
  87.     {
  88.         return $this->chart([
  89.             'series' => [
  90.                 [
  91.                     'name' => $this->label,
  92.                     'data' => $data,
  93.                 ],
  94.             ],
  95.         ]);
  96.     }
  98.     /**
  99.      * Set the card content.
  100.      *
  101.      * @param string $content
  102.      *
  103.      * @return $this
  104.      */
  105.     public function withContent($content)
  106.     {
  107.         return $this->content(
  108.             <<<HTML
  109. <div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px">
  110.     <h2 class="ml-1 font-large-1">{$content}</h2>
  111.     <span class="mb-0 mr-1 text-80">{$this->label}</span>
  112. </div>
  113. HTML
  114.         );
  115.     }
  116. }

Methods

Set lines to straight (chartStraight)

  1. use Dcat\Admin\Widgets\Metrics\Line;
  3. class MyCard extend Line
  4. {
  5.     protected function init()
  6.     {
  7.         parent::init();
  9.         $this->chartStraight();
  10.     }
  11. }

Setting Lines to Curves (chartSmooth)

The default display is the curve

  1. use Dcat\Admin\Widgets\Metrics\Line;
  3. class MyCard extend Line
  4. {
  5.     protected function init()
  6.     {
  7.         parent::init();
  9.         $this->chartSmooth();
  10.     }
  11. }

doughnut card (Donut)

The Doughnut Card (Dcat\AdminWidgets\Metrics\Donut) is a statistical card with a doughnut chart, inherited from the base card Dcat\AdminWidgets\Metrics\Card.

Statistical data cards - 图3

Example

Reference may be made to the built-in App\Admin\Metrics\Examples\NewDevices category.

  1. <?php
  3. namespace App\Admin\Metrics\Examples;
  5. use Dcat\Admin\Admin;
  6. use Dcat\Admin\Widgets\Metrics\Donut;
  8. class NewDevices extends Donut
  9. {
  10.     protected $labels = ['Desktop', 'Mobile'];
  12.     /**
  13.      * Initialize card content
  14.      */
  15.     protected function init()
  16.     {
  17.         parent::init();
  19.         $color = Admin::color();
  20.         $colors = [$color->primary(), $color->alpha('blue2', 0.5)];
  22.         $this->title('New Devices');
  23.         $this->subTitle('Last 30 days');
  24.         $this->chartLabels($this->labels);
  25.         // Set Chart Color
  26.         $this->chartColors($colors);
  27.     }
  29.     /**
  30.      * Rendering template
  31.      *
  32.      * @return string
  33.      */
  34.     public function render()
  35.     {
  36.         $this->fill();
  38.         return parent::render();
  39.     }
  41.     /**
  42.      * Writing data
  43.      *
  44.      * @return void
  45.      */
  46.     public function fill()
  47.     {
  48.         $this->withContent(44.9, 28.6);
  50.         // Chart data
  51.         $this->withChart([44.9, 28.6]);
  52.     }
  54.     /**
  55.      * Setting chart data
  56.      *
  57.      * @param array $data
  58.      *
  59.      * @return $this
  60.      */
  61.     public function withChart(array $data)
  62.     {
  63.         return $this->chart([
  64.             'series' => $data
  65.         ]);
  66.     }
  68.     /**
  69.      * Set the card header content
  70.      *
  71.      * @param mixed $desktop
  72.      * @param mixed $mobile
  73.      *
  74.      * @return $this
  75.      */
  76.     protected function withContent($desktop, $mobile)
  77.     {
  78.         $blue = Admin::color()->alpha('blue2', 0.5);
  80.         $style = 'margin-bottom: 8px';
  81.         $labelWidth = 120;
  83.         return $this->content(
  84.             <<<HTML
  85. <div class="d-flex pl-1 pr-1 pt-1" style="{$style}">
  86.     <div style="width: {$labelWidth}px">
  87.         <i class="fa fa-circle text-primary"></i> {$this->labels[0]}
  88.     </div>
  89.     <div>{$desktop}</div>
  90. </div>
  91. <div class="d-flex pl-1 pr-1" style="{$style}">
  92.     <div style="width: {$labelWidth}px">
  93.         <i class="fa fa-circle" style="color: $blue"></i> {$this->labels[1]}
  94.     </div>
  95.     <div>{$mobile}</div>
  96. </div>
  97. HTML
  98.         );
  99.     }
  100. }

Methods

set content width (contentWidth)

Through the contentWidth method, you can set the width of the text content and the chart content, the default is [6, 6].

{tip} The width here is a value between 1-12.

  1. use Dcat\Admin\Widgets\Metrics\Line;
  3. class MyCard extend Line
  4. {
  5.     protected function init()
  6.     {
  7.         parent::init();
  9.         $this->contentWidth(4, 8);
  10.     }
  11. }

Bar Chart Cards (Bar)

The Bar Chart Card (Dcat\Admin\Widgets\MetricsBar) is a statistical card with a bar chart, inherited from the base card Dcat\Admin\Widgets\MetricsCard.

Statistical data cards - 图4

Example

Reference may be made to the built-in App\Admin\Metrics\Examples\NewDevices category.

  1. <?php
  3. namespace App\Admin\Metrics\Examples;
  5. use Dcat\Admin\Admin;
  6. use Dcat\Admin\Widgets\Metrics\Bar;
  7. use Illuminate\Http\Request;
  9. class Sessions extends Bar
  10. {
  11.     /**
  12.      * Initialize card content
  13.      */
  14.     public function init()
  15.     {
  16.         parent::init();
  18.         $color = Admin::color();
  20.         $dark35 = $color->dark35();
  22.         // Card content width
  23.         $this->contentWidth(5, 7);
  24.         // TITLE
  25.         $this->title('Avg Sessions');
  26.         // Set drop-down options
  27.         $this->dropdown([
  28.             '7' => 'Last 7 Days',
  29.             '28' => 'Last 28 Days',
  30.             '30' => 'Last Month',
  31.             '365' => 'Last Year',
  32.         ]);
  33.         // Set Chart Color
  34.         $this->chartColors([
  35.             $dark35,
  36.             $dark35,
  37.             $color->primary(),
  38.             $dark35,
  39.             $dark35,
  40.             $dark35
  41.         ]);
  42.     }
  44.     /**
  45.      * Processing of requests
  46.      *
  47.      * @param Request $request
  48.      *
  49.      * @return mixed|void
  50.      */
  51.     public function handle(Request $request)
  52.     {
  53.         switch ($request->get('option')) {
  54.             case '7':
  55.             default:
  56.                 // Card Content
  57.                 $this->withContent('2.7k', '+5.2%');
  59.                 // Chart data
  60.                 $this->withChart([
  61.                     [
  62.                         'name' => 'Sessions',
  63.                         'data' => [75, 125, 225, 175, 125, 75, 25],
  64.                     ],
  65.                 ]);
  66.         }
  67.     }
  69.     /**
  70.      * Setting up chart data.
  71.      *
  72.      * @param array $data
  73.      *
  74.      * @return $this
  75.      */
  76.     public function withChart(array $data)
  77.     {
  78.         return $this->chart([
  79.             'series' => $data,
  80.         ]);
  81.     }
  83.     /**
  84.      * Set the card content.
  85.      *
  86.      * @param string $title
  87.      * @param string $value
  88.      * @param string $style
  89.      *
  90.      * @return $this
  91.      */
  92.     public function withContent($title, $value, $style = 'success')
  93.     {
  94.         // Display according to options
  95.         $label = strtolower(
  96.             $this->dropdown[request()->option] ?? 'last 7 days'
  97.         );
  99.         $minHeight = '183px';
  101.         return $this->content(
  102.             <<<HTML
  103. <div class="d-flex p-1 flex-column justify-content-between" style="padding-top: 0;width: 100%;height: 100%;min-height: {$minHeight}">
  104.     <div class="text-left">
  105.         <h1 class="font-large-2 mt-2 mb-0">{$title}</h1>
  106.         <h5 class="font-medium-2" style="margin-top: 10px;">
  107.             <span class="text-{$style}">{$value} </span>
  108.             <span>vs {$label}</span>
  109.         </h5>
  110.     </div>
  112.     <a href="#" class="btn btn-primary shadow waves-effect waves-light">View Details <i class="feather icon-chevrons-right"></i></a>
  113. </div>
  114. HTML
  115.         );
  116.     }
  117. }

Circle Charts (Round)

The Round Chart Card (Dcat\Admin/Widgets\Metrics\Round) is a statistical card with multiple rings, inherited from the base card Dcat\Admin/Widgets\Metrics\Card.

Statistical data cards - 图5

Example

The specific Example is similar to that of the above card, which can be referred to in the built-in App\Admin\Metrics\Examples\ProductOrders category, which will not be posted here.

More built-in cards

The system also has built-in cards such as Dcat\Admin\Widgets\Metrics\RadialBar, Dcat\Admin\Widgets\Metrics\SingleRound, etc. Since the Usages are similar to the above-mentioned cards, the code will not be repeated here.

[Click me to see an online demo of all the built-in cards] (http://103.39.211.179:8080/admin/components/metric-cards)

Custom chart cards

For custom cards, refer to the code for the built-in chart above.