caisse-bliss/app/Resources/views/logged/history.html.twig

{% extends 'base.html.twig' %}
{% trans_default_domain 'FOSUserBundle' %}
{% block body %}
    <div id="wrapper">
        <div id="container" class="container">

            <div class="row">
                <h1>Historique</h1>
            </div>
<h2>Ventes de produits</h2>
            <div id="chartContainer" style="display: inline-block; height: 300px; width: 49%;"></div>
            <div id="chartContainerChiffreAffaire" style="display: inline-block; height: 300px; width: 49%;"></div>
<h2>Festivals</h2>
            <div id="chartContainerstatisticsFestivals" style="display: inline-block; height: 300px; width: 100%;"></div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="sells">
                        <h2>
                            <i class="fa fa-users"></i>
                            <div class="chiffre">
                                {{ recentSells |length }}
                            </div>
                            Clients
                        </h2>
                        <h2>
                            <i class="fa fa-euro"></i>
                            Chiffre d'affaires
                            <div class="chiffre">
                                {{ chiffreAffaires }} €
                            </div>
                        </h2>
                        <h2>
                            <i class="fa fa-shopping-cart"></i>
                            panier moyen
                            <div class="chiffre">
                                {{ chiffreAffaires / ((recentSells |length) or 1) }} €
                            </div>
                        </h2>
                        <div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 text-right">
                    <a class="btn btn-success" href="{{ path('export_all') }}">
                        <i class="fa fa-file-o fa-3x"></i>
                        Exporter toutes vos données en format csv
                    </a>
                    <h2>
                        Dernières ventes
                    </h2>
                    <div class="table">
                        <div class="row">
                            <div class="col-xs-3">
                                date
                            </div>
                            <div class="col-xs-3">
                                commentaire
                            </div>
                            <div class="col-xs-3">
                                produits
                            </div>
                            <div class="col-xs-3">
                                montant
                            </div>
                        </div>
                    </div>
                    {% for vente in recentSells %}

                        <div class="row">
                            <div class="col-xs-3">
                                {{ vente.date |date('Y-m-d H:i:s') }}
                            </div>
                            <div class="col-xs-3">
                                {{ vente.comment }}
                            </div>
                            <div class="col-xs-3">
                                {{ vente.productsSold |length }}
                            </div>
                            <div class="col-xs-3">
                                {{ vente.amount }}
                            </div>
                        </div>

                    {% endfor %}
                </div>
            </div>


        </div>
    </div>


    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script>

        var dataPoints = [
          {% for pair in statisticsSoldProducts %}
            {
                label: "{{ pair.name }}",
                x: {{ pair.count }},
                y: {{ pair.count }}
            },
            {% endfor %}
        ];
        var dataPointsChiffreAffaire = [
            {% for pair in statisticsSoldProducts %}
            {
                label: "{{ pair.name }}",
                x: {{ pair.value }},
                y: {{ pair.value }}
            },
            {% endfor %}
        ];
        var dataPointsFestivals = [
            {% for pair in statisticsFestivals %}
            {
                label: "{{ pair.name }}",
                name: "{{ pair.name }}",
                x: "{{ pair.date |date('Y-m-d')}}",
                y: {{ pair.chiffreAffaire }} ,
                countClients : {{ pair.clients_count }}
            },
            {% endfor %}
        ];
        console.log(dataPointsFestivals);
        var chartFestival = new CanvasJS.Chart("chartContainer", {
            title:{
                text: "Chiffre d'affaire par festival"
            },
            animationEnabled: true,
            data: [
                {
                    // Change type to "doughnut", "line", "splineArea", etc.
                    type: "bar",
                    dataPoints: dataPointsFestivals
                }
            ]
        });
        chartFestival.render();
        var chart = new CanvasJS.Chart("chartContainer", {
            title:{
                text: "Volume de produits vendus"
            },
            animationEnabled: true,
            data: [
                {
                    // Change type to "doughnut", "line", "splineArea", etc.
                    type: "pie",
                    dataPoints: dataPoints
                }
            ]
        });
        chart.render();
        var chartContainerChiffreAffaire = new CanvasJS.Chart("chartContainerChiffreAffaire", {
            title:{
                text: "Valeur en euros des produits vendus"
            },
            animationEnabled: true,
            data: [
                {
                    // Change type to "doughnut", "line", "splineArea", etc.
                    type: "pie",
                    dataPoints: dataPointsChiffreAffaire
                }
            ]
        });
        chartContainerChiffreAffaire.render();
    </script>
{% endblock %}