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

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

Сколько всего заявок? Сколько обработано? Какой категории больше всего? Сколько добавляется в день? На такие вопросы списком не ответишь. В этой главе с помощью [блоков графиков](/data-visualization) (круговых, линейных, столбчатых) и [Markdown-блока](/interface-builder/blocks/other-blocks/markdown) соберём **дашборд** — данные станут понятны с первого взгляда.

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

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

Войдите в [режим конфигурации](/get-started/how-nocobase-works), в верхнем меню нажмите **«Add menu item»** (`+`), выберите **«Modern page (v2)»**, имя — «Дашборд».

![07-dashboard-2026-03-15-21-39-35](https://static-docs.nocobase.com/07-dashboard-2026-03-15-21-39-35.png)

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

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

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

На странице дашборда нажмите **«[Add block](/interface-builder/blocks)» → [Chart](/data-visualization)**.

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

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

- **[Таблица](/data-sources/data-modeling/collection)**: «Заявки»
- **Measures (метрики)**: любое неуникальное [поле](/data-sources/data-modeling/collection-fields) (например, ID), агрегация — **Count**
- **Dimensions (измерения)**: поле «Статус»

![07-dashboard-2026-03-15-21-44-32](https://static-docs.nocobase.com/07-dashboard-2026-03-15-21-44-32.png)

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

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

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

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

![07-dashboard-2026-03-15-21-45-40](https://static-docs.nocobase.com/07-dashboard-2026-03-15-21-45-40.png)

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

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

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

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

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

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

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

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

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

![07-dashboard-2026-03-15-21-48-33](https://static-docs.nocobase.com/07-dashboard-2026-03-15-21-48-33.png)

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

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

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

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

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

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

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

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

![07-dashboard-2026-03-15-22-05-11](https://static-docs.nocobase.com/07-dashboard-2026-03-15-22-05-11.png)

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

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

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

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

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

В настройках блока (правый верхний угол) найдите **Set data scope**, добавьте условие [фильтра](/interface-builder/blocks/filter-blocks/form):

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

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

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

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

![07-dashboard-2026-03-15-22-20-11](https://static-docs.nocobase.com/07-dashboard-2026-03-15-22-20-11.png)

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

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

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

Добавьте **[Markdown-блок](/interface-builder/blocks/other-blocks/markdown)** и впишите системное объявление или инструкцию:

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

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

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

![07-dashboard-2026-03-15-21-53-54](https://static-docs.nocobase.com/07-dashboard-2026-03-15-21-53-54.png)

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

![07-dashboard-2026-03-15-22-30-57](https://static-docs.nocobase.com/07-dashboard-2026-03-15-22-30-57.png)

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

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

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

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

![07-dashboard-2026-03-15-22-33-24](https://static-docs.nocobase.com/07-dashboard-2026-03-15-22-33-24.png)

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

```js
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>`);
```

![07-dashboard-2026-03-15-22-51-27](https://static-docs.nocobase.com/07-dashboard-2026-03-15-22-51-27.png)

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

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

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

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

Добавьте на страницу блок **Action Panel** (Add block → Other blocks → Action Panel) и в нём добавьте две [операции](/interface-builder/actions):

![07-dashboard-2026-03-15-22-54-06](https://static-docs.nocobase.com/07-dashboard-2026-03-15-22-54-06.png)

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

![07-dashboard-2026-03-15-22-57-49](https://static-docs.nocobase.com/07-dashboard-2026-03-15-22-57-49.png)

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

![07-dashboard-2026-03-15-23-00-36](https://static-docs.nocobase.com/07-dashboard-2026-03-15-23-00-36.png)

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

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

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

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

![07-dashboard-2026-03-15-23-05-17](https://static-docs.nocobase.com/07-dashboard-2026-03-15-23-05-17.png)

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

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

![07-dashboard-2026-03-15-23-06-33](https://static-docs.nocobase.com/07-dashboard-2026-03-15-23-06-33.png)

![07-dashboard-2026-03-15-23-07-20](https://static-docs.nocobase.com/07-dashboard-2026-03-15-23-07-20.gif)

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

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

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

![07-dashboard-2026-03-15-23-08-02](https://static-docs.nocobase.com/07-dashboard-2026-03-15-23-08-02.png)

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

![07-dashboard-2026-03-15-23-11-24](https://static-docs.nocobase.com/07-dashboard-2026-03-15-23-11-24.png)

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

![07-dashboard-2026-03-15-23-12-36](https://static-docs.nocobase.com/07-dashboard-2026-03-15-23-12-36.png)

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

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

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

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

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

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

![07-dashboard-2026-03-15-23-14-19](https://static-docs.nocobase.com/07-dashboard-2026-03-15-23-14-19.png)

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

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

![07-dashboard-2026-03-15-23-18-57](https://static-docs.nocobase.com/07-dashboard-2026-03-15-23-18-57.png)

## Итоги главы

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

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

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

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

## Что дальше

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

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

- [Визуализация данных](/data-visualization) — подробная настройка графиков
- [Markdown-блок](/interface-builder/blocks/other-blocks/markdown) — использование Markdown-блока
- [Раскладка блоков](/interface-builder/blocks) — раскладка страниц и настройка блоков
