106 lines
3.8 KiB
Markdown
106 lines
3.8 KiB
Markdown
# PlayLifeWeb
|
||
|
||
Веб-приложение для отображения статистики проектов.
|
||
|
||
## Возможности
|
||
|
||
- **Текущая неделя**: Отображение статистики на текущий момент с ProgressBar для каждого проекта
|
||
- **Полная статистика**: График нарастающей статистики по всем проектам
|
||
|
||
## Технологии
|
||
|
||
- React 18
|
||
- Vite
|
||
- Chart.js (react-chartjs-2)
|
||
- Tailwind CSS
|
||
- Docker
|
||
|
||
## Установка и запуск
|
||
|
||
### Локальная разработка
|
||
|
||
1. Установите зависимости:
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
2. Запустите dev-сервер:
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
Приложение будет доступно по адресу `http://localhost:3000`
|
||
|
||
### Сборка для production
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### Запуск через Docker
|
||
|
||
1. Создайте файл `.env` в корне проекта (можно скопировать из `env.example`):
|
||
```bash
|
||
cp env.example .env
|
||
```
|
||
|
||
2. Соберите образ:
|
||
```bash
|
||
docker-compose build
|
||
```
|
||
|
||
3. Запустите контейнер:
|
||
```bash
|
||
docker-compose up -d
|
||
```
|
||
|
||
Приложение будет доступно по адресу `http://localhost:3000`
|
||
|
||
**Примечание:** API запросы автоматически проксируются к бэкенду через nginx. Не требуется настройка URL API.
|
||
|
||
### Остановка Docker контейнера
|
||
|
||
```bash
|
||
docker-compose down
|
||
```
|
||
|
||
## Структура проекта
|
||
|
||
```
|
||
play-life-web/
|
||
├── src/
|
||
│ ├── components/
|
||
│ │ ├── CurrentWeek.jsx # Компонент текущей недели
|
||
│ │ ├── FullStatistics.jsx # Компонент полной статистики
|
||
│ │ └── ProjectProgressBar.jsx # Компонент ProgressBar
|
||
│ ├── App.jsx # Главный компонент приложения
|
||
│ ├── main.jsx # Точка входа
|
||
│ └── index.css # Глобальные стили
|
||
├── Dockerfile # Docker образ
|
||
├── docker-compose.yml # Docker Compose конфигурация
|
||
├── nginx.conf # Nginx конфигурация
|
||
└── package.json # Зависимости проекта
|
||
```
|
||
|
||
## API Endpoints
|
||
|
||
Приложение использует относительные пути для API запросов. Проксирование настроено автоматически:
|
||
|
||
- **Development**: Vite dev server проксирует запросы к `http://localhost:8080`
|
||
- **Production**: Nginx проксирует запросы к бэкенд контейнеру
|
||
|
||
Endpoints, которые используются:
|
||
- `/playlife-feed` - данные текущей недели
|
||
- `/d2dc349a-0d13-49b2-a8f0-1ab094bfba9b` - полная статистика
|
||
- `/projects` - список проектов
|
||
- `/project/priority` - обновление приоритетов проектов
|
||
- `/api/*` - остальные API endpoints (слова, конфигурации, тесты)
|
||
|
||
## Особенности реализации
|
||
|
||
- ProgressBar отображает текущее значение (`total_score`) и выделяет диапазон целей (`min_goal_score` - `max_goal_score`)
|
||
- График полной статистики показывает нарастающую сумму баллов по неделям
|
||
- Все проекты отображаются на одном графике с разными цветами
|
||
- Адаптивный дизайн для различных размеров экранов
|
||
|