# Рабочий процесс GenerateDashboard

Рабочий процесс создания интерактивной панели визуализации данных.

## Описание

Этот рабочий процесс использует инструмент GenerateDashboard.ts для получения популярных проектов с GitHub и создания интерактивной HTML-панели с поддержкой:
- Представления проектов в карточках
- Круговой диаграммы распределения языков
- Столбчатой диаграммы прироста Stars
- Списка технологических новостей
- Фильтрации, сортировки и поиска в реальном времени

## Когда использовать

Используйте этот рабочий процесс, когда пользователь запрашивает что-либо из следующего:
- «создай панель GitHub trending»
- «создай веб-страницу трендов»
- «создай визуальный отчёт»
- «экспортируй панель трендов»
- «создай интерактивную веб-страницу»

## Шаги рабочего процесса

### Шаг 1: определение параметров
Подтвердите у пользователя или выведите следующие параметры:
- **Период**: daily (день) или weekly (неделя, по умолчанию)
- **Язык программирования**: необязательно (например, TypeScript, Python, Go, Rust и т. д.)
- **Число проектов**: по умолчанию 10
- **Включение новостей**: включать ли технологические новости
- **Число новостей**: по умолчанию 10
- **Путь вывода**: по умолчанию ./github-trends.html

### Шаг 2: выполнение инструмента
Запустите инструмент GenerateDashboard.ts:

```bash
# 基本用法（本周，10个项目）
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts

# 指定语言和新闻
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts \
  --period weekly \
  --language TypeScript \
  --limit 20 \
  --include-news \
  --news-count 15 \
  --output ~/trends.html

# 每日趋势
bun ~/.claude/skills/GitHubTrends/Tools/GenerateDashboard.ts \
  --period daily \
  --output ~/daily-trends.html
```

### Шаг 3: показ результатов
Инструмент автоматически:
1. Получает данные GitHub trending
2. Получает технологические новости (если включено)
3. Анализирует данные для формирования статистики
4. Рендерит HTML-шаблон
5. Сохраняет результат по указанному пути

### Шаг 4: проверка и открытие
Созданный HTML-файл содержит:
- ✅ Адаптивный макет
- ✅ Представление проектов в карточках
- ✅ Круговую диаграмму распределения языков
- ✅ Столбчатую диаграмму прироста Stars
- ✅ Фильтрацию в реальном времени
- ✅ Сортировку
- ✅ Поиск
- ✅ Список технологических новостей

## Примеры использования

### Пример 1: базовая панель
```
User: «Создай панель GitHub trending за эту неделю»

Assistant:
Запускаю инструмент GenerateDashboard...
[Выполнение команды, создание /tmp/github-trends.html]
✅ Панель успешно создана! Открыта в браузере.
```

### Пример 2: панель с новостями
```
User: «Создай ежедневные тренды проектов TypeScript, включая новости»

Assistant:
Создаю панель ежедневных трендов TypeScript с технологическими новостями...
[Выполнение команды: --period daily --language TypeScript --include-news]
✅ Панель создана в ~/Downloads/ts-daily-trends.html
```

### Пример 3: настраиваемый вывод
```
User: «Создай панель с 20 проектами и сохрани на рабочий стол»

Assistant:
Создаю панель трендов из 20 проектов...
[Выполнение команды: --limit 20 --output ~/Desktop/github-trends.html]
✅ Готово! Файл сохранён на рабочий стол
```

## Параметры инструмента

| Параметр | Описание | Значение по умолчанию | Допустимые значения |
|------|------|--------|--------|
| `--period` | Период | `weekly` | `daily`, `weekly` |
| `--language` | Фильтр по языку программирования | Все | TypeScript, Python, Go, Rust и т. д. |
| `--limit` | Число возвращаемых проектов | 10 | Любое положительное целое число |
| `--include-news` | Включить технологические новости | false | - |
| `--news-count` | Число новостей | 10 | Любое положительное целое число |
| `--theme` | Тема | `auto` | `light`, `dark`, `auto` |
| `--output` | Путь выходного файла | `./github-trends.html` | Любой путь |

## Возможности вывода

### Визуализация данных
- **Круговая диаграмма распределения языков**: показывает долю проектов каждого языка программирования
- **Столбчатая диаграмма прироста Stars**: показывает прирост stars для первых 10 проектов

### Интерактивные функции
- **Поиск**: по названию или описанию проекта
- **Фильтрация**: по языку программирования
- **Сортировка**: по месту в рейтинге, общему числу stars и приросту за период

### Адаптивный дизайн
- Поддержка компьютеров, планшетов и телефонов
- Создание красивого интерфейса с помощью Tailwind CSS
- Цветовая схема в стиле GitHub

## Обработка ошибок

Если возникла ошибка:
1. **Сетевая ошибка**: проверьте соединение с сетью и убедитесь, что GitHub доступен
2. **Ошибка разбора**: структура страницы GitHub могла измениться; инструмент покажет отладочную информацию
3. **Ошибка записи файла**: проверьте права записи по выходному пути

## Голосовое уведомление

При выполнении этого рабочего процесса отправьте голосовое уведомление:

```bash
curl -s -X POST http://localhost:8888/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "正在生成 GitHub Trending Dashboard..."}' \
  > /dev/null 2>&1 &
```

И выведите текстовое уведомление:
```
Выполняется рабочий процесс **GenerateDashboard** из навыка **GitHubTrends**...
```

## Интеграция с другими навыками

- **Browser**: проверка отображения созданной HTML-страницы
- **System**: сохранение снимка панели в MEMORY/
- **OSINT**: анализ трендов технологических стеков

## Примечания

- Данные обновляются раз в час (частота обновления GitHub trending)
- Созданный HTML полностью самостоятельный, сервер не требуется
- Все зависимости загружаются через CDN (Tailwind CSS, Chart.js)
- Поддерживается просмотр без сети (данные диаграмм встроены)

## Расширенное использование

### Пакетное создание
```bash
# 生成多个语言的仪表板
for lang in TypeScript Python Go Rust; do
  bun Tools/GenerateDashboard.ts \
    --language $lang \
    --output ~/trends-$lang.html
done
```

### Задания по расписанию
```bash
# 每小时生成一次快照
# 添加到 crontab:
0 * * * * cd ~/.claude/skills/GitHubTrends && bun Tools/GenerateDashboard.ts --output ~/trends-$(date +%H).html
```

### Настройка темы
Изменяя `Templates/dashboard.hbs`, можно настраивать:
- Цветовую схему
- Структуру макета
- Добавлять новые типы диаграмм
- Добавлять новые интерактивные функции