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

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

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

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

  Один экран — одна история:

   [ KPI-карточки: Заявки | Конверсия | Выручка | Ср. чек ]   ← сверху главное
   [ линейный график: выручка по неделям ]                     ← динамика
   [ столбцы: источники заявок ]   [ топ менеджеров ]          ← детали
   [ фильтр периода: неделя / месяц / квартал ]

Шаг 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;

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

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

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

БSQL прямо в браузере

ВИх приходится рисовать в фотошопе

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

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

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

АЧтобы не считать заново при каждом открытии — быстро и без нагрузки на базу

БЧтобы графики были ярче

ВКэширование дашборду не нужно

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

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

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

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

БПридумывает случайно

ВСпрашивает у пользователя вручную

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

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

Что дальше

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

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