Se define un nuevo estilo visual para las gráficas mediante un Highcharts.theme y se modifican los puntos en las líneas de las gráficas, solo se muestran si se filtra por 6 horas de diferencia, caso contrario eran muchos puntos sobre las líneas de las gráficas.

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

@@ -1,3 +1,69 @@
+Highcharts.createElement('link', {
+    href: 'https://fonts.googleapis.com/css?family=Dosis:400,600',
+    rel: 'stylesheet',
+    type: 'text/css'
+}, null, document.getElementsByTagName('head')[0]);
+
+Highcharts.theme = {
+    colors: ['#7cb5ec', '#f7a35c', '#90ee7e', '#7798BF', '#aaeeee', '#ff0066',
+        '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
+    chart: {
+        backgroundColor: null,
+        style: {
+            fontFamily: 'Dosis, sans-serif'
+        }
+    },
+    title: {
+        style: {
+            fontSize: '16px',
+            fontWeight: 'bold',
+            textTransform: 'uppercase'
+        }
+    },
+    tooltip: {
+        borderWidth: 0,
+        backgroundColor: 'rgba(219,219,216,0.8)',
+        shadow: false
+    },
+    legend: {
+        itemStyle: {
+            fontWeight: 'bold',
+            fontSize: '13px'
+        }
+    },
+    xAxis: {
+        gridLineWidth: 1,
+        labels: {
+            style: {
+                fontSize: '12px'
+            }
+        }
+    },
+    yAxis: {
+        minorTickInterval: 'auto',
+        title: {
+            style: {
+                textTransform: 'uppercase'
+            }
+        },
+        labels: {
+            style: {
+                fontSize: '12px'
+            }
+        }
+    },
+    plotOptions: {
+        candlestick: {
+            lineColor: '#404048'
+        }
+    },
+    // General
+    background2: '#F0F0EA'
+};
+
+Highcharts.setOptions(Highcharts.theme);
+
+
 var months = new Array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
 var shortMonths = new Array('Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic');
 var weekdays = new Array('Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado');

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

@@ -328,14 +328,14 @@ Highcharts.chart('cmts_signals', {
         type:'linear',
         title: {
             enabled: true,
-            text: 'TX Power'
+            text: 'TX'
         },
         crosshair: true
     },
     yAxis: {
         title: {
             enabled: true,
-            text: 'RX Power'
+            text: 'RX'
         },
         crosshair: true,
     },

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

@@ -93,6 +93,13 @@
 
 <script type="text/javascript">
 
+var from = {{from}};
+var to = {{to}};
+var markerEnable = false;
+if((to - from) <= 21600) {
+    markerEnable = true;
+}
+
 Highcharts.chart('interface_bandwidth', {
     chart: {type: 'spline'},
     title: {text: 'Bandwidth Interface'},
@@ -100,7 +107,7 @@ Highcharts.chart('interface_bandwidth', {
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {labels: {formatter: bandwidthAxisLabel,align: 'left'},min: 0},
     tooltip: {formatter: bandwidthTooltip},
-    plotOptions: {series: {dataLabels: {enabled: false, color: '#666666', formatter: bandwidthDataLabel}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}, dataLabels: {enabled: false, color: '#666666', formatter: bandwidthDataLabel}}},
     series: [{
         name: "OUT Bandwidth",
         data: {{series['out_bandwidth']['data']|json_encode}},
@@ -119,7 +126,7 @@ Highcharts.chart('interface_rf', {
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {labels: {format: '{value} dB'},min: 0},
     tooltip: {valueSuffix: ' dB',valueDecimals: 2},
-    plotOptions: {series: {dataLabels: {enabled: false, color: '#666666'}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}, dataLabels: {enabled: false, color: '#666666'}}},
     legend: {enabled: false},
     series: [{
         name: "SNR",
@@ -136,7 +143,7 @@ Highcharts.chart('interface_cm', {
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {min: 0,stackLabels: {enabled: false,style: {fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'}}},
     tooltip: {valueSuffix: ' cm',valueDecimals: 0},
-    plotOptions: {area: {stacking: 'normal', dataLabels: {enabled: false, color: '#666666'}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}}, area: {stacking: 'normal', dataLabels: {enabled: false, color: '#666666'}}},
     series: [{
         name: 'Online',
         data: {{series['on']['data']|json_encode}},
@@ -177,7 +184,7 @@ Highcharts.chart('interface_cer', {
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {labels: {format: '{value} %'},min: 0},
     tooltip: {valueSuffix: ' %',valueDecimals: 6},
-    plotOptions: {series: {dataLabels: {enabled: false, color: '#666666'}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}, dataLabels: {enabled: false, color: '#666666'}}},
     legend: {enabled: false},
     series: [{
         name: "CER",
@@ -194,7 +201,7 @@ Highcharts.chart('interface_errors', {
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {labels: {format: '{value}'},min: 0},
     tooltip: {valueSuffix: ' codewords',valueDecimals: 0},
-    plotOptions: {series: {dataLabels: {enabled: false, color: '#666666'}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}, dataLabels: {enabled: false, color: '#666666'}}},
     series: [
         {
         name: "Correcteds",
@@ -218,7 +225,7 @@ Highcharts.chart('interface_utilization', {
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {labels: {align: 'left'},min: 0},
     tooltip: {valueSuffix: ' %',valueDecimals: 2},
-    plotOptions: {spline: {marker: {enabled: true}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
     series: [
         {% for u in utilizations %}
         {

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

@@ -49,6 +49,13 @@
 
 <script type="text/javascript">
 
+var from = {{from}};
+var to = {{to}};
+var markerEnable = false;
+if((to - from) <= 21600) {
+    markerEnable = true;
+}
+
 Highcharts.chart('onu_bandwidth', {
     chart: {type: 'spline'},
     title: {text: 'Bandwidth ONU'},
@@ -56,7 +63,7 @@ Highcharts.chart('onu_bandwidth', {
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {labels: {formatter: bandwidthAxisLabel,align: 'left'},min: 0},
     tooltip: {formatter: bandwidthTooltip},
-    plotOptions: {spline: {marker: {enabled: true}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
     series: [{
         name: "IN Bandwidth",
         data: {{series['in_bandwidth']['data']|json_encode}},
@@ -85,7 +92,7 @@ Highcharts.chart('onu_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}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
     series: [{
         name: "IN Consumption",
         data: {{series['in_consumption']['data']|json_encode}},
@@ -104,7 +111,7 @@ Highcharts.chart('onu_rf', {
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     yAxis: {labels: {format: '{value} dB'},min: null},
     tooltip: {valueSuffix: ' dB',valueDecimals: 2},
-    plotOptions: {spline: {marker: {enabled: true}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
     series: [{
         name: "TX Power",
         data: {{series['tx']['data']|json_encode}},
@@ -125,7 +132,7 @@ Highcharts.chart('onu_voltage', {
     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}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
     legend: {enabled: false},
     series: [{
         name: "Voltage",
@@ -142,7 +149,7 @@ Highcharts.chart('onu_temperature', {
     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}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}}, spline: {marker: {enabled: true}}},
     legend: {enabled: false},
     series: [{
         name: "Temperature",
@@ -159,7 +166,7 @@ Highcharts.chart('onu_status', {
     xAxis: {type: 'datetime',dateTimeLabelFormats: {month: '%e. %b',year: '%b'},title: {text: 'Date'}},
     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'}}},
+    plotOptions: {series: {marker: {enabled: markerEnable}}, column: {stacking: 'normal',dataLabels: {enabled: true,color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'}}},
     legend: {enabled: false},
     series: [{
         name: 'Status',