Added view selector component and tested with actual GA account

Author: whizsid

README.md

@@ -0,0 +1,11 @@
+# google-analytics-embed-react
+
+Bringing the Google Analytics Embed Components for your ReactJS admin
+panels.
+
+## Installation
+
+```
+npm install google-analytics-embed-react
+```
+

packages/google-analytics-embed-react/src/DataChart.tsx

@@ -2,7 +2,12 @@ import * as React from 'react';
 import GoogleAnalyticsContext, { GoogleAnalyticsContextContent } from './GoogleAnalyticsContext';
 
 export type DataChartProps<T> = {
-  query: any;
+  /** Query */
+  query: gapi.analytics.Query;
+  /** Placeholder if a user not authenticated yet */
+  children?: React.ReactNode;
+  /** Styles to the container element */
+  style?: React.CSSProperties;
 } & T;
 
 export default class DataChart<O> extends React.Component<DataChartProps<O>> {
@@ -20,8 +25,10 @@ export default class DataChart<O> extends React.Component<DataChartProps<O>> {
 
   componentDidUpdate() {
     const [gaState, _] = this.context as GoogleAnalyticsContextContent;
-    const { query, ...chartOptions } = this.props;
+    const { query, children, style, ...chartOptions } = this.props;
+    // Rendering the component only if a user authenticated
     if (gaState == 'AUTH_SUCCESS') {
+      // Updating the existing chart with new options if already rendered
       if (this.googleDataChart) {
         this.googleDataChart.set({
           query,
@@ -32,6 +39,7 @@ export default class DataChart<O> extends React.Component<DataChartProps<O>> {
           }
         });
       } else {
+        // Creating a chart if a chart instance not created
         this.googleDataChart = new gapi.analytics.googleCharts.DataChart({
           query,
           chart: {
@@ -43,11 +51,14 @@ export default class DataChart<O> extends React.Component<DataChartProps<O>> {
         this.googleDataChart.execute();
       }
     } else if (this.googleDataChart) {
+      // Destroying the chart if the authentication method changed
       this.googleDataChart = null;
     }
   }
 
   render(): React.ReactNode {
-    return <div ref={this.elementRef}></div>;
+    return (
+      <div ref={this.elementRef}>{!this.googleDataChart ? this.props.children : undefined}</div>
+    );
   }
 }

packages/google-analytics-embed-react/src/GoogleAnalyticsProvider.tsx

@@ -33,6 +33,11 @@ export interface GoogleAnalyticsProviderProps {
   userInfoLabel?: string;
 }
 
+/**
+ * Wrap your application logics with this provider. This provider will
+ * load the google platform script and notify the child components about
+ * authentication events
+ */
 const GoogleAnalyticsProvider: React.FC<GoogleAnalyticsProviderProps> = (
   props: GoogleAnalyticsProviderProps
 ): React.ReactElement => {
@@ -87,8 +92,6 @@ const GoogleAnalyticsProvider: React.FC<GoogleAnalyticsProviderProps> = (
           scopes: props.scopes,
           overwriteDefaultScopes: props.overwriteDefaultScopes
         });
-        // TODO: Currently google not returning any error if the server access token is invalid.
-        // Need to do a little research to handle it.
         setGaState('AUTH_SUCCESS');
       } else if (props.clientId && authButton) {
         // button authorization

packages/google-analytics-embed-react/src/SignInButton.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import GoogleAnalyticsContext, { GoogleAnalyticsContextContent } from './GoogleAnalyticsContext';
 
+/**
+ * Put this component where you want to render the sign in button
+ * when using the frontend authentication
+ */
 class SignInButton extends React.Component {
   static contextType = GoogleAnalyticsContext;
   protected container: React.RefObject<HTMLDivElement>;
@@ -13,7 +17,7 @@ class SignInButton extends React.Component {
 
   componentDidMount() {
     const [_, setAuthButton] = this.context as GoogleAnalyticsContextContent;
-      setAuthButton(this.container.current as HTMLElement);
+    setAuthButton(this.container.current as HTMLElement);
   }
 
   render(): React.ReactNode {

packages/google-analytics-embed-react/src/ViewSelector.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import GoogleAnalyticsContext, { GoogleAnalyticsContextContent } from './GoogleAnalyticsContext';
+
+export interface ViewSelectorProps {
+  /** Callback to fire after user changed the view */
+  onChange?: (ids: string) => void;
+  /** Placeholder to show until a user authenticating */
+  children?: React.ReactNode;
+  /** Styles for the container element */
+  style?: React.CSSProperties;
+  /** Class name for the container element */
+  className?: string;
+}
+
+/**
+ * ViewSelector component will allow users to select their GA views.
+ * onChange method will fire after a user changed the view
+ */
+export default class ViewSelector extends React.Component<ViewSelectorProps> {
+  public static contextType = GoogleAnalyticsContext;
+  private elementRef: React.RefObject<HTMLDivElement>;
+  private googleViewSelector: gapi.analytics.ViewSelector | null;
+
+  constructor(props: ViewSelectorProps) {
+    super(props);
+
+    this.elementRef = React.createRef();
+    this.googleViewSelector = null;
+  }
+
+  componentDidUpdate() {
+    const [gaState, _] = this.context as GoogleAnalyticsContextContent;
+    if (gaState == 'AUTH_SUCCESS') {
+      if (!this.googleViewSelector) {
+        this.googleViewSelector = new gapi.analytics.ViewSelector({
+          container: this.elementRef.current as HTMLElement
+        });
+        this.googleViewSelector.execute();
+        if (this.props.onChange) {
+          this.googleViewSelector.on('change', this.props.onChange);
+        }
+      }
+    } else if (this.googleViewSelector) {
+      this.googleViewSelector = null;
+    }
+  }
+
+  render(): React.ReactNode {
+    return (
+      <div style={this.props.style} className={this.props.className} ref={this.elementRef}>
+        {!this.googleViewSelector ? this.props.children : undefined}
+      </div>
+    );
+  }
+}

packages/google-analytics-embed-react/src/index.ts

@@ -1,39 +1,43 @@
-export { default as GoogleAnalyticsProvider, GoogleAnalyticsProviderProps  } from './GoogleAnalyticsProvider';
+export {
+  default as GoogleAnalyticsProvider,
+  GoogleAnalyticsProviderProps
+} from './GoogleAnalyticsProvider';
 export { default as SignInButton } from './SignInButton';
-import {default as DataChart, DataChartProps} from './DataChart';
-export {DataChartProps} from "./DataChart";
+import { default as DataChart, DataChartProps } from './DataChart';
+export { DataChartProps } from './DataChart';
+export { default as ViewSelector, ViewSelectorProps } from './ViewSelector';
 
 export type LineChartOptions = google.visualization.LineChartOptions;
 export class GoogleAnalyticsLineChart extends DataChart<LineChartOptions> {
-    constructor(props: DataChartProps<LineChartOptions>) {
-        super('LINE', props);
-    }
+  constructor(props: DataChartProps<LineChartOptions>) {
+    super('LINE', props);
+  }
 }
 
 export type BarChartOptions = google.visualization.BarChartOptions;
 export class GoogleAnalyticsBarChart extends DataChart<BarChartOptions> {
-    constructor(props: DataChartProps<BarChartOptions>) {
-        super('BAR', props);
-    }
+  constructor(props: DataChartProps<BarChartOptions>) {
+    super('BAR', props);
+  }
 }
 
 export type ColumnChartOptions = google.visualization.ColumnChartOptions;
 export class GoogleAnalyticsColumnChart extends DataChart<ColumnChartOptions> {
-    constructor(props: DataChartProps<ColumnChartOptions>) {
-        super('COLUMN', props);
-    }
+  constructor(props: DataChartProps<ColumnChartOptions>) {
+    super('COLUMN', props);
+  }
 }
 
 export type GeoChartOptions = google.visualization.GeoChartOptions;
 export class GoogleAnalyticsGeoChart extends DataChart<GeoChartOptions> {
-    constructor(props: DataChartProps<GeoChartOptions>) {
-        super('GEO', props);
-    }
+  constructor(props: DataChartProps<GeoChartOptions>) {
+    super('GEO', props);
+  }
 }
 
 export type TableOptions = google.visualization.TableOptions;
 export class GoogleAnalyticsTable extends DataChart<TableOptions> {
-    constructor(props: DataChartProps<TableOptions>) {
-        super('TABLE', props);
-    }
+  constructor(props: DataChartProps<TableOptions>) {
+    super('TABLE', props);
+  }
 }

packages/google-analytics-embed-types/README.md

@@ -0,0 +1,16 @@
+# google-analytics-embed-types
+
+Type definitions for Google Analytics Embed Components
+
+## Installation
+
+```
+npm install --save-dev google-analytics-embed-types
+```
+
+This package will exposing the `gapi.analytics` namespace for your
+projects. If you like to use this namespace as a global type, Import it
+in `tsconfig.json` file using `compilerOptions.types` property. This
+package will also exposing types from
+[@types/google.visualization](https://www.npmjs.com/package/@types/google.visualization)
+in some methods.

packages/google-analytics-embed-types/index.d.ts

@@ -1,5 +1,7 @@
 declare namespace gapi.analytics {
-  export interface Response {}
+  export interface Response {
+    [x: string]: any;
+  }
 
   export interface AuthOptions {
     clientid?: string;
@@ -23,35 +25,20 @@ declare namespace gapi.analytics {
     static getAuthResponse(): Response;
     static getUserProfile(): Response;
 
-    static on(
-      event: "signIn" | "signOut" | "needsAuthorization",
-      callback: () => void
-    ): void;
-    static on(event: "error", callback: (response: Response) => void): void;
-    static once(
-      event: "signIn" | "signOut" | "needsAuthorization",
-      callback: () => void
-    ): void;
-    static once(event: "error", callback: (response: Response) => void): void;
+    static on(event: 'signIn' | 'signOut' | 'needsAuthorization', callback: () => void): void;
+    static on(event: 'error', callback: (response: Response) => void): void;
+    static once(event: 'signIn' | 'signOut' | 'needsAuthorization', callback: () => void): void;
+    static once(event: 'error', callback: (response: Response) => void): void;
     static off(
-      event: "signIn" | "signOut" | "needsAuthorization" | "error",
+      event: 'signIn' | 'signOut' | 'needsAuthorization' | 'error',
       handler: Function
     ): void;
 
-    on(
-      event: "signIn" | "signOut" | "needsAuthorization",
-      callback: () => void
-    ): void;
-    on(event: "error", callback: (response: Response) => void): void;
-    once(
-      event: "signIn" | "signOut" | "needsAuthorization",
-      callback: () => void
-    ): void;
-    once(event: "error", callback: (response: Response) => void): void;
-    off(
-      event: "signIn" | "signOut" | "needsAuthorization" | "error",
-      handler: Function
-    ): void;
+    on(event: 'signIn' | 'signOut' | 'needsAuthorization', callback: () => void): void;
+    on(event: 'error', callback: (response: Response) => void): void;
+    once(event: 'signIn' | 'signOut' | 'needsAuthorization', callback: () => void): void;
+    once(event: 'error', callback: (response: Response) => void): void;
+    off(event: 'signIn' | 'signOut' | 'needsAuthorization' | 'error', handler: Function): void;
   }
 
   export function ready(callback: () => void): void;
@@ -63,18 +50,39 @@ declare namespace gapi.analytics {
     execute(): void;
   }
 
-  type Query = Record<string, string>;
+  export interface Query {
+    ids: string;
+    'start-date': string;
+    'end-date': string;
+    metrics: string;
+    dimensions?: string;
+    sort?: string;
+    filters?: string;
+    segment?: string;
+    samplingLevel?: 'DEFAULT' | 'FASTER' | 'HIGHER_PRECISION';
+    'include-empty-rows'?: boolean;
+    'start-index'?: number;
+    'max-results'?: number;
+    output?: string;
+    fields?: string;
+    prettyPrint?: string;
+    userIp?: string;
+    quotaUser?: string;
+    access_token?: string;
+    callback?: string;
+    key?: string;
+  }
 
   export namespace report {
     export interface DataOptions {
       query: Query;
     }
 
     export class Data extends Component<DataOptions> {
-      on(event: "success" | "error", cb: (res: Response) => void): void;
-      once(event: "success" | "error", cb: (res: Response) => void): void;
-      off(event: "success" | "error", handler: Function): void;
-      emit(event: "success" | "error", res: Response): void;
+      on(event: 'success' | 'error', cb: (res: Response) => void): void;
+      once(event: 'success' | 'error', cb: (res: Response) => void): void;
+      off(event: 'success' | 'error', handler: Function): void;
+      emit(event: 'success' | 'error', res: Response): void;
     }
   }
 
@@ -87,11 +95,11 @@ declare namespace gapi.analytics {
     export interface DataChartOptions {
       query: Query;
       chart:
-        | ChartOptions<"LINE", google.visualization.LineChartOptions>
-        | ChartOptions<"COLUMN", google.visualization.ColumnChartOptions>
-        | ChartOptions<"BAR", google.visualization.BarChartOptions>
-        | ChartOptions<"TABLE", google.visualization.TableOptions>
-        | ChartOptions<"GEO", google.visualization.GeoChartOptions>;
+        | ChartOptions<'LINE', google.visualization.LineChartOptions>
+        | ChartOptions<'COLUMN', google.visualization.ColumnChartOptions>
+        | ChartOptions<'BAR', google.visualization.BarChartOptions>
+        | ChartOptions<'TABLE', google.visualization.TableOptions>
+        | ChartOptions<'GEO', google.visualization.GeoChartOptions>;
     }
 
     export interface DataChartSuccessResult {
@@ -102,13 +110,13 @@ declare namespace gapi.analytics {
     }
 
     export class DataChart extends Component<DataChartOptions> {
-      on(event: "success", cb: (res: DataChartSuccessResult) => void): void;
-      on(event: "error", cb: (res: Response) => void): void;
-      once(event: "success", cb: (res: DataChartSuccessResult) => void): void;
-      once(event: "error", cb: (res: Response) => void): void;
-      off(event: "success" | "error", handler: Function): void;
-      emit(event: "success", res: DataChartSuccessResult): void;
-      emit(event: "error", res: Response): void;
+      on(event: 'success', cb: (res: DataChartSuccessResult) => void): void;
+      on(event: 'error', cb: (res: Response) => void): void;
+      once(event: 'success', cb: (res: DataChartSuccessResult) => void): void;
+      once(event: 'error', cb: (res: Response) => void): void;
+      off(event: 'success' | 'error', handler: Function): void;
+      emit(event: 'success', res: DataChartSuccessResult): void;
+      emit(event: 'error', res: Response): void;
     }
   }
 
@@ -118,9 +126,9 @@ declare namespace gapi.analytics {
 
   export class ViewSelector extends Component<ViewSelectorOptions> {
     ids: string;
-    on(event: "change", cb: (ids: string) => void): void;
-    once(event: "change", cb: (ids: string) => void): void;
-    off(event: "change", handler: Function): void;
-    emit(event: "change", ids: string): void;
+    on(event: 'change', cb: (ids: string) => void): void;
+    once(event: 'change', cb: (ids: string) => void): void;
+    off(event: 'change', handler: Function): void;
+    emit(event: 'change', ids: string): void;
   }
 }