Create and edit synoptics with API

1 INTRODUCTION
2 OPEN SYNOPTIC
3 HIDE EDITOR
4 TYPES OF ELEMENTS

EN | ES

INTRODUCTION

We rely on the Javascript api of the dashboards, in the following link we see how to use it, so here we will describe the messages necessary to give the content to the elements of the synoptic

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

OPEN SYNOPTIC

When opening the synoptic in edit mode, the synoptic editor will appear where we can add elements and modify their properties.

HIDE EDITOR

First we will see the message to show and hide the editor.

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

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

where ide is the dashboard identifier, token the security token

TYPES OF ELEMENTS

We can create three types of elements:

Label: text that will be replaced by the value of the field of the datasource that is indicated, you can indicate the colors for the cutoff value, the initial text and the units.

Progress bar: progress bar we can assign the colors for the cutoff value, and the max, min and type values to indicate how it should grow

Indicator: to an element circle, rectangle, ... we indicate the colors for the cut value so it will change color depending on the value.

The type is indicated in this "classType" property:

They can be "label", "progress_bar" or "indicator"

To add functionality to the elements, such as indicating that it shows the value of a parameter of a datasource, what we have to do is click on an element.

This sends us the following messages:

//Example data returned when selecting an element with data

//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"]
		}
	}
}
// Example data returned when selecting an element without data

//dashboardMessageHandler getSynopticElementDataSource

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

With this information we can make the returned messages with the functionality that we need.

We can assign data to a selected element by sending this example message type 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, "*");

Here it is worth noting:

aggregationType, which can be "MAX", "MIN", "NONE", "SUM", "AVG", "COUNT", "LASTVALUE"

aggregationField field by which aggregation is performed

projectionField field that will return the data

color in this object we put the colors and the cut value

unitsOfMeasure if we add a unit of measure like kg it will add it after the value

We can assign data to a selected element if it is a progress bar by sending this message:

the main difference with the previous message is the classType and that this property is added

condition here we will put the values min, max and the type of growth vertically or horizontally.

We can define what code will be fired for a defined event of an element:

We can give a limit and an order to the data returned by the datasource for the element: