What is the ODIN library?

The ODIN library is based on the Cubbles Technology.
A Cubbles Component is similar to black box, which is defined by a name, it describes the functionality and capabilities.
A Cubbles component has multiple slots, which serve purpose as input and output, therefore called as Input Slots and Output Slots. The component triggers with the change of data through input slots, it calculates to perform the specific functions as a result the value of output slot changes.
ODIN library provides normalize definition of data structures which most of ODIN components support.
We provide the availability of four data structures, each structure incorporates a container like objects/arrays and concept like data tuples/data series. Cell values consists of any data type.
Please look api-doc to dive into details.

Component types

Various components developed by us -

Connectors: A connector provides an entry point, where entry point connects to an external data source which serves as input data to the component.
Transformers: A transformer is a component which serves purpose to handle data. That may include transformations like to map, filter, add, split, conversion or even validating data.
Views: Views as a component provides the display of end result. When connected with other components like connectors, transformers in compound component, it takes the output of the previous component as input and displays the result in form of a pie chart, bar, line, gauge, plain text or in form of a table.

Examples

Chart-View

The component is useful to display the data as chart forms. It provides many different forms of chart to view such as line, bar, pie, donut and many more.

Live Demo

The code

The live demo is based on the following code using the The Cubbles Tag API.

<chart-view cubx-webpackage-id="odin-library@0.1.0-SNAPSHOT">
	<cubx-core-init style="display: none;">
		<cubx-core-slot-init slot="data">
[...]
		</cubx-core-slot-init>
		<cubx-core-slot-init slot="config">
{
	"elementsAreObjects": true,
	"dataContainsTuples": true,
	"dataSeries": [{
			"key": "a",
			"name": "Foo"
		}, {
			"key": "c",
			"name": "Bar"
		}
	],
	"c3": {
		"data": {
			"type": "pie",
			"x": "b",
			"empty": {
				"label": {
					"text": "No data!"
				}
			}
		},
		"axis": {
			"x": {
				"type": "category"
			}
		}
	}
}
		</cubx-core-slot-init>
	</cubx-core-init>
</chart-view>

The embedded code, starts with component's webpackage id.
The slots which are in use are defined. In the above example two slots are defined: data and config.
Data: is the input data to be displayed in map form.
Config: restricts the incoming data with the configuration provided and formats the map view.

Maplayer-View

The component displays the geographical maps and their associated data. The view provides the availability of multiple map layers in forms such as Tilelayer, Marker, GeoJson, Chloropleth.

Live Demo

The code

The live demo is based on the following code using the The Cubbles Tag API.

<maplayer-view cubx-webpackage-id="odin-library@0.1.0-SNAPSHOT">
	<cubx-core-init style="display:none">
		<cubx-core-slot-init slot="data">
[...]
		</cubx-core-slot-init>
		<cubx-core-slot-init slot="config">
{
	"size": {
		"width": "100%",
		"height": "600px"
	},
	"center": {
		"lat": 55,
		"lng": 10
	},
	"zoom": 5,
	"tileLayers": [{
			"provider": "CartoDB.DarkMatterNoLabels"
		}, {
			"url": "http://korona.geog.uni-heidelberg.de/tiles/adminb/x={x}&y={y}&z={z}",
			"maxZoom": 19,
			"attribution": "Imagery from GIScience Research Group @ University of Heidelberg"
		}
	],
	"markerLayers": [{
			"dataPath": "",
			"lat": "/lat",
			"lng": "/long",
			"title": "/name",
			"alt": "/name",
			"draggable": false
		}, {
			"lat": 50.68127839,
			"lng": 10.9305529,
			"title": "incowia GmbH",
			"alt": "incowia GmbH"
		}
	]
}
		</cubx-core-slot-init>
	</cubx-core-init>
</maplayer-view>