82 lines
5.2 KiB
PHP
82 lines
5.2 KiB
PHP
{{-- Expects: $kpi (App\Models\Kpi), $chart (array from App\Support\KpiChart::build) --}}
|
|
<div class="rounded-md bg-white p-4">
|
|
<p class="mb-1 text-sm font-semibold text-gray-900">{{ $kpi->name }} — last 12 months</p>
|
|
<p class="mb-3 text-xs text-gray-500">{{ $kpi->thresholdSummary() }}@if ($kpi->unit_label) · unit: {{ $kpi->unit_label }}@endif</p>
|
|
|
|
@if (($chart['type'] === 'line' && empty($chart['points'])) || ($chart['type'] === 'milestone' && empty($chart['markers'])))
|
|
<p class="py-4 text-sm text-gray-500">No entries in the last 12 months.</p>
|
|
@elseif ($chart['type'] === 'line')
|
|
<svg viewBox="0 0 {{ $chart['width'] }} {{ $chart['height'] }}" role="img" aria-label="{{ $chart['aria'] }}"
|
|
class="h-auto w-full max-w-3xl" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif">
|
|
{{-- Threshold zone bands (10% status washes) --}}
|
|
@foreach ($chart['bands'] as $band)
|
|
<rect x="{{ $chart['plot']['x'] }}" y="{{ $band['y'] }}" width="{{ $chart['plot']['w'] }}" height="{{ $band['h'] }}"
|
|
fill="{{ $band['color'] }}" fill-opacity="0.10" />
|
|
@endforeach
|
|
|
|
{{-- Gridlines + y ticks --}}
|
|
@foreach ($chart['gridlines'] as $grid)
|
|
<line x1="{{ $chart['plot']['x'] }}" y1="{{ $grid['y'] }}" x2="{{ $chart['plot']['x'] + $chart['plot']['w'] }}" y2="{{ $grid['y'] }}"
|
|
stroke="{{ \App\Support\KpiChart::GRIDLINE }}" stroke-width="1" />
|
|
<text x="{{ $chart['plot']['x'] - 6 }}" y="{{ $grid['y'] + 3 }}" text-anchor="end"
|
|
font-size="10" fill="{{ \App\Support\KpiChart::INK_MUTED }}">{{ $grid['label'] }}</text>
|
|
@endforeach
|
|
|
|
{{-- Threshold / target reference lines --}}
|
|
@foreach ($chart['refLines'] as $ref)
|
|
<line x1="{{ $chart['plot']['x'] }}" y1="{{ $ref['y'] }}" x2="{{ $chart['plot']['x'] + $chart['plot']['w'] }}" y2="{{ $ref['y'] }}"
|
|
stroke="{{ \App\Support\KpiChart::INK_MUTED }}" stroke-width="1" stroke-dasharray="4 3" />
|
|
<text x="{{ $chart['plot']['x'] + $chart['plot']['w'] + 4 }}" y="{{ $ref['y'] + 3 }}"
|
|
font-size="9" fill="{{ \App\Support\KpiChart::INK_SECONDARY }}">{{ $ref['label'] }}</text>
|
|
@endforeach
|
|
|
|
{{-- Value line (gaps split the path; pathLength normalizes the draw-in animation) --}}
|
|
@foreach ($chart['paths'] as $path)
|
|
<path d="{{ $path }}" pathLength="1" class="kpi-line"
|
|
fill="none" stroke="{{ $chart['lineColor'] }}" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
@endforeach
|
|
|
|
{{-- Points, status-colored with a 2px surface ring --}}
|
|
@foreach ($chart['points'] as $point)
|
|
<circle cx="{{ $point['x'] }}" cy="{{ $point['y'] }}" r="4.5" class="kpi-pop" style="--i: {{ $loop->index }}"
|
|
fill="{{ $point['color'] }}" stroke="#ffffff" stroke-width="2">
|
|
<title>{{ $point['title'] }}</title>
|
|
</circle>
|
|
@endforeach
|
|
|
|
{{-- End value label (selective direct label) --}}
|
|
@if ($chart['endLabel'])
|
|
<text x="{{ $chart['endLabel']['x'] }}" y="{{ $chart['endLabel']['y'] }}"
|
|
font-size="11" font-weight="600" fill="{{ \App\Support\KpiChart::INK_PRIMARY }}">{{ $chart['endLabel']['text'] }}</text>
|
|
@endif
|
|
|
|
{{-- Month labels --}}
|
|
@foreach ($chart['monthLabels'] as $label)
|
|
<text x="{{ $label['x'] }}" y="{{ $label['y'] }}" text-anchor="middle"
|
|
font-size="9" fill="{{ \App\Support\KpiChart::INK_MUTED }}">{{ $label['label'] }}</text>
|
|
@endforeach
|
|
</svg>
|
|
@else
|
|
{{-- Milestone timeline: met / missed markers per month --}}
|
|
<svg viewBox="0 0 {{ $chart['width'] }} {{ $chart['height'] }}" role="img" aria-label="{{ $chart['aria'] }}"
|
|
class="h-auto w-full max-w-3xl" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif">
|
|
<line x1="{{ $chart['plot']['x'] }}" y1="{{ $chart['baseline'] }}" x2="{{ $chart['plot']['x'] + $chart['plot']['w'] }}" y2="{{ $chart['baseline'] }}"
|
|
stroke="{{ \App\Support\KpiChart::GRIDLINE }}" stroke-width="1" />
|
|
@foreach ($chart['markers'] as $marker)
|
|
<g class="kpi-pop" style="--i: {{ $loop->index }}">
|
|
<title>{{ $marker['title'] }}</title>
|
|
<circle cx="{{ $marker['x'] }}" cy="{{ $marker['y'] }}" r="9"
|
|
fill="{{ $marker['color'] }}" stroke="#ffffff" stroke-width="2" />
|
|
<text x="{{ $marker['x'] }}" y="{{ $marker['y'] + 3.5 }}" text-anchor="middle"
|
|
font-size="10" font-weight="700" fill="#ffffff">{{ $marker['glyph'] }}</text>
|
|
</g>
|
|
@endforeach
|
|
@foreach ($chart['monthLabels'] as $label)
|
|
<text x="{{ $label['x'] }}" y="{{ $label['y'] }}" text-anchor="middle"
|
|
font-size="9" fill="{{ \App\Support\KpiChart::INK_MUTED }}">{{ $label['label'] }}</text>
|
|
@endforeach
|
|
</svg>
|
|
@endif
|
|
</div>
|