Here is another SPFX web part which produces Office 365 usages reports (SharePoint Online, OneDrive and Outlook) using Microsoft Graph API.
Before i go into implementation detail, Here are few screenshots of the web part.
OneDrive - Number of total and active files
Outlook - Email activity user detail
SharePoint - Number of pages viewed across all sites
Here are few components which have been used.
1. Tabs UI
I am using material UI react components to build tabs. There are lot’s useful UI elements which you can use in your application. Find out more about react material UI
2. Microsoft Graph API Integration
This is a simple SPFX web part which make use of Microsoft Graph API to access office 365 usages reports. To use Graph API, I am using Dependency Injection pattern through service scopes as written by Vardhaman Deshpand.
If you have multiple web parts in your solutions which are consuming Microsoft Graph API then this approach would be useful to access graph service centrally.
Here is code which implements calling MSGraphClient from a custom service.
3.Graph API Permissions
You need following set of permissions in order to retrieve office 365 usage reports. Find out more about consuming the Microsoft Graph API in the SharePoint Framework
I am using BETA Graph API endpoints. Because in BETA endpoints, you can specify the format of the response. I am retrieving response in JSON format.
4. Charts Integration
I am using react-chartjs-2 npm package for charts. This is a React wrapper for Chart.js.
If you are passing dynamic data to chart component then make sure to use redraw method to force update charts with updated dataset. see below example.
Explore solution on GitHub