MetricCard

1"use client";
2 
3import {
4  Alert02Icon,
5  MinusSignIcon,
6  TradeDownIcon,
7  TradeUpIcon,
8} from "@hugeicons/core-free-icons";
9import { HugeiconsIcon } from "@hugeicons/react";
10import { useId } from "react";
11import type { ComponentProps, ReactNode } from "react";
12import { Area, AreaChart, XAxis, YAxis } from "recharts";
13 
14import { NeonLoader } from "@/components/neon-loader/neon-loader";
15import { Badge } from "@/components/ui/badge";
16import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
17import type { ChartConfig } from "@/components/ui/chart";
18import {
19  ChartContainer,
20  ChartTooltip,
21  ChartTooltipContent,
22} from "@/components/ui/chart";
23import { Skeleton } from "@/components/ui/skeleton";
24import { cn } from "@/lib/utils";
25 
26export type MetricFormat =
27  | "number"
28  | "bytes"
29  | "percent"
30  | "currency"
31  | "duration";
32 
33export interface MetricTrendPoint {
34  label: string;
35  value: number;
36}
37 
38const NUMBER_FORMAT = new Intl.NumberFormat("en-US");
39const CURRENCY_FORMAT = new Intl.NumberFormat("en-US", {
40  currency: "USD",
41  style: "currency",
42});
43const BYTE_UNITS = ["B", "KB", "MB", "GB", "TB", "PB"] as const;
44const BYTE_STEP = 1024;
45const SECONDS_PER_MINUTE = 60;
46const SECONDS_PER_HOUR = 3600;
47 
48const formatBytes = (bytes: number) => {
49  if (bytes === 0) {
50    return "0 B";
51  }
52 
53  const exponent = Math.min(
54    Math.floor(Math.log(Math.abs(bytes)) / Math.log(BYTE_STEP)),
55    BYTE_UNITS.length - 1
56  );
57  const value = bytes / BYTE_STEP ** exponent;
58 
59  return `${value.toFixed(value >= 100 || exponent === 0 ? 0 : 1)} ${BYTE_UNITS[exponent]}`;
60};
61 
62const formatDuration = (seconds: number) => {
63  if (seconds < SECONDS_PER_MINUTE) {
64    return `${Math.round(seconds)}s`;
65  }
66  if (seconds < SECONDS_PER_HOUR) {
67    return `${Math.floor(seconds / SECONDS_PER_MINUTE)}m ${Math.round(seconds % SECONDS_PER_MINUTE)}s`;
68  }
69 
70  return `${Math.floor(seconds / SECONDS_PER_HOUR)}h ${Math.floor((seconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE)}m`;
71};
72 
73const formatValue = (value: number | string, format: MetricFormat) => {
74  if (typeof value === "string") {
75    return value;
76  }
77 
78  switch (format) {
79    case "bytes": {
80      return formatBytes(value);
81    }
82    case "percent": {
83      return `${NUMBER_FORMAT.format(value)}%`;
84    }
85    case "currency": {
86      return CURRENCY_FORMAT.format(value);
87    }
88    case "duration": {
89      return formatDuration(value);
90    }
91    default: {
92      return NUMBER_FORMAT.format(value);
93    }
94  }
95};
96 
97// … truncated