/*=========================================================================================
    File Name: card-interactive.js
    Description: Interactive cards
    ----------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Version: 1.0
    Author: GeeksLabs
    Author URL: http://www.themeforest.net/user/geekslabs
==========================================================================================*/
(function(window, document, $) {
    'use strict';

    /****************************************************
    *               Interactive Charts                  *
    ****************************************************/

    // Live visits from specific countries
    var seriesData = [
        [],
        [],
        [],
        []
    ];
    var random = new Rickshaw.Fixtures.RandomData(150);

    for (var i = 0; i < 150; i++) {
        random.addData(seriesData);
    }

    var liveVisits = $('#live-visits');
    var liveVisitsGraph = new Rickshaw.Graph({
        element: liveVisits.get(0),
        width: liveVisits.width(),
        height: 400,
        renderer: 'area',
        stroke: true,
        series: [{
            color: '#99B898',
            data: seriesData[0],
            name: 'Asia'
        }, {
            color: '#FECEA8',
            data: seriesData[1],
            name: 'Africa'
        }, {
            color: '#FF847C',
            data: seriesData[2],
            name: 'America'
        }, {
            color: '#6C5B7B',
            data: seriesData[3],
            name: 'Europe'
        }]
    });

    liveVisitsGraph.render();

    setInterval(function() {
        random.removeData(seriesData);
        random.addData(seriesData);
        liveVisitsGraph.update();

    }, 2000);

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
        graph: liveVisitsGraph
    });

    var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
        graph: liveVisitsGraph,
        // legend: legend
    });

    $(window).on('resize', function() {
        liveVisitsGraph.configure({
            width: liveVisits.width()
        });
        liveVisitsGraph.render();
    });

    //Get the context of the Chart canvas element we want to select
    var liveVisitsDoughnut = $("#live-visits-doughnut");

    // Chart Options
    var liveVisitsOptions = {
        responsive: true,
        maintainAspectRatio: false,
        responsiveAnimationDuration:500,
    };

    // Chart Data
    var liveVisitsData = {
        labels: ["Asia", "Africa", "America", "Europe"],
        datasets: [{
            label: "My First dataset",
            data: [15684, 54789, 89756, 23489],
            backgroundColor: ["#99B898","#FECEA8","#FF847C","#6C5B7B"],
        }]
    };

    var liveVisitsConfig = {
        type: 'doughnut',

        // Chart Options
        options : liveVisitsOptions,

        data : liveVisitsData
    };

    // Create the chart
    var visitsDoughnutChart = new Chart(liveVisitsDoughnut, liveVisitsConfig);


})(window, document, jQuery);