cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add shared number formatting utilities (formatMetric, formatCount, formatPercent)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 18:43:52 +02:00
parent 605c8ad270
commit 7ec56f3bd0
2 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/components/TabKpis.tsx
View File

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
import { useGlobalFilters } from '@cameleer/design-system'; import { useGlobalFilters } from '@cameleer/design-system';
import { useExecutionStats } from '../api/queries/executions'; import { useExecutionStats } from '../api/queries/executions';
import type { Scope } from '../hooks/useScope'; import type { Scope } from '../hooks/useScope';
import { formatPercent } from '../utils/format-utils';
import styles from './TabKpis.module.css'; import styles from './TabKpis.module.css';
interface TabKpisProps { interface TabKpisProps {
@@ -20,10 +21,6 @@ function formatMs(ms: number): string {
return `${Math.round(ms)}ms`; return `${Math.round(ms)}ms`;
} }
function formatPct(pct: number): string {
return `${pct.toFixed(1)}%`;
}
type Trend = 'up' | 'down' | 'flat'; type Trend = 'up' | 'down' | 'flat';
function trend(current: number, previous: number): Trend { function trend(current: number, previous: number): Trend {
@@ -74,7 +71,7 @@ export function TabKpis({ scope }: TabKpisProps) {
return [ return [
{ label: 'Total', value: formatNum(total), trend: trend(total, prevTotal) }, { label: 'Total', value: formatNum(total), trend: trend(total, prevTotal) },
{ label: 'Err%', value: formatPct(errorRate), trend: trend(errorRate, prevErrorRate), upIsBad: true }, { label: 'Err%', value: formatPercent(errorRate), trend: trend(errorRate, prevErrorRate), upIsBad: true },
{ label: 'Avg', value: formatMs(avgMs), trend: trend(avgMs, prevAvgMs), upIsBad: true }, { label: 'Avg', value: formatMs(avgMs), trend: trend(avgMs, prevAvgMs), upIsBad: true },
{ label: 'P99', value: formatMs(p99), trend: trend(p99, prevP99), upIsBad: true }, { label: 'P99', value: formatMs(p99), trend: trend(p99, prevP99), upIsBad: true },
]; ];

17
ui/src/utils/format-utils.ts
View File

@@ -39,3 +39,20 @@ export function timeAgo(iso?: string): string {
if (hours < 24) return `${hours}h ago`; if (hours < 24) return `${hours}h ago`;
return `${Math.floor(hours / 24)}d ago`; return `${Math.floor(hours / 24)}d ago`;
} }
export function formatMetric(value: number, unit: string, decimals = 1): string {
if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(decimals)}M ${unit}`;
if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(decimals)}K ${unit}`;
if (Number.isInteger(value)) return `${value} ${unit}`;
return `${value.toFixed(decimals)} ${unit}`;
}
export function formatCount(value: number): string {
if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
return String(value);
}
export function formatPercent(value: number, decimals = 1): string {
return `${value.toFixed(decimals)}%`;
}