From 668538eb9f82d805acec2791f608c333f10508b7 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Mon, 12 Aug 2024 14:45:48 +0200
Subject: [PATCH] Charts: Force re-render on device orientation change (#2706)

Fixes #2702.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
(cherry picked from commit f7f04bf18cbd6081e51b9296e8111a766de9f6b0)
---
 .../widgets/chart/oh-chart-page.vue           | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue b/bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue
index a8c7003daa..e23f646f02 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue
@@ -1,5 +1,6 @@
 <template>
   <oh-chart
+    v-if="!rerender"
     class="oh-chart-page-chart"
     :class="{ 'with-tabbar': context.tab, 'with-toolbar': context.analyzer }"
     :style="(this.$f7.data.themeOptions.dark === 'dark') ? 'background-color: black;' : 'background-color: white;'"
@@ -31,6 +32,25 @@ export default {
   components: {
     OhChart
   },
-  widget: OhChartPageDefinition
+  widget: OhChartPageDefinition,
+  data () {
+    return {
+      rerender: false
+    }
+  },
+  methods: {
+    onOrientationChange () {
+      this.rerender = true
+      this.$nextTick(() => {
+        this.rerender = false
+      })
+    }
+  },
+  mounted () {
+    window.addEventListener('orientationchange', this.onOrientationChange)
+  },
+  beforeUnmount () {
+    window.removeEventListener('orientationchange', this.onOrientationChange)
+  }
 }
 </script>