Учебник React.js, объясняющий, как реализовать диаграммы для отображения информации на основе пользовательских данных.
Данные бесполезны, по крайней мере, сами по себе.
Действительно трудно понять истинное значение необработанных данных, не извлекая значимые идеи и информацию с помощью надлежащих визуализаций.
В последней части нашей серии блогов мы узнали, как создавать собственные преобразователи для GraphQL, которые позволяют нам выполнять расширенную аналитику. В этой части мы узнаем, как реализовать панель аналитики для отображения информации из нашей базы данных в приложении React.js с использованием GraphQL.
Установка зависимостей
Чтобы облегчить себе жизнь и вместо того, чтобы изобретать велосипед, мы будем использовать библиотеку React-Google-Charts для создания визуализаций аналитических данных, которые мы извлекаем из наших пользовательских преобразователей для GraphQL. Выполните следующую команду для установки:
npm i react-google-charts
Страница панели аналитики
Мы создаем домашнюю страницу Analytics, где мы можем отслеживать все режимы и категории и видеть, где и как мы тратим деньги в консолидированном представлении. По умолчанию мы извлекаем аналитику за последний месяц, но пользователь может настроить ее в соответствии со своими потребностями с помощью настраиваемого средства выбора даты, расположенного в верхней части страницы аналитики.
Номер строки 28–43 — самая важная часть страницы Analytics, это запрос GraphQL, который мы используем для получения данных из Custom Resolver для GraphQL, созданного нами в последней части этой серии блогов.
Создайте новый файл: ./src/pages/Analytics.page.js
Компонент ModeAnalytics
Компонент Mode Analytics используется для визуализации суммы, которую мы тратим, используя различные способы оплаты. Каждый расход в нашем приложении будет иметь атрибут «режим», например, UPI, кредитная карта, наличные и т. д. Создайте новый файл: ./src/components/ModeAnalytics.component.js
Компонент CategoryAnalytics
Компонент «Аналитика категорий» используется для визуализации суммы денег, которую мы тратим на разные категории. Каждая статья расходов в нашем приложении будет иметь атрибут «категория», например «Образование», «Путешествия», «Развлечения» и т. д. Создайте новый файл: ./src/components/CategoryAnalytics.component.js
Собираем все вместе в файле App.js
Теперь мы добавим нашу страницу аналитики в наши маршруты, чтобы пользователь мог перейти к аналитике из любого места в приложении.
Заключение
Вот и все. Мы внедрили полнофункциональную панель аналитики в React. Мы смогли использовать пользовательские распознаватели для Atlas GraphQL API, которые мы создали для извлечения и выполнения сложных вычислений, выходящих за рамки обычных операций CRUD.
В следующей части мы увидим, как мы можем использовать хостинг веб-сайтов/одностраничных приложений, предоставляемый статическим хостингом Atlas App Services, для размещения нашего приложения expengo, что сделает наше приложение доступным из любой точки мира.
Если у вас есть какие-либо сомнения или опасения, пожалуйста, не стесняйтесь обращаться к нам на форумах сообщества. Я создал специальную тему на форуме для этого блога, где мы можем обсудить все, что связано с этой серией блогов.
И прежде чем вы спросите, вот Репозиторий GitHub (ветвь custom-resolvers) для этой серии руководств.
