{extends "Data/statistics.tpl"}
{block name="minifiedStats"}
    <li class="sparks-info">
        <h5> Downloads <span class="txt-color-purple"><i class="fa fa-download"></i>&nbsp;{$allDownloads}</span></h5>
        <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
            {foreach item=dl from=$downloadArray name=downloads}
                {$dl.visit_count}{if $smarty.foreach.downloads.last}{else},{/if}
            {/foreach}
        </div>
    </li>
    <li class="sparks-info">
        <h5> Besucher <span class="txt-color-green"><i class="fa fa-users"></i>&nbsp;{$allVisitors}</span></h5>
        <div class="sparkline txt-color-green hidden-mobile hidden-md hidden-sm">
            {foreach item=visit from=$visitorArray name=visitors}
                {$visit.visit_count}{if $smarty.foreach.visitors.last}{else},{/if}
            {/foreach}
        </div>
    </li>
{/block}
{block name="body"}



    <!-- widget grid -->
    <section id="widget-grid" class="">

        <!-- row -->
        <div class="row">
            <div class="container">
                <article class="col-sm-12">
                    <!-- new widget -->
                    <div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-0" data-widget-togglebutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">
                        <!-- widget options:
                        usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

                        data-widget-colorbutton="false"
                        data-widget-editbutton="false"
                        data-widget-togglebutton="false"
                        data-widget-deletebutton="false"
                        data-widget-fullscreenbutton="false"
                        data-widget-custombutton="false"
                        data-widget-collapsed="true"
                        data-widget-sortable="false"

                        -->
                        <header>
                            <span class="widget-icon"> <i class="fa fa-info-circle txt-color-darken"></i> </span>
                            <h2>Statistik</h2>
                        </header>

                        <div class="no-padding">

                            <div class="widget-body">
                                <canvas id="lineChart" style="height:250px"></canvas>

                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>
{/block}
{block name="additionalJSFiles"}
    <script src="lib/SmartAdmin/js/plugin/chartjs/chart.min.js"></script>
{/block}
{block name="additionalJSCode"}

var areaChartData = {
    type: "line",
labels: {$stats->getDateLabels()},
datasets: [
{
label: "Users Per Day",
fillColor: "rgba(60,141,188,0.9)",
strokeColor: "rgba(60,141,188,0.8)",
pointColor: "#3b8bba",
pointStrokeColor: "rgba(60,141,188,1)",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(60,141,188,1)",
data: {$stats->getDateRows()}
}
]
};


var areaChartOptions = {
//Boolean - If we should show the scale at all
showScale: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: false,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Number - Tension of the bezier curve between points
bezierCurveTension: 0.3,
//Boolean - Whether to show a dot for each point
pointDot: true,
//Number - Radius of each point dot in pixels
pointDotRadius: 2.5,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius: 2,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a color
datasetFill: true,
//String - A legend template
{literal}
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
//Boolean - whether to make the chart responsive to window resizing
responsive: true
};
var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
var lineChart = new Chart(lineChartCanvas);
var lineChartOptions = areaChartOptions;
lineChartOptions.datasetFill = false;
lineChart.Line(areaChartData, lineChartOptions);{/literal}

{/block}