Implement Analytics Dashboard in React Using Custom Resolvers for Atlas GraphQL API

Sourabh BagrechaPublished Nov 11, 2022 • Updated Nov 11, 2022

React GraphQL Atlas JavaScript

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.

In the previous part of our blog series, we learned how to create custom resolvers for GraphQL that allow us to perform advanced analytics. In this part, we will learn how to create an analytics dashboard to display those insights from our database in a React app.

Creating visualizations in React with Google Charts

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:

Code Snippet

Querying a GraphQL custom resolver

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

Code Snippet

import { useContext, useEffect, useState } from "react";
import { Button, Grid } from "@mui/material";
import request, { gql } from "graphql-request";
import { formatISO, subMonths, endOfToday, startOfDay, endOfDay } from "date-fns";
import { UserContext } from "../contexts/user.context";
import { GRAPHQL_ENDPOINT } from "../realm/constants";
import PageContainer from "../components/PageContainer.component";
import CustomDatePicker from "../components/CustomDatePicker.component";
import ModeAnalytics from "../components/ModeAnalytics.component";
import CategoryAnalytics from "../components/CategoryAnalytics.component";

const Analytics = () => {
  // By default we would like to fetch the analytics for the last month.
  // So we will take the fromDate as today minus 1 month and
  // the toDate as today.
  const today = endOfToday();
  const oneMonthAgo = subMonths(today, 1);
  const [fromDate, setFromDate] = useState(oneMonthAgo);
  const [toDate, setToDate] = useState(today);

const { user } = useContext(UserContext);
  const [analyticsData, setAnalyticsData] = useState(null);

const loadAnalytics = async () => {

// GraphQL query to fetch mode analytics as well as the category analytics.
    const getAnalyticsQuery = gql`
      query getAnalytics($query: Filter!) {
        modeAnalytics(input: $query) {
          modes {
            amount
            mode
          }
        }
        categoryAnalytics(input: $query) {
          categories {
            amount
            category
          }
        }
      }
    `;

// Query variables that will be used to perform the analytics from a particular 
    // date to a particular date.
    const queryVariables = { query: { from: formatISO(startOfDay(fromDate)), to: formatISO(endOfDay(toDate)) } };

const headers = { Authorization: `Bearer ${user._accessToken}` };

try {
      const resp = await request(GRAPHQL_ENDPOINT, getAnalyticsQuery, queryVariables, headers);
      const { modeAnalytics: { modes }, categoryAnalytics: { categories } } = resp;
      setAnalyticsData({ modes, categories });
    } catch (error) {
      alert(error);
    }
  };

useEffect(() => {
    loadAnalytics(); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

return (
    <PageContainer>
      <h1>Analytics Home</h1>
      <CustomDatePicker label="From" value={fromDate} onChange={setFromDate} style={{ marginRight: "2rem" }} />
      <CustomDatePicker label="To" value={toDate} onChange={setToDate} style={{ marginRight: "2rem" }} />
      <Button onClick={loadAnalytics} variant="contained" style={{ margin: "0 auto" }} size="large">Refresh</Button>
      {analyticsData && <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
          <ModeAnalytics data={analyticsData.modes} />
        </Grid>
        <Grid item xs={12} md={6}>
          <CategoryAnalytics data={analyticsData.categories} />
        </Grid>
      </Grid>}
    </PageContainer>
  );
}

export default Analytics;

Visualize the spent amount with a pie chart

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

Code Snippet

Visualize spent amount per category

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

Code Snippet

Putting it all together in the App.js file

Now we will add our analytics page in our routes so that the user can navigate to the analytics from anywhere in the app.

Code Snippet

import { BrowserRouter, Route, Routes } from "react-router-dom";
import NavBar from "./components/NavBar.component";
import { UserProvider } from "./contexts/user.context";
import Analytics from "./pages/Analytics.page";
import CreateExpense from "./pages/CreateExpense.page";
import EditExpense from "./pages/EditExpense.page";
import Home from "./pages/Home.page";
import Login from "./pages/Login.page";
import PrivateRoute from "./pages/PrivateRoute.page";
import Signup from "./pages/Signup.page";

function App() {
  return (
    <BrowserRouter>
      {/* We are wrapping our whole app with UserProvider so that */}
      {/* our user is accessible through out the app from any page*/}
      <UserProvider>
        <NavBar />
        <Routes>
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/signup" element={<Signup />} />
          {/* We are protecting our Home Page from unauthenticated */}
          {/* users by wrapping it with PrivateRoute here. */}
          <Route element={<PrivateRoute />}>
            <Route exact path="/" element={<Home />} />
            <Route exact path="/new" element={<CreateExpense />} />
            <Route exact path="/expense/:id/edit" element={<EditExpense />} />
            <Route exact path="/analytics" element={<Analytics />} />
          </Route>
        </Routes>
      </UserProvider>
    </BrowserRouter>
  );
}

export default App;

Conclusion

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.

In the next part, we will see how we can utilize website/single-page-apps hosting provided by Atlas App Services Static Hosting to host our expengo app, which will make our app accessible from anywhere in the world.

If you have any doubts or concerns, please feel free to reach out to us on Community Forums. I have created a dedicated forum topic for this blog where we can discuss anything related to this blog series.

And before you ask, here’s the GitHub repository (custom-resolvers branch) for this tutorial series.

Rate this tutorial

Tutorial

Adding Autocomplete To Your NextJS Applications With Atlas Search

Feb 28, 2023

Article

Best Practices and a Tutorial for Using Google Cloud Functions with MongoDB Atlas

Jun 13, 2023

Tutorial

How to Manage Data at Scale With MongoDB Atlas Online Archive

Sep 23, 2022

Tutorial

MongoDB Charts Embedding SDK with React

Jan 26, 2023

Creating visualizations in React with Google Charts
Querying a GraphQL custom resolver
Putting it all together in the App.js file
Conclusion

Atlas

Implement Analytics Dashboard in React Using Custom Resolvers for Atlas GraphQL API

Creating visualizations in React with Google Charts

Querying a GraphQL custom resolver

Visualize the spent amount with a pie chart

Visualize spent amount per category

Putting it all together in the App.js file

Conclusion

Related

Adding Autocomplete To Your NextJS Applications With Atlas Search

Best Practices and a Tutorial for Using Google Cloud Functions with MongoDB Atlas

How to Manage Data at Scale With MongoDB Atlas Online Archive

MongoDB Charts Embedding SDK with React

Table of Contents