RadialBarChartCard.php 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <?php
  2. namespace Dcat\Admin\Widgets\Metrics;
  3. use Dcat\Admin\Admin;
  4. use Dcat\Admin\Support\Helper;
  5. use Illuminate\Contracts\Support\Renderable;
  6. class RadialBarChartCard extends Card
  7. {
  8. /**
  9. * @var array
  10. */
  11. protected $options = [
  12. 'icon' => null,
  13. 'title' => null,
  14. 'header' => null,
  15. 'content' => null,
  16. 'footer' => null,
  17. 'dropdown' => [],
  18. ];
  19. /**
  20. * @var int
  21. */
  22. protected $chartHeight = 150;
  23. /**
  24. * 内容宽度.
  25. *
  26. * @var array
  27. */
  28. protected $contentWidth = [2, 10];
  29. /**
  30. * @var int
  31. */
  32. protected $chartMarginBottom = -10;
  33. /**
  34. * 图表位置靠右.
  35. *
  36. * @var bool
  37. */
  38. protected $chartPullRight = false;
  39. /**
  40. * 初始化.
  41. */
  42. public function init()
  43. {
  44. parent::init();
  45. $this->useChart();
  46. $this->chart->style("margin-bottom: {$this->chartMarginBottom}px;");
  47. }
  48. /**
  49. * 图表默认配置.
  50. *
  51. * @return array
  52. */
  53. protected function defaultChartOptions()
  54. {
  55. $gradientColor = Admin::color()->success();
  56. $labelColor = '#99a2ac';
  57. return [
  58. 'chart' => [
  59. 'type' => 'radialBar',
  60. ],
  61. 'plotOptions' => [
  62. 'radialBar' => [
  63. 'size' => 150,
  64. 'startAngle' => -150,
  65. 'endAngle' => 150,
  66. 'offsetY' => 20,
  67. 'hollow' => [
  68. 'size' => '65%',
  69. ],
  70. 'track' => [
  71. 'background' => '#fff',
  72. 'strokeWidth' => '100%',
  73. ],
  74. 'dataLabels' => [
  75. 'value' => [
  76. 'offsetY' => 30,
  77. 'color' => $labelColor,
  78. 'fontSize' => '2rem',
  79. ],
  80. ],
  81. ],
  82. ],
  83. 'fill' => [
  84. 'type' => 'gradient',
  85. 'gradient' => [
  86. 'shade' => 'dark',
  87. 'type' => 'horizontal',
  88. 'shadeIntensity' => 0.5,
  89. 'gradientToColors' => [$gradientColor],
  90. 'inverseColors' => true,
  91. 'opacityFrom' => 1,
  92. 'opacityTo' => 1,
  93. 'stops' => [0, 100],
  94. ],
  95. ],
  96. 'stroke' => [
  97. 'dashArray' => 8,
  98. ],
  99. ];
  100. }
  101. /**
  102. * 设置卡片底部内容.
  103. *
  104. * @param string|\Closure|Renderable $value
  105. *
  106. * @return $this
  107. */
  108. public function footer($value)
  109. {
  110. $this->options['footer'] = $value;
  111. return $this;
  112. }
  113. /**
  114. * 设置内容宽度.
  115. *
  116. * @param int $left
  117. * @param int $right
  118. *
  119. * @return $this
  120. */
  121. public function contentWidth(int $left, int $right)
  122. {
  123. $this->contentWidth = [$left, $right];
  124. return $this;
  125. }
  126. /**
  127. * 图表位置靠右.
  128. *
  129. * @param bool $value
  130. *
  131. * @return $this
  132. */
  133. public function chartPullRight(bool $value = true)
  134. {
  135. $this->chartPullRight = $value;
  136. return $this;
  137. }
  138. /**
  139. * @return string
  140. */
  141. public function renderFooter()
  142. {
  143. return Helper::render($this->options['footer']);
  144. }
  145. /**
  146. * @return string
  147. */
  148. public function renderContent()
  149. {
  150. $content = null;
  151. if ($this->contentWidth[0]) {
  152. $content = parent::renderContent();
  153. $content = <<<HTML
  154. <div class="metric-content col-sm-{$this->contentWidth[0]}">
  155. {$content}
  156. </div>
  157. HTML;
  158. }
  159. $justifyClass = $this->chartPullRight ? 'justify-content-between' : 'justify-content-center';
  160. return <<<HTML
  161. <div class="card-content">
  162. <div class="card-body pt-0">
  163. <div class="row">
  164. {$content}
  165. <div class="col-sm-{$this->contentWidth[1]} d-flex {$justifyClass}">
  166. <div></div>
  167. <div>{$this->renderChart()}</div>
  168. </div>
  169. </div>
  170. <div class="metric-footer d-flex justify-content-between">
  171. {$this->renderFooter()}
  172. </div>
  173. </div>
  174. </div>
  175. HTML;
  176. }
  177. }