2021-09-07 15:43:09 +00:00
|
|
|
<?php
|
|
|
|
|
|
|
|
|
|
declare(strict_types=1);
|
|
|
|
|
|
|
|
|
|
namespace App\Views\Components\Charts;
|
|
|
|
|
|
2024-05-29 10:24:13 +00:00
|
|
|
use Override;
|
2021-09-07 15:43:09 +00:00
|
|
|
use ViewComponents\Component;
|
|
|
|
|
|
|
|
|
|
class ChartsComponent extends Component
|
|
|
|
|
{
|
2024-12-15 17:34:36 +00:00
|
|
|
protected array $props = ['title', 'subtitle', 'dataUrl', 'type'];
|
|
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
protected string $title;
|
2021-09-07 15:43:09 +00:00
|
|
|
|
2022-12-28 16:57:14 +00:00
|
|
|
protected string $subtitle = '';
|
|
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
protected string $dataUrl;
|
2021-09-07 15:43:09 +00:00
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
protected string $type;
|
2021-09-07 15:43:09 +00:00
|
|
|
|
2024-05-29 10:24:13 +00:00
|
|
|
#[Override]
|
2021-09-07 15:43:09 +00:00
|
|
|
public function render(): string
|
|
|
|
|
{
|
2022-12-28 16:57:14 +00:00
|
|
|
$subtitleBlock = '';
|
|
|
|
|
if ($this->subtitle !== '') {
|
|
|
|
|
$subtitleBlock = '<p class="px-6 -mt-4 text-sm text-skin-muted">' . $this->subtitle . '</p>';
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
$this->mergeClass('bg-elevated border-3 rounded-xl border-subtle');
|
|
|
|
|
|
2021-09-07 15:43:09 +00:00
|
|
|
return <<<HTML
|
2024-05-09 17:55:41 +00:00
|
|
|
<div {$this->getStringifiedAttributes()}>
|
2021-09-07 15:43:09 +00:00
|
|
|
<h2 class="px-6 py-4 text-xl">{$this->title}</h2>
|
2022-12-28 16:57:14 +00:00
|
|
|
{$subtitleBlock}
|
2021-09-07 15:43:09 +00:00
|
|
|
<div class="w-full h-[500px]" data-chart-type="{$this->type}" data-chart-url="{$this->dataUrl}"></div>
|
|
|
|
|
</div>
|
|
|
|
|
HTML;
|
|
|
|
|
}
|
|
|
|
|
}
|
