Заметки из Зазеркалья

13.06.2019

Развитие диаграмм

Данная статья является анонсом новой функциональности.
Не рекомендуется использовать содержание данной статьи для освоения новой функциональности.
Полное описание новой функциональности будет приведено в документации к соответствующей версии.
Полный список изменений в новой версии приводится в файле v8Update.htm.

Реализовано в версии 8.3.16.1030

Мы продолжаем развивать механизм диаграмм.

В версии 8.3.16 планируются следующие возможности:

  • Вывод дополнительной шкалы значений

  • Настройки отображения серии

  • Интерактивное редактирование значений диаграммы

  • Автоматическое сохранение цвета серии

Вывод дополнительной шкалы значений

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

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

Настройка отображения серии

Тип серии

При выводе разных показателей на одну диаграмму очень наглядно отображать их разными типами. Например, на предыдущем примере мы вывели показатель “Cумма оборот” как график, а “Количество оборот” как гистограмму. Вы также теперь сможете настроить тип отображения конкретной серии. Для выбора доступны следующие типы:

  • Гистограмма

  • Гистограмма объемная

  • График

  • График с областями

  • График по шагам

Пример отображения диаграммы, где у каждой серии установлен собственный тип отображения:

combined.png

Суммирование серий

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

Примеры использования данной функциональности:

  • Группировка по контрагенту и сравнение с прошлым годом

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

stackGroup.png

  • План и факт с группировкой по товару
    В этом примере мы указываем что серии “План…” накапливаются отдельно от серий “Факт…”. Это позволяет сравнить как сумму по товарам, так и посмотреть в разрезе товаров.
планфакт.png

Интерактивное редактирование значений

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

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

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

Демонстрация: в примере показывается, как с помощью диаграммы распределить средства по месяцам

editValues-03.gif

Автоматическое сохранение цвета серии

Мы реализовали возможность сохранения цвета серии и использования этого цвета в другой диаграмме. Зачем это нужно? Рассмотрим на примере.

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

stableColors1.png

У прикладного разработчика будет доступ из встроенного языка к объекту, содержащему все сохраненные цвета серий. Можно будет добавлять свои пары серия-цвет (например, “Молоко” - синий), дать возможность пользователю настроить цвета, синхронизировать цвета между пользователями или базами и так далее. Естественно, можно будет использовать этот механизм и для диаграмм, вставленных на форму. Добавив совсем немного кода, можно будет, например, синхронизировать цвета серий нескольких диаграмм. Это позволит пользователю быстрее воспринимать информацию.

stableColors2.png

Доработки механизма отрисовки

Теперь некоторые виды диаграмм умеют рисоваться в браузере с помощью технологии canvas. Это значительно ускорило отрисовку диаграммы в веб-клиенте и позволило нам реализовать анимации изменения диаграммы. Диаграмма автоматически определяет что изменилось, и отображает анимацию. Данное изменение позволит наглядно показывать пользователю динамику показателей и в целом должно улучшить пользовательский опыт при работе с диаграммами.

Несколько примеров с анимацией:

  • Изменение отбора в отчете
  • report-02.gif 
  • Бегущий график
  • pointsMove.gif

  • Изменение значений и порядка точек
points.gif

Теги: UI  диаграммы  8.3.16