Всем привет, сегодня я публикую 21-ю статью этого трека. В предыдущей статье мы создали две коллекции: «quantOrderByConsumer» и «quantProductByOrder». Теперь мы создадим новый проект Angular с помощью Google Charts для создания двух диаграмм с использованием коллекций. Давайте начнем.
Прежде чем мы начнем, посмотрите последнюю статью трека.
Первый шаг — создать новый проект Angular с помощью Angular CLI; ниже вы можете увидеть используемые мной команды. Я добавил в него Material Design для лучшего стиля.
После создания скелета проекта вам нужно установить «angular-google-chars», запустить «npm install angular-google-charts» внутри проекта.
Создайте новую переменную среды «apiReportUrl»; это конечная точка API.
Внутри «app.module.ts» импортируйте несколько модулей, как показано ниже.
Замените содержимое в «app.component.html». Посмотрите ниже.
Теперь вы должны создать маршруты в «app-routing.module.ts».
Следующий шаг — переименовать файл «report.service.ts», импортировать созданную переменную среды и создать функцию «getReports» для получения данных из конечной точки API.
Большинство изменений мы внесем сейчас. Откройте файл «reports.component.css» и добавьте код, как показано ниже.
В «reports.component.html» добавьте две диаграммы: одну для «Количество заказов по потребителям» и другую для «Количество продуктов по заказам». .
Последний шаг — в «reports.component.ts», добавьте переменные, используемые в диаграммах, созданных ранее, и внутри «ngOnInit» мы вызовем службу «getReports », созданный ранее.
Для проверки запустите «ng serve — open — port 4100» во внешнем интерфейсе проекта Orders. Добавьте больше заказов, как показано ниже.
Теперь запустите «ng serve — open — port 4000» во внешнем интерфейсе проекта «Отчеты». Вы увидите две диаграммы.
Вот я и заканчиваю эту статью. Я надеюсь, что вам понравилось. В следующих статьях мы создадим SPA-приложение для управления в уникальном месте всеми созданными нами интерфейсными приложениями. До скорой встречи.
Ссылка на гитхаб:
Клейсон Феррейра де Мело
Обучение инструктора Эстии
#estiatraining #nodejs #микросервисы #инженер-программист #программист #redis #rabbitmq #angular #mongodb
