{% do setAriane(1, 'État Statistique' | trad) %}

{% extends 'layout.twig' %}
{% block body %}
<section class="contenu">
    <h1 class="bs-col">{{ 'États Statistiques' | trad }}</h1>

    {{ ariane() }}

    <header class="bs-row mb-small">
        <h2 class="bs-col">{{ etatstat.DESCRIPT }}</h2>
        <div class="bs-col-auto">
            <button class="button principal mr-0" type="button" 
                onclick="exportEtatStat()"
            >{{ 'Exporter' | trad }}</button>
            <script>
                function exportEtatStat() {
                    ajaxSimple(
                        {{ path('EtatStatistique.Tableau.export', {id: etatstat.CODETAT}) | json }},
                        new FormData(document.getElementById('main_form')),
                        () => {
                            activePopupInfo(
                                {{ 'Informations' | trad | json }},
                                {{ "Votre document est en cours de téléchargement, vous allez recevoir un mail contenant votre document." | trad | json }},
                                'modal_small'
                            );
                        }
                    );
                }
            </script>
        </div>
    </header>

    <form id="main_form" class="tab-content" action="{# self #}" method="POST">
        {% if form_filter is not empty %}
        <section class="box-form form-default mb-base">
            <div class="bs-row gutter-x-base">
                {% for input in form_filter %}
                    <div class="bs-col-quarter">
                        {{ formInput(input, post, input.label) }}
                    </div>
                {% endfor %}
                <div class="bs-col ml-auto text-right">
                    <button type="submit" class="button principal btn_filtre">
                        {{ 'Filtrer' | trad }}
                    </button>
                </div>
            </div>
        </section>
        {% endif %}

        {% if hasErrorSql %}
        <p class="error">
            {{- 'Une erreur SQL est survenue, si le problème persiste merci de contacter un administrateur' | trad -}}
        </p>
        {% else %}
            {% if listRow is empty %}
            <p class="error">
                {{- 'Aucune donnée présente' | trad -}}
            </p>
            {% endif %}
        {% endif %}
        <!-- Options personnalisation-->
        <div class="text-right">
            <select class="form-control" style="display: inline-block; width: auto" 
                onchange="graphChangeTypeDisplay(this.value)"
            >
                {% for key, label in {
                    column: 'Colonnes' | trad,
                    bar: 'Barres' | trad,
                    line: 'Lignes' | trad,
                    spline: 'Courbes' | trad,
                    polar: 'Radar' | trad,
                    pie: 'Camembert' | trad,
                    pie_donut: 'Donut' | trad,
                    col_stacked: 'Colonnes empilées' | trad,
                    bar_stacked: 'Barres empilées' | trad,
                    wind_rose: 'Rose des vents' | trad,
                } %}
                <option value="{{ key }}" {{ etatstat.Option.G_TYPE_MONO ? 'checked' }}>
                    {{- label -}}
                </option>
                {% endfor %}
            </select>
            <button id="btn-toggle-label" class="button secondaire mr-0" type="button"
            >{{ 'Afficher/Masquer les étiquettes' | trad }}</button>
        </div>

        <!-- Chart-->
        <div id="chart-main"></div>

        <!-- Highcharts JS -->
        <script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/highcharts.js') }}"></script>
        <script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/highcharts-3d.js') }}"></script>
        <script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/highcharts-more.js') }}"></script>
        <script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/modules/exporting.js') }}"></script>
        <script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/modules/offline-exporting.js') }}"></script>
        <script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/modules/oxa-export-data.src.js') }}"></script>
    </form>
</section>

<script type="text/javascript">
$(function () {
    // Options générales
    Highcharts.setOptions({
        // Trad.
        lang: {// TODO : factorize
            // Chart context menu
            contextButtonTitle: {{ 'Options d\'export' | trad | json }}, 
            viewFullscreen: {{ 'Afficher en plein écran' | trad | json }},
            printChart: {{ 'Imprimer le graphique' | trad | json }},
            downloadPNG: {{ 'Télécharger une image PNG' | trad | json }},
            downloadJPEG: {{ 'Télécharger une image JPEG' | trad | json }},
            downloadPDF: {{ 'Télécharger une image en document PDF' | trad | json }},
            downloadSVG: {{ 'Télécharger une image vectorielle SVG' | trad | json }},
            downloadCSV: {{ 'Télécharger les données dans un fichier CSV' | trad | json }},
            downloadXLS: {{ 'Télécharger les données dans un fichier Excel' | trad | json }},
            viewData: {{ 'Afficher les données' | trad | json }},
            // Zoom
            resetZoom: {{ 'Supprimer le zoom' | trad | json }},
            resetZoomTitle: 'Zoom 1:1',
            // Formats numériques
            thousandsSep: ' ',
            numericSymbols: [null,' M',' G',' T',' P',' E']
        }
    });

    const etatOption = {{ ({
        G_DATA: etatstat.Option.G_DATA | boolSql,
        X_INCLINE: etatstat.Option.X_INCLINE | boolSql,
        Y2_AFF: etatstat.Option.Y2_AFF | boolSql,
        G_MULTITYPE: etatstat.Option.G_MULTITYPE | boolSql,
        G_TYPE_MONO: etatstat.Option.G_TYPE_MONO is empty 
            ? 'column' : etatstat.Option.G_TYPE_MONO
    } + (etatstat.Option ?? {})) | json }};

   

    
      
    // ParamÃ¨tres
    var booParamModifTypePossible = {{ etatOption.G_MULTITYPE ? 'true' : 'false' }};  // Pour activer les options de changement de type de graphique. Pas en multi-types (combinaisons).
    var booParamPolarPossible = true;  // Si pas de négatifs. Pour type=line (radar) ou column+stacking (wind rose). Ajouter aussi : highcharts-more.js
    var booParamPiesPossible  = true;    // Si pas de négatifs et une seule série. Pour type=pie.
    var booParamStackedPossible  = false;    // Si pas de négatifs et plusieurs séries. Pour type = column ou bar (wind rose).
    var booParamWindRosePossible  = false;    // Si pas de négatifs et plusieurs séries. Pour type = column avec polar (wind rose).
    var booParamAvecTableau   = true;

    const yAxisUnit = etatOption.Y1_UNITE;
    const listRow = {{ listRow | json }};
    const listSerie = {{ etatstat.ListSerie | json }};

    var str_dataLabels_pies    = '{point.name} : <b>{point.y:,.2f} '+ yAxisUnit +'</b>';


    // Options initiales
    var booDataLabelsInit = false;
    var booDataLabels     = booDataLabelsInit;

    function buildDefaultOption() {
        const option = {
            title: {text: etatOption.G_TITRE},
            subtitle: {text: etatOption.G_STITRE},
            chart: {
                renderTo: 'chart-main',
                style: {
                    fontFamily: '\'Segoe UI\', Helvetica, Arial, sans-serif'
                },
                type: { 
                    // Transform meta type into highchart type
                    polar: 'line',
                    wind_rose: 'column',
                    bar_stacked: 'bar',
                    col_stacked: 'column',
                    pie_donut: 'pie',
                }[ etatOption.G_TYPE_MONO ] ?? etatOption.G_TYPE_MONO, // column, bar, line, spline, polar, pie, solidgauge
                polar: ['polar', 'wind_rose'].includes(etatOption.G_TYPE_MONO),
                // Click and drag to zoom in. Hold down shift key to pan
                zoomType: 'xy',
                panning: true,
                panKey: 'shift',

                // Pour la 3D : margin: 75 (sinon : null) et options3d
                margin: null,
                options3d: {
                    enabled: false,
                    alpha: 15,
                    beta: 15,
                    depth: 50,
                    viewDistance: 25
                },
                events: {
                    // Event after the rendering of the table (see exporting.showTable)
                    // Note : this event is not documented
                    afterViewData: () => {
                        // Format table style
                        document
                            .querySelector('.highcharts-data-table>table')
                            .classList.add('table')
                        document
                            .querySelector('.highcharts-data-table>table>thead')
                            .classList.add('thead-dark')
                    }
                },
            },
                    
            xAxis: {
                categories: listRow.map((row) => {
                    return row[ etatOption.X_ALIAS ]
                }),
                labels: {rotation: etatOption.X_INCLINE ? -45 : null},
                tickmarkPlacement: 'between',
                title: {text: etatOption.X_TITRE},
                lineWidth: 1
            },
            yAxis: [
                // Axe 0 (premier)
                {
                    title: {text: etatOption.Y1_TITRE},
                },
                // Axe 1 (second)
                (etatOption.Y2_AFF ? {
                    title: {text: etatOption.Y2_TITRE},
                    opposite: true,
                } : null),
            ].filter((item) => item != null),
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table width="200px">', // 200px, sinon trop petit pour IE
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td align="right" style="padding:0"><b>{point.y:,.2f} '+ yAxisUnit +'</b></td></tr>',   // align="right" pour cadrer les montants ï¿½ droite
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },     
                
                
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: booDataLabels,
                        format:  '{point.y:,.2f} ' + yAxisUnit
                    }
                },
                column: {
                    stacking: etatOption.G_TYPE_MONO == 'col_stacked' ? 'normal' : null,
                    pointPadding: 0.2,
                    borderWidth: 0
                },
                bar: {
                    stacking: etatOption.G_TYPE_MONO == 'bar_stacked' ? 'normal' : null,
                    pointPadding: 0.2,
                    borderWidth: 0
                },
                pie: {
                    innerSize: etatOption.G_TYPE_MONO == 'pie_donut' ? 50 : 0,
                    depth: 45,
                    showInLegend: true,
                    point: {
                        events: {
                            legendItemClick: function (event) {
                                return false; // Le clic sur une tranche ne doit pas l'effacer
                            }
                        }
                    }
                },
                solidgauge: {
                    dataLabels: {
                        y: 5,
                        borderWidth: 0,
                        useHTML: true
                    }
                }
            },
            series: listSerie.map((serie, index) => {
                return {
                    name: serie.SERIE_NOM,
                    color: serie.SERIE_COLOR,
                    type: etatOption.G_MULTITYPE ? serie.TYPE_GRAPH : null,
                    tooltip: { 
                        valueDecimals: 2,
                        valueSuffix: ' ' + yAxisUnit,
                    },
                    dataLabels: {format: '{y} ' + yAxisUnit},
                    data: listRow.map((row) => {
                        return [
                            row[ etatOption.X_ALIAS ],
                            parseFloat(row[ serie.SERIE_ALIAS])
                        ];
                    }),
                    // The second serie use the secondary Y Axis if available
                    yAxis: etatOption.Y2_AFF && index != 0 ? 1 : 0, 
                };
            }),
            exporting: {
                filename: {{ etatstat.Option.G_TITRE | slug | json }},
                fallbackToExportServer: true,
                tableCaption: false,
                showTable: etatOption.G_DATA,
                csv: {oxa_MLS_Category: etatOption.X_TITRE},
                buttons: {
                    contextButton: {
                        /* Menu "View data" (afficher les données, en dernÃ¨re position) : 
                        inutile, en doublon avec l'option "booParamAvecTableau"
                        */
                        menuItems: 
                            Highcharts.defaultOptions.exporting
                            .buttons.contextButton
                            .menuItems.filter((item) => {
                                return item != 'viewData';
                            })
                    },
                },
            },
            credits: {enabled: false}
        };

        if (option.polar) {
            option.plotOptions.column.stacking = 'normal';
            option.xAxis.tickmarkPlacement = 'on';
            option.xAxis.title.x = -200;
            option.xAxis.title.y = 200;
            option.yAxis[0].title = {text: null};

            // $('#img_polar').click(function () {
            //     objOptions.xAxis.lineWidth = 0;
            //     objOptions.yAxis[0].gridLineInterpolation = 'polygon';
            // });
        }

        return option;
    }
          
    // Chart initial
    window.objChart = new Highcharts.Chart(buildDefaultOption());
    
    // Afficher ou masquer les dataLabels ?
    $('#btn-toggle-label').click(function () {
      
        booDataLabels = !booDataLabels;
        for (var i = 0; i < objChart.series.length; i++) {
            objChart.series[i].update({
                dataLabels: {enabled: booDataLabels}
            },false);
        }
        objChart.redraw();
    });

    window.graphChangeTypeDisplay = (typeDisplay) => {
        objChart.update({
            // TODO : factorize with init

            chart: {
                type: {
                    // Transform meta type into highchart type
                    polar: 'line',
                    wind_rose: 'column',
                    bar_stacked: 'bar',
                    col_stacked: 'column',
                    pie_donut: 'pie',
                }[ typeDisplay ] ?? typeDisplay, // column, bar, line, spline, polar, pie, solidgauge
                polar: ['polar', 'wind_rose'].includes(typeDisplay),
            },
            plotOptions: {
                column: {
                    stacking: typeDisplay == 'col_stacked' ? 'normal' : null,
                },
                bar: {
                    stacking: typeDisplay == 'bar_stacked' ? 'normal' : null,
                },
                pie: {
                    innerSize: typeDisplay == 'pie_donut' ? 50 : 0,
                },
            },
        }, true);
    }
});
</script>
</body>
{% endblock %}


