Webix 8.3: Новый виджет Diagram, обновления Scheduler, Gantt и Spreadsheet

Не знаю как у вас, а на родине Webix выдалась самая холодная весна на моей памяти. Тем не менее, это только добавляет нам мотивации работать усерднее и оставаться на пике продуктивности, чтобы радовать наших клиентов новыми возможностями. Сегодня мы хотим представить новый комплексный виджет Webix Diagram, а также дополнительные возможности в виде Таймлайн и Секций для Scheduler, разделение задач для Gantt и улучшения в использовании Spreadsheet.

Заинтригованы? Тогда давайте рассмотрим все в деталях.

Обзор виджета Diagram

Webix Diagram, новинка этого релиза, пришел на смену старому доброму виджету Organogram. Он обладает целым рядом замечательных особенностей и преимуществ, которые смогут превратить его в бестселлер.

Посмотреть код >>

Творите без ограничений

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

  • Block diagram (Структурная схема)
  • Flowchart (Блок-схема)
  • Organizational Chart (Организационная схема)
  • Decision Tree (Дерево принятия решений)
  • UML Class and UML Activity diagrams (Диаграммы UML Классов и UML Активности)
  • Network diagram (Сетевая диаграмма)
  • Venn diagram (Диаграмма Венна)
  • Fishbone diagram (Диаграмма Исикавы)
  • Пролистайте эти примеры, они обязательно вам понравятся.

    Авторазмещение

    Посмотреть код >>

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

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

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

    SVG формы и стилизация

    Посмотреть код >>

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

    Блоки виджета Diagram могут быть стилизованы с помощью CSS. Существует также встроенная стилизация для элементов организационной диаграммы и текстовых блоков наряду с понятным API для применения собственных стилей CSS.

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

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

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

    Посмотреть код >>

    API для работы с данными

    Diagram имеет стандартный Webix API для загрузки данных. Для блоков и связей можно использовать данные в формате JSON и XML.

    Для вашего удобства предусмотрена возможность использовать стандартный API библиотеки Webix для работы с данными виджета Diagram. Вы можете выполнять все CRUD операции (такие как создание, чтение, обновление и удаление) над блоками, а также фильтровать и сортировать их.

    Визуальный редактор уже в пути

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

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

    Лицензирование

    Новый виджет Diagram не входит в базовый пакет Webix Core и требует специальной лицензии. Узнать о правилах и условиях, а также получить пробную версию виджета вы можете на странице Лицензирование и цены.

    Таймлайн и Секции для Scheduler

    Таймлайн

    Посмотреть код >>

    Это действительно наиболее ожидаемая фича со времени выхода первого релиза Scheduler:) Речь идет об отдельном режиме Таймлайн, который можно подключить при помощи всего лишь одного параметра! Сам таймлайн представлен в трех режимах: день, неделя и месяц. События в нем сгруппированы в виде линий, которые вертикально.

    Секции

    Посмотреть код >>

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

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

    Gantt: Разделение задач

    Посмотреть код >>

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

    Пользователи могут сворачивать и разворачивать разделённые задачи через форму, а также создавать новые сегменты задач на панели диаграммы при помощи перетаскивания.

    Spreadsheet

    Экспорт скрытых рядов и столбцов

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

    При экспорте файлов в формате PDF и CSV скрытые ряды и столбцы учитываться не будут.

    Настройка легенды и лейблы для встроенных диаграмм

    Посмотреть код >>

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

    Символ валюты в окне форматирования

    Посмотреть код >>

    Spreadsheet версии 8.3 позволяет пользователям выбрать символ валюты при настройке формата цены в ячейках. По умолчанию, символы валют представлены следующими денежными единицами: доллар США, евро, юань, португальский реал и российский рубль. У вас также будет возможность установить собственный набор символов через локаль.

    Что нового

    Дополнительную информацию о возможностях и особенностях релиза Webix 8.3 можно найти на странице Что нового. Чтобы получить саму библиотеку, установите ее через npm, Client area или кликните по большой фиолетовой кнопке на странице загрузки, после чего начнется скачивание архива.

    Скачать Webix 8.3

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