ISP/interface/web/dashboard/dashlets/templates/metrics.htm at 6866-let-s-encrypt-not-set-as-default-ca-when-acme-sh-is-installed-from-the-let-s-encrypt-class · 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
<!--<div class="{tmpl_var name='tablelayout'}">-->
<div>
    <div><h3>{tmpl_var name="label_chart_title"}</h3></div>
    <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>