ai-heatmap 1.7.1 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/App.css +32 -0
- package/src/App.tsx +26 -0
package/package.json
CHANGED
package/src/App.css
CHANGED
|
@@ -52,6 +52,38 @@ code {
|
|
|
52
52
|
font-size: 0.85em;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
.stats {
|
|
56
|
+
display: flex;
|
|
57
|
+
gap: 2rem;
|
|
58
|
+
margin-top: 1.5rem;
|
|
59
|
+
padding: 1rem 0;
|
|
60
|
+
border-top: 1px solid #d0d7de;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[data-color-scheme="dark"] .stats {
|
|
64
|
+
border-top-color: #30363d;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.stat-item {
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-direction: column;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.stat-value {
|
|
73
|
+
font-size: 1.2rem;
|
|
74
|
+
font-weight: 700;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.stat-label {
|
|
78
|
+
font-size: 0.75rem;
|
|
79
|
+
color: #666;
|
|
80
|
+
margin-top: 2px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
[data-color-scheme="dark"] .stat-label {
|
|
84
|
+
color: #8b949e;
|
|
85
|
+
}
|
|
86
|
+
|
|
55
87
|
.params-help {
|
|
56
88
|
margin-top: 2rem;
|
|
57
89
|
font-size: 0.85rem;
|
package/src/App.tsx
CHANGED
|
@@ -169,7 +169,12 @@ export default function App() {
|
|
|
169
169
|
return true;
|
|
170
170
|
});
|
|
171
171
|
|
|
172
|
+
const activeDays = filtered.filter((d) => d.count > 0);
|
|
172
173
|
const totalCost = filtered.reduce((s, d) => s + d.count, 0);
|
|
174
|
+
const dailyAvg = activeDays.length ? totalCost / activeDays.length : 0;
|
|
175
|
+
const weeks = Math.max(1, Math.ceil(filtered.length / 7));
|
|
176
|
+
const weeklyAvg = totalCost / weeks;
|
|
177
|
+
const peak = activeDays.reduce((max, d) => (d.count > max.count ? d : max), activeDays[0]);
|
|
173
178
|
const firstYear = filtered[0]?.date.slice(0, 4);
|
|
174
179
|
const lastYear = filtered[filtered.length - 1]?.date.slice(0, 4);
|
|
175
180
|
const yearLabel = firstYear === lastYear ? firstYear : `${firstYear}~${lastYear}`;
|
|
@@ -225,6 +230,27 @@ export default function App() {
|
|
|
225
230
|
/>
|
|
226
231
|
<ReactTooltip id="heatmap-tooltip" />
|
|
227
232
|
|
|
233
|
+
{activeDays.length > 0 && (
|
|
234
|
+
<div className="stats">
|
|
235
|
+
<div className="stat-item">
|
|
236
|
+
<span className="stat-value">{formatUSD(dailyAvg)}</span>
|
|
237
|
+
<span className="stat-label">Daily Avg</span>
|
|
238
|
+
</div>
|
|
239
|
+
<div className="stat-item">
|
|
240
|
+
<span className="stat-value">{formatUSD(weeklyAvg)}</span>
|
|
241
|
+
<span className="stat-label">Weekly Avg</span>
|
|
242
|
+
</div>
|
|
243
|
+
<div className="stat-item">
|
|
244
|
+
<span className="stat-value">{formatUSD(peak?.count ?? 0)}</span>
|
|
245
|
+
<span className="stat-label">Peak ({peak?.date})</span>
|
|
246
|
+
</div>
|
|
247
|
+
<div className="stat-item">
|
|
248
|
+
<span className="stat-value">{activeDays.length}</span>
|
|
249
|
+
<span className="stat-label">Active Days</span>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
)}
|
|
253
|
+
|
|
228
254
|
<details className="params-help">
|
|
229
255
|
<summary>Query Parameters</summary>
|
|
230
256
|
<table>
|