wukong-gitlog-cli 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.0.7](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.6...v1.0.7) (2025-11-29)
+
+
+### Features
+
+* 🎸 charts 2 echarts ([6d6d780](https://github.com/tomatobybike/wukong-gitlog-cli/commit/6d6d780c053cd094a3a59ee58249d55bec504655))
+
 ### [1.0.6](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.5...v1.0.6) (2025-11-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wukong-gitlog-cli",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Advanced Git commit log exporter with Excel/JSON/TXT output, grouping, stats and CLI.",
   "keywords": [
     "git",

package/web/app.js

@@ -1,4 +1,3 @@
-/* global Chart */
 /* eslint-disable import/no-absolute-path */
 const formatDate = (d) => new Date(d).toLocaleString();
 
@@ -19,38 +18,103 @@ async function loadData() {
   }
 }
 
-function renderCommitsTable(commits) {
+let commitsAll = [];
+let filtered = [];
+let page = 1;
+let pageSize = 10;
+
+function renderCommitsTablePage() {
   const tbody = document.querySelector('#commitsTable tbody');
   tbody.innerHTML = '';
-  commits.forEach((c) => {
+  const start = (page - 1) * pageSize;
+  const end = start + pageSize;
+  filtered.slice(start, end).forEach((c) => {
     const tr = document.createElement('tr');
     tr.innerHTML = `<td>${c.hash.slice(0, 8)}</td><td>${c.author}</td><td>${formatDate(c.date)}</td><td>${c.message}</td>`;
     tbody.appendChild(tr);
   });
 }
 
+function updatePager() {
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+  if (page > totalPages) page = totalPages;
+  const pageInfo = document.getElementById('pageInfo');
+  pageInfo.textContent = `${page} / ${totalPages}`;
+  document.getElementById('prevPage').disabled = page <= 1;
+  document.getElementById('nextPage').disabled = page >= totalPages;
+}
+
+function applySearch() {
+  const q = document.getElementById('searchInput').value.trim().toLowerCase();
+  if (!q) {
+    filtered = commitsAll.slice();
+  } else {
+    filtered = commitsAll.filter((c) => {
+      const h = c.hash.toLowerCase();
+      const a = String(c.author || '').toLowerCase();
+      const m = String(c.message || '').toLowerCase();
+      const d = formatDate(c.date).toLowerCase();
+      return h.includes(q) || a.includes(q) || m.includes(q) || d.includes(q);
+    });
+  }
+  page = 1;
+  updatePager();
+  renderCommitsTablePage();
+}
+
+function initTableControls() {
+  document.getElementById('searchInput').addEventListener('input', applySearch);
+  document.getElementById('pageSize').addEventListener('change', (e) => {
+    pageSize = parseInt(e.target.value, 10) || 10;
+    page = 1;
+    updatePager();
+    renderCommitsTablePage();
+  });
+  document.getElementById('prevPage').addEventListener('click', () => {
+    if (page > 1) {
+      page -= 1;
+      updatePager();
+      renderCommitsTablePage();
+    }
+  });
+  document.getElementById('nextPage').addEventListener('click', () => {
+    const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+    if (page < totalPages) {
+      page += 1;
+      updatePager();
+      renderCommitsTablePage();
+    }
+  });
+}
+
 function drawHourlyOvertime(stats) {
-  const ctx = document.getElementById('hourlyOvertimeChart').getContext('2d');
+  const el = document.getElementById('hourlyOvertimeChart');
+  const chart = echarts.init(el);
   const data = stats.hourlyOvertimeCommits || [];
   const labels = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
-  const chartHourly = new Chart(ctx, {
-    type: 'bar',
-    data: { labels, datasets: [{ label: 'Overtime commits', data }] },
-    options: { responsive: true }
+  chart.setOption({
+    tooltip: {},
+    xAxis: { type: 'category', data: labels },
+    yAxis: { type: 'value' },
+    series: [{ type: 'bar', name: 'Overtime commits', data }]
   });
-  return chartHourly;
+  return chart;
 }
 
 function drawOutsideVsInside(stats) {
-  const ctx = document.getElementById('outsideVsInsideChart').getContext('2d');
+  const el = document.getElementById('outsideVsInsideChart');
+  const chart = echarts.init(el);
   const outside = stats.outsideWorkCount || 0;
   const total = stats.total || 0;
   const inside = Math.max(0, total - outside);
-  const chartPie = new Chart(ctx, {
-    type: 'pie',
-    data: { labels: ['Inside work', 'Outside work'], datasets: [{ data: [inside, outside], backgroundColor: ['#36a2eb', '#ff6384'] }] },
+  chart.setOption({
+    tooltip: {},
+    series: [{ type: 'pie', radius: '55%', data: [
+      { value: inside, name: '工作时间内' },
+      { value: outside, name: '下班时间' }
+    ] }]
   });
-  return chartPie;
+  return chart;
 }
 
 function drawDailyTrend(commits) {
@@ -61,42 +125,45 @@ function drawDailyTrend(commits) {
   });
   const labels = Array.from(map.keys()).sort();
   const data = labels.map(l => map.get(l));
-  const ctx = document.getElementById('dailyTrendChart').getContext('2d');
-  const chartDaily = new Chart(ctx, {
-    type: 'line',
-    data: { labels, datasets: [{ label: 'Commits per day', data, fill: true, tension: 0.3 }] },
+  const el = document.getElementById('dailyTrendChart');
+  const chart = echarts.init(el);
+  chart.setOption({
+    tooltip: {},
+    xAxis: { type: 'category', data: labels },
+    yAxis: { type: 'value' },
+    series: [{ type: 'line', name: '每日提交', data, areaStyle: {} }]
   });
-  return chartDaily;
+  return chart;
 }
 
 function drawWeeklyTrend(weekly) {
   const labels = weekly.map(w => w.period);
   const dataRate = weekly.map(w => +(w.outsideWorkRate * 100).toFixed(1));
   const dataCount = weekly.map(w => w.outsideWorkCount);
-  const ctx = document.getElementById('weeklyTrendChart').getContext('2d');
-  const chartWeekly = new Chart(ctx, {
-    type: 'line',
-    data: {
-      labels,
-      datasets: [
-        { label: '加班占比(%)', data: dataRate, borderColor: '#ff6384', yAxisID: 'y1' },
-        { label: '加班次数', data: dataCount, borderColor: '#36a2eb', yAxisID: 'y2' },
-      ]
-    },
-    options: {
-      responsive: true,
-      scales: {
-        y1: { type: 'linear', position: 'left', min: 0, max: 100 },
-        y2: { type: 'linear', position: 'right' }
-      }
-    }
+  const el = document.getElementById('weeklyTrendChart');
+  const chart = echarts.init(el);
+  chart.setOption({
+    tooltip: {},
+    xAxis: { type: 'category', data: labels },
+    yAxis: [
+      { type: 'value', min: 0, max: 100 },
+      { type: 'value' }
+    ],
+    series: [
+      { type: 'line', name: '加班占比(%)', data: dataRate, yAxisIndex: 0 },
+      { type: 'line', name: '加班次数', data: dataCount, yAxisIndex: 1 }
+    ]
   });
-  return chartWeekly;
+  return chart;
 }
 
 (async function main() {
   const { commits, stats, weekly } = await loadData();
-  renderCommitsTable(commits);
+  commitsAll = commits;
+  filtered = commitsAll.slice();
+  initTableControls();
+  updatePager();
+  renderCommitsTablePage();
   drawHourlyOvertime(stats);
   drawOutsideVsInside(stats);
   drawDailyTrend(commits);

package/web/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>wukong-gitlog-cli — Overtime Dashboard</title>
     <link rel="stylesheet" href="/style.css" />
-    <script src="./static/chart.js"></script>
+    <script src="./static/echarts.min.js"></script>
   </head>
   <body>
     <header>
@@ -15,28 +15,43 @@
       <section id="chartsHalf">
         <div class="chart-card">
           <h2>下班时间 vs 工作时间提交占比</h2>
-          <canvas id="outsideVsInsideChart"></canvas>
+          <div id="outsideVsInsideChart" class="echart"></div>
         </div>
         <div class="chart-card"></div>
       </section>
       <section id="charts">
         <div class="chart-card">
           <h2>每小时加班分布 (小时 -> 提交数)</h2>
-          <canvas id="hourlyOvertimeChart"></canvas>
+          <div id="hourlyOvertimeChart" class="echart"></div>
         </div>
 
         <div class="chart-card">
           <h2>按日提交趋势</h2>
-          <canvas id="dailyTrendChart"></canvas>
+          <div id="dailyTrendChart" class="echart"></div>
         </div>
         <div class="chart-card">
           <h2>每周趋势（加班占比）</h2>
-          <canvas id="weeklyTrendChart"></canvas>
+          <div id="weeklyTrendChart" class="echart"></div>
         </div>
       </section>
 
       <section class="table-card">
         <h2>提交清单</h2>
+        <div id="tableControls">
+          <input id="searchInput" type="search" placeholder="搜索作者/信息/Hash" />
+          <label for="pageSize">每页显示</label>
+          <select id="pageSize">
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+          <div class="pager">
+            <button id="prevPage">上一页</button>
+            <span id="pageInfo"></span>
+            <button id="nextPage">下一页</button>
+          </div>
+        </div>
         <table id="commitsTable">
           <thead>
             <tr>