React Analytics Charts
Edit page
Home
Core Components
AnalyticsDashboardDescriptionUsagePropsStylingExampleAuthorizeButtonDataChartSignOutButtonViewSelector
Charts Overview
Common Charts
Custom Charts
Custom Dashboards and Standalone ChartsHow To Get An OAuth Client ID From GoogleCode of ConductMIT License

AnalyticsDashboard

See the full example below.

Description

This component allows you to drop in an analytics dashboard that automatically handles loading the Google Analytics Embed API, sign in and sign out, and view selection.

All you need to do is provide your Client ID and a render prop that renders all the charts you'd like to see.

Refer to the Charts Overview for a list of all charts available.

If you need more flexibility, you can create your own custom dashboard if you'd like.

Usage

AnalyticsDashboard takes a clientId and a renderCharts render prop.

Just use the renderCharts prop to render the charts you'd like to view and the dashboard will handle everything else, including loading the Google Analytics Embed API, handling auth, and showing a view selector.

import { AnalyticsDashboard } from "react-analytics-charts";
// Over ten different commonly used charts are available
import { SessionsByDateChart, SessionsGeoChart } from "react-analytics-charts";
<AnalyticsDashboard
  authOptions={{
    clientId:
      "123456789012-abc123def456ghi789jkl012mno345p.apps.googleusercontent.com",
  }}
  renderCharts={(gapi, viewId) => {
    return (
      <div>
        <SessionsByDateChart
          gapi={gapi}
          viewId={viewId}
          showPageViews
          showUsers
        />
        <SessionsGeoChart gapi={gapi} viewId={viewId} showPageViews />
        ... More charts here ...
      </div>
    );
  }}
/>

Props

authOptions
AuthorizeOptions
required
viewId
string | undefined
hideViewSelector
boolean | undefined
hideAuth
boolean | undefined
loadingText
string | undefined
renderCharts
((gapi: GoogleAnalyticsEmbedAPI, viewId: string) => Element) | undefined
chartsAppearFirst
boolean | undefined
dashId
string | undefined
noReloadOnSignOut
boolean | undefined
hideRefreshButton
boolean | undefined
refreshButtonText
string | undefined
signOutButtonText
string | undefined

Note: Expand each prop for more information.



If you have more than one dashboard on the page, be sure to specify a unique dashId.

Styling

  • The analytics dashboard is rendered as a div with the class name analytics-dashboard.
  • The authorize and sign-out buttons are in a div with the class name analytics-auth-widgets.
.analytics-dashboard {
  /* Custom styles */
}


.analytics-auth-widgets {
  /* Custom styles */
}

See the styling docs for AuthorizeButton, DataChart, SignOutButton, and ViewSelector to style the different components used in the analytics dashboard.

Charts can be styled individually as you see fit (give them a className, style, wrap in a styled component, etc).

Example

The following example renders a few common charts for the past 28 days, and adds some basic layout styles to them.

<AnalyticsDashboard
  authOptions={{ clientId }}
  renderCharts={(gapi, viewId) => {
    const chartStyles = {
      margin: "15px",
      maxWidth: 400,
    };
    return (
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        <SessionsByDateChart
          gapi={gapi}
          viewId={viewId}
          style={chartStyles}
          showPageViews
          showUsers
        />
        <SessionsGeoChart
          gapi={gapi}
          viewId={viewId}
          style={chartStyles}
          showPageViews
          options={{ width: 400 }}
        />
        <SessionsBySourceChart
          gapi={gapi}
          viewId={viewId}
          style={chartStyles}
        />
        <SessionsByHourChart gapi={gapi} viewId={viewId} style={chartStyles} />
        <PageViewsPerPathChart
          gapi={gapi}
          viewId={viewId}
          style={{ margin: "15px" }}
        />
      </div>
    );
  }}
/>

Many more ready-made charts are available, and you can create your own charts if you'd like.

See the Charts Overview for more information.

Created with ☕ by Justin Mahar
Powered by React Kindling