<template>
  <v-sheet class="mt-2" color="transparent">
    <h5 class="text-h5">Buildserver Stats</h5>
    <iframe
      :height="iframeHeight"
      allowtransparency="true"
      class="w-100 border-0"
      src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1"></iframe>
  </v-sheet>
</template>

<script lang="ts" setup>
import { useDisplay } from 'vuetify'
import { computed } from 'vue'

const { width } = useDisplay()

const GRAPH_HEIGHT = 335
const NUMBER_OF_GRAPHS = 4

const iframeHeight = computed(() =>
  width.value <= 800 ? `${NUMBER_OF_GRAPHS * GRAPH_HEIGHT}px` : '420px'
)
</script>
