Crear y editar sinópticos con API Javascript

1 INTRODUCCIÓN
2 ABRIR SINÓPTICO
3 OCULTAR EDITOR
4 TIPOS DE ELEMENTOS

EN | ES

INTRODUCCIÓN

Nos apoyamos en el api Javascript de los dashboards, en el siguiente enlace vemos como usarla, por lo que aqui describiremos los mensajes necesarios para dar el contenido a los elementos del sinóptico

https://onesaitplatform.atlassian.net/l/c/cAMRAsgJ

ABRIR SINÓPTICO

Al abrir el sinóptico en modo edición, nos aparecerá el editor del sinóptico donde podremos añadir elementos y modificar sus propiedades.

OCULTAR EDITOR

En primer lugar veremos el mensaje para mostrar y ocultar el editor.

var message = ' {"command":"hideShowSynopticEditor", "authorization":"' + token + '", "information":{"dashboard":"' + ide + '"}}';

iframeEl.contentWindow.postMessage(message, "*");

donde ide es el identificador del dashboard, token el token de seguridad

TIPOS DE ELEMENTOS

Podemos crear tres tipos de elementos:

Label: texto que será remplazado por el valor del campo del datasource que se indique, se puede indicar los colores para el valor de corte, el texto inicial y las unidades.

Progress bar: barra de progreso le podemos asignar los colores para el valor de corte, y los valores max , min y el tipo para indicar como debe crecer

Indicator: a un elemento circulo, rectángulo, … le indicamos los colores para el valor de corte así cambiará de color dependiendo del valor.

El tipo se indica en esta propiedad "classType":

Pueden ser "label", "progress_bar" o "indicator"

Para añadir funcionalidad a los elementos, como indicar que muestre el valor de un parámetro de un datasource lo que tenemos que hacer es clicar un elemento.

Esto nos envía los siguientes mensajes:

//Ejemplo datos devueltos al seleccionar un elemento con datos

//dashboardMessageHandler getSynopticElementDataSource{
	"command": "getSynopticElementDataSource",
	"information": {
		"refresh": 20,
		"ontology": "HelsinkiPopulation",
		"dataSource": "synopticdatasource_administrator_1568885107792",
		"synopticElement": {
			"id": "svg_2",
			"aggregationType": "MAX",
			"aggregationField": "Helsinki.year",
			"projectionField": "Helsinki.year",
			"where": null,
			"classType": "label",
			"color": {
				"colorOn": "#006400",
				"colorOff": "#DC143C",
				"cutValue": "2000"
			},
			"condition": {
				"maxValue": "100",
				"minValue": "20",
				"orgSize": null,
				"type": "vertical"
			},
			"typeElement": "text",
			"classTypeList": ["indicator", "label"],
			"aggregationList": ["NONE", "COUNT", "SUM", "MIN", "MAX", "AVG", "LASTVALUE"]
		}
	}
}
//Ejemplo datos devueltos al seleccionar un elemento sin datos

//dashboardMessageHandler getSynopticElementDataSource

{
	"command": "getSynopticElementDataSource",
	"information": {
		"synopticElement": {
			"id": "svg_1",
			"typeElement": "rect",
			"classTypeList": ["indicator", "progress_bar"],
			"aggregationList": ["NONE", "COUNT", "SUM", "MIN", "MAX", "AVG", "LASTVALUE"]
		}
	}
}

Con esta información podremos confeccionar los mensajes devuelta con la funcionalidad que precisemos.

Podemos asignar datos a un elemento seleccionado enviando este mensaje ejemplo tipo label:

var message = `{
    "command": "setSynopticElementDataSource",
    "authorization": "${token}",
    "information": {
        "dashboard": "identificationDashboard",       
        "ontology": "HelsinkiPopulation",
        "refresh": 20,
        "synopticElement": {
            "aggregationType":"MAX",
            "aggregationField":"Helsinki.year",
            "projectionField":"Helsinki.year",
            "classType":"label",
            "color":{
                    "colorOn":"#006400",
                    "colorOff":"#DC143C",
                    "cutValue":"2000"
            },
            "unitsOfMeasure":"MW"
            }
    }
}`;
iframeEl.contentWindow.postMessage(message, "*");

Aqui cabe destacar :

aggregationType, que puede ser “MAX”, “MIN”, “NONE”, “SUM”, “AVG”, ”COUNT”, ”LASTVALUE”

aggregationField campo por el que se realiza la agregación

projectionField campo que devolverá los datos

color en este objeto ponemos los colores y el valor de corte

unitsOfMeasure si añadimos una unidad de medida como kg lo añadirá detrás del valor

Podemos asignar datos a un elemento seleccionado si es un progress bar enviando este mensaje:

la diferencia principal con el mensaje anterior es el classType y que se añade esta propiedad

condition aquí pondremos los valores min, max y el tipo de crecimiento en vertical o en horizontal.

Podemos definir que código se lanzará para un evento definido de un elemento:

Podemos dar un límite y un orden a los datos devueltos por el datasource para el elemento: