В этой статье мы будем сравнивать возможности 2 виджетов разных поколений, которые предназначены для работы с диаграммами. Речь пойдет об устаревшем виджете Organogram и новинке весеннего релиза 8.3 — виджете Diagram.
Оба виджета позволяют создавать диаграммы, но потенциал у них далеко не равный. Для примера, можно привести аналогию с возможностями трехколесного и спортивного велосипедов. В этой ситуации, Organogram можно рассматривать как трехколесный велосипед. На нем вы сможете передвигаться, но на длинных дистанциях от такого велосипеда будет мало пользы.
Совсем другое дело — виджет Diagram. Он как спортивный велосипед — быстрый, надежный и маневренный. Его возможности позволяют чувствовать себя уверенно как на коротких, так и на длинных дистанциях.
Давайте от аналогий перейдем непосредственно к разбору возможностей этих виджетов.
Маркетинговые отличия
На текущий момент, Organogram еще входит в стандартный пакет Webix Core, но виджет больше не поддерживается (это касается обновлений и багов). К тому же, начиная с версии 9.0, Organogram будет исключен из пакета Webix Core, так как на смену ему пришел комплексный виджет Diagram.
Новый виджет Diagram не будет входить в основную библиотеку Webix. Чтобы приобрести Diagram, вам нужно ознакомиться с ценами на существующие пакеты и выбрать подходящий именно для вас. Подробнее об этом вы можете узнать на странице лицензирования.
Технические отличия
Структура элементов диаграммы
Organogram поддерживает только древовидные отношения между блоками. Для отрисовки диаграммы, виджету необходимо передать соответствующие древовидные данные.
В новом виджете Diagram уже нет таких ограничений. Помимо древовидной зависимости между блоками, вы можете задавать любую удобную для вас структуру. Более того, теперь необходимо передавать данные отдельно для блоков и их коннекторов. Такой подход позволяет существенно расширить возможности для построения диаграмм.
SVG фигуры блоков
У виджета Organogram нет встроенной поддержки различных SVG фигур. Каждый блок диаграммы — это по сути html элемент, которому можно задать необходимый вид при помощи CSS свойств.
Помимо стандартных блоков, Diagram позволяет работать с любыми SVG фигурами. Вы можете использовать встроенные фигуры, изменять и стилизовать их на свое усмотрение, а также добавлять и настраивать собственные SVG фигуры. Здесь ограничения накладывает лишь ваше воображение.
Размещение блоков и коннекторов
Organogram поддерживает только автоматическую расстановку блоков и коннекторов между ними. Авторазмещение не всегда удобно, особенно, когда требуется высокая точность.
Diagram, помимо стандартного авторазмещения, позволяет задавать произвольные координаты для блоков и их коннекторов. Вы также можете соединять любые блоки диаграммы.
Стилизация коннекторов
В Organogram вы не можете стилизовать и управлять коннекторами между блоками. Они расставляются автоматически, в зависимости от структуры древовидных данных.
Diagram позволяет управлять как размещением коннекторов, так и их внешним видом. Вы можете задать тип коннектора, координаты для его размещения, добавить стрелку и стилизовать её на свое усмотрение.
Работа с отступами
Система расчета отступов виджета Diagram немного отличается от Organogram. Вы можете задать вертикальный и горизонтальный отступы относительно стандартного размещения блоков с помощью нового свойства margin. Эти же отступы можно задать отдельно через соответствующие свойства marginX и marginY. В Organogram эти два свойства задают непосредственное расстояние между блоками. Для блоков списка можно задать отдельный отступ только через свойство listMarginX.
Миграция c Organogram на Diagram
Если вы уже привыкли работать с Organogram, и думаете, что переход на Diagram потребует много времени и усилий, то спешу вас уверить, что это не так. В примерах ниже вы можете увидеть, как создать диаграмму сначала на Organogram, а потом реализовать ее на новом виджете Diagram.
За образец мы возьмем вот такую диаграмму с древовидной структурой:
Organogram
Код Organogram будет выглядеть следующим образом:
view:"organogram",
item:{
width: 110,
height: 70
},
select:true,
data:tree
});
Древовидные данные для этой диаграммы загружаются через свойство data, и выглядят так:
{ id:"1", value:"Managing Director", data:[
{ id:"1.1", value:"Finance Manager", data:[
{ id:"1.1.1", value:"Accountant" }
]},
{ id:"1.2", value:"Base Manager", data:[
{ id:"1.2.1", value:"Security" },
{ id:"1.2.2", value:"Store Manager" },
{ id:"1.2.3", value:"Office Assistant" }
]},
{ id:"1.3", value:"Business Development Manager", data:[
{ id:"1.3.1", value:"Marketing Executive" }
]}
]}
];
Посмотреть на работу виджета Organogram и поэкспериментировать с данными можно здесь.
Diagram
Теперь давайте реализуем такую же диаграмму с помощью виджета Diagram. Код будет выглядеть следующим образом:
view:"diagram",
item:{
width: 110,
height: 70
},
select:true,
data:tree,
links:tree_links
});
Как вы можете убедиться, отличия незначительные. Необходимо учесть то, что для Diagram нужно указать 2 источника данных, отдельно для блоков и для их коннекторов.
Данные для блоков:
{ id:"1", value:"Managing Director" },
{ id:"1.1", value:"Base Manager" },
{ id:"1.1.1", value:"Store Manager" },
{ id:"1.1.2", value:"Office Assistant" },
{ id:"1.1.3", value:"Security" },
{ id:"1.2", value:"Business Development Manager" },
{ id:"1.2.1", value:"Marketing Executive" },
{ id:"1.3", value:"Finance Manager" },
{ id:"1.3.1", value:"Accountant" }
];
Данные для коннекторов:
{ source:"1", target:"1.1" },
{ source:"1.1", target:"1.1.1" },
{ source:"1.1", target:"1.1.2" },
{ source:"1.1", target:"1.1.3" },
{ source:"1", target:"1.2" },
{ source:"1.2", target:"1.2.1" },
{ source:"1", target:"1.3" },
{ source:"1.3", target:"1.3.1" }
];
Как видите, переход не требует больших усилий. Посмотреть на работу виджета и поэкспериментировать с данными можно в здесь.
Немного о будущем
Команда Webix больше не будет поддерживать виджет Organogram. Начиная с версии 9.0, Organogram не будет входить в стандартный пакет Webix Core.
В тоже время, наши разработчики активно работают над тем, чтобы пользователи нового виджета Diagram смогли управлять диаграммами через визуальный редактор.
Заключение
В этой статье мы рассмотрели основные различия между виджетами Organogram и Diagram. Упомянули о нюансах маркетинга, технических особенностях и о простоте перехода от устаревшего Organogram к новому комплексному виджету Diagram. Узнать подробнее о всех возможностях нового виджета Diagram вы можете на странице документации.
