clanker-stats 0.1.0 → 0.2.0

package/cli.js

@@ -163,10 +163,11 @@ function formatTotal(n) {
 
 function renderChart(allDays, results, total) {
   const W = 1500, H = 560
-  const pad = { top: 100, right: 50, bottom: 60, left: 50 }
+  const pad = { top: 130, right: 50, bottom: 60, left: 50 }
   const chartW = W - pad.left - pad.right
   const chartH = H - pad.top - pad.bottom
-  const font = `-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
+  const font = `'Berkeley Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
+  const mono = `'Berkeley Mono', 'SF Mono', 'Fira Code', monospace`
 
   const numWeeks = Math.ceil(allDays.length / 7)
   const toolWeekly = results.map(r => {
@@ -244,16 +245,19 @@ function renderChart(allDays, results, total) {
   }
 
   const visible = results.filter(r => [...r.counts.values()].reduce((a, b) => a + b, 0) > 0)
-  const legendItemW = 130
-  const legendStartX = W - pad.right - visible.length * legendItemW
+  const legendItemW = 145
+  const legendStartX = pad.left + 8
+  const legendEndX = legendStartX + visible.length * legendItemW
+  const totalStartX = W - pad.right - 160
+  const midX = (legendEndX + totalStartX) / 2 - 30
+  const vcenter = pad.top / 2
   let legend = ""
   for (let i = 0; i < visible.length; i++) {
     const x = legendStartX + i * legendItemW
-    const y = 38
     const count = [...visible[i].counts.values()].reduce((a, b) => a + b, 0)
-    legend += `<rect x="${x}" y="${y - 8}" width="10" height="10" rx="2" fill="${visible[i].color}" opacity="0.8"/>`
-    legend += `<text x="${x + 16}" y="${y + 1}" fill="#8b949e" font-family="${font}" font-size="14">${visible[i].name}</text>`
-    legend += `<text x="${x + 16}" y="${y + 16}" fill="#8b949e" font-family="${font}" font-size="13">${formatTotal(count)}</text>\n`
+    legend += `<rect x="${x}" y="${vcenter - 14}" width="14" height="14" rx="3" fill="${visible[i].color}" opacity="0.8"/>`
+    legend += `<text x="${x + 20}" y="${vcenter}" fill="#8b949e" font-family="${font}" font-size="18">${visible[i].name}</text>`
+    legend += `<text x="${x + 20}" y="${vcenter + 20}" fill="#8b949e" font-family="${font}" font-size="17">${formatTotal(count)}</text>\n`
   }
 
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
@@ -263,10 +267,10 @@ function renderChart(allDays, results, total) {
   </clipPath>
 </defs>
 <rect width="${W}" height="${H}" rx="16" fill="#0d1117" stroke="#30363d" stroke-width="1"/>
-<text x="${pad.left + 8}" y="${pad.top - 40}" fill="#f0f6fc" font-family="${font}" font-size="42" font-weight="800">${formatTotal(total)}</text>
-<text x="${pad.left + 8}" y="${pad.top - 16}" fill="#484f58" font-family="${font}" font-size="14" letter-spacing="1.5" font-weight="600">TOKENS</text>
-<rect x="${(pad.left + 200 + legendStartX) / 2 - 125}" y="30" width="250" height="30" rx="6" fill="#161b22"/>
-<text x="${(pad.left + 200 + legendStartX) / 2}" y="50" text-anchor="middle" fill="#8b949e" font-family="'SF Mono', 'Fira Code', monospace" font-size="15">npx clanker-stats --share</text>
+<text x="${W - pad.right}" y="${vcenter + 6}" text-anchor="end" fill="#f0f6fc" font-family="${font}" font-size="48" font-weight="800">${formatTotal(total)}</text>
+<text x="${W - pad.right}" y="${vcenter + 26}" text-anchor="end" fill="#484f58" font-family="${font}" font-size="16" letter-spacing="2" font-weight="600">TOKENS</text>
+<rect x="${midX - 170}" y="${vcenter - 20}" width="340" height="40" rx="8" fill="#161b22"/>
+<text x="${midX}" y="${vcenter + 5}" text-anchor="middle" fill="#8b949e" font-family="${mono}" font-size="22">npx clanker-stats --share</text>
 ${legend}
 ${gridLines}
 ${areas}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clanker-stats",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "See how many tokens you've burned across AI coding tools",
   "type": "module",
   "bin": {