schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: short website overview display

Browse Source
This commit is contained in:
moonrailgun 2023-10-30 22:14:40 +08:00
parent 58d57022fd
commit 503321d43b
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/components/website/MetricsTable.tsx
View File

@ -4,7 +4,7 @@ import React from 'react';
import { AppRouterOutput, trpc } from '../../api/trpc'; import { AppRouterOutput, trpc } from '../../api/trpc';
import { useCurrentWorkspaceId } from '../../store/user'; import { useCurrentWorkspaceId } from '../../store/user';
import { sum } from 'lodash-es'; import { sum } from 'lodash-es';
import millify from 'millify'; import { formatNumber } from '../../utils/common';
type MetricsItemType = AppRouterOutput['website']['metrics'][number]; type MetricsItemType = AppRouterOutput['website']['metrics'][number];
@ -53,11 +53,7 @@ export const MetricsTable: React.FC<MetricsTableProps> = React.memo((props) => {
return ( return (
<div className="flex"> <div className="flex">
<div className="w-12 text-right"> <div className="w-12 text-right">{formatNumber(val)}</div>
{millify(val, {
lowercase: true,
})}
</div>
<div className="inline-block w-12 relative border-l ml-1 px-1"> <div className="inline-block w-12 relative border-l ml-1 px-1">
<div <div
className="bg-blue-300 absolute h-full bg-opacity-25 left-0 top-0 pointer-events-none" className="bg-blue-300 absolute h-full bg-opacity-25 left-0 top-0 pointer-events-none"

8
src/client/utils/common.ts
View File

@ -1,3 +1,5 @@
import millify from 'millify';
export function parseTime(val: number) { export function parseTime(val: number) {
const days = ~~(val / 86400); const days = ~~(val / 86400);
const hours = ~~(val / 3600) - days * 24; const hours = ~~(val / 3600) - days * 24;
@ -14,8 +16,10 @@ export function parseTime(val: number) {
}; };
} }
export function formatNumber(n: number) { export function formatNumber(n: number): string {
return Number(n).toFixed(0); return millify(n, {
lowercase: true,
});
} }
export function formatShortTime(val: number, formats = ['m', 's'], space = '') { export function formatShortTime(val: number, formats = ['m', 's'], space = '') {