The user interface is represented through filters components. Filters trigger actions on the Dashboard which update state.appliedFilters
. This triggers a re-render, allowing the Dashboard to respond to the updated application state - by re-fetching data, filtering existing data, reconfiguring the Dashboard etc.
Filters take the following props:
type The component type. Filter components should extend BaseFilter component.
field This represents a key that will be used on the state.appliedFilters
object. Depending on the implementation, it can also represent a field in the data.
action: NOT IMPLEMENTED. (This will allow for sort or other filter actions in the future)
willFilter An array of strings, each string corresponds with a dataResource or dataKey. This property indicates which part of the dashboard data the filter will be applied to.
disabledBy An array of strings, where each string corresponds to a field value of another filter. When that field value is present in appliedFilters, the filter's html element will have the attribute disabled=true
.
data / dataHandlers As with all components, data can be passed as an object literal, or calculated via dataHandlers. It should be an array of arrays, where each array is a series of key value pairs.
initVal An initial value for the filter.
Consider this filter definition:
{
type: 'Autocomplete',
className: 'col-md-6',
name: 'specialty-autocomplete',
id: 'specialty-autocomplete',
className: 'specialty-autocomplete',
field: 'YearMonth',
action: 'filter', // sort / groupBy / etc
willFilter: ['climateData'], // array of dkanDataResources keys that filters affect
data: [
[
{ label: '2010', value: '2010' },
{ label: '2011', value: '2011' },
{ label: '2012', value: '2012' },
{ label: '2013', value: '2013' },
{ label: '2014', value: '2014' },
{ label: '2015', value: '2015' },
]
],
placeholder: 'Select year to filter dashboard...'
}
This will create the following select box:
.. image:: ../_static/select_screenshot.png
If the user selects a year, the dashboard's state.appliedFilters
object will be updated as follows:
state : {
// ...
appliedFilters: {
YearMonth: ['2010']
}
}
Out dataHandlers
have access to the appliedFilters values and can filter data accordingly:
Object.keys(appliedFilters).forEach(k => {
if (k === "year" && appliedFilters[k].length > 0) {
_data = _data.filter(row => {
return _inYear(row, appliedFilters[k]);
})
}
});
See also Actions.