@vibecheckai/cli 3.4.0 → 3.5.0

package/bin/runners/lib/cli-charts.js

@@ -0,0 +1,368 @@
+/**
+ * CLI Charts - ASCII charts and visual data display for terminal output
+ * 
+ * Provides:
+ * - Horizontal bar charts
+ * - Vertical bar charts (sparklines)
+ * - Trend indicators
+ * - Distribution displays
+ * - Comparison tables
+ */
+
+"use strict";
+
+const {
+  ansi,
+  sym,
+  box,
+  visibleLength,
+  padRight,
+  padLeft,
+  center,
+  SUPPORTS_UNICODE,
+} = require("./unified-cli-output");
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// CONFIGURATION
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const CHART_WIDTH = 40;
+const SPARKLINE_CHARS = SUPPORTS_UNICODE 
+  ? ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█']
+  : ['_', '.', '-', '=', '#'];
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// HORIZONTAL BAR CHART
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a horizontal bar chart
+ * @param {Array<{label: string, value: number, color?: string}>} data
+ * @param {Object} options
+ */
+function horizontalBarChart(data, options = {}) {
+  const {
+    width = CHART_WIDTH,
+    showValues = true,
+    showPercent = false,
+    title = null,
+    maxValue = null,
+  } = options;
+
+  const lines = [];
+  const max = maxValue || Math.max(...data.map(d => d.value), 1);
+  const maxLabelLen = Math.max(...data.map(d => d.label.length), 8);
+
+  if (title) {
+    lines.push(`  ${ansi.bold}${title}${ansi.reset}`);
+    lines.push(`  ${ansi.gray}${box.horizontal.repeat(maxLabelLen + width + 10)}${ansi.reset}`);
+  }
+
+  for (const item of data) {
+    const barLen = Math.round((item.value / max) * width);
+    const bar = sym.filled.repeat(barLen) + ansi.gray + sym.empty.repeat(width - barLen) + ansi.reset;
+    const color = item.color || ansi.cyan;
+    const label = padRight(item.label, maxLabelLen);
+    
+    let valueStr = '';
+    if (showValues) {
+      valueStr = ` ${ansi.bold}${item.value}${ansi.reset}`;
+      if (showPercent) {
+        const pct = Math.round((item.value / max) * 100);
+        valueStr += ` ${ansi.gray}(${pct}%)${ansi.reset}`;
+      }
+    }
+
+    lines.push(`  ${ansi.gray}${label}${ansi.reset} ${color}${bar}${ansi.reset}${valueStr}`);
+  }
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SPARKLINE
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a sparkline (mini inline chart)
+ * @param {number[]} values - Array of values
+ * @param {Object} options
+ */
+function sparkline(values, options = {}) {
+  const {
+    min = Math.min(...values),
+    max = Math.max(...values),
+    color = ansi.cyan,
+  } = options;
+
+  if (values.length === 0) return '';
+  
+  const range = max - min || 1;
+  const chars = values.map(v => {
+    const normalized = (v - min) / range;
+    const idx = Math.min(Math.floor(normalized * SPARKLINE_CHARS.length), SPARKLINE_CHARS.length - 1);
+    return SPARKLINE_CHARS[idx];
+  });
+
+  return `${color}${chars.join('')}${ansi.reset}`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// TREND INDICATOR
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a trend indicator (up/down/stable)
+ * @param {number} current - Current value
+ * @param {number} previous - Previous value
+ * @param {Object} options
+ */
+function trendIndicator(current, previous, options = {}) {
+  const { reverse = false, showDelta = true } = options;
+  
+  const diff = current - previous;
+  const pct = previous !== 0 ? Math.round((diff / previous) * 100) : 0;
+  
+  let icon, color;
+  if (diff > 0) {
+    icon = SUPPORTS_UNICODE ? '↑' : '^';
+    color = reverse ? ansi.red : ansi.green;
+  } else if (diff < 0) {
+    icon = SUPPORTS_UNICODE ? '↓' : 'v';
+    color = reverse ? ansi.green : ansi.red;
+  } else {
+    icon = SUPPORTS_UNICODE ? '→' : '-';
+    color = ansi.gray;
+  }
+
+  let result = `${color}${icon}${ansi.reset}`;
+  if (showDelta && diff !== 0) {
+    const sign = diff > 0 ? '+' : '';
+    result += ` ${color}${sign}${pct}%${ansi.reset}`;
+  }
+
+  return result;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// DISTRIBUTION DISPLAY
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a distribution display (like severity breakdown)
+ * @param {Object} counts - {label: count} object
+ * @param {Object} options
+ */
+function distributionDisplay(counts, options = {}) {
+  const {
+    colors = {},
+    icons = {},
+    total = null,
+    title = null,
+  } = options;
+
+  const lines = [];
+  const sum = total || Object.values(counts).reduce((a, b) => a + b, 0);
+
+  if (title) {
+    lines.push(`  ${ansi.bold}${title}${ansi.reset}`);
+  }
+
+  const entries = Object.entries(counts).filter(([_, v]) => v > 0);
+  
+  if (entries.length === 0) {
+    lines.push(`  ${ansi.green}${sym.check}${ansi.reset} None found`);
+    return lines.join('\n');
+  }
+
+  for (const [label, count] of entries) {
+    const pct = Math.round((count / sum) * 100);
+    const color = colors[label] || ansi.gray;
+    const icon = icons[label] || sym.bullet;
+    
+    // Visual bar
+    const barWidth = 20;
+    const filledLen = Math.round((count / sum) * barWidth);
+    const bar = `${color}${sym.filled.repeat(filledLen)}${ansi.gray}${sym.empty.repeat(barWidth - filledLen)}${ansi.reset}`;
+    
+    lines.push(`  ${color}${icon}${ansi.reset} ${padRight(label, 12)} ${bar} ${ansi.bold}${count}${ansi.reset} ${ansi.gray}(${pct}%)${ansi.reset}`);
+  }
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SEVERITY BREAKDOWN
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render severity breakdown (specialized distribution)
+ * @param {Object} counts - {critical, high, medium, low, info}
+ */
+function severityBreakdown(counts, options = {}) {
+  const severityConfig = {
+    critical: { color: ansi.red, icon: sym.critical, order: 0 },
+    high: { color: ansi.yellow, icon: sym.high, order: 1 },
+    medium: { color: ansi.yellow, icon: sym.medium, order: 2 },
+    low: { color: ansi.blue, icon: sym.low, order: 3 },
+    info: { color: ansi.gray, icon: sym.info, order: 4 },
+  };
+
+  const colors = {};
+  const icons = {};
+  
+  for (const [sev, config] of Object.entries(severityConfig)) {
+    colors[sev] = config.color;
+    icons[sev] = config.icon;
+  }
+
+  return distributionDisplay(counts, {
+    colors,
+    icons,
+    title: options.title || 'Issues by Severity',
+    ...options,
+  });
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// COMPARISON TABLE
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a comparison table (before/after, current/previous)
+ * @param {Array<{label: string, before: number, after: number}>} data
+ */
+function comparisonTable(data, options = {}) {
+  const {
+    beforeLabel = 'Before',
+    afterLabel = 'After',
+    title = null,
+    showTrend = true,
+  } = options;
+
+  const lines = [];
+  const maxLabelLen = Math.max(...data.map(d => d.label.length), 10);
+
+  if (title) {
+    lines.push(`  ${ansi.bold}${title}${ansi.reset}`);
+  }
+
+  // Header
+  lines.push(`  ${padRight('', maxLabelLen)}  ${padLeft(beforeLabel, 10)}  ${padLeft(afterLabel, 10)}  ${showTrend ? 'Change' : ''}`);
+  lines.push(`  ${ansi.gray}${box.horizontal.repeat(maxLabelLen + 35)}${ansi.reset}`);
+
+  for (const item of data) {
+    const label = padRight(item.label, maxLabelLen);
+    const before = padLeft(String(item.before), 10);
+    const after = padLeft(String(item.after), 10);
+    const trend = showTrend ? trendIndicator(item.after, item.before, { reverse: item.reverse }) : '';
+    
+    lines.push(`  ${label}  ${ansi.gray}${before}${ansi.reset}  ${ansi.bold}${after}${ansi.reset}  ${trend}`);
+  }
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// STATS SUMMARY
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a compact stats summary
+ * @param {Array<{label: string, value: string|number, icon?: string, color?: string}>} stats
+ */
+function statsSummary(stats, options = {}) {
+  const { separator = ' │ ', inline = true } = options;
+
+  const items = stats.map(s => {
+    const icon = s.icon ? `${s.icon} ` : '';
+    const color = s.color || ansi.reset;
+    return `${ansi.gray}${s.label}:${ansi.reset} ${color}${ansi.bold}${s.value}${ansi.reset}`;
+  });
+
+  if (inline) {
+    return `  ${items.join(`${ansi.gray}${separator}${ansi.reset}`)}`;
+  }
+
+  return items.map(item => `  ${item}`).join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// HEALTH GAUGE
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a health gauge (circular-style progress)
+ * @param {number} score - Score 0-100
+ */
+function healthGauge(score, options = {}) {
+  const { width = 30, showLabel = true } = options;
+  
+  const clamped = Math.max(0, Math.min(100, score));
+  const filled = Math.round((clamped / 100) * width);
+  
+  let color;
+  if (clamped >= 80) color = ansi.green;
+  else if (clamped >= 60) color = ansi.yellow;
+  else if (clamped >= 40) color = ansi.yellow;
+  else color = ansi.red;
+
+  const bar = `${color}${sym.filled.repeat(filled)}${ansi.gray}${sym.empty.repeat(width - filled)}${ansi.reset}`;
+  const scoreStr = `${color}${ansi.bold}${clamped}${ansi.reset}${ansi.gray}/100${ansi.reset}`;
+
+  const lines = [];
+  if (showLabel) {
+    lines.push(`  ${ansi.gray}Health Score${ansi.reset}`);
+  }
+  lines.push(`  [${bar}] ${scoreStr}`);
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// ACTIVITY HEATMAP (simplified)
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Render a simplified activity heatmap (like GitHub contribution graph)
+ * @param {number[]} values - Array of activity values (7 days)
+ */
+function activityHeatmap(values, options = {}) {
+  const { labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } = options;
+  
+  const max = Math.max(...values, 1);
+  const chars = SUPPORTS_UNICODE 
+    ? ['░', '▒', '▓', '█']
+    : ['.', ':', '#', '@'];
+
+  const lines = [];
+  lines.push(`  ${ansi.gray}Activity${ansi.reset}`);
+  
+  const blocks = values.map((v, i) => {
+    const normalized = v / max;
+    const idx = Math.min(Math.floor(normalized * chars.length), chars.length - 1);
+    const color = normalized > 0.75 ? ansi.green : normalized > 0.25 ? ansi.cyan : ansi.gray;
+    return `${color}${chars[idx]}${ansi.reset}`;
+  });
+
+  lines.push(`  ${blocks.join(' ')}`);
+  lines.push(`  ${ansi.gray}${labels.map(l => l[0]).join(' ')}${ansi.reset}`);
+
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// EXPORTS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+module.exports = {
+  horizontalBarChart,
+  sparkline,
+  trendIndicator,
+  distributionDisplay,
+  severityBreakdown,
+  comparisonTable,
+  statsSummary,
+  healthGauge,
+  activityHeatmap,
+};