No description
- JavaScript 89.7%
- HTML 4.8%
- Makefile 4.6%
- CSS 0.9%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
| src | ||
| .gitignore | ||
| index.html | ||
| Makefile | ||
| mise.toml | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| postcss.config.js | ||
| README.md | ||
| screenshot.png | ||
| tailwind.config.js | ||
| vite.config.js | ||
Log Timeline Visualizer
A React component that visualizes log timestamps with proportional spacing to help identify time gaps between events.
Features
- Paste log entries directly into the text area
- Visual timeline with proportional spacing between events
- Adjustable pixels-per-second ratio with a slider
- Supports ISO 8601 timestamps with millisecond precision
- Shows time differences between consecutive entries
Setup
- Clone this repository
- Install dependencies:
pnpm install
- Start the development server:
pnpm dev
Log Format
The visualizer expects logs in the following format:
YYYY-MM-DDTHH:mm:ss.SSSSSSZ [level ] message
Example:
2025-02-14T09:07:26.244710Z [debug ] message here
Development
The project uses:
- Vite for development and building
- React for the UI
- Tailwind CSS for styling
Building for Production
To create a production build:
pnpm build
The built files will be in the dist directory.