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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user