{% extends 'base.html.twig' %}


{% block body %}


        <!-- DASHBOARD CHARTS -->
        <div id="dashboard" class="row">


            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="panel panel-default ">
                        <div class="panel-body">
                            <div class="ga-chart xsmall-height "
                                 title="Sesiones ({percentchange}) {compared}"
                                 data-type="metric"
                                 data-dimensions=""
                                 data-metrics="ga:sessions"
                                 data-start-date="(0)-(0)-(-30)"
                                 data-end-date="(0)-(0)-(-1)"
                                 data-filter=""
                                 data-segment=""

                                 data-compared-metric="ga:sessions"
                                 data-compared-date="(0)-(-1)-(0)"
                                 data-compared-segment=""

                                 data-colors="#0099C6"
                                 data-template="{data} <span class='glyphicon glyphicon-user'></span> "
                            ></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="panel panel-default ">
                        <div class="panel-body">
                            <div class="ga-chart xsmall-height "
                                 title="Rebote ({diff})"
                                 data-type="metric"
                                 data-dimensions=""
                                 data-metrics="ga:bounceRate"
                                 data-start-date="(0)-(0)-(-31)"
                                 data-end-date="(0)-(0)-(-1)"
                                 data-filter=""
                                 data-segment=""

                                 data-compared-metric="ga:sessions"
                                 data-compared-date="(0)-(-1)-(0)"
                                 data-compared-segment=""

                                 data-colors="#666"
                                 data-template="{data}% <span class='glyphicon glyphicon-share-alt'></span>"
                            ></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="panel panel-default ">
                        <div class="panel-body">
                            <div class="ga-chart xsmall-height "
                                 title="Páginas/Sesión"
                                 data-type="metric"
                                 data-dimensions=""
                                 data-metrics="ga:pageviewsPerSession"
                                 data-start-date="30daysAgo"
                                 data-end-date="yesterday"
                                 data-filter=""
                                 data-segment=""
                                 data-colors="#666"
                                 data-template="{data} <span class='glyphicon glyphicon-duplicate'></span>"
                            ></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="panel panel-default ">
                        <div class="panel-body">
                            <div class="ga-chart xsmall-height "
                                 title="Transacciones"
                                 data-type="metric"
                                 data-dimensions=""
                                 data-metrics="ga:transactions"
                                 data-start-date="30daysAgo"
                                 data-end-date="yesterday"
                                 data-filter=""
                                 data-segment=""
                                 data-colors="#DC3912"
                                 data-template="{data} <span class='glyphicon glyphicon-shopping-cart'></span>"
                            ></div>
                        </div>
                    </div>
                </div>

            </div><!-- .row -->






            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <div class="panel panel-default ">
                        <div class="panel-heading">Tendencia del tráfico con controles</div>
                        <div class="panel-body">
                            <div class="col-md-2 col-xs-12">
                                <select class="ga-chart-control form-control"
                                        data-queryvar="metrics"
                                        data-targetids="trend-chart" >
                                    <option value="ga:sessions" data-colors="#0099C6">Sesiones</option>
                                    <option value="ga:transactions" data-colors="#DC3912">Transacciones</option>
                                </select>
                                <select class="ga-chart-control form-control"
                                        data-queryvar="dimensions"
                                        data-targetids="trend-chart" >
                                    <option value="ga:date" >Por Días</option>
                                    <option value="ga:yearWeek" >Por semanas</option>
                                </select>
                            </div>
                            <div class="col-md-10 col-xs-12">
                                <div class="ga-chart small-height" id="trend-chart"
                                     title="Últimos 30 días"
                                     data-type="line"
                                     data-dimensions="ga:date"
                                     data-metrics="ga:sessions"
                                     data-start-date="30daysAgo"
                                     data-end-date="yesterday"
                                     data-filter=""
                                     data-segment=""
                                     data-colors=""
                                ></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- .row -->

            <div class="row">
                <div class="col-md-4 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Distribución por medios</div>
                        <div class="panel-body">
                            <div class="ga-chart"
                                 title=""
                                 data-type="donut"
                                 data-dimensions="ga:medium"
                                 data-metrics="ga:sessions"
                                 data-start-date="30daysAgo"
                                 data-end-date="yesterday"
                                 data-filter=""
                                 data-segment=""
                                 data-colors=""

                            ></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Distribución por Países</div>
                        <div class="panel-body">
                            <div class="ga-chart"
                                 title=""
                                 data-type="geo"
                                 data-dimensions="ga:country"
                                 data-metrics="ga:sessions"
                                 data-start-date="30daysAgo"
                                 data-end-date="yesterday"
                                 data-filter=""
                                 data-segment=""
                                 data-onselect="segment"
                            ></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Distribución por dispositivos</div>
                        <div class="panel-body">
                            <div class="ga-chart"
                                 title=""
                                 data-type="column"
                                 data-dimensions="ga:deviceCategory"
                                 data-metrics="ga:sessions,ga:transactions"
                                 data-start-date="30daysAgo"
                                 data-end-date="yesterday"
                                 data-filter=""
                                 data-segment=""
                                 data-colors="#DC3912"
                            ></div>
                        </div>
                    </div>
                </div>
            </div><!-- .row -->

        </div><!-- End Dashboard -->

































{% endblock %}







{% block stylesheets %}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

{% endblock %}

{% block javascripts %}
    <script>
        (function(w,d,s,g,js,fs){
            g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
            js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
            js.src='https://apis.google.com/js/platform.js';
            fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
        }(window,document,'script'));
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>var GOOGLE_API_CLIENT_ID =  '1059805594688-oup6b8irp719paiuck336p08ahj7pajn.apps.googleusercontent.com';</script>
    <!--script src="/js/bootboard.js"></script-->

    <script>

        gapi.analytics.ready(function() {

            /**
             * Authorize the user immediately if the user has already granted access.
             * If no access has been created, render an authorize button inside the
             * element with the ID "embed-api-auth-container".
             */
            gapi.analytics.auth.authorize({
                container: 'embed-api-auth-container',
                clientid: GOOGLE_API_CLIENT_ID
            });


            /**
             * Create a new ViewSelector instance to be rendered inside of an
             * element with the id "view-selector-container".
             */
            var viewSelector = new gapi.analytics.ViewSelector({
                container: 'view-selector-container'
            });

            // Render the view selector to the page.
            viewSelector.execute();


            /**
             * Create a new DataChart instance with the given query parameters
             * and Google chart options. It will be rendered inside an element
             * with the id "chart-container".
             */
            var dataChart = new gapi.analytics.googleCharts.DataChart({
                query: {
                    metrics: 'ga:sessions',
                    dimensions: 'ga:date',
                    'start-date': '30daysAgo',
                    'end-date': 'yesterday'
                },
                chart: {
                    container: 'chart-container',
                    type: 'LINE',
                    options: {
                        width: '100%'
                    }
                }
            });


            /**
             * Render the dataChart on the page whenever a new view is selected.
             */
            viewSelector.on('change', function(ids) {
                dataChart.set({query: {ids: ids}}).execute();
            });

        });
    </script>
{% endblock %}