fix(metrics): Polish AI Edge metrics charts (#1320)

## Summary

AI Edge proxy metrics charts had uneven axes, misaligned hover
highlights, overly thin WAF bars, and toolbar controls at inconsistent
heights. This PR aligns chart styling with org usage patterns, improves
readability, and syncs cross-chart hover across requests, latency, and
WAF views.

Key behaviors:

- Y-axis ticks use linear scale math so labels match positions; stacked
bar Y max sums series correctly
- Cross-chart hover sync via shared `syncId`, step bucketing, fixed
Y-axis width, and index-based sync
- WAF events render as stacked bars with proportional bar width; latency
uses a line chart
- Metrics default to the last 30 minutes; toolbar controls share a
consistent height

<img width="1624" height="1061" alt="Screenshot 2026-06-19 at 16 58 30"
src="https://github.com/user-attachments/assets/4fd5ea04-028f-4e39-9258-cd6b5d007c88"
/>

Author: mattdjenkinson

app/features/edge/proxy/metrics/constants.ts

@@ -0,0 +1,2 @@
+/** Recharts syncId — links tooltip/cursor across AI Edge metric charts. */
+export const AI_EDGE_METRICS_SYNC_ID = 'ai-edge-proxy-metrics';

app/features/edge/proxy/metrics/edge-requests.tsx

@@ -1,4 +1,5 @@
 import { DateTime } from '@/components/date-time';
+import { AI_EDGE_METRICS_SYNC_ID } from '@/features/edge/proxy/metrics/constants';
 import {
   MetricChart,
   MetricChartTooltipContent,
@@ -76,9 +77,9 @@ export const HttpProxyEdgeRequests = ({
             chartType="area"
             showLegend={false}
             colorOverrides={RESPONSE_CODE_COLORS}
-            height={140}
-            yAxisFormatter={(value) => String(Math.round(value))}
-            yAxisOptions={{ width: 55 }}
+            padToTimeRange
+            syncId={AI_EDGE_METRICS_SYNC_ID}
+            height={200}
             onSeriesChange={setSeries}
             className="text-foreground shadow-none"
           />
@@ -101,13 +102,14 @@ export const HttpProxyEdgeRequests = ({
                 groupBy: ['le'],
               })
             }
-            chartType="area"
+            chartType="line"
             showLegend={false}
             colorOverrides={{ Series: 'var(--primary)' }}
             valueFormat="milliseconds-auto"
-            height={140}
+            padToTimeRange
+            syncId={AI_EDGE_METRICS_SYNC_ID}
+            height={200}
             yAxisFormatter={(value) => formatValue(value, 'milliseconds-auto')}
-            yAxisOptions={{ width: 55 }}
             tooltipContent={({ active, payload, label, ...props }) => {
               if (!active || !payload?.length) return null;
               const filteredPayload = payload.filter((p) => (p.value as number) > 0);

app/features/edge/proxy/metrics/waf-events.tsx

@@ -1,4 +1,5 @@
 import { DateTime } from '@/components/date-time';
+import { AI_EDGE_METRICS_SYNC_ID } from '@/features/edge/proxy/metrics/constants';
 import {
   MetricChart,
   MetricChartTooltipContent,
@@ -143,13 +144,13 @@ export const HttpProxyWafEvents = ({
             `[${step}:1m]))`
           );
         }}
-        chartType="area"
+        chartType="bar"
         showLegend={false}
         colorOverrides={OUTCOME_COLORS}
         padToTimeRange
-        height={140}
-        yAxisFormatter={(value) => String(Math.round(value))}
-        yAxisOptions={{ width: 55 }}
+        stackBars
+        syncId={AI_EDGE_METRICS_SYNC_ID}
+        height={200}
         onSeriesChange={setSeries}
         tooltipContent={({ active, payload, label, ...props }) => {
           if (!active || !payload?.length) return null;

app/modules/metrics/components/base-metric.tsx

@@ -8,7 +8,7 @@ import {
   CardTitle,
 } from '@datum-cloud/datum-ui/card';
 import { Icon } from '@datum-cloud/datum-ui/icons';
-import { AlertCircle, Minus } from 'lucide-react';
+import { AlertCircle } from 'lucide-react';
 import React from 'react';
 
 // Deterministic heights so the skeleton doesn't shift on re-render
@@ -44,13 +44,10 @@ export function BaseMetric({
   emptyState,
   height,
 }: BaseMetricProps): React.ReactElement {
-  const containerStyle = height ? { minHeight: height } : {};
+  const containerStyle = height ? { height } : {};
 
   const DefaultEmptyState = (
-    <div className="text-center">
-      <Icon icon={Minus} className="mx-auto mb-2 h-8 w-8" />
-      <p>No data available</p>
-    </div>
+    <p className="text-muted-foreground text-sm">No data recorded in this period.</p>
   );
 
   const renderContent = () => {

app/modules/metrics/components/controls/refresh-control.tsx

@@ -1,4 +1,4 @@
-import { REFRESH_OPTIONS } from '@/modules/metrics/constants';
+import { METRICS_CONTROL_HEIGHT_CLASS, REFRESH_OPTIONS } from '@/modules/metrics/constants';
 import { useMetrics } from '@/modules/metrics/context';
 import { parseDurationToMs } from '@/modules/metrics/utils/date-parsers';
 import { createMetricsParser } from '@/modules/metrics/utils/url-parsers';
@@ -12,6 +12,7 @@ import {
   SelectValue,
 } from '@datum-cloud/datum-ui/select';
 import { Tooltip } from '@datum-cloud/datum-ui/tooltip';
+import { cn } from '@datum-cloud/datum-ui/utils';
 import { useQueryClient } from '@tanstack/react-query';
 import { RefreshCw } from 'lucide-react';
 import { useQueryState } from 'nuqs';
@@ -100,14 +101,18 @@ export const RefreshControl = ({
   };
 
   return (
-    <div className="border-input bg-background flex h-[36px] items-center overflow-hidden rounded-md border shadow-none">
+    <div
+      className={cn(
+        'border-input bg-background flex items-center overflow-hidden rounded-md border shadow-none',
+        METRICS_CONTROL_HEIGHT_CLASS
+      )}>
       {/* Manual Refresh Button */}
       <Tooltip message={getTooltipText()}>
         <Button
           type="quaternary"
           theme="borderless"
           size="small"
-          className="size-9 rounded-r-none border-r"
+          className="h-full w-9 shrink-0 rounded-r-none border-r px-0"
           onClick={handleManualRefresh}
           disabled={isManualRefreshing || isAutoRefreshing}>
           <Icon

app/modules/metrics/components/controls/step-control.tsx

@@ -1,4 +1,4 @@
-import { STEP_OPTIONS } from '@/modules/metrics/constants';
+import { METRICS_CONTROL_HEIGHT_CLASS, STEP_OPTIONS } from '@/modules/metrics/constants';
 import { useMetrics } from '@/modules/metrics/context';
 import { createMetricsParser } from '@/modules/metrics/utils/url-parsers';
 import { Button } from '@datum-cloud/datum-ui/button';
@@ -9,6 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@datum-cloud/datum-ui/select';
+import { cn } from '@datum-cloud/datum-ui/utils';
 import { useQueryState } from 'nuqs';
 import { useEffect } from 'react';
 
@@ -46,7 +47,11 @@ export const StepControl = ({ filterKey = 'step', defaultValue = '15m' }: StepCo
   }, [updateUrlStateEntry, filterKey, step]);
 
   return (
-    <div className="border-input bg-background flex h-[36px] items-center overflow-hidden rounded-md border shadow-none">
+    <div
+      className={cn(
+        'border-input bg-background flex items-center overflow-hidden rounded-md border shadow-none',
+        METRICS_CONTROL_HEIGHT_CLASS
+      )}>
       <Button
         type="quaternary"
         theme="borderless"

app/modules/metrics/components/controls/time-range-control.tsx

@@ -1,4 +1,8 @@
-import { PRESET_RANGES } from '@/modules/metrics/constants';
+import {
+  DEFAULT_TIME_RANGE,
+  METRICS_CONTROL_HEIGHT_CLASS,
+  PRESET_RANGES,
+} from '@/modules/metrics/constants';
 import { useMetrics } from '@/modules/metrics/context/metrics.context';
 import {
   getPresetDateRange,
@@ -9,14 +13,22 @@ import { createMetricsParser } from '@/modules/metrics/utils/url-parsers';
 import { useApp } from '@/providers/app.provider';
 import type { PresetConfig, TimeRangeValue } from '@datum-cloud/datum-ui/date-picker';
 import { TimeRangePicker, getBrowserTimezone } from '@datum-cloud/datum-ui/date-picker';
+import { cn } from '@datum-cloud/datum-ui/utils';
 import { useQueryState } from 'nuqs';
 import { useCallback, useEffect, useMemo } from 'react';
 
 /** Metrics presets as PresetConfig for the datum-ui TimeRangePicker */
 const METRICS_PRESETS: PresetConfig[] = PRESET_RANGES.map((p, i) => ({
   key: p.value,
   label: p.label,
-  shortcut: p.value === 'now-7d' ? 'w' : p.value === 'now-24h' ? 'd' : String(i + 1),
+  shortcut:
+    p.value === 'now-7d'
+      ? 'w'
+      : p.value === 'now-1h'
+        ? 'h'
+        : p.value === 'now-24h'
+          ? 'd'
+          : String(i + 1),
   getRange: (timezone: string) => getPresetDateRange(p.value, timezone),
 }));
 
@@ -65,7 +77,7 @@ export interface TimeRangeControlProps {
   filterKey?: string;
   /**
    * Default time range value when no URL state exists.
-   * Defaults to 'now-24h'.
+   * Defaults to {@link DEFAULT_TIME_RANGE} (`now-30m`).
    */
   defaultValue?: string;
 }
@@ -76,7 +88,7 @@ export interface TimeRangeControlProps {
  */
 export const TimeRangeControl = ({
   filterKey = 'timeRange',
-  defaultValue = 'now-24h',
+  defaultValue = DEFAULT_TIME_RANGE,
 }: TimeRangeControlProps) => {
   const { registerUrlState, updateUrlStateEntry } = useMetrics();
   const { userPreferences } = useApp();
@@ -125,7 +137,7 @@ export const TimeRangeControl = ({
       disableFuture
       placeholder="Select time range"
       align="start"
-      className="w-full sm:w-auto"
+      className={cn('w-full sm:w-auto', METRICS_CONTROL_HEIGHT_CLASS, 'py-0 text-sm')}
     />
   );
 };