Суть рисования диаграмм в flowcon очень проста:
К схеме компоновки предъявляется несколько простых требований.
Во-первых, она должна возвращать плоскую таблицу. Никаких группировок, ресурсов, итогов и т.д. Группировка одна - детальные записи. В выбранных полях - все, что вам нужно для диаграммы. Можно использовать поля запроса, вычисляемые и пользовательские поля.
Во-вторых, данные должны быть простых типов - строки, числа, даты.
Вообще, даты лучше преобразовывать в строки, функцией Формат
, иначе компонент рисования диаграммы выведет очень длинные представления дат.
Ссылки выводить не стоит, т.к. при преобразовании в json
они станут уникальными идентификаторами, и понять их станет невозможно.
Просто выведите вместо ссылки представление, или наименование, если это справочник.
В-третьих, можно использовать условное оформление. Пока поддержаны только самые важные (для диаграмм) виды оформления - цвет и шрифт.
Если хотите, чтобы определенная серия была определенного цвета - настройте для нее условное оформление, и укажите нужный цвет в цвете текста
. Почему - см. дальше.
В-четвертых, отключите вывод параметров, отборов и т.д. Чтобы результатом выполнения схемы была только таблица с данными. Причина проста - чтобы узнать, как сработало условное оформление, мы выводим результат работы схемы в табличный документ. Потом бегаем по нему, смотрим на ячейки, определяем цвет, шрифт, представление. Если у вас над таблице с данными будут параметры или отбор, система не сможет найти таблицу.
Мы еще поработаем над автоматизацией, чтобы вам было удобнее, но пока так. Например, сделаем автоматическое отключение вывода параметров и отборов, преобразование ссылок к строкам напишем и т.д.
Концепция точек и серий - примерно такая же, как в 1С. Например, для линейного графика точки - на горизонтальной оси, а серии - это линии графика (сколько серий, столько и линий).
Ключевое условие одно: для диаграмм серия должна быть всегда. Для таблиц серий и точек нет. Настройка серий и точек выглядит так:
В колонку "Поле" вываливаются все поля, которые вы выбрали в схеме компоновки. В колонках "Серия" и "Точка" вы выбираете, какое поле будет серией, а какое - точкой. Напомню - серия должна быть всегда, если вы рисуете диаграмму. Точка - по желанию. В колонке "Значение" у серии надо выбрать поле, в котором лежит цифра для вывода на диаграмму. В терминах 1С это "ресурс".
Также, для диаграмм с заполненными областями (гистограмма, радар) можно указать прозрачность в процентах.
И не забудьте выбрать вид диаграммы.
Для рисования диаграмм мы используем компоненты recharts. Если сходите по ссылке, то увидите, что там видом диаграмм довольно много, на любой вкус. У нас намного меньше, потому что мы недавно начали. Но, постепенно, по мере необходимости, поддержим все или почти все варианты.
Каждый вид диаграммы, как и в 1С, имеет свои особенности по настройке серий и точек. Чтобы вы быстрее набили руку, мы сделали демонстрационную обработку, в которой есть предопределенная схема компоновки с простыми данными, и прописаны настройки под каждый вид диаграммы.
Для начала - гистограмма с одной точкой. Для нее достаточно указать серию и значение. Точек нет, точнее - есть одна, она добавляется автоматически.
Дальше - гистограмма с группами столбиков. Здесь тоже все понятно - мы указали, что есть точки, и каждая точка образовала группу столбиков гистограммы.
На горизонтальной оси - точки, а серии - это линии графика.
Радар чуть сложнее. Оси радара - это точки, а области - это серии. В самом типовом случае на радаре будет несколько точек, и одна серия. В этом смысле он - противоположность остальных диаграмм.
Некоторые данные в виде диаграмм выводить и неудобно, и не красиво. Тут нужны таблицы. Требования к схеме компоновки для таблиц остаются теми же самыми, кроме серий и точек - их в таблицах нет, только поля. Настройка таблицы выглядит так:
Вы просто ставите видимость у тех полей, которые хотите видеть в таблице. Еще можете ширину в процентах задать. Также, для таблиц из условного оформления читается шрифт. Не весь, а только размер и жирность.
Видов таблиц у нас два.
Самый простой вариант таблицы. Не очень красивая, но выкидывать жалко.
Такая таблица будет несколько красивее:
Принципиально, есть две настройки дашборда (набора таблиц и диаграмм) - перечень элементов и их компоновка. Все настройки прячутся под одной кнопкой.
Перечень диаграмм, которые доступны пользователю, определяет администратор системы. Если вы работаете с демо-обработкой, то вам доступна одна диаграмма. Если вы запросили себе расширенный доступ, то у вас будет шесть диаграмм. Примерно так: