DevChart is a Flask-based web application designed to visualize coding activity from platforms like GitHub and LeetCode. It generates statistical charts that represent a user's coding contributions over time, offering both JSON data and SVG visuals. You can use these charts to showcase your coding progress, share your achievements, or analyze your coding habits on your own blog or website.
Inspired by githubchart-api and githubchart developed on Ruby, I ported it to Python Flask to support more features and platforms. E.g dark and light mode depending on user preference, and more platforms...
The reason I chose Python Flask is that it is more flexible. It is also more familiar to me, as a Data Engineer, Python would have more styles and libraries, such as matplotlib, pandas, etc,... to have more elegant and customizable charts. The output svg is also great, easy to scale rather than png or jpg.
- GitHub Contribution Chart: Visualize your GitHub contributions in a calendar heatmap.
- LeetCode Submission Chart: Get insights into your LeetCode submission in a calendar heatmap.
- Supports output in both JSON and SVG formats for easy integration and sharing.
- (In-Progress) Deploy to user own GitHub Actions for automatic updates. Then you can use the generated SVG link directly
- Support more platforms like Codeforces, AtCoder, etc.
- Customizable chart styles and colors.
- Developed in Python 3.11.9. For lower please help check compatibility.
- pip (Python package installer)
- Clone the repository to your local machine:
git clone https://github.com/zhenyuan0502/DevChart.git
- Run
init.ps1to install the required Python packages as well as .env - Run
run.ps1orF5to start the local Flask server onhttp://localhost:5000 - Use the following endpoints to generate coding activity charts
GitHub
- `http://localhost:5000/api/github/<username>/svg` to get GitHub contribution chart data in light mode
- `http://localhost:5000/api/github/<username>/svg?theme_mode=dark` to get GitHub contribution chart data with dark theme
- `http://localhost:5000/api/github/<username>/svg?mode=test&theme_mode=dark` to simulate GitHub contribution chart data with dark theme
- `http://localhost:5000/api/github/<username>/json` to get GitHub contribution chart data in JSON format
The same with LeetCode:
- `http://localhost:5000/api/leetcode/<username>/svg` to get LeetCode submission chart data
- `http://localhost:5000/api/leetcode/<username>/json` to get LeetCode submission chart data in JSON format
- Deploy to your own server or cloud service to share your coding activity with others! I would gladly ask for web-host sponsorship if you have one :)
For some reason, if you don't have a server to host the application, you can use GitHub Actions to update the chart automatically after a period of time. Since the chart is less change and mostly depending on your frequent coding activity, you can set the update time to be daily, weekly, or monthly in the GitHub Actions workflow.
The idea is to use GitHub Actions to run the script to update the chart and push it back to the repository. Because GitHub provided CDN for the raw content, so you can use the link directly in your blog or website
<img src="https://raw.githubusercontent.com/<username>/DevChart/main/assets/github_dark.svg" />
These are few items to be done:
- GitHub Actions workflow to fetch and push commit to the repository
- More generic parameters for the workflow
- Guidance here
- In GitHub chart, sometime you may see it is not equal to the actual GitHub contribution chart in your profile, e.g 230 in your view but 225 in your incognitor view, it may be having caching issue or GitHub API...
- Flask
- July (customized) https://github.com/e-hulten/july
- Calmap https://github.com/MarvinT/calmap/
Contributions are welcome! Feel free to submit a pull request or open an issue if you have any suggestions or ideas for improvement.
Under MIT License.
For you information, this README is mostly written by GitHub Copilot, as well as coding part :)