Тестовое задание: Реализация дашборда с использованием React и ECharts

Ссылка на проект

https://i-tstart-chart.vercel.app/

Описание

В данном тестовом заданиия реализовал небольшое React-приложение для отображения данных о курсах валют. Приложение содержит в себе визуализацию данных с использованием библиотеки ECharts, а также интерфейс пользователя с использованием компонентов из библиотеки Consta UI Kit.

Задачи

• Создание дашборда с использованием макета Figma, доступного здесь.
• Реализация визуализации данных с помощью библиотеки ECharts.
• Вывод среднего значения за период.
• Переключение курсов валют.
• Использование компонентов из библиотеки Consta UI Kit для построения интерфейса.

Компоненты

ReactECharts

В приложении используется компонент ReactECharts, который предоставляет обертку над библиотекой ECharts для удобной интеграции в React-приложение.

Button, ButtonGroup, Card, Text, Typography

Для создания интерфейса пользователя используются компоненты из библиотеки Consta UI Kit, такие как Button, ButtonGroup, Card, Text, Typography.

Запуск приложения

1. Установите зависимости: npm install.
2. Запустите приложение: npm start.

Реализация

Загрузка данных

Данные о курсах валют загружаются из API с использованием axios. После успешной загрузки данные фильтруются и подготавливаются для отображения.

Отображение визуализации

Данные визуализируются с помощью графика, построенного с использованием библиотеки ECharts. График отображает динамику изменения курсов выбранных валют на основе полученных данных.

Интерфейс пользователя

Интерфейс пользователя содержит компоненты для переключения курсов валют, а также отображения среднего значения за период. Для стилизации интерфейса используются компоненты из библиотеки Consta UI Kit.

Дополнительные возможности

• Валидация и обработка ошибок при загрузке данных.
• Адаптивный дизайн для корректного отображения на различных устройствах.
• Реализация тултипов для отображения значений на графике при наведении.