ISP/interface/web/monitor/templates/show_sys_state.htm at ispconfig-3-3-1-misc · ghzhost/ISP · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<div class='page-header'>
	<h1><tmpl_var name="list_head_txt"></h1>
</div>
<p><tmpl_var name="list_desc_txt"></p>


        <legend><tmpl_var name="monTransRefreshsq"></legend>

                <div class="form-group">
                    <div class="col-sm-12"><select name="refreshinterval" id="refreshinterval" class="form-control" onChange="ISPConfig.loadContentRefresh('monitor/show_sys_state.php?state={tmpl_var name="state_type"}')">
                        {tmpl_var name='refresh'}
                    </select></div>


    </div>

    <div class="pnl_formarea">
        <p class="fieldset-legend"></p>
            <div class="stateview"><tmpl_var name="state_data"></div>

    </div>

    <tmpl_if name="loadchart_data">
    <div class="pnl_formarea">
        <p class="fieldset-legend"><tmpl_var name="label_chart_title"></p>
        <div style="padding-bottom:10px;"><canvas height="30" id="loadchart" style="background-color: white;"></canvas></div>
        <div style="padding-bottom:10px;"><canvas height="30" id="memchart" style="background-color: white;"></canvas></div>
        <div style="padding-bottom:10px;"><canvas height="30" id="rxchart" style="background-color: white;"></canvas></div>
        <div style="padding-bottom:10px;"><canvas height="30" id="txchart" style="background-color: white;"></canvas></div>
    </div>

    <script>
        createChart('loadchart', '{tmpl_var name="loadchart_label"}', [{tmpl_var name='label'}], [{tmpl_var name='loadchart_data'}]);
        createChart('memchart', '{tmpl_var name="memchart_label"}', [{tmpl_var name='label'}], [{tmpl_var name='memchart_data'}]);
        createChart('rxchart', '{tmpl_var name="rxchart_label"}', [{tmpl_var name='label'}], [{tmpl_var name='rxchart_data'}]);
        createChart('txchart', '{tmpl_var name="txchart_label"}', [{tmpl_var name='label'}], [{tmpl_var name='txchart_data'}]);

        function createChart(chartname, label, labels, data) {
            var ctx = document.getElementById(chartname).getContext('2d');
            var chart = new Chart(ctx, {
                type: 'line', // Type of chart
                data: {
                    labels: labels, // Empty array to remove labels
                    datasets: [{
                        label: label, // Name of the dataset
                        data: data, // Data points
                        borderWidth: 1,
                        tension: 0.4, // Tension for cubic interpolation
                        cubicInterpolationMode: 'default', // Can be 'default' or 'monotone'
                        borderColor: 'rgb(75, 192, 192)', // Color of the line
                        backgroundColor: 'rgba(75, 192, 192, 0.2)', // Color for filling the area below the line
                        fill: true // Enable fill below the line
                    }]
                },
                options: {
                    scales: {
                        x: {
                            display: false, // Hide the x-axis
                        },
                        y: {
                            beginAtZero: true // Start y-axis at zero
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                generateLabels: function(chart) {
                                    const data = chart.data;
                                    return data.datasets.map(function(dataset, i) {
                                        return {
                                            text: dataset.label,
                                            fillStyle: 'white', // Set to empty string to hide the colored box
                                            hidden: !chart.isDatasetVisible(i),
                                            lineCap: dataset.borderCapStyle,
                                            lineDash: dataset.borderDash,
                                            lineDashOffset: dataset.borderDashOffset,
                                            lineJoin: dataset.borderJoinStyle,
                                            lineWidth: dataset.borderWidth,
                                            strokeStyle: 'white',
                                            pointStyle: 'white', // Set to empty string to hide the point style
                                            datasetIndex: i
                                        };
                                    });
                                }
                            }
                        }
                    }
                }
            });
        }
    </script>
    </tmpl_if>