- {columns.map(({ key, render }) => {
+ {columns.map(({ key, render, percent }) => {
let content = row[key];
if (render) {
- content = render(row, index);
+ content = render(row, percent);
}
return (
void;
};
@@ -78,6 +97,7 @@ export const RankSearchBar = ({
logo,
monthList = [],
options = [],
+ i18n_lang,
onChange,
}: RankSearchBarProps) => {
const router = useRouter();
@@ -91,18 +111,29 @@ export const RankSearchBar = ({
}, [router]);
const typeOptions = useMemo(() => {
- return options.length
- ? options
- : [
- { key: '/report/tiobe', value: '编程语言' },
- { key: '/report/netcraft', value: '服务器' },
- { key: '/report/db-engines', value: '数据库' },
- ];
- }, [options]);
+ if (options.length) {
+ return options;
+ } else {
+ return i18n_lang == 'en'
+ ? [
+ { key: '/report/tiobe', value: 'Language' },
+ { key: '/report/netcraft', value: 'Server' },
+ { key: '/report/db-engines', value: 'Database' },
+ ]
+ : [
+ { key: '/report/tiobe', value: '编程语言' },
+ { key: '/report/netcraft', value: '服务器' },
+ { key: '/report/db-engines', value: '数据库' },
+ ];
+ }
+ }, [options, i18n_lang]);
const monthOptions = useMemo(() => {
- return monthList?.map((m) => ({ key: m, value: `${m}月` }));
- }, [monthList]);
+ return monthList?.map((m) => ({
+ key: m,
+ value: getMonthName(m, i18n_lang) as string,
+ }));
+ }, [monthList, i18n_lang]);
return (
diff --git a/src/components/report/Report.tsx b/src/components/report/Report.tsx
index 3fc2f9db..5b549714 100644
--- a/src/components/report/Report.tsx
+++ b/src/components/report/Report.tsx
@@ -3,34 +3,18 @@ import { IoMdRemove, IoMdTrendingDown, IoMdTrendingUp } from 'react-icons/io';
import { RankDataItem } from '@/types/rank';
-export const ChangeColumnRender = (row: RankDataItem) => {
- let text = '新上榜';
+export const ChangeColumnRender = (row: RankDataItem, showPercent = false) => {
+ let text = '-';
if (row.change !== null) {
- text = `${row.change}`;
+ text = showPercent ? `${row.change}%` : `${row.change}`;
}
- return (
-
- {row.change < 0 ? (
-
- ) : (
-
- )}
- {text}
-
- );
-};
-export const ChangePercentColumnRender = (row: RankDataItem) => {
- let text = '新上榜';
- if (row.change !== null) {
- text = `${row.change}%`;
- }
return (
{row.change < 0 ? (
-
+
) : (
-
+
)}
{text}
@@ -46,9 +30,5 @@ export const TrendColumnRender = (row: RankDataItem) => {
icon = ;
}
}
- return (
- <>
- {icon}
-
- );
+ return {icon};
};
diff --git a/src/pages/report/db-engines.tsx b/src/pages/report/db-engines.tsx
index c35eb5b3..dbb939ab 100644
--- a/src/pages/report/db-engines.tsx
+++ b/src/pages/report/db-engines.tsx
@@ -1,9 +1,15 @@
import { GetServerSideProps, NextPage } from 'next';
import { useRouter } from 'next/router';
+import { Trans, useTranslation } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useMemo } from 'react';
import Loading from '@/components/loading/Loading';
import Navbar from '@/components/navbar/Navbar';
-import RankTable, { RankSearchBar } from '@/components/rankTable/RankTable';
+import RankTable, {
+ getMonthName,
+ RankSearchBar,
+} from '@/components/rankTable/RankTable';
import {
ChangeColumnRender,
TrendColumnRender,
@@ -14,33 +20,13 @@ import { getDBRank } from '@/services/rank';
import { RankPageProps } from '@/types/rank';
-// 排名 数据库 分数 对比上月 类型
-const columns: any[] = [
- { key: 'position', title: '排名', width: 80 },
- { key: 'name', title: '数据库' },
- { key: 'rating', title: '分数' },
- {
- key: 'change',
- title: '对比上月',
- render: ChangeColumnRender,
- },
- { key: 'db_model', title: '类型' },
-];
-
-// 排名 数据库 流行度
-const md_columns: any[] = [
- { key: 'position', title: '排名', width: 60 },
- { key: 'name', title: '数据库' },
- { key: 'rating', title: '分数', width: 80 },
- { key: 'change', title: '趋势', render: TrendColumnRender, width: 60 },
-];
-
const DBEnginesPage: NextPage = ({
year,
month,
monthList,
list,
}) => {
+ const { t, i18n } = useTranslation('rank');
const router = useRouter();
const onSearch = (key: string, value: string) => {
@@ -52,17 +38,68 @@ const DBEnginesPage: NextPage = ({
}
};
+ // 排名 数据库 分数 对比上月 类型
+ const columns: any[] = useMemo(
+ () => [
+ { key: 'position', title: t('db.thead.position'), width: 80 },
+ { key: 'name', title: t('db.thead.name') },
+ { key: 'rating', title: t('db.thead.rating') },
+ {
+ key: 'change',
+ title: t('db.thead.change'),
+ render: ChangeColumnRender,
+ },
+ { key: 'db_model', title: t('db.thead.model') },
+ ],
+ [i18n.language]
+ );
+
+ // 排名 数据库 流行度
+
+ const md_columns: any[] = useMemo(
+ () =>
+ columns
+ .map((col) => {
+ if (col.key === 'position') {
+ return { ...col, width: 60 };
+ }
+ if (col.key === 'rating') {
+ return { ...col, width: 80 };
+ }
+ if (col.key === 'change') {
+ return {
+ ...col,
+ title: t('db.thead.md_change'),
+ render: TrendColumnRender,
+ width: 60,
+ };
+ }
+ if (col.key === 'db_model') {
+ return null;
+ }
+ return col;
+ })
+ .filter(Boolean),
+ [i18n.language]
+ );
+
return (
<>
-
+
{list ? (
-
+
@@ -75,20 +112,15 @@ const DBEnginesPage: NextPage = ({
- 「DB-Engines 排名」
- 是按流行程度对数据库管理系统进行排名，涵盖 380
- 多个系统，每月更新一次。
- 排名标准包括搜索数据库名称时的搜索引擎结果的数量、Google
- 趋势、Stack
- Overflow、社交网络和提及数据库的工作机会等数据，综合比较排名。
+
-
+
{numFormat(row.total, 2, 10000)} ;
- },
- },
-];
-
-// 排名 服务器 市场占比 趋势
-const md_columns: any[] = [
- { key: 'position', title: '排名', width: 60 },
- { key: 'name', title: '服务器' },
- { key: 'rating', title: '占比' },
- { key: 'change', title: '趋势', render: TrendColumnRender, width: 60 },
-];
-
-const serverList = [
- {
- title: 'Apache',
- content:
- '一个开放源码的网页服务器，可以在大多数计算机操作系统中运行。由于其多平台和安全性被广泛使用，是最流行的 Web服务器端软件之一。',
- },
- {
- title: 'Nginx',
- content:
- '免费开源、轻量级、高性能 Web 服务器，由伊戈尔·赛索耶夫为俄罗斯访问量第二的 Rambler.ru 站点开发。',
- },
- {
- title: 'OpenResty',
- content:
- '一个基于 Nginx 的 Web 平台，可以使用其 LuaJIT 引擎运行 Lua 脚本，由章亦春创建。',
- },
-];
-
const NetcraftPage: NextPage = ({
year,
month,
@@ -70,6 +28,7 @@ const NetcraftPage: NextPage = ({
all_list,
active_list,
}) => {
+ const { t, i18n } = useTranslation('rank');
const router = useRouter();
const onSearch = (key: string, value: string) => {
@@ -81,48 +40,110 @@ const NetcraftPage: NextPage = ({
}
};
+ const serverList = [
+ { title: 'Apache', key: 'apache' },
+ { title: 'Nginx', key: 'nginx' },
+ { title: 'OpenResty', key: 'openresty' },
+ ].map((server) => ({
+ ...server,
+ content: t(`netcraft.servers.${server.key}`),
+ }));
+
+ // 排名 服务器 市场占比 对比上月 总数
+ const columns: any[] = useMemo(
+ () => [
+ { key: 'position', title: t('netcraft.thead.position'), width: 80 },
+ { key: 'name', title: t('netcraft.thead.name') },
+ {
+ key: 'rating',
+ title: t('netcraft.thead.rating'),
+ },
+ {
+ key: 'change',
+ title: t('netcraft.thead.change'),
+ render: ChangeColumnRender,
+ percent: true,
+ },
+ {
+ key: 'total',
+ title: t('netcraft.thead.total'),
+ render: (row: RankDataItem) => {
+ return {numFormat(row.total, 2, 10000)} ;
+ },
+ },
+ ],
+ [i18n.language]
+ );
+
+ // 排名 服务器 市场占比 趋势
+ const md_columns: any[] = useMemo(
+ () =>
+ columns
+ .map((col) => {
+ if (col.key === 'position') {
+ return { ...col, width: 60 };
+ }
+ if (col.key === 'change') {
+ return {
+ ...col,
+ title: t('netcraft.thead.md_change'),
+ render: TrendColumnRender,
+ width: 60,
+ };
+ }
+ if (col.key === 'total') {
+ return null;
+ }
+ return col;
+ })
+ .filter(Boolean),
+ [i18n.language]
+ );
+
return (
<>
-
+
{all_list ? (
-
+
- 市场份额排名
+ {t('netcraft.market_title')}
- 活跃网站排名
+ {t('netcraft.active_title')}
- 市场份额排名
+ {t('netcraft.market_title')}
- 活跃网站排名
+ {t('netcraft.active_title')}
- 「Netcraft」
- 是一家总部位于英国巴斯始于 1995 年的互联网服务公司。
- 该公司官网每月发布的调研数据报告 Web Server Survey 系列
- 每月更新一次，已成为当今人们了解全球网站的服务器市场份额和排名情况的主要参考依据，
- 时常被华尔街杂志、Slashdot 等知名媒体引用。{' '}
+
@@ -136,11 +157,11 @@ const NetcraftPage: NextPage = ({
})}
-
+
-
-
+
@@ -75,19 +108,15 @@ const TiobePage: NextPage = ({
- 「TIOBE 编程社区指数」
- 是一种衡量编程语言流行度的标准，由成立于 2000 年 10
- 月位于荷兰埃因霍温的 TIOBE Software BV 创建和维护。
- 该指数是根据网络搜索引擎对含有该语言名称的查询结果的数量计算出来的。该指数涵盖了
- Google、百度、维基百科和 YouTube 的搜索结果。
+
-
+
|