Gitpod Insights Analyzer Dashboard

A beautiful, modern analytics dashboard for visualizing Gitpod workspace usage data. Built with React, TypeScript, and Tailwind CSS.

Features

• 📊 Comprehensive Analytics

  • Daily, weekly, and monthly active users
  • Workspace duration tracking
  • Repository usage statistics
  • Team-based analysis

• 🎨 Beautiful Visualizations

  • Interactive charts and graphs
  • Responsive design
  • Dark mode optimized
  • Smooth animations

• 🔍 Advanced Data Analysis

  • Sortable data tables
  • Custom date range filtering
  • Detailed metrics breakdown
  • Team performance insights

• 💻 Technical Features

  • CSV data import
  • Real-time data processing
  • Type-safe implementation
  • Responsive UI components

Getting Started

Prerequisites

• Node.js 14.0 or higher
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd gitpod-insights

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The application will be available at http://localhost:5173

Usage

1. Upload Data

   • Click the "Upload CSV" button in the top right
   • Select your Gitpod workspace data CSV file
   • The dashboard will automatically update with visualizations

2. Filter Data

   • Use the time range selector to view different periods
   • Available ranges include:
     • Today
     • Yesterday
     • Previous 7/30 days
     • This/Last Week
     • This/Last Month
     • This/Last Year

3. Analyze Metrics

   • View key statistics in the top cards
   • Explore detailed charts for:
     • User activity
     • Workspace usage
     • Repository popularity
   • Sort and filter table data

CSV Format

The dashboard expects a CSV file with the following columns:

workspaceID,workspaceClass,editor,workspaceType,creationTime,startedTime,stoppedTime,userName,contextURL,contextURLSegment_2

Technology Stack

• ⚛️ React
• 🏗️ TypeScript
• 🎨 Tailwind CSS
• 📊 Recharts
• 🔧 Vite
• 🎯 shadcn/ui
• 📄 Papa Parse

Building for Production

To create a production build:

npm run build

The built files will be in the dist directory.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.