• Русский

      • Глава 9: Панели задач и графики

      Дорогие друзья, наконец-то мы добрались до долгожданной главы про визуализацию! Здесь мы разберём, как в потоке информации быстро сосредоточиться на главном. Управленцу не пристало теряться в потоке задач — давайте легко и просто наведём порядок в статистике задач и информационных блоках.

      9.1 Фокус на ключевой информации

      Хочется одним взглядом охватывать состояние задач команды и видеть свои или важные для нас задачи, а не плутать в массе данных.

      Сначала посмотрим, как создать график статистики по командным задачам.

      9.1.1 Создание блока графика

      Создайте новую страницу (например, «Личная панель»):

      1. Создайте блок графика. (В этом крупном блоке-контейнере можно создавать множество отдельных графиков.)
      2. В блоке графика выберите цель — таблицу задач — и переходите к настройке.

      9.1.2 Настройка статистики по статусу

      Если хотим посчитать количество задач в разных статусах — что делать? Сначала подготовим данные:

      • Метрика: выберите уникальное поле, например ID, для подсчёта.
      • Размерность: используйте поле «Статус» для группировки.

      Теперь настроим график:

      1. Выберите столбчатую диаграмму или горизонтальную столбчатую.

      2. По оси X — статус, по оси Y — ID. Не забудьте указать «Категориальное поле» — статус! (Иначе цвета не будут отличаться, что плохо для восприятия.)

      9.1.3 Многомерная статистика: количество задач у каждого

      Если хотим посмотреть количество задач по каждому ответственному и статусу, добавим вторую размерность — «Ответственный/Псевдоним».

      1. Нажмите «Выполнить запрос» в верхней части UI.

      1. График может выглядеть необычно — это не то, что Вам нужно. Не страшно: выберите режим «Группа» — и Вы увидите распределение по разным ответственным.

      1. Если хочется одновременно видеть и общее количество, выбирайте «Стек». Тогда видно долю задач у каждого + общее количество задач!

      9.2 Фильтрация данных и динамическое отображение

      9.2.1 Настройка фильтрации

      Конечно, можно дополнительно убрать «Отменено» и «В архиве», просто сняв галочки в условиях слева. Уверены, эти операции уже Вам знакомы.

      После настройки нажмите «Подтвердить», выйдите из конфигурации — наш первый график готов.

      9.2.2 Копирование графика

      Хотите одновременно показывать и «Группу», и «Стек», но не настраивать второй график с нуля?

      • В правом верхнем углу первого графика нажмите «Копировать».
      • Прокрутите вниз — появился второй график. Перетащите его вправо, уберите «Стек», измените на «Группа».

      9.2.3 Динамическая фильтрация

      Можно ли динамически фильтровать данные по разным условиям?

      Конечно! В блоке графика откройте «Фильтрация» — сверху появится панель фильтров. Выведите нужные поля и настройте операторы. (Например, для поля даты выберите «Между».)

      202412200005784.png

      9.2.4 Создание пользовательского поля фильтрации

      А если иногда нужно учитывать «Отменено» и «В архиве», поддерживать динамическую фильтрацию и устанавливать значения фильтров по умолчанию?

      Создадим пользовательское поле фильтра!

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

      Можно редактировать заголовок, описание, оператор фильтрации и задавать значение по умолчанию (например, текущий пользователь или дата) — фильтрация будет точнее соответствовать Вашим задачам.

      1. Заголовок — «Статус».
      2. Исходное поле оставьте пустым.
      3. Компонент — «Чекбокс».
      4. Варианты заполните по значениям статусов из БД (порядок: метка варианта — значение).

      После создания нажмите «Установить значение по умолчанию» и выберите нужные пункты.

      После настройки значения по умолчанию вернитесь в конфигурацию графика и измените условие фильтрации на «Статус — содержит любое из — Текущий фильтр/Статус», подтвердите изменения. (Сделайте это для обоих графиков!)

      Готово, протестируем фильтрацию — данные отобразились идеально.

      202411162003151731758595.png

      9.3 Динамические ссылки и фильтрация задач

      Реализуем очень полезную возможность: при клике по числу статистики переходить к задачам, отфильтрованным по этому статусу. Сначала добавим вверху страницы блоки со счётчиками для каждого статуса.

      9.3.1 На примере «Не начато» создадим блок статистики

      1. Метрика: «Количество ID».
      2. Условие фильтрации: Статус равен «Не начато».
      3. Имя контейнера — «Не начато», тип — «Статистика», название графика оставьте пустым.

      Статистика «Не начато» отображается. Скопируйте блок ещё пять раз для остальных статусов и перетащите всё это вверх.

      9.3.2 Настройка ссылки и фильтрации

      1. Вернитесь на страницу с табличным блоком задач и посмотрите на адрес в браузере (обычно вида http://xxxxxxxxx/admin/0z9e0um1vcn).

        Здесь xxxxxxxxx — Ваш домен, а /admin/0z9e0um1vcn — путь. (Нам нужна часть после последнего /admin.)

      2. Скопируйте часть ссылки

        • Нам нужно сделать переход по ссылке. Сначала возьмём специфическую её часть.
        • Начните с admin/ (без самого admin/) до конца ссылки. В нашем примере это: 0z9e0um1vcn.

      При наведении на «Не начато» курсор превращается в руку — нажмите, переход выполнен.

      1. Настройка ссылки графика Теперь добавим параметр фильтрации. Помните идентификатор статуса задачи в БД? Добавим этот параметр в конец ссылки, чтобы дополнительно фильтровать задачи.
        • В конец ссылки добавьте ?task_status=Not started — получим: 0z9e0um1vcn?task_status=Not started.

      Формат передачи параметров через URL: При добавлении параметров действуют простые правила:

      • Знак вопроса (?): начало списка параметров.
      • Имя и значение: формат имя=значение.
      • Несколько параметров: соединяются через &, например: http://xxxxxxxxx/admin/hliu6s5tp9x?status=todo&user=123 Здесь user — другое имя параметра, 123 — его значение.
      1. Возвращаемся на страницу, нажимаем — переход успешен, в URL добавились нужные параметры.

      9.3.3 Использование URL-параметров для фильтрации

      Почему таблица не реагирует? Не волнуйтесь, осталось последнее действие!

      • Вернитесь в настройку табличного блока и нажмите «Установить диапазон данных».
      • Выберите «Статус» равен «URL-параметр запроса/status».

      Подтвердите — фильтрация работает!

      2c588303ad88561cd072852ae0e93ab3.png

      202411162111151731762675.png

      9.4 Визуализация данных: эффектные графики

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

      Если Вам нужно больше типов графиков, активируйте блок «Визуализация данных: ECharts»!

      9.4.1 Быстрая настройка эффектной лепестковой диаграммы

      Если данные перекрываются — отрегулируйте размер или радиус, чтобы вся информация была видна!

      202411162121201731763280.png

      После настройки перетащите блок и оформите внешний вид — готово!

      9.4.2 Дополнительные виды графиков

      Здесь Вас ждут и другие виды графиков для исследования.

      Облако слов

      Воронкообразная диаграмма

      Графики с несколькими метриками (двухосевой график, линейный график ECharts)

      В двухосевом графике можно добавлять больше метрик.

      Сравнительная столбчатая диаграмма

      9.5 Маленький вызов

      Перед окончанием главы — небольшое задание:

      1. Добавьте URL-параметры для остальных статусов: В работе, На проверке, Выполнено, Отменено, В архиве, чтобы переходы по статистике корректно фильтровали задачи.
      2. Настройте множественное поле «Ответственный» по аналогии с полем «Статус», задав значением по умолчанию псевдоним текущего пользователя.

      В следующей главе мы продолжим работу над панелью задач, ждём встречи!

      Продолжайте экспериментировать! Если возникнут вопросы — не забывайте о официальной документации NocoBase и сообществе NocoBase.