Рисуем диаграммы в metadata.js
Программирование - Инструментарий
Платформа 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 - https://business-programming.ru/articles/dashboard_accounting
Это - комбинация текста в markdown и диаграмм. Текст - статический, диаграммы - динамические.
Во-вторых, всегда открыт демо-стенд с нашими, Окнософтовскими данными - https://business-programming.ru/flowcon/diagram. Только заходить надо в режиме инкогнито, без авторизации. Там - живые диаграммы по нашей внутренней работе. Обновляются автоматически.
Как использовать
Первое и главное - потестировать и поиграться. Можно вдвоем - например, с директором. Вы ему рисуете диаграмму, он на нее смотрит в айфоне.
Как упоминал выше, по запросу дадим возможность нарисовать несколько диаграмм. Тогда играть станет интереснее.
Второе, еще более главное - можете пользоваться в реальной работе. Например, многие любят повесить телевизор, где-нибудь в отделе продаж, и выводить на него таблицу или диаграмму с показателями.
Пользуясь сервисом с диаграммами, можете это делать прямо сейчас. Все, что надо от телевизора - нормальный браузер и подключение к интернету. Все, что надо от вас - сделать так, чтобы обработка выкладывала данные по расписанию. А диаграмма в телевизоре обновится автоматически.
Мы, наверное, сделаем расширение еще, в довесок к обработке - чтобы вам ничего не пилить. Но это - немного попозже.
Видео
Да, еще мы сняли видео - как пользоваться обработкой.
Скачать файлы
| Наименование | Файл | Версия | Размер | |||
|---|---|---|---|---|---|---|
|
Демо-обработка
.epf 41,41Kb
20.09.18
2
|
.epf | 41,41Kb | 2 | Скачать |
См. также
Специальные предложения
Спокойно делается обмен в json формате с MS Power BI.
Да и в OData оно, вроде, могет.
Мимо пишу утилитку на сишарпе для финансистов:
Pipedrive => Excel => MS Power BI
Затем как раз будет задача по регламентной выгрузке данных из 1с в Power BI.
На вскидку буду пользовать планы обмена, сериализовать в json формат и отправлять rest'ом.
Насчет того, что покупное, а что нет - не знаю, не вникал.
За 5 минут саму обработку не напишу.
По времени это будет примерно так:
1) Полчаса собирания запросов в postman
2) Полдня для написания авторизации в MS Power BI и регистра сведений чтоб хранить refresh token привязанный к текущему пользователю.
3) Полдня подготовка класса (обработки) для дальнейшей простой выгрузки таблиц значений в MS Power BI.
4) В дальнейшем весь код по выгрузке уже будет занимать минут 10. 5 минут на запрос (если он простой), 5 минут на вспоминание как называется обработка и с какими параметрами вызывать.
Просто то о чем эта ветвь диалога - немного некорректна.
Power BI - это нечто вроде СКД для финансистов и аналитиков.
Наша задача, как программистов, запульнуть им туда данных, а они уже сами там ими воротят.
А у вас в публикации это вывод заранее настроенных диаграмм для тех кто не шарит и хочет заранее настроенный график.
Лично у меня это будет готово через месяц-другой, как только руки дойдут.
Если не забуду (ну или напомните) - обязательно поделюсь видосом и самой разработкой, в публикацию, наверное, как всегда поленюсь оформлять.
Мне нужно только выгрузить таблицу.
А на основе этих данных у финансистов уже будет заранее настроенная диаграмма или отчет, ну и прочие возможности.
Power BI это система компоновки данных от мелкомягких.
Тобишь как в 1С вы можете на вход СКД подать таблицу и далее делать с ней все что душе угодно, так и здесь будет все тоже самое.
Создать набор данных, таблицу и заполнить её запросом можно запросто, это я уже делал.
Можно ли создавать диаграмы с помощью их API - не знаю.
В REST API Power BI доступны следующие операции:
Операции с наборами данных: получение и создание наборов данных.
Операции с таблицами: получение таблиц и обновление схемы таблицы.
Операции со строками: добавление и удаление строк.
Операции с группами: получение групп.
Посмотрите на amcharts, вот где не скучно и действительно красиво.
За старания - плюс.
За заносчивость - минус.
Аналог можете показать? Чтобы можно было из 1С данные отправить в диаграмму, и она нарисовалась в облаке, и ее можно было тут же с телефона, например, посмотреть.
Сравнивать с amcharts смысла нет, потому что это - набор компонентов. Мы тоже используем набор компонентов - recharts (. Вот их можно сравнивать. Я, лично, разницы особой не вижу.
Вы смотрите на технику, а я говорю о продукте законченном - 1Сная часть, сервис с авторизацией, транспорт данных. Вы можете скачать обработку, и через 5 минут увидеть диаграмму в облаке. А какие компоненты рисуют диаграммы, какая СУБД хранит данные, по какому стандарту идет их передача - не особо важно.
Я сморю не на технику, а на то, как Вы отстаиваете свое решение. Похвально. Но несколько фанатично, Вам не кажется?
Выгрузить отчет в excel и использовать excel как данные для PowerBI. Это 5 минут.
Экспорт отчета в csv регламентным заданием еще минут 30. Это простые решения.
Почему PowerBI выглядит предпочтительнее:
Есть возможность интерактивной работы с диаграммой (аналогично расшифровке в отчетах 1С).
В вашем решении такой возможности нет и писать такое поведение довольно-таки мутарно (на сколько я представляю, возможно не прав, но про это в посте не рассказано =( ) и уже не 5 минут.
PowerBI Открывается на телефонах, в облаке и т.д.
Вот мой вариант - бесшовно из 1с в Excel с использованием Odata и выборкой запросом, управлением представлениями.
В чем-то в части подготовки данных похоже на ваше решение. Графики можно нарисовать силами Excel.
Я вам Иван всегда минус ставлю =)
Это традиция =)
Чтобы не задеть вас поясню, что у нас с вами просто различный взгляд на тот контент, который хочется видеть на infostrart'е. К качеству вашего контента и персонально к вам минус не имеет никакого отношения.
Первый мой комментарий был больше для того, чтобы поднять какую-то техническую дискуссию по поводу функционала. К сожалению не успел я ответить на Ваш комментарий и скинуть видео.
Спасибо коллеге, отреагировал более оперативно. Про PowerBI, к сожалению не так много статей на infostart, хотя инструмент отличный.
А у меня самого не хватает времени написать =(( Хотя это никудышная отмазка =)
А касательно рекламных постов metadat'ы было бы намного полезнее выкладывать примеры реализованных решений и разбирать их плюсы и минусы относительно Bitrix, 1С и прочих.
да, скорее всего, разница гигантская. Потому что у меня взгляд такой: у Инфостарта есть хозяин, который решает, какой контент нужен его сайту.
И мое мнение тут ничего не решает.
А раз не решает, то зачем его высказывать?
А еще лучше - зачем его формулировать и таскаться с ним, как с писаной торбой?
Лучше помочь Хозяину, создавая контент. Если контент ему не подходит, он скажет.
Вы ответили за человека - на сайте редакторы вынуждены всё читать.
Из чего я сделал вывод, что чел из (35) - редактор, и вынужден читать ваши произведения.
Но если редакторов несколько - то он мог бы передать тяжелую работу чтения ваших статей другому редактору. А если не может - значит он с большой долей вероятности один.
У меня такое ощущение, что топ-манагерам филотетовы эти все регистрации - им надо посмотреть без регистрации и СМС.
Т.е. просто перейти по ссылке и чтобы всё было видно.
Как мне кажется, было бы неплохо иметь какой-то механизм расшаривания этих диаграмм (или лучше наборов диаграмм, этаких стендов информации). Может быть, по ссылке, может - какой-то токен во времени.
А в целом - разработка очень классная. Я буду искать способ её применять.
Единственное требование - вы должны быть зарегистрированным пользователем business-programming.ru. Ну, и знать свой логин и пароль.
Ну допустим, регистрацией для использования инструментов сейчас никого не удивишь.
Если вы хотите поиграться с большим количеством диаграмм, напишите мне, укажите свой логин, и мы дадим вам такую возможность на некоторое время.
А вот это уже не серьёзно. Писать письма-просьбы, чтобы добавлять диаграммы - это никуда не годится в XXI веке. Дальше читать не стал. "Играться" времени нет.
Да и дашбордов сейчас уже разных развелось - пруд пруди. Чем та же Grafana плоха, например.
Важно только практическое применение. Если вы знаете 500 сервисов для рисования диаграмм, но ваш директор смотрит цифры в paint или на бумаге, то что толку от ваших знаний? И вам, и директору, и разработчикам сервисов?
Вот вы говорите - у вас, бездарей, отношение к потребителям неправильное. Нам как реагировать? Зная, что вы не пользуетесь ни нашим, ни каким-либо другим сервисом?
А есть люди, которые пользуются. Например, нашим - и пишут, что там не так. Мы читаем и думаем, как исправить. Или пишут - мы пользуемся графаной, директор доволен, во, смотри, как у нас все выглядит. Мы смотрим, завидуем, думаем, как сделать наш сервис лучше.
Подскажите как обстоят дела с конфиденциальностью?
Например нарисовал я диаграмму по этим самым конфиденциальным данным.
Они теперь лежат у вас стали менее конфиденциальными?)
1. Делать такие данные, которые не страшно хранить у нас. Ну и следить за сохранностью пароля. Мы, разумеется, делаем все, что умеем для сохранности данных;
2. Поднять у себя CouchDB и хранить данные там, а сервис будет их просто показывать.
Просмотры 4960
Загрузки 2
Комментарии 77
Создание 20.09.18 16:07
Обновление 20.09.18 16:07
№ Публикации 907796
Рубрики Инструментарий Работа с интерфейсом
Кому Программист
Тип файла Внешняя обработка (ert,epf)
Платформа
Платформа 1С v8.x (все механизмы) ,
Система компоновки данных
Конфигурация Конфигурации 1cv8
Операционная система Не имеет значения
Страна Не имеет значения
Отрасль Не имеет значения
Налоги Не имеет значения
Вид учета Не имеет значения
Раздел учета Не имеет значения
Доступ к файлу Абонемент ($m)
Код открыт Да