{% extends 'default/base.html.twig' %}

{% block custom_css %}
{{parent()}}
<link href="{{asset('assets/dist/css/pages/widget-page.css')}}" rel="stylesheet">
<!--link href="{{asset('assets/dist/css/pages/float-chart.css')}}" rel="stylesheet" -->
{% endblock %}
{% block full_content %}
<div class="col-lg-12">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">{{ 'Form.Dashboard.Home' | trans}}</h4>
            <h6 class="card-subtitle">{{ 'Form.Dashboard.SelectDatabase' | trans}}</h6> 
            {% include 'dashboard/formulaireStat.html.twig' %}
            {% if show %}
            <div id="bar-chart" style="width:100%; height:400px;"></div>
            {% endif %}
        </div>
    </div>

    <div class="card">
        <div class="row">
            <div class="col-lg-9 col-md-12">
                <div class="card-body">
                    <h3>{{'Dashboard.OtherStat' | trans}}</h3>
                    <div class='row'>
                        <div class="col-md-6">
                            <h6 class="card-subtitle">{{'Dashboard.CPU' | trans}}</h6>
                            <div id="gauge2-chart" style="width:100%; height:400px; margin-top: 0px"></div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="card-subtitle">{{'Dashboard.Recent' | trans}}</h6>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>{{'Table.User.Name' | trans}}</th>
                                        <th>{{'Dashboard.Organization' | trans}}</th>
                                        <th>{{'Table.User.LastLog' | trans}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for d in last5 %}
                                        <tr>
                                            <td>{{ d.fullname }}</td>
                                            <td>{{ d.organization }}</td>
                                            <td>{{ d.lastlogin | format_datetime('short', 'short', locale=app.request.getLocale()) }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-5 border-start p-l-0">
                <center class="m-t-30 m-b-40 p-t-20 p-b-20">
                    <font class="display-3">{{ nbUser }}</font>
                    <h6 class="text-muted">{{ 'Dashboard.User' | trans }}</h6>
                </center>
                <hr>
                <div class="card-body">
                    <div class="row">
                        <!-- Column -->
                        <div class="col p-r-0">
                            <h1 class="font-light">{{ nbActiveUser }}</h1>
                            <h6 class="text-muted">{{ 'Dashboard.UserActive' | trans }}</h6></div>
                        <!-- Column -->
                        <div class="col text-end align-self-center">
                            <div data-label="20%" class="css-bar m-b-0 css-bar-primary css-bar-20"><i class="mdi mdi-desktop-mac"></i></div>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="card-body">
                    <div class="row">
                        <!-- Column -->
                        <div class="col p-r-0">
                            <h1 class="font-light">{{nbDatabase}}</h1>
                            <h6 class="text-muted">{{ 'Dashboard.SF' | trans }}</h6></div>
                        <!-- Column -->
                        <div class="col text-end align-self-center">
                            <div data-label="20%" class="css-bar m-b-0 css-bar-danger css-bar-20"><i class="mdi mdi-chart-bar"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}
{% block custom_js %}
    {{parent()}}
    <script type="text/javascript" src="{{asset('assets/node_modules/echarts/echarts-all.js')}}"></script>
    <script type="text/javascript">
        // ============================================================== 
        // Bar chart option
        // ============================================================== 
    {% if show %}
        var myChart = echarts.init(document.getElementById('bar-chart'));

        // specify chart configuration item and data
        option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['{{'Dashboard.Entry' | trans}}', '{{'Dashboard.Search' | trans}}', '{{'Dashboard.Hit' | trans}}'],
            },
            toolbox: {
                show : true,
                feature : {
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            color: ["#55ce63", "#009efb", , "#fca68c"],
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : {{ abs | json_encode | raw }}
                }
            ],
            yAxis : [
                {
                    type : 'value',
                }
            ],
            series : [
                {
                    name:'{{'Dashboard.Entry' | trans}}',
                    type:'bar',
                    data: {{ data1 | json_encode }},
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            //{type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            //{type : 'average', name: 'Average'}
                        ]
                    },
                },
                {
                    name:'{{'Dashboard.Search' | trans}}',
                    type:'bar',
                    data: {{ data2 | json_encode }},
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            //{type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            //{type : 'average', name: 'Average'}
                        ]
                    }
                },
                {
                    name:'{{'Dashboard.Hit' | trans}}',
                    type:'bar',
                    data: {{ data3 | json_encode }},
                    markPoint : {
                        data : [
                            {type : 'max', name: 'Max'},
                            //{type : 'min', name: 'Min'}
                        ]
                    },
                    markLine : {
                        data : [
                            //{type : 'average', name: 'Average'}
                        ]
                    }
                },
            ]
        };
                            

        // use configuration item and data specified to show chart
        myChart.setOption(option, true), $(function() {
                    function resize() {
                        setTimeout(function() {
                            myChart.resize()
                        }, 100)
                    }
                    $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
                });
    {% endif %}
    </script>
    <script type="text/javascript">
        // ============================================================== 
        // Radar chart option
        // ============================================================== 
        var gauge2Chart = echarts.init(document.getElementById('gauge2-chart'));

        // specify chart configuration item and data
        option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                show : true,
                feature : {
                    restore : {show: false},
                    saveAsImage : {show: false}
                }
            },
            series : [
                {
                    name:'{{"Dashboard.CPU" | trans}}',
                    type:'gauge',
                    splitNumber: 10,       
                    axisLine: {            
                        lineStyle: {       
                            color: [[0.2, '#55ce63'],[0.8, '#009efb'],[1, '#f62d51']], 
                            width: 8
                        }
                    },
                    axisTick: {            
                        splitNumber: 10,   
                        length :12,        
                        lineStyle: {       
                            color: 'auto'
                        }
                    },
                    axisLabel: {           
                        textStyle: {       
                            color: 'auto'
                        }
                    },
                    splitLine: {           
                        show: true,        
                        length :30,         
                        lineStyle: {       
                            color: 'auto'
                        }
                    },
                    pointer : {
                        width : 5
                    },
                    title : {
                        show : true,
                        offsetCenter: [0, '-40%'],       
                        textStyle: {      
                            fontWeight: 'bolder'
                        }
                    },
                    detail : {
                        formatter:'{value}%',
                        textStyle: {       
                            color: 'auto',
                            fontWeight: 'bolder'
                        }
                    },
                    data:[{value: 50, name: 'CPU %'}] 
                }
            ]
        };

        timeTicket = setInterval(function (){
            option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
            gaugeChart.setOption(option, true);
        },2000); 

        clearInterval(timeTicket);
        timeTicket = setInterval(function (){
            var value = (Math.random()*100).toFixed(2) - 0;
            if (value < 72 ) option.series[0].data[0].value = value;
            //option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
            gauge2Chart.setOption(option,true);
        },2000)
                                                        

        // use configuration item and data specified to show chart
        gauge2Chart.setOption(option, true), $(function() {
                    function resize() {
                        setTimeout(function() {
                            gauge2Chart.resize()
                        }, 100)
                    }
                    $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
                });

    </script>
    
{% endblock %}