AzuraCast/frontend/vue/components/Stations/Reports/Overview/ListeningTimeTab.vue

<template>
    <b-overlay variant="card" :show="loading">
        <div class="card-body py-5" v-if="loading">
            &nbsp;
        </div>
        <div v-else>
            <div class="card-body">
                <fieldset>
                    <legend>
                        {{ $gettext('Listeners by Listening Time') }}
                    </legend>

                    <pie-chart style="width: 100%;" :data="stats.chart.datasets"
                               :labels="stats.chart.labels" :aspect-ratio="4">
                        <span v-html="stats.chart.alt"></span>
                    </pie-chart>
                </fieldset>
            </div>

            <data-table ref="datatable" id="listening_time_table" paginated handle-client-side
                        :fields="fields" :responsive="false" :items="stats.all">
            </data-table>
        </div>
    </b-overlay>
</template>

<script setup>
import PieChart from "~/components/Common/Charts/PieChart.vue";
import DataTable from "~/components/Common/DataTable";
import {onMounted, ref, shallowRef, toRef, watch} from "vue";
import gettext from "~/vendor/gettext";
import {DateTime} from "luxon";
import {useMounted} from "@vueuse/core";
import {useAxios} from "~/vendor/axios";

const props = defineProps({
    dateRange: Object,
    apiUrl: String
});

const loading = ref(true);
const stats = shallowRef({
    all: [],
    chart: {
        labels: [],
        datasets: [],
        alt: ''
    }
});

const {$gettext} = gettext;
const fields = shallowRef([
    {key: 'label', label: $gettext('Listening Time'), sortable: false},
    {key: 'value', label: $gettext('Listeners'), sortable: false}
]);

const dateRange = toRef(props, 'dateRange');
const {axios} = useAxios();

const relist = () => {
    loading.value = true;

    axios.get(props.apiUrl, {
        params: {
            start: DateTime.fromJSDate(dateRange.value.startDate).toISO(),
            end: DateTime.fromJSDate(dateRange.value.endDate).toISO()
        }
    }).then((response) => {
        stats.value = {
            all: response.data.all,
            chart: response.data.chart
        };
        loading.value = false;
    });
}

const isMounted = useMounted();

watch(dateRange, () => {
    if (isMounted.value) {
        relist();
    }
});

onMounted(() => {
    relist();
});
</script>