На 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.

Точная верстка не обязательна, внешний вид диаграммы тоже выбрать на свое усмотрение.