import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import vuetify from './plugins/vuetify'
import VueGoogleApi from 'vue-google-api'

const config = {
  clientId: '[clientId]',
  scope: 'https://www.googleapis.com/auth/analytics',
  apiKey: '[apiKey]',
  discoveryDocs: ['https://analyticsreporting.googleapis.com/$discovery/rest?version=v4']
}

Vue.config.productionTip = false

Vue.use(VueGoogleApi, config)

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

<template>
  <v-app>
    <BaseLine />
    <v-content>
      <router-view />
    </v-content>
  </v-app>
</template>
<script>
import BaseLine from '@/components/BaseLine.vue'

export default {
  name: 'App',

  components: {
    BaseLine
  },

  data: () => ({
    //
  }),
};
</script>

<template>
 
<div id="baseLine">
    <v-navigation-drawer
      v-model="drawer"
      app
    >
     
<div class="navi-box">
        <v-list mandatory>
          <v-list-item-group v-model="navi">
            <v-list-item
              v-for="(item, i) in items"
              :key="i"
              :to="item.link"
              class="d-flex"
            >
              <v-list-item-icon>
                <v-icon v-text="item.icon" color="white"></v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title v-text="item.text" class="font-weight-bold"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </div>

    </v-navigation-drawer>

    <v-app-bar
      app
      color="white"
      dark
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title class="title font-weight-bold">Swallow Blog Ranking</v-toolbar-title>
    </v-app-bar>
  </div>
</template>
<script>
  export default {
    name: 'BaseLine',
    props: {
      source: String,
    },
    data: () => ({
      drawer: null,
      navi: null,
      item: 1,
      items: [
        { text: '1ヶ月ランキング', icon: 'mdi-calendar', link: '/' },
        { text: '3ヶ月ランキング', icon: 'mdi-calendar-multiple', link: '/three-months' }
      ]
    }),
  }
</script>

<template>
  <div
    id="home"
    class="pa-5"
  >
    <v-row>
      <v-col cols="4">
        <v-card
          class="px-2 py-1"
          flat
        >
          <v-row
            class="align-center calendar"
          >
            <v-col
              cols="1"
            >
              <v-icon>mdi-calendar-blank</v-icon>
            </v-col>
            <v-col
              cols="11"
            >
              <vue-monthly-picker
                v-model="selectedMonth"
                :min="min"
                :max="currentMonth"
                :selectedBackgroundColor="bgColor"
                :clearOption=false
                dateFormat="YYYY-MM"
              ></vue-monthly-picker>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
    <template v-if="displayUrl.length != 0">
      <v-row
        class="card-area"
      >
        <v-col
          cols="4"
          v-for="(items, index) in limitCount"
          :key="index"
          class="topCard d-flex"
        >
          <v-card
            flat
          >      
<p class="pv">{{displayUrl[index].pv}} <span class="pv-text">pv</span></p>
<p class="date">{{displayUrl[index].date}}</p>
<p class="title">{{displayUrl[index].title}}</p>
<p class="writer">{{displayUrl[index].writer}}</p>
          </v-card>
        </v-col>
      </v-row>
    </template>

    <template>
      <v-data-table
        :headers="headers"
        :items="displayUrl"
        :items-per-page=30
        no-data-text="データがありません"
        class="blog-ranking"
      >
      <tr
        v-for="(item, index) in displayUrl"
        :key="index"
      >        
<td>{{item.ranking[index]}}</td>        
<td>{{item.date[index]}}</td>
<td>{{item.title[index]}}</td>
<td>{{item.writer[index]}}</td>
<td>{{item.pv[index]}} pv</td>
      </tr>

      </v-data-table>
    </template>
  </div>
</template>
<script>
import VueMonthlyPicker from 'vue-monthly-picker'
import moment from 'moment'
import { mapActions } from 'vuex'

export default {
  name: 'home',
  components: {
    VueMonthlyPicker
  },
  data () {
    return {
      selectedMonth: '',
      currentMonth: moment().format('YYYY-MM'),
      startCurrentMonth: moment().format('YYYY-MM-01'),
      endCurrentMonth: moment().format('YYYY-MM-DD'),
      startCurrentSecond: moment().format('YYYY-MM-01T00:00:00'),
      endCurrentSecond: moment().format('YYYY-MM-DDTHH:mm:ss'),
      min: moment('2017/12'),
      lastMonth: moment().endOf('month'),
      perPage: 30,
      article: {
        items: [],
        url: []
      },
      display: {
        date: [],
        title: [],
        writer: [],
        pv: [],
        url: []
      },
      displayUrl: [],
      headers: [
        {text: '順位', sortable: false, value: 'ranking'},
        {text: '投稿日', sortable: false, value: 'date'},
        {text: 'タイトル', sortable: false, value: 'title'},
        {text: '投稿者', sortable: false, value: 'writer'},
        {text: 'PV', sortable: true, value: 'pv'},
      ],
      bgColor: '#1d4c65'
    }
  },
  async created () {
    this.selectedMonth = moment()
    await this.getBlogDetail()
    await this.getData()
    await this.arrayToObject()
  },
  watch: {
    selectedMonth: async function(newDate, oldDate) {
      if (!oldDate) return
      this.crearDate()
      if (newDate.format('YYYY-MM') == this.lastMonth.format('YYYY-MM')) {// 選択が今月だったら
        this.startCurrentMonth = this.selectedMonth.startOf('month').format('YYYY-MM-DD')
        this.endCurrentMonth = moment().format('YYYY-MM-DD')
        this.startCurrentSecond = this.selectedMonth.startOf('month').format('YYYY-MM-DDT00:00:00')
        this.endCurrentSecond = moment().format('YYYY-MM-DDTHH:mm:ss')
      } else {// 選択が今月以外だったら
        this.startCurrentMonth = this.selectedMonth.startOf('month').format('YYYY-MM-DD')
        this.endCurrentMonth = this.selectedMonth.endOf('month').format('YYYY-MM-DD')
        this.startCurrentSecond = this.selectedMonth.startOf('month').format('YYYY-MM-DDT00:00:00')
        this.endCurrentSecond = this.selectedMonth.endOf('month').format('YYYY-MM-DDT23:59:59')
      }
      await this.getBlogDetail()
      await this.getData()
      await this.arrayToObject()
    }
  },
  methods: {
    ...mapActions({
      getBlog: 'blog/getBlog',
      getGAnalytics: 'gAnalytics/getGAnalytics'
    }),
    crearDate () {//初期化
      this.currentMonth = '',
      this.startCurrentMonth = '',
      this.endCurrentMonth = '',
      this.startCurrentSecond = '',
      this.endCurrentSecond = '',
      this.article.items = [],
      this.article.url = [],
      this.display.date = [],
      this.display.title = [],
      this.display.writer = [],
      this.display.pv = [],
      this.display.url = [],
      this.displayUrl = []
    },
    async getBlogDetail () {//wpから情報取得
      const res = await this.getBlog({
        params: {
          after: this.startCurrentSecond,
          before: this.endCurrentSecond,
          perPage: this.perPage
        }
      })
      const data = res.data
      if (data) {
      this.article.items.push(data)
      } else {
        alert('WordPressからの情報取得に失敗しました。')
      }
    },
    async getData () {//GA Reporting APIから情報取得
      const res = await this.getGAnalytics({
        params: {
          start: this.startCurrentMonth,
          end: this.endCurrentMonth,
          selectedMonth: this.selectedMonth.format('YYYYMM'),
          conditions: this.selectedMonth.format('YYYYMM')
        },
        gapi: this.$gapi
      })
      const data = res.data
      if (data) {
        for (let gaCount = 0; gaCount < data.length; gaCount++) {
          const gaUrl = data[gaCount].dimensions[1] //GAから取得したurl情報を順番に格納
          const gaPv = data[gaCount].metrics[0].values[0] //GAから取得したpv情報を順番に格納
         
          for (let wpCount = 0; wpCount < this.article.items[0].length; wpCount++) {//事前に取得したwpからの情報をfor文で回して順番に格納
            const wp = this.article.items[0]//wpから取得した情報を一旦ここにまとめた
            const wpUrl = wp[wpCount].link.replace('https://swallow-incubate.com', '')//ドメインの文字列を削除
            const wpDate = wp[wpCount].date.slice(0, -9)//投稿日（お尻の時間を削除）
            const wpTitle = wp[wpCount].title.rendered//ブログタイトル
            const wpWriter = wp[wpCount].blog_tag[0]//投稿者

            if (gaUrl == wpUrl) {//GAのURLとwpのURLが同じだったら

              if(this.display.url.some(checkUrl => checkUrl == wpUrl)) {//一度格納したURLと同じものがまた回ってきたら
                for (let diff = 0; diff < this.display.url.length; diff++) {
                  if(wpUrl == this.display.url[diff]) {
                    const total = parseInt(this.display.pv[diff]) + parseInt(gaPv)//文字列を整数に変換
                    this.display.pv[diff] = total//元のPV数に後から回ってきたPV数を追加する
                  }
                }
                break
              } else {//一度も格納したことのないURLならこっち
                this.display.date.push(wpDate)//投稿日を格納
                this.display.title.push(wpTitle)//投稿者を格納
                this.display.url.push(wpUrl)//URLを格納
                this.display.pv.push(gaPv)//PV数を格納

                let member = ''
                switch (wpWriter) {
                  case ●●:
                    member = 'メンバー１';
                    this.display.writer.push(member)
                    break
                  case ■■:
                    member = 'メンバー２';
                    this.display.writer.push(member)
                    break
                  default:
                    member = '不明'
                    this.display.writer.push(member)
                    break
                }
              }
            }
          }
        }
      }
      else {
        alert('GAからのデータ取得に失敗しました。')
      }
    },
   
    async arrayToObject () {//PVでソートし直し
      for (let i = 0; i < this.display.url.length; i++) {
        this.displayUrl.push({
          "url": this.display.url[i],
          "ranking": i+1,
          "date": this.display.date[i],
          "title": this.display.title[i],
          "writer": this.display.writer[i],
          "pv": parseInt(this.display.pv[i])
        })
      }
      this.displayUrl.sort((a, b) => {
        if (a.pv > b.pv) {
          return -1
        } else {
          return 1
        }
      })
      for (let i = 0; i < this.display.url.length; i++) {//ランキングの数字を再計算
        this.displayUrl[i].ranking = i + 1
      }
    }
  },
  computed: {
    limitCount() {//TOP3のみを表示
      return this.displayUrl.slice(0, 3)
    }
  }
}
</script>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/three-months',
    name: 'threeMonths',
    component: () => import('../views/ThreeMonths.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

import axios from 'axios'

export const blog = {
  namespaced: true,
  state: {
    url: 'https://swallow-incubate.com/wp-json/wp/v2/blog?'
  },
  actions: {
    async getBlog (state, obj) {
      const ApiURL = state.state.url + 'after=' + obj.params.after + '&before=' + obj.params.before + '&per_page=' + obj.params.perPage
      const result = await axios.get(ApiURL)
      .then(res => {
        if (res.status === 200) {
          return {
            result: true,
            data: res.data
          }
        } else {
          return {
            result: false,
            code: res.code,
            data: []
          }
        }
       
      })
      .catch(error => {
        if(error.message) {
          if (Array.isArray(error.message)) {
            let message = []
            for (let err of error.message) {
              message.push(err.msg)
            }
            return {
              result: false,
              data: message.join(',')
            }
          } else {
            return {
              result: false,
              data: error.message
            }
          }
        } else {
          return {
            result: false,
            data: error
          }
        }
      })
      return result
    }
  }
}

export const gAnalytics = {
  namespaced: true,
  state: {
    url:'https://analyticsreporting.googleapis.com/v4/reports:batchGet',
    viewId: '[viewId]'
  },
  actions: {
    async getGAnalytics ({state}, obj) {
      const requestParams = {
        reportRequests: [
          {
            viewId: state.viewId,
            dateRanges: [
              {
                startDate: obj.params.start,
                endDate: obj.params.end,
              }
            ],
            metrics: [
              {
                expression: 'ga:pageviews'
              }
            ],
            dimensions: [
              {
                name: 'ga:pageTitle'
              },
              {
                name: 'ga:pagePath'
              }
            ],
            dimensionFilterClauses: [{
              filters: [{
                dimensionName: 'ga:pagePath',
                expressions: [
                  obj.params.selectedMonth
                ]
              },
              {
                dimensionName: 'ga:pagePath',
                expressions: [
                  obj.params.conditions
                ]
              }
            ]
            }],
            orderBys: [{
              fieldName: "ga:pageviews",
              sortOrder: "DESCENDING"
            }]
          }
        ]
      }
      const result = await obj.gapi.request({
        path: state.url,
        method: 'POST',
        body: requestParams,
        headers: {
          'content-Type': 'application/json'
        }
      })
      .then(res => {
        if (res.status === 200) {
          return {
            result: true,
            data: res.result.reports[0].data.rows
          }
        } else {
          return {
            result: false,
            code: res.code,
            data: []
          }
        }
         
      })
      .catch(err => {
        console.log('gAnalytics', err)
      })
      return result
    }
  }
}