Что такое 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.
Прежде всего, хочу отметить визуальную эстетику графиков - это не оставит вас равнодушными. Они подойдут к любому проекту.
Стоит окунуться в галерею, чтобы найти там все разнообразие графиков. Каждый тип диаграммы может иметь множество подтипов, что делает всю коллекцию огромной.
Но я хотел бы обратить ваше внимание на несколько типов диаграмм, которые я классифицирую как самые необычные:
- Древовидная карта - настоящая находка. Это позволяет хранить данные аккуратно и точно.
- Радарная диаграмма для отображения данных в радиальном порядке. Вы можете использовать это для сравнения.
- Rankflow.
- Диаграммы Венна, чтобы показать взаимосвязь между несколькими вещами.
- Красиво выглядящая диаграмма аккордов.
Во время тестирования с данными диаграммы показали высокую эффективность. Они были визуализированы плавно, несмотря на то, что на графике было много точек.
Поддержка настраиваемых модулей может пригодиться, если вам нужно добавить настраиваемые функции к диаграммам.
Еще одна замечательная особенность заключается в том, что вы можете самостоятельно создать пакет с диаграммами, используя Build Generator. Просто выберите модули, чтобы включить их в один файл JavaScript.
Имея множество доступных методов и событий API, вы можете реализовать множество настраиваемой логики для компонента.
Vue Apexcharts 🟩
Apexcharts - это библиотека JavaScript с набором диаграмм, необходимых для основных задач визуализации данных.
Библиотека является с открытым исходным кодом, что означает, что вы можете вносить свой вклад в ее развитие.
Я восхищаюсь тем, как разработчики подошли к интеграции Vue: позаботившись о других разработчиках, они подготовили простой в использовании компонент-оболочку, который вы можете установить из npm. Это упрощает интеграцию диаграмм с экосистемой Vue.js.
Что касается визуальных эффектов, есть много вещей, которые вам понравятся:
- плавная анимация
- сделать графики интерактивными с событиями.
Графики оснащены всеми необходимыми функциями: всплывающими подсказками, масштабированием, прокруткой, легендами. Кроме того, они отзывчивы - на настольном компьютере или мобильном устройстве диаграммы выглядят замечательно.
Попробуйте изучить галерею графиков, чтобы найти ту, которая вам нужна.
AnyChart 🟦
И последнее, но не менее важное - AnyChart. AnyChart состоит из семейства диаграмм.
Начать работу с AnyChart в проекте Vue просто. С оберткой вы можете начать работать с Vue за считанные минуты.
Я рекомендую вам заглянуть в богатую галерею образцов диаграмм. Какой бы ни была ваша цель визуализации данных, вы обязательно найдете то, что вам нужно. Если у вас есть финансовые данные для визуализации, попробуйте AnyStock. Для географических данных используйте AnyMap. Чтобы отслеживать ключевые показатели эффективности и прогресс в организации, попробуйте AnyGantt.
Мне нравится, как создатели описывают цели каждой диаграммы, показывая реальные варианты использования. Такой подход помогает понять, как можно использовать диаграммы с данными из разных отраслей.
Каждую таблицу можно тематически оформить стильными скинами. Вы даже можете экспортировать диаграммы для публикации в социальных сетях, реализовав индивидуальную интеграцию с платформами социальных сетей.
Я верю, что эти диаграммы вдохновят вас так же, как и меня.
Заключительные слова
Я очень надеюсь, что некоторые из этих библиотек найдут свое место в вашем проекте визуализации данных и заставят ваши данные говорить красноречиво.
Мы будем благодарны за ваш отзыв: давайте поделимся мыслями и опытом в комментариях ниже. Какие еще библиотеки визуализации данных для проектов Vue вы используете?