Coding Stats & WakaTime Visualization

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/chart/WakaTimeChart/index.tsx
• scripts/count-md-words.ts
• src/pages/index.tsx
• blog/2025/12/14/01_博客更新日志和计划.md
• README.md
• docusaurus.config.ts

The Coding Stats & WakaTime Visualization module provides a visual representation of the project's development activity, time allocation across operating systems, and content volume growth. This system integrates external API data with internal repository metrics to display interactive charts on the project's homepage.

1. System Architecture

The visualization system operates through a decoupled architecture where data collection is automated via scripts and rendering is performed by specialized React components.

1.1 Data Pipeline

The system utilizes two primary data streams:

1. WakaTime Data: A Python script (wakatime_req.py) runs via GitHub Actions to fetch daily coding time from the WakaTime API and stores it in a JSON file.
2. Markdown Statistics: A TypeScript script (count-md-words.ts) analyzes the Git history to calculate word counts across different content categories.

2. WakaTime Visualization

The WakaTime dashboard visualizes coding hours distributed by programming languages and operating systems. It uses the recharts library for rendering responsive line charts.

2.1 Component Logic

The WakaTimeDashboard component fetches data from a raw GitHub URL and processes it into a format suitable for time-series analysis. It implements a drill-down feature allowing users to adjust the time range and precision of the displayed data.

• Data Structure: Raw records contain dates, language arrays, and system arrays.
• Time Formatting: The system converts raw seconds into a human-readable format (Hours/Minutes/Seconds) using formatSecondsToHMS.
• Interactive Controls: Users can select time precision (minutes, seconds, milliseconds) and the "Top K" most used items to display.

2.2 Key Functions and Types

Function/Interface	Purpose
RawWakaRecord	Interface for raw JSON data including languages and system arrays.
formatSecondsToHMS	Formats seconds into strings like 5h 20m based on selected precision.
DrilldownChart	A sub-component that handles rendering, Y-axis scaling, and brush (zoom) logic.
processCategory	Filters and sorts items to find the "Top K" contributors within a selected time range.

Sources: src/components/chart/WakaTimeChart/index.tsx:24-37, src/components/chart/WakaTimeChart/index.tsx:128-150, src/components/chart/WakaTimeChart/index.tsx:238-270

3. Repository Statistics

Repository stats track the volume of content generated in the project, specifically targeting Markdown files in different project sections.

3.1 Word Count Logic

The count-md-words.ts script iterates through Git commits to calculate cumulative word counts. It distinguishes between three main categories:

• Docs & Blog: Content located in docs/ and blog/ directories.
• AI Docs: Content specifically in the ai-docs/ directory.
• Total: The sum of all categorized Markdown words.

3.2 Commit Filtering

To maintain accuracy, the script ignores specific automated commits to prevent stats inflation.

• Ignored Prefixes: [feat], [fix], [LoLi-Bot], and Merge.
• Calculation Method: It uses git diff --unified=0 to count added and removed characters, stripping whitespace to determine "word" count.

Sources: scripts/count-md-words.ts:38-43, scripts/count-md-words.ts:143-157

4. Homepage Integration

The HomepageHeader in src/pages/index.tsx integrates these visualizations to provide an immediate project overview.

• WordCountChart: Displayed prominently in the header area, visualizing the project's content growth over time.
• WakaTimeChart: Positioned below the latest documents section, providing insights into the developer's environment and language usage.
• Responsive Layout: The header uses a flexible layout that switches between column and row orientation based on window width (768px threshold).

Sources: src/pages/index.tsx:75-80, src/pages/index.tsx:112-114, src/pages/index.tsx:130-132

4.1 UI Component Properties

Component	Data Source	Visual Style
WordCountChart	wordStats.ts (JSON)	Multi-series area/line chart showing growth categories.
WakaTimeChart	Remote JSON (history.json)	Dual line charts with OS icons and language color-coding.
DrilldownChart	Processed WakaTime data	purple/violet axis colors (#ee11ff, #990099).

Sources: src/pages/index.tsx:113, src/components/chart/WakaTimeChart/index.tsx:327-340, src/components/chart/WakaTimeChart/index.tsx:341-353

5. Implementation Details

The system relies on specific formatting and data handling to ensure smooth rendering of large datasets.

// Example of time formatting logic in WakaTimeChart
function formatSecondsToHMS (seconds: number, precision: Precision): string {
    if (isNaN(seconds) || seconds < 0) return "0m";
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    if (precision === "minutes") return `${h > 0 ? `${h}h ` : ""}${m}m`;
    const s = Math.floor(seconds % 60);
    // ... handles seconds and milliseconds
}

Sources: src/components/chart/WakaTimeChart/index.tsx:40-48

The WakaTimeChart also utilizes a debounced update mechanism for the Brush component to prevent performance degradation when dragging the time range selector. It waits 500ms before recalculating the "Top K" items for the new range.
Sources: src/components/chart/WakaTimeChart/index.tsx:113-121

Interactive visualizations in the HXLoLi project serve as both a development log and a motivational tool for repository maintenance. By combining automated Git analysis with external time tracking, the project provides a comprehensive view of the effort invested in documentation and coding.