В приложении должна присутствовать панель навигации содержашая две вкладки:
/ – обзор рынка
/liquidity – страница анализа ликвидности
Приложение должно получать все необходимые данные из общедоступного API
Эндпоинт: /cryptocurrency/listings/latest
Вкладка / Market Overview
Должна рендериться таблица отсортированная по rank
см. скриншот 1
Вкладка /liquidity Liquidity
Должна отображать диаграмму рассеяния (scatter plot chart), где
ось X Market Capitalization
ось Y Volume (24h)
ось Z (или размер точки) это абсолютное изменение цены (24h)
см. скриншот 2
Диаграмма должна быть интерактивной. Когда пользователь наводит курсор на точку, должен отображаться тултип с информацией (name, marketcap, volume, price change).
Каждая точка на диаграмме представляет одну валюту.
По умолчанию /cryptocurrency/listings/latest возвращает топ 100 валют. Необходим глобальный контрол с ниспадающим меню, позволяющий регулировать эту величину, использующий следующие значения:
10
50
все
Изменение значение контрола должно влиять на обе вкладки.
Технические требования:
Реакт
Любой UI-фреймворк. (Bootstrap, Semantic-UI) или же кастомное решение
Любая популярная библиотека для графиков.
Популярный стейт-менеджер. Предпочтительней Redux, но можно и useContext
Приложение должно работать в последних версиях Хрома, Сафари, ФФ и Эджа
Респонсивная верстка
Тайпскрипт желателен, но не обязателен