Se cierra vista de ONU. Se agrega filtro de tiempo.

src/StatsBundle/Admin/OnuAdmin.php

@@ -118,7 +118,10 @@ class OnuAdmin extends BaseAdmin
             ->add('updated')
         ;
 
-        $this->parameters = array('url_ftth' => "hola");
+        $from = $this->getRequest()->get('from');
+        $to = $this->getRequest()->get('to');
+
+        $this->parameters = array('from' => $from, 'to' => $to);
     }
 
     /**

src/StatsBundle/Resources/public/highcharts/highchartsConfig.js

@@ -32,7 +32,7 @@ Highcharts.setOptions({
     yAxis: {title: {text: null},labels: {align: 'left',x: 5,y: -2},plotLines: [{value: 0,width: 1,color: '#808080'}]},
     plotOptions: {series: {turboThreshold: 0,lineWidth: 2,states: {hover: {lineWidth: 2}},marker: {enabled: true,lineWidth: 1,radius: 3,symbol: 'square', states: {hover: {enabled: true}}}}},
     series: {type: 'spline',connectNulls: false},
-    tooltip: {useHTML: true,borderColor: '#494949',valueDecimals: 2,shared: true,crosshairs: true,xDateFormat: '%A, %b %e, %H:%M'}
+    tooltip: {useHTML: true,borderColor: '#494949',valueDecimals: 2,shared: true,crosshairs: true,xDateFormat: '%A, %b %e, %H:%M'}    
 });
         
 
@@ -65,6 +65,44 @@ function bandwidthTooltip() {
     return s;
 }
 
+function consumptionTooltip() {
+        
+    var date = new Date(this.x);
+    num_day = date.getDate();
+    index_weekday = date.getDay();
+    index_shortMonths = date.getMonth();
+
+    if(date.getHours() < 10) {h = "0" + date.getHours();} else {h = date.getHours();}
+    if(date.getMinutes() < 10) {m = "0" + date.getMinutes();} else {m = date.getMinutes();}
+
+    var s = '<span style="font-size:10px">' + weekdays[index_weekday] + ', ' + shortMonths[index_shortMonths] + ' ' + num_day + ', ' + h + ':' + m + '</span>';
+
+    $.each(this.points, function(i, point) {
+        cons = point.y;
+
+        if(cons > 0) {
+            cons = cons.toFixed(3) + ' GB';
+        } else {
+            cons = (cons * 1000).toFixed(3) + ' MB';
+        }
+            
+        s += '<br/><span style="color:'+point.series.color+'">\u25CF</span> '+ point.series.name +': <b>'+cons+'</b>';
+    });
+
+    return s;
+}
+
+function consumptionAxisLabel() {
+    cons = this.value;
+    if(cons > 0) {
+        cons = cons.toFixed(1) + ' GB';
+    } else {
+        cons = (cons * 1000).toFixed(1) + ' MB';
+    }
+
+    return cons;
+}
+
 function onuStatusTooltip() {
         
     var date = new Date(this.x);

src/StatsBundle/Resources/translations/StatsBundle.es.yml

@@ -191,6 +191,13 @@ list:
     label_operative_state: Estado Operativo
     label_olt_state: Estado en OLT
     label_olt_index: Indice en OLT
+    label_in_bandiwdth: IN Bandwidth
+    label_out_bandiwdth: OUT Bandwidth
+    label_bandwidth_avg: Bandwidth AVG
+    label_bandwidth_points: Cantidad de Puntos
+    label_bandwidth_used: Uso
+    label_bandwidth_max: Bandwidth MAX
+    label_consumption: Consumo
     
 help:
     url: Url a consultar dispositivos
@@ -249,4 +256,7 @@ cmts_reports: Alertas sobre el CMTS (últimos 5 días)
 msg_no_enable_geoserver_service: El servicio Geoserver no se encuentra habilitado.
 no_defined: No definido
 link_action_reload_show_stats: Recargar por problema de conexión
-link_action_edit_location: Modificar/Añadir ubicación
+link_action_edit_location: Modificar/Añadir ubicación
+consumption_info_evolution: Evolución del consumo mensual y porcentaje de utilización. El valor se reinicia con el comienzo de un nuevo mes.
+nas_data_origen: Salvo OLT Huawei, estos valores se obtienen desde el NAS, consultar sobre la ejecución de los comandos de estadísticas sobre el mismo.
+picker_find: Buscar

src/StatsBundle/Resources/views/Onu/base_show_v2.html.twig

@@ -5,11 +5,24 @@
         .no_defined {
             color: gray;
             font-style: italic;
+            font-weight: normal;
+        }
+
+        .nas_data_origen {
+            font-size: 13px;
+        }
+
+        .in-label {
+            color: #3f6833;
+        }
+        
+        .out-label {
+            color: #e24d42;
         }
 
         #map {
             width: 100%;
-            height: 375px;
+            height: 425px;
             border-top: 0px;
             border-bottom: 0px;
             border-left: 0px;
@@ -19,6 +32,12 @@
             z-index: 0;
             cursor:default;
         }
+
+        .form-group.picker {
+            margin-bottom: 0px;
+            width: 33%;
+            float: left;
+        }
     </style>
     
     {% include 'LeafletBundle:Leaflet:resources_only_leaflet.html.twig' %}
@@ -26,6 +45,6 @@
     <script src="{{ asset('bundles/stats/highcharts/code/highcharts.js') }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{ asset('bundles/stats/highcharts/highchartsConfig.js') }}" type="text/javascript" charset="utf-8"></script>
 
-    {{ render(controller('StatsBundle:Stats:showOnu', { 'object': object })) }}
+    {{ render(controller('StatsBundle:Stats:showOnu', { 'object': object ,'from':admin.parameters.from, 'to':admin.parameters.to})) }}
     
 {% endblock %}

src/StatsBundle/Resources/views/Stats/Template/field_consumption.html.twig

@@ -0,0 +1,9 @@
+{% if value > 0 %}
+    {% set v = value|number_format(3,'.',' ') %}
+    {% set unit = 'GB' %}
+{% else %}
+    {% set v = (value * 1000)|number_format(3,'.',' ') %}
+    {% set unit = 'MB' %}
+{% endif %}
+
+<span title="{{ value|number_format(3, '.', ' ')}} GB">{{v}}</span> <span class="text_column_stats">{{unit}}</span>

src/StatsBundle/Resources/views/Stats/Template/field_octets.html.twig

@@ -0,0 +1,21 @@
+{% if value >= 1000000000 %}
+    {% set v = (value / 1000000000)|number_format(2,'.',' ') %}
+    {% set unit = 'Gb/s' %}
+{% elseif value >= 1000000 %}
+    {% set v = (value / 1000000)|number_format(2,'.',' ') %}
+    {% set unit = 'Mb/s' %}
+{% elseif value >= 1000 %}
+    {% set v = (value / 1000)|number_format(2,'.',' ') %}
+    {% set unit = 'Kb/s' %}
+{% elseif value >= 1 %}
+    {% set v = value|number_format(2,'.',' ') %}
+    {% set unit = 'bits/s' %}
+{% elseif value == 1 %}
+    {% set v = value|number_format(2,'.',' ') %}
+    {% set unit = 'bit/s' %}
+{% else %}
+    {% set v = '0' %}
+    {% set unit = 'bits/s' %}
+{% endif %}
+
+<span title="{{ value|number_format(3, '.', ' ')}} bits/s">{{v}}</span> <span class="text_column_stats">{{unit}}</span>

src/StatsBundle/Resources/views/Stats/Template/onu_bandwidth_info.html.twig

@@ -0,0 +1,76 @@
+<table class="table table-condensed table-bordered" style="margin-top:57px; border-top:2px solid #3f6833;">
+<thead>
+    <th colspan=3>
+    <i class="fa fa-chevron-circle-down in-label" aria-hidden="true"></i>&nbsp;&nbsp;{{ 'list.label_in_bandiwdth'|trans({}, 'StatsBundle') }}
+    {% if remoteData['profile_download'] is not null %}
+        <span class="no_defined">&nbsp;&nbsp;&nbsp;(limit: {{remoteData['profile_download']}} <span class="text_column_stats">bits/s</span>)<span>
+    {% endif %}
+    </th>
+</thead>
+<tbody>
+    <tr>
+        <td style="white-space: nowrap;">{{ 'list.label_bandwidth_avg'|trans({}, 'StatsBundle') }}</td>
+        <td>
+            {% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['in_bandwidth']['avg']} only %}
+        </td>
+        <td>
+        {% if remoteData['profile_download'] is not null and remoteData['profile_download'] > 0 and series['in_bandwidth']['avg'] > 0 %}
+            {{((series['in_bandwidth']['avg'] / remoteData['profile_download']) * 100)|number_format(2,'.','')}} <span class="text_column_stats">%</span> 
+        {% else %}
+            <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+        {% endif %}
+        </td>
+    </tr>
+    <tr>
+        <td style="white-space: nowrap;">{{ 'list.label_bandwidth_max'|trans({}, 'StatsBundle') }}</td>
+        <td>
+            {% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['in_bandwidth']['max']} only %}
+        </td>
+        <td>
+        {% if remoteData['profile_download'] is not null and remoteData['profile_download'] > 0 and series['in_bandwidth']['max'] > 0 %}
+            {{((series['in_bandwidth']['max'] / remoteData['profile_download']) * 100)|number_format(2,'.','')}} <span class="text_column_stats">%</span> 
+        {% else %}
+            <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+        {% endif %}
+        </td>
+    </tr>
+</table>
+<br />
+
+<table class="table table-condensed table-bordered" style="border-top:2px solid #e24d42;">
+<thead>
+    <th colspan=3>
+    <i class="fa fa-chevron-circle-up out-label" aria-hidden="true"></i>&nbsp;&nbsp;{{ 'list.label_out_bandiwdth'|trans({}, 'StatsBundle') }}
+    {% if remoteData['profile_upload'] is not null %}
+        <span class="no_defined">&nbsp;&nbsp;&nbsp;(limit: {{remoteData['profile_upload']}} <span class="text_column_stats">bits/s</span>)<span>
+    {% endif %}
+    </th>
+</thead>
+<tbody>
+    <tr>
+        <td style="white-space: nowrap;">{{ 'list.label_bandwidth_avg'|trans({}, 'StatsBundle') }}</td>
+        <td>
+            {% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['out_bandwidth']['avg']} only %}
+        </td>
+        <td>
+        {% if remoteData['profile_upload'] is not null and remoteData['profile_upload'] > 0 and series['out_bandwidth']['avg'] > 0 %}
+            {{((series['out_bandwidth']['avg'] / remoteData['profile_upload']) * 100)|number_format(2,'.','')}} <span class="text_column_stats">%</span> 
+        {% else %}
+            <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+        {% endif %}
+        </td>
+    </tr>
+    <tr>
+        <td style="white-space: nowrap;">{{ 'list.label_bandwidth_max'|trans({}, 'StatsBundle') }}</td>
+        <td>
+            {% include '@Stats/Stats/Template/field_octets.html.twig' with {'value': series['out_bandwidth']['max']} only %}
+        </td>
+        <td>
+        {% if remoteData['profile_upload'] is not null and remoteData['profile_upload'] > 0 and series['out_bandwidth']['max'] > 0 %}
+            {{((series['out_bandwidth']['max'] / remoteData['profile_upload']) * 100)|number_format(2,'.','')}} <span class="text_column_stats">%</span>
+        {% else %}
+            <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+        {% endif %}
+        </td>
+    </tr>
+</table>

src/StatsBundle/Resources/views/Stats/Template/onu_consumption_info.html.twig

@@ -0,0 +1,37 @@
+<table class="table table-condensed table-bordered" style="margin-top:57px; border-top:2px solid #3c8dbc;">
+<thead>
+    <th>
+    <i class="fa fa-line-chart" aria-hidden="true"></i>&nbsp;&nbsp;{{ 'list.label_consumption'|trans({}, 'StatsBundle') }}
+    {% if remoteData['profile_consumption'] is not null %}
+        <span class="no_defined">&nbsp;&nbsp;&nbsp;(limit: {{remoteData['profile_consumption']}} <span class="text_column_stats">GB</span>)<span>
+    {% endif %}
+    </th>
+</thead>
+<tbody>
+    {% if remoteData['profile_consumption'] is not null and remoteData['profile_consumption'] > 0 and series['in_consumption']['last'] > 0 %}
+    <tr>
+        <td>
+            <div>
+                <span style="font-weight: bold; font-size: 50px">
+                    {% include '@Stats/Stats/Template/field_consumption.html.twig' with {'value': series['in_consumption']['last']} only %}
+                </span>
+                <span style="font-weight: bold; font-size: 50px; color:#3c8dbc">/</span>
+                <span style="font-weight: bold; font-size: 45px">
+                    {{((series['in_consumption']['last'] / remoteData['profile_consumption']) * 100)|number_format(2,'.','')}} <span class="text_column_stats">%</span> 
+                </span>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <span class="no_defined">{{ 'consumption_info_evolution'|trans({}, 'StatsBundle') }}</span>
+        </td>
+    </tr>
+    {% else %}
+    <tr>
+        <td style="text-align:center">
+            <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+        </td>
+    </tr>
+    {% endif %}
+</table>

src/StatsBundle/Resources/views/Stats/Template/onu_info.html.twig

@@ -29,6 +29,16 @@
                 {% endif %}
                 </td>
             </tr>
+            <tr>
+                <td style="white-space: nowrap;">{{ 'list.label_model'|trans({}, 'StatsBundle') }}</td>
+                <td>
+                {% if remoteData['model_name'] is not null %}
+                    {{remoteData['model_name']}}
+                {% else %}
+                    <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+                {% endif %}
+                </td>
+            </tr>
             <tr>
                 <td style="white-space: nowrap;">{{ 'list.label_created'|trans({}, 'StatsBundle') }}</td>
                 <td>

src/StatsBundle/Resources/views/Stats/Template/olt_info.html.twig

@@ -48,41 +48,31 @@
         <table class="table table-hover table-condensed table-striped table-bordered">
             <thead><th colspan=2>{{ 'list.label_configuration'|trans({}, 'StatsBundle') }}</th></thead>    
             <tbody>
-                <tr>
-                    <td style="white-space: nowrap;">{{ 'list.label_model'|trans({}, 'StatsBundle') }}</td>
-                    <td>
-                    {% if remoteData['model_name'] is not null %}
-                        {{remoteData['model_name']}}
-                    {% else %}
-                        <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
-                    {% endif %}
-                    </td>
-                </tr>
                 <tr>
                     <td>{{ 'list.label_profile'|trans({}, 'StatsBundle') }}</td>
                     <td>
                     {% if remoteData['profile_name'] is not null %}
-                        {{remoteData['profile_name']}}
+                        {{remoteData['profile_name']}}<span class="no_defined">&nbsp;&nbsp;&nbsp;(limit: {{remoteData['profile_consumption']}} <span class="text_column_stats">GB</span>)<span>
                     {% else %}
                         <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
                     {% endif %}
                     </td>
                 </tr>
                 <tr>
-                    <td>{{ 'list.label_profile_upload'|trans({}, 'StatsBundle') }}</td>
+                    <td>{{ 'list.label_profile_download'|trans({}, 'StatsBundle') }} <span class="in-label">(in)</span></td>
                     <td>
-                    {% if remoteData['profile_upload'] is not null %}
-                        {{remoteData['profile_upload']}} bits/s
+                    {% if remoteData['profile_download'] is not null %}
+                        {{remoteData['profile_download']}} <span class="text_column_stats">bits/s</span>
                     {% else %}
                         <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
                     {% endif %}
                     </td>
                 </tr>
                 <tr>
-                    <td>{{ 'list.label_profile_download'|trans({}, 'StatsBundle') }}</td>
+                    <td>{{ 'list.label_profile_upload'|trans({}, 'StatsBundle') }} <span class="out-label">(out)</span></td>
                     <td>
-                    {% if remoteData['profile_download'] is not null %}
-                        {{remoteData['profile_download']}} bits/s
+                    {% if remoteData['profile_upload'] is not null %}
+                        {{remoteData['profile_upload']}} <span class="text_column_stats">bits/s</span>
                     {% else %}
                         <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
                     {% endif %}
@@ -112,7 +102,38 @@
                     {% endif %}
                     </td>
                 </tr>
-                
+                <tr>
+                    <td>
+                    {% if onu.getTxPower is not null %}
+                        TX {% include 'StatsBundle:Templates:onu_field_tx.html.twig' with {'value': onu.getTxPower} only %}
+                    {% else %}
+                        TX <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+                    {% endif %}
+                    </td>
+                    <td>
+                    {% if onu.getRxPower is not null %}
+                        RX {% include 'StatsBundle:Templates:onu_field_rx.html.twig' with {'value': onu.getRxPower} only %}
+                    {% else %}
+                        RX <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+                    {% endif %}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                    {% if onu.getVoltage is not null %}
+                        Voltage {{ onu.getVoltage|number_format(2, '.', ',')}} <span class="text_column_stats">V</span>
+                    {% else %}
+                        Voltage <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+                    {% endif %}
+                    </td>
+                    <td>
+                    {% if onu.getTemperature is not null %}
+                        Temperature {{ onu.getTemperature|number_format(2, '.', ',')}} <span class="text_column_stats">ºC</span>
+                    {% else %}
+                        Temperature <span class="no_defined">{{ 'no_defined'|trans({}, 'StatsBundle') }}</span>
+                    {% endif %}
+                    </td>
+                </tr>
             </tbody>
         </table>
     </div>

src/StatsBundle/Resources/views/Stats/Template/onu_location.html.twig

@@ -9,6 +9,7 @@
         </a>
     {% endif %}
 </div>
+{% include '@Stats/Stats/picker.html.twig' %}
 <script>
 
 /* --------------------- PROGRAMA PRINCIPAL ------------------------- */

src/StatsBundle/Resources/views/Stats/picker.html.twig

@@ -0,0 +1,59 @@
+<form method="post" name="form" id="picker-form">
+    <div class="container" style="width: 100%">
+            <div class="form-group picker">
+                <div class='input-group date' id='datetimepicker6'>
+                    <input type="text" class="form-control"/>
+                    
+                    <span class="input-group-addon">
+                        <span class="glyphicon glyphicon-calendar"></span>
+                    </span>
+                </div>
+            </div>
+
+            <div class="form-group picker"  style="margin-left: 20px">
+                <div class='input-group date' id='datetimepicker7'>
+                    <input type="text" class="form-control"/>
+                    
+                    <span class="input-group-addon">
+                        <span class="glyphicon glyphicon-calendar"></span>
+                    </span>
+                </div>
+            </div>
+
+            <input name="from" id="from-unixtime" type="hidden" class="form-control"/>
+            <input name="to" id="to-unixtime" type="hidden" class="form-control"/>
+
+            <div class="form-group picker" style="width: 25%">
+                <button type="submit" id="pickerButton" type="button" class="btn bg-olive btn-flat margin" style="margin: 0px 20px;"><i class="fa fa-search" aria-hidden="true"></i>&nbsp;&nbsp;{{ 'picker_find'|trans({}, 'StatsBundle') }}</button>
+            </div>
+    </div>
+</form>
+
+<script type="text/javascript">
+
+    $(function () {
+        var from = {{from}};
+        var to = {{to}};
+
+        $('#datetimepicker6').datetimepicker({
+            defaultDate: new Date(from * 1000),
+            format: 'YYYY-MM-DD HH:mm'
+        });
+        $('#datetimepicker7').datetimepicker({
+            defaultDate: new Date(to * 1000),
+            format: 'YYYY-MM-DD HH:mm'
+        });
+        $('#from-unixtime').val(from)
+        $('#to-unixtime').val(to)
+        
+        $("#datetimepicker6").on("dp.change", function (e) {
+            date = (e.date._d.getTime() / 1000).toFixed(0);
+            $("#from-unixtime").val(date);
+        });
+        $("#datetimepicker7").on("dp.change", function (e) {
+            date = (e.date._d.getTime() / 1000).toFixed(0);
+            $("#to-unixtime").val(date);
+        });
+        
+    });
+</script>

src/StatsBundle/Resources/views/Stats/show_onu.html.twig

@@ -2,39 +2,54 @@
     <br />
     <div class="box-body">
         <div class="col-sm-3">
-            {% include '@Stats/Stats/Template/onu_info.html.twig' %}
+            {% include '@Stats/Stats/Template/onu_info_1.html.twig' %}
         </div>
         <div class="col-sm-4">
-            {% include '@Stats/Stats/Template/olt_info.html.twig' %}
+            {% include '@Stats/Stats/Template/onu_info_2.html.twig' %}
         </div>
         <div class="col-sm-5">
             {% include '@Stats/Stats/Template/onu_location.html.twig' %}
         </div>
     </div>
+
     <div class="box-body">
-        <div class="col-sm-6"></div>
-        <div class="col-sm-6"></div>
+        <div class="col-sm-9" style="text-align:center">
+            <div id="onu_bandwidth" style="height: 400px;"></div>
+            <span class="no_defined nas_data_origen">{{ 'nas_data_origen'|trans({}, 'StatsBundle') }}</span>
+        </div>
+        <div class="col-sm-3">
+            {% include '@Stats/Stats/Template/onu_bandwidth_info.html.twig' %}
+        </div>
+    </div>
+
+    <div class="box-body">
+        <div class="col-sm-9" style="text-align:center">
+            <div id="onu_consumption" style="height: 400px;"></div>
+            <span class="no_defined nas_data_origen">{{ 'nas_data_origen'|trans({}, 'StatsBundle') }}</span>
+        </div>
+        <div class="col-sm-3">
+            {% include '@Stats/Stats/Template/onu_consumption_info.html.twig' %}
+        </div>
     </div>
 
     <div class="row">
         <div class="col-md-12">
-            <div id="olt_onu_bandwidth" style="height: 400px;"></div>
-
-            <div id="olt_onu_rf" style="height: 400px;"></div>
+            
+            <div id="onu_rf" style="height: 400px;"></div>
 
             <div class="clearfix" style="width: 100%; background-color:white; padding:0 5px">
-                <div id="olt_onu_voltage" style="height: 400px; float: left; width:49%"></div>
-                <div id="olt_onu_temperature" style="height: 400px; float: right; width:49%"></div>
+                <div id="onu_voltage" style="height: 400px; float: left; width:49%"></div>
+                <div id="onu_temperature" style="height: 400px; float: right; width:49%"></div>
             </div>
 
-            <div id="olt_onu_status" style="height: 400px;"></div>
+            <div id="onu_status" style="height: 400px;"></div>
         </div>
     </div>
 </div>
 
 <script type="text/javascript">
 
-Highcharts.chart('olt_onu_bandwidth', {
+Highcharts.chart('onu_bandwidth', {
     chart: {type: 'spline'},
     title: {text: 'Bandwidth ONU'},
     subtitle: {text: 'IN Bandwidth / OUT Bandwidth'},
@@ -43,17 +58,46 @@ Highcharts.chart('olt_onu_bandwidth', {
     tooltip: {formatter: bandwidthTooltip},
     plotOptions: {spline: {marker: {enabled: true}}},
     series: [{
+        name: "IN Bandwidth",
+        data: {{series['in_bandwidth']['data']|json_encode}},
+        color: '#3f6833'
+        },{
         name: "OUT Bandwidth",
         data: {{series['out_bandwidth']['data']|json_encode}},
         color: '#e24d42'
-        },{
-        name: "IN Bandwidth",
-        data: {{series['in_bandwidth']['data']|json_encode}},
+    }],
+    lang: {
+        noData: "Nichts zu anzeigen"
+    },
+    noData: {
+        style: {
+            fontWeight: 'bold',
+            fontSize: '15px',
+            color: '#303030'
+        }
+    }
+});
+
+Highcharts.chart('onu_consumption', {
+    chart: {type: 'area'},
+    title: {text: 'Consumption ONU'},
+    subtitle: {text: 'IN Consumption / OUT Consumption'},
+    xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
+    yAxis: {labels: {formatter: consumptionAxisLabel,align: 'left'},min: 0},
+    tooltip: {formatter: consumptionTooltip},
+    plotOptions: {spline: {marker: {enabled: true}}},
+    series: [{
+        name: "IN Consumption",
+        data: {{series['in_consumption']['data']|json_encode}},
         color: '#3f6833'
+        },{
+        name: "OUT Consumption",
+        data: {{series['out_consumption']['data']|json_encode}},
+        color: '#e24d42'
     }]
 });
 
-Highcharts.chart('olt_onu_rf', {
+Highcharts.chart('onu_rf', {
     chart: {type: 'area'},
     title: {text: 'Radio Frequency'},
     subtitle: {text: 'TX /RX Power'},
@@ -74,14 +118,15 @@ Highcharts.chart('olt_onu_rf', {
     }]
 });
 
-Highcharts.chart('olt_onu_voltage', {
+Highcharts.chart('onu_voltage', {
     chart: {type: 'area'},
     title: {text: 'Voltage'},
-    subtitle: {text: 'Voltage'},
+    subtitle: {},
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {labels: {format: '{value} V'},min: 0},
     tooltip: {valueSuffix: ' V',valueDecimals: 2},
     plotOptions: {spline: {marker: {enabled: true}}},
+    legend: {enabled: false},
     series: [{
         name: "Voltage",
         data: {{series['voltage']['data']|json_encode}},
@@ -90,14 +135,15 @@ Highcharts.chart('olt_onu_voltage', {
     }]
 });
 
-Highcharts.chart('olt_onu_temperature', {
+Highcharts.chart('onu_temperature', {
     chart: {type: 'area'},
     title: {text: 'Temperature'},
-    subtitle: {text: 'Temperature'},
+    subtitle: {},
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {labels: {format: '{value} ºC'},min: 0},
     tooltip: {valueSuffix: ' ºC',valueDecimals: 2},
     plotOptions: {spline: {marker: {enabled: true}}},
+    legend: {enabled: false},
     series: [{
         name: "Temperature",
         data: {{series['temperature']['data']|json_encode}},
@@ -106,7 +152,7 @@ Highcharts.chart('olt_onu_temperature', {
     }]
 });
 
-Highcharts.chart('olt_onu_status', {
+Highcharts.chart('onu_status', {
     chart: {type: 'area'},
     title: {text: 'Estatus'},
     subtitle: {text: 'Online / Offline'},
@@ -114,8 +160,10 @@ Highcharts.chart('olt_onu_status', {
     yAxis: { categories: ['Offline', 'Online'], min: 0,stackLabels: {enabled: true,style: {fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'}}},
     tooltip: {formatter: onuStatusTooltip},
     plotOptions: {column: {stacking: 'normal',dataLabels: {enabled: true,color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'}}},
+    legend: {enabled: false},
     series: [{
         name: 'Status',
+        step: 'right',
         data: {{series['status']['data']|json_encode}},
         color: '#3f6833'
     }]