Собираем дашборд с графиками

KPI выбраны — собираем дашборд. Стек простой: FastAPI считает числа, шаблон Jinja2 их показывает, а графики рисует готовая библиотека Chart.js. Всё соберёт Claude Code.

🎯 После урока сможешь: собрать дашборд с графиками на FastAPI, Jinja2 и Chart.js.

Из чего состоит дашборд

Шаг 1. Задание для Claude Code

«Сделай дашборд на FastAPI + Jinja2 + Chart.js: KPI-карточки (заявки, конверсия, выручка, средний чек), линейный график выручки по неделям, столбцы источников, топ менеджеров, фильтр по периоду. Данные бери из базы CRM».

Шаг 2. Числа считает SQL

KPI — это агрегаты из базы: посчитать, сложить, усреднить. За это отвечает SQL с функциями вроде COUNT и SUM. Читать не обязательно — важно узнавать:

SELECT COUNT(*) AS zayavki,
       SUM(oplacheno) AS vyruchka,
       ROUND(100.0 * SUM(oplacheno > 0) / COUNT(*)) AS konversiya
FROM zayavki
WHERE data >= :period_start;

Чтобы дашборд не дёргал базу при каждом открытии, включают кэширование: числа считаются, например, раз в час и сохраняются. Открытие дашборда становится мгновенным, а база не перегружается.

Контрольный вопрос. Что рисует графики на дашборде?

АSQL-запрос: он возвращает уже готовую картинку

БИх рисуют вручную в графическом редакторе и вставляют

ВГотовая библиотека Chart.js — рисовать вручную не нужно

Подсказка: Графики — отдельная готовая библиотека во фронтенде.

Онлайн-проверка ответа появится позже

Контрольный вопрос. Зачем дашборду кэширование?

АКэш дашборду не нужен: цифры должны быть свежими всегда

БЧтобы не считать всё заново при каждом открытии

ВЧтобы графики рисовались плавнее и выглядели ярче

Подсказка: Считаем раз в час, показываем мгновенно.

Онлайн-проверка ответа появится позже

Контрольный вопрос. Откуда дашборд берёт числа для KPI?

АБерёт случайные числа для примера, пока нет реальных

БСчитает агрегаты из базы через SQL (COUNT, SUM и т.п.)

ВИх вбивает руками сам руководитель в форму дашборда

Подсказка: KPI — это подсчёты над данными в базе.

Онлайн-проверка ответа появится позже

Контрольный вопрос. В SQL-запросе дашборда три агрегата — количество заявок, выручка и конверсия. Какая функция SQL считает именно КОЛИЧЕСТВО заявок? Впиши её вместе с аргументом, как в коде.

Исходный код для этого задания:

SELECT COUNT(*) AS zayavki,
       SUM(oplacheno) AS vyruchka,
       ROUND(100.0 * SUM(oplacheno > 0) / COUNT(*)) AS konversiya
FROM zayavki
WHERE data >= :period_start;

Подсказка: Ищи функцию, которая не суммирует и не округляет, а просто считает строки.

Онлайн-проверка ответа появится позже

Контрольный вопрос. Если из запроса убрать строку WHERE data >= :period_start, за какой период посчитаются KPI на дашборде?

АЗа выбранный период — фильтр и так работает по умолчанию

БЗа всё время, что есть в базе, а не за выбранный фильтром период

ВЗапрос перестанет работать без этой строки

Подсказка: WHERE — это как раз тот фильтр, который отвечает за период; убери его — и агрегаты считаются по всей таблице.

Онлайн-проверка ответа появится позже

Что дальше

Дашборд показывает числа и графики. Но руководителю ещё нужно понять, что они значат. В следующем уроке подключим Claude API — он объяснит цифры человеческим языком.

← Назад  ·  ↑ В начало урока  ·  ⌂ В начало курса  ·  Вперёд →