Мини-дашборд. React+Redux

Перед стартом работ сделать оценку по времени, срокам выполнения и з/п.

Задание

Прототип мини-дашборда

Крупнее по частям

Сценарий использования + 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