67 lines
3.1 KiB
PHP
67 lines
3.1 KiB
PHP
@props([
|
|
'statusCounts' => [],
|
|
'statusColumns' => [],
|
|
'totalCount' => 0,
|
|
'expandOnHover' => true,
|
|
'size' => 'md'
|
|
])
|
|
|
|
@php
|
|
// Create segments for ALL status columns (even with 0 count)
|
|
// This ensures JavaScript can update any segment when tickets move
|
|
$segments = [];
|
|
foreach ($statusColumns as $statusId => $label) {
|
|
$count = $statusCounts[$statusId] ?? 0;
|
|
$percentage = ($totalCount > 0 && $count > 0) ? ($count / $totalCount) * 100 : 0;
|
|
$segments[] = [
|
|
'id' => $statusId,
|
|
'count' => $count,
|
|
'percentage' => round($percentage, 1),
|
|
'label' => is_array($label) ? ($label['name'] ?? $label['label'] ?? "Status {$statusId}") : $label,
|
|
];
|
|
}
|
|
|
|
$heights = [
|
|
'collapsed' => ['sm' => '4px', 'md' => '5px', 'lg' => '6px'],
|
|
'expanded' => ['sm' => '18px', 'md' => '22px', 'lg' => '26px']
|
|
];
|
|
$collapsedHeight = $heights['collapsed'][$size] ?? '5px';
|
|
$expandedHeight = $heights['expanded'][$size] ?? '22px';
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => 'micro-progress-bar']) }}
|
|
role="progressbar"
|
|
aria-label="Status breakdown"
|
|
style="position: relative; width: 100%;"
|
|
onmouseenter="this.querySelector('.progress-segments').style.height='{{ $expandedHeight }}'; this.querySelector('.progress-segments').style.borderRadius='4px';"
|
|
onmouseleave="this.querySelector('.progress-segments').style.height='{{ $collapsedHeight }}'; this.querySelector('.progress-segments').style.borderRadius='2.5px';">
|
|
|
|
<div class="progress-segments"
|
|
style="display: flex; align-items: stretch; height: {{ $collapsedHeight }}; border-radius: 2.5px; overflow: hidden; background-color: #D4D4D4; width: 100%; transition: height 0.2s ease, border-radius 0.2s ease; cursor: {{ $expandOnHover && $totalCount > 0 ? 'pointer' : 'default' }};">
|
|
@foreach($segments as $segment)
|
|
{{-- Render ALL segments (including empty ones) so JavaScript can update them after card moves --}}
|
|
<div class="status-segment status-{{ $segment['id'] }}"
|
|
style="flex: {{ $segment['percentage'] }} 1 0%; overflow: hidden;"
|
|
data-tippy-content="{{ $segment['count'] > 0 ? $segment['label'] . ': ' . $segment['count'] : '' }}">
|
|
<span class="segment-count">{{ $segment['count'] > 0 ? $segment['count'] : '' }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
@if($totalCount > 0)
|
|
<!-- Screen reader summary -->
|
|
<span style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;">
|
|
@foreach($segments as $segment)
|
|
@if($segment['count'] > 0)
|
|
{{ $segment['label'] }}: {{ $segment['count'] }}.
|
|
@endif
|
|
@endforeach
|
|
</span>
|
|
@else
|
|
<!-- Empty state for screen readers -->
|
|
<span style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;">
|
|
No tasks in this group.
|
|
</span>
|
|
@endif
|
|
</div>
|