Merge remote-tracking branch 'origin/dev' into feat/service-de-scoring

2026-09-18 15:06:41 +02:00
parent eb4291b10a 9a72bb3a8f
commit 460d6c1b3e
32 changed files with 4851 additions and 197 deletions
@@ -0,0 +1 @@
+<canvas #canvas></canvas>
@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  height: 260px;
+}
@@ -0,0 +1,101 @@
+import { TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+import { Chart } from 'chart.js';
+import { ReadingHistoryChart } from './reading-history-chart';
+
+vi.mock('chart.js', () => {
+  class ChartMock {
+    static instances: ChartMock[] = [];
+    static register = vi.fn();
+    update = vi.fn();
+    destroy = vi.fn();
+    data: { labels?: unknown[]; datasets: Record<string, unknown>[] } = { datasets: [{}] };
+    constructor(_canvas: unknown, config?: { data?: ChartMock['data'] }) {
+      if (config?.data) {
+        this.data = config.data;
+      }
+      ChartMock.instances.push(this);
+    }
+  }
+  return { Chart: ChartMock, registerables: [] };
+});
+
+type ChartDouble = {
+  destroy: ReturnType<typeof vi.fn>;
+  data: { labels?: unknown[]; datasets: Record<string, unknown>[] };
+};
+
+function lastChart(): ChartDouble | undefined {
+  return (Chart as unknown as { instances: ChartDouble[] }).instances.at(-1);
+}
+
+const READING = {
+  reading_id: 1,
+  site_id: 'S1',
+  timestamp: '2026-09-17T10:00:00Z',
+  source: 'api_history' as const,
+  consumption_kw: 42,
+  consumption_kwh: null,
+  consumption_euros: null,
+  voltage_v: null,
+  current_a: null,
+  power_factor: null,
+  temperature_celsius: null,
+  humidity_percent: null,
+  solar_irradiance_wm2: null,
+  is_working_hours: null,
+  data_quality: 'good' as const,
+  null_reasons: null,
+  imputed_values: null,
+  imputation_method: null,
+};
+
+describe('ReadingHistoryChart', () => {
+  it('se crée sans erreur avec une liste de lectures valide', () => {
+    TestBed.configureTestingModule({ imports: [ReadingHistoryChart] });
+    const fixture = TestBed.createComponent(ReadingHistoryChart);
+    fixture.componentRef.setInput('readings', [READING]);
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it('met à jour le graphique quand les lectures changent après initialisation', () => {
+    TestBed.configureTestingModule({ imports: [ReadingHistoryChart] });
+    const fixture = TestBed.createComponent(ReadingHistoryChart);
+    fixture.componentRef.setInput('readings', [READING]);
+    fixture.detectChanges();
+
+    fixture.componentRef.setInput('readings', [
+      { ...READING, reading_id: 2, consumption_kw: 60, data_quality: 'critical' as const },
+    ]);
+    fixture.detectChanges();
+
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it("trace du plus ancien au plus récent, quel que soit l'ordre reçu de l'API", () => {
+    TestBed.configureTestingModule({ imports: [ReadingHistoryChart] });
+    const fixture = TestBed.createComponent(ReadingHistoryChart);
+    // L'API trie en timestamp décroissant : le composant doit rétablir la chronologie.
+    fixture.componentRef.setInput('readings', [
+      { ...READING, reading_id: 2, timestamp: '2026-09-17T11:00:00Z', consumption_kw: 60 },
+      { ...READING, reading_id: 1, timestamp: '2026-09-17T10:00:00Z', consumption_kw: 42 },
+    ]);
+    fixture.detectChanges();
+
+    const chart = lastChart();
+    expect(chart?.data.labels).toEqual(['2026-09-17T10:00:00Z', '2026-09-17T11:00:00Z']);
+    expect(chart?.data.datasets[0]['data']).toEqual([42, 60]);
+  });
+
+  it('détruit le graphique quand le composant est détruit', () => {
+    TestBed.configureTestingModule({ imports: [ReadingHistoryChart] });
+    const fixture = TestBed.createComponent(ReadingHistoryChart);
+    fixture.componentRef.setInput('readings', [READING]);
+    fixture.detectChanges();
+
+    const chart = lastChart();
+    fixture.destroy();
+
+    expect(chart?.destroy).toHaveBeenCalledTimes(1);
+  });
+});
@@ -0,0 +1,95 @@
+import {
+  Component,
+  ElementRef,
+  ViewChild,
+  input,
+  effect,
+  AfterViewInit,
+  OnDestroy,
+} from '@angular/core';
+import { Chart, registerables } from 'chart.js';
+import { Reading, ReadingDataQuality } from '../../models/reading.model';
+
+Chart.register(...registerables);
+
+const QUALITY_COLORS: Record<ReadingDataQuality, string> = {
+  good: '#3b82f6',
+  partial: '#f9a825',
+  degraded: '#ef6c00',
+  critical: '#c62828',
+};
+const UNKNOWN_QUALITY_COLOR = '#9ca3af';
+
+interface ChartSeries {
+  labels: string[];
+  values: number[];
+  colors: string[];
+}
+
+// Piège : l'API renvoie les lectures du plus récent au plus ancien (ReadingRepository.list_history
+// trie en timestamp desc) ; sans ce tri l'axe des abscisses se lirait à rebours.
+function toSeries(readings: Reading[]): ChartSeries {
+  const ordered = [...readings].sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp));
+  return {
+    labels: ordered.map((r) => r.timestamp),
+    values: ordered.map((r) => r.consumption_kw ?? 0),
+    colors: ordered.map((r) =>
+      r.data_quality ? QUALITY_COLORS[r.data_quality] : UNKNOWN_QUALITY_COLOR,
+    ),
+  };
+}
+
+@Component({
+  selector: 'app-reading-history-chart',
+  standalone: true,
+  templateUrl: './reading-history-chart.html',
+  styleUrl: './reading-history-chart.scss',
+})
+export class ReadingHistoryChart implements AfterViewInit, OnDestroy {
+  readings = input.required<Reading[]>();
+
+  @ViewChild('canvas') private canvasRef!: ElementRef<HTMLCanvasElement>;
+  private chart?: Chart<'line'>;
+
+  constructor() {
+    effect(() => {
+      const series = toSeries(this.readings());
+      if (this.chart) {
+        this.chart.data.labels = series.labels;
+        this.chart.data.datasets[0].data = series.values;
+        this.chart.data.datasets[0].pointBackgroundColor = series.colors;
+        this.chart.update('none');
+      }
+    });
+  }
+
+  ngAfterViewInit(): void {
+    const series = toSeries(this.readings());
+    this.chart = new Chart(this.canvasRef.nativeElement, {
+      type: 'line',
+      data: {
+        labels: series.labels,
+        datasets: [
+          {
+            data: series.values,
+            borderColor: '#3b82f6',
+            pointBackgroundColor: series.colors,
+            tension: 0.25,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: {
+          y: { beginAtZero: true, title: { display: true, text: 'Consommation (kW)' } },
+        },
+      },
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.chart?.destroy();
+  }
+}
@@ -0,0 +1,23 @@
+export type ReadingSource = 'csv' | 'api_current' | 'api_history';
+export type ReadingDataQuality = 'good' | 'partial' | 'degraded' | 'critical';
+
+export interface Reading {
+  reading_id: number;
+  site_id: string;
+  timestamp: string;
+  source: ReadingSource;
+  consumption_kw: number | null;
+  consumption_kwh: number | null;
+  consumption_euros: string | null;
+  voltage_v: number | null;
+  current_a: number | null;
+  power_factor: number | null;
+  temperature_celsius: number | null;
+  humidity_percent: number | null;
+  solar_irradiance_wm2: number | null;
+  is_working_hours: boolean | null;
+  data_quality: ReadingDataQuality | null;
+  null_reasons: string[] | null;
+  imputed_values: Record<string, unknown> | null;
+  imputation_method: string | null;
+}
@@ -0,0 +1,16 @@
+import { ReadingDataQuality } from './reading.model';
+
+export interface SiteCurrent {
+  timestamp: string | null;
+  site_id: string;
+  site_type: string;
+  consumption_kw: number | null;
+  consumption_kwh: number | null;
+  voltage_v: number | null;
+  current_a: number | null;
+  power_factor: number | null;
+  temperature_celsius: number | null;
+  humidity_percent: number | null;
+  null_reasons: string[];
+  data_quality: ReadingDataQuality;
+}