You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.5 KiB
82 lines
2.5 KiB
<?php
|
|
|
|
use App\Domains\Identity\Queries\Dashboard\GetRoleDistributions;
|
|
use Livewire\Attributes\Computed;
|
|
use Livewire\Component;
|
|
|
|
new class extends Component
|
|
{
|
|
#[Computed]
|
|
public function roleDistributions(): array
|
|
{
|
|
return app(GetRoleDistributions::class)->fetch();
|
|
}
|
|
|
|
#[Computed]
|
|
public function chartOptions(): array
|
|
{
|
|
return [
|
|
'chart' => [
|
|
'type' => 'pie',
|
|
'width' => '100%',
|
|
'height' => 360,
|
|
],
|
|
'series' => $this->roleDistributions['series'],
|
|
'labels' => $this->roleDistributions['categories'],
|
|
'plotOptions' => [
|
|
'pie' => [
|
|
'dataLabels' => [
|
|
'offset' => 1,
|
|
],
|
|
],
|
|
],
|
|
'theme' => [
|
|
'monochrome' => [
|
|
'enabled' => true,
|
|
],
|
|
],
|
|
'dataLabels' => [
|
|
'formatter' => 'JS_RAW_FORMATTER', // Replaced in Blade wrapper
|
|
],
|
|
'legend' => [
|
|
'show' => false,
|
|
],
|
|
];
|
|
}
|
|
};
|
|
?>
|
|
|
|
<div class="card border-0 shadow-sm rounded-3">
|
|
<div class="card-body p-4">
|
|
<!-- Header Section -->
|
|
<div class="d-flex align-items-center gap-3 mb-4">
|
|
<div class="avatar bg-secondary-subtle text-secondary-emphasis p-3 rounded-3 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
|
|
@svg('tabler-user-shield', [
|
|
'class' => 'icon icon-lg',
|
|
])
|
|
</div>
|
|
<div>
|
|
<h2 class="fs-5 fw-semibold text-body mb-0" data-heading-tag="H2">
|
|
{{ __('domains/identity/dashboard.role_distribution.title') }}
|
|
</h2>
|
|
<span class="text-body-secondary small">
|
|
{{ __('domains/identity/dashboard.role_distribution.subtitle') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart Canvas Container -->
|
|
<div
|
|
id="role-distribution"
|
|
x-chart="{
|
|
...{{ json_encode($this->chartOptions) }},
|
|
dataLabels: {
|
|
formatter(val, opts) {
|
|
const name = opts.w.globals.labels[opts.seriesIndex];
|
|
return [name, val.toFixed(1) + '%'];
|
|
}
|
|
}
|
|
}"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|