Descrição

O simple-dashboard é um componente que permite trabalhar com gráficos. Com ele é possível criar mapas, cartões, pizzas, barras, linhas entre outros.

Observações

Se caso for utilizar mapas, é necessário adicionar ao seu projeto o respectivo mapa desejado. Os mesmos podem ser importados da seguinte

Instalação

// 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">
          
        
Como utilizar
<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);
})
Atributos

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.

  • HTMLElement: elemento HTML onde será aplicado o gráfico
  • RecordSet: Os dados que serão aplicados no gráfico
  • Configuration: A configuração que pode ser feita no gráfico

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);