Fix Grafana iframe not updating on theme change

Make iframe src reactive by appending theme query parameter based on
current dark/light mode. The Grafana dashboard now correctly switches
themes when toggling the app's theme.

Fixes #8
This commit is contained in:
2025-12-01 19:49:06 +01:00
parent ece19dd6b7
commit 0f617504c4

View File

@@ -11,7 +11,7 @@
class="stats-iframe"
loading="lazy"
title="Buildserver statistics dashboard"
src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1" />
:src="iframeSrc" />
</div>
</section>
</template>
@@ -19,15 +19,23 @@
<script lang="ts" setup>
import { useDisplay } from 'vuetify'
import { computed } from 'vue'
import { useTheme } from '@/composables/useTheme'
const { width } = useDisplay()
const { isDark } = useTheme()
const GRAPH_HEIGHT = 335
const NUMBER_OF_GRAPHS = 4
const GRAFANA_BASE_URL =
'https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1'
const iframeHeight = computed(() =>
width.value <= 800 ? `${NUMBER_OF_GRAPHS * GRAPH_HEIGHT}px` : '420px'
)
const iframeSrc = computed(
() => `${GRAFANA_BASE_URL}?theme=${isDark.value ? 'dark' : 'light'}`
)
</script>
<style scoped>