invalid min value in assets/js/components/TariffChart.vue

[thockar]

in file assets/js/components/TariffChart.vue

The initial value for min (here zero) will be zero unless any slot price goes below zero.
So, at a low price-range, the ui-graph shows too less differences in the slot-bar(s)
...
computed: {
priceInfo() {
let max = Number.MIN_VALUE;
let min = 0;
this.slots
.map((s) => s.price)
.filter((price) => price !== undefined)
.forEach((price) => {
max = Math.max(max, price);
min = Math.min(min, price);
});
return { min, range: max - min };

....

should be something like this

...
computed: {
priceInfo() {
let max = Number.MIN_VALUE;
let min = Number.MAX_VALUE;
this.slots
.map((s) => s.price)
.filter((price) => price !== undefined)
.forEach((price) => {
max = Math.max(max, price);
min = Math.min(min, price);
});
if (min == Number.MAX_VALUE) {
min = 0;
}
return { min, range: max - min };
...

in case all slot prices are undefined, min is set to zero

[andig]

/cc @naltatis

[naltatis]

@thockar I'm not quite sure, what you're proposing. The diagram deliberately starts at y=0 unless negative values are present. In this case, the lowest values defines the y-start. Do you have a concrete example or screenshot that illustrates when this does not work?

What we explicitly don't do is zoom into the price range just for the sake of showing large ups and downs. This creates a false illusion of potential savings.

[naltatis]

See also https://en.wikipedia.org/wiki/Misleading_graph#Truncated_graph

[thockar]

The diagram deliberately starts at y=0 unless negative values are

present. min keeps to be zero even all min(s) of all slots are > 0, so max -min (range) is in this case always max only if at least one slot is below zero the graph looks nice example: min = 27 max = 35 right: 10 + (90 / (35-27) ) * (value - 27) minimum bar height = 10 -> 10 + (90 / (35-27)) * (27 - 27) maximum bar height = 100 -> 10 + (90 / (35-27)) * (35-27) the edge case that all values are equal (min == max) leads in to (90 / 0) * 0 - division by zero so the final math has to be corrected or min and max needs to be set in edge cases to prevent this setting min and max is more easy - see the code below the current code: min = 27 - but is set and keeps to be 0 max = 35 10 + (90 / (35-0) * (value - 0)) minimum bar height = 69 - but should be 10 maximum bar height = 100 computed: { priceInfo() { let max = Number.MIN_VALUE; let min = Number.MAX_VALUE; <---not 0 this.slots .map((s) => s.price) .filter((price) => price !== undefined) .forEach((price) => { max = Math.max(max, price); min = Math.min(min, price); }); if (max == Number.MIN_VALUE) { <--- max was not changed max = 1; } if (min == Number.MAX_VALUE) { <--- min was not changed min = 0; } if (min == max) { <--- e.g. only one slot , leads in to division by zero because range will be zero, also in case all slots are equal min = max - 0.001 <--- make min and max not equal by the smallest possible slot diff } return { min, range: max - min }; }, avgPrice() { let sum = 0; let count = 0; this.slots.forEach((s) => { if (s.price !== undefined) { sum += s.price; count++; } }); return sum / count; }, isCo2() { return this.unit === CO2_TYPE; }, activeSlot() { return this.slots[this.activeIndex]; }, }, methods: { hoverSlot(index) { this.activeIndex = index; this.$emit("slot-hovered", index); }, selectSlot(index) { if (this.slots[index]?.selectable) { this.$emit("slot-selected", index); } }, priceStyle(price) { const value = price === undefined ? this.avgPrice : price; const height = value !== undefined ? `${10 + (90 / this.priceInfo.range) * (value - this.priceInfo.min)}%` <--- here comes the 90/0 if max==min : "100%"; return { height }; }, }, Mit freundlichen Grüßen / Best regards Thomas Eckardt DISCLAIMER: ******************************************************* This email and any files transmitted with it may be confidential, legally privileged and protected in law and are intended solely for the use of the individual to whom it is addressed. This email was multiple times scanned for viruses. There should be no known virus in this email! ******************************************************* Von: "Michael Geers" ***@***.***> An: "evcc-io/evcc" ***@***.***> Kopie: "thockar" ***@***.***>, "Mention" ***@***.***> Datum: 22.11.2024 15:05 Betreff: Re: [evcc-io/evcc] invalid min value in assets/js/components/TariffChart.vue (Discussion #17391) @thockar I'm not quite sure, what you're proposing. The diagram deliberately starts at y=0 unless negative values are present. In this case, the lowest values defines the y-start. Do you have a concrete example or screenshot that illustrates when this does not work? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[naltatis]

Hi Thomas, let's not talk about implementation and code. The behavior change you are proposing (moving away from a 0-anchored bar chart) is something we deliberatly do not want (see explanation and link above).

When your electricity price for a day is spread between 29 and 31ct, it does not make a huge difference which timeslot you're choosing. This is different when your prices range from 10 to 30ct. Here the optimization potential becomes a lot more relevant.
It's important that the UI does not transport a false sense of urgency or savings potential. Thats why we don't want to zoom in just to show a nicer curve.

P.S.: Please don't respond via email. Use githubs web UI instead. E-mail comments make it a lot harder to read and add extra fluff like mail footers ...