O simple-dashboard é um componente que permite trabalhar com gráficos. Com ele é possível criar mapas, cartões, pizzas, barras, linhas entre outros.
Se caso for utilizar mapas, é necessário adicionar ao seu projeto o respectivo mapa desejado. Os mesmos podem ser importados da seguinte
// npm
npm i gumga-tree-ng --save
// Importação das dependências do componente pelo npm
//-------------------------------------------------------------//
<script src="node_modules/gumga-tree-ng/dist/simple-dashboard.min.js"></script>
<link rel="stylesheet" href="node_modules/simple-dashboard/dist/simple-dashboard.min.js">
<div id="chart" style="margin: 50px;"></div>
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var table = new mf.Chart.Bar(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Chart.BarLine(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var bar = new mf.Chart.BarLinePie(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Card.CardFive(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Card.CardFour(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Card.CardOne(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Card.CardTwo(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Feed.FeedOne(document.getElementById('feed'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Chart.GaugeV1(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Chart.GaugeV2(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var table = new mf.Iframe.IframeOne(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var table = new mf.Image.ImageOne(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Add lower case codes to the data set for inclusion in the tooltip.pointFormat
$.each(data, function () {
this.flag = this.code.replace('UK', 'GB').toLowerCase();
});
$timeout(function() {
var maps = new mf.Chart.Maps(document.getElementById('chart'), {
title: {
text: 'Fixed tooltip with HTML'
},
legend: {
title: {
text: 'Population density per km²',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
padding: 0,
pointFormat: '<span class="f32"><span class="flag {point.flag}">' +
'</span></span> {point.name}<br>' +
'<span style="font-size:30px">{point.value}/km²</span>',
positioner: function () {
return { x: 0, y: 250 };
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series: [{
data: data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#a4edba'
}
}
}]
});
}, 1000)
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Chart.Line(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var card = new mf.Chart.Pie(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var table = new mf.Table.TableOne(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var table = new mf.Text.TextOne(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
angular.module('app', [])
.controller('ctrl', function($http){
function getBoard(id){
$http.get('https://gumga.studio/dashboard-api/api/boards/get-board-data/'+id+'?gumgaToken=algumToken')
.then(function(resp){
var table = new mf.Youtube.YoutubeOne(document.getElementById('chart'), resp.data.data, resp.data);
});
}
getBoard(298);
})
Ao criar uma instância de algum objeto pertencente ao simple-dashboard, é necessário definir três parâmetros. O primeiro é o HTMLElement, o segundo identifica o RecordSet e o terceiro é um objeto do tipo Configuration.
Exemplo:
var recordSet = {
"columns": [
"qnt"
],
"labels": [],
"positions": [],
"icons": [],
"colors": [],
"fontColors": [],
"rows": [
[
61
]
],
"columnFormats": [],
"fontFamily": [],
"message": null,
"identifier": null,
"types": [
"Number"
]
};
var Configuration = {
"type": "StudioBoardGaugeV1",
"id": 851,
"oi": {
"value": "7."
},
"gumgaOrganizations": ",,,",
"gumgaUsers": ",,,",
"title": "Gauge",
"refreshInterval": "5m",
"visibleDevices": [
{
"id": 4713,
"oi": {
"value": "7."
},
"device": "MOBILE",
"visible": true
},
{
"id": 4714,
"oi": {
"value": "7."
},
"device": "DESKTOP",
"visible": true
},
{
"id": 4715,
"oi": {
"value": "7."
},
"device": "LAPTOP",
"visible": true
},
{
"id": 4716,
"oi": {
"value": "7."
},
"device": "TABLET",
"visible": true
}
],
"positions": [
{
"id": 17640,
"oi": {
"value": "7."
},
"col": 0,
"row": 0,
"sizeX": 5,
"sizeY": 21,
"device": "DESKTOP"
},
{
"id": 17441,
"oi": {
"value": "7."
},
"col": 0,
"row": 0,
"sizeX": 12,
"sizeY": 17,
"device": "MOBILE"
}
],
"quickFilterActives": [],
"data": {
"columns": [
"qnt"
],
"labels": [],
"positions": [],
"icons": [],
"colors": [],
"fontColors": [],
"rows": [
[
61
]
],
"columnFormats": [],
"fontFamily": [],
"message": null,
"identifier": null,
"types": [
"Number"
]
},
"conditionalsFormatting": [
{
"type": "StudioBoardGaugeConditionalFormatting",
"id": 301,
"oi": {
"value": "7."
},
"sequence": null,
"field": null,
"condition": null,
"value": null,
"color": {
"value": "#000000"
}
}
],
"boardAlerts": [],
"triggeredAlerts": [],
"presentationParameterBoardActives": [],
"lastUpdate": "2017-12-08T13:01:28Z",
"showlastUpdate": false,
"information": null,
"boardFontSize": "SMALL",
"dynamicColumns": false,
"timeToReturnData": 0,
"style": null,
"minimumValue": {
"id": 2423,
"oi": {
"value": "7."
},
"name": null,
"type": null,
"format": null,
"formatPrecision": null,
"label": null,
"icon": null,
"color": null,
"fontColor": null,
"iconColor": null,
"fontFamily": null,
"displayOrder": -1,
"title": null,
"sequence": null,
"description": null,
"value": "0",
"operation": null
},
"currentValue": {
"id": 2421,
"oi": {
"value": "7."
},
"name": "qnt",
"type": null,
"format": "moeda",
"formatPrecision": 3,
"label": "Qnt",
"icon": null,
"color": null,
"fontColor": null,
"iconColor": null,
"fontFamily": null,
"displayOrder": -1,
"title": null,
"sequence": null,
"description": null,
"value": null,
"operation": null
},
"maximumValue": {
"id": 2422,
"oi": {
"value": "7."
},
"name": null,
"type": null,
"format": null,
"formatPrecision": null,
"label": null,
"icon": null,
"color": null,
"fontColor": null,
"iconColor": null,
"fontFamily": null,
"displayOrder": -1,
"title": null,
"sequence": null,
"description": null,
"value": "100",
"operation": null
},
"fixedValue": true,
"beginningColor": "#5cb85c",
"middleColor": "#f0ad4e",
"endColor": "#d9534f"
}
var chart = new mf.Chart.GaugeV1(document.getElementById('chart'), recordSet, configuration);