Intro
Gadget Template is a type of Gadget that give us you the freedom to create any type of gadget from HTML, CSS and Javascript JavaScript code, we . You can obtain data from a datasource or API calls by Ajax for example, and we you can use any library previously imported in the dashboard, like ECharts, nvd3, chart.js ... later 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 You can define a template gadget previously and then use it in dashboards as many times as we you need, they . 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 templateCreate Gadget Template:
This form will appear to create a template gadget will appear:
Form of identification, description and a check to mark it as public or not when doing it public . If you make them public, any user can use them, although not modify them.
The most important part to create a template gadget are text editors.
Clicking on the text editors and pressing the F11 / ESC key enable enables the full screen mode to facilitate development.
These editors have the function functions of auto complete, help, search and show all the minimized code, minimized in a column on the right, to navigate faster between the code, among other functions.
TEMPLATE CODE HTML& CSS (DROP ZONE)
yand TEMPLATE CODE JS
In the first edit window we will , add the necessary html and css code.
In the second we will one, add the javascript JavaScript logic.
| 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 You can access the library with this url:
https://ecomfe.github.io/echarts-doc/public/en/index.html
For our this case we will , create a gauge-type gadget type gauge.
Finally it It will look like this in the end:
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 you only need a div with an id.
| Code Block | ||
|---|---|---|
| ||
<div id="container" style="height: 100%;width:100%" ></div> |
In the javascript JavaScript editor, although the code seems more complex, we you 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 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 pressPress
and we would have our your gadget is created.
Using it
For which we this, create a dashboard and we will add the libraries that our your gadget needs, the . 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:
| 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 you want it to appear,
We select our template by the identifier "gaugeEchart" which is how we you had identified it.
In this step we must show our gadget. It is necessary to clarify that your gadget is already shown. Bear in mind that, depending on the datasource that we you select we , you will have to modify the mapping of the data that we you do, in the function vm.drawLiveComponent, in . In this example, the average of the values returned in a datasource was shown, we . You could also have used it to show the last entry value in the ontology, etc. , all All this varies according to the needs that the gadget must cover in the dashboard.
To access variables defined in the javascript JavaScript part, such as vm.variable.We , you can access it either using an angular js directive or escaping it with the keys {{vm.variable}}