fix: review ui

patractlabs · Sep 3, 2021 · 617e4d7 · 617e4d7
1 parent 7af988e
commit 617e4d7
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 89 deletions.
diff --git a/src/config/locales/en-us.json b/src/config/locales/en-us.json
@@ -86,7 +86,7 @@
     "Bandwidth": "Bandwidth",
     "Hrs": "Hrs",
     "Days": "Days",
-    "RequestAndBandwidth": "Requests / Bandwidth Statistics",
+    "RequestAndBandwidth": "Bandwidth / Requests Statistics",
     "TopCall": "Call Method Statistics",
     "Last30days": "Last 30 Days",
     "Requests": "Requests",
@@ -102,7 +102,7 @@
     "maxChar": "Within 16 characters",
     "projectName": "Project Name",
     "rateLimitLabel": "Per Second Requests Rate-Limiting",
-    "bandwidthLimitLabel": "Per Day Total Bandwidth",
+    "bandwidthLimitLabel": "Per Day Total Bandwidth (byte)",
     "dailyTotalReqLable": "Per Day Total Requests",
     "invalidLimitReqs": "Recent Invalid / Rate Limited Requests",
     "Method": "Method",
@@ -154,7 +154,9 @@
     "EmptyParagraph2": "2. Enter the project name and select the type of chain",
     "EmptyParagraph3": "3. Copy the endpoint link and send the API request",
     "EmptyParagraph4": "4. View statistics on the \"Requests\" page of the project",
-    "EmptyParagraph5": "5. Modify project restrictions on the \"Settings\" page of the project"
+    "EmptyParagraph5": "5. Modify project restrictions on the \"Settings\" page of the project",
+    "PublicEndpointDoc": "You can also use the <strong>public API</strong> provided by us without creating an account, but it will be subject to a bandwidth limit of <strong>50MB/s</strong> (shared by everyone).<br/>",
+    "APIDoc": "Check the details"
   },
 
   "modal": {

diff --git a/src/config/locales/zh-cn.json b/src/config/locales/zh-cn.json
@@ -85,7 +85,7 @@
     "Bandwidth": "带宽",
     "Hrs": "小时",
     "Days": "天",
-    "RequestAndBandwidth": "请求/带宽 数据",
+    "RequestAndBandwidth": "带宽/请求 数据",
     "TopCall": "调用方法统计",
     "Last30days": "最近30天",
     "Requests": "请求数据",
@@ -101,7 +101,7 @@
     "maxChar": "16个字符内",
     "projectName": "项目名称",
     "rateLimitLabel": "每秒请求数上限",
-    "bandwidthLimitLabel": "每日带宽上限",
+    "bandwidthLimitLabel": "每日带宽上限 (byte)",
     "dailyTotalReqLable": "每日请求总数上限",
     "invalidLimitReqs": "无效/限速 请求数",
     "Method": "方法",
@@ -153,7 +153,9 @@
     "EmptyParagraph2": "2. 输入项目名称，选择链的类型",
     "EmptyParagraph3": "3. 复制Endpoint链接，发送API请求",
     "EmptyParagraph4": "4. 在 项目的“请求数据”页面查看统计信息",
-    "EmptyParagraph5": "5. 在 项目的“设置”页面修改项目限制"
+    "EmptyParagraph5": "5. 在 项目的“设置”页面修改项目限制",
+    "PublicEndpointDoc": "你也可以使用我们提供的<strong>公共API</strong>，无需创建账户，但会受到<strong>50MB/s</strong>（所有人共享）的带宽限制。",
+    "APIDoc": "查看详情"
   },
 
   "modal": {

diff --git a/src/core/context/dashboard-context.tsx b/src/core/context/dashboard-context.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { apiFetchMenuList } from '../data/api'
 import { useApi } from '../hooks/useApi'
-import { Menu, NetworkType } from '../types/classes/chain'
+import { Menu, NetworkType, chainIconMap } from '../types/classes/chain'
 
 const DashboardContext: React.Context<{
   chains: Menu
@@ -37,11 +37,14 @@ const DashboardProvider = (props: Props): React.ReactElement<Props> => {
   }
 
   useEffect(() => {
-    const chain = location.pathname.split('/')[3] as NetworkType
+    const chain = location.pathname.split('/')[3] as keyof typeof chainIconMap
 
     for (let type in chains) {
       const selectedChainInfo = chains[type].find((info) => info.name === chain)
-      if (selectedChainInfo && collapse.indexOf(chain) === -1) {
+      if (
+        selectedChainInfo &&
+        collapse.indexOf(selectedChainInfo.network) === -1
+      ) {
         collapse.push(selectedChainInfo.network)
         setCollapse(collapse.slice())
       }
@@ -50,8 +53,6 @@ const DashboardProvider = (props: Props): React.ReactElement<Props> => {
   }, [location.pathname, chains])
 
   useEffect(() => {
-    console.log('xxx')
-
     updateMenu()
   }, [updateMenu])
 

diff --git a/src/core/types/classes/chain.ts b/src/core/types/classes/chain.ts
@@ -26,30 +26,28 @@ import KusamaParachains from '../../../shared/components/svg/KusamaParachains'
 import WestendParachains from '../../../shared/components/svg/WestendParachains'
 import RococoParachains from '../../../shared/components/svg/RococoParachains'
 
-
-
 export const chainIconMap = {
-  polkadot: img1,
-  kusama: img2,
-  jupiter: img3,
-  rococo: img4,
-  darwinia: img5,
-  dock: img6,
-  edgeware: img7,
-  kulupu: img8,
-  nodle: img9,
-  plasm: img10,
-  stafi: img11,
-  mandala: img12,
-  chainx: img13,
-  westend: img14,
-  subsocial: img15,
-  moonbasealpha: img16,
-  statemine: img17,
-  karura: img18,
-  moonriver: img19,
-  bifrost: img20,
-  westmint: img21,
+  Polkadot: img1,
+  Kusama: img2,
+  Jupiter: img3,
+  Rococo: img4,
+  Darwinia: img5,
+  Dock: img6,
+  Edgeware: img7,
+  Kulupu: img8,
+  Nodle: img9,
+  Plasm: img10,
+  Stafi: img11,
+  Mandala: img12,
+  Chainx: img13,
+  Westend: img14,
+  Subsocial: img15,
+  Moonbasealpha: img16,
+  Statemine: img17,
+  Karura: img18,
+  Moonriver: img19,
+  Bifrost: img20,
+  Westmint: img21,
 }
 export const subMenuMap: Record<
   NetworkType,
@@ -84,4 +82,6 @@ export interface Chain {
   status?: 'active' | 'suspend' | 'unknown'
 }
 
-export type Menu = Partial<Record<NetworkType, Chain[]>> & { [index: string]: Chain[] }
+export type Menu = Partial<Record<NetworkType, Chain[]>> & {
+  [index: string]: Chain[]
+}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -114,18 +114,6 @@ const Home: React.FC = (): ReactElement => {
           },
         ],
       }
-      // requestOption.xAxis.data = res.timeline.map((i) => i.slice(5)).reverse()
-      // requestOption.series[0].data = res.stats
-      //   .map((i) => {
-      //     if (chartType === 'request') return i[chartType]
-      //     return i[chartType] / 1000000
-      //   })
-      //   .reverse()
-
-      // requestOption.tooltip.formatter = function (data: { value: number }[]) {
-      //   if (chartType === 'request') return data[0].value
-      //   return data[0].value.toFixed(2) + ' MB'
-      // }
       const chart = echarts.init(requestsEchart.current!)
       chart.setOption(requestOption)
     })

diff --git a/src/pages/Projects/BandwidthMixChart/index.tsx b/src/pages/Projects/BandwidthMixChart/index.tsx
@@ -6,7 +6,7 @@ import { apiFetchProjectStaticsOfRange } from '../../../core/data/api'
 import { RangeChartData } from '../../../core/types/classes/project'
 import { RequestType } from '../../../core/enum'
 import EmptySample from '../../../shared/components/EmptySample'
-import { formatBandwidth } from '../../../shared/utils/index'
+import { formatBandwidth, formatSize } from '../../../shared/utils/index'
 
 enum rangeEnum {
   '24hours' = '24-hours',
@@ -22,7 +22,7 @@ const BandwidthMixChart: FC<{
   const reqBandwidthEchart = useRef(null)
   const { t } = useTranslation()
   const [chartType, setChartType] =
-    useState<keyof typeof RequestType>('request')
+    useState<keyof typeof RequestType>('bandwidth')
   const [chartRange, setChartRange] = useState('24-hours')
   const [mixChartData, setMixChartData] = useState<RangeChartData>({
     timeline: [],
@@ -61,23 +61,25 @@ const BandwidthMixChart: FC<{
           'box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.20); padding: 8px 12px',
         formatter: function (param: { data: number; axisValue: string }[]) {
           if (chartType === 'bandwidth') {
-            const kbVal = param[0].data
-            return `${param[0].axisValue} <br/> ${formatBandwidth(
-              kbVal * 1000
-            )}`
+            const data = param[0].data
+            return `${param[0].axisValue} <br/> ${formatSize(data)}`
           } else {
             return `${param[0].axisValue} <br/> ${param[0].data}`
           }
         },
       },
       xAxis: {
+        axisLine: {
+          onZero: false,
+          symbolOffset: [20, 20],
+        },
         type: 'category',
         data: mixChartData.timeline.slice().reverse(),
         axisTick: {
           alignWithLabel: true,
         },
         axisLabel: {
-          show: true,
+          interArrival: 20,
           formatter: function (value: string) {
             if (chartRange === rangeEnum['24hours']) return value.slice(6)
             return value.slice(5)
@@ -86,19 +88,29 @@ const BandwidthMixChart: FC<{
       },
       yAxis: {
         type: 'value',
+        axisLabel: {
+          verticalAlign: 'bottom',
+          align: 'left',
+          color: '#949593',
+          lineHeight: 16,
+          margin: 2,
+          formatter: function (value: number) {
+            if (chartType === 'bandwidth') {
+              return formatSize(value)
+            }
+            return value
+          },
+        },
       },
       grid: {
         right: '10',
-        left: '50',
+        left: '5',
         bottom: '20',
       },
       series: [
         {
           data: mixChartData.stats
-            .map((i) => {
-              if (chartType === 'bandwidth') return i[chartType] / 1000
-              return i[chartType]
-            })
+            .map((i) => i[chartType])
             .slice()
             .reverse(),
           type: 'line',
@@ -142,8 +154,8 @@ const BandwidthMixChart: FC<{
           }}
           value={chartType}
         >
-          <Radio value={RequestType.request}>{t('Details.Request')}</Radio>
           <Radio value={RequestType.bandwidth}>{t('Details.Bandwidth')}</Radio>
+          <Radio value={RequestType.request}>{t('Details.Request')}</Radio>
         </Radio.Group>
         <Radio.Group
           onChange={(e) => {

diff --git a/src/pages/Projects/CallMethodChart/index.tsx b/src/pages/Projects/CallMethodChart/index.tsx
@@ -13,7 +13,7 @@ const CallMethodChart: FC<{ chain: string; pid: string; timestamp: number }> =
     const chartRef = useRef(null)
     const { t } = useTranslation()
     const [chartType, setChartType] =
-      useState<keyof typeof RequestType>('request')
+      useState<keyof typeof RequestType>('bandwidth')
     const [chartData, setChartData] = useState<CallMethodsDataExt>({
       request: { total: 0, list: [] },
       bandwidth: { total: 0, list: [] },
@@ -144,10 +144,10 @@ const CallMethodChart: FC<{ chain: string; pid: string; timestamp: number }> =
             }}
             value={chartType}
           >
-            <Radio value={RequestType.request}>{t('Details.Request')}</Radio>
             <Radio value={RequestType.bandwidth}>
               {t('Details.Bandwidth')}
             </Radio>
+            <Radio value={RequestType.request}>{t('Details.Request')}</Radio>
           </Radio.Group>
         </div>
         {chartData && chartData![chartType].list.length > 0 ? (

diff --git a/src/pages/Projects/index.tsx b/src/pages/Projects/index.tsx
@@ -8,7 +8,7 @@ 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, formatBandwidth } from '../../shared/utils'
+import { formatTime, formatSize } from '../../shared/utils'
 import {
   apiFetchProjectList,
   apiUpdateProjectName,
@@ -204,14 +204,15 @@ const Projects: FC<{}> = () => {
               <div className="category">
                 <OverviewCard
                   percentageData={{
-                    used: projectInfo[tabNum]?.reqCnt,
-                    limit: projectInfo[tabNum].reqDayLimit,
+                    formatter: formatSize,
+                    used: projectInfo[tabNum]?.bw,
+                    limit: projectInfo[tabNum].bwDayLimit,
                     onlyPercentage: false,
                   }}
                   title={
                     <>
-                      {t('summary.dailyReq')}
-                      <Tooltip title={t('tip.RequestNumTip')} bg={false}>
+                      {t('summary.dailyBandwidth')}
+                      <Tooltip title={t('tip.BandwidthNumTip')} bg={false}>
                         <img
                           src={TooltipIcon}
                           alt="info"
@@ -227,18 +228,18 @@ const Projects: FC<{}> = () => {
                     </>
                   }
                 >
-                  {projectInfo[tabNum]?.reqCnt}
+                  {formatSize(projectInfo[tabNum]?.bw)}
                 </OverviewCard>
                 <OverviewCard
                   percentageData={{
-                    used: projectInfo[tabNum]?.bw,
-                    limit: projectInfo[tabNum].bwDayLimit,
-                    onlyPercentage: true,
+                    used: projectInfo[tabNum]?.reqCnt,
+                    limit: projectInfo[tabNum].reqDayLimit,
+                    onlyPercentage: false,
                   }}
                   title={
                     <>
-                      {t('summary.dailyBandwidth')}
-                      <Tooltip title={t('tip.BandwidthNumTip')} bg={false}>
+                      {t('summary.dailyReq')}
+                      <Tooltip title={t('tip.RequestNumTip')} bg={false}>
                         <img
                           src={TooltipIcon}
                           alt="info"
@@ -254,7 +255,7 @@ const Projects: FC<{}> = () => {
                     </>
                   }
                 >
-                  {formatBandwidth(projectInfo[tabNum]?.bw)}
+                  {projectInfo[tabNum]?.reqCnt}
                 </OverviewCard>
                 <OverviewCard title={t('summary.AvgResTime')}>
                   {projectInfo[tabNum]?.delay} ms

diff --git a/src/pages/Summary/index.css b/src/pages/Summary/index.css
@@ -94,6 +94,7 @@
   background: #fff;
   border-radius: 4px;
   display: inline-block;
+  white-space: nowrap;
 }
 
 .table-chain-item img {

diff --git a/src/pages/Summary/index.tsx b/src/pages/Summary/index.tsx
@@ -53,16 +53,6 @@ const Summary: FC<{}> = () => {
   return !loading ? (
     <div className="summary">
       <div className="category">
-        <OverviewCard
-          title={t('summary.dailyReq')}
-          percentageData={{
-            used: statics.reqCnt,
-            limit: user.reqDayLimit,
-            onlyPercentage: false,
-          }}
-        >
-          {statics.reqCnt}
-        </OverviewCard>
         <OverviewCard
           title={
             <>
@@ -89,6 +79,16 @@ const Summary: FC<{}> = () => {
         >
           {formatBandwidth(statics.bw)}
         </OverviewCard>
+        <OverviewCard
+          title={t('summary.dailyReq')}
+          percentageData={{
+            used: statics.reqCnt,
+            limit: user.reqDayLimit,
+            onlyPercentage: false,
+          }}
+        >
+          {statics.reqCnt}
+        </OverviewCard>
         <OverviewCard title={t('summary.AvgResTime')}>
           {statics.delay} ms
         </OverviewCard>