<template>
  <v-sheet class="mt-2" color="transparent">
    <h5 class="text-h5">Buildserver Stats</h5>
    <iframe
      :height="width <= 800 ? `${IFRAME_HEIGHT}px` : '420px'"
      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'

const { width } = useDisplay()

/**
 * Represents the height of a graph in pixels.
 * This constant is used to define the vertical dimension of the graph
 * when rendering it in a user interface or graphical representation.
 *
 * @constant {number} GRAPH_HEIGHT
 */
const GRAPH_HEIGHT = 335
/**
 * Represents the total number of graphs to be processed or displayed.
 *
 * This variable is used to define the fixed amount of graphs that the system
 * is intended to handle at a given time. It can be leveraged to set limits
 * on iterations, arrays, or display logic related to graph management.
 *
 * Default value: 4
 *
 * Type: number
 */
const NUMBER_OF_GRAPHS = 4
/**
 * Represents the height of an iframe calculated dynamically based on the number of graphs
 * and the height of each graph.
 *
 * IFRAME_HEIGHT is determined by multiplying the number of graphs (`NUMBER_OF_GRAPHS`)
 * displayed in the iframe by the height of a single graph (`GRAPH_HEIGHT`).
 *
 * This variable is commonly used to ensure the iframe adjusts correctly to accommodate
 * all graphs without introducing unnecessary scrollbars.
 *
 * @constant {number} IFRAME_HEIGHT
 */
const IFRAME_HEIGHT = NUMBER_OF_GRAPHS * GRAPH_HEIGHT
</script>
