{% extends 'admin/layout.html' %}

{% block javascripts %}
{#    attention il faut importer la bibliotheque chart.js avant de définir l'objet chart#}
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.js') }}" ></script>
{#    <script src="{{ url_for('static', filename='chart.js') }}" ></script>#}
      <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
{% endblock %}



{% block content %}


<h2>visualisation de données : graph.js</h2>
<h3>Documentation</h3>
<br>

<br>
    <a href="https://www.youtube.com/watch?v=E2hytuQvLlE" target="_blank"> vidéo : flask + graph.js</a>&nbsp;
    <br>

{# https://jinja.palletsprojects.com/en/3.0.x/templates/#html-escaping #}
    <div style="width: 900px; height: 500px; border: #0a53be 1px solid;">
        <canvas id="Chart1" ></canvas>
    </div>
    graphique 1
    <script>
    var ctx1 = document.getElementById("Chart1").getContext("2d");
    var Chart1 = new Chart( ctx1, {
        type: "bar",
        data: {
            labels: {{ labels | safe }},
            datasets: [
                {
                label: "Coût du stock",
                data: {{ values | safe }},
                fill: false,
                 backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
             "#faf24c"
             , "#6a6ce7","#55f68f","#D0c309","#c45000"],
                borderColor: "rgb(75,192,192)",
                lineTension: 0.1
                }
            ]
        },
        option: {
            responsive: false
        }
    });
    </script>


    <h2>demo graphique à secteurs : "camenberd" ,"donut" ( "pie-chart"  "doughtnut")</h2>

    <canvas id="pie-chart" width="800" height="450"></canvas>

    <script>
    var Chart2 = new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: {{ labels | safe }},
      datasets: [{
        label: "catégories d'articles",
         backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
             "#faf24c"
             , "#6a6ce7","#55f68f","#D0c309","#c45000"],
        data: {{ values | safe }},
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Titre du graphique'
      }
     }
    });
    </script>
{% endblock %}