modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/spectrum.js

   1 'use strict';
   2 'require view';
   3 'require fs';
   4 'require ui';
   5 'require rpc';
   6
   7 var callDSLStatistics = rpc.declare({
   8         object: 'dsl',
   9         method: 'statistics',
  10         expect: { '': {} }
  11 });
  12
  13 return view.extend({
  14         load: function() {
  15                 return Promise.all([
  16                         callDSLStatistics()
  17                 ]);
  18         },
  19
  20         render: function(data) {
  21                 window.json = data[0];
  22
  23                 var v = E('div', {'class': 'cbi-map'}, [
  24                         E('h2', {'style': "height: 40px"}, [ _('DSL line spectrum') ]),
  25                         E('div', {'class': 'cbi-map-descr'}, _('The following diagrams show graphically prepared DSL characteristics that are important for evaluating the DSL connection.')),
  26
  27                         E('div', {'class': 'cbi-section'}, [
  28                                 E('div', {'style': "height: 360px; width: 1024px"},
  29                                         E('canvas', {
  30                                                 'id': 'dbChart',
  31                                                 'height': 360,
  32                                                 'width': 1024},
  33                                                 ["chart"])
  34                                 ),
  35                                 E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The graph shows the signal to noise ratio (SNR) per subcarrier in the uplink and downlink direction')),
  36                         ]),
  37                         E('div', {'class': 'cbi-section'}, [
  38                                 E('div', {'style': "height: 360px; width:1024px"},
  39                                         E('canvas', {
  40                                                 'id': 'bitsChart',
  41                                                 'height': 360,
  42                                                 'width': 1024},
  43                                                 ["chart2"])
  44                                 ),
  45                                 E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The graph shows th amount of bits actually allocated per subcarrier in the uplink and downlink direction')),
  46                         ]),
  47                         E('div', {'class': 'cbi-section'}, [
  48                                 E('div', {'style': "height: 360px; width:1024px"},
  49                                         E('canvas', {
  50                                                 'id': 'qlnChart',
  51                                                 'height': 360,
  52                                                 'width': 1024},
  53                                                 ["chart2"])
  54                                 ),
  55                                 E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The diagram shows the quiet line noise (QLN) per subcarrier in uplink and downlink direction')),
  56                         ]),
  57                         E('div', {'class': 'cbi-section'}, [
  58                                 E('div', {'style': "height: 360px; width:1024px"},
  59                                         E('canvas', {
  60                                                 'id': 'hlogChart',
  61                                                 'height': 360,
  62                                                 'width': 1024},
  63                                                 ["chart2"])
  64                                 ),
  65                                 E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The diagram shows the Channel Characteristics Function (HLOG) per subcarrier in uplink and downlink direction')),
  66                         ]),
  67                         E('script', {'src':'/luci-static/resources/view/status/dsl/graph.js'}, {})
  68                 ]);
  69
  70                 return v;
  71         },
  72
  73         handleSaveApply: null,
  74         handleSave: null,
  75         handleReset: null
  76 });