percentages
This commit is contained in:
parent
810dc77b24
commit
4feb38c14c
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -83,11 +83,11 @@ export class Value {
|
||||
return ageSeconds > this.seconds * 2.1;
|
||||
}
|
||||
|
||||
onlyPositive(): Value {
|
||||
if (this.value < 0) {
|
||||
return Value.ZERO;
|
||||
percent(other: Value | null | undefined, unit: string | null = null, precision: number | null = null): Value {
|
||||
if (other === null || other === undefined) {
|
||||
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);
|
||||
const unit = a.unit || b.unit;
|
||||
if (precision === null) {
|
||||
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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user