Badge Custom
Example:
{
type: 'badge-custom',
options: {
titleBackground: '#58c04d',
components: [
{
type: 'horizontal-table',
options: {
topicKey: 'zoning',
shouldShowFilters: false,
shouldShowHeaders: false,
id: 'baseZoning',
// defaultIncrement: 10,
// showAllRowsOnFirstClick: true,
// showOnlyIfData: true,
fields: [
{
label: 'Code',
value: function (state, item) {
return item;
},
transforms: [
'nowrap',
'bold'
]
},
{
label: 'Description',
value: function (state, item) {
return helpers.ZONING_CODE_MAP[item];
},
},
], // end fields
},
slots: {
items(state, item) {
// console.log('state.sources:', state.sources['zoningBase'].data.rows);
const id = item.properties.OBJECTID;
const target = state.sources.zoningBase.targets[id] || {};
const { data={} } = target;
const { rows=[] } = data;
// get unique zoning codes
const longCodes = rows.map(row => row.long_code);
const longCodesUniqueSet = new Set(longCodes);
const longCodesUnique = Array.from(longCodesUniqueSet);
return longCodesUnique;
},
}, // end slots
}, // end table
],
},
slots: {
title: 'Base District',
},
}, // end of badge-custom