Платформа metadata.js развивается семимильными шагами, и в ней теперь появилась красота - диаграммы.
На этот раз не будем вас мучить форками, разверткой системы и прочей ерундой. Мы сделали сервис, в котором каждый из вас может порисовать диаграммы - красивые, удобные, а главное - на своих собственных данных.
Не забудьте добавить статью в избранное - она будет часто обновляться, вслед за развитием соответствующего функционала в платформе metadata.js.
Для того, чтобы мы могли попробовать порисовать диаграммы, мы изготовили демонстрационную обработку. Она будет работать на любой конфигурации 1С, на платформе 8.3. Обработка приложена к статье.
Запускать надо в толстом клиенте, либо обычном, либо управляемом приложении. Причина проста - нужно, чтобы работал конструктор схемы компоновки данных, а он в тонком, вроде, не умеет.
Единственное требование - вы должны быть зарегистрированным пользователем business-programming.ru. Ну, и знать свой логин и пароль.
У каждого зарегистрированного пользователя, по умолчанию, на странице дашборда рисуется одна диаграмма. Если зайдете на эту страницу прямо сейчас, то увидите не свою диаграмму, а наши, Окнософтовские - это демо-стенд. Как только нарисуете свою, будет ваша.
Если вы хотите поиграться с большим количеством диаграмм, напишите мне, укажите свой логин, и мы дадим вам такую возможность на некоторое время.
У обработки есть обычная и управляемая формы, с идентичным функционалом.
Форма обработки выглядит так:
Авторизация
Свои учетные данные для business-programming.ru укажите в полях Логин и Пароль.
Демо-данные
Начать рекомендуем с демо-данных - посмотрите на подменю в верхнем правом углу обработки. Мы сделали простенькую схему компоновки, которая не трогает данных вашей базы - цифры, точки и серии вбиты прямо в запросе.
Выбираете нужную диаграмму из демо-данных, автоматически грузятся все настройки, жмете кнопку "Отправить данные в сервис", идете в браузер на страницу дашборда, смотрите результат. Если нажали в первый раз, и в браузере, по-прежнему, видите Окнософтовские диаграммы, нажмите F5, должно обновиться.
В дальнейшем, при отправке данных в сервис из обработки, диаграмма будет обновляться автоматически - там настроено реагирование на изменение данных. Пока переходите из окна обработки в браузер, новая диаграмма уже отрисуется.
Демо-данные, так же, помогут разобраться с настройками полей, серий и точек.
Нарисовать свою диаграмму
Чтобы нарисовать свою диаграмму, запускайте конструктор схемы компоновки, нажав на соответствующую кнопку. И пишите там, что хотите, только соблюдайте инструкции, приведенные ниже. Не забудьте указать вид диаграммы, от него зависит вид настроечной таблицы.
Создав нужную схему, можете ее проверить до отправки в сервис - есть кнопка "Выполнить схему". Она вывалит результат в табличный документ и покажет вам.
Отправка вашей диаграммы в сервис осуществляется аналогично демо-данным - кнопкой "Отправить данные в сервис".
Сохранение и восстановление настроек
Для вашего удобства мы приделали сохранение и восстановление настроек - кнопки на верхней панели. Сохраняется и восстанавливается все, что есть на форме - схема компоновки, настройки, вид диаграммы, учетные данные.
С помощью сохранения настроек вы можете нарисовать несколько разных диаграмм, и смотреть на них, когда захотите. Ну, или, если захотите кому-то показать результаты, восстановление настроек пригодится.
Например, можно запустить обработку на компьютере, а браузер - в телефоне. Авторизоваться в браузере, восстановить нужную настройку в обработке, отправить данные - в телефоне диаграмма обновится. Восстановить другую настройку, отправить данные - в телефоне опять перерисуется.
Инструкция
Суть рисования диаграмм в flowcon очень проста:
- Делаем схему компоновки, которая формирует данные;
- Настраиваем точки, серии и вид диаграммы;
- Отправляем в сервис.
Настройка схемы компоновки
К схеме компоновки предъявляется несколько простых требований.
Во-первых, она должна возвращать плоскую таблицу. Никаких группировок, ресурсов, итогов и т.д. Группировка одна - детальные записи. В выбранных полях - все, что вам нужно для диаграммы. Можно использовать поля запроса, вычисляемые и пользовательские поля.
Во-вторых, данные должны быть простых типов - строки, числа, даты. Вообще, даты лучше преобразовывать в строки, функцией Формат, иначе компонент рисования диаграммы выведет очень длинные представления дат. Ссылки выводить не стоит, т.к. при преобразовании в json они станут уникальными идентификаторами, и понять их станет невозможно. Просто выведите вместо ссылки представление, или наименование, если это справочник.
В-третьих, можно использовать условное оформление. Пока поддержаны только самые важные (для диаграмм) виды оформления - цвет и шрифт. Если хотите, чтобы определенная серия была определенного цвета - настройте для нее условное оформление, и укажите нужный цвет в цвете текста. Почему - см. дальше.
В-четвертых, отключите вывод параметров, отборов и т.д. Чтобы результатом выполнения схемы была только таблица с данными. Причина проста - чтобы узнать, как сработало условное оформление, мы выводим результат работы схемы в табличный документ. Потом бегаем по нему, смотрим на ячейки, определяем цвет, шрифт, представление. Если у вас над таблице с данными будут параметры или отбор, система не сможет найти таблицу.
Мы еще поработаем над автоматизацией, чтобы вам было удобнее, но пока так. Например, сделаем автоматическое отключение вывода параметров и отборов, преобразование ссылок к строкам напишем и т.д.
Настройка точек и серий
Концепция точек и серий - примерно такая же, как в 1С. Например, для линейного графика точки - на горизонтальной оси, а серии - это линии графика (сколько серий, столько и линий).
Ключевое условие одно: для диаграмм серия должна быть всегда. Для таблиц серий и точек нет. Настройка серий и точек выглядит так:
В колонку "Поле" вываливаются все поля, которые вы выбрали в схеме компоновки. В колонках "Серия" и "Точка" вы выбираете, какое поле будет серией, а какое - точкой. Напомню - серия должна быть всегда, если вы рисуете диаграмму. Точка - по желанию. В колонке "Значение" у серии надо выбрать поле, в котором лежит цифра для вывода на диаграмму. В терминах 1С это "ресурс".
Также, для диаграмм с заполненными областями (гистограмма, радар) можно указать прозрачность в процентах.
И не забудьте выбрать вид диаграммы.
Виды диаграмм
Для рисования диаграмм мы используем компоненты recharts. Если сходите по ссылке, то увидите, что там видом диаграмм довольно много, на любой вкус. У нас намного меньше, потому что мы недавно начали. Но, постепенно, по мере необходимости, поддержим все или почти все варианты.
Каждый вид диаграммы, как и в 1С, имеет свои особенности по настройке серий и точек. Чтобы вы быстрее набили руку, мы и сделали демонстрационную обработку, в которой есть предопределенная схема компоновки с простыми данными, и прописаны настройки под каждый вид диаграммы.
Bar (гистограмма)
Для начала - гистограмма с одной точкой.
Для нее достаточно указать серию и значение. Точек нет, точнее - есть одна, она добавляется автоматически.
Дальше - гистограмма с группами столбиков.
Здесь тоже все понятно - мы указали, что есть точки, и каждая точка образовала группу столбиков гистограммы.
Line (линейный график)
На горизонтальной оси - точки, а серии - это линии графика.
Radar (график-радар)
Радар чуть сложнее. Оси радара - это точки, а области - это серии. В самом типовом случае на радаре будет несколько точек, и одна серия. В этом смысле он - противоположность остальных диаграмм.
Рисование таблиц
Некоторые данные в виде диаграмм выводить и неудобно, и не красиво. Тут нужны таблицы. Требования к схеме компоновки для таблиц остаются теми же самыми, кроме серий и точек - их в таблицах нет, только поля. Настройка таблицы выглядит так:
Вы просто ставите видимость у тех полей, которые хотите видеть в таблице. Еще можете ширину в процентах задать. Также, для таблиц из условного оформления читается шрифт. Не весь, а только размер и жирность.
Видов таблиц у нас два.
Table (таблица)
Самый простой вариант таблицы. Не очень красивая, но выкидывать жалко.
muiTable (красивая таблица)
Такая таблица будет несколько красивее:
Настройка дашборда
Принципиально, есть две настройки дашборда (набора таблиц и диаграмм) - перечень элементов и их компоновка. Все настройки прячутся под одной кнопкой.
Перечень диаграмм, которые доступны пользователю, определяет администратор системы.
Если вы работаете с демо-обработкой, то вам доступна одна диаграмма. Если вы запросили себе расширенный доступ, то у вас будет шесть диаграмм. Примерно так:
Демо-стенды
Мы нарисовали пару демо-стендов, в которых вывалили несколько диаграмм.
Во-первых, договорились с Олегом Фогелем, и сделали мем с его фотографией:
Ну и сделали демо-стенд для Бухгалтерии предприятия 3.0.
Это - комбинация текста в markdown и диаграмм. Текст - статический, диаграммы - динамические.
Во-вторых, всегда открыт демо-стенд с нашими, Окнософтовскими данными. Только заходить надо в режиме инкогнито, без авторизации. Там - живые диаграммы по нашей внутренней работе. Обновляются автоматически.
Как использовать
Первое и главное - потестировать и поиграться. Можно вдвоем - например, с директором. Вы ему рисуете диаграмму, он на нее смотрит в айфоне.
Как упоминал выше, по запросу дадим возможность нарисовать несколько диаграмм. Тогда играть станет интереснее.
Второе, еще более главное - можете пользоваться в реальной работе. Например, многие любят повесить телевизор, где-нибудь в отделе продаж, и выводить на него таблицу или диаграмму с показателями.
Пользуясь сервисом с диаграммами, можете это делать прямо сейчас. Все, что надо от телевизора - нормальный браузер и подключение к интернету. Все, что надо от вас - сделать так, чтобы обработка выкладывала данные по расписанию. А диаграмма в телевизоре обновится автоматически.
Мы, наверное, сделаем расширение еще, в довесок к обработке - чтобы вам ничего не пилить. Но это - немного попозже.
Видео
Да, еще мы сняли видео - как пользоваться обработкой.
