From 1e223014cd7fbd0730e91becebad0212ec6afc6e Mon Sep 17 00:00:00 2001 From: Michael Geers Date: Sat, 14 Aug 2021 08:56:34 +0200 Subject: [PATCH] kW/W units; tighter icon threshold; ignore batterypower below 50W; revert navbar link; i18n number formats (#1352) --- .../components/Energyflow/Energyflow.spec.js | 46 +++++++++++-------- .../Energyflow/Energyflow.stories.js | 12 +++++ .../js/components/Energyflow/Energyflow.vue | 20 +++++--- .../components/Energyflow/Visualization.vue | 12 ++--- assets/js/mixins/formatter.js | 8 ++++ assets/js/views/App.vue | 4 +- dist/css/index.637a2552.css | 1 + dist/css/index.d2c9ca1b.css | 1 - dist/index.html | 4 +- dist/js/index.6e9352a0.js | 2 - dist/js/index.6e9352a0.js.map | 1 - dist/js/index.95321b25.js | 2 + dist/js/index.95321b25.js.map | 1 + package-lock.json | 14 +++++- 14 files changed, 88 insertions(+), 40 deletions(-) create mode 100644 dist/css/index.637a2552.css delete mode 100644 dist/css/index.d2c9ca1b.css delete mode 100644 dist/js/index.6e9352a0.js delete mode 100644 dist/js/index.6e9352a0.js.map create mode 100644 dist/js/index.95321b25.js create mode 100644 dist/js/index.95321b25.js.map 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 @@