web: Fix charts style (position, width and legend text)

Signed-off-by: Eduardo L. Buratti <elb09@c3sl.ufpr.br>

web/app/js/controllers.js

@@ -126,9 +126,9 @@ angular.module('datasid.controllers', []).
 
                 AvailFactory.get(options, function (data) {
                     $scope.pieChart.chart.series[0].setData([
-                        ['Menos de 10 dias', data.green[0]],
-                        ['Entre 11 e 30 dias', data.yellow[0]],
-                        ['Mais de 30 dias', data.red[0]]
+                        ['Menos de\n10 dias', data.green[0]],
+                        ['Entre 11\ne 30 dias', data.yellow[0]],
+                        ['Mais de\n30 dias', data.red[0]]
                     ]);
                 });
             }

web/app/js/default-charts.js

@@ -101,7 +101,7 @@ var DefaultCharts = {
         },
         tooltip: {
             formatter: function() {
-                return '<b>' + this.key.replace('\\', ' ') + '</b><br/>' + formatNumber(this.y) + ' máquinas'
+                return '<b>' + this.key.replace('\n', ' ') + '</b><br/>' + formatNumber(this.y) + ' máquinas'
             }
         },
         plotOptions: {
@@ -111,7 +111,7 @@ var DefaultCharts = {
                     distance: 5,
                     connectorWidth: 0,
                     formatter: function() {
-                        return '<b>'+ this.point.name.split('\\').join('</b><br/><b>') +
+                        return '<b>'+ this.point.name.split('\n').join('</b><br/><b>') +
                                '</b><br/>' + Math.round(this.percentage) + '%';
                     }
                 }
@@ -119,9 +119,9 @@ var DefaultCharts = {
         },
         series: [
             {data: [
-                ['Menos de 10 dias', 0],
-                ['Entre 11 e 30 dias', 0],
-                ['Mais de 30 dias', 0]
+                ['Menos de\n10 dias', 0],
+                ['Entre 11\ne 30 dias', 0],
+                ['Mais de\n30 dias', 0]
             ]}
         ]
     },
@@ -195,9 +195,9 @@ var DefaultCharts = {
             itemMarginBottom: 3
         },
         series: [
-            {name: 'Menos de 10 dias'},
-            {name: 'Entre 11 e 30 dias'},
-            {name: 'Mais de 30 dias'}
+            {name: 'Último contato há menos de 10 dias'},
+            {name: 'Último contato entre 11 e 30 dias'},
+            {name: 'Último contato há mais de 30 dias'}
         ]
     }
 };
\ No newline at end of file

web/app/partials/attendance.availability.html

@@ -2,6 +2,10 @@
 <p>Análise das máquinas com o agente de coleta instalado.</p>
 <p>Clique no gráfico de barras para visualizar a situação das máquinas no próximo nível.</p>
 
-<div mc-chart="barChart"></div>
-<div mc-chart="pieChart"></div>
-<div mc-chart="histChart"></div>
+<div class="row">
+    <div class="col-lg-6" style="height: 300px" mc-chart="barChart"></div>
+    <div class="col-lg-6" style="height: 300px" mc-chart="pieChart"></div>
\ No newline at end of file
+</div>
+<div class="row">
+    <div class="col-lg-10 col-lg-offset-1" style="height: 300px" mc-chart="histChart"></div>
+</div>
\ No newline at end of file

web/assets/less/attendance.less

@@ -104,5 +104,6 @@
 }
 
 .attendance-content {
+    width: 700px;
     float: left;
 }
\ No newline at end of file