Crear un gráfico en SAPUI5 (II) - Tooltip y selección

En un artículo anterior habíamos aprendido cómo crear gráficos sencillos con SAPUI5. Era algo muy básico, pero habíamos visto dónde está la documentación para poder hacerlos todo lo complicado que queramos.

En este artículo, lo que vamos a hacer es mostrar un tooltip cuando pasemos o seleccionemos uno de los valores del gráfico. Como habíamos hecho un gráfico con líneas, este tooltip se mostrará cuando pulsemos sobre uno de los puntos. Si fuese un gráfico de barras, se mostraría al pulsar la barra.

Esto es ya nivel profesional, como poco.

Podríamos crearnos un elemento personalizado para mostrarlo al pulsar sobre el gráfico, pero de momento sólo vamos a mostrar el tooltip por defecto y ver un par de opciones para configurarlo.

Nos centraremos en la documentación de los VizFrames de tipo línea, y en particular en dos propiedades, tooltip e interactions.

Lo que haremos será:

• Hacer el tooltip visible para que aparezca cuando pasamos sobre un valor o lo seleccionamos.
• Cambiar el color de fondo del tooltip.
• Que se puedan seleccionar varios valores o sólo uno.

Hacer el tooltip visible

Para poder mostrar el tooltip por defecto, tenemos que usar una de las propiedades del VizFrame: tooltip. Esta propiedad tiene un valor tooltip.visible, que puede establecerse como true o false. Está claro para que sirve, ¿verdad?

Pero no nos engañemos, no nos va a resultar tan fácil. Si lo dejamos tal cual, el tooltip no se va a mostrar. ¿Qué es lo que puede estar pasando? Que tenemos que modificar otra propiedad, interaction.behaviorType, para hacerle "sensible" al evento hover (es decir, cuando el ratón pase por encima).

Para esta propiedad, podemos usar el valor noHoverBehavior, que significa que ignorará el hover y no nos mostrará el tooltip. Me da la impresión de que por defecto este tipo de gráfico usa éste, aunque podría estar equivocado... la verdad es que la documentación no está muy detallada al respecto.

Para mostrar el tooltip, podemos poner el valor interaction.behaviorType = null. De nuevo, por falta de documentación, no estoy seguro de qué otros valores puede tener, pero al hacer esto el tooltip ya se muestra.

var oVizFrame = this.byId("idVizFrame");

oVizFrame.setVizProperties( { 

   "title"       : { "text" : "2d6"} ,

  "interaction" : { "behaviorType" : null},

  "tooltip"     : { "visible" : true}

});

Y aquí tenemos el maravilloso tooltip

Cambiar el color de fondo

Esto es más fácil que engañar a Gollum con un acertijo. Se pueden cambiar varios atributos del tooltip, pero vamos con el más sencillo.

Tooltip tiene una propiedad, tooltip.background, que nos permite cambiar tanto el color del borde como el del fondo. Lo vamos a añadir para poner el tooltip en un color verde goblin. Modificamos las propiedades anteriores para obtener:

var oVizFrame = this.byId("idVizFrame");

oVizFrame.setVizProperties( { 

   "title"       : { "text" : "2d6"} ,

  "interaction" : { "behaviorType" : null},

  "tooltip"     : { "visible" : true,
                     "background": { "color" : "#00FF00" }
   }

});

Que se puedan seleccionar varios puntos o sólo uno

Además de poder modificar el tooltip, ya puestos a usar la propiedad interaction, otra cosa que podemos hacer con el gráfico es determinar cuantos valores podemos seleccionar al pulsar sobre ellos.

Eso lo conseguiremos con la propiedad interaction.selectability.mode. Tenemos varias opciones, aunque dos de ellas (single y multiple) están obsoletas. Así que podemos jugar con los valores:

• INCLUSIVE, si queremos que cada vez que pulsemos un valor, se añada a la selección actual. Éste es el valor por defecto.
• EXCLUSIVE, si queremos que sólo se marque un valor, el último seleccionado. Podemos seleccionar varios usando Control + click.
• NONE, si no queremos que se puedan seleccionar valores. Con esta opción podemos tener el tooltip activo (cuando pasamos con el ratón por encima) pero que no se seleccione ningún valor al pulsar sobre él.

Cuando seleccionemos varios puntos, en el tooltip por defecto sólo nos mostrará el último punto seleccionado, pero añadirá una línea indicando cuantos valores en total hemos seleccionado.

La línea a añadir es la siguiente:

var oVizFrame = this.byId("idVizFrame");

oVizFrame.setVizProperties( { 

   "title"       : { "text" : "2d6"} ,

  "interaction" : { "behaviorType" : null,
                     "selectability" : { "mode" : "INCLUSIVE" }
   },

  "tooltip"     : { "visible" : true,
                     "background": { "color" : "#00FF00 }
   }

});

Y con eso obtenemos:

Si sólo quisiésemos seleccionar un valor, habríamos elegido EXCLUSIVE.

¿Y para qué narices nos puede servir elegir varios valores? Bueno, porque podríamos recorrer el listado de puntos seleccionados gracias a oVizFrame.vizSelection(), que nos devuelve dicha selección. Pero eso lo dejaremos para más adelante.

Y eso es todo por hoy

Podríamos haber hecho un tooltip más chulo, sobre todo teniendo en cuenta que podemos crear nuestros propios tooltips y hacerlos más complejos. Eso lo podemos ver en el siguiente artículo: Tooltip a medida.

El código de este ejemplillo está subido a GitHub y se puede descargar aquí.