Reactで、Reporting API v4を用いてアナリティクスデータを表示

前提・実現したいこと

Reactにて、Reporting API v4を用いてアナリティクスのデータを取得して表示をさせたいです。

取得までは出来ているのですが、表示をする方法が分かりません。

後は表示させるだけなのですが、どなたかわかる方おられますでしょうか？

宜しくお願いします。

該当のソースコード

react
1import React, { useState, useEffect } from 'react'
2import { Button } from 'antd'
3
4import { useQuery } from '@apollo/react-hooks'
5import { GET_SETTING } from 'graphql/tags/Setting'
6
7const { gapi } = window
8
9const Aaa = () => {
10  const [state, setState] = useState({
11    viewId: '',
12    clientId: '',
13  })
14  const [signedIn, setSignedIn] = useState(false)
15
16  const {
17    data: settingData,
18    error: settingError,
19  } = useQuery(GET_SETTING, {
20    variables: {
21      values: JSON.stringify(['gaConfig']),
22    },
23  })
24
25  useEffect(() => {
26    if (!settingData) return
27    const { gaConfig } = JSON.parse(settingData.setting.values)
28    const { viewId, clientId } = JSON.parse(gaConfig)
29    const f = async () => {
30      setState({
31        ...state,
32        viewId,
33        clientId,
34      })
35    }
36    f()
37  }, [settingData])
38
39  useEffect(() => {
40    if (!state.clientId) return
41    const f = async () => {
42      gapiLoad()
43    }
44    f()
45  }, [state.clientId])
46
47  useEffect(() => {
48    if (!signedIn) return
49    const f = async () => {
50      let res = null
51      const arg = {
52        path: '/v4/reports:batchGet',
53        root: 'https://analyticsreporting.googleapis.com/',
54        method: 'POST',
55        body: {
56          reportRequests: [
57            {
58              viewId: state.viewId,
59              dateRanges: [
60                {
61                  startDate: '2019-01-01',
62                  endDate: 'today',
63                },
64              ],
65              metrics: [
66                {
67                  expression: 'ga:sessions'
68                },
69                {
70                  expression: 'ga:users',
71                },
72                {
73                  expression: 'ga:pageviews',
74                },
75              ],
76              dimensions: [
77                {
78                  name: 'ga:country',
79                },
80              ],
81            },
82          ],
83        },
84      }
85
86      res = await gapiRequest(arg).catch((err) => err)
87      if (res.result.error) {
88        return
89      }
90    }
91    f()
92  }, [signedIn])
93
94  if (settingError) {
95    const error = settingError
96    return `Error! ${error}`
97  }
98
99  const gapiLoad = async () => {
100    gapi.load('auth2', async (signin2) => {
101      gapi.signin2.render('google-signin-button', {
102        onsuccess: (res) => {
103          setSignedIn(true)
104        },
105        onfailure: (res) => {
106        },
107      })
108      const res = await gapi.auth2
109        .init({
110          client_id: state.clientId,
111          scope: 'https://www.googleapis.com/auth/analytics.readonly',
112        })
113        .then((res) => res)
114        .catch((err) => err)
115      if (res.error) {
116        return
117      }
118    })
119  }
120
121  const onSignIn = async () => {
122    const auth = gapi.auth2.getAuthInstance()
123    const res = await auth.signIn().catch((err) => err)
124    if (res.error) {
125      return
126    }
127    setSignedIn(true)
128  }
129
130  const onSignOut = () => {
131    const auth = gapi.auth2.getAuthInstance()
132    auth.signOut()
133    setSignedIn(false)
134  }
135
136  const gapiRequest = (arg) =>
137    new Promise((resolve, reject) => {
138      gapi.client.request(arg).then(
139        (res) => {
140          resolve(res)
141        },
142        (err) => {
143          reject(err)
144        },
145      )
146    })
147
148  return (
149    <>
150        <div id="google-signin-button"></div>
151        {!signedIn ? (
152        <Button icon="google" onClick={onSignIn}>
153            SignIn
154        </Button>
155        ) : (
156            <Button icon="google" onClick={onSignOut}>
157            SignOut
158        </Button>
159        )}
160        <textarea cols="80" rows="20" id="query-output"></textarea>
161    </>
162  )
163}
164
165export default Aaa
166
167
168