webui: add average dollars per hour to Dollar Usage Over Time chart
Add calculation and display of average dollars per hour rate to the
Dollar Usage Over Time chart in the web UI.
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-charts.ts b/webui/src/web-components/sketch-charts.ts
index 8cf2606..df10afc 100644
--- a/webui/src/web-components/sketch-charts.ts
+++ b/webui/src/web-components/sketch-charts.ts
@@ -76,6 +76,9 @@
this.chartData = [];
}
+ @state()
+ private dollarsPerHour: number | null = null;
+
private calculateCumulativeCostData(
messages: AgentMessage[],
): { timestamp: Date; cost: number }[] {
@@ -98,6 +101,23 @@
}
}
+ // Calculate dollars per hour if we have at least two data points
+ if (data.length >= 2) {
+ const startTime = data[0].timestamp;
+ const endTime = data[data.length - 1].timestamp;
+ const totalHours = (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60);
+ const totalCost = data[data.length - 1].cost;
+
+ // Only calculate if we have a valid time span
+ if (totalHours > 0) {
+ this.dollarsPerHour = totalCost / totalHours;
+ } else {
+ this.dollarsPerHour = null;
+ }
+ } else {
+ this.dollarsPerHour = null;
+ }
+
return data;
}
@@ -418,7 +438,7 @@
return html`
<div class="chart-container" id="chartContainer">
<div class="chart-section">
- <h3>Dollar Usage Over Time</h3>
+ <h3>Dollar Usage Over Time${this.dollarsPerHour !== null ? html` (Avg: $${this.dollarsPerHour.toFixed(2)}/hr)` : ''}</h3>
<div class="chart-content">
${this.chartData.length > 0
? html`<vega-embed .spec=${costSpec}></vega-embed>`