Improved BigNumber config and styling

matt-aitken · matt-aitken · commit e0ea0701e3fc · 2026-02-08T16:12:01.000Z
diff --git a/apps/webapp/app/components/metrics/QueryWidget.tsx b/apps/webapp/app/components/metrics/QueryWidget.tsx
@@ -59,9 +59,26 @@ const chartConfigOptions = {
 const ChartConfiguration = z.object({ ...chartConfigOptions });
 export type ChartConfiguration = z.infer<typeof ChartConfiguration>;
 
+const BigNumberAggregationType = z.union([
+  z.literal("sum"),
+  z.literal("avg"),
+  z.literal("count"),
+  z.literal("min"),
+  z.literal("max"),
+  z.literal("first"),
+  z.literal("last"),
+]);
+export type BigNumberAggregationType = z.infer<typeof BigNumberAggregationType>;
+
+const BigNumberSortDirection = z.union([z.literal("asc"), z.literal("desc")]);
+
 const bigNumberConfigOptions = {
   column: z.string(),
-  aggregation: AggregationType,
+  aggregation: BigNumberAggregationType,
+  sortDirection: BigNumberSortDirection.optional(),
+  abbreviate: z.boolean().default(false),
+  prefix: z.string().optional(),
+  suffix: z.string().optional(),
 };
 
 const BigNumberConfiguration = z.object({ ...bigNumberConfigOptions });
diff --git a/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx b/apps/webapp/app/components/primitives/charts/BigNumberCard.tsx
@@ -1,6 +1,9 @@
 import type { OutputColumnMetadata } from "@internal/tsql";
 import { useMemo } from "react";
-import type { AggregationType, BigNumberConfiguration } from "~/components/metrics/QueryWidget";
+import type {
+  BigNumberAggregationType,
+  BigNumberConfiguration,
+} from "~/components/metrics/QueryWidget";
 import { Spinner } from "../Spinner";
 import { Paragraph } from "../Paragraph";
 
@@ -12,11 +15,24 @@ interface BigNumberCardProps {
 }
 
 /**
- * Extracts numeric values from a specific column across all rows
+ * Extracts numeric values from a specific column across all rows,
+ * optionally sorting them first.
  */
-function extractColumnValues(rows: Record<string, unknown>[], column: string): number[] {
+function extractColumnValues(
+  rows: Record<string, unknown>[],
+  column: string,
+  sortDirection?: "asc" | "desc"
+): number[] {
   const values: number[] = [];
-  for (const row of rows) {
+  const sortedRows = sortDirection
+    ? [...rows].sort((a, b) => {
+        const aVal = toNumber(a[column]);
+        const bVal = toNumber(b[column]);
+        return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
+      })
+    : rows;
+
+  for (const row of sortedRows) {
     const val = row[column];
     if (typeof val === "number") {
       values.push(val);
@@ -30,10 +46,19 @@ function extractColumnValues(rows: Record<string, unknown>[], column: string): n
   return values;
 }
 
+function toNumber(value: unknown): number {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const parsed = parseFloat(value);
+    return isNaN(parsed) ? 0 : parsed;
+  }
+  return 0;
+}
+
 /**
  * Aggregate an array of numbers using the specified aggregation function
  */
-function aggregateValues(values: number[], aggregation: AggregationType): number {
+function aggregateValues(values: number[], aggregation: BigNumberAggregationType): number {
   if (values.length === 0) return 0;
   switch (aggregation) {
     case "sum":
@@ -46,49 +71,59 @@ function aggregateValues(values: number[], aggregation: AggregationType): number
       return Math.min(...values);
     case "max":
       return Math.max(...values);
+    case "first":
+      return values[0];
+    case "last":
+      return values[values.length - 1];
   }
 }
 
 /**
- * Formats a number for display as a big number.
- * Uses K/M suffixes for large values, appropriate decimal places for small values.
+ * Formats a number for display as a big number with abbreviation (K/M/B suffixes).
  */
-function formatBigNumber(value: number): { formatted: string; suffix?: string } {
+function formatBigNumberAbbreviated(value: number): { formatted: string; unitSuffix?: 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" };
+    return { formatted: v % 1 === 0 ? v.toFixed(0) : v.toFixed(1), unitSuffix: "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" };
+    return { formatted: v % 1 === 0 ? v.toFixed(0) : v.toFixed(1), unitSuffix: "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" };
+    return { formatted: v % 1 === 0 ? v.toFixed(0) : v.toFixed(1), unitSuffix: "K" };
   }
+  return { formatted: formatPlainNumber(value) };
+}
+
+/**
+ * Formats a number for display without abbreviation.
+ */
+function formatPlainNumber(value: number): string {
   if (Number.isInteger(value)) {
-    return { formatted: value.toLocaleString() };
+    return value.toLocaleString();
   }
   if (Math.abs(value) < 0.01) {
-    return { formatted: value.toFixed(4) };
+    return value.toFixed(4);
   }
   if (Math.abs(value) < 1) {
-    return { formatted: value.toFixed(3) };
+    return value.toFixed(3);
   }
-  return { formatted: value.toFixed(2) };
+  return value.toFixed(2);
 }
 
 export function BigNumberCard({ rows, columns, config, isLoading = false }: BigNumberCardProps) {
-  const { column, aggregation } = config;
+  const { column, aggregation, sortDirection, abbreviate = false, prefix, suffix } = config;
 
   const result = useMemo(() => {
     if (rows.length === 0) return null;
 
-    const values = extractColumnValues(rows, column);
+    const values = extractColumnValues(rows, column, sortDirection);
     if (values.length === 0) return null;
 
     return aggregateValues(values, aggregation);
-  }, [rows, column, aggregation]);
+  }, [rows, column, aggregation, sortDirection]);
 
   if (isLoading) {
     return (
@@ -108,14 +143,23 @@ export function BigNumberCard({ rows, columns, config, isLoading = false }: BigN
     );
   }
 
-  const { formatted, suffix } = formatBigNumber(result);
+  const { formatted, unitSuffix } = abbreviate
+    ? formatBigNumberAbbreviated(result)
+    : { formatted: formatPlainNumber(result), unitSuffix: undefined };
 
   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">
+          {prefix && <span>{prefix}</span>}
           {formatted}
-          {suffix && <div className="text-2xl text-text-dimmed">{suffix}</div>}
+          {(unitSuffix || suffix) && (
+            <div className="text-2xl text-text-dimmed">
+              {unitSuffix}
+              {unitSuffix && suffix ? " " : ""}
+              {suffix}
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/apps/webapp/app/components/query/QueryEditor.tsx b/apps/webapp/app/components/query/QueryEditor.tsx
@@ -404,7 +404,7 @@ export function QueryEditor({
     initialChartConfig ?? defaultChartConfig
   );
   const [bigNumberConfig, setBigNumberConfig] = useState<BigNumberConfiguration>(
-    initialBigNumberConfig ?? { column: "", aggregation: "sum" }
+    initialBigNumberConfig ?? { column: "", aggregation: "sum", abbreviate: true }
   );
   const [sidebarTab, setSidebarTab] = useState<string>("ai");
   const [aiFixRequest, setAiFixRequest] = useState<{ prompt: string; key: number } | null>(null);
@@ -1270,12 +1270,20 @@ function ResultsBigNumber({
   );
 }
 
-const aggregationOptions = [
+const bigNumberAggregationOptions = [
   { value: "sum", label: "Sum" },
   { value: "avg", label: "Average" },
   { value: "count", label: "Count" },
   { value: "min", label: "Min" },
   { value: "max", label: "Max" },
+  { value: "first", label: "First" },
+  { value: "last", label: "Last" },
+] as const;
+
+const bigNumberSortOptions = [
+  { value: "", label: "Unsorted" },
+  { value: "asc", label: "Ascending" },
+  { value: "desc", label: "Descending" },
 ] as const;
 
 function BigNumberConfigPanel({
@@ -1321,6 +1329,34 @@ function BigNumberConfigPanel({
             }
           </Select>
         </div>
+        <div className="flex flex-col gap-1">
+          <Paragraph variant="extra-small" className="text-text-dimmed">
+            Sort order
+          </Paragraph>
+          <Select
+            value={config.sortDirection ?? ""}
+            setValue={(value) =>
+              onChange({
+                ...config,
+                sortDirection: value === "" ? undefined : (value as "asc" | "desc"),
+              })
+            }
+            variant="tertiary/small"
+            dropdownIcon={true}
+            items={[...bigNumberSortOptions]}
+            text={(value) =>
+              bigNumberSortOptions.find((o) => o.value === value)?.label ?? "Unsorted"
+            }
+          >
+            {(items) =>
+              items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))
+            }
+          </Select>
+        </div>
         <div className="flex flex-col gap-1">
           <Paragraph variant="extra-small" className="text-text-dimmed">
             Aggregation
@@ -1332,8 +1368,10 @@ function BigNumberConfigPanel({
             }
             variant="tertiary/small"
             dropdownIcon={true}
-            items={[...aggregationOptions]}
-            text={(value) => aggregationOptions.find((o) => o.value === value)?.label ?? value}
+            items={[...bigNumberAggregationOptions]}
+            text={(value) =>
+              bigNumberAggregationOptions.find((o) => o.value === value)?.label ?? value
+            }
           >
             {(items) =>
               items.map((item) => (
@@ -1344,6 +1382,37 @@ function BigNumberConfigPanel({
             }
           </Select>
         </div>
+        <div className="flex items-center justify-between">
+          <Switch
+            label="Abbreviate large values"
+            labelPosition="right"
+            variant="small"
+            checked={config.abbreviate ?? false}
+            onCheckedChange={(checked) => onChange({ ...config, abbreviate: checked })}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <Paragraph variant="extra-small" className="text-text-dimmed">
+            Prefix
+          </Paragraph>
+          <Input
+            value={config.prefix ?? ""}
+            onChange={(e) => onChange({ ...config, prefix: e.target.value || undefined })}
+            placeholder="e.g. $"
+            variant="small"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <Paragraph variant="extra-small" className="text-text-dimmed">
+            Suffix
+          </Paragraph>
+          <Input
+            value={config.suffix ?? ""}
+            onChange={(e) => onChange({ ...config, suffix: e.target.value || undefined })}
+            placeholder="e.g. ms"
+            variant="small"
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.custom.$dashboardId/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.custom.$dashboardId/route.tsx
@@ -323,6 +323,10 @@ export default function Page() {
             ? {
                 column: state.editorMode.widget.display.column,
                 aggregation: state.editorMode.widget.display.aggregation,
+                sortDirection: state.editorMode.widget.display.sortDirection,
+                abbreviate: state.editorMode.widget.display.abbreviate,
+                prefix: state.editorMode.widget.display.prefix,
+                suffix: state.editorMode.widget.display.suffix,
               }
             : undefined;
         const editorDefaultResultsView =
