README.md

This project automates the process of fetching and visualizing traffic data for your public GitHub repositories using GitHub Actions. It periodically retrieves metrics like views and clones and generates traffic charts in SVG format. The generated charts can be easily embedded in your GitHub profile or repository to track project activity.

✨Features

• 🌐Fetch traffic data from GitHub repositories
• 📈Visualize traffic data with customizable charts
• 🎨Support for different themes and background colors
• 🔃Data is automatically refreshed every day

🌟Demo

Here’s an example of a traffic chart generated from a public GitHub repository:

<p align="center">
  <img src="https://raw.githubusercontent.com/FuseFairy/github-profile-repo-analytics/output/generated/traffic_chart.svg" alt="Repos traffic stats" />
</p>

🚀How to Deploy Your Own Instance with GitHub Workflows

Click to expand deployment instructions

1. Create a Personal Access Token

• Go to Personal access tokens (classic) page.
• Create a Personal access tokens (classic) with repo and user permissions to access repository stats.

2. Fork the Repository

• Go to the GitHub repository for this project.
• Click Fork in the upper-right corner to create your own copy.

3. Set Up GitHub Secrets

• Go to your forked repository.
• Navigate to Settings > Secrets and Variables > Actions > New repository secret.
• Add the following secrets:
  • TOKEN: Your personal access token that you created in Step 1.
  • USERNAME: Your GitHub username.

4. Final

• Go to the Actions Page and press "Run Workflow" on the right side of the screen to generate images for the first time.
• Once complete, you can find the generated images in the generated folder under the output branch.

🛠 Configuration (config.yml)

This file allows you to customize the appearance of the generated traffic chart. You can modify the theme, dimensions, colors, and exclude specific repositories.

theme: "tokyo-night"  # The theme used for the chart. Available themes are defined in the "src/themes" folder.
height: 400  # The height of the chart in pixels.
width: 800  # The width of the chart in pixels.
radius: 20  # The corner radius for the chart's rectangular background.
ticks: 5  # The number of y-axis ticks on the chart.

bg_color: "#00000000"  # Background color of the chart in hex format. "#00000000" represents fully transparent black.
clones_color: null  # Stroke color for the clones line. Set to a hex value (e.g., "#FF5733") or leave as `null` for default.
views_color: null  # Stroke color for the views line. Set to a hex value (e.g., "#33FF57") or leave as `null` for default.
clones_point_color: null  # Color for the clone data points on the chart. Set to a hex value or leave as `null` for default.
views_point_color: null  # Color for the view data points on the chart. Set to a hex value or leave as `null` for default.

exclude_repos: ["repo_1", "repo_2"]  # A list of repository names to exclude from the chart. Set to `[]` to include all repositories.

🎨Available Themes

Here are the currently available themes you can use for your traffic charts. The themes are stored in the src/themes directory. Feel free to contribute and add your own themes by submitting a pull request!

Theme	Preview	Theme	Preview
default		cyberpunk
dark-mode		ocean-depth
spring-fresh		tokyo-night

How to Add Your Own Theme 🖌️

1. Create a new JSON file for your theme in the app/themes directory.

2. Follow the existing structure:
   Your theme JSON should follow this structure, where you can customize the background_color, line_colors, text_color, and grid_color for your theme:

   {
     "background_color": "#1a1b27",
     "line_colors": {
       "clones": "#8aadf466",
       "views": "#cba6f766"
     },
     "point_colors": {
       "clones": "#8aadf4",
       "views": "#cba6f7"
     },
     "text_color": "#cdd6f4",
     "grid_color": "#414868"
   }

3. Submit a pull request with your new theme.

Your contribution will help make this project even better! 🚀

License

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