WIP adding BigNumber chart type

Author: matt-aitken

apps/webapp/app/components/metrics/QueryWidget.tsx

@@ -5,6 +5,7 @@ import { z } from "zod";
 import { assertNever } from "assert-never";
 import { TSQLResultsTable } from "../code/TSQLResultsTable";
 import { QueryResultsChart } from "../code/QueryResultsChart";
+import { BigNumberCard } from "../primitives/charts/BigNumberCard";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "../primitives/Dialog";
 import { Button } from "../primitives/Buttons";
 import {
@@ -58,6 +59,14 @@ const chartConfigOptions = {
 const ChartConfiguration = z.object({ ...chartConfigOptions });
 export type ChartConfiguration = z.infer<typeof ChartConfiguration>;
 
+const bigNumberConfigOptions = {
+  column: z.string(),
+  aggregation: AggregationType,
+};
+
+const BigNumberConfiguration = z.object({ ...bigNumberConfigOptions });
+export type BigNumberConfiguration = z.infer<typeof BigNumberConfiguration>;
+
 export const QueryWidgetConfig = z.discriminatedUnion("type", [
   z.object({
     type: z.literal("table"),
@@ -75,6 +84,10 @@ export const QueryWidgetConfig = z.discriminatedUnion("type", [
     type: z.literal("chart"),
     ...chartConfigOptions,
   }),
+  z.object({
+    type: z.literal("bignumber"),
+    ...bigNumberConfigOptions,
+  }),
 ]);
 
 export type QueryWidgetConfig = z.infer<typeof QueryWidgetConfig>;
@@ -339,6 +352,31 @@ function QueryWidgetBody({
         </>
       );
     }
+    case "bignumber": {
+      return (
+        <>
+          <BigNumberCard
+            rows={data.rows}
+            columns={data.columns}
+            config={config}
+            isLoading={isLoading}
+          />
+          <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
+            <DialogContent fullscreen>
+              <DialogHeader>{title}</DialogHeader>
+              <div className="flex h-full min-h-0 w-full flex-1 items-center justify-center pt-4">
+                <BigNumberCard
+                  rows={data.rows}
+                  columns={data.columns}
+                  config={config}
+                  isLoading={isLoading}
+                />
+              </div>
+            </DialogContent>
+          </Dialog>
+        </>
+      );
+    }
     default: {
       assertNever(type);
     }

apps/webapp/app/components/primitives/ClientTabs.tsx

@@ -190,7 +190,8 @@ const ClientTabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "ring-offset-background focus-visible:ring-ring mt-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-      className
+      className,
+      "data-[state=inactive]:hidden"
     )}
     {...props}
   />

apps/webapp/app/components/primitives/charts/BigNumber.tsx

@@ -0,0 +1,123 @@
+import type { OutputColumnMetadata } from "@internal/tsql";
+import { useMemo } from "react";
+import type { AggregationType, BigNumberConfiguration } from "~/components/metrics/QueryWidget";
+import { Spinner } from "../Spinner";
+import { Paragraph } from "../Paragraph";
+
+interface BigNumberCardProps {
+  rows: Record<string, unknown>[];
+  columns: OutputColumnMetadata[];
+  config: BigNumberConfiguration;
+  isLoading?: boolean;
+}
+
+/**
+ * Extracts numeric values from a specific column across all rows
+ */
+function extractColumnValues(rows: Record<string, unknown>[], column: string): number[] {
+  const values: number[] = [];
+  for (const row of rows) {
+    const val = row[column];
+    if (typeof val === "number") {
+      values.push(val);
+    } else if (typeof val === "string") {
+      const parsed = parseFloat(val);
+      if (!isNaN(parsed)) {
+        values.push(parsed);
+      }
+    }
+  }
+  return values;
+}
+
+/**
+ * Aggregate an array of numbers using the specified aggregation function
+ */
+function aggregateValues(values: number[], aggregation: AggregationType): number {
+  if (values.length === 0) return 0;
+  switch (aggregation) {
+    case "sum":
+      return values.reduce((a, b) => a + b, 0);
+    case "avg":
+      return values.reduce((a, b) => a + b, 0) / values.length;
+    case "count":
+      return values.length;
+    case "min":
+      return Math.min(...values);
+    case "max":
+      return Math.max(...values);
+  }
+}
+
+/**
+ * Formats a number for display as a big number.
+ * Uses K/M suffixes for large values, appropriate decimal places for small values.
+ */
+function formatBigNumber(value: number): { formatted: string; suffix?: string } {
+  if (Math.abs(value) >= 1_000_000_000) {
+    const v = value / 1_000_000_000;
+    return { formatted: v % 1 === 0 ? v.toFixed(0) : v.toFixed(1), suffix: "B" };
+  }
+  if (Math.abs(value) >= 1_000_000) {
+    const v = value / 1_000_000;
+    return { formatted: v % 1 === 0 ? v.toFixed(0) : v.toFixed(1), suffix: "M" };
+  }
+  if (Math.abs(value) >= 1_000) {
+    const v = value / 1_000;
+    return { formatted: v % 1 === 0 ? v.toFixed(0) : v.toFixed(1), suffix: "K" };
+  }
+  if (Number.isInteger(value)) {
+    return { formatted: value.toLocaleString() };
+  }
+  if (Math.abs(value) < 0.01) {
+    return { formatted: value.toFixed(4) };
+  }
+  if (Math.abs(value) < 1) {
+    return { formatted: value.toFixed(3) };
+  }
+  return { formatted: value.toFixed(2) };
+}
+
+export function BigNumberCard({ rows, columns, config, isLoading = false }: BigNumberCardProps) {
+  const { column, aggregation } = config;
+
+  const result = useMemo(() => {
+    if (rows.length === 0) return null;
+
+    const values = extractColumnValues(rows, column);
+    if (values.length === 0) return null;
+
+    return aggregateValues(values, aggregation);
+  }, [rows, column, aggregation]);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center p-6">
+        <Spinner className="size-6" />
+      </div>
+    );
+  }
+
+  if (result === null) {
+    return (
+      <div className="flex h-full items-center justify-center p-6">
+        <Paragraph variant="small" className="text-text-dimmed">
+          No data to display
+        </Paragraph>
+      </div>
+    );
+  }
+
+  const { formatted, suffix } = formatBigNumber(result);
+
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <div className="text-[3.75rem] font-normal tabular-nums leading-none text-text-bright">
+        <div className="flex items-baseline gap-1">
+          {formatted}
+          {suffix && <div className="text-2xl text-text-dimmed">{suffix}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}