<template>
    <div class="_panel" :class="$style.root">
        <MkSelect v-model="src" style="margin: 0 0 12px 0" small>
            <option value="notes">Posts</option>
            <option value="active-users">Active users</option>
            <option value="ap-requests-inbox-received">
                Fediverse Requests: inboxReceived
            </option>
            <option value="ap-requests-deliver-succeeded">
                Fediverse Requests: deliverSucceeded
            </option>
            <option value="ap-requests-deliver-failed">
                Fediverse Requests: deliverFailed
            </option>
        </MkSelect>
        <MkHeatmap :src="src" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import MkHeatmap from "@/components/MkHeatmap.vue";
import MkSelect from "@/components/form/select.vue";

let src = ref("notes");
</script>

<style lang="scss" module>
.root {
    padding: 20px;
}
</style>
