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/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/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/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%;
+  }
+}