useDataChart

Description

This hook renders a DataChart on the page using the Google Analytics Embed API.

Usage

import { useDataChart } from "react-use-analytics-api";

In your function component:

const query = {
  ids: viewId,
  "start-date": "28daysAgo",
  "end-date": "today",
  metrics: "ga:sessions",
  dimensions: "ga:date",
};
const chart = {
  container: "my-chart-container",
  type: "BAR",
  options: {
    title: "Sessions (28 Days)",
  },
};
useDataChart(gapi, query, chart);

Provide the hook with with gapi, a query, and a chart. See the DataChart docs for the API for more information.

The user must be authorized.
There must be a container on the page with the container ID specified in chart.
You can either provide a viewId directly, or use a view selector to allow the user to select one.

Signature

useDataChart(gapi?: GoogleAnalyticsEmbedAPI, query: Query, chart: Chart) => void

Arguments

Argument	Type	Description
gapi	`GoogleAnalyticsEmbedAPI` \| `undefined`	The Google Analytics Embed API. When `undefined`, this hook does nothing.
query	`Query`	The data query for the chart.
chart	`Chart`	The chart to render. This determines its appearance.

Return

void - The hook has no return.

Example

The following example renders a chart using useDataChart.

This includes the following:

Load the Google Analytics Embed API using useAnalyticsApi.
Authorize the user with a Client ID using useAuthorize.
Show a view selector using useViewSelector.
- This is how the user chooses which Analytics view ID to use for the data query. You can hardcode a view ID if you'd like.
Render the chart using useDataChart.
Provide a way to sign out using useSignOut.

🏁 This example fully demonstrates use of this library, including full authorization flow. You can use it as a starting point.

import * as React from "react";
import {
  useAnalyticsApi,
  useAuthorize,
  useDataChart,
  useSignOut,
  useViewSelector,
} from "react-use-analytics-api";

export function UseDataChartExample() {
  const { ready, gapi, authorized, error } = useAnalyticsApi();
  const [viewId, setViewId] = React.useState();
  const viewSelectorContainerId = "view-selector-container";
  useViewSelector(
    authorized ? gapi : undefined,
    viewSelectorContainerId,
    (viewId) => setViewId(viewId)
  );
  const query = {
    ids: viewId,
    "start-date": "28daysAgo",
    "end-date": "today",
    metrics: "ga:sessions",
    dimensions: "ga:date",
  };
  const chart = {
    container: "data-chart-container",
    type: "LINE",
    options: {
      title: "Sessions (28 Days)",
    },
  };
  useDataChart(authorized ? gapi : undefined, query, chart);

  // Workaround for API limitation - see useAuthorize docs
  const authDiv = React.useRef(null);
  const [authorizeCalled, setAuthorizeCalled] = React.useState(false);
  const hasAuthElements =
    authDiv.current && authDiv?.current?.children?.length > 0;

  const authorize = useAuthorize(gapi, {
    clientId,
    container: "authorize-container-id",
  });
  const signOut = useSignOut(gapi);

  React.useEffect(() => {
    if (ready && !error && !authorizeCalled) {
      authorize();
      setAuthorizeCalled(true);
    }
  }, [ready, error, authorizeCalled, authorize]);

  return (
    <div>
      {!ready && <div>Loading...</div>}
      {ready && (
        <div>
          {authorized && (
            <div>
              <div style={{ marginTop: "30px" }}>
                <div className="data-chart" id="data-chart-container" />
              </div>
              <div id={viewSelectorContainerId} />
              <div>
                <button onClick={() => signOut()}>Sign Out</button>
              </div>
            </div>
          )}
          {!authorized && (
            <div>
              <div ref={authDiv} id="authorize-container-id"></div>
              {!hasAuthElements && <div>🔄 Refresh the page to sign in.</div>}
            </div>
          )}
        </div>
      )}
      {error && <div>{error.toString()}</div>}
    </div>
  );
}