#Глава 7. Дашборд — взгляд сверху

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

Сколько всего заявок? Сколько обработано? Какой категории больше всего? Сколько добавляется в день? На такие вопросы списком не ответишь. В этой главе с помощью блоков графиков (круговых, линейных, столбчатых) и Markdown-блока соберём дашборд — данные станут понятны с первого взгляда.

#7.1 Добавляем страницу дашборда

Сначала добавим в верхнее меню новый пункт.

Войдите в режим конфигурации, в верхнем меню нажмите «Add menu item» (+), выберите «Modern page (v2)», имя — «Дашборд».

Эта страница — наш главный полигон для графиков.

#7.2 Круговая диаграмма: распределение статусов заявок

Первая диаграмма — круговая, показывает, сколько заявок в каждом статусе («На рассмотрении», «В обработке», «Завершено»).

На странице дашборда нажмите «Add block» → Chart.

После добавления нажмите Configure в правом верхнем углу — справа откроется панель настройки графика.

#Настройка запроса данных

• Таблица: «Заявки»
• Measures (метрики): любое неуникальное поле (например, ID), агрегация — Count
• Dimensions (измерения): поле «Статус»

Нажмите Run query — внизу появится превью данных.

#Настройка вида диаграммы

• Тип: Pie
• Маппинг: Category — «Статус», Value — счётчик
• Labels: включить переключатель

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

Сохраняем — первая диаграмма готова.

#7.3 Линейный график: ежедневная динамика создания заявок

Круговая диаграмма показывает «текущее распределение», линейная — «динамику».

Добавьте на страницу ещё один блок графика и настройте:

#Запрос данных

• Таблица: «Заявки»
• Measures: ID, Count
• Dimensions: «Дата создания» в формате YYYY-MM-DD (агрегация по дням)

Подсказка: формат измерения по дате важен. YYYY-MM-DD — по дням, YYYY-MM — по месяцам. Выбирайте в зависимости от объёма данных.

#Настройки графика

• Тип: Line
• Маппинг: xField — «Дата создания», yField — счётчик

Сохранив, увидим кривую количества заявок во времени. Если в какой-то день вдруг резкий скачок — стоит присмотреться, что случилось.

#7.4 Столбчатая диаграмма: количество заявок по категориям

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

Добавляем третий блок графика:

#Запрос данных

• Таблица: «Заявки»
• Measures: ID, Count
• Dimensions: связное поле «Категория» (поле «Название категории»)

#Настройки графика

• Тип: Bar
• Маппинг: xField — счётчик (ID Count), yField — «Название категории»

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

#7.5 Блок таблицы: незавершённые заявки

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

Добавьте блок Table, выберите таблицу «Заявки».

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

В настройках блока (правый верхний угол) найдите Set data scope, добавьте условие фильтра:

• Статус не равен Завершено

Так в таблице будут только незавершённые заявки; как только заявка завершится, она пропадёт из списка автоматически.

#Настройка полей

Выберите колонки: Заголовок, Статус, Приоритет, Обработчик, Дата создания.

Подсказка: добавьте сортировку по дате создания (descending), чтобы свежие заявки были вверху.

#7.6 Markdown-блок: системное объявление

Помимо графиков, на дашборде можно разместить и текстовую информацию.

Добавьте Markdown-блок и впишите системное объявление или инструкцию:

## IT-система заявок

Добро пожаловать! Если возникла проблема — заведите заявку, технический специалист скоро её обработает.

**Срочные вопросы** — звоните на горячую линию IT: 8888

Markdown-блок в верхней части дашборда служит и приветствием, и доской объявлений. Содержимое можно править в любой момент — очень гибко.

#7.7 JS-блок: персональный приветственный баннер

Markdown ограничен по форматированию. Если нужно богаче? NocoBase предлагает JS-блок (JavaScript Block), в котором можно произвольно настраивать вывод кодом.

Используем его для делового баннера — на основе текущего пользователя и времени формируем персональное приветствие.

Добавьте JS-блок (Add block → Other blocks → JS Block).

В JS-блоке можно через ctx.getVar("ctx.user.username") получить логин текущего пользователя. Простой деловой приветственный баннер:

const uname = await ctx.getVar("ctx.user.username")
const name = uname || 'пользователь';
const hour = new Date().getHours();
const hi = hour < 12 ? 'Доброе утро' : hour < 18 ? 'Добрый день' : 'Добрый вечер';

const d = new Date();
const date = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
const week = ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'][d.getDay()];

ctx.render(`
<div style="padding: 24px 32px; background: #f7f8fa; border-radius: 8px;">
  <div style="display: flex; justify-content: space-between; align-items: flex-end;">
    <div>
      <div style="font-size: 22px; font-weight: 600; color: #1d2129;">${hi}, ${name}</div>
      <div style="font-size: 14px; color: #86909c; margin-top: 4px;">Добро пожаловать в IT-систему заявок</div>
    </div>
    <div style="font-size: 14px; color: #86909c;">${date} ${week}</div>
  </div>
</div>`);

Получается светло-серая карточка: слева — приветствие, справа — дата. Лаконично и не отвлекает.

Подсказка: ctx.getVar("ctx.user.xxx") — способ получить данные текущего пользователя. Часто используют nickname (никнейм), username (логин), email (почта). JS-блок умеет также вызывать API и подгружать данные — пространство для творчества большое.

#7.8 Action Panel: быстрые входы и переиспользование окон

Дашборд — это не только просмотр, но и точка действий. Добавим Action Panel, чтобы пользователь мог сразу с дашборда подавать заявку и переходить в список.

Добавьте на страницу блок Action Panel (Add block → Other blocks → Action Panel) и в нём добавьте две операции:

1. Ссылка: переход в список заявок — добавьте операцию «Link», URL — на страницу списка (например, /admin/camcwbox2uc).

2. Кнопка: «Добавить заявку» — добавьте операцию «Popup» с заголовком «Добавить заявку».

Но окно «Добавить заявку» пустое. Конечно, можно настроить форму заново, но это утомительно — поэтому познакомимся с очень полезной функцией переиспользования окон.

#Сохраняем шаблон окна

Внимание: шаблон окна и «шаблон блока» из Главы 4 — разные вещи. Шаблон блока хранит конфигурацию полей и раскладки одного блока формы, а шаблон окна — всё содержимое окна: блоки, поля, кнопки.

1. Зайдите на страницу списка заявок и найдите кнопку «Add new».
2. В её настройках найдите «Save as template» и сохраните текущее окно.
3. Дайте шаблону имя (например, «Окно создания заявки»).

#Используем шаблон на дашборде

1. Возвращаемся на страницу дашборда, открываем настройки кнопки «Добавить заявку» в Action Panel.
2. Найдите «Popup settings», выберите сохранённый шаблон «Окно создания заявки».
3. Сохраните — теперь по клику кнопки откроется такое же окно создания, как на странице списка заявок.

#Клик по заголовку открывает окно деталей

Аналогично можно сделать кликабельным заголовок в таблице незавершённых заявок:

1. На странице списка заявок откройте настройки кнопки «View», тоже «Save as template» (например, «Окно деталей заявки»).

2. Возвращаемся на дашборд, в таблице незавершённых заявок откройте настройки колонки «Заголовок».
3. Включите «Enable click to open» — появится опция «Popup settings».
4. В её настройках выберите шаблон «Окно деталей заявки».

Теперь пользователь, кликнув по заголовку заявки на дашборде, сразу увидит её детали — без перехода на список. Дашборд становится плотнее и эффективнее.

Преимущество переиспользования окон: один шаблон используется на разных страницах; правка шаблона синхронизирует изменения везде. Идея та же, что у «Reference» в Главе 4 — настроил один раз, работает повсюду.

#7.9 Подгоняем раскладку

Теперь на странице 6 блоков (JS-баннер + Action Panel + 3 графика + таблица заявок), настроим раскладку для красоты.

В режиме конфигурации блоки можно перетаскивать и менять их размеры:

Рекомендуемая раскладка:

• Первая строка: JS-баннер (слева) + Action Panel (справа)
• Вторая строка: круговая диаграмма (слева) + таблица заявок (справа)
• Третья строка: линейный график (слева) + столбчатая диаграмма (справа)

Если высоты блоков не совпадают, в настройках блока → Block height задайте вручную нужное значение, например, обоим блокам второй строки — 500px.

Перетаскивая края, можно менять ширину блоков, например делать два графика по половине строки. Поэкспериментируйте, пока раскладка не понравится.

#Итоги главы

В этой главе мы собрали богатый, практичный дашборд из 6 блоков:

• JS-баннер: персональное приветствие в зависимости от пользователя и времени.
• Action Panel: быстрый переход к списку заявок и добавление новой (переиспользование окна).
• Круговая диаграмма: моментально видно распределение статусов.
• Линейный график: динамика количества заявок во времени.
• Столбчатая диаграмма: горизонтальное сравнение по категориям, не страшно даже при большом числе подписей.
• Таблица незавершённых заявок: все актуальные заявки в одном месте, клик по заголовку — окно деталей (переиспользование окна).

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

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

#Что дальше

На этом наша система заявок функционально полностью готова: моделирование данных, страницы, формы, права, автоматизированные workflow, дашборд — всё на месте. В планах учебник по сборке через AI Agent — Agent сам соберёт систему локально, ждите!

#Связанные ресурсы

• Визуализация данных — подробная настройка графиков
• Markdown-блок — использование Markdown-блока
• Раскладка блоков — раскладка страниц и настройка блоков