Задача

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

Первый - виджет фильтр:

на вход может принимать данные в формате как у данных в приложенном файле. Может отрисовать набор контролов для фильтрации, задаются конфигом виджета 1 контрол => 1 колонка данных. Варианты значений для контролов формируются на основе уникальных значений соответствующих колонок данных. При изменение контролов должен фильтроваться набор данных по полученным значениям из контролов.

Второй - виджет отображения данных.

Варианты отображения на выбор таблица или какой-то отформатированный список, внешний вид задается конфигурацией виджета. Например набор видимых колонок таблицы или шаблон элемента списка.

Обязательное условие виджеты должны умет взаимодействовать то есть виджет фильтр можно настроить так чтобы он выступал как источник данных для виджетам визуализации (все это через конфигурацию виджетов). К одному фильтру можно подключить неограниченное количество виджетов визуализации. Также и фильтров может быть несколько на странице. Виджеты визуализации должны уметь перерисовываться когда в фильтре меняются значения контролов. Также виджеты визуализации должны напрямую уметь принимать данные и просто их отображать как есть без какой либо динамики.

Запрещено использовать фреймворки и библиотеки типа React.js. Только чистый JS. Можно использовать сборщики типа webpack. Разрешенные библиотеки jQuery, underscore.js(lodash.js), moment.js. Использовать синтаксис ES6. Браузеры крайние версии Chrome, Firefox. Код выложить на любой удобный публичный репозиторий(Githab, gitlab, bitbacket)

Решение

Все зависимости в dependencies написаны лично мной, имеют открытый исходный код, могу пояснить за любую строчку кода. Поскольку задача проверить уровень разработчика, я решил что имею право это использовать, тем более когда разрешено использовать JQuery.

Не совсем понятно что значит виджет, если имелось ввиду iframe и postMessage то не обессудьте.

Установка

Выполнить следующую команду в директории проекта.

npm i

Должен быть установлен Node.js

Запуск

Выполнить следующую команду в директории проекта.

npm start

После запуска, в папке public появится папка build в которой вы найдете js и css файлы проекта

Сборка

Выполнить следующую команду в директории проекта, что бы собрать готовое и минифицированное приложение в той же папке public.

npm run build