ccusage-ui 0.1.0 → 0.1.1
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/README.md +47 -0
- package/package.json +1 -1
- package/public/index.html +8 -6
package/README.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# ccusage-ui
|
|
2
|
+
|
|
3
|
+
Web UI dashboard for [Claude Code](https://claude.ai/code) usage statistics.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Quick Start
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npx ccusage-ui
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Or install globally:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install -g ccusage-ui
|
|
18
|
+
ccusage-ui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Features
|
|
22
|
+
|
|
23
|
+
- Daily/Monthly usage trend charts
|
|
24
|
+
- Model breakdown visualization
|
|
25
|
+
- Token usage and cost tracking
|
|
26
|
+
- User level tier display
|
|
27
|
+
|
|
28
|
+
## Requirements
|
|
29
|
+
|
|
30
|
+
- Node.js >= 20
|
|
31
|
+
- [Claude Code](https://claude.ai/code) usage data
|
|
32
|
+
|
|
33
|
+
## Related
|
|
34
|
+
|
|
35
|
+
- [ccusage](https://github.com/ryoppippi/ccusage) - CLI tool for Claude Code usage
|
|
36
|
+
|
|
37
|
+
## Author
|
|
38
|
+
|
|
39
|
+
**Doha Park** - [sowonlabs.com](https://www.sowonlabs.com)
|
|
40
|
+
|
|
41
|
+
[](https://x.com/dohapark81)
|
|
42
|
+
[](https://www.threads.com/@dohapark81)
|
|
43
|
+
[](https://www.linkedin.com/in/dohapark81/)
|
|
44
|
+
|
|
45
|
+
## License
|
|
46
|
+
|
|
47
|
+
MIT
|
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
<div id="loading">
|
|
227
227
|
<div class="spinner"></div>
|
|
228
228
|
<div class="loading-text">Analyzing Usage Data...</div>
|
|
229
|
-
<div class="loading-sub">
|
|
229
|
+
<div class="loading-sub">This may take a few minutes on first load</div>
|
|
230
230
|
</div>
|
|
231
231
|
|
|
232
232
|
<div class="container" id="dashboard" style="display: none; opacity: 0; transition: opacity 0.5s;">
|
|
@@ -344,8 +344,8 @@
|
|
|
344
344
|
dashboard.style.opacity = '0'; // Fade out dashboard while reloading
|
|
345
345
|
|
|
346
346
|
try {
|
|
347
|
-
statusText.textContent = force ? "Refreshing Data..." : "
|
|
348
|
-
subText.textContent = force ? "
|
|
347
|
+
statusText.textContent = force ? "Refreshing Data..." : "Analyzing Usage Data...";
|
|
348
|
+
subText.textContent = force ? "This may take a few minutes..." : "This may take a few minutes on first load";
|
|
349
349
|
|
|
350
350
|
const query = force ? '?force=true' : '';
|
|
351
351
|
|
|
@@ -429,7 +429,9 @@
|
|
|
429
429
|
const ctx = document.getElementById('trendChart').getContext('2d');
|
|
430
430
|
if (trendChart) trendChart.destroy();
|
|
431
431
|
|
|
432
|
-
const dataSrc = currentView === 'daily'
|
|
432
|
+
const dataSrc = currentView === 'daily'
|
|
433
|
+
? [...dailyData].sort((a, b) => a.date.localeCompare(b.date)).slice(-30)
|
|
434
|
+
: [...monthlyData].sort((a, b) => a.month.localeCompare(b.month));
|
|
433
435
|
const labels = dataSrc.map(d => currentView === 'daily' ? d.date : d.month);
|
|
434
436
|
|
|
435
437
|
let datasetData;
|
|
@@ -480,7 +482,7 @@
|
|
|
480
482
|
Current: <b style="color:#0071e3">${getLevelName(lastVal)}</b> <span style="color:#86868b; margin-left: 5px;">(${lastVal.toFixed(0)}M)</span>
|
|
481
483
|
</div>
|
|
482
484
|
<div style="font-size: 14px; color: #1d1d1f;">
|
|
483
|
-
|
|
485
|
+
Pace: <b style="color:#5856d6">${getLevelName(projection)}</b> <span style="color:#86868b">(${projection.toFixed(0)}M)</span>
|
|
484
486
|
</div>
|
|
485
487
|
</div>
|
|
486
488
|
`;
|
|
@@ -583,7 +585,7 @@
|
|
|
583
585
|
stack: 'stack1'
|
|
584
586
|
},
|
|
585
587
|
{
|
|
586
|
-
label: '
|
|
588
|
+
label: 'Pace',
|
|
587
589
|
data: projectionData,
|
|
588
590
|
backgroundColor: 'rgba(52, 199, 89, 0.1)', // Very light green
|
|
589
591
|
borderColor: '#34c759',
|