Views User dashboard page including linechart for views

Views.vue

<template>

    <div class="text-center">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>Recent Views</h4>
            </div>
            <div class="panel-body">
                <div v-for="view in recentViews" :key="view.id">
                    <a :href="'/' + view.sequence">{{ view.sequence }}</a> was viewed <strong>{{ view.created_at | ago }}</strong>
                </div>
                <div >
                    <a href="#" @click.prevent="numRecentViews += 5">more</a>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-body">
                <div>
                    <strong>Zoom:</strong>
                    <a href="#" @click.prevent="timeRange = 'year'">1 Year</a>
                    <a href="#" @click.prevent="timeRange = 'month'">1 Month</a>
                    <a href="#" @click.prevent="timeRange = 'week'">1 Week</a>
                </div>
                <line-chart :chartData="chartData" @chartClick="handleClick"></line-chart>
            </div>
        </div>

        <div v-if="focusViews.length" class="panel panel-default">
            <div class="panel-heading">
                <h4>Policies viewed {{ focusDate }}</h4>
            </div>
            <div class="panel-body">
                <div v-for="view in focusViews" :key="view.id">
                    <a :href="'/' + view.sequence">{{ view.sequence }}</a>
                    <span v-if="timeRange == 'year'"> - {{ view.created_at | date }}</span>
                </div>
            </div>
        </div>

    </div>

</template>

<script>

import LineChart from '../components/LineChart';
import moment from 'moment';

export default {

    components: { LineChart },
    
    props: {
        views: {
            type: String,
            default: ''
        }
    },

    data() {
        return {
            myViews: null,
            timeRange: 'year',
            numRecentViews: 5,
            focusDate: null,
            focusViews: [],
            dates: [],
            activeData: []
        }
    },

    mounted() {
        this.myViews = JSON.parse(this.views);
    },

    computed: {

        chartData() {

            if (!this.myViews) return {};

            switch(this.timeRange){
                case 'week':
                    return this.weekData();
                case 'month':
                    return this.monthData();
            }
            
           return this.yearData();

        },

        recentViews() {
            if (!this.myViews) return [];

            return this.myViews.slice(0, this.numRecentViews);
        },

    },

    methods: {

        handleClick(element){
            let x = element._index;
            let date = this.chartData.labels[x];

            this.focusDate = this.dates[x];
            this.focusViews = this.activeData[x];
        },

        yearData() {

            let labels = [];
            let dates = [];
            let data = Array(12);

            for (let i = 12; i > 0; i--){
                dates.push('in ' + moment().subtract(i, 'months').format('MMMM YYYY'));
                labels.push(moment().subtract(i, 'months').format('MMM'));
                data[i-1] = [];
            }

            this.dates = dates;

            this.myViews.forEach(view => {
                const i = labels.indexOf(moment(view.created_at).format('MMM'));
                data[i].push(view);
            });

            this.activeData = data;

            return {
                labels,
                datasets: [{
                    data: data.map(d => d.length),
                    backgroundColor: "#2BBE83"
                }]
            };

        },

        monthData() {

            let labels = [];
            let dates = [];
            let data = Array(30);

            let viewsThisMonth = this.myViews.filter(v => {
                return moment().diff(v.created_at, 'days') < 30;
            });

            for (let i = 30; i > 0; i--){
                dates.push('on ' + moment().subtract(i, 'days').format('MMMM Do YYYY'));
                labels.push(moment().subtract(i, 'days').format('MMM D'));
                data[i - 1] = [];
            }

            viewsThisMonth.forEach(view => {
                const i = labels.indexOf(moment(view.created_at).format('MMM D'));
                data[i].push(view);
            });

            this.dates = dates;
            this.activeData = data;
            
            return {
                labels,
                datasets: [{
                    data: data.map(d => d.length),
                    backgroundColor: "#2BBE83"
                }]
            }

        },

        weekData() {

            let labels = [];
            let dates = [];
            let data = Array(7);

            let viewsThisWeek = this.myViews.filter(v => {
                return moment().diff(v.created_at, 'days') < 7;
            });

            for (let i = 7; i > 0; i--){
                dates.push('on ' + moment().subtract(i, 'days').format('MMMM Do YYYY'));
                labels.push(moment().subtract(i, 'days').format('MMM D'));
                data[i - 1] = [];
            }

            viewsThisWeek.forEach(view => {
                const i = labels.indexOf(moment(view.created_at).format('MMM D'));
                data[i].push(view);
            });

            this.dates = dates;
            this.activeData = data;
            
            return {
                labels,
                datasets: [{
                    data: data.map(d => d.length),
                    backgroundColor: "#2BBE83"
                }]
            }
        }
    },

    filters: {
        ago: (value) => {
            if (!value) return '';
            return moment(value).fromNow();
        },

        date: (value) => {
            if (!value) return '';
            return moment(value).format('MMMM Do');

        }
    }
}

</script>