ccusage-ui 0.1.4 → 0.1.5

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.
Files changed (3) hide show
  1. package/package.json +7 -3
  2. package/public/index.html +81 -52
  3. package/public/screenshot.png +0 -0
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "ccusage-ui",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "main": "server.js",
5
5
  "bin": {
6
6
  "ccusage-ui": "server.js"
7
7
  },
8
8
  "scripts": {
9
9
  "start": "node server.js",
10
- "test": "echo \"Error: no test specified\" && exit 1"
10
+ "test": "echo \"Error: no test specified\" && exit 1",
11
+ "deploy": "gh-pages -d public"
11
12
  },
12
13
  "keywords": [],
13
14
  "author": "Doha Park",
@@ -23,5 +24,8 @@
23
24
  },
24
25
  "dependencies": {
25
26
  "ccusage": "^18.0.0"
27
+ },
28
+ "devDependencies": {
29
+ "gh-pages": "^6.3.0"
26
30
  }
27
- }
31
+ }
package/public/index.html CHANGED
@@ -280,7 +280,7 @@
280
280
  <div>
281
281
  <div style="display: flex; align-items: center; gap: 8px;">
282
282
  <h2 style="margin:0; font-size:18px;">Usage Trend</h2>
283
- <span class="tier-info" data-tippy-content="🌱 Starter: <1M<br>⚡ Pro: 1M+ (Daily User)<br>🔴 Power: 10M+ (Haiku 4.5 Class)<br>🟣 Mega: 50M+ (Sonnet 4.5 Class)<br>🟣 Legendary: 100M+ (Opus 4.5 Class)">?</span>
283
+ <span class="tier-info" data-tippy-content="⬛ Iron: <1M<br>🟫 Bronze: 1M+<br>⬜ Silver: 5M+<br>🟡 Gold: 10M+<br>💚 Platinum: 30M+<br>💎 Emerald: 50M+<br>💠 Diamond: 100M+<br>🔴 Master: 300M+<br>🟠 Grandmaster: 500M+<br>🏆 Challenger: 1B+">?</span>
284
284
  </div>
285
285
 
286
286
  <div id="userLevel" style="font-size:12px; color:#0071e3; margin-top:4px; font-weight:500;"></div>
@@ -493,11 +493,16 @@
493
493
  let displayHTML = "";
494
494
 
495
495
  const getLevelName = (val) => {
496
- if (val >= 100) return "🟣 Legendary (Opus 4.5 Class)";
497
- if (val >= 50) return "🟣 Mega (Sonnet 4.5 Class)";
498
- if (val >= 10) return "🔴 Power (Haiku 4.5 Class)";
499
- if (val >= 1) return "⚡ Pro (Daily User)";
500
- return "🌱 Starter";
496
+ if (val >= 1000) return "🏆 Challenger";
497
+ if (val >= 500) return "🟠 Grandmaster";
498
+ if (val >= 300) return "🔴 Master";
499
+ if (val >= 100) return "💠 Diamond";
500
+ if (val >= 50) return "💎 Emerald";
501
+ if (val >= 30) return "💚 Platinum";
502
+ if (val >= 10) return "🟡 Gold";
503
+ if (val >= 5) return "⬜ Silver";
504
+ if (val >= 1) return "🟫 Bronze";
505
+ return "⬛ Iron";
501
506
  };
502
507
 
503
508
  // Only project if the last data point is the current month
@@ -534,50 +539,64 @@
534
539
  {
535
540
  id: 'custom_lines',
536
541
  beforeDraw: (chart) => {
537
- if (currentMetric === 'tokens') {
538
- const ctx = chart.ctx;
539
- const yAxis = chart.scales.y;
540
- const xAxis = chart.scales.x;
541
-
542
- const drawLine = (value, color, text) => {
543
- const y = yAxis.getPixelForValue(value);
544
- if (y <= yAxis.bottom && y >= yAxis.top) {
545
- ctx.save();
546
- ctx.beginPath();
547
- ctx.strokeStyle = color;
548
- ctx.lineWidth = 2;
549
- ctx.setLineDash([5, 5]);
550
- ctx.moveTo(xAxis.left, y);
551
- ctx.lineTo(xAxis.right, y);
552
- ctx.stroke();
553
-
554
- ctx.fillStyle = color;
555
- ctx.font = "bold 11px -apple-system";
556
- ctx.fillText(text, xAxis.left + 5, y - 6);
557
- ctx.restore();
558
- }
559
- };
542
+ const ctx = chart.ctx;
543
+ const yAxis = chart.scales.y;
544
+ const xAxis = chart.scales.x;
545
+
546
+ const drawLine = (value, color, text) => {
547
+ const y = yAxis.getPixelForValue(value);
548
+ if (y <= yAxis.bottom && y >= yAxis.top) {
549
+ ctx.save();
550
+ ctx.beginPath();
551
+ ctx.strokeStyle = color;
552
+ ctx.lineWidth = 2;
553
+ ctx.setLineDash([5, 5]);
554
+ ctx.moveTo(xAxis.left, y);
555
+ ctx.lineTo(xAxis.right, y);
556
+ ctx.stroke();
557
+
558
+ ctx.fillStyle = color;
559
+ ctx.font = "bold 11px -apple-system";
560
+ ctx.fillText(text, xAxis.left + 5, y - 6);
561
+ ctx.restore();
562
+ }
563
+ };
560
564
 
565
+ if (currentMetric === 'tokens') {
561
566
  if (currentView === 'monthly') {
562
- drawLine(10, '#ff3b30', 'Power (10M)');
563
- drawLine(50, '#af52de', 'Mega (50M)');
564
- drawLine(100, '#5856d6', 'Legendary (100M)');
567
+ drawLine(10, '#ffd700', 'Gold (10M)');
568
+ drawLine(100, '#00bcd4', 'Diamond (100M)');
569
+ drawLine(300, '#e74c3c', 'Master (300M)');
570
+ drawLine(500, '#ff9800', 'Grandmaster (500M)');
571
+ drawLine(1000, '#9b59b6', 'Challenger (1B)');
565
572
  } else {
566
573
  // Daily Benchmarks
567
-
568
- // 1. Tier Thresholds (Lighter, background context)
569
- // Legendary (100M/mo -> ~3.3M/day)
570
- drawLine(3.3, 'rgba(88, 86, 214, 0.4)', 'Legendary (3.3M)');
571
- // Mega (50M/mo -> ~1.6M/day)
572
- drawLine(1.6, 'rgba(175, 82, 222, 0.4)', 'Mega (1.6M)');
573
- // Power (10M/mo -> ~0.33M/day)
574
- drawLine(0.33, 'rgba(255, 59, 48, 0.4)', 'Power (0.33M)');
575
-
576
- // 2. User Average (Stronger, personal metric)
574
+ // Challenger (1B/mo -> ~33M/day)
575
+ drawLine(33, 'rgba(155, 89, 182, 0.5)', 'Challenger (33M)');
576
+ // Master (300M/mo -> ~10M/day)
577
+ drawLine(10, 'rgba(231, 76, 60, 0.5)', 'Master (10M)');
578
+ // Diamond (100M/mo -> ~3.3M/day)
579
+ drawLine(3.3, 'rgba(0, 188, 212, 0.5)', 'Diamond (3.3M)');
580
+ // Gold (10M/mo -> ~0.33M/day)
581
+ drawLine(0.33, 'rgba(255, 215, 0, 0.5)', 'Gold (0.33M)');
582
+
583
+ // User Average
577
584
  const sum = datasetData.reduce((a, b) => a + b, 0);
578
585
  const avg = sum / datasetData.length;
579
586
  drawLine(avg, '#0071e3', `My Avg (${avg.toFixed(1)}M)`);
580
587
  }
588
+ } else if (currentMetric === 'cost') {
589
+ // Subscription plan benchmarks
590
+ if (currentView === 'monthly') {
591
+ drawLine(20, '#34c759', '$20 (Free tier value)');
592
+ drawLine(100, '#ff9500', '$100 Pro');
593
+ drawLine(200, '#ff3b30', '$200 Max');
594
+ } else {
595
+ // Daily cost benchmarks
596
+ drawLine(0.67, 'rgba(52, 199, 89, 0.5)', '$20/mo (~$0.67/day)');
597
+ drawLine(3.3, 'rgba(255, 149, 0, 0.5)', '$100 Pro (~$3.3/day)');
598
+ drawLine(6.7, 'rgba(255, 59, 48, 0.5)', '$200 Max (~$6.7/day)');
599
+ }
581
600
  }
582
601
  }
583
602
  }
@@ -753,18 +772,28 @@
753
772
  }
754
773
 
755
774
  const getLevelName = (val) => {
756
- if (val >= 100) return "Legendary (Opus 4.5 Class)";
757
- if (val >= 50) return "Mega (Sonnet 4.5 Class)";
758
- if (val >= 10) return "Power (Haiku 4.5 Class)";
759
- if (val >= 1) return "Pro (Daily User)";
760
- return "Starter";
775
+ if (val >= 1000) return "Challenger";
776
+ if (val >= 500) return "Grandmaster";
777
+ if (val >= 300) return "Master";
778
+ if (val >= 100) return "Diamond";
779
+ if (val >= 50) return "Emerald";
780
+ if (val >= 30) return "Platinum";
781
+ if (val >= 10) return "Gold";
782
+ if (val >= 5) return "Silver";
783
+ if (val >= 1) return "Bronze";
784
+ return "Iron";
761
785
  };
762
-
786
+
763
787
  const level = getLevelName(projected);
764
- const levelId = projected >= 100 ? 'legendary' :
765
- projected >= 50 ? 'mega' :
766
- projected >= 10 ? 'power' :
767
- projected >= 1 ? 'pro' : 'starter';
788
+ const levelId = projected >= 1000 ? 'challenger' :
789
+ projected >= 500 ? 'grandmaster' :
790
+ projected >= 300 ? 'master' :
791
+ projected >= 100 ? 'diamond' :
792
+ projected >= 50 ? 'emerald' :
793
+ projected >= 30 ? 'platinum' :
794
+ projected >= 10 ? 'gold' :
795
+ projected >= 5 ? 'silver' :
796
+ projected >= 1 ? 'bronze' : 'iron';
768
797
 
769
798
  const shareUrl = `https://sowonlabs.github.io/ccusage-ui/share/${levelId}.html`;
770
799
 
package/public/screenshot.png ADDED
Binary file