Abbreviate big numbers (2100 -> 2.1K) (#52)

* Human-readable output numbers (e.g. 1.7k instead of 1700)

* Format table card numbers

app/components/TableCard.tsx

@@ -32,6 +32,8 @@ export default function TableCard({
  const barChartPercentages = calculateCountPercentages(
  countByProperty as CountByProperty,
  );
+
+ const countFormatter = Intl.NumberFormat("en", { notation: "compact" });
  return (
  <Card>
  <Table>
@@ -63,12 +65,12 @@ export default function TableCard({
  </TableCell>
 
  <TableCell className="text-right w-1/5">
- {item[1]}
+ {countFormatter.format(item[1] as number)}
  </TableCell>
 
  {item.length > 2 && (
  <TableCell className="text-right w-1/5">
- {item[2]}
+ {countFormatter.format(item[2] as number)}
  </TableCell>
  )}
  </TableRow>

app/routes/dashboard.test.tsx

@@ -315,7 +315,7 @@ describe("Dashboard route", () => {
  const defaultMockedLoaderJson = {
  siteId: "example",
  sites: ["example"],
- views: 100,
+ views: 2133,
  visits: 80,
  visitors: 33,
  countByPath: [
@@ -375,7 +375,9 @@ describe("Dashboard route", () => {
  await waitFor(() => screen.findByText("Chrome"));
 
  // assert some of the data we mocked actually rendered into the document
- expect(screen.getByText("33")).toBeInTheDocument();
+ expect(screen.getByText("2.1K")).toBeInTheDocument(); // view count
+ expect(screen.getByText("33")).toBeInTheDocument(); // visitor count
+
  expect(screen.getByText("/about")).toBeInTheDocument();
  expect(screen.getByText("Chrome")).toBeInTheDocument();
  expect(screen.getByText("google.com")).toBeInTheDocument();

app/routes/dashboard.tsx

@@ -179,6 +179,8 @@ export default function Dashboard() {
 
  const countByCountryName = convertCountryCodesToNames(data.countByCountry);
 
+ const countFormatter = Intl.NumberFormat("en", { notation: "compact" });
+
  return (
  <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
  <div className="w-full mb-4 flex gap-4">
@@ -228,17 +230,23 @@ export default function Dashboard() {
  <div className="grid grid-cols-3 gap-10 items-end">
  <div>
  <div className="text-sm sm:text-lg">Views</div>
- <div className="text-4xl">{data.views}</div>
+ <div className="text-4xl">
+ {countFormatter.format(data.views)}
+ </div>
  </div>
  <div>
  <div className="text-sm sm:text-lg">Visits</div>
- <div className="text-4xl">{data.visits}</div>
+ <div className="text-4xl">
+ {countFormatter.format(data.visits)}
+ </div>
  </div>
  <div>
  <div className="text-sm sm:text-lg">
  Visitors
  </div>
- <div className="text-4xl">{data.visitors}</div>
+ <div className="text-4xl">
+ {countFormatter.format(data.visitors)}
+ </div>
  </div>
  </div>
  </CardContent>