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

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

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

Gridster.js

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

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

За дополнительной информацией обратитесь к документации.

Gridster.js

Исходный код

angular-gridster

Это gridster-подобная реализация контейнера виджетов для фреймворка Angular JS. В его арсенале имеются те же функции, что и у плагина gridster из библиотеки jQuery, но с некоторыми дополнительными возможностями.

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

angular-gridster

Исходный код

gridstack.js

Gridstack.js является улучшенной версией контейнера виджетов gridster.js из библиотеки jQuery. В нём также имеется поддержка нескольких колонок и функция drag-and-drop. Он позволяет создавать адаптивные панели для фреймворка bootstrap версии 3 с дружественным интерфейсом.
Кроме того, он отлично работает вместе с библиотеками knockout.js, angular.js и сенсорными устройствами. Ознакомьтесь с документацией на gridstack.js.

gridstack.js

Исходный код

jQueryGridly

Gridly– ещё один плагин jQuery с возможностью перетаскивания компонентов и изменения размера сетки. Посмотреть на него можно здесь.

jQuery Gridly

Исходный код

Packery

Packery — это библиотека JavaScript и плагин jQuery, позволяющий создавать панели, на которых компоненты, поддерживающие перетаскивание, располагаются без зазора. В нём реализован алгоритм упаковки пакетов, позволяющий заполнить пустые промежутки.

Код подходит для создания информационных панелей drag-and-drop и бесшовных галерей изображений в стиле «кирпичная кладка». Дополнительная информация о Packery доступна по ссылке.

Packery

Исходный код

GridList

Библиотека jQuery представляет собой надстройку поверх класса GridList, который преобразует координаты компонентов в интерактивные элементы DOM с возможностью перетаскивания.

Посмотреть на демо-версию GridList можно здесь.

GridList

Исходный код

Dazzle

Dazzle — это библиотека для разработки панелей под фреймворк React JS. Она независима от других библиотек для создания интерфейса, но легко интегрируется с ними.

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

Dazzle

Исходный код

Выводы

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

Original

7 библиотек JavaScript для разработки информационных панелей
Оценка