# Дашборд управления девелоперскими проектами
Интерактивный план-фактный дашборд для портфеля жилых комплексов. Нарастающим итогом, ежемесячное обновление.
---
## Что внутри
| Файл | Описание |
|------|----------|
| `dashboard.html` | Основной дашборд — один самодостаточный HTML-файл |
| `README.md` | Этот файл |
Дашборд не требует сервера, базы данных или сборщика. Это один HTML-файл с встроенными данными, стилями и скриптами.
---
## Проекты в дашборде
- Академия 2 оч.
- Арбери 1 оч.
- Арбери 2 оч.
- Доброе
- Терра
---
## Метрики
**Вкладка «Темп»**
- Темп продаж — % фактической выручки от плановой нарастающим итогом
- Темп стройки — % фактического освоения СМР+прочие от планового
- Коэффициент опережения продаж — распроданность ÷ строительная готовность
**Вкладка «Расходы»**
- Структура расходов как % от выручки по 5 категориям
- Круговая диаграмма с фиксированной палитрой
- Сравнение факта с нормативным диапазоном
**Вкладка «Кредиты»**
- Кредитная нагрузка (% выручки) — план vs факт
- Нормативный диапазон 3–5%, порог тревоги 7%
**Вкладка «KPI»**
- Сводная таблица всех показателей с цветовой индикацией
---
## Как обновить данные
Все данные хранятся в объекте `D` в теге `<script>` внутри `dashboard.html`.
Найдите блок:
```javascript
const D = {
names: ['Академия 2', 'Арбери 1', ...],
rv_p: [1697.9, 3786.6, ...], // выручка план, млн руб.
rv_f: [1217.7, 3677.8, ...], // выручка факт, млн руб.
...
};
```
Порядок значений в каждом массиве соответствует порядку проектов в `names`.
### Что обновлять ежемесячно
| Ключ | Значение |
|------|----------|
| `rv_p` / `rv_f` | Доходы от осн. деятельности — план и факт |
| `bld_p` / `bld_f` | СМР + прочие работы — план и факт |
| `ddu_p` / `ddu_f` | Заключение ДДУ — план и факт |
| `cr_p` / `cr` | Обслуживание кредитов / выручка — план и факт (%) |
| `cm` | Коммерческие расходы / выручка — факт (%) |
| `mg` | Управленческие расходы / выручка — факт (%) |
| `bl` | Стройка / выручка — факт (%) |
| `tx` | Налоги / выручка — факт (%) |
| `sp` / `st` | Темп продаж и стройки — факт/план × 100% |
| `ko` | Коэффициент опережения |
| `gap` | Разрыв продажи − стройка, пп |
| `note` | Текстовые выводы по каждому проекту |
---
## Размещение на GitVerse
### Шаг 1. Создать аккаунт
Зайдите на [gitverse.ru](https://gitverse.ru) и зарегистрируйтесь или войдите.
### Шаг 2. Создать репозиторий
1. Нажмите **«+ Создать»** → **«Новый репозиторий»**
2. Укажите имя, например `dev-dashboard`
3. Выберите **публичный** (для GitVerse Pages) или приватный
4. Нажмите **«Создать репозиторий»**
### Шаг 3. Загрузить файлы
**Способ А — через интерфейс (проще)**
1. Откройте репозиторий
2. Нажмите **«Загрузить файлы»** (кнопка или перетащите)
3. Добавьте `dashboard.html` и `README.md`
4. Напишите комментарий к коммиту, например: `Добавление дашборда`
5. Нажмите **«Отправить изменения»**
**Способ Б — через Git (если установлен)**
```bash
# Клонировать пустой репозиторий
git clone https://gitverse.ru/ВАШ_ЛОГИН/dev-dashboard.git
cd dev-dashboard
# Скопировать файлы в папку
cp /путь/к/dashboard.html .
cp /путь/к/README.md .
# Зафиксировать и отправить
git add .
git commit -m "Добавление дашборда"
git push origin main
```
### Шаг 4. Включить GitVerse Pages
1. Зайдите в репозиторий → **«Настройки»** → раздел **«Pages»**
2. В поле **«Ветка»** выберите `main`
3. В поле **«Папка»** оставьте `/` (корень)
4. Нажмите **«Сохранить»**
Через несколько секунд дашборд будет доступен по адресу:
```
https://ВАШ_ЛОГИН.gitverse.ru/dev-dashboard/
```
или
```
https://gitverse.ru/pages/ВАШ_ЛОГИН/dev-dashboard/
```
> Точный формат адреса зависит от версии GitVerse. Итоговая ссылка появится в разделе Pages после сохранения настроек.
---
## Обновление дашборда
После каждого месяца:
1. Откройте `dashboard.html` в любом текстовом редакторе (VS Code, Notepad++ и др.)
2. Найдите и обновите данные в блоке `const D = { ... }`
3. Сохраните файл
4. Загрузите обновлённый файл в репозиторий (через интерфейс или `git push`)
GitVerse Pages автоматически подхватит изменения — страница обновится в течение минуты.
---
## Локальный просмотр
Дашборд открывается прямо из файла — никакого сервера не нужно:
```
Откройте dashboard.html двойным кликом в браузере
```
Работает в Chrome, Edge, Firefox, Safari.
---
## Технологии
- Чистый HTML/CSS/JavaScript — без фреймворков и сборщиков
- [Chart.js 4.4.1](https://www.chartjs.org/) — графики (CDN, нужен интернет)
- [Google Fonts](https://fonts.google.com/) — Unbounded + Inter (CDN, нужен интернет)
- Данные встроены в файл — работает офлайн после первой загрузки шрифтов и Chart.js
---
## Вопросы и поддержка
При обновлении данных или добавлении новых проектов обратитесь к разработчику дашборда.