ccusage-ui 0.1.11 → 0.1.12

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 (2) hide show
  1. package/package.json +1 -1
  2. package/public/index.html +12 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ccusage-ui",
3
- "version": "0.1.11",
3
+ "version": "0.1.12",
4
4
  "main": "server.js",
5
5
  "bin": {
6
6
  "ccusage-ui": "server.js"
package/public/index.html CHANGED
@@ -609,25 +609,30 @@
609
609
  const now = new Date();
610
610
  const currentMonthStr = now.toISOString().slice(0, 7);
611
611
 
612
- // Logic for Monthly Token Projection
613
- if (currentMetric === 'tokens' && currentView === 'monthly') {
612
+ // Logic for Monthly Projection (tokens and cost)
613
+ if (currentView === 'monthly') {
614
614
  const lastIdx = dataSrc.length - 1;
615
615
  const lastData = dataSrc[lastIdx];
616
-
616
+
617
617
  // Only if the last bar is the current month
618
618
  if (lastData && lastData.month === currentMonthStr) {
619
619
  const day = now.getDate();
620
620
  const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
621
-
621
+
622
622
  if (day > 0 && day < daysInMonth) {
623
623
  const currentVal = datasetData[lastIdx];
624
624
  const projectedTotal = (currentVal / day) * daysInMonth;
625
625
  const remaining = projectedTotal - currentVal;
626
-
626
+
627
627
  // Create Projection Dataset (Zeros for past months, value for current)
628
628
  const projectionData = new Array(datasetData.length).fill(0);
629
629
  projectionData[lastIdx] = remaining;
630
630
 
631
+ // Pace color matches metric color
632
+ const paceColor = currentMetric === 'cost'
633
+ ? { bg: 'rgba(0, 113, 227, 0.1)', border: '#0071e3' }
634
+ : { bg: 'rgba(52, 199, 89, 0.1)', border: '#34c759' };
635
+
631
636
  datasets = [
632
637
  {
633
638
  label: 'Actual',
@@ -639,8 +644,8 @@
639
644
  {
640
645
  label: 'Pace',
641
646
  data: projectionData,
642
- backgroundColor: 'rgba(52, 199, 89, 0.1)', // Very light green
643
- borderColor: '#34c759',
647
+ backgroundColor: paceColor.bg,
648
+ borderColor: paceColor.border,
644
649
  borderWidth: 2,
645
650
  borderDash: [5, 5], // Dotted line style
646
651
  borderRadius: 4,