Slice color-tuning

This commit is contained in:
Patrick Haßel 2024-10-21 14:04:43 +02:00
parent 4b857b9338
commit b6ae6db00b
2 changed files with 18 additions and 24 deletions

View File

@ -91,9 +91,9 @@ export class Value {
if (this.value === null) {
return "";
}
if (Math.round(this.value) < middle) {
if (this.value < middle) {
return smallColor;
} else if (Math.round(this.value) < high) {
} else if (this.value < high) {
return middleColor;
}
return highColor;

View File

@ -8,10 +8,18 @@ import {Slice} from "../../../api/series/consumption/slice/Slice";
import {Interval} from "../../../api/series/consumption/interval/Interval";
import {ELECTRICITY_GRID_DELIVERED_ENERGY, ELECTRICITY_GRID_PURCHASED_ENERGY, ELECTRICITY_PHOTOVOLTAIC_PRODUCED} from "../../../api/series/constants";
const PURCHASING_MUCH = 200;
const PRODUCED_BEFORE_METER_CHANGE = new ValueConstant(287.995, "kWh");
const ELECTRICITY_GRID_PURCHASED_FEW = 7.7;
const ELECTRICITY_GRID_PURCHASED_MUCH = 9.7;
const ELECTRICITY_GRID_POWER_MUCH = 400;
const ELECTRICITY_PHOTOVOLTAIC_PRODUCED_FEW = 0.7;
const ELECTRICITY_PHOTOVOLTAIC_PRODUCED_MUCH = 2;
@Component({
selector: 'app-dashboard-electricity-tile',
standalone: true,
@ -65,7 +73,6 @@ export class DashboardElectricityTileComponent {
const consumptionPower = this.seriesCacheService.photovoltaicPower.plus(this.seriesCacheService.gridPower).clampNonNegative();
const gridColor = this.getGridPowerColor();
const productionColor = this.getProductionPowerColor();
const selfToday = this.producedToday.minus(this.deliveredToday);
const consumedToday = this.purchasedToday.plus(selfToday);
@ -79,20 +86,20 @@ export class DashboardElectricityTileComponent {
new DisplayValue('Produziert', this.seriesCacheService.photovoltaicProduced, ''),
new DisplayValue('Selbst verbraucht', selfConsumed, ''),
'Leistung',
new DisplayValue('Produktion', this.seriesCacheService.photovoltaicPower, productionColor),
new DisplayValue('Produktion', this.seriesCacheService.photovoltaicPower, this.seriesCacheService.photovoltaicPower.color(50, 200, 'red', 'orange', 'green')),
new DisplayValue('Netz', this.seriesCacheService.gridPower, gridColor),
new DisplayValue('Verbrauch', consumptionPower, ''),
'Heute',
new DisplayValue('Produziert', this.producedToday, ''),
new DisplayValue('Produziert', this.producedToday, this.producedToday.color(ELECTRICITY_PHOTOVOLTAIC_PRODUCED_FEW, ELECTRICITY_PHOTOVOLTAIC_PRODUCED_MUCH, 'red', 'orange', 'green')),
new DisplayValue('Eingespeist', this.deliveredToday, ''),
new DisplayValue('Selbstverbraucht', selfToday, ''),
new DisplayValue('Bezogen', this.purchasedToday, ''),
new DisplayValue('Bezogen', this.purchasedToday, this.purchasedToday.color(ELECTRICITY_GRID_PURCHASED_FEW, ELECTRICITY_GRID_PURCHASED_MUCH, 'green')),
new DisplayValue('Verbraucht', consumedToday, ''),
'Gestern',
new DisplayValue('Produziert', this.producedYesterday, ''),
new DisplayValue('Produziert', this.producedYesterday, this.producedYesterday.color(ELECTRICITY_PHOTOVOLTAIC_PRODUCED_FEW, ELECTRICITY_PHOTOVOLTAIC_PRODUCED_MUCH, 'red', 'orange', 'green')),
new DisplayValue('Eingespeist', this.deliveredYesterday, ''),
new DisplayValue('Selbstverbraucht', selfYesterday, ''),
new DisplayValue('Bezogen', this.purchasedYesterday, ''),
new DisplayValue('Bezogen', this.purchasedYesterday, this.purchasedYesterday.color(ELECTRICITY_GRID_PURCHASED_FEW, ELECTRICITY_GRID_PURCHASED_MUCH, 'green')),
new DisplayValue('Verbraucht', consumedYesterday, ''),
];
}
@ -104,7 +111,7 @@ export class DashboardElectricityTileComponent {
return 'magenta';
}
const purchasingMuch = this.seriesCacheService.gridPower.value > PURCHASING_MUCH;
const purchasingMuch = this.seriesCacheService.gridPower.value > ELECTRICITY_GRID_POWER_MUCH;
if (purchasingMuch) {
return 'red';
}
@ -119,17 +126,4 @@ export class DashboardElectricityTileComponent {
return '';
}
private getProductionPowerColor() {
if (this.seriesCacheService.photovoltaicPower === null || this.seriesCacheService.photovoltaicPower.value === null) {
return '';
}
const producingAny = this.seriesCacheService.photovoltaicPower.value > 0;
if (producingAny) {
return 'green';
}
return 'black';
}
}