Introducción

El Gadget Template es una tipo de Gadget que nos da la libertad de poder crear cualquier tipo de gadget a partir de código HTML, CSS y JavaScript, podremos obtener los datos de un datasource o de llamadas a un API por Ajax por ejemplo y podremos utilizar cualquier librería importada previamente en el dashboard, como ECharts, nvd3, chart.js… después explicaremos como hacer esto con un ejemplo sencillo.

Este tipo de gadget está identificado en la edición de dashboards con este icono.

Puedes definir un gadget template previamente y luego utilizarlo en los dashboards tantas veces como necesites. Incluso pueden hacerse públicos para que el resto de usuarios puedan usarlos.

Creación

Para crear uno nuevo, accede desde el menú a:

Y pulsa sobre el botón Create Gadget Template

Aparecerá este formulario para crear un gadget template:

Formulario de identificación, descripción y un check para marcarlo como público o no. Al hacerlo público cualquier usuario puede usarlos, aunque no modificarlos.

La parte más importante para crear un gadget template son los editores de texto.

Clicando en los editores de texto y pulsando la tecla F11/ESC, habilita el modo de pantalla completa para facilitar el desarrollo.

Estos editores tienen la función de auto completar, ayuda, buscar y muestra todo el código minimizado en una columna a la derecha para navegar más deprisa entre el código, entre otras funciones.

TEMPLATE CODE HTML& CSS (DROP ZONE) y TEMPLATE CODE JS

En la primera ventana de edición, añade el código html y css necesarios.

En la segunda añade la lógica JavaScript.

TEMPLATE CODE JS

//In this second editor are predefined a series of functions that we can use in our gadget, to control certain phases of the gadget cycle as initialize it, with this function:

//This function will be call once to init components
	vm.initLiveComponent = function(){
};

//Each time the data is recharged we can map or treat them in this function:

//This function will be call when data change. On first execution oldData will be null
	vm.drawLiveComponent = function(newData, oldData){
};

//Here the resize event is captured and allows us to perform some action with our gadget to be resized, for example:

//This function will be call on element resize
	vm.resizeEvent = function(){
}

//Capture the event when the gadget is destroyed and you can take some action:

//This function will be call when element is destroyed
	vm.destroyLiveComponent = function(){
};

Ejemplo de creación de Gadget Template usando ECharts

Puedes acceder a la librería con esta url:

https://ecomfe.github.io/echarts-doc/public/en/index.html

Para este caso, crea un gadget tipo gauge.

Finalmente se verá así:

Crear el gadget template

El primer paso para construirlo sería darle un nombre y una descripción:

En el editor html tan sólo necesitas un div con un id.

TEMPLATE CODE HTML&CSS (DROP ZONE)

<div id="container" style="height: 100%;width:100%" ></div>

En el editor JavaScript, aunque el código parece más complejo, tan sólo estás inicializando el gráfico gauge según la información que aporta la librería ECharts.

https://ecomfe.github.io/echarts-doc/public/en/option.html#title

And mapping the data returned from the datasource that you will assign when you drag it to the dashboard.

TEMPLATE CODE JS

//Write your controller (JS code) code here
//Focus here and F11 to full screen editor
//This function will be call once to init components
vm.initLiveComponent = function(){
  var dom = document.getElementById("container");
  vm.myChart = echarts.init(dom);
  
  var app = {};
  vm.option = null;
  vm.option = {
      tooltip : {
          formatter: "{b}<br/>{c}",
          position: function (pos, params, el, elRect, size) {
                  var obj = {top: 10};
                  obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                  return obj;
              },
         textStyle: {      
                       fontWeight: 'bolder',
                       fontSize: 12,                    
                       fontFamily:'Soho',
                       color: '#fff'
                 }
      },
      toolbox: {
        show:false,
          feature: {
              
          }
      },
      series: [
        {
          name: '',
          type: 'gauge',
          detail: {formatter:'{value}',
                   textStyle: {      
                       fontWeight: 'bolder',
                      fontSize: 12,                      
                      fontFamily:'Soho',
                      color: '#000',
                      shadowColor : '#000', 
                      shadowBlur: 10
                 }},
           title : {
               
                  textStyle: { 
                      fontWeight: 'bolder',
                      fontSize: 10,
                      fontStyle: 'italic',
                      color: 'rgba(0,0,0,0)',
                      shadowColor : '#fff', 
                      shadowBlur: 10
                  }
              },
          data: [{value: 50, name: ''}],
          axisLine: {            
              lineStyle: {     
                  color: [[0.09, '#1e90ff'],[0.82, '#1e90ff'],[1, '#1e90ff']],
                  width: 3,
                  shadowColor : '#fff', 
                  shadowBlur: 10
              }
      }
      }
      ]
  };
  
  if (vm.option && typeof vm.option === "object") {
      vm.myChart.setOption(vm.option, true);
    vm.myChart.resize()
  
  }
  
  };
  
  //This function will be call when data change. On first execution oldData will be null
  vm.drawLiveComponent = function(newData, oldData){
    
      if(typeof newData !='undefined' &&  typeof newData[0].values !='undefined' && newData[0].values.length >=0){
    
        if(newData[0].values.length==0){
          vm.option.series[0].max = 100;
          vm.option.series[0].min = 0;
          vm.option.series[0].data[0].name = newData[0].signalId;
          vm.option.series[0].data[0].value = 0;
          vm.myChart.setOption(vm.option, true);
          vm.myChart.resize();
        }else{
          var max=1000;     
          var sum = 0;
          for (let index = 0; index < newData[0].values.length; index++) {
            const value = newData[0].values[index];
            if( value.value!=null && value.value>max){
              max = value.value;
            }
            sum = sum + value.value;
          }
          var result = sum/newData[0].values.length;
          var result= result.toFixed(2);    
          vm.option.series[0].max = max;
          vm.option.series[0].min = 0;
          vm.option.series[0].data[0].name = newData[0].signalId;
          vm.option.series[0].data[0].value = result;
          vm.myChart.setOption(vm.option, true);
          vm.myChart.resize();  
        } 
      } 
    };
  //This function will be call on element resize
  vm.resizeEvent = function(){  
     vm.myChart.resize();  
  }
  
  //This function will be call when element is destroyed
  vm.destroyLiveComponent = function(){  };

Pulsa y ya está creado tu gadget.

Usándolo

Para ello, crea un dashboard y añádele las librerías que necesita tu gadget. La mejor opción es utilizar las que estén disponibles en un CDN.

En la ventana GLOBAL STYLES, LIBRARIES AND SCRIPTS, escribe estas entradas:

GLOBAL STYLES, LIBRARIES AND SCRIPTS

GLOBAL STYLES, LIBRARIES AND SCRIPTS

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.common.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/extension/bmap.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/extension/dataTool.min.js"></script>

Tras crear el dashboard, arrastra el icono del gadget template a la posición donde quieres que aparezca,

selecciona tu template por el identificador “gaugeEchart” que es como lo habías identificado.

En este paso ya debe aparecer tu gadget. Hay que aclarar que, dependiendo del datasource que selecciones, tendrás que modificar el mapeo de los datos que haces en la función vm.drawLiveComponent. En este caso de ejemplo, se ha mostrado la media de los valores devueltos en un datasource. También podrías haberlo usado para mostrar el último valor de entrada en la ontología, etc. Todo esto varía en función de las necesidades que deba cubrir el gadget en el dashboard.

Para acceder a variables definidas en la parte JavaScript, como por ejemplo vm.variable, puedes acceder a ella o bien utilizando una directiva de angular js o escapándonla con las llaves {{vm.variable}}

Browser not supported