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