Initial commit: Angular PV Pulse App

src/app/features/plant-history/plant-history.component.html

@@ -0,0 +1,102 @@
+<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>