A static web application that visualizes GitHub statistics and collaboration patterns. Try it here
- 📊 Interactive dashboard with multiple visualization types
- 📈 Time-based analysis of repository activity
- 👥 Collaboration pattern insights
- 🎨 Modern, responsive UI
- ⚡ Fast performance with Vite, React and Typescript
- Clone the repository
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Open http://localhost:5173 in your browser
The application is designed to be easily extensible. Here's how to add a new chart component:
-
Add your chart component to
src/components/Dashboard/Components.tsx:// Inside src/components/Dashboard/Components.tsx // Add your chart component function NewChart({ data }: ChartProps) { return ( <div className="chart-container"> {/* Your chart implementation */} </div> ); } // Add it to the DashboardComponents object export const DashboardComponents = { // ... existing components newChart: NewChart, };
-
The chart will automatically be available in the dashboard through the
DashboardComponentsobject. -
Style your chart using the shared styles in
src/styles.ts
The application provides several generic chart components that you can use:
-
Bar Chart (
GenericBarChart)interface BarChartProps { title: string; data: { name: string; value: number }[]; bars: { dataKey: string; name: string; fill: string }[]; formatter?: (value: ValueType) => string; XAxisProps?: object; }
-
Pie Chart (
GenericPieChart)interface PieChartProps { title: string; data: { name: string; value: number }[]; colors: string[]; formatter?: (value: ValueType) => string; }
-
Line Chart (
GenericLineChart)interface LineChartProps { title: string; data: { name: string; value: number }[]; lines: { dataKey: string; name: string; stroke: string }[]; formatter?: (value: ValueType) => string; }
-
Table (
GenericTable)interface TableProps { title: string; data: any[]; columns: { key: string; label: string; render?: (value: any) => ReactNode }[]; limit?: number; fullWidth?: boolean; }
- Use TypeScript for type safety
- Follow the existing chart component patterns
- Implement responsive design
- Include loading and error states
- Add tooltips for data points
- Use the shared color palette from
CHART_COLORS
.
├── src/
│ ├── components/
│ │ ├── Charts/ # Chart visualization components
│ │ │ ├── Bar.tsx # Bar chart component
│ │ │ ├── Line.tsx # Line chart component
│ │ │ ├── Pie.tsx # Pie chart component
│ │ │ ├── Table.tsx # Table visualization
│ │ │ ├── Utils.tsx # Shared chart utilities
│ │ │ └── index.ts # Chart exports
│ │ ├── Dashboard/ # Dashboard components
│ │ │ └── Visualization.tsx # Dashboard layout and components
│ │ ├── Dashboard.tsx # Main dashboard container
│ │ ├── Footer.tsx # Application footer
│ │ ├── GitHubLogo.tsx # GitHub logo component
│ │ ├── Header.tsx # Application header
│ │ └── Upload.tsx # File upload component
│ ├── utils/
│ │ ├── calculateStats.ts # Statistics calculation utilities
│ │ ├── generateTestData.ts # Test data generation
│ │ └── parseCsv.ts # CSV parsing utilities
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ ├── styles.ts # Shared styles
│ └── types.ts # TypeScript type definitions
├── public/ # Static assets
├── index.html # HTML entry point
├── package.json # Project dependencies
├── tsconfig.json # TypeScript configuration
└── vite.config.ts # Vite configuration
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
MIT License - feel free to use this project for your own purposes.
Built with ❤️ by the Expert Services Team