-
Notifications
You must be signed in to change notification settings - Fork 26
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 executed of 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) => {}
})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.