Hello Charts запускает собственный опыт построения диаграмм для редактора блоков

Опубликовано: 2021-12-03

Люк Карбис и Роб Стинсон, двое из трех человек из команды Block Lab, которую WP Engine набрал в 2020 году, снова вместе над новым проектом. На этот раз к ним присоединяется Байрон Кит. Трио захватывает пространство диаграмм WordPress с помощью набора блоков под названием Hello Charts.

«Некоторые люди заключают сделки в Черную пятницу», — написала команда на прошлой неделе во втором твите с июля. «Мы запускаем целый продукт!»

Карбис отметил, что команда стремилась создать собственный плагин для редактора блоков. Здесь нет экранов администратора или страниц настроек, а пользователь работает только из редактора.

В маркетинговых материалах на главной странице веб-сайта утверждается, что Hello Charts — это «первый плагин для создания диаграмм, созданный первым блочным редактором». Тем не менее, SB Charts существует уже почти год, а Chart Block появился в каталоге плагинов WordPress несколько недель назад. Charts Blocks for Gutenberg, который поддерживает импорт CSV, был впервые выпущен полгода назад, но с тех пор не обновлялся.

Претензия на первенство, возможно, является ошибкой в ​​маркетинге. Единственная причина, по которой я сразу заметил это, заключается в том, что я некоторое время внимательно следил за подобными плагинами, надеясь найти достойное решение для диаграмм для редактора блоков. Хотя технически Hello Charts может быть не первым, он предлагает лучший пользовательский опыт.

В большинстве случаев я полагаюсь на гистограммы и линейные диаграммы. Однако плагин предлагает всего пять типов блоков:

  • Гистограмма
  • Линейный график
  • Круговая диаграмма
  • Карта полярных областей
  • Радарная диаграмма

Каждый из них работает почти одинаково при вводе данных и настройке вывода. Для каждого типа есть несколько параметров и элементов управления. Кроме того, пользователи могут переходить от одного блока диаграммы к другому и обратно одним нажатием кнопки без потери данных.

Ознакомившись с вариантами, я построил трехлетнюю диаграмму данных о продажах продуктов по месяцам. Я начал с блока гистограммы, который имел наибольший смысл. В каждом из блоков есть кнопка «Редактировать данные диаграммы». Щелкнув по нему, вы откроете оверлей на экране, который работает как обычная программа для работы с электронными таблицами.

Всплывающее наложение в редакторе WordPress для ввода данных диаграммы, которое выглядит как программа для работы с электронными таблицами.
Наложение данных диаграммы.

Пользователи могут перемещаться по каждой ячейке, добавляя данные и создавая новые наборы данных или строки. Существуют варианты дублирования наборов данных или добавления новых до/после, нажав кнопку с многоточием. Все это казалось простым для того, кто не тратил много времени на работу с электронными таблицами со школьного компьютерного класса.

Через пару минут у меня была гистограмма. Все, что мне нужно было сделать, это настроить его, чтобы использовать цвета моей темы.

Гистограмма, показывающая ежемесячные данные о продажах за три года в редакторе WordPress.
Блок гистограммы.

Возможности настройки плагина были многочисленны, но достаточно сбалансированы, чтобы не стать властными. Я просто хотел, чтобы он соответствовал дизайну моей темы без лишней суеты, и это не заняло много времени.

Я добавил в редактор блок Line Chart, используя существующие данные. Единственная настройка, которую мне нужно было сделать, это параметр «Кривая». Я хотел, чтобы мои линии выглядели прямыми, а не текли волнами. Мне уже было интересно, подумала ли команда обо всем, прежде чем я понял, что мне это нужно в тот момент.

Линейная диаграмма, показывающая ежемесячные данные о продажах за три года в редакторе WordPress.
Блок линейной диаграммы.

На всякий случай я протестировал блок круговой диаграммы. Это тип диаграммы, который я могу иногда использовать. В целом, он работал так же, как и другие.

Функция, которую я пропустил, заключалась в печати данных для каждого сегмента круговой диаграммы на экране. Данные доступны через всплывающее окно при наведении или фокусе, но посетители не могут видеть все данные сегмента сразу.

Блок круговой диаграммы в редакторе WordPress с неизвестным набором данных.
Блок круговой диаграммы.

По общему признанию, я не тратил много времени на блоки Polar Area Chart и Radar Chart. Мой опыт работы с ними отсутствует в реальных сценариях, поэтому у меня нет четкого представления о том, есть ли функции, которые могут понадобиться другим. Я просто проверил их, чтобы убедиться, что они работают. Как и другие блоки в наборе, я не столкнулся с проблемами.

Я хотел бы, чтобы опция заголовка или подписи была интегрирована в блоки плагина. Однако и то, и другое легко добавить с помощью блока «Заголовок» или «Абзац». Чтобы соответствовать фону, помогает обтекание блоком Group, как показано на следующем снимке экрана:

Гистограмма с ежемесячными данными о продажах и заголовком над ней.
Группировка диаграммы для добавления заголовка.

Парой других полезных функций будут варианты цвета для линий осей X и Y и текста данных, а также поддержка блоков или полей. Расстояние между легендами оставляло желать лучшего, часто слишком близко к выходным данным диаграммы. У него есть несколько вариантов позиционирования, но ему нужны дополнительные пробелы, особенно когда он находится сверху или снизу.

В общем, я не нашел, к чему придраться. Hello Charts — это плагин, который я бы порекомендовал всем, кому нужно решение для диаграмм, которое работает так, как будто оно было создано для блочной системы WordPress.

Процесс покупки и настройка

Вы можете получить небольшую выгоду от текущих бесплатных блочных плагинов, но Hello Charts стоит того, чтобы обновить цену. Это может быть даже занижено по стоимости. Если команда создаст импорт CSV, это будет прямой кражей.

Пользователи могут купить пять отдельных типов блоков за 4 доллара по отдельности или обновить, чтобы получить их все за 16 долларов. Они предлагают пожизненные обновления для одного сайта без поддержки. Существует более высокий уровень в 199 долларов за неограниченное количество сайтов и год поддержки.

Существует только один плагин, который должны установить пользователи. Каждый из типов блоков включен в плагин. Технически пользователи покупают лицензионный ключ для активации каждого из них.

Carbis предложил мне коды скидок, чтобы проверить, как работает этот процесс покупки, и оставить отзыв. Команда хотела пойти по другому пути с покупкой блоков. Вместо того, чтобы заключать для пользователей сделку по принципу «все или ничего», они могли бы просто купить то, что им действительно нужно. «Поэтому, если вам нужна гистограмма, просто купите блок гистограммы», — сказал Карбис. «Или вы можете получить все типы диаграмм в виде набора».

У меня не было проблем с прохождением процесса покупки. Я начал с гистограммы, блока, который мне понадобится чаще, чем другие. Затем я обновился до всего набора.

Единственная заминка, с которой я столкнулся поначалу, заключалась в том, чтобы выяснить, как активировать лицензии, поскольку у плагина не было страницы настроек. Поле лицензии фактически находится на экране администратора плагинов.

Список плагинов Hello Charts на экране администратора плагинов WordPress. У него есть поле лицензионного ключа под его описанием и данными.
Поле лицензионного ключа на экране плагинов.

Недостатком наличия отдельных лицензий для каждого типа блока является то, что пользователи должны ввести ключ для одного, отправить его, дождаться перезагрузки страницы, прокрутить вниз до плагина и начать все сначала с другой лицензией. Процесс был настолько болезненным, что я хотел отказаться от тестирования типов диаграмм, которые меня не интересовали. Тем не менее, я продолжал, вводя лицензионный ключ за лицензионным ключом.

Да, я немного преувеличиваю, но было бы гораздо проще ввести сразу несколько лицензионных ключей или не ждать загрузки страницы. Просто так случилось, что это была часть опыта, которая не соответствовала стандарту, установленному остальной частью плагина.