Introducción
El Gadget Template is a type of Gadget that give us the freedom to create any type of gadget from HTML, CSS and Javascript code, we can obtain data from a datasource or API calls by Ajax for example and we can use any library previously imported in the dashboard, like ECharts, nvd3, chart.js ... later we will explain how to do this with a simple example.
This type of gadget is identified in the edition of dashboards with this icon.
We can define a template gadget previously and then use it in dashboards as many times as we need, they can even be made public so that other users can use them.
Creation
To create a new one we will access from the menu to
And click on the button create gadget template
This form will appear to create a template gadget:
Form of identification, description and a check to mark it as public or not when doing it public any user can use them, although not modify them.
We explain the use of the input parameters in this article:
The most important part to create a template gadget are text editors.
Clicking on the text editors and pressing the F11 / ESC key enable the full screen mode to facilitate development.
These editors have the function of auto complete, help, search and show all the minimized code in a column on the right to navigate faster between the code, among other functions 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
In the first edit window we will add the necessary html and css code.
In the second we will add the javascript logicEn la primera ventana de edición, añade el código html y css necesarios.
En la segunda añade la lógica JavaScript.
| Code Block | ||||
|---|---|---|---|---|
| ||||
//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(){ }; |
Basic template creation example using ECharts
We can access the library with this
|
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
For our case we will create a gadget type gauge.
Finally it will look like thisPara este caso, crea un gadget tipo gauge.
Finalmente se verá así:
Crear el gadget template
gadgetThe first step to build it would be to give it a name and a descriptionEl primer paso para construirlo sería darle un nombre y una descripción:
In the html editor we only need a div with an En el editor html tan sólo necesitas un div con un id.
| Code Block | ||
|---|---|---|
| ||
<div id="container" style="height: 100%;width:100%" ></div> |
In the javascript En el editor , although the code seems more complex, we are only initializing the gauge graph according to the information provided by the ECharts library.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 we you will assign when we you drag it to the dashboard.
| Code Block | ||||
|---|---|---|---|---|
| ||||
//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(){ };
|
We press
and we would have our gadget created.
Using it
For which we create a dashboard and we will add the libraries that our gadget needs, the best option is to use the ones that are available in a CDN.
In the 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
window we write these entries:| Code Block | ||
|---|---|---|
| ||
<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> |
After creating the dashboard we drag the template gadget icon to the position where we want it to appearTras crear el dashboard, arrastra el icono del gadget template a la posición donde quieres que aparezca,
We select our template by the identifier "gaugeEchart" which is how we had identified it.
In this step we must show our gadget. It is necessary to clarify that depending on the datasource that we select we will have to modify the mapping of the data that we do in the function vm.drawLiveComponent, in this example the average of the values returned in a datasource was shown, we could have used it to show the last entry value in the ontology, etc., all this varies according to the needs that the gadget must cover in the dashboard.
To access variables defined in the javascript part, such as vm.variable.
We can access it either using an angular js directive or escaping it with the keys 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}}