Intro
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.
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 logic.
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 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 this:
Create the template gadget
The first step to build it would be to give it a name and a description:
In the html editor we only need a div with an id.
<div id="container" style="height: 100%;width:100%" ></div>
In the javascript editor, although the code seems more complex, we are only initializing the gauge graph according to the information provided by the ECharts library.
https://ecomfe.github.io/echarts-doc/public/en/option.html#title
And mapping the data returned from the datasource that we will assign when we drag it to the dashboard.
//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 GLOBAL STYLES, LIBRARIES AND SCRIPTS window we write these entries:
<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 appear
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 {{vm.variable}}