Я помню как во время учебы в школе мне довелось провести несколько долгих вечеров за составлением семейного дерева. Тогда я впервые в жизни столкнулась с неизбежными последствиями плохо спланированной работы: место на листе неожиданно закончилось и мне пришлось перерисовывать всю схему с самого начала. Это был полный провал!
Прошло время, и в нашу жизнь вошли новые технологии, которые предлагают множество инструментов для решения этой, в общем-то, банальной задачи. Также я поняла, что все вокруг в мире работает на основе на одних и тех же многоуровневых схем, которые используются повсюду: от простых организационных ИТ-диаграмм, до иерархической структуры компаний, имеющих множество отделов.
Несмотря на то, что появилось множество инструментов для создания органограмм вручную, необходимость в рисовании как таковом отпала. Теперь я могу просто передать данные в замечательный виджет Organogram библиотеки Webix и наслаждаться видом симпатичного чарта в браузере!
Никакой магии, просто код (и пакет Webix Pro):
Все, что нужно — немного настроек
Хм, чего-то не хватает. Голубые прямоугольники, помещенные в простой лэйаут, выглядят не так уж привлекательно. Для кастомизации виджетов разработчики Вебикс реализовали простой и понятный способ — всё можно настроить в конфигурации виджета, а то, что нельзя, задаётся в CSS.
Прежде всего, давайте посмотрим на JS конфигурацию. Здесь нам доступны два варианта размещения элементов:
- Дочерние элементы располагаются горизонтально под родительским элементом, с которым они соединяются голубой линией (погодите минутку, мы сделаем ее фиолетовой). Дополнительных настроек не требуется, это дефолтный лэйаут;
- Дочерние элементы располагаются под родительским вертикально, формируя списки зависимых элементов. Этот вариант размещения элементов устанавливается прямо в массиве данных с помощью свойства $type:
{ 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" }
]}
]
Если необходимо, элементы списка можно разместить в отдельных блоках. В этом случае конфигурация виджета будет выглядеть вот так:
view:"organogram",
type:{
listMarginX: 20, listMarginY: 20
}
});
Ну а теперь, давайте зададим стили для органограммы. Мы можем использовать весь потенциал CSS, чтобы установить цвета блоков и линий, а также задать темплейт элемента, вставить яркие иконки.. Чувствую себя настоящим художником!
Чем это может быть полезно?
Стилизованная Webix органограмма может содержать множество полезной информации: цветные надписи, картинки, интерактивные иконки, ссылку на страницы или email-ы.
Больше никаких проблем с размерами листов! Органограмма создается автоматически и подстраивается под размеры контента. Если органограмма больше контейнера, появятся полосы прокрутки.
Органограмма позволяет поддерживать данные в актуальном состоянии: после того, как задана конфигурация и установлены стили, вам нужно всего лишь обновить данные для перерисовки. Данные могут быть загружены во всех форматах, которые поддерживаются библиотекой Webix.
И, конечно, нужно сказать о динамике. Элементы можно фильтровать, открывать и закрывать! Кроме того, можно сделать виджет интерактивным с помощью многочисленных событий, уже знакомых вам из Webix Tree API.
Хватит болтать, пора экспериментировать! Запускайте сэмплы, знакомьтесь с документацией и переходите к практике в редакторе кода. Надеюсь, ваша жизнь заиграет яркими красками, оставаясь при этом хорошо организованной и понятной.
