feat(admin-ui): implement dashboard graph

admin-ui/app/redux/api/MauApi.js

@@ -5,7 +5,6 @@ export default class MauApi {
   getMau = (opts) => {
     opts['format'] = 'json'
     return new Promise((resolve, reject) => {
-      console.log(opts)
       this.api.getStat('', opts, (error, data) => {
         if (error) {
           reject(error)

admin-ui/app/redux/reducers/MauReducer.js

@@ -3,34 +3,38 @@ import reducerRegistry from './ReducerRegistry'
 const INIT_STATE = {
   stat: [],
   loading: false,
+  startMonth: '',
+  endMonth: '',
 }
 
 const reducerName = 'mauReducer'
 
 export default function mauReducer(state = INIT_STATE, action) {
   switch (action.type) {
-  case GET_MAU:
-    return {
-      ...state,
-      loading: true,
-    }
-  case GET_MAU_RESPONSE:
-    if (action.payload.data) {
+    case GET_MAU:
       return {
         ...state,
-        stat: action.payload.data,
-        loading: false,
+        loading: true,
+        startMonth: action.payload?.action?.action_data?.startMonth,
+        endMonth: action.payload?.action?.action_data?.endMonth,
       }
-    } else {
+    case GET_MAU_RESPONSE:
+      if (action.payload.data) {
+        return {
+          ...state,
+          stat: action.payload.data,
+          loading: false,
+        }
+      } else {
+        return {
+          ...state,
+          loading: false,
+        }
+      }
+    default:
       return {
         ...state,
-        loading: false,
       }
-    }
-  default:
-    return {
-      ...state,
-    }
   }
 }
 reducerRegistry.register(reducerName, mauReducer)

admin-ui/app/redux/sagas/MauSaga.js

@@ -24,9 +24,7 @@ export function* getMau({ payload }) {
     payload = payload ? payload : { action: {} }
     addAdditionalData(audit, 'FETCH', 'MAU', payload)
     const mauApi = yield* newFunction()
-    console.log('HRE1')
     const data = yield call(mauApi.getMau, payload.action.action_data)
-    console.log('HRE1', data)
     yield put(getMauResponse(buildData(data)))
     yield call(postUserAction, audit)
   } catch (e) {
@@ -48,20 +46,20 @@ export default function* rootSaga() {
 
 function buildData(stat) {
   const result = stat.map((entry) => buildEntry(entry))
-  result.push({
-    month: 202111,
-    mau: 5,
-    client_credentials_access_token_count: 68,
-    authz_code_access_token_count: 785,
-    authz_code_idtoken_count: 567,
-  })
-  result.push({
-    month: 202112,
-    mau: 3,
-    client_credentials_access_token_count: 28,
-    authz_code_access_token_count: 75,
-    authz_code_idtoken_count: 257,
-  })
+  // result.push({
+  //   month: 202111,
+  //   mau: 5,
+  //   client_credentials_access_token_count: 68,
+  //   authz_code_access_token_count: 785,
+  //   authz_code_idtoken_count: 567,
+  // })
+  // result.push({
+  //   month: 202112,
+  //   mau: 3,
+  //   client_credentials_access_token_count: 28,
+  //   authz_code_access_token_count: 75,
+  //   authz_code_idtoken_count: 257,
+  // })
   return result
 }
 function buildEntry(el) {

admin-ui/app/routes/Dashboards/Chart/DashboardChart.js

@@ -1,42 +1,68 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import {
   XAxis,
   YAxis,
   Bar,
   BarChart,
   ResponsiveContainer,
   Legend,
+  Tooltip,
+  CartesianGrid,
 } from 'recharts'
 import './styles.css'
 import { useSelector } from 'react-redux'
-
-const data = [{ name: 'Sample A', height: 40 }]
+import moment from 'moment'
 
 const DashboardChart = () => {
   const statData = useSelector((state) => state.mauReducer.stat)
-  const [graphData, setGraphData] = useState([{ name: 'Sample A', height: 40 }])
-  useEffect(() => {
-    console.log('Stats Data', statData)
-    let data = []
-    for (let i in statData) {
-      let obj = {
-        name: statData[i].month,
-        height: statData[i].authz_code_access_token_count,
+  const startMonth = useSelector((state) => state.mauReducer.startMonth)
+  const endMonth = useSelector((state) => state.mauReducer.endMonth)
+
+  function doDataAugmentation(stat) {
+    if (startMonth && endMonth) {
+      var dateStart = moment(startMonth, 'YYYYMM')
+      var dateEnd = moment(endMonth, 'YYYYMM')
+      var prepareStat = []
+      while (
+        dateEnd > dateStart ||
+        dateStart.format('M') === dateEnd.format('M')
+      ) {
+        let available = stat.filter((obj) => {
+          return obj.month == dateStart.format('YYYYMM')
+        })
+        if (available.length) {
+          prepareStat.push(available[0])
+        } else {
+          const newEntry = new Object()
+          newEntry['month'] = dateStart.format('YYYYMM')
+          newEntry['mau'] = 0
+          newEntry['client_credentials_access_token_count'] = 0
+          newEntry['authz_code_access_token_count'] = 0
+          newEntry['authz_code_idtoken_count'] = 0
+          prepareStat.push(newEntry)
+        }
+        dateStart.add(1, 'month')
       }
-      data.push(obj)
+      return prepareStat
+    } else {
+      return stat
     }
-    let temp = [...graphData]
-    temp = data
-    setGraphData(temp)
-  }, [statData])
+  }
 
   return (
     <ResponsiveContainer width="100%" aspect={6.0 / 2.4}>
-      <BarChart data={graphData} margin={{ top: 5, right: 30, bottom: 5 }}>
-        <XAxis dataKey="name" />
-        <YAxis dataKey="height" />
+      <BarChart
+        data={doDataAugmentation(statData)}
+        margin={{ top: 5, right: 30, bottom: 5 }}
+      >
+        <XAxis dataKey={'month'} />
+        <YAxis />
+        <CartesianGrid strokeDasharray="3 3" />
+        <Tooltip />
         <Legend wrapperStyle={{ color: '#fff' }} />
-        <Bar dataKey="height" fill={'#4C5B66'} barSize={20} />
+        <Bar dataKey="authz_code_access_token_count" fill={'#303641'} />
+        <Bar dataKey="authz_code_idtoken_count" fill={'#303641'} />
+        <Bar dataKey="client_credentials_access_token_count" fill={'#303641'} />
       </BarChart>
     </ResponsiveContainer>
   )

admin-ui/app/routes/Dashboards/Chart/styles.css

@@ -1,7 +1,3 @@
-.recharts-xAxis .recharts-cartesian-axis-ticks {
-  display: none;
-}
-
 .recharts-legend-wrapper {
   display: none;
 }

admin-ui/app/routes/Dashboards/DashboardPage.js

@@ -98,7 +98,8 @@ function DashboardPage({
   }, [1000])
 
   function search() {
-    options['month'] = getFormattedMonth()
+    options['startMonth'] = getYearMonth(startDate)
+    options['endMonth'] = getYearMonth(endDate)
     buildPayload(userAction, 'GET MAU', options)
     dispatch(getMau(userAction))
   }