ApiActivityGraph.vue

<template>
    <div class="small">
        <div v-if="datacollection !== null">
            <!-- Stat cards -->
            <div class="row justify-content-center">
                <div class="col-md-2 m-1">
                    <div
                        class="statcard statcard-primary statcard-shadow px-2 py-1"
                    >
                        <h5 class="statcard-number">
                            {{ currentWeek }}
                        </h5>
                        <span class="statcard-desc">Week of</span>
                    </div>
                </div>
                <div class="col-md-2 m-1">
                    <div
                        class="statcard statcard-success statcard-shadow px-2 py-1"
                    >
                        <h5 class="statcard-number">
                            {{ weeklyTotal }}
                        </h5>
                        <span class="statcard-desc">Total Requests</span>
                    </div>
                </div>
                <div class="col-md-2 m-1">
                    <div
                        class="statcard statcard-danger statcard-shadow px-2 py-1"
                    >
                        <h5 class="statcard-number">
                            {{ weeklyErrors }}
                        </h5>
                        <span class="statcard-desc">Errors</span>
                    </div>
                </div>
            </div>
            <!-- End statcards -->

            <line-chart
                class="mt-3"
                :chart-data="datacollection"
                :options="options"
            ></line-chart>

            <!-- Pagination buttons-->
            <button
                class="btn-shadow btn-shadow-sm btn-shadow-secondary"
                v-if="pageNumber > 1"
                @click.prevent="prevWeek"
            >
                Previous week
            </button>

            <button
                class="btn-shadow btn-shadow-sm btn-shadow-secondary"
                v-if="pageNumber < lastPage"
                @click.prevent="nextWeek"
            >
                Next week
            </button>
            <!-- End pagination buttons-->
        </div>
        <div v-else class="nodata alert alert-info">No data available.</div>
    </div>
</template>

<script>
import LineChart from "./LineChart.js";

export default {
    props: {
        lastPage: {
            type: Number,
            default: () => ""
        }
    },

    components: {
        LineChart
    },

    data() {
        return {
            datacollection: null,
            weeklyTotal: 0,
            weeklyErrors: 0,
            currentWeek: null,
            pageNumber: this.lastPage,

            // Chart.js options that controls the appearance of the chart
            options: {
                elements: {
                    line: {
                        borderWidth: 0
                    }
                },
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: true,
                                stepSize: 1
                            },
                            gridLines: {
                                display: true
                            }
                        }
                    ],
                    xAxes: [
                        {
                            gridLines: {
                                display: false
                            }
                        }
                    ]
                },
                legend: {
                    display: true,
                    position: "bottom"
                },
                title: {
                    display: true,
                    text: "Weekly API Activity"
                },
                responsive: true,
                maintainAspectRatio: false
            }
        };
    },
    mounted() {
        this.fillData();
    },

    computed: {
        url() {
            return `/api-activity?page=${this.pageNumber}`;
        }
    },

    methods: {
        fillData() {
            axios.get(this.url).then(response => {
                let data = Object.values(response.data.data)[0];
                if (data == null) {
                    return;
                }

                this.currentWeek = Object.keys(data)[0];
                this.calculateWeeklyRequests(data);

                this.datacollection = {
                    labels: Object.keys(data),
                    datasets: [
                        {
                            label: "Errors",
                            backgroundColor: "rgba(204, 152, 188, 0.5)",
                            data: Object.values(data).map(
                                values => values.errored
                            )
                        },
                        {
                            label: "Total",
                            backgroundColor: "rgba(154, 208, 245, 0.5)",
                            data: Object.values(data).map(
                                values => values.total
                            )
                        }
                    ]
                };
            });
        },

        prevWeek() {
            this.pageNumber--;
            this.fillData();
        },

        nextWeek() {
            this.pageNumber++;
            this.fillData();
        },

        calculateWeeklyRequests(data) {
            this.erroredWeekly(data);
            this.totalWeekly(data);
        },

        erroredWeekly(data) {
            var weeklyErr = [];
            Object.values(data).map(function(weekly) {
                return weeklyErr.push(weekly.errored);
            });
            let numOr0 = n => (isNaN(n) ? 0 : n);
            let result = weeklyErr.reduce((a, b) => numOr0(a) + numOr0(b));
            this.weeklyErrors = Object.is(result, undefined) ? 0 : result;
        },

        totalWeekly(data) {
            var weeklyTot = [];
            Object.values(data).map(function(weekly) {
                return weeklyTot.push(weekly.total);
            });
            let numbOr0 = n => (isNaN(n) ? 0 : n);
            let result = weeklyTot.reduce((a, b) => numbOr0(a) + numbOr0(b));
            this.weeklyTotal = Object.is(result, undefined) ? 0 : result;
        }
    }
};
</script>

<style lang="scss" scoped>
.small {
    margin: 20px;
    margin-bottom: -30px;
}

.gray {
    color: #858585;
}

.totals {
    margin-top: -15px;
    padding-bottom: 5px;
}

.statcard-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.nodata {
    font-weight: bold;
}
</style>