metrics: Chart MRR and ARR side by side

Yopi · Yopi · commit 3fce8513df5e · 2026-03-31T15:59:04.000+02:00
diff --git a/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/analytics/costs/CostsPage.tsx b/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/analytics/costs/CostsPage.tsx
@@ -262,7 +262,7 @@ export default function ClientPage({
     endDate: dateRange.to,
     interval: 'day',
     organization_id: organization.id,
-    metrics: costMetrics as string[],
+    metrics: costMetrics,
     ...(customerIds && customerIds.length > 0
       ? { customer_id: customerIds }
       : {}),
diff --git a/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/analytics/metrics/[metric]/ClientPage.tsx b/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/analytics/metrics/[metric]/ClientPage.tsx
@@ -80,7 +80,7 @@ export default function ClientPage({
     interval,
     organization_id: organizationId,
     ...(productId && productId.length > 0 ? { product_id: productId } : {}),
-    metrics,
+    metrics: metrics,
   })
 
   if (!data) {
@@ -99,7 +99,11 @@ export default function ClientPage({
           productId={productId ?? undefined}
         />
       ) : (
-        <MetricGroup metricKeys={metrics} data={data} interval={interval} />
+        <MetricGroup
+          metricKeys={metrics}
+          data={data}
+          interval={interval}
+        />
       )}
     </div>
   )
diff --git a/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/analytics/metrics/components/MetricGroup.tsx b/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/analytics/metrics/components/MetricGroup.tsx
@@ -5,10 +5,11 @@ import { ParsedMetricsResponse } from '@/hooks/queries'
 import { schemas } from '@polar-sh/client'
 import { useRef, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
+import { MetricEntry } from './metrics-config'
 
 interface MetricGroupProps {
   data?: ParsedMetricsResponse
-  metricKeys: (keyof schemas['Metrics'])[]
+  metricKeys: MetricEntry[]
   interval: schemas['TimeInterval']
   loading?: boolean
 }
@@ -29,32 +30,37 @@ export function MetricGroup({
     <div className="flex flex-col gap-y-6">
       <div className="dark:border-polar-700 flex flex-col overflow-hidden rounded-2xl border border-gray-200">
         <div className="grid grid-cols-1 flex-col [clip-path:inset(1px_1px_1px_1px)] md:grid-cols-2 lg:grid-cols-3">
-          {metricKeys.map((metricKey, index) => (
-            <MetricChartBox
-              key={String(metricKey)}
-              data={data}
-              interval={interval}
-              metric={metricKey}
-              height={200}
-              chartType="line"
-              loading={loading}
-              hoveredPeriodIndex={hoveredPeriodIndex}
-              onHoverPeriodChange={(period) => {
-                if (period !== null) {
-                  activeHoverKey.current = String(metricKey)
-                  setHoveredPeriodIndex(period)
-                } else if (activeHoverKey.current === String(metricKey)) {
-                  activeHoverKey.current = null
-                  setHoveredPeriodIndex(null)
-                }
-              }}
-              className={twMerge(
-                'rounded-none! bg-transparent dark:bg-transparent',
-                index === 0 && 'lg:col-span-2',
-                'dark:border-polar-700 border-t-0 border-r border-b border-l-0 border-gray-200 shadow-none',
-              )}
-            />
-          ))}
+          {metricKeys.map((entry, index) => {
+            const keys = Array.isArray(entry) ? entry : [entry]
+            const primaryKey = keys[0]
+            return (
+              <MetricChartBox
+                key={String(primaryKey)}
+                data={data}
+                interval={interval}
+                metric={primaryKey}
+                metrics={keys.length > 1 ? keys : undefined}
+                height={200}
+                chartType="line"
+                loading={loading}
+                hoveredPeriodIndex={hoveredPeriodIndex}
+                onHoverPeriodChange={(period) => {
+                  if (period !== null) {
+                    activeHoverKey.current = String(primaryKey)
+                    setHoveredPeriodIndex(period)
+                  } else if (activeHoverKey.current === String(primaryKey)) {
+                    activeHoverKey.current = null
+                    setHoveredPeriodIndex(null)
+                  }
+                }}
+                className={twMerge(
+                  'rounded-none! bg-transparent dark:bg-transparent',
+                  index === 0 && 'lg:col-span-2',
+                  'dark:border-polar-700 border-t-0 border-r border-b border-l-0 border-gray-200 shadow-none',
+                )}
+              />
+            )
+          })}
         </div>
       </div>
     </div>
diff --git a/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/analytics/metrics/components/metrics-config.ts b/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/analytics/metrics/components/metrics-config.ts
@@ -16,9 +16,13 @@ export function isValidMetricType(value: string): value is MetricType {
   return METRIC_TYPES.includes(value as MetricType)
 }
 
-const SUBSCRIPTION_METRICS: (keyof schemas['Metrics'])[] = [
-  'monthly_recurring_revenue',
-  'committed_monthly_recurring_revenue',
+export type MetricEntry =
+  | keyof schemas['Metrics']
+  | (keyof schemas['Metrics'])[]
+
+const SUBSCRIPTION_METRICS: MetricEntry[] = [
+  ['monthly_recurring_revenue', 'committed_monthly_recurring_revenue'],
+  ['annual_recurring_revenue', 'committed_annual_recurring_revenue'],
   'active_subscriptions',
   'new_subscriptions',
   'committed_subscriptions',
@@ -96,7 +100,7 @@ export function getMetricsForType(
     hasRecurringProducts?: boolean
     hasOneTimeProducts?: boolean
   },
-): (keyof schemas['Metrics'])[] {
+): MetricEntry[] {
   switch (metricType) {
     case 'subscriptions':
       return SUBSCRIPTION_METRICS
diff --git a/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/customers/[customerId]/meter/[meterId]/CustomerMeterPage.tsx b/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/customers/[customerId]/meter/[meterId]/CustomerMeterPage.tsx
@@ -267,11 +267,13 @@ const CustomerMeterPage = ({
               }
               interval={interval}
               height={300}
-              metric={{
-                slug: 'quantity',
-                display_name: meter.name,
-                type: 'scalar',
-              }}
+              metrics={[
+                {
+                  slug: 'quantity',
+                  display_name: meter.name,
+                  type: 'scalar',
+                },
+              ]}
               showYAxis
               chartType={meter.aggregation.func === 'count' ? 'bar' : 'line'}
             />
diff --git a/clients/apps/web/src/components/Customer/CustomerMeter.tsx b/clients/apps/web/src/components/Customer/CustomerMeter.tsx
@@ -120,11 +120,13 @@ export const CustomerMeter = ({
           data={quantities as unknown as ParsedMetricPeriod[]}
           interval="day"
           height={250}
-          metric={{
-            slug: 'quantity',
-            display_name: meter.name,
-            type: 'scalar',
-          }}
+          metrics={[
+            {
+              slug: 'quantity',
+              display_name: meter.name,
+              type: 'scalar',
+            },
+          ]}
           showYAxis
           chartType={meter.aggregation.func === 'count' ? 'bar' : 'line'}
         />
diff --git a/clients/apps/web/src/components/Meter/MeterPage.tsx b/clients/apps/web/src/components/Meter/MeterPage.tsx
@@ -130,11 +130,13 @@ export const MeterPage = ({
                   }
                   interval={interval}
                   height={400}
-                  metric={{
-                    slug: 'quantity',
-                    display_name: meter.name,
-                    type: 'scalar',
-                  }}
+                  metrics={[
+                    {
+                      slug: 'quantity',
+                      display_name: meter.name,
+                      type: 'scalar',
+                    },
+                  ]}
                   chartType={
                     meter.aggregation.func === 'count' ? 'bar' : 'line'
                   }
diff --git a/clients/apps/web/src/components/Metrics/MetricChart.tsx b/clients/apps/web/src/components/Metrics/MetricChart.tsx
@@ -11,7 +11,7 @@ interface MetricChartProps {
   data: ParsedMetricPeriod[]
   previousData?: ParsedMetricPeriod[]
   interval: schemas['TimeInterval']
-  metric: schemas['Metric']
+  metrics: schemas['Metric'][]
   height?: number
   width?: number
   grid?: boolean
@@ -27,7 +27,7 @@ const MetricChart = ({
   data,
   previousData,
   interval,
-  metric,
+  metrics,
   height,
   width,
   grid,
@@ -42,40 +42,50 @@ const MetricChart = ({
 
   const genericData = useMemo(
     () =>
-      data.map((period, index) => ({
-        timestamp: period.timestamp.toISOString(),
-        current:
-          period[metric.slug as keyof Omit<ParsedMetricPeriod, 'timestamp'>],
-        ...(previousData && previousData[index]
-          ? {
-              previous:
-                previousData[index][
-                  metric.slug as keyof Omit<ParsedMetricPeriod, 'timestamp'>
-                ],
-            }
-          : {}),
-      })),
-    [data, previousData, metric.slug],
+      data.map((period, index) => {
+        const point: Record<string, unknown> = {
+          timestamp: period.timestamp.toISOString(),
+        }
+        for (const m of metrics) {
+          point[m.slug] =
+            period[m.slug as keyof Omit<ParsedMetricPeriod, 'timestamp'>]
+        }
+        if (metrics.length === 1 && previousData?.[index]) {
+          point['previous'] =
+            previousData[index][
+              metrics[0].slug as keyof Omit<ParsedMetricPeriod, 'timestamp'>
+            ]
+        }
+        return point
+      }),
+    [data, previousData, metrics],
   )
 
   const series = useMemo(
-    () => [
-      ...(previousData
-        ? [
+    () =>
+      metrics.length > 1
+        ? metrics.map((m, i) => ({
+            key: m.slug,
+            label: m.display_name,
+            color: i === 0 ? '#2563eb' : isDark ? '#383942' : '#ccc',
+          }))
+        : [
+            ...(previousData
+              ? [
+                  {
+                    key: 'previous',
+                    label: 'Previous Period',
+                    color: isDark ? '#383942' : '#ccc',
+                  },
+                ]
+              : []),
             {
-              key: 'previous',
-              label: 'Previous Period',
-              color: isDark ? '#383942' : '#ccc',
+              key: metrics[0].slug,
+              label: 'Current Period',
+              color: '#2563eb',
             },
-          ]
-        : []),
-      {
-        key: 'current',
-        label: 'Current Period',
-        color: '#2563eb',
-      },
-    ],
-    [previousData, isDark],
+          ],
+    [metrics, previousData, isDark],
   )
 
   const timestampFormatter = useMemo(() => {
@@ -85,8 +95,8 @@ const MetricChart = ({
   }, [interval])
 
   const valueFormatter = useMemo(
-    () => (value: number) => getFormattedMetricValue(metric, value),
-    [metric],
+    () => (value: number) => getFormattedMetricValue(metrics[0], value),
+    [metrics],
   )
 
   const ticks = useMemo((): AxisTick[] | undefined => {
diff --git a/clients/apps/web/src/components/Metrics/MetricChartBox.tsx b/clients/apps/web/src/components/Metrics/MetricChartBox.tsx
@@ -36,6 +36,7 @@ interface MetricOption {
 
 interface MetricChartBoxProps {
   metric: keyof schemas['Metrics']
+  metrics?: (keyof schemas['Metrics'])[]
   onMetricChange?: (metric: keyof schemas['Metrics']) => void
   data?: ParsedMetricsResponse
   previousData?: ParsedMetricsResponse
@@ -69,6 +70,7 @@ const EXPERIMENTAL_METRICS: Record<string, { tooltip: string }> = {
 const MetricChartBox = ({
   ref,
   metric,
+  metrics: metricsProp,
   onMetricChange,
   data,
   previousData,
@@ -107,6 +109,13 @@ const MetricChartBox = ({
   }, [previousData])
 
   const selectedMetric = useMemo(() => data?.metrics[metric], [data, metric])
+  const resolvedMetrics = useMemo(() => {
+    if (!data) return []
+    const keys = metricsProp ?? [metric]
+    return keys
+      .map((k) => data.metrics[k])
+      .filter((m): m is schemas['Metric'] => m != null)
+  }, [data, metric, metricsProp])
   const [hoveredPeriodIndexLocal, setHoveredPeriodIndexLocal] = React.useState<
     number | null
   >(null)
@@ -344,14 +353,14 @@ const MetricChartBox = ({
             style={{ height }}
             className="flex flex-col items-center justify-center"
           />
-        ) : data && selectedMetric ? (
+        ) : data && resolvedMetrics.length > 0 ? (
           <MetricChart
             height={height}
             width={width}
             data={data.periods}
             previousData={previousData?.periods}
             interval={interval}
-            metric={selectedMetric}
+            metrics={resolvedMetrics}
             onDataIndexHover={handleDataIndexHover}
             simple={simple}
             chartType={chartType}
diff --git a/clients/apps/web/src/hooks/queries/metrics.ts b/clients/apps/web/src/hooks/queries/metrics.ts
diff --git a/clients/packages/client/src/v1.ts b/clients/packages/client/src/v1.ts
