Справка по рисованию диаграмм в Flowcon

Суть рисования диаграмм в flowcon очень проста:

  1. Делаем схему компоновки, которая формирует данные;
  2. Настраиваем точки, серии и вид диаграммы;
  3. Отправляем в сервис;
  4. Настраиваем дашборд.

Настройка схемы компоновки

К схеме компоновки предъявляется несколько простых требований.

Во-первых, она должна возвращать плоскую таблицу. Никаких группировок, ресурсов, итогов и т.д. Группировка одна - детальные записи. В выбранных полях - все, что вам нужно для диаграммы. Можно использовать поля запроса, вычисляемые и пользовательские поля.

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

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

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

Мы еще поработаем над автоматизацией, чтобы вам было удобнее, но пока так. Например, сделаем автоматическое отключение вывода параметров и отборов, преобразование ссылок к строкам напишем и т.д.

Настройка точек и серий

Концепция точек и серий - примерно такая же, как в 1С. Например, для линейного графика точки - на горизонтальной оси, а серии - это линии графика (сколько серий, столько и линий).

Ключевое условие одно: для диаграмм серия должна быть всегда. Для таблиц серий и точек нет. Настройка серий и точек выглядит так: image

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

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

И не забудьте выбрать вид диаграммы.

Виды диаграмм

Для рисования диаграмм мы используем компоненты recharts. Если сходите по ссылке, то увидите, что там видом диаграмм довольно много, на любой вкус. У нас намного меньше, потому что мы недавно начали. Но, постепенно, по мере необходимости, поддержим все или почти все варианты.

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

Bar (гистограмма)

Для начала - гистограмма с одной точкой. image Для нее достаточно указать серию и значение. Точек нет, точнее - есть одна, она добавляется автоматически.

Дальше - гистограмма с группами столбиков. image Здесь тоже все понятно - мы указали, что есть точки, и каждая точка образовала группу столбиков гистограммы.

Line (линейный график)

На горизонтальной оси - точки, а серии - это линии графика. image

Radar (график-радар)

Радар чуть сложнее. Оси радара - это точки, а области - это серии. В самом типовом случае на радаре будет несколько точек, и одна серия. В этом смысле он - противоположность остальных диаграмм. image

Рисование таблиц

Некоторые данные в виде диаграмм выводить и неудобно, и не красиво. Тут нужны таблицы. Требования к схеме компоновки для таблиц остаются теми же самыми, кроме серий и точек - их в таблицах нет, только поля. Настройка таблицы выглядит так: image

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

Видов таблиц у нас два.

Table (таблица)

Самый простой вариант таблицы. Не очень красивая, но выкидывать жалко. image

muiTable (красивая таблица)

Такая таблица будет несколько красивее: image

Настройка дашборда

Принципиально, есть две настройки дашборда (набора таблиц и диаграмм) - перечень элементов и их компоновка. Все настройки прячутся под одной кнопкой. image

Перечень диаграмм, которые доступны пользователю, определяет администратор системы. Если вы работаете с демо-обработкой, то вам доступна одна диаграмма. Если вы запросили себе расширенный доступ, то у вас будет шесть диаграмм. Примерно так: image