@vibecheckai/cli 3.5.0 → 3.5.2

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

@@ -1,368 +0,0 @@
-/**
- * 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,
-};