React Analytics Charts

Core Components

AnalyticsDashboard AuthorizeButton DataChart SignOutButton ViewSelector Description Usage Props Styling Example

Charts Overview

Common Charts

Custom Charts

Custom Dashboards and Standalone Charts How To Get An OAuth Client ID From Google Code of Conduct MIT License

ViewSelector

Description

The ViewSelector component allows you to choose your account, property, and view via dropdown menus.

This component is rendered by the Google Analytics Embed API into a container on the page.

This component wraps the useViewSelector hook from react-use-analytics-api.

Usage

import { ViewSelector } from "react-analytics-charts";

const viewSelectionHandler = viewId => console.log(viewId);
...
<ViewSelector gapi={gapi} onChange={viewSelectionHandler} />

Props

gapi

GoogleAnalyticsEmbedAPI | undefined

onChange

((viewId: string) => void) | undefined

idPrefix

string | undefined

Note: Expand each prop for more information.

Styling

The view selector div has the class name gapi-view-selector-container. Inspect the DOM to see what Google renders there.

.gapi-view-selector-container {
  /* Custom styles */
}

Example

The following example shows standalone use of a ViewSelector, including full authorization flow.

You can also use this example to quickly determine the viewId you'd like to provide to a chart or an AnalyticsDashboard.

import { useAnalyticsApi } from "react-use-analytics-api";
import * as React from "react";
import {
  AuthorizeButton,
  SignOutButton,
  ViewSelector,
} from "react-analytics-charts";

export function ViewSelectorExample() {
  const [viewId, setViewId] = React.useState("");
  const { gapi, authorized } = useAnalyticsApi();

  const viewIdStyles = {
    border: "solid 2px orange",
    margin: "10px",
    padding: "5px",
  };

  return (
    <div>
      {!authorized && (
        <AuthorizeButton
          gapi={gapi}
          authOptions={{
            clientId:
              "123456789012-abc123def456ghi789jkl012mno345p.apps.googleusercontent.com",
          }}
        />
      )}
      {authorized && (
        <div>
          <h2>
            Selected view ID:
            <code style={viewIdStyles}>{viewId}</code>
          </h2>
          <p>
            <SignOutButton gapi={gapi} />
          </p>
          <ViewSelector gapi={gapi} onChange={(viewId) => setViewId(viewId)} />
        </div>
      )}
    </div>
  );
}