From fcb28d3456df12c1cc0c311aa8f4485d008bbf64 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sat, 7 Oct 2023 17:28:30 +0800 Subject: [PATCH] feat: add MetricsTable value render and change layout of website detail --- package.json | 1 + pnpm-lock.yaml | 112 +++++++++++++++++- .../components/website/MetricsTable.tsx | 29 +++++ src/client/components/website/PagesTable.tsx | 2 +- src/client/pages/Website/Detail.tsx | 24 ++-- src/server/trpc/routers/website.ts | 8 ++ 6 files changed, 160 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index a395282..c95f088 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "lodash": "^4.17.21", "lodash-es": "^4.17.21", "maxmind": "^4.3.11", + "millify": "^6.1.0", "morgan": "^1.10.0", "nanoid": "^3.3.6", "nodemailer": "^6.9.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f35978..997a393 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -91,6 +91,9 @@ dependencies: maxmind: specifier: ^4.3.11 version: 4.3.11 + millify: + specifier: ^6.1.0 + version: 6.1.0 morgan: specifier: ^1.10.0 version: 1.10.0 @@ -2245,6 +2248,11 @@ packages: engines: {node: '>=0.10.0'} dev: false + /ansi-regex@5.0.1: + resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} + engines: {node: '>=8'} + dev: false + /ansi-styles@2.2.1: resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==} engines: {node: '>=0.10.0'} @@ -2257,6 +2265,13 @@ packages: color-convert: 1.9.3 dev: true + /ansi-styles@4.3.0: + resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} + engines: {node: '>=8'} + dependencies: + color-convert: 2.0.1 + dev: false + /antd@5.9.3(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-a7gY6hfsjoDLOENHKzjXZgmAxi1hDdsuIvYm6YMTctb08EhTEXCZoeFOekwz9S0vrTcdSpUMblRWsiwuYRdPYg==} peerDependencies: @@ -2583,6 +2598,15 @@ packages: wordwrap: 0.0.2 dev: false + /cliui@8.0.1: + resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} + engines: {node: '>=12'} + dependencies: + string-width: 4.2.3 + strip-ansi: 6.0.1 + wrap-ansi: 7.0.0 + dev: false + /clsx@2.0.0: resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} engines: {node: '>=6'} @@ -2593,13 +2617,24 @@ packages: dependencies: color-name: 1.1.3 + /color-convert@2.0.1: + resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} + engines: {node: '>=7.0.0'} + dependencies: + color-name: 1.1.4 + dev: false + /color-name@1.1.3: resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==} + /color-name@1.1.4: + resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + dev: false + /color-string@1.9.1: resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==} dependencies: - color-name: 1.1.3 + color-name: 1.1.4 simple-swizzle: 0.2.2 dev: false @@ -3007,6 +3042,10 @@ packages: resolution: {integrity: sha512-sSeXY9rNDp86bJODW68pxLcy3A5FrPZfIgOrJHzqgYzX513Zq6/ytdBigp7KeJEpZZopBBSiO1cVuiRkZpNxLw==} dev: false + /emoji-regex@8.0.0: + resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} + dev: false + /encodeurl@1.0.2: resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==} engines: {node: '>= 0.8'} @@ -3153,7 +3192,6 @@ packages: /escalade@3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} - dev: true /escape-html@1.0.3: resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} @@ -3408,6 +3446,11 @@ packages: resolution: {integrity: sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==} dev: false + /get-caller-file@2.0.5: + resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} + engines: {node: 6.* || 8.* || >= 10.*} + dev: false + /get-intrinsic@1.2.1: resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==} dependencies: @@ -3699,6 +3742,11 @@ packages: engines: {node: '>=0.10.0'} dev: true + /is-fullwidth-code-point@3.0.0: + resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} + engines: {node: '>=8'} + dev: false + /is-glob@4.0.3: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} engines: {node: '>=0.10.0'} @@ -4056,6 +4104,13 @@ packages: picomatch: 2.3.1 dev: true + /millify@6.1.0: + resolution: {integrity: sha512-H/E3J6t+DQs/F2YgfDhxUVZz/dF8JXPPKTLHL/yHCcLZLtCXJDUaqvhJXQwqOVBvbyNn4T0WjLpIHd7PAw7fBA==} + hasBin: true + dependencies: + yargs: 17.7.2 + dev: false + /mime-db@1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} @@ -5388,6 +5443,11 @@ packages: resolution: {integrity: sha512-cA6Xh6e0fDBBBwH77SLJaJPBmD3nWVAcF9/XAcsrIHdjhFzFiB5aNQFytdjCGPezU3ROwrR11IddKAM08vohxA==} dev: false + /require-directory@2.1.1: + resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} + engines: {node: '>=0.10.0'} + dev: false + /resize-observer-polyfill@1.5.1: resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} dev: false @@ -5731,6 +5791,15 @@ packages: resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==} dev: false + /string-width@4.2.3: + resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} + engines: {node: '>=8'} + dependencies: + emoji-regex: 8.0.0 + is-fullwidth-code-point: 3.0.0 + strip-ansi: 6.0.1 + dev: false + /string.prototype.trim@1.2.7: resolution: {integrity: sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==} engines: {node: '>= 0.4'} @@ -5763,6 +5832,13 @@ packages: ansi-regex: 2.1.1 dev: false + /strip-ansi@6.0.1: + resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} + engines: {node: '>=8'} + dependencies: + ansi-regex: 5.0.1 + dev: false + /stylis@4.3.0: resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==} dev: false @@ -6244,6 +6320,15 @@ packages: engines: {node: '>=0.4.0'} dev: false + /wrap-ansi@7.0.0: + resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==} + engines: {node: '>=10'} + dependencies: + ansi-styles: 4.3.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + dev: false + /wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} @@ -6265,6 +6350,11 @@ packages: engines: {node: '>=0.4.0'} dev: false + /y18n@5.0.8: + resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} + engines: {node: '>=10'} + dev: false + /yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} dev: true @@ -6277,6 +6367,24 @@ packages: engines: {node: '>= 14'} dev: true + /yargs-parser@21.1.1: + resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==} + engines: {node: '>=12'} + dev: false + + /yargs@17.7.2: + resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==} + engines: {node: '>=12'} + dependencies: + cliui: 8.0.1 + escalade: 3.1.1 + get-caller-file: 2.0.5 + require-directory: 2.1.1 + string-width: 4.2.3 + y18n: 5.0.8 + yargs-parser: 21.1.1 + dev: false + /yargs@3.10.0: resolution: {integrity: sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==} dependencies: diff --git a/src/client/components/website/MetricsTable.tsx b/src/client/components/website/MetricsTable.tsx index 70c063c..f8efdae 100644 --- a/src/client/components/website/MetricsTable.tsx +++ b/src/client/components/website/MetricsTable.tsx @@ -3,6 +3,8 @@ import { ColumnsType } from 'antd/es/table/interface'; import React from 'react'; import { trpc } from '../../api/trpc'; import { useCurrentWorkspaceId } from '../../store/user'; +import { sum } from 'lodash-es'; +import millify from 'millify'; interface MetricsTableProps { websiteId: string; @@ -31,6 +33,8 @@ export const MetricsTable: React.FC = React.memo((props) => { endAt, }); + const total = sum(metrics.map((m) => m.y)); + const columns: ColumnsType<{ x: string; y: number }> = [ { title: title[0], @@ -40,6 +44,27 @@ export const MetricsTable: React.FC = React.memo((props) => { title: title[1], dataIndex: 'y', width: 100, + align: 'center', + render: (val) => { + const percent = (Number(val) / total) * 100; + + return ( +
+
+ {millify(val, { + lowercase: true, + })} +
+
+
+ {percent.toFixed(0)}% +
+
+ ); + }, }, ]; @@ -49,6 +74,10 @@ export const MetricsTable: React.FC = React.memo((props) => { loading={isLoading} dataSource={metrics} columns={columns} + pagination={{ + pageSize: 10, + hideOnSinglePage: true, + }} size="small" /> ); diff --git a/src/client/components/website/PagesTable.tsx b/src/client/components/website/PagesTable.tsx index 5f48a16..5ee2795 100644 --- a/src/client/components/website/PagesTable.tsx +++ b/src/client/components/website/PagesTable.tsx @@ -7,6 +7,6 @@ interface PagesTableProps { endAt: number; } export const PagesTable: React.FC = React.memo((props) => { - return ; + return ; }); PagesTable.displayName = 'PagesTable'; diff --git a/src/client/pages/Website/Detail.tsx b/src/client/pages/Website/Detail.tsx index f292b7d..19e9ed7 100644 --- a/src/client/pages/Website/Detail.tsx +++ b/src/client/pages/Website/Detail.tsx @@ -1,4 +1,4 @@ -import { Divider } from 'antd'; +import { Card, Divider } from 'antd'; import dayjs from 'dayjs'; import React from 'react'; import { useParams } from 'react-router'; @@ -32,23 +32,21 @@ export const WebsiteDetail: React.FC = React.memo(() => { return (
-
- -
- - - -
-
+ + + + + -
- -
right
-
+ + + right + +
); }); diff --git a/src/server/trpc/routers/website.ts b/src/server/trpc/routers/website.ts index 1af147a..2c248fa 100644 --- a/src/server/trpc/routers/website.ts +++ b/src/server/trpc/routers/website.ts @@ -70,6 +70,14 @@ export const websiteRouter = router({ event: z.string().optional(), }) ) + .output( + z.array( + z.object({ + x: z.string(), + y: z.bigint(), + }) + ) + ) .query(async ({ input }) => { const { websiteId,