claude-usage-dashboard 1.3.0 → 1.3.2

package/README.md

@@ -32,8 +32,8 @@ Open http://localhost:3000 in your browser.
 ### From Source
 
 ```bash
-git clone https://github.com/ludengz/claudeUsageDashboard.git
-cd claudeUsageDashboard
+git clone https://github.com/ludengz/claude-usage-dashboard.git
+cd claude-usage-dashboard
 npm install
 npm start
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-usage-dashboard",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Dashboard that visualizes Claude Code usage from local session logs",
   "main": "server/index.js",
   "bin": {
@@ -26,7 +26,7 @@
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ludengz/claudeUsageDashboard.git"
+    "url": "https://github.com/ludengz/claude-usage-dashboard.git"
   },
   "type": "module",
   "dependencies": {

package/public/js/charts/model-distribution.js

@@ -20,13 +20,21 @@ export function renderModelDistribution(container, data) {
     return;
   }
 
-  const size = Math.min(container.clientWidth, 200);
+  const containerWidth = container.clientWidth;
+  const size = Math.min(containerWidth * 0.45, 200);
   const radius = size / 2;
   const innerRadius = radius * 0.55;
 
-  const wrapper = el.append('div').style('display', 'flex').style('align-items', 'center').style('gap', '20px');
+  const isNarrow = containerWidth < 280;
+  const wrapper = el.append('div')
+    .style('display', 'flex')
+    .style('flex-direction', isNarrow ? 'column' : 'row')
+    .style('align-items', 'center')
+    .style('gap', isNarrow ? '8px' : '20px');
 
-  const svg = wrapper.append('svg').attr('width', size).attr('height', size)
+  const svg = wrapper.append('svg')
+    .attr('width', size).attr('height', size)
+    .style('flex-shrink', '0')
     .append('g').attr('transform', `translate(${size / 2},${size / 2})`);
 
   const total = d3.sum(data.models, d => d.total_tokens);

package/public/js/charts/project-distribution.js

@@ -15,7 +15,18 @@ export function renderProjectDistribution(container, data) {
     return;
   }
 
-  const margin = { top: 10, right: 360, bottom: 10, left: 120 };
+  // Measure longest project name to set left margin dynamically
+  const tempSvg = el.append('svg').style('position', 'absolute').style('visibility', 'hidden');
+  const tempText = tempSvg.append('text').style('font-size', '12px');
+  let maxLabelWidth = 120;
+  for (const p of data.projects) {
+    tempText.text(p.name);
+    maxLabelWidth = Math.max(maxLabelWidth, tempText.node().getComputedTextLength());
+  }
+  tempSvg.remove();
+  const leftMargin = Math.ceil(maxLabelWidth) + 16;
+
+  const margin = { top: 10, right: 360, bottom: 10, left: leftMargin };
   const barHeight = 24;
   const gap = 8;
   const height = data.projects.length * (barHeight + gap) + margin.top + margin.bottom;