Placed all scripts in main package json

Author: whizsid

.gitignore

@@ -3,11 +3,13 @@ oauth_key.json
 node_modules/
 sites/*/node_modules
 sites/*/dist
+sites/*/build
 sites/*/package-lock.json
 sites/*/yarn.lock
 sites/*/.env
 packages/*/node_modules
 packages/*/dist
+packages/*/build
 packages/*/package-lock.json
 packages/*/yarn.lock
 packages/*/.env

README.md

@@ -9,3 +9,132 @@ panels.
 npm install google-analytics-embed-react
 ```
 
+## Examples
+
+We implemented two examples to show you the usage of this library. One
+example is using Google Identity Service to authenticate users on
+frontend. Other Example is using google API client to authenticate your
+service account. You need to have at-least one Google Analytics view
+in your account to run those examples.
+
+### Frontend Authentication Example
+
+This example is using the latest Google Identity Service to
+authenticate. Because recommended way is deprecated by Google ([Migrate
+to Google Identity
+Services](https://developers.google.com/identity/oauth2/web/guides/migration-to-gis)).
+You can find the source files for this example in the
+`sites/react-frontend-auth` folder.
+
+Steps to run the example:-
+
+1. Create a project on Google API Console and create a OAuth2 client id.
+   Download and save the JSON key file to the root folder of this project
+   as `oauth_key.json`.
+
+2. Install all dependencies from the root folder of the project.
+
+```
+npm install --save-dev
+```
+
+3. Build the React library.
+
+```
+npm run reactlib:build
+```
+
+4. Run the project
+
+```
+npm run frontend_auth:start
+```
+
+### Backend Authentication Example
+
+In this example we are using the `googleapis` client library to
+authenticate from backend and sending the access token to frontend. You
+need a Google Service Account to run this example. You can find the
+source files for the backend example in the `sites/express-backend` and
+the frontend example in the `sites/react-backend-auth` folder.
+
+Steps to run the example:-
+
+1. Create a project on Google API Console and create a Service Account
+   for the project. You need to add the email of that service account as
+   a Viewer for your Google Analytics view. Download and save the JSON
+   key file to the root folder of the project as
+   `service_account_key.json`.
+
+2. Install all dependencies from the root folder of the project.
+
+```
+npm install --save-dev
+```
+
+3. Build the React library.
+
+```
+npm run reactlib:build
+```
+
+4. Run the backend ExpressJS project
+
+```
+npm run backend:start
+```
+
+5. Open another terminal and run the frontend parallely.
+
+```
+npm run backend_auth:start
+```
+
+## Usage
+
+You need to wrap your entire app with the `GoogleAnalyitcsProvider`
+component as the first step to use this library. This component will
+take the `accessToken` as the only mandatory prop. But it is also
+optional :smiley:. It means you do not need the accessToken in first
+rendering time. But you have to pass it later to display your graphs.
+
+```jsx
+<GoogleAnalyticsProvider accessToken={myAccessToken}>
+  {/* Your application components */}
+</GoogleAnalyticsProvider>
+```
+
+Then render any chart component in your application.
+
+```
+<GoogleAnalyticsPieChart
+    query={{
+      ids, // <-- Replace with the ids value for your view.
+      'start-date': '90daysAgo',
+      'end-date': 'today',
+      metrics:
+        'ga:pageviews,ga:uniquePageviews,ga:timeOnPage,ga:bounces,ga:entrances,ga:exits',
+      sort: '-ga:pageviews',
+      dimensions: 'ga:pagePath',
+      'max-results': 10
+    }}
+    width={500}
+    style={{ float: 'left' }}
+    pieHole={0.4}
+  />
+```
+
+## Component Reference
+
+### GoogleAnalyticsProvider
+
+This component will load the Google platform script and authenticate
+yourself with the `gapi.analytics` namespace.
+
+#### Props
+
+| Name               | Type   | Default   | Optional | Description     |
+| ------------------ | ------ | --------- | -------- | --------------- |
+| `accessToken`      | string | undefined | No\*     | Access token to |
+| authroize the user |
+

package.json

@@ -1,13 +1,42 @@
 {
     "name": "google-analytics-embed-react",
+    "scripts": {
+        "all:lint:fix": "npm run backend:lint:fix && npm run backend_auth:lint:fix && npm run frontend_auth:lint:fix && npm run reactlib:lint:fix && npm run typeslib:lint:fix",
+        "all:lint:check": "npm run backend:lint:check && npm run backend_auth:lint:check && npm run frontend_auth:lint:check && npm run reactlib:lint:check && npm run typeslib:lint:check",
+        "backend:lint:fix": "npm run lint:fix --workspace sites/express-backend",
+        "backend:lint:check": "npm run lint:check --workspace sites/express-backend",
+        "backend_auth:lint:fix": "npm run lint:fix --workspace sites/react-backend-auth",
+        "backend_auth:lint:check": "npm run lint:check --workspace sites/react-backend-auth",
+        "frontend_auth:lint:fix": "npm run lint:fix --workspace sites/react-frontend-auth",
+        "frontend_auth:lint:check": "npm run lint:check --workspace sites/react-frontend-auth",
+        "reactlib:lint:fix": "npm run lint:fix --workspace packages/google-analytics-embed-react",
+        "reactlib:lint:check": "npm run lint:check --workspace packages/google-analytics-embed-react",
+        "typeslib:lint:fix": "npm run lint:fix --workspace packages/google-analytics-embed-types",
+        "typeslib:lint:check": "npm run lint:check --workspace packages/google-analytics-embed-types",
+        "all:prettier:fix": "npm run backend:prettier:fix && npm run backend_auth:prettier:fix && npm run frontend_auth:prettier:fix && npm run reactlib:prettier:fix && npm run typeslib:prettier:fix",
+        "all:prettier:check": "npm run backend:prettier:check && npm run backend_auth:prettier:check && npm run frontend_auth:prettier:check && npm run reactlib:prettier:check && npm run typeslib:prettier:check",
+        "backend:prettier:fix": "npm run prettier:fix --workspace sites/express-backend",
+        "backend:prettier:check": "npm run prettier:check --workspace sites/express-backend",
+        "backend_auth:prettier:fix": "npm run prettier:fix --workspace sites/react-backend-auth",
+        "backend_auth:prettier:check": "npm run prettier:check --workspace sites/react-backend-auth",
+        "frontend_auth:prettier:fix": "npm run prettier:fix --workspace sites/react-frontend-auth",
+        "frontend_auth:prettier:check": "npm run prettier:check --workspace sites/react-frontend-auth",
+        "reactlib:prettier:fix": "npm run prettier:fix --workspace packages/google-analytics-embed-react",
+        "reactlib:prettier:check": "npm run prettier:check --workspace packages/google-analytics-embed-react",
+        "typeslib:prettier:fix": "npm run prettier:fix --workspace packages/google-analytics-embed-types",
+        "typeslib:prettier:check": "npm run prettier:check --workspace packages/google-analytics-embed-types",
+        "backend:start": "npm run start --workspace sites/express-backend",
+        "backend_auth:start": "npm run start --workspace sites/react-backend-auth",
+        "backend_auth:build": "npm run build --workspace sites/react-backend-auth",
+        "frontend_auth:start": "npm run start --workspace sites/react-frontend-auth",
+        "frontend_auth:build": "npm run build --workspace sites/react-frontend-auth",
+        "reactlib:build": "npm run build --workspace packages/google-analytics-embed-react"
+    },
     "private": true,
     "workspaces": {
         "packages": [
             "packages/*",
             "sites/*"
         ]
-    },
-    "devDependencies": {
-        "mkdirp": "^1.0.4"
     }
 }

packages/google-analytics-embed-react/.eslintrc.json

@@ -10,6 +10,11 @@
     ],
     "overrides": [
     ],
+    "settings": {
+        "react": {
+            "version": "17"
+        }
+    },
     "parserOptions": {
         "ecmaVersion": "latest",
         "sourceType": "module",

packages/google-analytics-embed-react/.gitignore

@@ -8,7 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-build
+dist
 
 # Editor directories and files
 .vscode/*

packages/google-analytics-embed-react/.npmignore

@@ -0,0 +1,10 @@
+node_modules
+src
+.eslintrc.json
+.gitignore
+.prettierrc
+package-lock.json
+rollup.config.js
+tsconfig.json
+tslint.json
+.npmignore

packages/google-analytics-embed-react/package.json

@@ -1,10 +1,20 @@
 {
   "name": "google-analytics-embed-react",
+  "description": "Bringing the Google Analytics Embed Components for your ReactJS application",
   "version": "0.0.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arimacdev/google-analytics-embed-react.git"
+  },
+  "author": {
+      "name": "WhizSid",
+      "url": "https://github.com/whizsid",
+      "email": "whizsid@aol.com"
+  },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs",
     "prettier:check": "prettier --check src/*",
@@ -16,8 +26,8 @@
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@types/google.visualization": "^0.0.68",
-    "@types/react": "*",
-    "@types/react-dom": "*",
+    "@types/react": "^18.0",
+    "@types/react-dom": "^18.0",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
@@ -26,7 +36,7 @@
     "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.0",
-    "google-analytics-embed-types": "file:../google-analytics-embed-types",
+    "google-analytics-embed-types": "0.0.1",
     "prettier": "2.8",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.34.1",

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

@@ -8,10 +8,19 @@ export type DataChartProps<T> = {
   children?: React.ReactNode;
   /** Styles to the container element */
   style?: React.CSSProperties;
+  /** Class name to use on the container element */
+  className?: string;
+  /** Firing after the data chart successfully rendered */
+  onSuccess?: (result: gapi.analytics.googleCharts.DataChartSuccessResult) => void;
+  /**
+   * Fired when an error occurs during the query or rendering process. If you
+   * want to get the error message from the response object it will be at
+   * response.error.message.
+   */
+  onError?: (response: gapi.analytics.ErrorResponse) => void;
 } & T;
 
-export default class DataChart<O> extends React.Component<DataChartProps<O>> {
-  public static contextType = GoogleAnalyticsContext;
+class DataChart<O> extends React.Component<DataChartProps<O>> {
   private readonly elementRef: React.RefObject<HTMLDivElement>;
   private googleDataChart: gapi.analytics.googleCharts.DataChart | null;
   private readonly chartType: string;
@@ -23,11 +32,15 @@ export default class DataChart<O> extends React.Component<DataChartProps<O>> {
     this.chartType = type;
   }
 
-  componentDidUpdate() {
+  componentDidMount(): void {
+    this.componentDidUpdate();
+  }
+
+  componentDidUpdate(): void {
     const gaState = this.context as GoogleAnalyticsState;
-    const { query, children, style, ...chartOptions } = this.props;
+    const { query, children, style, className, onSuccess, onError, ...chartOptions } = this.props;
     // Rendering the component only if a user authenticated
-    if (gaState == 'AUTH_SUCCESS') {
+    if (gaState === 'AUTH_SUCCESS') {
       // Updating the existing chart with new options if already rendered
       if (this.googleDataChart != null) {
         this.googleDataChart.set({
@@ -38,6 +51,7 @@ export default class DataChart<O> extends React.Component<DataChartProps<O>> {
             options: chartOptions as any
           }
         });
+        this.googleDataChart.execute();
       } else {
         // Creating a chart if a chart instance not created
         this.googleDataChart = new gapi.analytics.googleCharts.DataChart({
@@ -48,6 +62,15 @@ export default class DataChart<O> extends React.Component<DataChartProps<O>> {
             options: chartOptions as any
           }
         });
+
+        if (onSuccess != null) {
+          this.googleDataChart.on('success', onSuccess);
+        }
+
+        if (onError != null) {
+          this.googleDataChart.on('error', onError);
+        }
+
         this.googleDataChart.execute();
       }
     } else if (this.googleDataChart != null) {
@@ -58,9 +81,12 @@ export default class DataChart<O> extends React.Component<DataChartProps<O>> {
 
   render(): React.ReactNode {
     return (
-      <div ref={this.elementRef}>
+      <div style={this.props.style} className={this.props.className} ref={this.elementRef}>
         {this.googleDataChart == null ? this.props.children : undefined}
       </div>
     );
   }
 }
+
+DataChart.contextType = GoogleAnalyticsContext;
+export default DataChart;