npm - botrun-horse - Versions diffs - 2.29.2 → 2.30.0 - Mend

botrun-horse 2.29.2 → 2.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (574) hide show

package/botrun-c/admin/lib/analyzers/HtmlChartGenerator.ts ADDED Viewed

@@ -0,0 +1,530 @@
+/**
+ * HTML 圖表生成器
+ * 將分析結果視覺化為互動式 HTML 圖表
+ * 使用 Chart.js 庫進行繪製
+ */
+import { TimeSeriesAnalysisResult } from './TimeSeriesAnalyzer.js';
+import { BillingMetrics, BillingReport } from './BillingAnalyticsService.js';
+export class HtmlChartGenerator {
+  /**
+   * 生成完整的成本分析視覺化頁面
+   */
+  generateBillingDashboard(report: BillingReport): string {
+    const topSpenders = report.topSpenders;
+    const costBreakdown = report.costBreakdown;
+    // 計算輸入/輸出成本總計
+    const totalInputTokens = report.metrics.reduce((sum, m) => sum + (m.inputTokens || 0), 0);
+    const totalOutputTokens = report.metrics.reduce((sum, m) => sum + (m.outputTokens || 0), 0);
+    const totalInputCost = report.metrics.reduce((sum, m) => sum + (m.inputCost || 0), 0);
+    const totalOutputCost = report.metrics.reduce((sum, m) => sum + (m.outputCost || 0), 0);
+    // 準備圖表資料（包含所有使用者，使用漸層顏色區分）
+    const topSpendersLabels = report.metrics.map((m, i) => `#${i + 1} ${m.email.split('@')[0]}`);
+    const topSpendersData = report.metrics.map(m => m.estimatedMonthlyCost);
+    const topSpendersColors = report.metrics.map(m =>
+      m.estimatedMonthlyCost > 0
+        ? 'rgba(102, 126, 234, 0.8)'  // 藍色：有費用的
+        : 'rgba(200, 200, 200, 0.5)'  // 灰色：無費用的
+    );
+    const planLabels = costBreakdown.map(b => b.plan);
+    const planCosts = costBreakdown.map(b => b.totalCost);
+    const planUsers = costBreakdown.map(b => b.userCount);
+    const utilizationLabels = report.metrics.slice(0, 10).map(m => m.email.split('@')[0]);
+    const tpmData = report.metrics.slice(0, 10).map(m => m.tpmUtilization);
+    const rpmData = report.metrics.slice(0, 10).map(m => m.rpmUtilization);
+    return `<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>波特人 - 成本分析儀表板</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+      overflow: hidden;
+    }
+    .header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 40px 20px;
+      text-align: center;
+    }
+    .header h1 {
+      font-size: 2.5em;
+      margin-bottom: 10px;
+    }
+    .header p {
+      font-size: 1.1em;
+      opacity: 0.9;
+    }
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      padding: 30px;
+      background: #f8f9fa;
+      border-bottom: 1px solid #e9ecef;
+    }
+    .metric {
+      text-align: center;
+      padding: 20px;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    .metric-label {
+      font-size: 0.9em;
+      color: #6c757d;
+      margin-bottom: 10px;
+      font-weight: 600;
+    }
+    .metric-value {
+      font-size: 2em;
+      font-weight: bold;
+      color: #667eea;
+    }
+    .charts {
+      padding: 30px;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+      gap: 30px;
+    }
+    .chart-container {
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    .chart-title {
+      font-size: 1.3em;
+      font-weight: bold;
+      margin-bottom: 20px;
+      color: #333;
+      text-align: center;
+    }
+    .chart-wrapper {
+      position: relative;
+      height: 300px;
+    }
+    .full-width {
+      grid-column: 1 / -1;
+    }
+    .footer {
+      padding: 20px;
+      background: #f8f9fa;
+      border-top: 1px solid #e9ecef;
+      text-align: center;
+      color: #6c757d;
+      font-size: 0.9em;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>💰 Token 使用量成本分析儀表板</h1>
+      <p>分析期間: ${report.analysisPeriod.startDate.toLocaleDateString('zh-TW')} - ${report.analysisPeriod.endDate.toLocaleDateString('zh-TW')} | 定價: 輸入 $1/1M, 輸出 $5/1M (Haiku 4.5)</p>
+    </div>
+    <div class="summary">
+      <div class="metric">
+        <div class="metric-label">📊 總使用者數</div>
+        <div class="metric-value">${report.totalUsers}</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">🎯 總 Token 數</div>
+        <div class="metric-value">${(report.totalTokensAcrossUsers / 1000000).toFixed(2)}M</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">📥 輸入 Tokens</div>
+        <div class="metric-value">${(totalInputTokens / 1000000).toFixed(2)}M</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">📤 輸出 Tokens</div>
+        <div class="metric-value">${(totalOutputTokens / 1000000).toFixed(2)}M</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">💵 實際成本 (${report.analysisPeriod.days}天)</div>
+        <div class="metric-value">$${(totalInputCost + totalOutputCost).toFixed(2)}</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">📥 輸入成本 ($1/1M)</div>
+        <div class="metric-value">$${totalInputCost.toFixed(2)}</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">📤 輸出成本 ($5/1M)</div>
+        <div class="metric-value">$${totalOutputCost.toFixed(2)}</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">📈 日均成本</div>
+        <div class="metric-value">$${((totalInputCost + totalOutputCost) / report.analysisPeriod.days).toFixed(2)}/日</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">📊 預估月成本</div>
+        <div class="metric-value">$${report.totalCostAcrossUsers.toFixed(2)}</div>
+      </div>
+    </div>
+    <div class="charts">
+      <div class="chart-container full-width">
+        <div class="chart-title">🔥 所有使用者 Token 使用量排行（藍色=有使用，灰色=無使用）</div>
+        <div class="chart-wrapper">
+          <canvas id="topSpendersChart"></canvas>
+        </div>
+      </div>
+      <div class="chart-container">
+        <div class="chart-title">📦 按方案分佈 - 成本</div>
+        <div class="chart-wrapper">
+          <canvas id="planCostChart"></canvas>
+        </div>
+      </div>
+      <div class="chart-container">
+        <div class="chart-title">👥 按方案分佈 - 使用者數</div>
+        <div class="chart-wrapper">
+          <canvas id="planUsersChart"></canvas>
+        </div>
+      </div>
+      <div class="chart-container full-width">
+        <div class="chart-title">⚡ 前 10 位使用者的資源利用率</div>
+        <div class="chart-wrapper">
+          <canvas id="utilizationChart"></canvas>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <p>🤖 波特人成本分析系統 | 生成時間: ${report.generatedAt.toLocaleString('zh-TW')}</p>
+    </div>
+  </div>
+  <script>
+    const ctx1 = document.getElementById('topSpendersChart').getContext('2d');
+    new Chart(ctx1, {
+      type: 'bar',
+      data: {
+        labels: ${JSON.stringify(topSpendersLabels)},
+        datasets: [{
+          label: '月成本 (USD)',
+          data: ${JSON.stringify(topSpendersData)},
+          backgroundColor: ${JSON.stringify(topSpendersColors)},
+          borderColor: 'rgba(102, 126, 234, 1)',
+          borderWidth: 1
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        indexAxis: 'x',
+        plugins: {
+          legend: { display: false }
+        },
+        scales: {
+          y: { beginAtZero: true }
+        }
+      }
+    });
+    const ctx2 = document.getElementById('planCostChart').getContext('2d');
+    const planColors = ['#FF6384', '#36A2EB', '#FFCE56'];
+    new Chart(ctx2, {
+      type: 'doughnut',
+      data: {
+        labels: ${JSON.stringify(planLabels)},
+        datasets: [{
+          data: ${JSON.stringify(planCosts)},
+          backgroundColor: planColors.slice(0, ${planLabels.length})
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { position: 'bottom' }
+        }
+      }
+    });
+    const ctx3 = document.getElementById('planUsersChart').getContext('2d');
+    new Chart(ctx3, {
+      type: 'pie',
+      data: {
+        labels: ${JSON.stringify(planLabels)},
+        datasets: [{
+          data: ${JSON.stringify(planUsers)},
+          backgroundColor: planColors.slice(0, ${planLabels.length})
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { position: 'bottom' }
+        }
+      }
+    });
+    const ctx4 = document.getElementById('utilizationChart').getContext('2d');
+    new Chart(ctx4, {
+      type: 'radar',
+      data: {
+        labels: ${JSON.stringify(utilizationLabels)},
+        datasets: [
+          {
+            label: 'TPM 利用率',
+            data: ${JSON.stringify(tpmData)},
+            borderColor: 'rgba(255, 99, 132, 1)',
+            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+            borderWidth: 2
+          },
+          {
+            label: 'RPM 利用率',
+            data: ${JSON.stringify(rpmData)},
+            borderColor: 'rgba(54, 162, 235, 1)',
+            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+            borderWidth: 2
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          r: {
+            min: 0,
+            max: 100,
+            beginAtZero: true
+          }
+        }
+      }
+    });
+  </script>
+</body>
+</html>`;
+  }
+  /**
+   * 生成單一使用者的時間序列分析頁面
+   */
+  generateTimeSeriesPage(analysis: TimeSeriesAnalysisResult): string {
+    const hourlyLabels = analysis.hourly.map(h => `${h.hour}:00`);
+    const hourlyTokens = analysis.hourly.map(h => h.tokens);
+    const dailyLabels = analysis.daily.length > 0
+      ? analysis.daily.map(d => `${d.date} (${d.dayOfWeek})`).slice(-7)
+      : Array.from({ length: 7 }, (_, i) => {
+          const date = new Date();
+          date.setDate(date.getDate() - (6 - i));
+          return date.toISOString().split('T')[0];
+        });
+    const dailyTokens = analysis.daily.length > 0
+      ? analysis.daily.map(d => d.tokens).slice(-7)
+      : Array(7).fill(0);
+    return `<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>時間序列分析 - ${analysis.email}</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
+      background: #f5f7fa;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 12px;
+      padding: 30px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    h1 {
+      color: #333;
+      margin-bottom: 10px;
+    }
+    .subtitle {
+      color: #666;
+      margin-bottom: 30px;
+    }
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+      margin-bottom: 40px;
+    }
+    .stat-box {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 20px;
+      border-radius: 8px;
+      text-align: center;
+    }
+    .stat-label {
+      font-size: 0.9em;
+      opacity: 0.9;
+      margin-bottom: 8px;
+    }
+    .stat-value {
+      font-size: 2em;
+      font-weight: bold;
+    }
+    .charts {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+      gap: 30px;
+    }
+    .chart-container {
+      border: 1px solid #eee;
+      padding: 20px;
+      border-radius: 8px;
+    }
+    .chart-title {
+      font-weight: bold;
+      margin-bottom: 15px;
+      color: #333;
+    }
+    .chart-wrapper {
+      position: relative;
+      height: 300px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>📊 時間序列分析</h1>
+    <p class="subtitle">使用者: ${analysis.email} (${analysis.userId})</p>
+    <div class="stats">
+      <div class="stat-box">
+        <div class="stat-label">總 Token 數</div>
+        <div class="stat-value">${(analysis.totalTokens / 1000000).toFixed(2)}M</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">📥 輸入 Tokens ($1/1M)</div>
+        <div class="stat-value">${((analysis.inputTokens || 0) / 1000000).toFixed(2)}M</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">📤 輸出 Tokens ($5/1M)</div>
+        <div class="stat-value">${((analysis.outputTokens || 0) / 1000000).toFixed(2)}M</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">總請求數</div>
+        <div class="stat-value">${analysis.totalRequests}</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">分析期間</div>
+        <div class="stat-value">${analysis.analysisPeriod.days} 天</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">峰值時段</div>
+        <div class="stat-value">${analysis.peakHour}:00</div>
+      </div>
+    </div>
+    <div class="charts">
+      <div class="chart-container">
+        <div class="chart-title">⏰ 按小時分佈</div>
+        <div class="chart-wrapper">
+          <canvas id="hourlyChart"></canvas>
+        </div>
+      </div>
+      <div class="chart-container">
+        <div class="chart-title">📅 最近 7 天日均使用量</div>
+        <div class="chart-wrapper">
+          <canvas id="dailyChart"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    const ctx1 = document.getElementById('hourlyChart').getContext('2d');
+    new Chart(ctx1, {
+      type: 'bar',
+      data: {
+        labels: ${JSON.stringify(hourlyLabels)},
+        datasets: [{
+          label: 'Token 數',
+          data: ${JSON.stringify(hourlyTokens)},
+          backgroundColor: 'rgba(102, 126, 234, 0.8)',
+          borderColor: 'rgba(102, 126, 234, 1)',
+          borderWidth: 1
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: { y: { beginAtZero: true } }
+      }
+    });
+    const ctx2 = document.getElementById('dailyChart').getContext('2d');
+    new Chart(ctx2, {
+      type: 'line',
+      data: {
+        labels: ${JSON.stringify(dailyLabels)},
+        datasets: [{
+          label: 'Token 數',
+          data: ${JSON.stringify(dailyTokens)},
+          borderColor: 'rgba(54, 162, 235, 1)',
+          backgroundColor: 'rgba(54, 162, 235, 0.1)',
+          tension: 0.4,
+          fill: true,
+          borderWidth: 2
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: { y: { beginAtZero: true } }
+      }
+    });
+  </script>
+</body>
+</html>`;
+  }
+}