Implement Analytics Dashboard in React Using Custom Resolvers for Atlas GraphQL API
Rate this tutorial
Data is useless, at least on its own.
It’s really difficult to understand the real meaning of raw data without extracting meaningful insights and information through proper visualizations.
To make our lives easier and instead of reinventing the wheel, we will use the React-Google-Charts library to create visualizations of the analytics data that we fetch from our Custom Resolvers for GraphQL. Run the following command to install:
We’ll create an analytics home page where we can track all the modes and categories and see where and how we are spending money in a consolidated view. By default, we are fetching the last month’s analytics but the user can customize it as per their needs by using the custom date picker placed on top of the analytics page.
Lines 28-43 are the most important part of the analytics page. It is the GraphQL query that we are using to fetch the data from the custom resolvers we created in the previous part of this blog series. Create a new file: ./src/pages/Analytics.page.js
The Mode Analytics component is used to visualize the amount we are spending using different modes of payment. Each expense in our app will have a “mode” attribute in it, like UPI, Credit Card, Cash, etc. Create a new file: ./src/components/ModeAnalytics.component.js
The Category Analytics component is used to visualize the amount of money we are spending on different categories. Each expense in our app will have a “category” attribute in it, like Education, Travel, Entertainment, etc. Create a new file: ./src/components/CategoryAnalytics.component.js
Now we will add our analytics page in our routes so that the user can navigate to the analytics from anywhere in the app.
That’s it. We have implemented a fully functional analytics dashboard in React. We were able to utilize the custom resolvers for Atlas GraphQL API we created for fetching and performing complex calculations that were beyond regular CRUD operations.