Charts: Fix issues with charts not displaying on iOS >= 17.4 (openhab…

…#2677) Follow-up for openhab#2511. I think I finally discovered the root cause for charts not displaying initially on iOS >= 17.4: The height of the chart was calculated to 0px. By using 100dvh (dynamic viewport height) and subtracting safe areas etc. instead of using 100%, I managed to fix this issue. Signed-off-by: Florian Hotze <[email protected]>
florian-h05 · Jul 18, 2024 · 3d27333 · 3d27333
1 parent 2056367
commit 3d27333
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 13 deletions.
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
@@ -2,23 +2,23 @@
   <oh-chart
     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;'"
     :context="this.context" />
 </template>
 
 <style lang="stylus">
 .oh-chart-page-chart
   position absolute !important
-  background-color white
-  overflow-x hidden
+  overflow hidden
   top calc(var(--f7-safe-area-top) + var(--f7-navbar-height))
   width 100%
-  height calc(100% - var(--f7-safe-area-top) - var(--f7-navbar-height)) !important
+  height calc(100dvh - var(--f7-safe-area-top) - var(--f7-navbar-height)) !important
   &.with-tabbar
-    height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
+    height calc(100dvh - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
   &.with-toolbar
-    height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-toolbar-height)) !important
+    height calc(100dvh - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-toolbar-height)) !important
   &.sheet-opened
-    height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-sheet-height)) !important
+    height calc(100dvh - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-sheet-height)) !important
 </style>
 
 <script>

diff --git a/bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue b/bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue
@@ -238,9 +238,6 @@
 .analyzer-content
   .analyzer-chart
     position fixed !important
-  &.sheet-opened
-    .oh-chart-page-chart
-      height calc(100% - var(--f7-navbar-height) - var(--f7-sheet-height)) !important
 .md .analyzer-controls .toolbar .link
   width 28%
 </style>
@@ -377,10 +374,7 @@ export default {
             this.$delete(this.seriesOptions, item)
           }
         }
-
-        this.$nextTick(() => {
-          this.showChart = true
-        })
+        this.showChart = true
 
         return Promise.resolve()
       })