claude-usage-dashboard 1.4.0 → 1.4.2

package/public/js/charts/cache-efficiency.js

@@ -1,29 +1,29 @@
-export function renderCacheEfficiency(container, data) {
-  container.innerHTML = '';
-
-  const items = [
-    { label: 'Cache Read', value: data.cache_read_rate, color: '#4ade80', tokens: data.cache_read_tokens },
-    { label: 'Cache Creation', value: data.cache_creation_rate, color: '#f59e0b', tokens: data.cache_creation_tokens },
-    { label: 'No Cache', value: data.no_cache_rate, color: '#ef4444', tokens: data.non_cached_input_tokens },
-  ];
-
-  for (const item of items) {
-    const row = document.createElement('div');
-    row.style.marginBottom = '12px';
-
-    const header = document.createElement('div');
-    header.style.cssText = 'display:flex;justify-content:space-between;font-size:11px;color:#94a3b8;margin-bottom:4px';
-    header.innerHTML = `<span>${item.label}</span><span>${(item.value * 100).toFixed(1)}%</span>`;
-
-    const barBg = document.createElement('div');
-    barBg.style.cssText = 'height:8px;background:#334155;border-radius:4px;overflow:hidden';
-
-    const barFill = document.createElement('div');
-    barFill.style.cssText = `width:${item.value * 100}%;height:100%;background:${item.color};border-radius:4px;transition:width 0.5s`;
-
-    barBg.appendChild(barFill);
-    row.appendChild(header);
-    row.appendChild(barBg);
-    container.appendChild(row);
-  }
-}
+export function renderCacheEfficiency(container, data) {
+  container.innerHTML = '';
+
+  const items = [
+    { label: 'Cache Read', value: data.cache_read_rate, color: '#4ade80', tokens: data.cache_read_tokens },
+    { label: 'Cache Creation', value: data.cache_creation_rate, color: '#f59e0b', tokens: data.cache_creation_tokens },
+    { label: 'No Cache', value: data.no_cache_rate, color: '#ef4444', tokens: data.non_cached_input_tokens },
+  ];
+
+  for (const item of items) {
+    const row = document.createElement('div');
+    row.style.marginBottom = '12px';
+
+    const header = document.createElement('div');
+    header.style.cssText = 'display:flex;justify-content:space-between;font-size:11px;color:#94a3b8;margin-bottom:4px';
+    header.innerHTML = `<span>${item.label}</span><span>${(item.value * 100).toFixed(1)}%</span>`;
+
+    const barBg = document.createElement('div');
+    barBg.style.cssText = 'height:8px;background:#334155;border-radius:4px;overflow:hidden';
+
+    const barFill = document.createElement('div');
+    barFill.style.cssText = `width:${item.value * 100}%;height:100%;background:${item.color};border-radius:4px;transition:width 0.5s`;
+
+    barBg.appendChild(barFill);
+    row.appendChild(header);
+    row.appendChild(barBg);
+    container.appendChild(row);
+  }
+}

package/public/js/charts/cost-comparison.js

@@ -1,39 +1,39 @@
-export function renderCostComparison(container, data) {
-  const el = d3.select(container);
-  el.selectAll('*').remove();
-
-  const margin = { top: 10, right: 20, bottom: 40, left: 50 };
-  const width = container.clientWidth - margin.left - margin.right;
-  const height = 180 - margin.top - margin.bottom;
-
-  const svg = el.append('svg')
-    .attr('width', width + margin.left + margin.right)
-    .attr('height', height + margin.top + margin.bottom)
-    .append('g')
-    .attr('transform', `translate(${margin.left},${margin.top})`);
-
-  const bars = [
-    { label: 'Subscription', value: data.subscription_cost_usd, color: '#3b82f6' },
-    { label: 'API Cost', value: data.api_equivalent_cost_usd, color: '#f59e0b' },
-  ];
-
-  const x = d3.scaleBand().domain(bars.map(d => d.label)).range([0, width]).padding(0.4);
-  const y = d3.scaleLinear().domain([0, d3.max(bars, d => d.value) * 1.2]).range([height, 0]);
-
-  svg.append('g').attr('transform', `translate(0,${height})`)
-    .call(d3.axisBottom(x))
-    .selectAll('text').style('fill', '#94a3b8').style('font-size', '11px');
-  svg.append('g').call(d3.axisLeft(y).ticks(4).tickFormat(d => `$${d}`))
-    .selectAll('text').style('fill', '#64748b').style('font-size', '10px');
-
-  svg.selectAll('.bar').data(bars).enter().append('rect')
-    .attr('x', d => x(d.label)).attr('y', d => y(d.value))
-    .attr('width', x.bandwidth()).attr('height', d => height - y(d.value))
-    .attr('fill', d => d.color).attr('rx', 4);
-
-  svg.selectAll('.label').data(bars).enter().append('text')
-    .attr('x', d => x(d.label) + x.bandwidth() / 2).attr('y', d => y(d.value) - 5)
-    .attr('text-anchor', 'middle')
-    .style('fill', '#f8fafc').style('font-size', '12px').style('font-weight', '600')
-    .text(d => `$${d.value.toFixed(2)}`);
-}
+export function renderCostComparison(container, data) {
+  const el = d3.select(container);
+  el.selectAll('*').remove();
+
+  const margin = { top: 10, right: 20, bottom: 40, left: 50 };
+  const width = container.clientWidth - margin.left - margin.right;
+  const height = 180 - margin.top - margin.bottom;
+
+  const svg = el.append('svg')
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height + margin.top + margin.bottom)
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`);
+
+  const bars = [
+    { label: 'Subscription', value: data.subscription_cost_usd, color: '#3b82f6' },
+    { label: 'API Cost', value: data.api_equivalent_cost_usd, color: '#f59e0b' },
+  ];
+
+  const x = d3.scaleBand().domain(bars.map(d => d.label)).range([0, width]).padding(0.4);
+  const y = d3.scaleLinear().domain([0, d3.max(bars, d => d.value) * 1.2]).range([height, 0]);
+
+  svg.append('g').attr('transform', `translate(0,${height})`)
+    .call(d3.axisBottom(x))
+    .selectAll('text').style('fill', '#94a3b8').style('font-size', '11px');
+  svg.append('g').call(d3.axisLeft(y).ticks(4).tickFormat(d => `$${d}`))
+    .selectAll('text').style('fill', '#64748b').style('font-size', '10px');
+
+  svg.selectAll('.bar').data(bars).enter().append('rect')
+    .attr('x', d => x(d.label)).attr('y', d => y(d.value))
+    .attr('width', x.bandwidth()).attr('height', d => height - y(d.value))
+    .attr('fill', d => d.color).attr('rx', 4);
+
+  svg.selectAll('.label').data(bars).enter().append('text')
+    .attr('x', d => x(d.label) + x.bandwidth() / 2).attr('y', d => y(d.value) - 5)
+    .attr('text-anchor', 'middle')
+    .style('fill', '#f8fafc').style('font-size', '12px').style('font-weight', '600')
+    .text(d => `$${d.value.toFixed(2)}`);
+}

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

@@ -1,56 +1,56 @@
-const MODEL_COLORS = {
-  'claude-sonnet-4-6': '#3b82f6',
-  'claude-opus-4-6': '#8b5cf6',
-  'claude-haiku-4-5': '#f59e0b',
-};
-
-const MODEL_DISPLAY = {
-  'claude-opus-4-6': 'opus 4.6',
-  'claude-sonnet-4-6': 'sonnet 4.6',
-  'claude-haiku-4-5': 'haiku 4.5',
-  'claude-haiku-4-5-20251001': 'haiku 4.5',
-};
-
-export function renderModelDistribution(container, data) {
-  const el = d3.select(container);
-  el.selectAll('*').remove();
-
-  if (!data.models || data.models.length === 0) {
-    el.append('p').style('color', '#64748b').text('No data');
-    return;
-  }
-
-  const containerWidth = container.clientWidth;
-  const size = Math.min(containerWidth * 0.45, 200);
-  const radius = size / 2;
-  const innerRadius = radius * 0.55;
-
-  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)
-    .style('flex-shrink', '0')
-    .append('g').attr('transform', `translate(${size / 2},${size / 2})`);
-
-  const total = d3.sum(data.models, d => d.total_tokens);
-  const pie = d3.pie().value(d => d.total_tokens).sort(null);
-  const arc = d3.arc().innerRadius(innerRadius).outerRadius(radius);
-
-  svg.selectAll('path').data(pie(data.models)).enter().append('path')
-    .attr('d', arc).attr('fill', d => MODEL_COLORS[d.data.id] || '#64748b')
-    .attr('stroke', '#1e293b').attr('stroke-width', 2);
-
-  const legend = wrapper.append('div');
-  data.models.forEach(m => {
-    const pct = ((m.total_tokens / total) * 100).toFixed(1);
-    const color = MODEL_COLORS[m.id] || '#64748b';
-    const shortName = MODEL_DISPLAY[m.id] || m.id.replace('claude-', '').replace(/-(\d+)-(\d+)/, ' $1.$2');
-    legend.append('div').style('font-size', '11px').style('color', '#94a3b8').style('margin-bottom', '4px')
-      .html(`<span style="color:${color}">●</span> ${shortName} — ${pct}%`);
-  });
-}
+const MODEL_COLORS = {
+  'claude-sonnet-4-6': '#3b82f6',
+  'claude-opus-4-6': '#8b5cf6',
+  'claude-haiku-4-5': '#f59e0b',
+};
+
+const MODEL_DISPLAY = {
+  'claude-opus-4-6': 'opus 4.6',
+  'claude-sonnet-4-6': 'sonnet 4.6',
+  'claude-haiku-4-5': 'haiku 4.5',
+  'claude-haiku-4-5-20251001': 'haiku 4.5',
+};
+
+export function renderModelDistribution(container, data) {
+  const el = d3.select(container);
+  el.selectAll('*').remove();
+
+  if (!data.models || data.models.length === 0) {
+    el.append('p').style('color', '#64748b').text('No data');
+    return;
+  }
+
+  const containerWidth = container.clientWidth;
+  const size = Math.min(containerWidth * 0.45, 200);
+  const radius = size / 2;
+  const innerRadius = radius * 0.55;
+
+  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)
+    .style('flex-shrink', '0')
+    .append('g').attr('transform', `translate(${size / 2},${size / 2})`);
+
+  const total = d3.sum(data.models, d => d.total_tokens);
+  const pie = d3.pie().value(d => d.total_tokens).sort(null);
+  const arc = d3.arc().innerRadius(innerRadius).outerRadius(radius);
+
+  svg.selectAll('path').data(pie(data.models)).enter().append('path')
+    .attr('d', arc).attr('fill', d => MODEL_COLORS[d.data.id] || '#64748b')
+    .attr('stroke', '#1e293b').attr('stroke-width', 2);
+
+  const legend = wrapper.append('div');
+  data.models.forEach(m => {
+    const pct = ((m.total_tokens / total) * 100).toFixed(1);
+    const color = MODEL_COLORS[m.id] || '#64748b';
+    const shortName = MODEL_DISPLAY[m.id] || m.id.replace('claude-', '').replace(/-(\d+)-(\d+)/, ' $1.$2');
+    legend.append('div').style('font-size', '11px').style('color', '#94a3b8').style('margin-bottom', '4px')
+      .html(`<span style="color:${color}">●</span> ${shortName} — ${pct}%`);
+  });
+}

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

@@ -1,103 +1,103 @@
-const COLORS = ['#3b82f6', '#8b5cf6', '#f59e0b', '#4ade80', '#ef4444', '#ec4899', '#06b6d4'];
-
-function fmt(n) {
-  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
-  if (n >= 1_000) return (n / 1_000).toFixed(0) + 'K';
-  return n.toString();
-}
-
-export function renderProjectDistribution(container, data) {
-  const el = d3.select(container);
-  el.selectAll('*').remove();
-
-  if (!data.projects || data.projects.length === 0) {
-    el.append('p').style('color', '#64748b').text('No data');
-    return;
-  }
-
-  // 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;
-  const width = container.clientWidth - margin.left - margin.right;
-
-  const svg = el.append('svg')
-    .attr('width', width + margin.left + margin.right)
-    .attr('height', height)
-    .append('g').attr('transform', `translate(${margin.left},${margin.top})`);
-
-  const x = d3.scaleLinear().domain([0, d3.max(data.projects, d => d.total_tokens)]).range([0, width]);
-  const y = d3.scaleBand().domain(data.projects.map(d => d.name)).range([0, height - margin.top - margin.bottom]).padding(0.25);
-
-  // Project name labels
-  svg.selectAll('.project-label').data(data.projects).enter().append('text')
-    .attr('x', -8).attr('y', d => y(d.name) + y.bandwidth() / 2)
-    .attr('text-anchor', 'end').attr('dominant-baseline', 'middle')
-    .style('fill', '#e2e8f0').style('font-size', '12px').text(d => d.name);
-
-  // Stacked bars: cache_read + cache_creation + input + output
-  const cr = d => d.cache_read_tokens || 0;
-  const cc = d => d.cache_creation_tokens || 0;
-
-  svg.selectAll('.bar-cache-read').data(data.projects).enter().append('rect')
-    .attr('x', 0).attr('y', d => y(d.name))
-    .attr('width', d => x(cr(d))).attr('height', y.bandwidth())
-    .attr('fill', '#4ade80').attr('opacity', 0.6).attr('rx', 3);
-
-  svg.selectAll('.bar-cache-creation').data(data.projects).enter().append('rect')
-    .attr('x', d => x(cr(d))).attr('y', d => y(d.name))
-    .attr('width', d => x(cr(d) + cc(d)) - x(cr(d))).attr('height', y.bandwidth())
-    .attr('fill', '#f59e0b').attr('opacity', 0.6);
-
-  svg.selectAll('.bar-input').data(data.projects).enter().append('rect')
-    .attr('x', d => x(cr(d) + cc(d))).attr('y', d => y(d.name))
-    .attr('width', d => x(cr(d) + cc(d) + d.total_input_tokens) - x(cr(d) + cc(d))).attr('height', y.bandwidth())
-    .attr('fill', '#3b82f6').attr('opacity', 0.7);
-
-  svg.selectAll('.bar-output').data(data.projects).enter().append('rect')
-    .attr('x', d => x(cr(d) + cc(d) + d.total_input_tokens)).attr('y', d => y(d.name))
-    .attr('width', d => x(d.total_tokens) - x(cr(d) + cc(d) + d.total_input_tokens)).attr('height', y.bandwidth())
-    .attr('fill', '#f97316').attr('opacity', 0.7);
-
-  // Right-side label: tokens + cost
-  svg.selectAll('.detail-label').data(data.projects).enter().append('text')
-    .attr('x', d => x(d.total_tokens) + 8).attr('y', d => y(d.name) + y.bandwidth() / 2)
-    .attr('dominant-baseline', 'middle')
-    .style('font-size', '11px')
-    .html(d => {
-      // Use tspans for colored segments
-      return '';
-    })
-    .each(function(d) {
-      const text = d3.select(this);
-      text.append('tspan').style('fill', '#f8fafc').style('font-weight', '600').text(fmt(d.total_tokens));
-      text.append('tspan').style('fill', '#64748b').text(' (');
-      text.append('tspan').style('fill', '#4ade80').text(`cr:${fmt(d.cache_read_tokens || 0)}`);
-      text.append('tspan').style('fill', '#64748b').text('/');
-      text.append('tspan').style('fill', '#f59e0b').text(`cw:${fmt(d.cache_creation_tokens || 0)}`);
-      text.append('tspan').style('fill', '#64748b').text('/');
-      text.append('tspan').style('fill', '#60a5fa').text(`in:${fmt(d.total_input_tokens)}`);
-      text.append('tspan').style('fill', '#64748b').text('/');
-      text.append('tspan').style('fill', '#f97316').text(`out:${fmt(d.total_output_tokens)}`);
-      text.append('tspan').style('fill', '#64748b').text(')  ');
-      text.append('tspan').style('fill', '#f59e0b').style('font-weight', '600').text(`$${d.estimated_cost_usd.toFixed(2)}`);
-    });
-
-  // Legend
-  const legend = el.append('div').style('display', 'flex').style('gap', '16px').style('margin-top', '8px');
-  legend.append('span').style('font-size', '11px').style('color', '#4ade80').html('● Cache Read');
-  legend.append('span').style('font-size', '11px').style('color', '#f59e0b').html('● Cache Write');
-  legend.append('span').style('font-size', '11px').style('color', '#60a5fa').html('● Input');
-  legend.append('span').style('font-size', '11px').style('color', '#f97316').html('● Output');
-}
+const COLORS = ['#3b82f6', '#8b5cf6', '#f59e0b', '#4ade80', '#ef4444', '#ec4899', '#06b6d4'];
+
+function fmt(n) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(0) + 'K';
+  return n.toString();
+}
+
+export function renderProjectDistribution(container, data) {
+  const el = d3.select(container);
+  el.selectAll('*').remove();
+
+  if (!data.projects || data.projects.length === 0) {
+    el.append('p').style('color', '#64748b').text('No data');
+    return;
+  }
+
+  // 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;
+  const width = container.clientWidth - margin.left - margin.right;
+
+  const svg = el.append('svg')
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height)
+    .append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+
+  const x = d3.scaleLinear().domain([0, d3.max(data.projects, d => d.total_tokens)]).range([0, width]);
+  const y = d3.scaleBand().domain(data.projects.map(d => d.name)).range([0, height - margin.top - margin.bottom]).padding(0.25);
+
+  // Project name labels
+  svg.selectAll('.project-label').data(data.projects).enter().append('text')
+    .attr('x', -8).attr('y', d => y(d.name) + y.bandwidth() / 2)
+    .attr('text-anchor', 'end').attr('dominant-baseline', 'middle')
+    .style('fill', '#e2e8f0').style('font-size', '12px').text(d => d.name);
+
+  // Stacked bars: cache_read + cache_creation + input + output
+  const cr = d => d.cache_read_tokens || 0;
+  const cc = d => d.cache_creation_tokens || 0;
+
+  svg.selectAll('.bar-cache-read').data(data.projects).enter().append('rect')
+    .attr('x', 0).attr('y', d => y(d.name))
+    .attr('width', d => x(cr(d))).attr('height', y.bandwidth())
+    .attr('fill', '#4ade80').attr('opacity', 0.6).attr('rx', 3);
+
+  svg.selectAll('.bar-cache-creation').data(data.projects).enter().append('rect')
+    .attr('x', d => x(cr(d))).attr('y', d => y(d.name))
+    .attr('width', d => x(cr(d) + cc(d)) - x(cr(d))).attr('height', y.bandwidth())
+    .attr('fill', '#f59e0b').attr('opacity', 0.6);
+
+  svg.selectAll('.bar-input').data(data.projects).enter().append('rect')
+    .attr('x', d => x(cr(d) + cc(d))).attr('y', d => y(d.name))
+    .attr('width', d => x(cr(d) + cc(d) + d.total_input_tokens) - x(cr(d) + cc(d))).attr('height', y.bandwidth())
+    .attr('fill', '#3b82f6').attr('opacity', 0.7);
+
+  svg.selectAll('.bar-output').data(data.projects).enter().append('rect')
+    .attr('x', d => x(cr(d) + cc(d) + d.total_input_tokens)).attr('y', d => y(d.name))
+    .attr('width', d => x(d.total_tokens) - x(cr(d) + cc(d) + d.total_input_tokens)).attr('height', y.bandwidth())
+    .attr('fill', '#f97316').attr('opacity', 0.7);
+
+  // Right-side label: tokens + cost
+  svg.selectAll('.detail-label').data(data.projects).enter().append('text')
+    .attr('x', d => x(d.total_tokens) + 8).attr('y', d => y(d.name) + y.bandwidth() / 2)
+    .attr('dominant-baseline', 'middle')
+    .style('font-size', '11px')
+    .html(d => {
+      // Use tspans for colored segments
+      return '';
+    })
+    .each(function(d) {
+      const text = d3.select(this);
+      text.append('tspan').style('fill', '#f8fafc').style('font-weight', '600').text(fmt(d.total_tokens));
+      text.append('tspan').style('fill', '#64748b').text(' (');
+      text.append('tspan').style('fill', '#4ade80').text(`cr:${fmt(d.cache_read_tokens || 0)}`);
+      text.append('tspan').style('fill', '#64748b').text('/');
+      text.append('tspan').style('fill', '#f59e0b').text(`cw:${fmt(d.cache_creation_tokens || 0)}`);
+      text.append('tspan').style('fill', '#64748b').text('/');
+      text.append('tspan').style('fill', '#60a5fa').text(`in:${fmt(d.total_input_tokens)}`);
+      text.append('tspan').style('fill', '#64748b').text('/');
+      text.append('tspan').style('fill', '#f97316').text(`out:${fmt(d.total_output_tokens)}`);
+      text.append('tspan').style('fill', '#64748b').text(')  ');
+      text.append('tspan').style('fill', '#f59e0b').style('font-weight', '600').text(`$${d.estimated_cost_usd.toFixed(2)}`);
+    });
+
+  // Legend
+  const legend = el.append('div').style('display', 'flex').style('gap', '16px').style('margin-top', '8px');
+  legend.append('span').style('font-size', '11px').style('color', '#4ade80').html('● Cache Read');
+  legend.append('span').style('font-size', '11px').style('color', '#f59e0b').html('● Cache Write');
+  legend.append('span').style('font-size', '11px').style('color', '#60a5fa').html('● Input');
+  legend.append('span').style('font-size', '11px').style('color', '#f97316').html('● Output');
+}