fix: add tooltip

patractlabs · Sep 3, 2021 · cc95130 · cc95130
1 parent 7994b42
commit cc95130
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 86 deletions.
diff --git a/src/config/locales/en-us.json b/src/config/locales/en-us.json
@@ -145,6 +145,7 @@
     "invalidNumber": "Please input a number",
     "MaxNum": "Elara provides 10 free projects for developers, if you need customization, please contact us",
     "MaxBandwidth": "The total daily bandwidth limit is 10GB",
+    "MaxRequest": "The total daily requests limit is 1,000,000",
     "GetLastestData": "Get the latest data",
     "RequestNumTip": "you can customize the daily request limit on the \"Settings\" page",
     "BandwidthNumTip": "you can customize the daily bandwidth limit on the \"Settings\" page",

diff --git a/src/config/locales/zh-cn.json b/src/config/locales/zh-cn.json
@@ -143,7 +143,8 @@
     "invalidName": "请输入4-16个英文字符",
     "invalidNumber": "请输入数字",
     "MaxNum": "Elara为开发者提供10个免费项目，如果你需要定制，请联系我们",
-    "MaxBandwidth": "每天的带宽限制为10GB",
+    "MaxBandwidth": "每日带宽总量上限为10G",
+    "MaxRequest": "每日请求总量上限为1,000MB",
     "GetLastestData": "获取最新数据",
     "RequestNumTip": "可在“设置”页自定义每日请求上限",
     "BandwidthNumTip": "可在“设置”页自定义每日带宽上限",

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -21,6 +21,7 @@ import { useHistory } from 'react-router'
 import { Carousel } from 'antd'
 import Footer from '../Footer'
 import { Countup } from '../../shared/components/Countup'
+import { formatSize, formatNumber } from '../../shared/utils'
 
 const imgList = [img1, img2, img3, img4, img5, img6, img7, img8]
 
@@ -71,11 +72,16 @@ const Home: React.FC = (): ReactElement => {
         },
         yAxis: {
           type: 'value',
+          axisLabel: {
+            formatter: function (value: number) {
+              if (chartType === 'request') return formatNumber(value)
+              return formatSize(value)
+            },
+          },
         },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'cross',
             label: {
               backgroundColor: '#283b56',
               precision: 0,
@@ -87,9 +93,10 @@ const Home: React.FC = (): ReactElement => {
             textBorderWidth: 2,
             fontWeight: 'bolder',
           },
-          formatter: function (data: { value: number }[]) {
-            if (chartType === 'request') return data[0].value + ''
-            return data[0].value.toFixed(2) + ' GB'
+          formatter: function (data: { value: number; axisValue: string }[]) {
+            if (chartType === 'request')
+              return `${data[0].axisValue}<br>${formatNumber(data[0].value)}`
+            return `${data[0].axisValue}<br>${formatSize(data[0].value)}`
           },
           extraCssText:
             'box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.20); padding: 8px 12px',
@@ -101,12 +108,7 @@ const Home: React.FC = (): ReactElement => {
         },
         series: [
           {
-            data: res.stats
-              .map((i) => {
-                if (chartType === 'request') return i[chartType]
-                return i[chartType] / Math.pow(1024, 3)
-              })
-              .reverse(),
+            data: res.stats.map((i) => i[chartType]).reverse(),
             type: 'bar',
             itemStyle: {
               color: '#14B071',

diff --git a/src/pages/Projects/CallMethodChart/index.tsx b/src/pages/Projects/CallMethodChart/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { apiFetchProjectMethodsStatics } from '../../../core/data/api'
 import { CallMethodsDataExt } from '../../../core/types/classes/project'
 import { RequestType } from '../../../core/enum'
-import { formatBandwidth } from '../../../shared/utils/index'
+import { formatSize, formatNumber } from '../../../shared/utils/index'
 import EmptySample from '../../../shared/components/EmptySample'
 
 const CallMethodChart: FC<{ chain: string; pid: string; timestamp: number }> =
@@ -47,11 +47,13 @@ const CallMethodChart: FC<{ chain: string; pid: string; timestamp: number }> =
             'box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.20); padding: 8px 12px',
           formatter: function (param: any) {
             if (chartType === 'bandwidth') {
-              return `${param[0].axisValue} <br/> ${formatBandwidth(
-                param[0].data.value * 1000
+              return `${param[0].axisValue} <br/> ${formatSize(
+                param[0].data.value
               )}`
             } else {
-              return `${param[0].axisValue} <br/> ${param[0].data.value}`
+              return `${param[0].axisValue} <br/> ${formatNumber(
+                param[0].data.value
+              )}`
             }
           },
         },
@@ -68,6 +70,14 @@ const CallMethodChart: FC<{ chain: string; pid: string; timestamp: number }> =
               color: '#7C7E7C',
             },
           },
+          axisLabel: {
+            formatter: function (value: number) {
+              if (chartType === 'bandwidth') {
+                return formatSize(value)
+              }
+              return formatNumber(value)
+            },
+          },
         },
         yAxis: {
           type: 'category',
@@ -101,7 +111,7 @@ const CallMethodChart: FC<{ chain: string; pid: string; timestamp: number }> =
               .reverse()
               .map((i, idx) => {
                 return {
-                  value: chartType === 'bandwidth' ? i.value / 1000 : i.value,
+                  value: i.value,
                   itemStyle: {
                     color: `rgba(20,176,113, ${(idx + 1) * 0.3})`,
                     borderRadius: [0, 20, 20, 0],
@@ -117,9 +127,9 @@ const CallMethodChart: FC<{ chain: string; pid: string; timestamp: number }> =
               formatter: function (params: any) {
                 const val = params.data.value
                 if (chartType === 'bandwidth') {
-                  return formatBandwidth(val * 1000)
+                  return formatSize(val)
                 } else {
-                  return val
+                  return formatNumber(val)
                 }
               },
             },

diff --git a/src/pages/Projects/index.tsx b/src/pages/Projects/index.tsx
@@ -5,7 +5,6 @@ import { useParams, useLocation } from 'react-router-dom'
 import { ENDPOINTS_URL, WSS_ENDPOINTS_URL } from '../../config/origin'
 import OverviewCard from '../../shared/components/OverviewCard'
 import CreateProjectBtn from '../../shared/components/CreateProjectBtn'
-import TooltipIcon from '../../assets/tooltip.svg'
 import { useApi } from '../../core/hooks/useApi'
 import { Project } from '../../core/types/classes/project'
 import { formatTime, formatSize } from '../../shared/utils'
@@ -209,24 +208,8 @@ const Projects: FC<{}> = () => {
                     limit: projectInfo[tabNum].bwDayLimit,
                     onlyPercentage: false,
                   }}
-                  title={
-                    <>
-                      {t('summary.dailyBandwidth')}
-                      <Tooltip title={t('tip.BandwidthNumTip')} bg={false}>
-                        <img
-                          src={TooltipIcon}
-                          alt="info"
-                          style={{
-                            width: '16px',
-                            height: '16px',
-                            marginLeft: '4px',
-                            cursor: 'pointer',
-                            verticalAlign: 'middle',
-                          }}
-                        />
-                      </Tooltip>
-                    </>
-                  }
+                  tooltip={t('tip.BandwidthNumTip')}
+                  title={t('summary.dailyBandwidth')}
                 >
                   {formatSize(projectInfo[tabNum]?.bw)}
                 </OverviewCard>
@@ -236,24 +219,8 @@ const Projects: FC<{}> = () => {
                     limit: projectInfo[tabNum].reqDayLimit,
                     onlyPercentage: false,
                   }}
-                  title={
-                    <>
-                      {t('summary.dailyReq')}
-                      <Tooltip title={t('tip.RequestNumTip')} bg={false}>
-                        <img
-                          src={TooltipIcon}
-                          alt="info"
-                          style={{
-                            width: '16px',
-                            height: '16px',
-                            marginLeft: '4px',
-                            cursor: 'pointer',
-                            verticalAlign: 'middle',
-                          }}
-                        />
-                      </Tooltip>
-                    </>
-                  }
+                  tooltip={t('tip.RequestNumTip')}
+                  title={t('summary.dailyReq')}
                 >
                   {projectInfo[tabNum]?.reqCnt}
                 </OverviewCard>

diff --git a/src/pages/Summary/index.tsx b/src/pages/Summary/index.tsx
@@ -15,12 +15,11 @@ import EmptySample from '../../shared/components/EmptySample'
 import EmptyByDesc from '../../shared/components/EmptyByDesc'
 import { chainIconMap } from '../../core/types/classes/chain'
 import MoreSvg from '../../assets/arrow_forward.svg'
-import TooltipIcon from '../../assets/tooltip.svg'
 import Tooltip from '../../shared/components/Tooltip'
 import PageLoading from '../../shared/components/PageLoading'
 
 import './index.css'
-import { formatTime, formatBandwidth } from '../../shared/utils'
+import { formatTime, formatSize } from '../../shared/utils'
 
 const Summary: FC<{}> = () => {
   const [statics, setStatics] = useState<StatT>({
@@ -54,32 +53,18 @@ const Summary: FC<{}> = () => {
     <div className="summary">
       <div className="category">
         <OverviewCard
-          title={
-            <>
-              {t('summary.dailyBandwidth')}
-              <Tooltip title={t('tip.MaxBandwidth')} bg={false}>
-                <img
-                  src={TooltipIcon}
-                  alt="info"
-                  style={{
-                    width: '16px',
-                    height: '16px',
-                    marginLeft: '4px',
-                    cursor: 'pointer',
-                  }}
-                />
-              </Tooltip>
-            </>
-          }
+          title={t('summary.dailyBandwidth')}
+          tooltip={t('tip.MaxBandwidth')}
           percentageData={{
             used: statics.bw,
             limit: user.bwDayLimit,
             onlyPercentage: true,
           }}
         >
-          {formatBandwidth(statics.bw)}
+          {formatSize(statics.bw)}
         </OverviewCard>
         <OverviewCard
+          tooltip={t('tip.MaxRequest')}
           title={t('summary.dailyReq')}
           percentageData={{
             used: statics.reqCnt,
@@ -177,9 +162,7 @@ const Summary: FC<{}> = () => {
                 key: 'bw',
                 render: (data: number) => {
                   return (
-                    <div style={{ fontWeight: 700 }}>
-                      {formatBandwidth(data)}
-                    </div>
+                    <div style={{ fontWeight: 700 }}>{formatSize(data)}</div>
                   )
                 },
               },

diff --git a/src/shared/components/OverviewCard/index.tsx b/src/shared/components/OverviewCard/index.tsx
@@ -1,9 +1,12 @@
 import { FC, ReactNode } from 'react'
+import Tooltip from '../Tooltip'
+import TooltipIcon from '../../../assets/tooltip.svg'
 
 import './index.css'
 
 const OverviewCard: FC<{
   title: ReactNode
+  tooltip?: string
   percentageData?: {
     used: number
     limit: number
@@ -12,13 +15,31 @@ const OverviewCard: FC<{
   }
 }> = ({
   title = 'title',
+  tooltip,
   percentageData = { used: 0, limit: -1, onlyPercentage: false },
   children,
 }) => {
   const { used, limit, onlyPercentage, formatter } = percentageData
   return (
     <div className="summary-card">
-      <div className="title">{title}</div>
+      <div className="title">
+        {title}
+        {tooltip && (
+          <Tooltip title={tooltip} bg={false}>
+            <img
+              src={TooltipIcon}
+              alt="info"
+              style={{
+                width: '16px',
+                height: '16px',
+                marginLeft: '4px',
+                cursor: 'pointer',
+                verticalAlign: 'middle',
+              }}
+            />
+          </Tooltip>
+        )}
+      </div>
       <div className="data">{children}</div>
       {percentageData && percentageData.limit > 0 && (
         <div className="indicator">

diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts
@@ -22,6 +22,11 @@ const formatSize = (bytes: number) => {
   return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i]
 }
 
+const formatNumber = (num: number) => {
+  var reg = /\d{1,3}(?=(\d{3})+$)/g
+  return (num + '').replace(reg, '$&,')
+}
+
 const getCookie = (name: string) => {
   const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
   const arr = document.cookie.match(reg)
@@ -36,10 +41,4 @@ const delCookie = () => {
   document.cookie = 'sid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
 }
 
-const formatBandwidth = (val: number): string => {
-  const data = val / 1000
-  if (data > 1000) return (data / 1000).toFixed(2) + ' MB'
-  return data.toFixed(2) + ' KB'
-}
-
-export { formatTime, formatSize, delCookie, getCookie, formatBandwidth }
+export { formatTime, formatSize, formatNumber, delCookie, getCookie }