В инстаграмме жизни нет, Organogram — вот наш ответ!

Я помню как во время учебы в школе мне довелось провести несколько долгих вечеров за составлением семейного дерева. Тогда я впервые в жизни столкнулась с неизбежными последствиями плохо спланированной работы: место на листе неожиданно закончилось и мне пришлось перерисовывать всю схему с самого начала. Это был полный провал!

Organogram

 

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

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

Никакой магии, просто код (и пакет Webix Pro):

webix.ui({ view:"organogram", data: chart_data });

Webix_organogram

Демо

Все, что нужно — немного настроек

Хм, чего-то не хватает. Голубые прямоугольники, помещенные в простой лэйаут, выглядят не так уж привлекательно. Для кастомизации виджетов разработчики Вебикс реализовали простой и понятный способ — всё можно настроить в конфигурации виджета, а то, что нельзя, задаётся в CSS.

Прежде всего, давайте посмотрим на JS конфигурацию. Здесь нам доступны два варианта размещения элементов:

  • Дочерние элементы располагаются горизонтально под родительским элементом, с которым они соединяются голубой линией (погодите минутку, мы сделаем ее фиолетовой). Дополнительных настроек не требуется, это дефолтный лэйаут;
  • Дочерние элементы располагаются под родительским вертикально, формируя списки зависимых элементов. Этот вариант размещения элементов устанавливается прямо в массиве данных с помощью свойства $type:

data:[
{ id:"1.1.2", value:"Development", $type: "list", data:[
        { id:"1.1.2.1", value:"- Faculty development workshops" },
        { id:"1.1.2.2", value:"- Student development" }
        ]}
]

Webix_organogram

Демо

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

 

webix.ui({
view:"organogram",
type:{
                listMarginX: 20, listMarginY: 20
}
});

 

Демо

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

Webix_organogram

Демо

Чем это может быть полезно?

Стилизованная Webix органограмма может содержать множество полезной информации: цветные надписи, картинки, интерактивные иконки, ссылку на страницы или email-ы.

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

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

И, конечно, нужно сказать о динамике. Элементы можно фильтровать, открывать и закрывать! Кроме того, можно сделать виджет интерактивным с помощью многочисленных событий, уже знакомых вам из Webix Tree API.

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

Если вдруг вы пропустили последний релиз Webix 3.3, самое время узнать подробности!