Ponmon/create.web.tmpl.onu_graph.html at main · Mr-Method/Ponmon · 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
93
94
#<ACTION> file=>'web/tmpl/onu_graph.html',hook=>'new'
<script type='text/javascript'>
$(document).ready(function() {
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    lang: {
      locale: '{{locale}}'
    },
    accessibility: {
      enabled: false
    }
  });

  var containerWidth = document.getElementById('a_onu_graph').offsetWidth;
  var chartWidth = containerWidth * (95 / 100);
  var chart = new Highcharts.Chart(
    'a_onu_graph',
    {
      chart: {
        type: 'spline',
        width: chartWidth,
        zoomType: 'x',
        spacingRight: 10
      },
      title: {
        text: "{{title}}",
        useHTML: true
      },
      xAxis: {
        title: {
          text: "{{x_title}}",
        },
        labels: {
          formatter: function() {
            {% if type %}
              return Highcharts.dateFormat('%e. %b', this.value - (new Date().getTimezoneOffset() * 60000));
            {% else %}
              return Highcharts.dateFormat('%H:%M', this.value - (new Date().getTimezoneOffset() * 60000));
            {% endif %}
          },
        },
        type: 'datetime',
        gridLineWidth: 1,
      },
      yAxis: {
        title: {
          text: "{{y_title}}",
        },
        startOnTick: true,
        showFirstLabel: false,
      },
      tooltip: {
        enabled: true,
        shared: true,
        useHTML: true,
        valueDecimals: 2,
        valueSuffix: ' dBi',
        headerFormat: '<span style="font-size: 14px">{point.key:%A<br>%Y-%m-%d<br>%H:%M:%S}</span><br>' // date time formatting
      },
      plotOptions: {
        spline: {
          lineWidth: 1,
          marker: {
            enabled: false,
          },
          shadow: false,
        },
        line: {
          lineWidth: 2,
          marker: {
            enabled: false,
          },
          shadow: false,
        },
        column: {
          borderWidth: 3,
        },
      },
      series: [
        {% for s in series %}
          {
            type: {% if type %}'area'{% else %}'spline'{% endif %},
            name: '{{s.name}}',
            color: '{{s.color}}',
            data: [{% for point in s.points %} [ {{point.x}}, {{point.y}} ], {% endfor %}],
          },
        {% endfor %}
      ]
    }
  );
});
</script>