-
Notifications
You must be signed in to change notification settings - Fork 25
MAPP.UI
MAPP.UI is a library to build interfaces which extend the map component.
mapp.ui.Dataview() is a decorator method.
The dataview object provided as argument _this must have a target key-value. The method will attempt to get an element by the target key-value as ID if provided as a string.
Data can be provided as key-value or queried.
dataview.update() will execute a parameterised query and provide the response as data argument to the dataview.setData() method.
The dataview.update() method will be called on the changeEnd mapview event if the mapChange flag is set in the dataview object.
tbc
A chart key-value object is used to configure a ChartJS dataview.
The chart method will append a canvas element to the dataview target into which the chart is rendered. The configuration of the chart will be merged with the default options as defined in the decorator method.
const canvas = _this.target.appendChild(mapp.utils.html.node`<canvas>`);
_this.ChartJS = await mapp.ui.utils.Chart(canvas, mapp.utils.merge({
type: "bar",
options: {
plugins: {
legend: {
display: false
},
datalabels: {
display: false
}
}
}
}, _this.chart));The Chart.js documentation provides more detailed configuration reference and samples.
Please visit our codepen for more mapp.ui.Dataview() for charts.
mapp.ui.Dataview({
target: "myChart", // string or instanceof HTMLElement
query: "myChartQuery", // query template in workspace
host: "https://geolytix.dev/latest", // must be defined for queries if not provided as layer.mapview.host
chart: {
data: {
type: "pie", // default is bar
labels: ["Owner Occupied", "Renting", "Social", "Rent Free"],
datasets: [
{
data: [0.4168, 0.2782, 0.2912, 0.0137], // implicit data, not from query
backgroundColor: ["#cddc39", "#00bcd4", "#ffc107", "#33691e"]
}
]
}
}
})A table key-value object is used to configure a Tabulator dataview.
Before creating the Tabulator instance in the dataview target element the table method will iterate through the columns and assign a custom headerFilter method if matched in the mapp.ui.utils.tabulator.headerFilter object.
_this.table.columns.forEach(col => {
if (typeof col.headerFilter === 'string' && mapp.ui.utils.tabulator.headerFilter[col.headerFilter]) {
col.headerFilter = mapp.ui.utils.tabulator.headerFilter[col.headerFilter](_this)
}
})
_this.Tabulator = await mapp.ui.utils
.Tabulator(_this.target, Object.assign({
//renderVertical: 'basic',
renderHorizontal: 'virtual',
}, _this.table));The Tabulator documentation provides more detailed configuration reference and samples.
Please visit our codepen for more mapp.ui.Dataview() for tables.
If the selectable flag is set on the table a rowClick event will be added to the Tabulator instance. The event method uses the row data id and the dataview.layer to get a location from the layer host. A dataview.rowSelect() method will short circuit this event. The rowSelect() callback will receive the event e and row as arguments.
If assigned to the dataview object the setDataCallback() method will execute the dataview.setData() method; After the Tabulator.setData() method.
mapp.ui.Dataview({
target: "myTable", // string or instanceof HTMLElement
query: "myTableQuery", // query template in workspace
host: "https://geolytix.dev/latest", // must be defined for queries if not provided as layer.mapview.host
table: {
layout:"fitColumns", // default "fitData"
selectable: true, // adds rowClick event to Tabulator instance.
data: [
{ id: 1010000015, store_name: "Aldi Kingstanding Birmingham", town: "Birmingham" },
//...more data rows
],
columns: [
{
field: "id", // field must match the key in the data row
title: "ID",
headerSort: false // table column is not sortable; default true
},
{ field: "store_name", title: "Store" },
{ field: "town", title: "Town" }
]
}
})The chckbox module returns a mapp.utils.html that consists of an input with the class "checkbox".
The elements params are as follows: data-id, disabled, checked, onchange & label.
-
data-id- Assigns an identifier to the data element. -
disabled- (true/false) will disable the element. -
checked- (true/false) will set the element as checked or not. -
onchange- Where additional logic for the checkbox goes. -
label- (text) will set the checkboxes label
eg.
const checkbox = mapp.ui.elements.chkbox({
data_id: 'data-id',
label: 'label',
checked: true || false,
disabled: true || false,
onchange: (checked) => {}
})The modal element is a card with its header and close button at a fixed position.
params.target must be instanceof HTMLElement.
params.content will be appended to the modal element.
Events allow to change the position of the fixed element by dragging.
The params.close() callback will be called by the close button after the model element is removed. Restoring the content in it's original position can be achieved within the close() method.
A collection of methods which return a UI card for the filter type. Supported types are:
- like/match
- numeric/integer
- in
- date/datetime
- boolean
- null
The filter panel method will iterate over all infoj entries but return null without some entries containing a field filter configuration. The dropdown is populated with the filter entries title or field. Selection of a drop down line item will create a filter entry card in the panel.
The listview method decorates a target element to display location view drawers.
A proxy object will be created for mapview.locations{}. The proxy setter will assign a style to the location record from the colour defined in the locations list array.
The infoj method will iterate through a location's infoj[] entries and render the elements returned from an entry type method into the Location View grid. The infoj argument can be provided as an array of field values to filter which entries from the location.infoj array should be processed.
Location View entries are UI utility methods that create interface elements to be rendered into the location view from entries and their values in the location's infoj[] array.
Sets a default value. For entry.defaults: 'user' the entry value will be the mapp.user.email or the defined entry.nullValue. A location.update() query will be run if the entry value is newly assigned.
A checkbox is returned to the infoj method for an type:geometry entry. The geometry module assigns a show method to the entry object. The show method will be immediately called if the display:true flag is set.
The entry.show() method will create a geojson layer entry.L from the entry.value. The layer will be added to the entry.location.layer.Mapview and pushed into the entry.location.Layers array to be destroyed in the entry.location.remove() function.
If not defined as an Openlayers style object entry.Style{}, the geojson feature style will be assigned from the entry.style{}, as well as the entry.location.style{} if defined.
Upon initialization the utility module will check whether Chart is assigned to the global window object and return. Chart.js and additional plugins will be dynamically imported from skypack if not already loaded from a link in the document head.
Upon initialization the utility module will check whether Tabulator is assigned to the global window object and return. Tabulator and additional plugins will be dynamically imported from skypack if not already loaded from a link in the document head.