Sessions.php 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <?php
  2. namespace App\Admin\Metrics\Examples;
  3. use Dcat\Admin\Admin;
  4. use Dcat\Admin\Widgets\Metrics\Bar;
  5. use Illuminate\Http\Request;
  6. class Sessions extends Bar
  7. {
  8. /**
  9. * 初始化卡片内容.
  10. */
  11. protected function init()
  12. {
  13. parent::init();
  14. $color = Admin::color();
  15. $dark35 = $color->dark35();
  16. // 卡片内容宽度
  17. $this->contentWidth(5, 7);
  18. // 标题
  19. $this->title('Avg Sessions');
  20. // 设置下拉选项
  21. $this->dropdown([
  22. '7' => 'Last 7 Days',
  23. '28' => 'Last 28 Days',
  24. '30' => 'Last Month',
  25. '365' => 'Last Year',
  26. ]);
  27. // 设置图表颜色
  28. $this->chartColors([
  29. $dark35,
  30. $dark35,
  31. $color->primary(),
  32. $dark35,
  33. $dark35,
  34. $dark35,
  35. ]);
  36. }
  37. /**
  38. * 处理请求
  39. *
  40. * @return mixed|void
  41. */
  42. public function handle(Request $request)
  43. {
  44. switch ($request->get('option')) {
  45. case '7':
  46. default:
  47. // 卡片内容
  48. $this->withContent('2.7k', '+5.2%');
  49. // 图表数据
  50. $this->withChart([
  51. [
  52. 'name' => 'Sessions',
  53. 'data' => [75, 125, 225, 175, 125, 75, 25],
  54. ],
  55. ]);
  56. }
  57. }
  58. /**
  59. * 设置图表数据.
  60. *
  61. * @return $this
  62. */
  63. public function withChart(array $data)
  64. {
  65. return $this->chart([
  66. 'series' => $data,
  67. ]);
  68. }
  69. /**
  70. * 设置卡片内容.
  71. *
  72. * @param string $title
  73. * @param string $value
  74. * @param string $style
  75. *
  76. * @return $this
  77. */
  78. public function withContent($title, $value, $style = 'success')
  79. {
  80. // 根据选项显示
  81. $label = strtolower(
  82. $this->dropdown[request()->option] ?? 'last 7 days'
  83. );
  84. $minHeight = '183px';
  85. return $this->content(
  86. <<<HTML
  87. <div class="d-flex p-1 flex-column justify-content-between" style="padding-top: 0;width: 100%;height: 100%;min-height: {$minHeight}">
  88. <div class="text-left">
  89. <h1 class="font-lg-2 mt-2 mb-0">{$title}</h1>
  90. <h5 class="font-medium-2" style="margin-top: 10px;">
  91. <span class="text-{$style}">{$value} </span>
  92. <span>vs {$label}</span>
  93. </h5>
  94. </div>
  95. <a href="#" class="btn btn-primary shadow waves-effect waves-light">View Details <i class="feather icon-chevrons-right"></i></a>
  96. </div>
  97. HTML
  98. );
  99. }
  100. }