5  Widgets

      Frente ao potencial para interatividade que acompanha as linguagens de JSPlotly, este capítulo visa ilustrar algumas ferramentas interativas ágeis, ou widgets, e que podem agregar valor consubstancial aos códigos do aplicativo em qualquer tema. Como em outras seções, cada widget pode ser facilmente observado pelo JSPlotly interativo da moldura (frame), não sendo necessário acessá-lo fora da página (livro vivo).


      Experimente clicar em add para cada exemplo, e percorra sua funcionalidade.


5.1 Tooltips

Sugestão de uso:

  Tooltips são mensagens popup visualizadas com o movimento do mouse - hover sobre um dado do objeto interativo (ex: gráfico, mapa).



5.2 Caixa de mensagem (textarea)

Sugestão de uso:

  Utiliza-se caixa de mensagem quando se deseja que uma ação do objeto seja precedida por uma informação fornecida pelo usuário.



5.3 Barra deslizante (slider)

Sugestão de uso:

  Recomenda-se o uso de slider nos casos em que há 1) mudanças em variável numérica (o slider reflete aumento ou redução) ou 2) variável categórica com mais de 4 ítens (contorna a poluição visual de um Menu).



5.5 Deslizador de intervalo (rangeslider)

Sugestão de uso:

  Recomenda-se rangeslider nos casos em que houver 1) um gráfico multifásico, um gráfico muito recortado, ou para séries temporais.



5.6 Caixa de seleção (checkbox)

Sugestão de uso:

  Checkbox é melhor empregado quando se deseja visualizar mudanças simultâneas, já que o widget permite seleção múltipla.



5.7 Caixa de texto

Sugestão de uso:

  Recomenda-se o uso de caixa de texto para inserção de valores pelo usuário.



5.8 Botões

Sugestão de uso:

  Botões são recomendados quando se deseja refletir uma mudança mutuamente exclusiva na área gráfica do objeto.



5.9 Botões de rádio (radio buttons)

Sugestão de uso:

  Radiobuttons são empregados como alternativa aos botões normais, embora com menor área para clique de mouse.



5.10 Cartão (reativo)

Sugestão de uso:

  Cartões são usados para destacar um valor obtido pela ação do objeto. Quando interativos, os cartões possuem valores atualizados automaticamente junto ao código.



5.11 Gauge (reativo)

Sugestão de uso:

  O gauge expressa um valor relativo frente a um valor máximo. Quando reativo, esses valores variam ao longo dos frames do objeto.


5.12 Gauge linear (reativo)

Sugestão de uso:

  Similar ao gauge, embora representado por uma barra, e não por um velocímetro (speedmeter).


5.13 Cartão e gauge

Sugestão de uso:

  Não apenas essa combinação, mas várias outras acima podem ser ajustadas para apresentar mais de uma informação junto ao objeto.