Dashboard.vue

<style>

</style>

<template>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h4 class="page-title">Dashboard</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card-box tilebox-one">
                <i class="icon-layers pull-xs-right text-muted"></i>
                <h6 class="text-muted text-uppercase m-b-20">Detections: Last 24 Hours</h6>
                <h2 class="m-b-20" data-plugin="counterup">{{ Object.keys(plateDetectionsWeek).length }}</h2>
                <span class="label label-success"> +11% </span> <span class="text-muted">From previous period</span>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card-box tilebox-one">
                <i class="icon-paypal pull-xs-right text-muted"></i>
                <h6 class="text-muted text-uppercase m-b-20">Detections: 7 Days</h6>
                <h2 class="m-b-20" data-plugin="counterup">{{ Object.keys(plateDetectionsWeek).length }}</span>
                </h2>
                <span class="label label-danger"> -29% </span> <span class="text-muted">From previous period</span>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card-box tilebox-one">
                <i class="icon-chart pull-xs-right text-muted"></i>
                <h6 class="text-muted text-uppercase m-b-20">Detections: Unique Plates</h6>
                <h2 class="m-b-20" data-plugin="counterup">{{ Object.keys(plateDetectionsWeek).length }}</span>
                </h2>
                <span class="label label-pink"> 0% </span> <span class="text-muted">From previous period</span>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card-box tilebox-one">
                <i class="icon-rocket pull-xs-right text-muted"></i>
                <h6 class="text-muted text-uppercase m-b-20">Detections: All Time</h6>
                <h2 class="m-b-20" data-plugin="counterup">{{ Object.keys(plateDetectionsWeek).length }}</h2>
                <span class="label label-warning"> +89% </span> <span class="text-muted">Last year</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="card-box">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 col-md-12">
                        <h4 class="header-title m-t-0">Line Chart</h4>
                        <chartjs-line :labels="labels" :data="data" :bind="true"></chartjs-line>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>    
    import Chart from 'chart.js';
    export default {
        data() {
            return {
                tokens: [],
                plateDetectionsWeek: [],
                labels: ["6 Days ago", "5 Days ago", "4 Days ago", "3 Days ago", "2 Days ago", "1 Day ago", "Today"],
                data: []
            };
        },
        mounted() {
            this.prepareComponent();
        },
        methods: {
            prepareComponent() {
                this.getDetectionWeek(7);
            },
            getDetectionWeek($days) {
                axios.get('/api/plate/detections/' + $days)
                    .then(response => {
                        this.plateDetectionsWeek = response.data;
                        this.parseDetectionsforChart();
                    });
            },
            parseDetectionsforChart() {
                var one = 0;
                var two = 0;
                var three = 0;
                var four = 0;
                var five = 0;
                var six = 0;
                var seven = 0;
                var current = moment().format('L');
                // loop through plateDetectionsWeek


                var dates =[{
                    "2017-02-15 02:13:14": 2000
                }, {
                    "2017-02-16 02:13:14": 1200
                }, {
                    "2017-02-17 02:13:14": 550
                }, {
                    "2017-02-17 02:13:14": 1000
                }];

                    var response = {};
                    dates.forEach(function(d) {
                        for (var k in d) {
                            var _ = k.split("-");
                            var year = _[0]
                            var month = _[1]
                            var day = _[2]
                            if (!response[year]) response[year] = {
                                total: 0
                            }
                            response[year][month] = response[year][month] ? response[year][month] + d[k] : d[k]
                            response[year].total += d[k]
                        }
                    });
            }
        }
    }
</script>