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



{% block title %}Home | Admin |Hiddify{% endblock %}

{% block body %}
% if hconfig(ConfigEnum.netdata)
<div class="card-deck">
    <div class="card card-danger">
        <div class="card-header d-none">
            <h3 class="card-title">{{_('admin.cpu_chart')}}</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="chartjs-size-monitor">
                <div class="chartjs-size-monitor-expand">
                    <div class=""></div>
                </div>
                <div class="chartjs-size-monitor-shrink">
                    <div class=""></div>
                </div>
            </div>
            <div>
                <div data-netdata="system.cpu" data-chart-library="gauge" data-title="{{_('admin.cpu_chart')}}"
                    data-units="%" data-gauge-max-value="100" data-after="-300" data-points="300"
                    data-dt-element-name="time603" data-colors="#dc3545"></div>

            </div>
        </div>

    </div>




    <div class="card card-info">
        <div class="card-header d-none">
            <h3 class="card-title">{{_('admin.ram_chart')}}</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="chart">
                <div class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand">
                        <div class=""></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink">
                        <div class=""></div>
                    </div>
                </div>
                <div data-netdata="system.ram" data-dimensions="used|buffers|active|wired"
                    data-append-options="percentage" data-chart-library="gauge" data-title="{{_('admin.ram_chart')}}"
                    data-units="%" data-gauge-max-value="100" data-height="150" data-points="300" data-colors="#17a2b8"
                    role="application">

                </div>
            </div>
        </div>

    </div>

    <div class="card card-info">
        <div class="card-header d-none">
            <h3 class="card-title">{{_('admin.ram_chart')}}</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="chart">
                <div class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand">
                        <div class=""></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink">
                        <div class=""></div>
                    </div>
                </div>
                
                <div class="netdata-gauge-chart">
                <canvas id="online_users" class="gaugeChart" style="min-height:150px;width:100%"  ></canvas>
                <span class="gaugeChartLabel" style="font-size: 27px; top: 35px;">{{onlines}}</span>
                <span class="gaugeChartTitle" style="font-size: 1rm; top: 0px;">{{_('Online Users in 24 hours')}}</span>
                <span class="gaugeChartMax" style="font-size: 20px;">{{total_users}}</span>
            </div>
            </div>
        </div>

    </div>
    % if False and not hconfig(ConfigEnum.only_ipv4)
    <div class="card card-info">
        <div class="card-header d-none">
            <h3 class="card-title">{{_('admin.ram_chart')}}</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="chart">
                <div class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand">
                        <div class=""></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink">
                        <div class=""></div>
                    </div>
                </div>
                <div data-netdata="ipv4.tcpsock" 
                    data-chart-library="gauge" data-title="{{_('admin.ipv4 connections')}}"
                    data-units="" data-gauge-max-value="1000" data-height="150" data-points="300" data-colors="#ffc107"
                    role="application">

                </div>
            </div>
        </div>

    </div>
    <div class="card card-info">
        <div class="card-header d-none">
            <h3 class="card-title">{{_('admin.ram_chart')}}</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="chart">
                <div class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand">
                        <div class=""></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink">
                        <div class=""></div>
                    </div>
                </div>
                <div data-netdata="ipv6.tcpsock" 
                    data-chart-library="gauge" data-title="{{_('admin.ipv6 connections')}}"
                    data-units="" data-gauge-max-value="1000" data-height="150" data-points="300" data-colors="#ffc107"
                    role="application">

                </div>
            </div>
        </div>

    </div>
    % endif
    <!-- 
    <div class="card card-success">
        <div class="card-header">
            <h3 class="card-title">{{_('admin.network_chart')}}</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="chart">
                <div class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand">
                        <div class=""></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink">
                        <div class=""></div>
                    </div>
                </div>
                
        
            </div>
        </div>
    </div>
</div> -->
</div>

<div class="card-deck" style="margin-top: 15px;">

    <div class="card card">
        <div class="card-header d-none">
            <!-- <h3 class="card-title">{{_('admin.protocol_chart')}}</h3> -->
            <h3 class="card-title">{{_('admin.network_chart')}}</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <p>{{_('admin.network_chart')}}</p>
            <div class="chart">
                <div class="chartjs-size-monitor">
                    <div class="chartjs-size-monitor-expand">
                        <div class=""></div>
                    </div>
                    <div class="chartjs-size-monitor-shrink">
                        <div class=""></div>
                    </div>
                </div>
                <div data-netdata="system.net" data-chart-library="google" data-height="250"
                    data-legend-position="bellow" data-title="" legend-position="bellow" data-after="-300"
                    data-dt-element-name="time206"></div>

            </div>
        </div>

    </div>


    <div class="card card">
        <div class="card-header d-none">
            <!-- <h3 class="card-title">{{_('admin.user_chart')}}</h3> -->
            <h3 class="card-title">{{_('admin.cpu_chart')}}</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <p>{{_('admin.cpu_chart')}}</p>
            <div class="chartjs-size-monitor">
                <div class="chartjs-size-monitor-expand">
                    <div class=""></div>
                </div>
                <div class="chartjs-size-monitor-shrink">
                    <div class=""></div>
                </div>
            </div>
            <!-- <canvas id="donutChart"
                    style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; display: block; width: 352px;"
                    width="591" height="419" class="chartjs-render-monitor"></canvas> -->
            <div data-netdata="apps.cpu" data-chart-library="google" data-height="250" data-after="-300"
                data-dt-element-name="time207" data-legend-position="bottom" data-title="" data-units="%"
                data-legend="no" legend="bottom"></div>
        </div>

    </div>
</div>
%else
<div class="alert alert-info">
    {{_("You have disabled netdata in the setting. You need to enable it to see the information.")}}
</div>
% endif

{% endblock %}

{% block tail_js%}
{{super()}}
<script>var netdataNoBootstrap = true;</script>


<script type="text/javascript" src="netdata/dashboard.js"></script>
<script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
<script>
    var gauge = new Gauge($("#online_users")[0]); // create sexy gauge!
gauge.maxValue = {{total_users}}; // set max gauge value
gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set({{onlines}}); // 
</script>
{% endblock %}