Integrating and visualizing data on the frontend using Victory

In this final section, we are going to integrate the aggregation endpoints we previously defined. Then, we are going to introduce the Victory library in the frontend to create graphs to visualize our aggregated data!

Integrating the aggregation API

First of all, we need to integrate the API routes in the frontend, as follows:

1. Edit the src/api/events.js file and add three new API functions to get the total views, daily views, and daily durations of a post:

   export const getTotalViews = (postId) =>
     fetch(`${import.meta.env.VITE_BACKEND_URL}/events/totalViews/${postId}`).then(
       (res) => res.json(),
     )
   export const getDailyViews = (postId) =>
     fetch(`${import.meta.env.VITE_BACKEND_URL}/events/dailyViews/${postId}`).then(
       (res) => res.json(),
     )
   export const getDailyDurations = (postId) =>
     fetch...