< Antes

 

Nota: Para criar ou editar gráficos, é necessário que o serviço do PlugBot esteja iniciado.

 

Após ter feito a configuração inicial do PlugBot, clique no ícone do PlugBot na bandeja e em seguida clique em "Abrir PlugBot_8088"

 

 

No painel de controle do PlugBot clique na aba "PlugDash" na barra lateral.

 

Nota: Um gráfico sempre é apresentado em um grupo, então, caso não exista nenhum grupo ainda, leia Como criar um grupo? antes de continuar.

 

Utilidade

O Gráfico de Lista com avatar é usado para fazermos uma listagem de produtos ou pessoas. É recomendado para a visualização de várias informações. Este gráfico, além das configurações do Gráfico de Lista, dispõe da opção de inserirmos imagens aos dados, para uma melhor visibilidade.

 

A seguir, temos um vídeo feito por desenvolvedores da nossa comunidade demonstrando um exemplo de implementação do Gráfico de Lista com Avatar. Como esse e os demais vídeos dos outros gráficos não foram feitos pela equipe do PlugMobile, eles não seguem um padrão, mas ainda sim achamos interessante compartilhar aqui para auxilia-lo na configuração de seus gráficos.

 

 

Configurando Gráfico de Lista com Avatar

Selecione o grupo em que o gráfico deverá ser exibido. Clique em "Novo gráfico" e em seguida selecione o tipo "Lista com avatar".

 

 

Após selecionar o tipo do gráfico, um formulário será exibido:

 

Tempo de sincronização

O tempo de sincronização define de quanto em quanto tempo o PlugBot deve enviar novas informações da fonte de dados para a Nuvem PlugMobile.

Existem dois campos para definir esse tempo. O primeiro campo é para horas e o segundo campo para os minutos. Na imagem acima, o PlugBot sincronizará as informações desse gráfico de 10 em 10 minutos.

 

Depart. permitido

O campo de departamento permitido controla quais departamentos conseguirão visualizar esse gráfico.

Os departamentos informados nesse campo devem ser os mesmos presentes na tabela mapeada para os usuários do PlugDash.

Por exemplo, se os departamentos na sua tabela são do tipo inteiro, informe os números que representam seus departamentos - se os departamentos na sua tabela são string, informe os textos que representam seus departamentos - exatamente como na tabela mapeada.

Assim, apenas os usuários que pertencem aos departamentos informados, conseguirão visualizar o gráfico.

 

Tema

O tema define o esquema de cores que o gráfico será exibido.

 

Título e Subtítulo

Esses dois campos serão exibidos no topo do gráfico.

 

Valor Monetário

Ao ativar essa opção, o gráfico mostrará ao invés de uma porcentagem um valor monetário.

Vamos criar uma situação:

Nesta imagem abaixo temos um gráfico com a porcentagem de meta batidas por cada vendedor para o mês de Janeiro:

 

Já nesta outra imagem, temos o valor monetário total das vendas de cada vendedor no mes de Janeiro:

 

 

Para que essa alteração ocorra, você pode alternar entre "sim" ou "não" nesta aba:

 

 

Tema Valor

Nesta aba faremos a alteração do tema dos valores conforme a mascara escolhida de porcentagem, veja a mudança:

 

 

Aplica máscara numérica?

Ao ativar essa opção, um novo campo será exibido:

Esses campos (Aplicar máscara numérica e Casas decimais) fazem com que o valor mostrado na lista seja formatado com agrupamento de milhares e ainda exiba a quantidade pré-definida de casas decimais após a vírgula.

Exemplos:

- SQL estático utilizado com banco de dados Firebird:

select 'Nome' as "nome", 'Descrição' as "descricao", 'Info' as "info", '%' as "mascara", 'https://i.pravatar.cc/300' as "foto", 12345.6789 as "valor" from rdb$database union all
select 'Nome' as "nome", 'Descrição' as "descricao", 'Info' as "info", '%' as "mascara", 'https://i.pravatar.cc/400' as "foto", 789654123.1122 as "valor" from rdb$database union all
select 'Nome' as "nome", 'Descrição' as "descricao", 'Info' as "info", '%' as "mascara", 'https://i.pravatar.cc/500' as "foto", 0.3924576 as "valor" from rdb$database

- Aplicar máscara numérica: Não

- Aplicar máscara numérica: Sim | Casas decimais: 0

- Aplicar máscara numérica: Sim | Casas decimais: 2

- Aplicar máscara numérica: Sim | Casas decimais: 5

 

SQL Aba

Antes de chegarmos no campo Aba, devemos entender que esta aba é dependente dos dados que informaremos no campo abaixo "SQL aba"

No campo "SQL aba" informaremos através de código SQL livre, os campos dos quais queremos trazer da base de dados conforme a requerimento e nomenclatura que o gráfico pede.

O gráfico de Lista de avatar requer os seguintes campos:

nome	descricao	info	mascara	foto	valor
Fabio	Vendedor	Concluido	%	*link*	96
William	Vendedor	Concluido	%	*link*	55
Daniel	Vendedor	Concluido	%	*link*	80
Guilherme	Vendedor	Concluido	%	*link*	66

Nota: No campo de foto, você poderá colocar o link público da imagem (Ex: foto do perfil do Facebook do funcionário) ou informar o base64 da imagem, este meio é o mais interessante caso queira deixar o gráfico visível no modo offline.

 

Mostraremos em código livre de SQL como funcionaria:

select user_name as nome, table_description as descricao, table_info as info, table_mask as mascara, table_linkfoto as foto, table_value as valor

 

No exemplo acima, as tabelas no seu banco de dados seriam:

user_name, table_description, table_info, table_mask, table_linkfoto, table_value

 

No campo "SQL aba" você pode usar os comandos union all, inner join entre outros, mas recomendados que você crie uma tabela ou uma view no seu banco de dados para que seja um processo mais automático.

 

Após entendermos o passo a passo de como carregar as tabelas através da aba "SQL", podemos voltar ao campo "Aba".

 

Aba

Neste campo poderemos criar abas para o mesmo gráfico, trazendo informações diferentes, seja setor, departamento ou etc.

 

Para criar uma nova aba, vamos até o botão "Adicionar aba".

 

 

Após criarmos a nova aba, vamos nomeá-la e colocar o SQL conforme o gráfico pede referente a esta aba.

 

No exemplo a seguir, faremos uma nova aba com nome de "Expositores", nela colocaremos o código SQL para trazer os dados dos nossos "Expositores".

 

Nota: No exemplo que iremos mostrar vamos usar dados estáticos, é recomendado que seja usado campos da sua base de dados para uma melhor experiência.

Nota: Em FIREBIRD é necessário que os apelidos / aliases estejam entre aspas, por exemplo:                 select 'exemplo' as "nome", 50 as "valor"... from rdb$database;

 

 

Veja que a partir deste momento, cada aba possuirá seu próprio SQL e trará as informações conforme o pedido.

 

Para ter um preview de como o gráfico está aperte em "Testar gráfico".

 

Caso esteja de acordo com o que você precisa, aperte em "Salvar Gráfico"

 

No final do nosso exemplo, teremos um gráfico de Lista com Avatar com duas abas, uma de "Vendedores" e outra de "Expositores".

 

Veja as imagens abaixo de como ficará seu gráfico para cada aba:

 

Vendedores

 

Expositores

 

Feito todo o processo, você terá seu gráfico de Lista de avatar!

 

< Antes