Что такое Vue

Vue.js - это интерфейсный фреймворк, который идет бок о бок с такими основными фреймворками, как React и Angular, когда дело доходит до выбора фреймворка для создания клиентской части для современных приложений.

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

Термин «прогрессивный фреймворк» был придуман его создателем, и теперь он широко используется при упоминании Vue.

Популярность Vue

После того, как он был выпущен и размещен на Hacker News в 2014 году, его популярность буквально взлетела до небес.

На графике в Обзоре состояния JavaScript в 2019 году вы можете заметить положительную динамику отношения к Vue: количество тех, кто использовал его и хотел бы использовать его снова, с годами увеличивается.

Еще один важный аспект, который я хотел бы выделить, - это открытый характер Vue. С момента своего первого выпуска он регулярно улучшался. Его развитие осуществляется сильным и активным сообществом и преданной командой. И несмотря на меньшее сообщество, чем у React и Angular, Vue.js - хороший выбор для новых проектов.

Кто стоит за фреймворком

Facebook стоит за React; Google отстает от Angular. Возникает естественный вопрос - кто стоит за Vue.js?

Эван Ю - центральная фигура Vue. Его двигала идея создать фреймворк с минимальным ядром, но такой, который может работать со сложными приложениями.

Многие представленные функции были вдохновлены такими законченными фреймворками, как Ember и Angular.

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

Он также выбирает наиболее полезные идеи React, а именно скорость, виртуальную модель DOM, компоненты реактивного и составного представления, маршрутизацию и глобальное управление состоянием, которые делегированы сопутствующим библиотекам. Говоря о привязке данных и компонентах, Vue.js ближе к React, чем к любым другим фреймворкам. Итак, если у вас был предыдущий опыт работы с React, процесс перехода на Vue должен быть плавным.

Да, Vue включает в себя множество функций популярных фреймворков, но также предлагает множество функций, которые делают его уникальным:

  • Односторонняя привязка данных между компонентами.
  • Более четкое разделение директив и компонентов.
  • Прозрачная система наблюдения за зависимостями с асинхронной очередью.
  • Стилизация с помощью тегов `style` прямо в однофайловых компонентах.
  • Генератор проектов CLI.
  • Собственные функции для нативной разработки (NativeScript-Vu и Weex).
  • Необязательный ввод: вы можете решить, использовать ли TypeScript в вашем проекте или нет.

Кроме того, он гибкий и более адаптируемый к широкому кругу проектов.

Библиотеки визуализации данных

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

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

Список библиотек визуализации данных для Vue также может пригодиться при выборе компонентов для собственной встроенной BI разработки.

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

Надеюсь, вы попробуете их все и составите собственное суждение о каждом из них.

Начнем с обзора сетей данных!

Бринтум Грид 🔷

Bryntum Grid относится к категории компонентов сетки данных. Это часть более крупного пакета компонентов пользовательского интерфейса для веб-проектов.

С первого взгляда поражает обилием функций, но я выделю самые главные.

Сетка обеспечивает основные функции, которые могут понадобиться для отчетности:

  • группировка данных по столбцам
  • фильтрация по значениям и датам
  • сортировка внутри группы
  • расширение и сжатие
  • отображение групповых сводок.

Что касается настройки, пользователи могут

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

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

Обзор основан на тестировании только демоверсий, доступных на сайте. К сожалению, мне не удалось найти пробную версию для тестирования. Поэтому мне сложно делать какие-либо выводы о производительности сети.

Демо

Vue ag-grid 🔶

Ag-grid - это веб-компонент, изначально разработанный как сетка данных для отображения данных, поступающих из источника данных. С одной из последних версий он также начал поддерживать режим поворота.

Основные функции отчетности:

  • фильтрация столбцов
  • группировка строк
  • скопления
  • Экспорт в Excel
  • интерактивность
  • закрепление столбцов, что повышает удобочитаемость отчета.

В руководствах подробно рассматриваются все аспекты работы с сеткой, а также возможности ее настройки.

Демо

Хотя сетки являются отличным инструментом для отображения данных в том виде, в каком они поступают из источника данных, существует несколько бизнес-примеров, когда вам нужно представить данные в обобщенной форме. Здесь пригодятся сводные сетки.

Сводная таблица Flexmonster 🟥

Flexmonster Pivot - это компонент сводной веб-таблицы, который интегрируется с Vue.js.

В нем есть все функции, необходимые для дизайнера отчетов:

  • функции агрегирования
  • фильтрация, группировка
  • условное и числовое форматирование
  • вычисляемые поля
  • просверлить
  • сохранение и экспорт отчетов.

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

Говоря о поддерживаемых источниках данных, стоит упомянуть следующие: базы данных CSV, JSON, SQL и NoSQL, Elasticsearch и OLAP кубы. А начиная с последней версии, можно связываться с компонентом через API и отправлять агрегированные данные на стороне сервера. Этот протокол позволяет работать с огромными объемами данных за счет вычислений на стороне сервера.

Компонент полностью настраиваемый. Вы можете:

  • изменить внешний вид и / или функциональность панели инструментов
  • применить темы отчетов
  • изменить макет полей
  • перевести компонент на нужный язык с помощью одного файла локализации.

Кроме того, он поставляется с сводными диаграммами, к которым вы можете переключиться из режима сетки.

Его оболочка Vue поставляется в виде пакета npm. Мне понравился процесс интеграции - он оказался легким. Вы можете зарегистрировать сводную таблицу как локальный компонент или установить ее как плагин. Плагин доступен из любого места вашего приложения. При локальной регистрации модуля он доступен только в том месте, где он был определен (например, App.vue).

Демо

DevExtreme HTML5 JavaScript Pivot Grid 🔷

DevExtreme Pivot Grid - еще один компонент сводной таблицы на стороне клиента, который вы можете добавить в приложение Vue.

Основные функции отчетности включают:

  • группировка и обобщение
  • фильтрация и сортировка
  • перетаскивание строки.

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

Компонент можно настроить. Например, с помощью пользовательского интерфейса ThemeBuilder или DevExtreme CLI вы можете создавать собственные темы.

Вам также может понравиться возможность привязать диаграмму к сетке и отображать агрегированные данные на диаграмме.

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

Демо

Вот базовая демонстрация с интеграцией Vue для изучения.

И постепенно мы дошли до графиков!

ZingChart Vue 💎

ZingChart - это библиотека диаграмм JavaScript, которую можно интегрировать с приложением Vue.

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

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

Но я хотел бы обратить ваше внимание на несколько типов диаграмм, которые я классифицирую как самые необычные:

Во время тестирования с данными диаграммы показали высокую эффективность. Они были визуализированы плавно, несмотря на то, что на графике было много точек.

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

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

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

Vue Apexcharts 🟩

Apexcharts - это библиотека JavaScript с набором диаграмм, необходимых для основных задач визуализации данных.

Библиотека является с открытым исходным кодом, что означает, что вы можете вносить свой вклад в ее развитие.

Я восхищаюсь тем, как разработчики подошли к интеграции Vue: позаботившись о других разработчиках, они подготовили простой в использовании компонент-оболочку, который вы можете установить из npm. Это упрощает интеграцию диаграмм с экосистемой Vue.js.

Что касается визуальных эффектов, есть много вещей, которые вам понравятся:

  • плавная анимация
  • сделать графики интерактивными с событиями.

Графики оснащены всеми необходимыми функциями: всплывающими подсказками, масштабированием, прокруткой, легендами. Кроме того, они отзывчивы - на настольном компьютере или мобильном устройстве диаграммы выглядят замечательно.

Попробуйте изучить галерею графиков, чтобы найти ту, которая вам нужна.

AnyChart 🟦

И последнее, но не менее важное - AnyChart. AnyChart состоит из семейства диаграмм.

Начать работу с AnyChart в проекте Vue просто. С оберткой вы можете начать работать с Vue за считанные минуты.

Я рекомендую вам заглянуть в богатую галерею образцов диаграмм. Какой бы ни была ваша цель визуализации данных, вы обязательно найдете то, что вам нужно. Если у вас есть финансовые данные для визуализации, попробуйте AnyStock. Для географических данных используйте AnyMap. Чтобы отслеживать ключевые показатели эффективности и прогресс в организации, попробуйте AnyGantt.

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

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

Я верю, что эти диаграммы вдохновят вас так же, как и меня.

Заключительные слова

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

Мы будем благодарны за ваш отзыв: давайте поделимся мыслями и опытом в комментариях ниже. Какие еще библиотеки визуализации данных для проектов Vue вы используете?