Важно! тестовое задание должно быть выполнено с использованием ngrx !(https://github.com/ngrx/platform)
На Angular 5 написать компонент отображения агрегированной информации по переданному в него списку компаний и сервис, который предоставляет данные компоненту, неважно откуда, он должен уметь возвращать Observable, в котором содержится актуальный список компаний следующего формата:
{
"companies": [
{
"id": 1234,
"name": "some name",
"type": "someType",
"revenuePerWeek": {
"monday": 12,
"tuesday": 5,
"wednesday": 34,
"thursday": 15,
"friday": 10,
"saturday": 21,
"sunday": 20
},
"revenue": 1500,
"monthRevenue": 345
},
...
]
}
Компонент должен состоять из двух типов, так называемые smart и dumb компоненты. Смарт часть берет данные из сервиса, фильтрует их по monthRevenue > 0 и передает их в дамб, преобразовав в необходимый формат. Входные данные dumb компонента (@input)
@Input() items
{
"items": [
{
"id": 1234,
"name": "some name",
"category": "someCategory",
"weekStats": {
"monday": 12,
"tuesday": 5,
"wednesday": 34,
"thursday": 15,
"friday": 10,
"saturday": 21,
"sunday": 20
},
"balance": 1500,
"monthBalance": 345
},
...
]
}
Выходные данные (@output) - onItemSelected
Дамб компонент рисует график по данным из weekStats каждого объекта из items, где по оси X недели в виде букв M, T, W, etc, а по Y - значение из weekStats.{someDay}. В Month и Total отображаются monthBalance и balance соответственно.
Компонент имеет примерно следующий вид
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/077165a9-6fba-4c65-aa95-cb74f40e4977/Untitled
В селекте "Все категории" можно выбрать какую категорию items показывать, то есть в графике, Month и Total будут показываться агрегированные показатели по всем items выбранной категории. В нашем случае категория - это тип компании, смарт компонент должен передавать type компании как category для дамб компонента.
В селекте "Все вхождения" можно выбрать определенный объект из items, в нашем случае здесь будут компании. Если в этом селекте что-то выбрано, отличное от значения по умолчанию "Все вхождения" - то появляется кнопка open. При нажатии на нее дамб компонент генерирует @output onItemSelected, передает туда выбранный item. Смарт компонент подписывается на этот аутпут и в консоли выводит id выбранной компании.
Заметки
В качестве решения данного задания мы хотели бы видеть работающее приложение в https://stackblitz.com.
Точная верстка не обязательна, внешний вид диаграммы тоже выбрать на свое усмотрение.