ccusage-ui 0.1.11 → 0.1.13
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/public/index.html +25 -24
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -564,23 +564,19 @@
|
|
|
564
564
|
|
|
565
565
|
if (currentMetric === 'tokens') {
|
|
566
566
|
if (currentView === 'monthly') {
|
|
567
|
-
|
|
568
|
-
drawLine(100, '#00e5a0', 'Emerald (100M)');
|
|
569
|
-
drawLine(300, '#00bcd4', 'Diamond (300M)');
|
|
570
|
-
drawLine(500, '#e74c3c', 'Master (500M)');
|
|
571
|
-
drawLine(1000, '#ff9800', 'Grandmaster (1B)');
|
|
567
|
+
// Higher tiers first (top of legend)
|
|
572
568
|
drawLine(1500, '#9b59b6', 'Challenger (1.5B)');
|
|
569
|
+
drawLine(1000, '#ff9800', 'Grandmaster (1B)');
|
|
570
|
+
drawLine(500, '#e74c3c', 'Master (500M)');
|
|
571
|
+
drawLine(300, '#00bcd4', 'Diamond (300M)');
|
|
572
|
+
drawLine(100, '#00e5a0', 'Emerald (100M)');
|
|
573
|
+
drawLine(30, '#ffd700', 'Gold (30M)');
|
|
573
574
|
} else {
|
|
574
|
-
// Daily Benchmarks
|
|
575
|
-
// Challenger (1.5B/mo -> ~50M/day)
|
|
575
|
+
// Daily Benchmarks - higher tiers first
|
|
576
576
|
drawLine(50, 'rgba(155, 89, 182, 0.5)', 'Challenger (50M)');
|
|
577
|
-
// Grandmaster (1B/mo -> ~33M/day)
|
|
578
577
|
drawLine(33, 'rgba(255, 152, 0, 0.5)', 'Grandmaster (33M)');
|
|
579
|
-
// Master (500M/mo -> ~16.7M/day)
|
|
580
578
|
drawLine(16.7, 'rgba(231, 76, 60, 0.5)', 'Master (16.7M)');
|
|
581
|
-
// Diamond (300M/mo -> ~10M/day)
|
|
582
579
|
drawLine(10, 'rgba(0, 188, 212, 0.5)', 'Diamond (10M)');
|
|
583
|
-
// Gold (30M/mo -> ~1M/day)
|
|
584
580
|
drawLine(1, 'rgba(255, 215, 0, 0.5)', 'Gold (1M)');
|
|
585
581
|
|
|
586
582
|
// User Average
|
|
@@ -589,16 +585,16 @@
|
|
|
589
585
|
drawLine(avg, '#0071e3', `My Avg (${avg.toFixed(1)}M)`);
|
|
590
586
|
}
|
|
591
587
|
} else if (currentMetric === 'cost') {
|
|
592
|
-
// Subscription plan benchmarks
|
|
588
|
+
// Subscription plan benchmarks - higher tiers first
|
|
593
589
|
if (currentView === 'monthly') {
|
|
594
|
-
drawLine(20, '#34c759', '$20 (Free tier value)');
|
|
595
|
-
drawLine(100, '#ff9500', '$100 Pro');
|
|
596
590
|
drawLine(200, '#ff3b30', '$200 Max');
|
|
591
|
+
drawLine(100, '#ff9500', '$100 Pro');
|
|
592
|
+
drawLine(20, '#34c759', '$20 (Free tier value)');
|
|
597
593
|
} else {
|
|
598
|
-
// Daily cost benchmarks
|
|
599
|
-
drawLine(0.67, 'rgba(52, 199, 89, 0.5)', '$20/mo (~$0.67/day)');
|
|
600
|
-
drawLine(3.3, 'rgba(255, 149, 0, 0.5)', '$100 Pro (~$3.3/day)');
|
|
594
|
+
// Daily cost benchmarks - higher tiers first
|
|
601
595
|
drawLine(6.7, 'rgba(255, 59, 48, 0.5)', '$200 Max (~$6.7/day)');
|
|
596
|
+
drawLine(3.3, 'rgba(255, 149, 0, 0.5)', '$100 Pro (~$3.3/day)');
|
|
597
|
+
drawLine(0.67, 'rgba(52, 199, 89, 0.5)', '$20/mo (~$0.67/day)');
|
|
602
598
|
}
|
|
603
599
|
}
|
|
604
600
|
}
|
|
@@ -609,25 +605,30 @@
|
|
|
609
605
|
const now = new Date();
|
|
610
606
|
const currentMonthStr = now.toISOString().slice(0, 7);
|
|
611
607
|
|
|
612
|
-
// Logic for Monthly
|
|
613
|
-
if (
|
|
608
|
+
// Logic for Monthly Projection (tokens and cost)
|
|
609
|
+
if (currentView === 'monthly') {
|
|
614
610
|
const lastIdx = dataSrc.length - 1;
|
|
615
611
|
const lastData = dataSrc[lastIdx];
|
|
616
|
-
|
|
612
|
+
|
|
617
613
|
// Only if the last bar is the current month
|
|
618
614
|
if (lastData && lastData.month === currentMonthStr) {
|
|
619
615
|
const day = now.getDate();
|
|
620
616
|
const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
|
|
621
|
-
|
|
617
|
+
|
|
622
618
|
if (day > 0 && day < daysInMonth) {
|
|
623
619
|
const currentVal = datasetData[lastIdx];
|
|
624
620
|
const projectedTotal = (currentVal / day) * daysInMonth;
|
|
625
621
|
const remaining = projectedTotal - currentVal;
|
|
626
|
-
|
|
622
|
+
|
|
627
623
|
// Create Projection Dataset (Zeros for past months, value for current)
|
|
628
624
|
const projectionData = new Array(datasetData.length).fill(0);
|
|
629
625
|
projectionData[lastIdx] = remaining;
|
|
630
626
|
|
|
627
|
+
// Pace color matches metric color
|
|
628
|
+
const paceColor = currentMetric === 'cost'
|
|
629
|
+
? { bg: 'rgba(0, 113, 227, 0.1)', border: '#0071e3' }
|
|
630
|
+
: { bg: 'rgba(52, 199, 89, 0.1)', border: '#34c759' };
|
|
631
|
+
|
|
631
632
|
datasets = [
|
|
632
633
|
{
|
|
633
634
|
label: 'Actual',
|
|
@@ -639,8 +640,8 @@
|
|
|
639
640
|
{
|
|
640
641
|
label: 'Pace',
|
|
641
642
|
data: projectionData,
|
|
642
|
-
backgroundColor:
|
|
643
|
-
borderColor:
|
|
643
|
+
backgroundColor: paceColor.bg,
|
|
644
|
+
borderColor: paceColor.border,
|
|
644
645
|
borderWidth: 2,
|
|
645
646
|
borderDash: [5, 5], // Dotted line style
|
|
646
647
|
borderRadius: 4,
|