- PVSM.RU - https://www.pvsm.ru -
Atlassian [1] Confluence [2] — мощное решение для развертывания Enterprise Wiki в организации (хотя, нет никаких технических проблем с тем, чтобы использовать его и дома — лицензия на 10 пользователей стоит всего 10 американских долларов в год). И лично мне Confluence нравится тем, что имеет дружелюбный интерфейс и позволяет интуитивно понятно редактировать контент, с легкостью дополняя его визуальными составляющими, что позволяет в итоге получить красивые и удобные для просмотра страницы. Кстати, этот пост тоже написан в Confluence.
Как известно многим, визуализация имеет большое влияние на то, как контент будет восприниматься. В последнее время в любых соцсетях и тематических сообществах прослеживается четкий тренд: если ваш пост не содержит визуальной информации, например, тех же картинок с котиками, его мало кто будет читать. А если он еще и длиннее одной страницы… Итак, пользоваться графикой нужно. И тут я сошлюсь на пост комрадов из DevExpress [3], где они привели интересные факты о визуализации (увы, без пруфов, но цифры на мой взгляд очень похожи на правду):
Учитывая столь очевидную полезность грамотной визуализации и корпоративную направленность Confluence, попробуем немного порисовать прямо на страничках вики. Рисовать там можно достаточно много вещей, но вот «из коробки» функционал позволяет разве что нарисовать графики и вставить картинки. Но это нас не остановит, поскольку в экосистеме Atlassian силами сторонних вендоров производится огромное количество аддонов на любой вкус и цвет, причем даже самый крутой и дорогой продукт можно взять и попробовать бесплатно в течение месяца. И так, если память не изменяет, до шести раз подряд, что дает совершенно легальные полгода на раздумья, что будет легче — начать себе отказывать в удобстве от аддона или задушить проклятое земноводное прописать затраты в бюджет и купить наконец продукт.
Как я упоминал выше, «из коробки» порисовать не очень-то получится. Зато, если мы обратим свое внимание на аддоны, то для рисования разного рода диаграмм их найдется немало. Попробуем рассмотреть те, которые больше всего на слуху и первые попались в заботливые руки поисковой выдачи. В этот список попали:
Первые четыре продукта, с моей точки зрения, очень похожи друг на друга. Возможно, даже имел факт «заимствования» тех или иных элементов функциональности друг у друга. Они понимают формат Visio, что позволяет не ломать голову над вопросом «а зачем нам все наши диаграммы перерисовывать» — можно просто импортировать имеющиеся файлы. Очень похож и процесс рисования диаграмм — из библиотек изображений на страницу добавляются элементы, связи между ними, подписи. Многие из поставщиков аддонов предлагают использовать их веб-версии диаграмм.
Несколько особняком стоит Graphviz Diagrams от Боба Свифта [10]. Этот продукт несколько нарушает принципы экосистемы Atlassian, где все реализовано очень просто и интуитивно понятно, но в нем есть свой особый шарм. Да, вам потребуется не просто добавить аддон в Confluence, но еще и поставить на ваш сервер библиотеку визуализации графов graphviz [11]. Зато потом вы сможете использовать мощный язык DOT [12] для автоматической визуализации ваших данных (наверняка на Хабре есть люди, которые без графов и DOT жизни не представляют).
Примеры того, как можно нарисовать диаграммы при помощи аддонов для Confluence и веб-версий диаграмм:
Объединяет эти аддоны тот факт, что с помощью любого из них можно нарисовать недурственные диаграммы и схемы (или просто импортировать из Visio), но вот графики у них как-то не задались. Либо такая функциональность (построение графиков по таблице с данными) отсутствует, ограничиваясь схематичными представлениями графиков, либо реализована неудобно и рядовому пользователю будет непросто этим воспользоваться.
Пример того, как можно использовать язык DOT и библиотеку Graphviz:
A -> B
C -> B
B -> C
D -> A
A -> D
e;
subgraph clusterA {
a -- b;
subgraph clusterC {
C -- D;
}
}
subgraph clusterB {
d -- f
}
d -- D
e -- clusterB
clusterC -- clusterB
Трудно сказать, какой аддон лучше выбрать. Скорее всего, на выбор повлияют какие-то вторичные для функционала вещи. Например, способность работать на сервере автономно без доступа в Интернет или гибкое лицензирование, позволяющее не покупать сразу 500 лицензий в большой организации, где рисованием подобных диаграмм занимается пять человек. В наше время и цена лицензии часто имеет решающее значение. Я попытался свести основные нефункциональные характеристики в таблицу:
Аддон | Поддержка Server/Cloud |
Необходим Интернет |
Гибкое лицензирование |
Цена лицензии 500 пользователей Server/Cloud |
Поддержка импорта/экспорта файлов Visio |
Наличие веб-версии |
---|---|---|---|---|---|---|
Confluence Diagramming [5] by Creately | Да/Нет | Да | Нет | $2000/Нет | Да | Нет |
Draw.io Diagrams [6] for Confluence | Да/Да | Да | Нет | $3000/Бесплатно | Да | Да |
Lucidchart [7] for Confluence | Да/Да | Да | Да | Гибкая/Бесплатно | Да | Да |
Gliffy Diagrams [8] for Confluence | Да/Да | Нет | Нет | $6000/$3000 | Да | Да |
Graphviz Diagrams [9] for Confluence | Да/Нет | Нет | Нет | $580/Нет | Нет | Нет |
Погуглив "confluence charts [13]", на первой странице я получил вот что (откровенно говоря, негусто):
Поэтому будем рассматривать первые два.
В любом случае, для того, чтобы нарисовать график, вам потребуется таблица с данными. Эта таблица может появиться в Confluence совершенно разными способами, например быть созданной с нуля, импортированной из CSV, копипастой из Excel и даже сформированной запросом из СУБД при помощи SQL for Confluence [19]. Как сформированы данные в таблице — решающего значения не имеет, они просто должны быть. А из уже имеющихся данных мы можем построить графики.
Это встроенный в Confluence макрос, который умеет отрисовывать следующие типы графиков:
Макрос имеет большое количество настроек [14] для того, чтобы ваш график выглядел именно так, как вам нужно. Он покрывает все распространенные сценарии, в которых вам нужно нарисовать графики, но есть ложка дегтя (даже две) — это обязательный переход в режим редактирования страницы, даже если нужно только немного поменять настройки графика, и огромное количество этих самых настроек, что неподготовленного пользователя может напугать. Правда, эти ложки дополняются бочкой меда — бесплатность и документация с примерами, которая позволяет понять, как же оно работает и построить самые простые графики.
Вот так, например, выглядит Area chart:
… а вот так 3D Bar chart:
… можно посмотреть соотношение продаж разной рыбы в виде наглядной диаграммы Pie chart (круговой диаграммы):
Аддон разработан компанией StiltSoft [17], которая является Atlassian Expert и Atlassian Verified Vendor. У него есть свои плюсы и минусы. В плюсах отмечу следующее:
Но, как водится, должен быть и минус. Он всего один — за аддон нужно платить (процесс установки аддона в Confluence очень прост и считать его минусом трудно).
Аддон нам предлагает три макроса:
Первый из них позволяет «на лету» прямо из режима просмотра фильтровать сложные таблицы в Confluence. Фильтрация есть и в режиме редактирования, что иногда может быть удобно. Макрос Pivot Table позволяет построить сводную таблицу, содержащую аггрегированные и суммированные значения из больших таблиц с повторяющимися значениями. И, наконец, самое интересное — Chart from Table. Вот он-то и умеет рисовать графики, вот список возможных графиков:
Уже знакомая по Charts круговая диаграмма про рыбу:
Fish Type | 2011 |
---|---|
Herring | 9500 |
Salmon | 2900 |
Tuna | 1500 |
Вот так выглядит график типа stacked column (гугл утверждает [23], что это гистограмма):
2009 | 2010 | 2011 | |
---|---|---|---|
Revenue | 12.4 | 31.8 | 41.1 |
Expense | 43.6 | 41.8 | 31.1 |
… а вот так выглядит столбчатая диаграмма с накоплением (multi-column chart):
Period | Opened Tickets |
Pending Tickets |
Succesfully Closed Tickets |
Tickets Closed w/o Response |
Unsuccesfully Closed Tickets |
Total Tickets |
---|---|---|---|---|---|---|
Q1 2015 | 207 | 42 | 381 | 20 | 14 | 664 |
Q2 2015 | 278 | 31 | 247 | 58 | 39 | 653 |
Q3 2015 | 227 | 27 | 200 | 23 | 31 | 508 |
Q4 2015 | 257 | 20 | 237 | 58 | 40 | 612 |
Получившийся график можно скачать в один клик как картинку, или можно прямо из режима просмотра поменять настройки графика, используя панель настроек. Панель настроек можно скрыть, равно как и таблицу с исходными данными.
Самая мякотка, непосредственно затрагивающая тему графиков. Компоненты аддона (три макроса, входящие в комплект — графики, фильтрацию и сводные таблицы) можно смело и умело комбинировать. Что позволяет строить графики уже недоступные стандартному макросу Charts в достаточно легкой и непринужденной манере. Можно запросто построить график по отфильтрованной сводной таблице, например. Для этого вкладываем таблицу в макрос Table Filter (здесь можно будет фильтровать данные, уменьшив их количество), затем вкладываем Table Filter с таблицей в макрос Pivot Table (он построит сводную таблицу), и в качестве вишенки на торте получившуюся конструкцию помещаем в макрос Chart from Table (этот макрос нарисует график). Звучит страшновато, конструкция похожа на известную всем по сказкам Кощееву смерть. Тем не менее, в реальности все это делается достаточно быстро.
После того, как мы один раз выстроили иерархию данных и макросов — мы можем прямо из режима просмотра страницы менять настройки фильтрации исходных данных, настройки сводной таблицы и настройки графика — все будет тут же пересчитываться и перерисовываться. Настройки можно тут же сохранить, а можно поиграться и оставить как есть — страница вернется в исходное состояние при перезагрузке.
И здесь у ребят из Atlassian есть решение прямо «из коробки». Для начала, если вы еще не настроили — вам потребуется application link [24] между Confluence и JIRA, стандартный для продуктов Atlassian. После этого Confluence сможет получать данные из JIRA. Для визуализации же этих данных в состав Confluence включен макрос JIRA Charts (который, к слову, поддерживает фильтры JIRA и даже jql [25]-запросы для получения нужных вам данных). А для графического отображения полученных данных есть три типа графиков:
Пример стандартной круговой диаграммы, отражающей количественное соотношение задач по товарищам, которые их выполнили:
… а вот так выглядит сравнительная диаграмма созданных и решенных задач:
Пример двумерной диаграммы (по сути простая таблица):
Разумеется, полученные из JIRA данные можно обработать и отрисовать при помощи макросов, входящих в состав Table Filter and Charts. Можно, разумеется, применять фильтры уже в процессе получения данных из JIRA, чтобы не тащить и потом не фильтровать лишнее. А можно по-простому затянуть минимально отфильтрованные данные и дофильтровать их по месту, потом привести к формату сводной таблицы и построить график либо по исходным отфильтрованным данным, либо по уже получившейся сводной таблице. А если что-то выглядит не так, как ожидается — аккуратно и быстро поменять настройки фильтров или графиков. Комбо!
Навыки правильной визуализации данных, когда все графики и картинки приходятся к месту и помогают, а не мешают восприятию информации, нужно нарабатывать. Но с хорошими инструментами их нарабатывать гораздо проще, потому что отвлекаться на сам процесс рисования придется меньше. Надеюсь, после этой статьи кто-нибудь перестанет считать Confluence очередной унылой корпоративной википедией и начнет использовать всю мощь этого решения, вовлекая в процесс окружающих.
Автор: rkirilenko
Источник [26]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/grafiki/106490
Ссылки в тексте:
[1] Atlassian: https://www.atlassian.com/
[2] Confluence: https://www.atlassian.com/software/confluence
[3] пост комрадов из DevExpress: http://habrahabr.ru/company/devexpress/blog/240325/
[4] мозга: http://www.braintools.ru
[5] Confluence Diagramming: https://marketplace.atlassian.com/plugins/com.cinergix.confluence.plugins.creately.CreatelyConfluence/server/overview
[6] Draw.io Diagrams: https://marketplace.atlassian.com/plugins/com.mxgraph.confluence.plugins.diagramly/server/overview
[7] Lucidchart: https://marketplace.atlassian.com/plugins/com.lucidchart.confluence.plugins.lucid-confluence/server/overview
[8] Gliffy Diagrams: https://marketplace.atlassian.com/plugins/com.gliffy.integration.confluence/server/overview
[9] Graphviz Diagrams: https://marketplace.atlassian.com/plugins/com.atlassian.confluence.extra.graphviz/server/overview
[10] Боба Свифта: https://marketplace.atlassian.com/vendors/90
[11] graphviz: https://ru.wikipedia.org/wiki/Graphviz
[12] DOT: https://ru.wikipedia.org/wiki/DOT_(%D1%8F%D0%B7%D1%8B%D0%BA)
[13] confluence charts: https://www.google.ru/search?q=confluence+charts&oq=confluence+charts
[14] Chart Macro: https://confluence.atlassian.com/doc/chart-macro-163415075.html
[15] Atlassian: http://atlassian.com/
[16] Table Filter and Charts: https://marketplace.atlassian.com/plugins/com.stiltsoft.confluence.plugin.tablefilter.tablefilter/server/overview
[17] StiltSoft: http://stiltsoft.com/
[18] Lucidchart: http://lucidchart.com/
[19] SQL for Confluence: https://marketplace.atlassian.com/plugins/org.swift.confluence.sql/server/overview
[20] Table Filter: https://docs.stiltsoft.com/display/TableFilter/Table+Filter+for+Confluence
[21] Pivot Table: https://docs.stiltsoft.com/display/TableFilter/How+to+use+Pivot+table+macro
[22] Chart from Table: https://docs.stiltsoft.com/display/TableFilter/How+to+use+Chart+from+Table+macro
[23] гугл утверждает: https://support.google.com/docs/answer/190718?hl=ru
[24] application link: https://confluence.atlassian.com/doc/linking-to-another-application-360677690.html
[25] jql: http://blogs.atlassian.com/2013/01/jql-the-most-flexible-way-to-search-jira-14/
[26] Источник: http://habrahabr.ru/post/273353/
Нажмите здесь для печати.