¿Cómo usar Filtros en los Dashboards?
- DevPortal Editor (Unlicensed)
- Onesait Platform
ES | EN
Introducción
La plataforma permite definir filtros complejos en tus gadgets y dashboards, de forma sencilla.
Puedes definir gadgets con filtro pulsando sobre un punto del gráfico o una barra, por ejemplo.
Además, podrás definir un formulario de filtros para filtrar al propio gadget donde se define el formulario y mediante el datalink tenemos la opción de indicar si quieres que estos filtros se apliquen a otros gadgets.
Además, se ha incorporado un nuevo tipo de gadget que es el gadget filter.
Este gadget mostrará un formulario con los filtros definidos y sirve como filtro maestro para filtrar otros gadgets.
Estos filtros pueden definirse en los mensajes del API Dashboard, para poder crear gadgets con filtros definidos.
Creación de filtros en un Gadget
En primer lugar, debes crear un gadget. Para este ejemplo, usarás la ontología Helsinkipopulation y crearás un gadget de barras:
En modo edición del dashboard, clica en el icono de los tres puntos del menú del gadget y luego sobre la entrada Edit Filters.
Aparece esta ventana modal:
Tiene tres secciones:
FILTERS:
Listado de filtros definidos. Aquí aparecen los filtros definidos para cada gadget.
ADD NEW FILTER:
Formulario donde rellenarás los datos del filtro.
En el formulario, define el identificador, que debe ser único.
Type filter: Seleccionael tipo de filtro que quieres crear, puede ser un text filter, numerical filter, … Dependiendo de la elección, aparecerán unos u otros campos que debes rellenar.
FILTER LAYOUT:
Tiene tres entradas:
Show filters in modal: Marcado, muestra el formulario de filtros en una ventana modal.
Hide active filters: Marcado, oculta los badgets, que indican que filtros están afectando al gadget.
Hide button clean filters: Marcado, oculta el botón clean filter del formulario.
Como ejemplo, crea un filtro numérico simple sobre el año:
Pulsa CREATE.
Al crearlo, se añade a listado de filtros.
Cierra la modal y verás que aparece un icono que antes no aparecía, porque ahora el gadget sí tiene filtros definidos . Al pulsarlo, verás el formulario de filtros. Pulsa en OK y verás los datos filtrados.
El siguiente paso es crear otro gadget y ver cómo filtrarlo desde éste:
Para esto, crea un gadget tipo line, por ejemplo, para la misma ontología, aunque podría ser para otra.
Pulsa el icono DataLink.
y crea la relación indicando en el gadget source como parámetro el identificador del filtro. Escribe year, pulsa el icono del + para añadir la relación y cierra la modal.
Pulsa OK en el formulario del filtro y verás que están los dos gadgets filtrados.
Si pulsa el botón clean filters, se limpian los filtros y vuelves a ver los datos iniciales.
Uso del gadget Filter
Vamos a crear un gadget filter para filtrar los dos gadgets anteriores.
Por simplificar el ejemplo, elimina el filtro que tenías en el gadget bars, para lo cual clica el icono edit filters y en el listado de filtros pulsa el icono rojo. Si quisieras, modificarlo, tendrías que pulsar sobre la herramienta.
Eliminado, ya no aparece el icono en la parte superior derecha:
Arrastra al dashboard el gadget filter.
Aparece con este formato:
Pulsa sobre el botón de los tres puntos, después Edit Filters, y vuelve a crear un filtro para el año menor que y otro mayor que.
Tras crear los dos filtros, el gadget filtro tendrá esta apariencia:
Ahora indica en el datalink las relaciones con los gadgets. El source será el gadget filter.
Define que afecte un parámetro a cada uno de los gadgets. Podrías hacer que los dos filtros afectasen a los dos gadgets, etc.
Si por ejemplo marcas min como 1900 y max como 1910, se filtrarán los datos de los gadgets:
dando este resultado. Aquí puedes ver los badgets donde se muestra el filtro que está aplicándose al gadget. Como se indicó antes, éstos pueden mostrarse u ocultarse desde la modal edit filters.
NOTA
Para el caso del intervalfilter, en el datalink se crearán dos relaciones con el gadget objetivo, añadiendole al identificador del filtro las terminaciones identificador+startDate y identificador+endDate. Por ejemplo, si tienes un gadget filtro con un filtro del tipo intervalfilter con identificador timestamp, crearás en el data link dos relaciones desde el gadget source al gadget target poniendo como identificadores del filtro timestampstartDate y timestampendDate.
Acceso desde el código a los filtros en Gadget templates
Dispones de las siguientes funciones y variables para utilizar los filtros en los gadgets templates desde el código javascript, por si es necesario conocer que valor tienen en algún momento por ejemplo:
Enviar un filtro de datos:
vm.sendFilter(field, value, op)
field: identificador del filtro.
Value: valor que se envía.
Op: operador (=, <, >, …)
Un ejemplo sería:
vm.sendFilter(‘year’, 2000, ‘=’)
Enviar un valor para un tópico:
vm.sendValue(topic, value)
topic: tópico para indicar en el datalink que gadgets se verán afectados.
value: valor que se envía para ese tópico.
Un ejemplo sería:
vm.sendValue(‘topic1’, ‘{actívate:true}’)
Para acceder desde el código javascript del gadget template a la estructura de datos que contiene los filtros, puedes utilizar esta variable:
vm.filters