Платформа metadata.js развивается семимильными шагами, и в ней теперь появилась красота - диаграммы.

На этот раз не будем вас мучить форками, разверткой системы и прочей ерундой. Мы сделали сервис, в котором каждый из вас может порисовать диаграммы - красивые, удобные, а главное - на своих собственных данных.

Не забудьте добавить статью в избранное - она будет часто обновляться, вслед за развитием соответствующего функционала в платформе metadata.js.

Для того, чтобы мы могли попробовать порисовать диаграммы, мы изготовили демонстрационную обработку. Она будет работать на любой конфигурации 1С, на платформе 8.3. Обработка приложена к статье.

Запускать надо в толстом клиенте, либо обычном, либо управляемом приложении. Причина проста - нужно, чтобы работал конструктор схемы компоновки данных, а он в тонком, вроде, не умеет.

Единственное требование - вы должны быть зарегистрированным пользователем business-programming.ru. Ну, и знать свой логин и пароль.

У каждого зарегистрированного пользователя, по умолчанию, на странице дашборда рисуется одна диаграмма. Если зайдете на эту страницу прямо сейчас, то увидите не свою диаграмму, а наши, Окнософтовские - это демо-стенд. Как только нарисуете свою, будет ваша.

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

У обработки есть обычная и управляемая формы, с идентичным функционалом.

Форма обработки выглядит так: 

Авторизация

Свои учетные данные для business-programming.ru укажите в полях Логин и Пароль.

Демо-данные

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

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

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

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

Нарисовать свою диаграмму

Чтобы нарисовать свою диаграмму, запускайте конструктор схемы компоновки, нажав на соответствующую кнопку. И пишите там, что хотите, только соблюдайте инструкции, приведенные ниже. Не забудьте указать вид диаграммы, от него зависит вид настроечной таблицы.

Создав нужную схему, можете ее проверить до отправки в сервис - есть кнопка "Выполнить схему". Она вывалит результат в табличный документ и покажет вам.

Отправка вашей диаграммы в сервис осуществляется аналогично демо-данным - кнопкой "Отправить данные в сервис".

Сохранение и восстановление настроек

Для вашего удобства мы приделали сохранение и восстановление настроек - кнопки на верхней панели. Сохраняется и восстанавливается все, что есть на форме - схема компоновки, настройки, вид диаграммы, учетные данные.

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

Например, можно запустить обработку на компьютере, а браузер - в телефоне. Авторизоваться в браузере, восстановить нужную настройку в обработке, отправить данные - в телефоне диаграмма обновится. Восстановить другую настройку, отправить данные - в телефоне опять перерисуется.

Инструкция

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для начала - гистограмма с одной точкой. 

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

Дальше - гистограмма с группами столбиков. 

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

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

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

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

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

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

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

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

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

Table (таблица)

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

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

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

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

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

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

Демо-стенды

Мы нарисовали пару демо-стендов, в которых вывалили несколько диаграмм.

Во-первых, договорились с Олегом Фогелем, и сделали мем с его фотографией:

Ну и сделали демо-стенд для Бухгалтерии предприятия 3.0 - https://business-programming.ru/articles/dashboard_accounting

Это - комбинация текста в markdown и диаграмм. Текст - статический, диаграммы - динамические.

Во-вторых, всегда открыт демо-стенд с нашими, Окнософтовскими данными - https://business-programming.ru/flowcon/diagram. Только заходить надо в режиме инкогнито, без авторизации. Там - живые диаграммы по нашей внутренней работе. Обновляются автоматически.

Как использовать

Первое и главное - потестировать и поиграться. Можно вдвоем - например, с директором. Вы ему рисуете диаграмму, он на нее смотрит в айфоне.

Как упоминал выше, по запросу дадим возможность нарисовать несколько диаграмм. Тогда играть станет интереснее.

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

Пользуясь сервисом с диаграммами, можете это делать прямо сейчас. Все, что надо от телевизора - нормальный браузер и подключение к интернету. Все, что надо от вас - сделать так, чтобы обработка выкладывала данные по расписанию. А диаграмма в телевизоре обновится автоматически.

Мы, наверное, сделаем расширение еще, в довесок к обработке - чтобы вам ничего не пилить. Но это - немного попозже.

Видео

Да, еще мы сняли видео - как пользоваться обработкой.