179 lines
7.1 KiB
PHP
179 lines
7.1 KiB
PHP
<x-filament-widgets::widget>
|
|
<x-filament::section>
|
|
<x-slot name="heading">{{ __('Disk Usage') }}</x-slot>
|
|
<x-slot name="description">{{ $this->getData()['home'] }}</x-slot>
|
|
|
|
@php
|
|
$data = $this->getData();
|
|
$percent = min(100, max(0, $data['percent']));
|
|
$usedColor = match($data['color']) {
|
|
'danger' => '#ef4444',
|
|
'warning' => '#f59e0b',
|
|
default => '#22c55e',
|
|
};
|
|
@endphp
|
|
|
|
<style>
|
|
.disk-bar-container {
|
|
height: 70px;
|
|
width: 100%;
|
|
}
|
|
.disk-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
padding-top: 0.5rem;
|
|
}
|
|
.disk-stats-grid-2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
padding-top: 0.5rem;
|
|
}
|
|
.disk-stat-item {
|
|
text-align: center;
|
|
}
|
|
.disk-stat-value {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: rgb(17 24 39);
|
|
}
|
|
.dark .disk-stat-value {
|
|
color: white;
|
|
}
|
|
.disk-stat-label {
|
|
font-size: 0.75rem;
|
|
color: rgb(107 114 128);
|
|
}
|
|
.dark .disk-stat-label {
|
|
color: rgb(156 163 175);
|
|
}
|
|
</style>
|
|
|
|
@if($data['has_quota'])
|
|
<div
|
|
x-data="{
|
|
chart: null,
|
|
value: {{ $percent }},
|
|
init() {
|
|
this.initChart();
|
|
},
|
|
initChart() {
|
|
if (typeof window.echarts === 'undefined') {
|
|
setTimeout(() => this.initChart(), 100);
|
|
return;
|
|
}
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
this.chart = echarts.init(this.$refs.chart);
|
|
|
|
this.chart.setOption({
|
|
grid: {
|
|
left: 10,
|
|
right: 10,
|
|
top: 10,
|
|
bottom: 25,
|
|
containLabel: false
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
min: 0,
|
|
max: 100,
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: {
|
|
formatter: '{value}%',
|
|
color: isDark ? '#9ca3af' : '#6b7280',
|
|
fontSize: 11
|
|
},
|
|
splitLine: { show: false }
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: [''],
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { show: false }
|
|
},
|
|
series: [
|
|
{
|
|
name: '{{ __('Used') }}',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
barWidth: 28,
|
|
barGap: 0,
|
|
itemStyle: {
|
|
color: '{{ $usedColor }}',
|
|
borderRadius: [6, 0, 0, 6]
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{{ number_format($percent, 1) }}%',
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
fontSize: 13
|
|
},
|
|
data: [{{ $percent }}]
|
|
},
|
|
{
|
|
name: '{{ __('Free') }}',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
barWidth: 28,
|
|
itemStyle: {
|
|
color: isDark ? '#374151' : '#e5e7eb',
|
|
borderRadius: [0, 6, 6, 0]
|
|
},
|
|
data: [{{ 100 - $percent }}]
|
|
}
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
formatter: function(params) {
|
|
return params.map(p => p.seriesName + ': ' + p.value.toFixed(1) + '%').join('<br>');
|
|
}
|
|
}
|
|
});
|
|
window.addEventListener('resize', () => this.chart?.resize());
|
|
},
|
|
destroy() {
|
|
this.chart?.dispose();
|
|
}
|
|
}"
|
|
wire:ignore
|
|
>
|
|
<div x-ref="chart" class="disk-bar-container"></div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($data['has_quota'] && $data['free'])
|
|
<div class="disk-stats-grid">
|
|
<div class="disk-stat-item">
|
|
<div class="disk-stat-value">{{ $data['used'] }}</div>
|
|
<div class="disk-stat-label">{{ __('Used') }}</div>
|
|
</div>
|
|
<div class="disk-stat-item">
|
|
<div class="disk-stat-value">{{ $data['free'] }}</div>
|
|
<div class="disk-stat-label">{{ __('Free') }}</div>
|
|
</div>
|
|
<div class="disk-stat-item">
|
|
<div class="disk-stat-value">{{ $data['quota'] }}</div>
|
|
<div class="disk-stat-label">{{ __('Quota') }}</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="disk-stats-grid-2">
|
|
<div class="disk-stat-item">
|
|
<div class="disk-stat-value">{{ $data['used'] }}</div>
|
|
<div class="disk-stat-label">{{ __('Used') }}</div>
|
|
</div>
|
|
<div class="disk-stat-item">
|
|
<div class="disk-stat-value">{{ $data['quota'] }}</div>
|
|
<div class="disk-stat-label">{{ __('Quota') }}</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</x-filament::section>
|
|
</x-filament-widgets::widget>
|