The Statistics Widget (or stat card) is designed to highlight your most important metrics in a clean, bold format. Itโ€™s ideal for surfacing KPIs, real-time values, or summary statistics at a glance.


๐Ÿ“Œ Use Cases

  • Display total signups, revenue, or active users
  • Show conversion rates, success percentages, or API error counts
  • Track live values on operational dashboards

๐Ÿ› ๏ธ How to Add a Stat Card

Example:

WITH
	parseDateTimeBestEffort('{{filter.timeLimit.start}}') AS start_time,
	parseDateTimeBestEffort('{{filter.timeLimit.end}}') AS end_time,
	(end_time - start_time) AS duration,
	(start_time - duration) AS prev_start_time,
	(end_time - duration) AS prev_end_time\n\nSELECT
	round(sumIf(toFloat64OrZero(SpanAttributes['gen_ai.usage.cost']),
	    Timestamp >= start_time AND Timestamp <= end_time), 7) AS total_usage_cost,\n
	round(sumIf(toFloat64OrZero(SpanAttributes['gen_ai.usage.cost']),
	    Timestamp >= prev_start_time AND Timestamp <= prev_end_time), 7) AS total_usage_cost_previous,\n
	round(
	    if(
	        sumIf(toFloat64OrZero(SpanAttributes['gen_ai.usage.cost']),
	            Timestamp >= prev_start_time AND Timestamp <= prev_end_time) = 0,
	        sumIf(toFloat64OrZero(SpanAttributes['gen_ai.usage.cost']),
	            Timestamp >= start_time AND Timestamp <= end_time) * 100.0,
	        (
	            sumIf(toFloat64OrZero(SpanAttributes['gen_ai.usage.cost']),
	                Timestamp >= start_time AND Timestamp <= end_time)
	            -
	            sumIf(toFloat64OrZero(SpanAttributes['gen_ai.usage.cost']),
	                Timestamp >= prev_start_time AND Timestamp <= prev_end_time)
	        )
	        /
	        sumIf(toFloat64OrZero(SpanAttributes['gen_ai.usage.cost']),
	            Timestamp >= prev_start_time AND Timestamp <= prev_end_time) * 100.0
	    ), 4
	) AS rate\nFROM otel_traces\nWHERE
	SpanAttributes['gen_ai.operation.name'] != 'vectordb'
	AND StatusCode IN ('STATUS_CODE_OK', 'STATUS_CODE_UNSET', 'Ok', 'Unset')
	AND Timestamp >= prev_start_time AND Timestamp <= end_time\n

โš™๏ธ Configuration Options

  • Set prefix/suffix (e.g. $, %, ms)
  • Choose colors
  • Add trend indicators

Use dynamic filters like {{filter.timeLimit.start}}, {{filter.timeLimit.end}} to make the stat card responsive to dashboard-level controls.


โœ… Best Practices

  • Combine stat cards with charts for more context
  • Use consistent units (e.g., %, $, MB)
  • Avoid overloading the dashboard with too many KPIsโ€”focus on what matters