percentages

src/main/angular/src/app/location/Location.ts

@@ -4,6 +4,20 @@ import {Value} from '../series/Value';
 
 export class Location {
 
+  powerSelf: Value = Value.NULL;
+
+  powerPurchasePercentConsume: Value = Value.NULL;
+
+  powerProducePercentConsume: Value = Value.NULL;
+
+  powerDeliveryPercentConsume: Value = Value.NULL;
+
+  powerDeliveryPercentProduce: Value = Value.NULL;
+
+  powerSelfPercentConsume: Value = Value.NULL;
+
+  powerSelfPercentProduce: Value = Value.NULL;
+
   constructor(
     readonly id: number,
     readonly name: string,
@@ -46,6 +60,13 @@ export class Location {
 
   private updateConsume() {
     this._powerConsume = Value.ZERO.plus(this._powerPurchase?.value, true).plus(this._powerProduce?.value, true).minus(this._powerDeliver?.value, true);
+    this.powerSelf = Value.ZERO.plus(this.powerProduce?.value.minus(this.powerDeliver?.value, true), true);
+    this.powerPurchasePercentConsume = Value.ZERO.plus(this.powerPurchase?.value.percent(this.powerConsume, "%", 0), true);
+    this.powerProducePercentConsume = Value.ZERO.plus(this.powerProduce?.value.percent(this.powerConsume, "%", 0), true);
+    this.powerDeliveryPercentConsume = Value.ZERO.plus(this.powerDeliver?.value.percent(this.powerConsume, "%", 0), true);
+    this.powerDeliveryPercentProduce = Value.ZERO.plus(this.powerDeliver?.value.percent(this.powerProduce?.value, "%", 0), true);
+    this.powerSelfPercentConsume = Value.ZERO.plus(this.powerSelf.percent(this.powerConsume, "%", 0), true);
+    this.powerSelfPercentProduce = Value.ZERO.plus(this.powerSelf.percent(this.powerProduce?.value, "%", 0), true);
   }
 
   static fromJson(json: any): Location {

src/main/angular/src/app/location/detail/location-detail.html

@@ -2,21 +2,32 @@
 
   <app-location-power [location]="location"></app-location-power>
 
-  <app-location-energy [location]="location" [interval]="Interval.DAY" heading="Heute"></app-location-energy>
+  <app-location-energy [location]="location" [interval]="Interval.DAY" [offset]="offsetDay">
-
-  <app-location-energy [location]="location" [interval]="Interval.DAY" [offset]="offset">
     <ng-content #SeriesHistoryHeading>
       <div style="display: flex; width: 100%">
         &nbsp;
-        <div (click)="offset += 1">&larr;</div>
+        <div (click)="offsetDay += 1">&larr;</div>
         &nbsp;
-        <div (click)="offset = Math.max(1, offset -1)">&rarr;</div>
+        <div (click)="offsetDay = Math.max(0, offsetDay -1)">&rarr;</div>
         &nbsp;
         <div style="flex: 1">{{ offsetDayTitle() }}</div>
       </div>
     </ng-content>
   </app-location-energy>
 
+  <app-location-energy [location]="location" [interval]="Interval.MONTH" [offset]="offsetMonth">
+    <ng-content #SeriesHistoryHeading>
+      <div style="display: flex; width: 100%">
+        &nbsp;
+        <div (click)="offsetMonth += 1">&larr;</div>
+        &nbsp;
+        <div (click)="offsetMonth = Math.max(0, offsetMonth -1)">&rarr;</div>
+        &nbsp;
+        <div style="flex: 1">{{ offsetMonthTitle() }}</div>
+      </div>
+    </ng-content>
+  </app-location-energy>
+
   <div class="Section">
     <div class="SectionHeading">
       <div class="SectionHeadingText">

src/main/angular/src/app/location/detail/location-detail.ts

@@ -41,7 +41,9 @@ export class LocationDetail implements OnInit, OnDestroy {
 
   private readonly subs: Subscription [] = [];
 
-  protected offset: number = 1;
+  protected offsetDay: number = 0;
+
+  protected offsetMonth: number = 0;
 
   private readonly datePipe: DatePipe;
 
@@ -76,16 +78,21 @@ export class LocationDetail implements OnInit, OnDestroy {
   }
 
   protected offsetDayTitle(): string {
-    if (this.offset === 1) {
+    if (this.offsetDay === 0) {
+      return 'Heute';
+    } else if (this.offsetDay === 1) {
       return 'Gestern';
     } else {
-      if (this.offset < 7) {
+      const d = new Date(this.dateService.now);
-        const d = new Date(this.dateService.now);
+      d.setDate(d.getDate() - this.offsetDay);
-        d.setDate(d.getDate() - this.offset);
+      return this.datePipe.transform(d, 'dd.MM.yyyy EEEE') || '';
-        return this.datePipe.transform(d, 'EEEE') || '';
-      }
-      return `Vor ${this.offset} Tagen`;
     }
   }
 
+  protected offsetMonthTitle(): string {
+    const d = new Date(this.dateService.now);
+    d.setMonth(d.getMonth() - this.offsetMonth);
+    return this.datePipe.transform(d, 'yyyy MMMM') || '';
+  }
+
 }

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

@@ -14,6 +14,10 @@
       <div class="SectionBody COLOR_FONT_PURCHASE">
         {{ purchase.toValueString(null) }}
       </div>
+      <div class="SectionBody COLOR_FONT_PURCHASE percent">
+        {{ purchasePercentConsume.toValueString(null) }}
+        <sub class="subscript">Verbrauch</sub>
+      </div>
     </div>
 
     <div class="Section4">
@@ -23,6 +27,27 @@
       <div class="SectionBody COLOR_FONT_PRODUCE">
         {{ produce.toValueString(null) }}
       </div>
+      <div class="SectionBody COLOR_FONT_PRODUCE percent">
+        {{ producePercentConsume.toValueString(null) }}
+        <sub class="subscript">Verbrauch</sub>
+      </div>
+    </div>
+
+    <div class="Section4">
+      <div class="SectionHeadingText">
+        Selbst
+      </div>
+      <div class="SectionBody COLOR_FONT_SELF">
+        {{ self.toValueString(null) }}
+      </div>
+      <div class="SectionBody COLOR_FONT_SELF percent">
+        {{ selfPercentConsume.toValueString(null) }}
+        <sub class="subscript">Verbrauch</sub>
+      </div>
+      <div class="SectionBody COLOR_FONT_SELF percent">
+        {{ selfPercentProduce.toValueString(null) }}
+        <sub class="subscript">Produktion</sub>
+      </div>
     </div>
 
     <div class="Section4">
@@ -41,6 +66,14 @@
       <div class="SectionBody COLOR_FONT_DELIVER">
         {{ deliver.toValueString(null) }}
       </div>
+      <div class="SectionBody COLOR_FONT_DELIVER percent">
+        {{ deliveryPercentConsume.toValueString(null) }}
+        <sub class="subscript">Verbrauch</sub>
+      </div>
+      <div class="SectionBody COLOR_FONT_DELIVER percent">
+        {{ deliveryPercentProduce.toValueString(null) }}
+        <sub class="subscript">Produktion</sub>
+      </div>
     </div>
 
   </div>

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

@@ -31,6 +31,20 @@ export class LocationEnergy implements OnInit, AfterViewInit, OnDestroy {
 
   protected consume: Value = Value.NULL;
 
+  protected self: Value = Value.NULL;
+
+  protected purchasePercentConsume: Value = Value.NULL;
+
+  protected producePercentConsume: Value = Value.NULL;
+
+  protected deliveryPercentConsume: Value = Value.NULL;
+
+  protected deliveryPercentProduce: Value = Value.NULL;
+
+  protected selfPercentConsume: Value = Value.NULL;
+
+  protected selfPercentProduce: Value = Value.NULL;
+
   @Input()
   heading!: string;
 
@@ -89,6 +103,13 @@ export class LocationEnergy implements OnInit, AfterViewInit, OnDestroy {
     const callNextAndUpdateConsume = (value: Value) => {
       next(value);
       this.consume = this.purchase.plus(this.produce, true).minus(this.deliver, true);
+      this.self = this.produce.minus(this.deliver, true);
+      this.purchasePercentConsume = this.purchase.percent(this.consume, "%", 0);
+      this.producePercentConsume = this.produce.percent(this.consume, "%", 0);
+      this.deliveryPercentConsume = this.deliver.percent(this.consume, "%", 0);
+      this.deliveryPercentProduce = this.deliver.percent(this.produce, "%", 0);
+      this.selfPercentConsume = this.self.percent(this.consume, "%", 0);
+      this.selfPercentProduce = this.self.percent(this.produce, "%", 0);
     };
     if (fresh !== null && fresh !== undefined) {
       if (fresh.id !== series?.id) {

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) {
-    <rect
+    <g>
-      [attr.x]="(point.epochSeconds - xMin) * xFactor"
+      <title>
-      [attr.y]="heightPx - 1 + yMinPx - point.getPurchaseY(yFactor)"
+        Bezug: {{ location.energyPurchase?.toValue(point.purchase, point.date)?.toValueString(null) }}
-      [attr.width]="xWidthPx"
+        Solar: {{ location.energyProduce?.toValue(point.produce, point.date)?.toValueString(null) }}
-      [attr.height]="point.getPurchaseH(yFactor)"
+        Selbst: {{ location.energyPurchase?.toValue(point.self, point.date)?.toValueString(null) }}
-      class="COLOR_BACK_PURCHASE"
+        Einsp.: {{ location.energyDeliver?.toValue(point.deliver, point.date)?.toValueString(null) }}
-    ></rect>
+        Verbrauch: {{ location.energyPurchase?.toValue(point.consume, point.date)?.toValueString(null) }}
-    <rect
+      </title>
-      [attr.x]="(point.epochSeconds - xMin) * xFactor"
+      <rect
-      [attr.y]="heightPx - 1 + yMinPx - point.getSelfY(yFactor)"
+        [attr.x]="(point.epochSeconds - xMin) * xFactor"
-      [attr.width]="xWidthPx"
+        [attr.y]="heightPx  + yMinPx - point.getPurchaseY(yFactor)"
-      [attr.height]="point.getSelfH(yFactor)"
+        [attr.width]="xWidthPx"
-      class="COLOR_BACK_SELF"
+        [attr.height]="point.getPurchaseH(yFactor)"
-    ></rect>
+        class="COLOR_BACK_PURCHASE"
-    <rect
+      ></rect>
-      [attr.x]="(point.epochSeconds - xMin) * xFactor"
+      <rect
-      [attr.y]="heightPx + yMinPx"
+        [attr.x]="(point.epochSeconds - xMin) * xFactor"
-      [attr.width]="xWidthPx"
+        [attr.y]="heightPx  + yMinPx - point.getSelfY(yFactor)"
-      [attr.height]="point.getDeliverH(yFactor)"
+        [attr.width]="xWidthPx"
-      class="COLOR_BACK_DELIVER"
+        [attr.height]="point.getSelfH(yFactor)"
-    ></rect>
+        class="COLOR_BACK_SELF"
-    <line
+      ></rect>
-      x1="0"
+      <rect
-      [attr.y1]="heightPx - 1 + yMinPx"
+        [attr.x]="(point.epochSeconds - xMin) * xFactor"
-      [attr.x2]="widthPx"
+        [attr.y]="heightPx+1 + yMinPx"
-      [attr.y2]="heightPx - 1 + yMinPx"
+        [attr.width]="xWidthPx"
-      stroke="#aaaaaa"
+        [attr.height]="point.getDeliverH(yFactor)"
-      stroke-width="1"
+        class="COLOR_BACK_DELIVER"
-    ></line>
+      ></rect>
+    </g>
   }
+  <line
+    x1="0"
+    [attr.y1]="heightPx +0.5 + yMinPx"
+    [attr.x2]="widthPx"
+    [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/location/power/location-power.html

@@ -13,6 +13,10 @@
       <div class="SectionBody COLOR_FONT_PURCHASE">
         {{ location.powerPurchase?.value?.toValueString(dateService.now) }}
       </div>
+      <div class="SectionBody COLOR_FONT_PURCHASE percent">
+        {{ location.powerPurchasePercentConsume.toValueString(dateService.now) }}
+        <sub class="subscript">Verbrauch</sub>
+      </div>
     </div>
 
     <div class="Section4">
@@ -22,6 +26,27 @@
       <div class="SectionBody COLOR_FONT_PRODUCE">
         {{ location.powerProduce?.value?.toValueString(dateService.now) }}
       </div>
+      <div class="SectionBody COLOR_FONT_PRODUCE percent">
+        {{ location.powerProducePercentConsume.toValueString(dateService.now) }}
+        <sub class="subscript">Verbrauch</sub>
+      </div>
+    </div>
+
+    <div class="Section4">
+      <div class="SectionHeadingText">
+        Selbst
+      </div>
+      <div class="SectionBody COLOR_FONT_SELF">
+        {{ location.powerSelf?.toValueString(dateService.now) }}
+      </div>
+      <div class="SectionBody COLOR_FONT_SELF percent">
+        {{ location.powerSelfPercentConsume.toValueString(dateService.now) }}
+        <sub class="subscript">Verbrauch</sub>
+      </div>
+      <div class="SectionBody COLOR_FONT_SELF percent">
+        {{ location.powerSelfPercentProduce.toValueString(dateService.now) }}
+        <sub class="subscript">Produktion</sub>
+      </div>
     </div>
 
     <div class="Section4">
@@ -40,6 +65,14 @@
       <div class="SectionBody COLOR_FONT_DELIVER">
         {{ location.powerDeliver?.value?.toValueString(dateService.now) }}
       </div>
+      <div class="SectionBody COLOR_FONT_DELIVER percent">
+        {{ location.powerDeliveryPercentConsume.toValueString(dateService.now) }}
+        <sub class="subscript">Verbrauch</sub>
+      </div>
+      <div class="SectionBody COLOR_FONT_DELIVER percent">
+        {{ location.powerDeliveryPercentProduce.toValueString(dateService.now) }}
+        <sub class="subscript">Produktion</sub>
+      </div>
     </div>
 
   </div>

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

@@ -8,7 +8,7 @@ export class Interval {
 
   static readonly WEEK = new Interval('WEEK', this.HOUR);
 
-  static readonly MONTH = new Interval('MONTH', this.HOUR);
+  static readonly MONTH = new Interval('MONTH', this.DAY);
 
   static readonly YEAR = new Interval('YEAR', this.DAY);
 

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);
+  }
+
 }

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

@@ -83,11 +83,11 @@ export class Value {
     return ageSeconds > this.seconds * 2.1;
   }
 
-  onlyPositive(): Value {
+  percent(other: Value | null | undefined, unit: string | null = null, precision: number | null = null): Value {
-    if (this.value < 0) {
+    if (other === null || other === undefined) {
-      return Value.ZERO;
+      return Value.NULL;
     }
-    return this;
+    return new BiValue(this, other, (a, b) => a / b * 100, unit, precision);
   }
 
 }
@@ -98,12 +98,18 @@ export class BiValue extends Value {
     readonly a: Value,
     readonly b: Value,
     readonly operation: (a: number, b: number) => number,
+    unit: string | null = null,
+    precision: number | null = null,
   ) {
     if (a.unit !== "" && b.unit !== "" && a.unit !== b.unit) {
       throw new Error(`Operation needs units to be equal or empty: this=${a}, other=${b}`);
     }
-    const precision = Math.max(a.precision, b.precision);
+    if (precision === null) {
-    const unit = a.unit || b.unit;
+      precision = Math.max(a.precision, b.precision);
+    }
+    if (unit === null) {
+      unit = a.unit || b.unit;
+    }
     const date = a.date.getTime() < b.date.getTime() ? a.date : b.date;
     super(operation(a.value, b.value), precision, 0, unit, date);
   }

src/main/angular/src/colors.less

@@ -3,7 +3,7 @@
 @COLOR_FONT_PURCHASE: red;
 @COLOR_FONT_DELIVER: magenta;
 @COLOR_FONT_PRODUCE: #0095ff;
-@COLOR_FONT_SELF: #0095ff;
+@COLOR_FONT_SELF: #00b34a;
 @COLOR_FONT_CONSUME: #ff8800;
 
 @COLOR_BACK_PURCHASE: #ffa7a7;
@@ -28,6 +28,10 @@
   color: @COLOR_FONT_SELF;
 }
 
+.COLOR_FONT_SELF {
+  color: @COLOR_FONT_SELF;
+}
+
 .COLOR_FONT_CONSUME {
   color: @COLOR_FONT_CONSUME;
 }

src/main/angular/src/styles.less

@@ -3,7 +3,7 @@ body {
   height: 100%;
   margin: 0;
   font-family: sans-serif;
-  font-size: 4vw;
+  font-size: 3.5vw;
   user-select: none;
 }
 
@@ -99,3 +99,11 @@ div {
   }
 
 }
+
+.percent {
+  font-size: 70%;
+
+  .subscript {
+    font-size: 60%;
+  }
+}