TEST-SM-EX

Описание задания

Цель задания — реализовать компонент взаимодействия с графиком и картой, используя данные из API. Компонент должен отобразить маршрут на карте, а также построить график с возможностью выбора отображаемых параметров. Когда пользователь кликает на точку графика, карта должна центрироваться на соответствующей точке маршрута и отобразить метку.

Порядок выполнения

1. Получить токен:

   • API для получения токена: https://sputnic.tech/mobile_api/token/login
   • Метод: POST
   • Учетные данные:

    {
       "login": "testdemo",
       "password": "demo"
    }

   • В ответе придут два токена: access и refresh.
   • Используйте токен access в последующих запросах, добавляя его в заголовок как Bearer Token.

2. Получить данные для графика:

   • API для получения данных маршрута: https://sputnic.tech/mobile_api/getRoutesPoint
   • Метод: POST
   • Тело запроса:

     {
       "id": 740,
       "date_start": "2025-02-05 06:13:02",
       "date_end": "2025-02-07 17:53:24"
     }

   • В ответе вы получите набор данных с объектами: parking, refuels, route.
     • Объект route включает:
       • lat — широта
       • lng — долгота
       • reserve — данные с трекера и датчиков для построения графика.

Ожидаемое поведение

1. Карта:

   • После получения данных должен отобразиться маршрут на карте.
   • Для отображения маршрута можно использовать любую карту, например, Google Maps, Яндекс.Карты или OpenStreetMap.
   • На карте отобразите линию маршрута, проложенную по точкам, полученным из данных route (широта и долгота).

2. График:

   • Снизу должен отображаться график с данными из объекта reserve:
     • Параметры, которые следует отобразить на графике:
       • speed — скорость
       • fuel1 — уровень топлива
       • voltage — напряжение
   • Для отображения графиков используйте библиотеки, такие как Chart.js
   • График должен поддерживать чекбоксы для включения/отключения параметров.

3. Взаимодействие с графиком:

   • Когда пользователь нажимает на точку графика, карта должна автоматически центрироваться на соответствующей точке маршрута и показывать метку на этом месте.

Реализация

Требования:

• Использовать React.
• Реализовать взаимодействие с API.
• Использовать компонент карты и графика.
• Обрабатывать данные с API и отображать маршрут и график.