plot tooltip

src/main/angular/src/app/location/energy/plot/EnergyPoint.ts

@@ -2,6 +2,8 @@ export class EnergyPoint {
 
   readonly epochSeconds: number;
 
+  readonly date: Date;
+
   private _purchase: number | null = null;
 
   private _produce: number | null = null;
@@ -51,6 +53,7 @@ export class EnergyPoint {
     point: number[],
   ) {
     this.epochSeconds = point[0];
+    this.date = new Date(this.epochSeconds * 1000);
   }
 
   set deliver(value: number | null) {

src/main/angular/src/app/location/energy/plot/energy-plot.html

@@ -1,33 +1,42 @@
-<svg [attr.viewBox]="`0 0 ${widthPx} ${heightPx}`" [style.background-color]="'#eee'">
+<svg [attr.viewBox]="`0 0 ${widthPx} ${heightPx+1}`" [style.background-color]="'#eee'">
   @for (point of points; track point.epochSeconds) {
+    <g>
+      <title>
+        Bezug: {{ location.energyPurchase?.toValue(point.purchase, point.date)?.toValueString(null) }}
+        Solar: {{ location.energyProduce?.toValue(point.produce, point.date)?.toValueString(null) }}
+        Selbst: {{ location.energyPurchase?.toValue(point.self, point.date)?.toValueString(null) }}
+        Einsp.: {{ location.energyDeliver?.toValue(point.deliver, point.date)?.toValueString(null) }}
+        Verbrauch: {{ location.energyPurchase?.toValue(point.consume, point.date)?.toValueString(null) }}
+      </title>
       <rect
         [attr.x]="(point.epochSeconds - xMin) * xFactor"
-      [attr.y]="heightPx - 1 + yMinPx - point.getPurchaseY(yFactor)"
+        [attr.y]="heightPx  + yMinPx - point.getPurchaseY(yFactor)"
         [attr.width]="xWidthPx"
         [attr.height]="point.getPurchaseH(yFactor)"
         class="COLOR_BACK_PURCHASE"
       ></rect>
       <rect
         [attr.x]="(point.epochSeconds - xMin) * xFactor"
-      [attr.y]="heightPx - 1 + yMinPx - point.getSelfY(yFactor)"
+        [attr.y]="heightPx  + yMinPx - point.getSelfY(yFactor)"
         [attr.width]="xWidthPx"
         [attr.height]="point.getSelfH(yFactor)"
         class="COLOR_BACK_SELF"
       ></rect>
       <rect
         [attr.x]="(point.epochSeconds - xMin) * xFactor"
-      [attr.y]="heightPx + yMinPx"
+        [attr.y]="heightPx+1 + yMinPx"
         [attr.width]="xWidthPx"
         [attr.height]="point.getDeliverH(yFactor)"
         class="COLOR_BACK_DELIVER"
       ></rect>
+    </g>
+  }
   <line
     x1="0"
-      [attr.y1]="heightPx - 1 + yMinPx"
+    [attr.y1]="heightPx +0.5 + yMinPx"
     [attr.x2]="widthPx"
-      [attr.y2]="heightPx - 1 + yMinPx"
+    [attr.y2]="heightPx +0.5 + yMinPx"
     stroke="#aaaaaa"
     stroke-width="1"
   ></line>
-  }
 </svg>

src/main/angular/src/app/location/energy/plot/energy-plot.less

@@ -1 +1,5 @@
 @import "../../../../colors";
+
+g:hover {
+  stroke: black;
+}

src/main/angular/src/app/location/energy/plot/energy-plot.ts

@@ -126,6 +126,10 @@ export class EnergyPlot implements OnInit, OnDestroy, AfterViewInit {
     this.ngAfterViewInit();
   }
 
+  get location(): Location {
+    return this._location;
+  }
+
   @Input()
   set interval(value: Interval) {
     this._interval = value;

src/main/angular/src/app/series/Series.ts

@@ -37,4 +37,11 @@ export class Series {
     return this.id === other?.id;
   }
 
+  toValue(value: number | null | undefined, date: Date | null | undefined): Value {
+    if (value === null || value === undefined || date === null || date === undefined) {
+      return Value.NULL;
+    }
+    return Value.of(this, value, date);
+  }
+
 }