feat(admin-ui): added custom tooltip

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

@@ -11,6 +11,7 @@ import {
 } from 'recharts'
 import './styles.css'
 import { useSelector } from 'react-redux'
+import TooltipDesign from './TooltipDesign'
 import moment from 'moment'
 
 const DashboardChart = () => {
@@ -58,7 +59,7 @@ const DashboardChart = () => {
         <XAxis dataKey={'month'} />
         <YAxis />
         <CartesianGrid strokeDasharray="3 3" />
-        <Tooltip />
+        <Tooltip content={<TooltipDesign />} />
         <Legend wrapperStyle={{ color: '#fff' }} />
         <Bar dataKey="client_credentials_access_token_count" fill={'#FE9F01'} />
         <Bar dataKey="authz_code_access_token_count" fill={'#9CBEE0'} />

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+function TooltipDesign({ payload }) {
+  let objValues = {
+    client_credentials_access_token_count:
+      'Client credentials access token count',
+    authz_code_access_token_count: 'Authz code access token count',
+    authz_code_idtoken_count: 'Authz code idtoken count',
+  }
+  return (
+    <div className="bg-white thumbnail p-2">
+      {payload.length &&
+        payload.map((item, key) => {
+          return (
+            <div key={key} style={{ fontSize: '12px' }}>
+              {objValues[item.dataKey]} : {item.payload[item.dataKey]}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+export default TooltipDesign