+
Spend over time
+
Model-attributed spend per time bucket.
+
+ {props.loading ? (
+
+
+
+ ) : rows.length === 0 ? (
+
+ No spend data for the selected filters.
+
+ ) : (
+
+
+
+
+
+ formatUsd(Number(value))}
+ width={64}
+ stroke="var(--color-border-light)"
+ />
+ formatBucketLabel(String(value))}
+ formatter={(value: number, key: string) => [formatUsd(Number(value)), key]}
+ cursor={{ fill: "var(--color-hover)" }}
+ contentStyle={{
+ borderColor: "var(--color-border-medium)",
+ backgroundColor: "var(--color-background-secondary)",
+ borderRadius: "8px",
+ }}
+ />
+
+ {models.map((model, index) => (
+
+ ))}
+
+
+
+ )}
+
+
+
+
Timing distribution
+
{METRIC_LABELS[props.metric].description}
+
+
+ {(Object.keys(METRIC_LABELS) as TimingMetric[]).map((metric) => (
+
+ ))}
+
+
+
+ {props.error ? (
+
+ Failed to load timing distribution: {props.error}
+
+ ) : props.loading ? (
+
+
+
+ ) : !props.data || props.data.histogram.length === 0 ? (
+
+ No timing data available yet.
+
+ ) : (
+
+
+
+
+ formatMetricValue(Number(value), props.metric)}
+ stroke="var(--color-border-light)"
+ />
+
+ formatMetricValue(Number(value), props.metric)}
+ formatter={(value: number) => [value, "Responses"]}
+ contentStyle={{
+ borderColor: "var(--color-border-medium)",
+ backgroundColor: "var(--color-background-secondary)",
+ borderRadius: "8px",
+ }}
+ />
+
+
+
+
+
+
+
+ )}
+
+ {!props.loading && !props.error && props.data && (
+
+
+ p50:{" "}
+ {formatMetricValue(props.data.p50, props.metric)}
+
+
+ p90:{" "}
+ {formatMetricValue(props.data.p90, props.metric)}
+
+
+ p99:{" "}
+ {formatMetricValue(props.data.p99, props.metric)}
+
+
+ )}
+