RadialBarCard.php 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <?php
  2. namespace Dcat\Admin\Widgets\Metrics;
  3. use Dcat\Admin\Admin;
  4. use Dcat\Admin\Support\Helper;
  5. use Dcat\Admin\Traits\FromApi;
  6. use Illuminate\Contracts\Support\Renderable;
  7. class RadialBarCard extends Card
  8. {
  9. use FromApi;
  10. /**
  11. * @var array
  12. */
  13. protected $options = [
  14. 'icon' => null,
  15. 'title' => null,
  16. 'header' => null,
  17. 'content' => null,
  18. 'footer' => null,
  19. 'dropdown' => [],
  20. ];
  21. /**
  22. * @var int
  23. */
  24. protected $chartHeight = 200;
  25. /**
  26. * 图表默认配置.
  27. *
  28. * @return array
  29. */
  30. protected function defaultChartOptions()
  31. {
  32. $gradientColor = Admin::color()->success();
  33. $labelColor = '#99a2ac';
  34. return [
  35. 'chart' => [
  36. 'type' => 'radialBar',
  37. ],
  38. 'plotOptions' => [
  39. 'radialBar' => [
  40. 'size' => 150,
  41. 'startAngle' => -150,
  42. 'endAngle' => 150,
  43. 'offsetY' => 20,
  44. 'hollow' => [
  45. 'size' => '65%',
  46. ],
  47. 'track' => [
  48. 'background' => '#fff',
  49. 'strokeWidth' => '100%',
  50. ],
  51. 'dataLabels' => [
  52. 'value' => [
  53. 'offsetY' => 30,
  54. 'color' => $labelColor,
  55. 'fontSize' => '2rem'
  56. ]
  57. ]
  58. ],
  59. ],
  60. 'fill' => [
  61. 'type' => 'gradient',
  62. 'gradient' => [
  63. 'shade' => 'dark',
  64. 'type' => 'horizontal',
  65. 'shadeIntensity' => 0.5,
  66. 'gradientToColors' => [$gradientColor],
  67. 'inverseColors' => true,
  68. 'opacityFrom' => 1,
  69. 'opacityTo' => 1,
  70. 'stops' => [0, 100]
  71. ],
  72. ],
  73. 'stroke' => [
  74. 'dashArray' => 8
  75. ],
  76. ];
  77. }
  78. /**
  79. * 设置卡片底部内容.
  80. *
  81. * @param string|\Closure|Renderable $value
  82. *
  83. * @return $this
  84. */
  85. public function footer($value)
  86. {
  87. $this->options['footer'] = $value;
  88. return $this;
  89. }
  90. /**
  91. * @return string
  92. */
  93. public function renderFooter()
  94. {
  95. return Helper::render($this->options['footer']);
  96. }
  97. /**
  98. * @return string
  99. */
  100. public function renderContent()
  101. {
  102. $content = parent::renderContent();
  103. return <<<HTML
  104. <div class="card-content">
  105. <div class="card-body pt-0">
  106. <div class="row">
  107. <div class="metric-content col-sm-2 col-12 d-flex flex-column flex-wrap text-center">
  108. {$content}
  109. </div>
  110. <div class="col-sm-10 col-12 d-flex justify-content-center">
  111. {$this->renderChart()}
  112. </div>
  113. </div>
  114. <div class="chart-info metric-footer d-flex justify-content-between">
  115. {$this->renderFooter()}
  116. </div>
  117. </div>
  118. </div>
  119. HTML;
  120. }
  121. }