{% extends "DAIManagementApp/base.html" %}
{% block content %}

<div class="app-content">
    <div class="side-app">

        <!-- PAGE-HEADER -->

        <div class="page-header">
            <div>
                <h1 class="page-title">Stats per Creative </h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#"> Stats </a></li>
                    <li class="breadcrumb-item active" aria-current="page">Stats per Creative </li>
                </ol>
            </div>
        </div>
            
               
        <div class="row">
            <div class="col-lg-6 col-md-12">
                <div class="card">
                    <div class='card-header'> Most ads successfully</div>
                    <div class="card-body">
                        <canvas id="chartPie" class="h-275 chartjs-render-monitor" width="800" height="450" style="display: block; width: 565px; height: 275px;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="card">
                    <div class='card-header'> Ads according to advertisers</div>
                    <div class="card-body">
                        <canvas id="bar-chart" width="800" height="450"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script >
    $(function() {

        /* Pie Chart*/
        var datapie = {
            labels: {{ verifs.lebel|safe }},
            datasets: [{
                data: {{ verifs.data|safe }} ,
                
			    backgroundColor: {{ verifs.color|safe }}
            }]
        };
        var optionpie = {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
                display: true,
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        };

        /* Doughbut Chart*/
        var ctx6 = document.getElementById('chartPie');
        var myPieChart6 = new Chart(ctx6, {
            type: 'doughnut',
            data: datapie,
            options: optionpie
        });
        new Chart(document.getElementById("bar-chart"), {
            type: 'bar',
            data: {
            labels: {{ brands.label|safe }},
            datasets: [
                {
                label: "",
                backgroundColor: {{ brands.color|safe }},
                data: {{ brands.data|safe }}
                }
            ]
            },
            options: {
            legend: { display: false },
            title: {
                display: false,
                text: 'Predicted world population (millions) in 2050'
            }
            }
        });
    });
</script>



{% endblock content %}