Перед стартом работ сделать оценку по времени, срокам выполнения и з/п.
Задание
Прототип мини-дашборда
Крупнее по частям
Сценарий использования + System Story:
При подгрузке страницы в дропдауне (3) с показателями подгружаются статические варианты:
Время (выбрано по умолчанию) - average_time
Отказы - bounce_rate
Сессии - sessions
По умолчанию выбран интервал (5) - последняя неделя.
В левой визуализации (1) подгружается статистика по источникам.
Для строки “Все источники и в среднем” отображаются суммарные данные по всем источникам и среднее значение показателя.
Для каждого источника отображается значение показателя за выбранный период и визуальное отклонение от среднего значения, при наведении на строку источника показывается абсолютная величина отклонения.
Отображается 10 строк данных отсортированные по выбранному показателю, сортировка браузерная.
АПИ первого графика по ссылке. (авторизация)
Итоговые данные в .total
Данные строки в .objects
название источника в utm_sourcemedium
выбранный показатель в total.analytics и objects[i].analytics
Выводить только строки, в которых utm_sourcemedium != ‘’
В правом графике (2) отображается итоговая статистика в разрезе времени
АПИ правого графика по ссылке
данные берутся из total.analytics.<выбранный показатель>
данные состоят из массива точек (X,Y)
координата X - время unixtime
координата Y - значение показателя
Пользователь выбирает источник в левом графике (4), Правый график актуализируется: отображает статистику в разрезе дат по выбранному источнику.
АПИ по ссылке
В utm_sourcemedium подставляется значение из выбранной строки в левом графике.
Пользователь меняет даты (5) - происходит обновление обоих графиков в соответствие с текущими параметрами выбранного источника и показателя.
Пользователь меняет показатель (3) - происходит обновление обоих графиков в соответствие с текущим параметром дат и выбранного источника.
Пользователь обновляет страницу - значение выбранного показателя сохраняется.
Условия выполнения задания
Можно и нужно использовать готовые компоненты
Взаимодействие реализовать в парадигме React + Redux
Использовать синтаксис EC6+
Авторизация
Авторизация работает через JWT
Для корректной работы необходимо передавать в cookie значение access_token, выданный при авторизации
Данные для авторизации:
https://testing.alytics.ru
[email protected]
alyticstest1
