diff --git a/assets/js/components/Energyflow/Energyflow.spec.js b/assets/js/components/Energyflow/Energyflow.spec.js
index 54983d952..309b67717 100644
--- a/assets/js/components/Energyflow/Energyflow.spec.js
+++ b/assets/js/components/Energyflow/Energyflow.spec.js
@@ -2,6 +2,14 @@
import { shallowMount } from "@vue/test-utils";
import Energyflow from "./Energyflow.vue";
+const mocks = {
+ $t: (x) => x,
+ $n: function (value, options) {
+ const n = new Intl.NumberFormat("en-EN", options);
+ return n.format(value);
+ },
+};
+
describe("Energyflow.vue", () => {
const defaultProps = {
gridConfigured: true,
@@ -15,7 +23,7 @@ describe("Energyflow.vue", () => {
it("using pv and grid power", async () => {
const wrapper = shallowMount(Energyflow, {
- mocks: { $t: (x) => x },
+ mocks,
propsData: { ...defaultProps, gridPower: 1000, pvPower: 4000 },
});
await wrapper.find(".energyflow").trigger("click");
@@ -31,7 +39,7 @@ describe("Energyflow.vue", () => {
it("exporting all pv power, no usage", async () => {
const wrapper = shallowMount(Energyflow, {
- mocks: { $t: (x) => x },
+ mocks,
propsData: { ...defaultProps, gridPower: -4000, pvPower: 4000 },
});
@@ -48,7 +56,7 @@ describe("Energyflow.vue", () => {
it("more grid export than pv, grid value wins (invalid state)", async () => {
const wrapper = shallowMount(Energyflow, {
- mocks: { $t: (x) => x },
+ mocks,
propsData: { ...defaultProps, gridPower: -4000, pvPower: 3000 },
});
@@ -65,7 +73,7 @@ describe("Energyflow.vue", () => {
it("only grid usage, no pv, idleBattery", async () => {
const wrapper = shallowMount(Energyflow, {
- mocks: { $t: (x) => x },
+ mocks,
propsData: {
...defaultProps,
gridPower: 360,
@@ -77,23 +85,23 @@ describe("Energyflow.vue", () => {
await wrapper.find(".energyflow").trigger("click");
- expect(wrapper.find("[data-test-grid-import]").text()).toMatch("0.4 kW");
- expect(wrapper.find("[data-test-self-consumption]").text()).toMatch("0.0 kW");
- expect(wrapper.find("[data-test-pv-export]").text()).toMatch("0.0 kW");
+ expect(wrapper.find("[data-test-grid-import]").text()).toMatch("360 W");
+ expect(wrapper.find("[data-test-self-consumption]").text()).toMatch("0 W");
+ expect(wrapper.find("[data-test-pv-export]").text()).toMatch("0 W");
- expect(wrapper.find("[data-test-house-consumption]").text()).toMatch("0.4 kW");
- expect(wrapper.find("[data-test-pv-production]").text()).toMatch("0.0 kW");
+ expect(wrapper.find("[data-test-house-consumption]").text()).toMatch("360 W");
+ expect(wrapper.find("[data-test-pv-production]").text()).toMatch("0 W");
expect(wrapper.find("[data-test-battery]").text()).toMatch("main.energyflow.battery");
});
it("grid and battery usage, no pv", async () => {
const wrapper = shallowMount(Energyflow, {
- mocks: { $t: (x) => x },
+ mocks,
propsData: {
...defaultProps,
gridPower: 300,
batteryConfigured: true,
- batteryPower: 200,
+ batteryPower: 234,
batterySoC: 77,
pvPower: 0,
},
@@ -101,20 +109,20 @@ describe("Energyflow.vue", () => {
await wrapper.find(".energyflow").trigger("click");
- expect(wrapper.find("[data-test-grid-import]").text()).toMatch("0.3 kW");
- expect(wrapper.find("[data-test-self-consumption]").text()).toMatch("0.2 kW");
- expect(wrapper.find("[data-test-pv-export]").text()).toMatch("0.0 kW");
+ expect(wrapper.find("[data-test-grid-import]").text()).toMatch("300 W");
+ expect(wrapper.find("[data-test-self-consumption]").text()).toMatch("234 W");
+ expect(wrapper.find("[data-test-pv-export]").text()).toMatch("0 W");
- expect(wrapper.find("[data-test-house-consumption]").text()).toMatch("0.5 kW");
- expect(wrapper.find("[data-test-pv-production]").text()).toMatch("0.0 kW");
- expect(wrapper.find("[data-test-battery]").text()).toMatch("0.2 kW");
+ expect(wrapper.find("[data-test-house-consumption]").text()).toMatch("534 W");
+ expect(wrapper.find("[data-test-pv-production]").text()).toMatch("0 W");
+ expect(wrapper.find("[data-test-battery]").text()).toMatch("234 W");
expect(wrapper.find("[data-test-battery]").text()).toMatch("77%");
expect(wrapper.find("[data-test-battery]").text()).toMatch("main.energyflow.batteryDischarge");
});
it("battery charge, pv export", async () => {
const wrapper = shallowMount(Energyflow, {
- mocks: { $t: (x) => x },
+ mocks,
propsData: {
...defaultProps,
gridPower: -2500,
@@ -138,7 +146,7 @@ describe("Energyflow.vue", () => {
it("thresholds", async () => {
const wrapper = shallowMount(Energyflow, {
- mocks: { $t: (x) => x },
+ mocks,
propsData: {
...defaultProps,
gridPower: 5555,
diff --git a/assets/js/components/Energyflow/Energyflow.stories.js b/assets/js/components/Energyflow/Energyflow.stories.js
index f133aef91..d13db51a6 100644
--- a/assets/js/components/Energyflow/Energyflow.stories.js
+++ b/assets/js/components/Energyflow/Energyflow.stories.js
@@ -100,3 +100,15 @@ GridOnly.args = {
batterySoC: 0,
siteTitle: "Home",
};
+
+export const LowEnergy = Template.bind({});
+LowEnergy.args = {
+ gridConfigured: true,
+ pvConfigured: true,
+ batteryConfigured: true,
+ gridPower: -352,
+ pvPower: 710,
+ batteryPower: 86,
+ batterySoC: 55,
+ siteTitle: "Home",
+};
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index 61888d82a..ccc6ea1c6 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -29,6 +29,7 @@
:pvProduction="pvProduction"
:houseConsumption="houseConsumption"
:batterySoC="batterySoC"
+ :valuesInKw="valuesInKw"
/>
1000;
},
},
methods: {
kw: function (watt) {
- return Math.max(0, watt / 1000).toFixed(1) + " kW";
+ return this.fmtKw(watt, this.valuesInKw);
},
toggleDetails() {
this.showDetails = !this.showDetails;
diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue
index 534e51903..fca970222 100644
--- a/assets/js/components/Energyflow/Visualization.vue
+++ b/assets/js/components/Energyflow/Visualization.vue
@@ -5,7 +5,7 @@
= this.fmtLimit ? this.round(val / 1e3, this.fmtDigits) : this.round(val, 0);
},
+ fmtKw: function (watt, kw = true) {
+ const digits = kw ? 1 : 0;
+ const value = kw ? watt / 1000 : watt;
+ const unit = kw ? " kW" : " W";
+ return (
+ this.$n(value, { minimumFractionDigits: digits, maximumFractionDigits: digits }) + unit
+ );
+ },
fmtUnit: function (val) {
return Math.abs(val) >= this.fmtLimit ? "k" : "";
},
diff --git a/assets/js/views/App.vue b/assets/js/views/App.vue
index 8dc5bf8a7..bf817efe2 100644
--- a/assets/js/views/App.vue
+++ b/assets/js/views/App.vue
@@ -3,8 +3,8 @@