diff --git a/web/app/index.html b/web/app/index.html
index 7fe41e1244cebfde88b3902c495c1d1b68db759b..f17641a159c9d8facb5db99f33116d7de2782d15 100644
--- a/web/app/index.html
+++ b/web/app/index.html
@@ -9,7 +9,7 @@
</head>
<body ng-controller="MainCtrl">
<div class="brasil-bar-container">
- <div class="bar">
+ <div class="bar">
<ul>
<li><a href="http://www.acessoainformacao.gov.br" class="ai" title="Acesso à informação"></a></li>
<li><a href="http://www.brasil.gov.br" class="brasilgov" title="Portal de Estado do Brasil"></a></li>
@@ -98,7 +98,7 @@
</div>
</div>
</div>
- </div>
+ </div>
<!--License-->
<div class="span-26" id="license">
@@ -113,6 +113,8 @@
<script src="components/angular-resource/angular-resource.js"></script>
<script src="components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="components/highcharts/highcharts.js"></script>
+ <script src="js/global.js"></script>
+ <script src="js/default-charts.js"></script>
<script src="js/app.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
diff --git a/web/app/js/controllers.js b/web/app/js/controllers.js
index ed9ea412ef28cd65f90e868251afb7374e4c1621..a0a67c7be6c169b6970d9131a0dd7e044b42a921 100644
--- a/web/app/js/controllers.js
+++ b/web/app/js/controllers.js
@@ -52,125 +52,108 @@ angular.module('datasid.controllers', []).
$scope.bigButtons.order = "";
}).
- controller('AttendanceCtrl', function ($scope, $rootScope, AttendanceFactory) {
+ controller('InstallCtrl', function ($scope, $rootScope) {
+ $scope.bigButtons.collapsed = true;
+ $scope.bigButtons.rowClass = "medium";
+ $scope.bigButtons.order = "-active";
+
+ $scope.useProxy = false;
+ }).
+
+ controller('DocCtrl', function ($scope, $rootScope) {
+ $scope.bigButtons.collapsed = true;
+ $scope.bigButtons.rowClass = "light";
+ $scope.bigButtons.order = "-active";
+ }).
+
+ controller('AttendanceCtrl', function ($scope, $rootScope) {
$scope.bigButtons.collapsed = true;
$scope.bigButtons.rowClass = "dark";
$scope.bigButtons.order = "-active";
+ }).
+
+ controller('AvailCtrl', function ($scope, $rootScope, $state, $location, AvailFactory) {
+ if (typeof $state.params.city !== 'undefined')
+ $state.params.level = 3;
+ else if (typeof $state.params.state !== 'undefined')
+ $state.params.level = 2;
+ else if (typeof $state.params.region !== 'undefined')
+ $state.params.level = 1;
+ else
+ $state.params.level = 0;
$scope.barChart = {
render: function (element) {
- $scope.barChart.chart = new Highcharts.Chart({
- chart: {
- renderTo: element[0],
- backgroundColor: null,
- height: '300',
- defaultSeriesType: 'column'
- },
- colors: [
- '#a9c33c',
- '#eeba28',
- '#c3252e'
- ],
- title: {
- text: ''
- },
- loading: {
- labelStyle: {
- top: '45%',
- }
- },
- xAxis: {
- categories: [],
- labels: {
- style: {
- fontSize: '11px'
- },
- formatter: function() {
- return '<a onclick="Charts.click(\''+this.value+'\');" style="color: #08C; cursor: pointer">' + this.value + '</a>';
- },
- },
- },
- yAxis: {
- min: 0,
- title: {
- text: 'Número de Máquinas'
- },
- labels: {
- formatter: function() {
- // return formatNumber(this.value);
- return this.value;
- }
- }
- },
- credits: {
- enabled: false
- },
- legend: {
- enabled: false
- },
- tooltip: {
- shared: true,
- formatter: function() {
- var s = '<b>'+ this.x +'</b>';
-
- for (var i = 0; i < this.points.length; i++) {
- var point = this.points[i];
- s += '<br/><span>' +
- point.series.name + '</span>: ' + formatNumber(point.y) + ' máquinas';
- };
-
- return s;
- },
- positioner: function() {
- return {x: 2, y: 2};
- }
- },
- plotOptions: {
- series: {
- groupPadding: 0.15,
- pointPadding: 0,
- cursor: 'pointer',
- events: {
- click: function(event) {
- var cat = event.point.category;
- Charts.click(event.point.category);
- }
- }
- }
- },
- series: []
- });
+ var config = DefaultCharts.barChart;
+ config.chart.renderTo = element[0];
+ config.plotOptions.series.events = {
+ click: function(event) {
+ $scope.$apply(function () {
+ $location.path($location.path() + '/' + event.point.category);
+ });
+ }
+ };
+ $scope.barChart.chart = new Highcharts.Chart(config);
$scope.barChart.load();
},
load: function () {
- AttendanceFactory.get(function (data) {
+ var options = $state.params;
+ options.type = 'bar';
+
+ AvailFactory.get(options, function (data) {
$scope.barChart.chart.xAxis[0].setCategories(data.categories);
- $scope.barChart.chart.addSeries({
- data: data.green
- });
- $scope.barChart.chart.addSeries({
- data: data.yellow
- });
- $scope.barChart.chart.addSeries({
- data: data.red
- });
+ $scope.barChart.chart.series[0].setData(data.green);
+ $scope.barChart.chart.series[1].setData(data.yellow);
+ $scope.barChart.chart.series[2].setData(data.red);
});
}
};
- }).
- controller('InstallCtrl', function ($scope, $rootScope) {
- $scope.bigButtons.collapsed = true;
- $scope.bigButtons.rowClass = "medium";
- $scope.bigButtons.order = "-active";
+ $scope.pieChart = {
+ render: function (element) {
+ var config = DefaultCharts.pieChart;
+ config.chart.renderTo = element[0];
- $scope.useProxy = false;
- }).
+ $scope.pieChart.chart = new Highcharts.Chart(config);
+ $scope.pieChart.load();
+ },
- controller('DocCtrl', function ($scope, $rootScope) {
- $scope.bigButtons.collapsed = true;
- $scope.bigButtons.rowClass = "light";
- $scope.bigButtons.order = "-active";
- });
\ No newline at end of file
+ load: function () {
+ var options = $state.params;
+ options.type = 'pie';
+
+ 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]]
+ ]);
+ });
+ }
+ };
+
+ $scope.histChart = {
+ render: function (element) {
+ console.log(element[0]);
+ var config = DefaultCharts.histChart;
+ config.chart.renderTo = element[0];
+
+ $scope.histChart.chart = new Highcharts.Chart(config);
+ $scope.histChart.load();
+ },
+
+ load: function () {
+ var options = $state.params;
+ options.type = 'hist';
+
+ AvailFactory.get(options, function (data) {
+ $scope.histChart.chart.xAxis[0].setCategories(data.categories);
+ $scope.histChart.chart.series[0].setData(data.green);
+ $scope.histChart.chart.series[1].setData(data.yellow);
+ $scope.histChart.chart.series[2].setData(data.red);
+ });
+ }
+ };
+ });
diff --git a/web/app/js/default-charts.js b/web/app/js/default-charts.js
new file mode 100644
index 0000000000000000000000000000000000000000..2e05e648a3a448a6b1943d831b104b9ae4ee3ce7
--- /dev/null
+++ b/web/app/js/default-charts.js
@@ -0,0 +1,203 @@
+var DefaultCharts = {
+ barChart: {
+ chart: {
+ backgroundColor: null,
+ height: '300',
+ defaultSeriesType: 'column'
+ },
+ colors: [
+ '#a9c33c',
+ '#eeba28',
+ '#c3252e',
+ ],
+ title: {
+ text: ''
+ },
+ loading: {
+ labelStyle: {
+ top: '45%',
+ }
+ },
+ xAxis: {
+ categories: [],
+ labels: {
+ style: {
+ fontSize: '11px'
+ },
+ formatter: function() {
+ return '<a onclick="Charts.click(\''+this.value+'\');" style="color: #08C; cursor: pointer">' + this.value + '</a>';
+ },
+ },
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'Número de Máquinas'
+ },
+ labels: {
+ formatter: function() {
+ return formatNumber(this.value);
+ }
+ }
+ },
+ credits: {
+ enabled: false
+ },
+ legend: {
+ enabled: false
+ },
+ tooltip: {
+ shared: true,
+ formatter: function() {
+ var s = '<b>'+ this.x +'</b>';
+
+ for (var i = 0; i < this.points.length; i++) {
+ var point = this.points[i];
+ s += '<br/><span>' +
+ point.series.name + '</span>: ' + formatNumber(point.y) + ' máquinas';
+ };
+
+ return s;
+ },
+ positioner: function() {
+ return {x: 2, y: 2};
+ }
+ },
+ plotOptions: {
+ series: {
+ groupPadding: 0.15,
+ pointPadding: 0,
+ cursor: 'pointer'
+ }
+ },
+ series: [
+ {name: 'Menos de 10 dias'},
+ {name: 'Entre 11 e 30 dias'},
+ {name: 'Mais de 30 dias'}
+ ]
+ },
+
+ pieChart: {
+ chart: {
+ type: 'pie',
+ backgroundColor: null,
+ height: '300',
+ },
+ colors: [
+ '#a9c33c',
+ '#eeba28',
+ '#c3252e',
+ ],
+ title: {
+ text: ''
+ },
+ loading: {
+ labelStyle: {
+ top: '45%',
+ }
+ },
+ credits: {
+ enabled: false
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>' + this.key.replace('\\', ' ') + '</b><br/>' + formatNumber(this.y) + ' máquinas'
+ }
+ },
+ plotOptions: {
+ pie: {
+ dataLabels: {
+ enabled: true,
+ distance: 5,
+ connectorWidth: 0,
+ formatter: function() {
+ return '<b>'+ this.point.name.split('\\').join('</b><br/><b>') +
+ '</b><br/>' + Math.round(this.percentage) + '%';
+ }
+ }
+ }
+ },
+ series: [
+ {data: [
+ ['Menos de 10 dias', 0],
+ ['Entre 11 e 30 dias', 0],
+ ['Mais de 30 dias', 0]
+ ]}
+ ]
+ },
+
+ histChart: {
+ chart: {
+ type: 'line',
+ backgroundColor: null,
+ height: '300',
+ },
+ colors: [
+ '#a9c33c',
+ '#eeba28',
+ '#c3252e',
+ ],
+ title: {
+ text: 'Histórico dos Últimos 6 meses'
+ },
+ loading: {
+ labelStyle: {
+ top: '45%',
+ }
+ },
+ xAxis: {
+ categories: []
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'Número de Máquinas'
+ },
+ labels: {
+ formatter: function() {
+ return formatNumber(this.value);
+ }
+ }
+ },
+ credits: {
+ enabled: false
+ },
+ tooltip: {
+ crosshairs: {
+ width: 2,
+ color: 'gray',
+ dashStyle: 'shortdot'
+ },
+ formatter: function() {
+ var s = '<b>'+ this.x +'</b>';
+
+ for (var i = 0; i < this.points.length; i++) {
+ var point = this.points[i];
+ s += '<br/><span>' +
+ point.series.name + '</span>: ' + formatNumber(point.y) + ' máquinas';
+ };
+
+ return s;
+ },
+ positioner: function () {
+ return { x: 10, y: 10 };
+ },
+ shared: true
+ },
+ plotOptions: {
+ series: {
+ groupPadding: 0.05
+ }
+ },
+ legend: {
+ layout: 'vertical',
+ itemMarginTop: 3,
+ itemMarginBottom: 3
+ },
+ series: [
+ {name: 'Menos de 10 dias'},
+ {name: 'Entre 11 e 30 dias'},
+ {name: 'Mais de 30 dias'}
+ ]
+ }
+};
\ No newline at end of file
diff --git a/web/app/js/global.js b/web/app/js/global.js
new file mode 100644
index 0000000000000000000000000000000000000000..f62f5175034bdfc37e4d880289982c1baa842dc8
--- /dev/null
+++ b/web/app/js/global.js
@@ -0,0 +1,37 @@
+function formatNumber(number)
+{
+ var nStr = number.toFixed(0);
+ x = nStr.split('.');
+ x1 = x[0];
+ x2 = x.length > 1 ? '.' + x[1] : '';
+ var rgx = /(\d+)(\d{3})/;
+ while (rgx.test(x1)) {
+ x1 = x1.replace(rgx, '$1' + '.' + '$2'); // changed comma to dot here
+ }
+ return x1 + x2;
+}
+
+function formatKBits(kbits)
+{
+ var unit = ' Kbps';
+
+ if (kbits >= 1000) {
+ unit = ' Mbps';
+ kbits = kbits / 1024;
+ }
+
+ if (kbits >= 1000) {
+ unit = ' Gbps';
+ kbits = kbits / 1024;
+ }
+
+ var nStr = kbits.toFixed(2);
+ x = nStr.split('.');
+ x1 = x[0];
+ x2 = ((parseInt(x[1]) != 0) && (x.length > 1)) ? '.' + x[1] : '';
+ var rgx = /(\d+)(\d{3})/;
+ while (rgx.test(x1)) {
+ x1 = x1.replace(rgx, '$1' + '.' + '$2'); // changed comma to dot here
+ }
+ return x1 + x2 + unit;
+}
\ No newline at end of file
diff --git a/web/app/partials/attendance.availability.html b/web/app/partials/attendance.availability.html
index e723f8f612a94c56189a47a107f9208f936e9f3a..b71d36ef938a764750d5ff5ce18c4a19971a81d0 100644
--- a/web/app/partials/attendance.availability.html
+++ b/web/app/partials/attendance.availability.html
@@ -2,4 +2,6 @@
<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">
\ No newline at end of file
+<div mc-chart="barChart"></div>
+<div mc-chart="pieChart"></div>
+<div mc-chart="histChart"></div>
\ No newline at end of file