Hello Charts lança uma experiência nativa de criação de gráficos para o editor de blocos

Publicados: 2021-12-03

Luke Carbis e Rob Stinson, dois da equipe de três pessoas do Block Lab que o WP Engine adquiriu em 2020, estão juntos novamente em um novo projeto. Desta vez, eles são acompanhados por Byron Keet. O trio está ocupando o espaço de gráficos do WordPress por meio de um conjunto de blocos chamados Hello Charts.

“Algumas pessoas lançam acordos na Black Friday”, escreveu a equipe na semana passada em apenas seu segundo tweet desde julho. “Estamos lançando um produto inteiro!”

Carbis apontou que a equipe se esforçou para criar um plugin nativo do editor de blocos. Não há telas de administração ou páginas de configurações, e o usuário apenas trabalha no editor.

O material de marketing na página inicial do site afirma que o Hello Charts é “o primeiro editor de blocos construído pelo plugin de gráficos primeiro”. No entanto, o SB Charts existe há quase um ano, e o Chart Block chegou ao diretório de plugins do WordPress há várias semanas. O Charts Blocks for Gutenberg, que suporta importações de CSV, teve seu lançamento inicial há meio ano, mas não foi atualizado desde então.

A pretensão de ser o primeiro é, talvez, um deslize do marketing. A única razão pela qual eu o vi imediatamente é que estou de olho em plugins semelhantes há algum tempo, esperando encontrar uma solução de gráficos decente para o editor de blocos. Embora o Hello Charts possa não ser tecnicamente o primeiro a chegar, ele oferece a melhor experiência de usuário ainda.

Na maioria dos casos, confio em gráficos de barras e linhas. No entanto, o plugin oferece cinco tipos de blocos no total:

  • Gráfico de barras
  • Gráfico de linha
  • Gráfico de pizza
  • Gráfico de área polar
  • Gráfico de radar

Cada um funciona quase da mesma forma ao inserir dados e personalizar a saída. Existem algumas opções e controles específicos para cada tipo. Além disso, os usuários podem transformar de um bloco de gráfico para outro e vice-versa com o clique de um botão sem perder dados.

Depois de me familiarizar com as opções, criei um gráfico de dados de vendas de produtos de três anos por mês. Comecei com o Bar Chart Block, que fez mais sentido. Cada um dos blocos possui um botão “Editar dados do gráfico”. Clicar nele abre uma sobreposição na tela que funciona como um programa de planilhas típico.

Sobreposição de pop-up no editor do WordPress para inserir dados de gráfico que se parecem com um software de planilha.
Sobreposição de dados do gráfico.

Os usuários podem percorrer cada célula, adicionando dados e criando novos conjuntos de dados ou linhas. Existem opções para duplicar conjuntos de dados ou adicionar novos antes/depois clicando no botão de reticências. Tudo parecia simples para alguém que não passou muito tempo trabalhando com software de planilhas desde a aula de informática do ensino médio.

Depois de alguns minutos, eu tinha um gráfico de barras. Tudo o que eu precisava fazer era ajustá-lo para usar as cores do meu tema.

Gráfico de barras mostrando dados de vendas mensais por três anos no editor do WordPress.
Bloco de gráfico de barras.

As opções de personalização do plugin eram abundantes, mas equilibradas o suficiente para não se tornarem arrogantes. Eu só queria que combinasse com o design do meu tema sem muito barulho, e não demorou muito para que isso acontecesse.

Adicionei um bloco de gráfico de linha ao editor usando meus dados existentes. O único ajuste que precisei fazer foi a opção “Curve”. Eu queria que minhas linhas parecessem retas em vez de fluir em ondas. Eu já estava me perguntando se a equipe havia pensado em tudo antes que eu soubesse que precisava disso naquele momento.

Gráfico de linhas mostrando dados de vendas mensais por três anos no editor do WordPress.
Bloco de gráfico de linhas.

Para uma boa medida, testei o bloco Pie Chart. É um tipo de gráfico que posso usar ocasionalmente. No geral, teve um desempenho tão bom quanto os outros.

O recurso que eu perdi foi imprimir os dados para cada um dos segmentos de pizza na tela. Os dados estão disponíveis por meio de um pop-up ao passar o mouse ou focar, mas os visitantes não podem ver todos os dados do segmento de uma só vez.

Bloco de gráfico de pizza no editor do WordPress com um conjunto de dados desconhecido.
Bloco de gráfico de pizza.

É certo que não gastei muito tempo com os blocos Polar Area Chart e Radar Chart. Minha experiência com eles é inexistente em cenários do mundo real, então não tenho uma compreensão sólida se existem recursos que outros possam querer. Eu simplesmente os testei para ter certeza de que funcionavam. Como os outros blocos do set, não tive problemas.

Gostaria de ver uma opção de título ou legenda integrada aos blocos do plugin. No entanto, ambos são facilmente adicionados com um bloco de título ou parágrafo. Para combinar com o plano de fundo, o agrupamento em um bloco de grupo ajuda, conforme mostrado na captura de tela a seguir:

Gráfico de barras com dados de vendas mensais e um título acima dele.
Agrupando um gráfico para adicionar um título.

Alguns outros recursos de boas-vindas seriam opções de cores para as linhas dos eixos X e Y e o texto de dados, juntamente com o suporte a espaço de bloco ou margem. O espaçamento da legenda deixou um pouco a desejar, muitas vezes chegando muito perto da saída do gráfico. Ele tem várias opções de posicionamento, mas precisa de algum espaço em branco extra, especialmente quando fica na parte superior ou inferior.

No geral, não consegui encontrar muito do que reclamar. Hello Charts é um plugin que eu recomendaria para quem precisa de uma solução de gráfico que funcione como se fosse construído para o sistema de blocos do WordPress.

Fluxo de compras e configuração

Você pode obter um pouco de quilometragem dos atuais plugins de bloco gratuitos, mas o Hello Charts vale a atualização de preço. Pode até ser subvalorizado pelo valor. Se a equipe construir em importações de CSV, seria um roubo total.

Os usuários podem comprar os cinco tipos de blocos individuais por US $ 4 individualmente ou atualizar para obter todos por US $ 16. Eles oferecem atualizações vitalícias para um único site sem suporte. Há um nível mais pesado de US $ 199 para sites ilimitados e um ano de suporte.

Existe apenas um único plugin que os usuários devem instalar. Cada um dos tipos de bloco é empacotado no plugin. Os usuários estão tecnicamente comprando uma chave de licença para ativar cada um.

A Carbis me ofereceu códigos de desconto para testar como funcionava esse fluxo de compras e fornecer feedback. A equipe queria seguir um caminho diferente com os blocos de compra. Em vez de criar um acordo de tudo ou nada para os usuários, eles podem simplesmente comprar o que realmente precisam. “Então, se você precisa de um gráfico de barras, basta comprar um bloco de gráfico de barras”, disse Carbis. “Ou você pode obter todos os tipos de gráficos como um conjunto.”

Não tive problemas em passar pelo fluxo de compras. Comecei com o Gráfico de Barras, um bloco que eu precisaria com mais frequência do que os outros. Então, eu atualizei para o conjunto inteiro.

A única dificuldade que tive no início foi descobrir como ativar as licenças, já que o plugin não tinha uma página de configurações. O campo de licença está realmente na tela de administração de Plugins.

Listagem de plugins Hello Charts na tela de administração do WordPress Plugins. Tem um campo de chave de licença abaixo de sua descrição e dados.
Campo de chave de licença na tela Plugins.

A desvantagem de ter licenças separadas para cada tipo de bloco é que os usuários devem inserir a chave para um, enviá-lo, esperar a página recarregar, rolar para baixo até o plug-in e começar tudo de novo com outra licença. O processo foi tão doloroso que eu quis deixar de testar os tipos de gráficos nos quais não tinha interesse. No entanto, continuei, digitando chave de licença após chave de licença.

Sim, estou exagerando um pouco, mas seria muito mais fácil inserir várias chaves de licença de uma só vez ou não esperar o carregamento da página. Isso aconteceu de ser uma parte da experiência que não correspondeu ao padrão definido pelo restante do plug-in.