3.1. Дашборд

Модуль дашборда представляет собой главную страницу приложения HRoom, на которой отображаются основные показатели и метрики для быстрого доступа к ключевой информации.

Основные компоненты

EngagementGauge - индикатор вовлеченности команды
DepartmentsHeatmap - тепловая карта отделов
MetricsModule - модуль метрик производительности
TeamsModule - информация о командах
InsightsSlider - карусель с AI-инсайтами
QuestionsSlider - актуальные вопросы и метрики

Индикатор вовлеченности (EngagementGauge)

Отображает общий уровень вовлеченности команды в виде круговой диаграммы с цветовой индикацией. Данные для индикатора загружаются с использованием хуков:

useEngagementData - получение данных о вовлеченности
useSurveyData - получение данных из опросов
useSummaryData - получение сводной информации
useResponseData - получение данных об ответах

Принцип работы EngagementGauge

Индикатор вовлеченности работает следующим образом:

Сбор данных - компонент собирает данные о вовлеченности сотрудников через хук useEngagementData, который агрегирует информацию из нескольких источников (опросы, активность, отзывы).
Расчет показателя - на основе собранных данных вычисляется общий показатель вовлеченности в диапазоне 0-100.
Визуализация - показатель отображается в виде круговой диаграммы, где угол заполнения и цвет секторов зависят от значения.
Цветовая индикация - применяется динамическая цветовая схема: красный (0-40), желтый (41-70), зеленый (71-100).
Интерактивность - при наведении на различные части диаграммы появляется всплывающая подсказка с детальной информацией.

Компонент GaugeBackground отвечает за отрисовку фоновой части индикатора с помощью SVG. useEngagementData опрашивает API и обновляет данные с настраиваемой периодичностью. Кнопка RefreshButton позволяет пользователю вручную обновить данные.

Тепловая карта отделов (DepartmentsHeatmap)

Визуализирует различные метрики по отделам в виде тепловой карты, позволяя быстро выявлять проблемные зоны и сильные стороны команд. Карта использует цветовую градацию для отображения значений метрик.

Компоненты тепловой карты:

HeatmapGrid - основная сетка карты
HeatmapCell - ячейка с данными
MetricHeader - заголовок с названием метрики
DepartmentIcon - иконка отдела
PeriodSelector - селектор периода времени
Tooltip - всплывающая подсказка с детальной информацией

Принцип работы DepartmentsHeatmap

Тепловая карта отделов функционирует по следующему алгоритму:

Загрузка данных - через хук useHeatmapData выполняется запрос к API для получения агрегированных метрик по каждому отделу.
Нормализация - полученные значения нормализуются в диапазоне 0-100 для единообразного отображения разных метрик.
Построение сетки - компонент HeatmapGrid создает двумерную сетку, где строки соответствуют отделам, а столбцы - различным метрикам.
Цветовая кодировка - каждая ячейка тепловой карты (HeatmapCell) окрашивается в соответствии со значением метрики от светлого (низкие показатели) до темного (высокие показатели).
Фильтрация - компонент PeriodSelector позволяет отображать данные за различные периоды времени (неделя, месяц, квартал, год).

При клике на ячейку отображается подробная информация о значении метрики, динамике изменений и рекомендациях по улучшению показателя. Компонент оптимизирован для работы с большим количеством данных и использует технику виртуализации для эффективного рендеринга только видимых ячеек при большом количестве отделов.

Модуль метрик (MetricsModule)

Отображает ключевые метрики производительности. Включает в себя:

MetricsList - список доступных метрик
MetricCard - карточка с отдельной метрикой
MetricsChart - график динамики метрик
CustomTooltip - настраиваемая всплывающая подсказка

Принцип работы MetricsModule

Модуль метрик работает следующим образом:

Получение данных - через хук useMetricsData выполняется запрос к API для получения ключевых показателей эффективности команд.
Группировка - метрики группируются по категориям (вовлеченность, коммуникация, лидерство, командная работа и т.д.).
Сортировка - автоматическая сортировка метрик по степени критичности или важности.
Визуализация - компонент MetricsChart преобразует временные ряды данных в интерактивные графики.
Форматирование - значения метрик форматируются в соответствии с типом данных (проценты, абсолютные значения, рейтинги).

Компонент MetricCard отвечает за отображение отдельной метрики с кратким описанием, текущим значением, динамикой и цветовой индикацией состояния. Пользователь может выбрать период для анализа тенденций и переключаться между типами графиков (линейный, столбчатый, область). Имеется функция сравнения с предыдущими периодами для оценки динамики изменений.

Модуль команд (TeamsModule)

Представляет информацию о командах и их производительности. Включает:

TeamList - список команд
MetricSelector - селектор для выбора метрики
AdvicePanel - панель с AI-рекомендациями
PeriodSelector - выбор периода времени

Принцип работы TeamsModule

Модуль команд функционирует по следующему принципу:

Загрузка списка команд - через хук useTeamsData загружается список команд компании с основными показателями.
Фильтрация и сортировка - команды могут быть отфильтрованы по отделу, метрике или другим параметрам.
Анализ показателей - для каждой команды рассчитывается набор ключевых метрик и их отклонение от нормы.
Выявление проблем - система автоматически идентифицирует команды с критическими показателями.
Генерация рекомендаций - через хук useAIAdvice для проблемных команд формируются AI-рекомендации по улучшению показателей.

Компонент TeamList отвечает за отображение списка команд с возможностью сортировки по различным параметрам. MetricSelector позволяет выбрать ключевую метрику для анализа всех команд. Панель AdvicePanel отображает автоматически сгенерированные AI-рекомендации для улучшения работы выбранной команды на основе анализа её показателей и исторических данных.

Слайдер инсайтов (InsightsSlider)

Интерактивная карусель, отображающая AI-генерируемые инсайты на основе данных компании. Слайдер включает:

InsightCard - карточка с отдельным инсайтом
useInsights - хук для получения инсайтов
useSliderDrag - хук для реализации взаимодействия с сенсорным экраном

Принцип работы InsightsSlider

Слайдер инсайтов функционирует следующим образом:

Получение инсайтов - хук useInsights запрашивает AI-генерируемые инсайты на основе анализа всех доступных данных.
Ранжирование - инсайты ранжируются по важности, актуальности и потенциальному влиянию на бизнес-процессы.
Категоризация - каждый инсайт относится к определенной категории (тенденции, аномалии, рекомендации и т.д.).
Интерактивное отображение - с помощью компонента InsightCard инсайты представляются в виде карточек в интерактивной карусели.
Взаимодействие - хук useSliderDrag обеспечивает поддержку жестов свайпа для навигации по карусели на мобильных устройствах.

Компонент поддерживает различные типы инсайтов: аналитические выводы, тревожные предупреждения, рекомендации по улучшению процессов. Слайдер автоматически обновляется при появлении новых инсайтов. Пользователь может взаимодействовать с карточками инсайтов, помечая их как полезные или неактуальные, что улучшает последующую генерацию рекомендаций.

Слайдер вопросов (QuestionsSlider)

Отображает ключевые вопросы и связанные с ними метрики. Компоненты:

QuestionCard - карточка с вопросом
StatBar - полоса статистики
Stats - блок статистики
useQuestions - хук для загрузки вопросов

Принцип работы QuestionsSlider

Слайдер вопросов работает по следующему алгоритму:

Загрузка вопросов - хук useQuestions загружает актуальные вопросы из активных и недавно завершенных опросов.
Анализ ответов - для каждого вопроса анализируются полученные ответы, вычисляются статистические показатели.
Выделение ключевых вопросов - система идентифицирует вопросы с наиболее значимыми или неожиданными ответами.
Визуализация статистики - компонент StatBar отображает распределение ответов в виде горизонтальных полос.
Интерактивность - пользователь может детально изучить статистику по каждому вопросу и сравнить результаты.

Компонент QuestionCard представляет информацию о конкретном вопросе, включая текст, статистику ответов и интерпретацию результатов. Слайдер поддерживает фильтрацию вопросов по категориям, датам или связанным метрикам. Для каждого вопроса доступен детальный модальный просмотр с расширенной аналитикой, включая сравнение с предыдущими периодами и тренды изменений в ответах.

Интеграция с API

Дашборд интегрируется с различными API-эндпоинтами:

metricsApi - получение метрик
heatmapApi - данные для тепловых карт
insightsApi - получение инсайтов
aiAdviceApi - получение AI-рекомендаций

Принципы API интеграции в дашборде

Дашборд интегрируется с API следующим образом:

Кэширование запросов - для оптимизации производительности используется кэширование часто запрашиваемых данных с установленным временем жизни (TTL).
Параллельные запросы - используется Promise.all для одновременного выполнения независимых запросов.
Обработка ошибок - все запросы обернуты в try-catch блоки с отображением соответствующих сообщений об ошибках.
Отложенная загрузка - компоненты загружают данные по мере необходимости (lazy loading) для ускорения начальной загрузки страницы.
Периодическое обновление - критически важные данные обновляются автоматически с заданным интервалом.

API-сервисы реализуют интерфейсы для получения как сырых данных, так и предварительно обработанной аналитики. Система обработки ошибок предусматривает фоллбэки для ситуаций, когда API недоступно или возвращает ошибку. Модуль дашборда оптимизирован для минимизации количества запросов к API через объединение связанных запросов и интеллектуальную стратегию обновления данных.

Объединение модулей

Все компоненты дашборда объединяются в основном файле:

src/pages/Dashboard.tsx - основной компонент страницы дашборда

// Примерная структура основного компонента Dashboard
import React from 'react';
import { EngagementGauge } from './Dashboard/EngagementGauge';
import { DepartmentsHeatmap } from './Dashboard/DepartmentsHeatmap';
import { MetricsModule } from './Dashboard/MetricsModule';
import { TeamsModule } from './Dashboard/TeamsModule';
import { InsightsSlider } from './Dashboard/InsightsSlider';
import { QuestionsSlider } from './Dashboard/QuestionsSlider';

export const Dashboard = () => {
  return (
    <div className="dashboard-container">
      <div className="dashboard-top-row">
        <EngagementGauge />
        <DepartmentsHeatmap />
      </div>
      <div className="dashboard-metrics-row">
        <MetricsModule />
      </div>
      <div className="dashboard-teams-row">
        <TeamsModule />
      </div>
      <div className="dashboard-insights-row">
        <InsightsSlider />
      </div>
      <div className="dashboard-questions-row">
        <QuestionsSlider />
      </div>
    </div>
  );
};

Принцип интеграции модулей дашборда

Модули дашборда объединяются в единый интерфейс с использованием следующих принципов:

Отложенная загрузка - для оптимизации производительности используется динамический импорт компонентов с помощью React.lazy.
Адаптивное размещение - расположение и размер модулей меняются в зависимости от разрешения экрана и предпочтений пользователя.
Шина событий - модули могут взаимодействовать друг с другом через общую шину событий для синхронизации состояний.
Контекстная связь - выбор элемента в одном модуле может влиять на отображение данных в другом связанном модуле.
Персонализация - пользователь может настраивать видимость и порядок модулей в соответствии со своими предпочтениями.

Компонент Dashboard выступает в качестве контейнера, управляющего отображением и состоянием всех дочерних модулей. Используется контекст для передачи общих данных и состояний между компонентами. Каждый модуль может быть развернут на весь экран для детального изучения данных. Система управления состоянием обеспечивает согласованность данных между модулями при их обновлении.

Документация проекта