103 lines
3.3 KiB
HTML
103 lines
3.3 KiB
HTML
<section class="plant-history">
|
|
|
|
<!-- Toolbar: Auflösung wählen -->
|
|
<div class="toolbar">
|
|
<h2>Ertragsverlauf</h2>
|
|
<div class="resolution-switcher" role="group" aria-label="Zeitauflösung wählen">
|
|
@for (r of resolutions; track r.value) {
|
|
<button
|
|
type="button"
|
|
[class.active]="resolution() === r.value"
|
|
(click)="setResolution(r.value)"
|
|
[attr.aria-pressed]="resolution() === r.value"
|
|
>
|
|
{{ r.label }}
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@if (loading()) {
|
|
<app-loading-spinner />
|
|
} @else if (error()) {
|
|
<app-error-message [message]="error()!" />
|
|
} @else if (historyData(); as data) {
|
|
|
|
<!-- KPI-Zusammenfassung -->
|
|
<div class="kpi-row">
|
|
<article class="kpi-card">
|
|
<span class="kpi-label">Gesamtertrag (Zeitraum)</span>
|
|
<span class="kpi-value">{{ totalEnergy() | number:'1.1-2' }} kWh</span>
|
|
</article>
|
|
@if (peakEntry(); as peak) {
|
|
<article class="kpi-card kpi-card--yellow">
|
|
<span class="kpi-label">Spitzenleistung</span>
|
|
<span class="kpi-value">{{ peak.peakPowerKw | number:'1.1-2' }} kW</span>
|
|
<span class="kpi-sub">{{ peak.timestamp | date:dateFormat(resolution()) }}</span>
|
|
</article>
|
|
}
|
|
<article class="kpi-card">
|
|
<span class="kpi-label">Datenpunkte</span>
|
|
<span class="kpi-value">{{ data.entries.length }}</span>
|
|
</article>
|
|
</div>
|
|
|
|
<!-- Balkendiagramm (CSS-basiert) -->
|
|
@if (chartBarData().length) {
|
|
<div class="chart-section">
|
|
<h3>Ertrag je Zeiteinheit (kWh)</h3>
|
|
<div
|
|
class="bar-chart"
|
|
role="img"
|
|
[attr.aria-label]="'Balkendiagramm Ertrag ' + resolution()"
|
|
>
|
|
@for (bar of chartBarData(); track bar.timestamp) {
|
|
<div class="bar-wrap">
|
|
<span class="bar-value">{{ bar.energyKwh | number:'1.0-1' }}</span>
|
|
<div
|
|
class="bar"
|
|
[style.height.%]="bar.barPercent"
|
|
[attr.aria-label]="(bar.timestamp | date:dateFormat(resolution())) + ': ' + bar.energyKwh + ' kWh'"
|
|
></div>
|
|
<span class="bar-label">{{ bar.timestamp | date:dateFormat(resolution()) }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Datentabelle -->
|
|
<div class="table-section">
|
|
<h3>Detailtabelle</h3>
|
|
<div class="table-wrapper">
|
|
<table aria-label="Verlaufsdaten Tabelle">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Zeitpunkt</th>
|
|
<th scope="col">Ertrag (kWh)</th>
|
|
<th scope="col">Spitzenleistung (kW)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (entry of data.entries; track entry.timestamp) {
|
|
<tr>
|
|
<td>{{ entry.timestamp | date:dateFormat(resolution()) }}</td>
|
|
<td>{{ entry.energyKwh | number:'1.2-2' }}</td>
|
|
<td>{{ entry.peakPowerKw | number:'1.2-2' }}</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr>
|
|
<td colspan="3" class="empty-state">Keine Daten für diesen Zeitraum.</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
} @else {
|
|
<p class="empty-state">Keine Verlaufsdaten verfügbar.</p>
|
|
}
|
|
|
|
</section>
|