ui/Dataview
The ui Dataview module exports the Dataview() decorator method to decorate a JSON object and return a typedef:dataview object.
Different dataview types [eg. ChartJS, Tabulator-tables] require 3rd party libraries loaded via Mapp plugins.
The checkDataview() method is used to check whether required plugin libraries are loaded.
- Source
Requires
Methods
(async, inner) Dataview(_this) → {dataview}
The Dataview method is async for legacy reasons.
The dataview decorator will call an assigned create() method and shortcircuit.
An ID lookup will be attempted if the dataview target is provided as a string value.
A default dataview update method will be assigned if not provided with the dataview configuration. The queryparams from the dataview layer and locale will be spread into the dataview queryparams object.
The checkDataview() method is run to provide warnings for legacy configurations and check whether the dataview can be created.
The show() and hide() methods will be assigned if not explicit in the dataview configuration. A dataview will have show and hide methods if declared as a tabview.
A dataview.chkbox element will be created for an explicit string label property in the dataview.
The dataviewToolbar() method will be called prior to creating the dataview.
The dataviewMapChange() method will be called after the dataview has been created.
| Name | Type | Description |
|---|---|---|
_this | Object | Dataview object. |
| Name | Type | Description |
|---|---|---|
_this.target | string | A document.getElementById() for the target string is used to assign a target HTMLElement. |
- Source
Decorated dataview object.
- Type:
- dataview
(inner) checkDataview(_this) → {Error}
The checkDataview() is executed by the dataview decorator to check whether a dataview can be created with a required dataview utility method.
The _this.dataview property will be set to 'chartjs' or 'tabulator' if a dataview.chart or dataview.table object property are configured.
The dataview.table object will be created if a dataview.columns array is present.
A Dataview object matching the dataview type must be available in mapp.ui.utils{} to support the creation of a new dataview object.
| Name | Type | Description |
|---|---|---|
_this | dataview | Dataview object. |
| Name | Type | Attributes | Description |
|---|---|---|---|
dataview | string | <optional> | The type of dataview. |
table | Object | <optional> | dataview = "tabulator" |
chart | Object | <optional> | dataview = "chartjs" |
- Source
Return Error if the dataview cannot be created.
- Type:
- Error
(inner) dataviewMapChange(_this)
The dataviewMapChange method assigns an event listener for the custom changeEnd event of the dataview.layer mapview.
The mapChange property can be a function which is executed if the 'changeEnd' event is triggered. Otherwise the dataview.update() method will be executed.
The event method will shortcircuit if the dataview object is tabview tab without the .active class.
| Name | Type | Description |
|---|---|---|
_this | Object | Dataview object. |
| Name | Type | Description |
|---|---|---|
mapChange | Object | A boolean flag or function. |
_this.layer | layer | A layer associated with a dataview. |
layer.mapview | mapview | The layer mapview. |
- Source
(inner) dataviewToolbar(_this)
The dataviewToolbar method will create a HTML Element container with target elements for toolbar elements and the dataview itself.
| Name | Type | Description |
|---|---|---|
_this | dataview | Dataview object. |
| Name | Type | Attributes | Description |
|---|---|---|---|
_this.toolbar | Object | Configuration object for a toolbar supporting the dataview. | |
_this.dataview | string | The type of dataview | |
_this.target | HTMLElement | Target element in which the dataview is rendered. | |
_this.panel | HTMLElement | <optional> | A panel element to be displayed in a tab[view]. |
- Source
(inner) hide()
The hide() method will be bound to the dataview object this as dataview.hide() method in the decorator.
dataview.display flag will be set to false.
The dataview.target element style display property will be set to 'none'.
- Source
(inner) show()
The show() method will be bound to the dataview object this as dataview.show() method in the decorator.
The dataview.display flag will be set to true.
A create() method will be assigned from the dataview{} utils if undefined. The create method will be executed.
The create method will also be executed if the dataview.dynamic flag is set.
The update() method will be executed if the dataview.reload flag is set.
The dataview.target element style display property will be set to 'block'.
- Source
(inner) updateDataview()
The updateDataview() method will be bound to the dataview object this as dataview.update() method in the decorator.
The dataview must have been created already. A dataview.create() method will be assigned from a plugin if nullish and immediately executed.
The dataview update method requires a query template to be executed with optional query parameter.
A parameterized query will passed as argument to the mapp.utils.xhr() utility method.
A custom dataview.responseFunction() will be executed instead of the dataview.setData() method if available.
- Source