diff --git a/assets/js/app.js b/assets/js/app.js
index 0d7d12d78..2aa49e64d 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -6,6 +6,7 @@ import { createApp, h } from "vue";
import { createMetaManager, plugin as metaPlugin } from "vue-meta";
import api from "./api";
import App from "./views/App.vue";
+import VueNumber from "vue-number-animation";
import router from "./router";
import i18n from "./i18n";
import featureflags from "./featureflags";
@@ -68,6 +69,7 @@ app.use(router);
app.use(createMetaManager());
app.use(metaPlugin);
app.use(featureflags);
+app.use(VueNumber);
window.app = app.mount("#app");
window.setInterval(function () {
diff --git a/assets/js/components/AnimatedNumber.vue b/assets/js/components/AnimatedNumber.vue
new file mode 100644
index 000000000..96f7e4242
--- /dev/null
+++ b/assets/js/components/AnimatedNumber.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index ad81eb13c..f7bd6b170 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -46,7 +46,9 @@
>
{{ $t("main.energyflow.noEnergy") }}
@@ -76,13 +76,14 @@
import formatter from "../../mixins/formatter";
import BatteryIcon from "./BatteryIcon.vue";
import LabelBar from "./LabelBar.vue";
+import AnimatedNumber from "../AnimatedNumber.vue";
import "@h2d2/shopicons/es/regular/car3";
import "@h2d2/shopicons/es/regular/sun";
import "@h2d2/shopicons/es/regular/home";
export default {
name: "Visualization",
- components: { BatteryIcon, LabelBar },
+ components: { BatteryIcon, LabelBar, AnimatedNumber },
mixins: [formatter],
props: {
gridImport: { type: Number, default: 0 },
@@ -141,11 +142,9 @@ export default {
if (this.totalAdjusted === 0) return "0%";
return (100 / this.totalAdjusted) * power + "%";
},
- kw: function (watt) {
- return this.fmtKw(watt, this.valuesInKw, true);
- },
- kwNoUnit: function (watt) {
- return this.fmtKw(watt, this.valuesInKw, false);
+ fmtBarValue: function (watt) {
+ const valueInKw = this.powerLabelEnoughSpace(watt);
+ return this.fmtKw(watt, this.valuesInKw, valueInKw);
},
powerLabelAvailableSpace(power) {
if (this.totalAdjusted === 0) return 0;
diff --git a/assets/js/components/LabelAndValue.vue b/assets/js/components/LabelAndValue.vue
index e8d9ea55a..ecaa98b7a 100644
--- a/assets/js/components/LabelAndValue.vue
+++ b/assets/js/components/LabelAndValue.vue
@@ -1,24 +1,38 @@
-
{{ label }}
+
{{ label }}
-
- {{ value }}
-
diff --git a/assets/js/components/Loadpoint.vue b/assets/js/components/Loadpoint.vue
index 9179a4978..b52165621 100644
--- a/assets/js/components/Loadpoint.vue
+++ b/assets/js/components/Loadpoint.vue
@@ -33,8 +33,10 @@
-
+