Office 365 Usage Reports using SPFX and Microsoft Graph API

Here is another SPFX web part which produces Office 365 usages reports (SharePoint Online, OneDrive and Outlook) using Microsoft Graph API.

How it looks like

Before i go into implementation detail, Here are few screenshots of the web part.

OneDrive - Number of total and active files
OneDrive - Number of total and active filesOneDrive - Number of total and active files

Outlook - Email activity user detail
Outlook - Email activity user detailOutlook - Email activity user detail

SharePoint - Number of pages viewed across all sites
SharePoint - Number of pages viewed across all sitesSharePoint - Number of pages viewed across all sites

Implemenation Detail

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

Graph API Permissions to reterive office 365 usage reportsGraph API Permissions to reterive office 365 usage reports

Note:
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.

Trick
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.

ChartJS redraw methodChartJS redraw method

Source Code





Explore solution on GitHub