Разработка адаптивного Dashboard-приложения на React с использованием ECharts

В рамках данного задания необходимо разработать одностраничное веб-приложение «Dashboard» с использованием библиотеки React и графической библиотеки ECharts.

Функциональные требования:

Приложение должно содержать минимум 4 различных графика (например: линейный график, круговая диаграмма, столбчатая диаграмма, диаграмма рассеяния).
Необходимо самостоятельно определиться с тематикой приложения.
Помимо графиков в приложении должно быть описание для чего данные графики показаны. Например, статистики по заболеваемостям т.д..
Компоненты графиков должны быть реализованы как переиспользуемые и расширяемые React-компоненты, способные принимать пропсы для изменения конфигурации (например, тип данных, стили, заголовки и пр.).
Графики должны строиться на основе захардкоженных или случайно сгенерированных данных.
Интерфейс должен быть адаптивным — корректно отображаться на различных устройствах.
Следует решить проблему некорректного отображения графиков при изменении размеров окна (известная особенность ECharts).
Приложение должно быть оформлено в чистом и понятном UI, можно использовать CSS/SCSS или любую CSS-библиотеку (например, TailwindCSS).
[Дополнительно]. Используя библиотеку react-router-dom задать несколько страниц. Например, реализовать главную страницу с графиками, страницу с блогом или информацией, страницу обратной связи.

Рекомендуемые источники и материалы

React и основы компонентного подхода:

https://react.dev/learn

ECharts:

Официальный сайт: https://echarts.apache.org/en/index.html
Использование в React: https://echarts.apache.org/en/tutorial.html#Use%20with%20React
React-обёртка: https://github.com/hustcc/echarts-for-react

Адаптивная верстка:

Инструкция по работе с GitHub

Перейдите на сайт https://github.com и зарегистрируйтесь (если у вас ещё нет аккаунта).

Нажмите кнопку "New repository" и создайте новый публичный репозиторий, например react-dashboard-echarts.

Установите Git на вашем компьютере: https://git-scm.com/downloads

Откройте терминал и выполните команды:

git init
git remote add origin https://github.com/ваше_имя_пользователя/react-dashboard-echarts.git
git add .
git commit -m "Initial commit"
git push -u origin main

Для публикации проекта на GitHub Pages:

Установите пакет:

npm install --save gh-pages

В package.json добавьте:

"homepage": "https://ваше_имя_пользователя.github.io/react-dashboard-echarts",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Затем выполните:

npm run deploy

План выполнения задания

Неделя 1: Подготовка и базовая структура

Создать репозиторий на GitHub.
Настроить проект с помощью create-react-app или Vite.
Установить и подключить библиотеку echarts-for-react.
Реализовать базовую верстку (шапка, контейнеры под графики).
Создать минимум один простой график на базе ECharts.
По завершению недели отправить ссылку на репозиторий с промежуточным результатом.

Неделя 2: Разработка компонентов и адаптивности

Разработать переиспользуемые компоненты для графиков.
Передавать в графики данные и настройки через пропсы.
Добавить минимум 3 новых типа графиков.
Обеспечить адаптивное отображение интерфейса.
Найти и внедрить решение по автоматическому ресайзу графиков при изменении окна.
По завершению недели отправить обновлённую ссылку на репозиторий с текущим состоянием проекта.

Неделя 3: Завершение, тестирование и публикация

Протестировать отображение на разных устройствах.
Финализировать стилизацию и поведение компонентов.
Протестировать изменение размера окна.
Опубликовать проект на GitHub Pages.
Оформить README.md с описанием проекта, скриншотами и инструкцией по запуску.
По завершению недели отправить итоговый репозиторий и ссылку на опубликованную версию проекта.