Задание 1 — найди ошибки

В этом репозитории находятся материалы тестового задания "Найди ошибки" для 14-й Школы разработки интерфейсов (осень 2018, Москва, Санкт-Петербург, Симферополь).

Для работы тестового приложения нужен Node.JS v9. В проекте используются Yandex Maps API и ChartJS.

Задание

Код содержит ошибки разной степени критичности. Некоторые из них — стилистические, а другие — даже не позволят вам запустить приложение. Вам нужно найти все ошибки и исправить их.

Пункты для самопроверки:

1. Приложение должно успешно запускаться.
2. По адресу http://localhost:9000 должна открываться карта с метками.
3. Должна правильно работать вся функциональность, перечисленная в условиях задания.
4. Не должно быть лишнего кода.
5. Все должно быть в едином codestyle.

Запуск

npm i
npm start

При каждом запуске тестовые данные генерируются заново случайным образом.

Комментарии

1. Для начала подключаем eslint с конфигурационными правилами eslint-config-standard, что бы изначально была проверка на единый codestyle.
2. index.js. Приложение не запускается - синтаксическая ошибка.
   Модуль map не использует экспорт по умолчанию, разработчик забыл фигурные скобки.
   Правим: import initMap from './map' => import { initMap } from './map'
3. Упс. Ошибки нет, но страница пустая. Инспектируем страницу, элемент #map схлопнут. Правим css. Добавляем ширину и высоту.

  width: 100%;
  height: 100%;

4. map.js. Удаляем лишний objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
   Иконки у нас двух типов и они явно указаны в маппере: blueCircleDotIconWithCaption и redCircleDotIconWithCaption
   Сразу бросается в глаза var
var filterMonitor => const filterMonitor; Let's use const!
   Также переносим методы add, как и загрузку loadList вниз для порядка.
5. Иконки появились совсем не там где мы ожидаем. Перепутан порядок lat и long. Правим маппер.
6. Отлично! Иконки появились, кластеризация работает, но что-то не так с подгрузкой деталей. Смотрим details. Синтаксические ошибки при объявлении build и clear. \n Кстати оверрайд BalloonContentLayout.superclass.clear.call(this) стоит после тела переопределяемого метода clear.
7. Теперь детали подгружается, но беда с графиками. Идем в chart.js
   Первым делом правим codestyle:

data,
borderColor,
backgroundColor

8. Теперь разбираемся с xAxes, yAxes, что-то не так с позиционированием. Смотрим на getLabel. Весьма странная логика для постраения лейбла.
   Немного правок c xAxes. Добавляем форматтер. Интерфейс английский, поэтому формат hA

type: 'time',
time: {
  displayFormats: {
    quarter: 'hA'
  }
},

9. В методе getLabel возвращаем дату.
   P.S. Немного непонятно как должен выглядить в общем график, но кажется так. Тут могу ошибатся.
10. Мелкие фиксы по codestyle
11. Удаляем ненужный popup.js