{"id":16327234,"url":"https://github.com/ferg1e/mrs-green-squares","last_synced_at":"2026-05-03T05:39:56.748Z","repository":{"id":151226706,"uuid":"62584782","full_name":"ferg1e/mrs-green-squares","owner":"ferg1e","description":"Git commit visualization","archived":false,"fork":false,"pushed_at":"2024-11-12T23:47:46.000Z","size":82,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-17T06:42:51.935Z","etag":null,"topics":["commit-visualization","commits","git","git-visualization","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ferg1e.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-04T19:50:47.000Z","updated_at":"2024-11-13T18:23:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"d4eeab39-1b6d-4afd-8806-b4b690399479","html_url":"https://github.com/ferg1e/mrs-green-squares","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferg1e%2Fmrs-green-squares","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferg1e%2Fmrs-green-squares/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferg1e%2Fmrs-green-squares/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ferg1e%2Fmrs-green-squares/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ferg1e","download_url":"https://codeload.github.com/ferg1e/mrs-green-squares/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254239940,"owners_count":22037798,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["commit-visualization","commits","git","git-visualization","visualization"],"created_at":"2024-10-10T23:10:44.935Z","updated_at":"2026-05-03T05:39:51.731Z","avatar_url":"https://github.com/ferg1e.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mrs. Green Squares\n\nMrs. Green Squares visualizes the commits in local Git repositories.\nThe layout is almost identical to the GitHub commits visualization, but this tool also shows commit messages and you can group repos into different colors.\nThe output format is an HTML file.\n\n![Sample Visualization](/img/ss001.png?raw=true)\n\n## Install \u0026 Run\n\n- `git clone https://github.com/ferg1e/mrs-green-squares.git git-vis`\n- `cd git-vis`\n- `npm install`\n- edit the `repos` value in `src/config.json` to point to a directory that has a Git repo\n- `node src/index.js`\n- your commits visualization will now be in `git-vis/index.html`\n\n## Config\n\nConfigure the Git repositories you want to visualize using `src/config.json`. And then generate the visualization by running `node src/index.js`. The generated visualization will output to `index.html` unless you specify a different `output_path`.\n\n### Single Repository\n\nFor visualizing a single Git repository, you will probably want to use this for your `src/config.json`:\n\n```json\n{\n    \"projects\": [\n        {\n            \"repos\": \"C:/path/to/my/repo\"\n        }\n    ],\n    \"page_title\": \"Project Title\",\n    \"is_project_titles\": false\n}\n```\n\nWe used the `page_title` for a project title and we turned off project titles by setting `is_project_titles` to `false`.\n\n### Change Square Color\n\nYou can change the square colors by using a group with an `id` equal to `default`:\n\n```json\n{\n    \"projects\": [\n        {\n            \"repos\": \"C:/path/to/my/repo\"\n        }\n    ],\n    \"groups\": [\n        {\n            \"title\": \"Default\",\n            \"id\": \"default\",\n            \"colors\": [\"aa0000\"]\n        }\n    ],\n    \"page_title\": \"Project Title\",\n    \"is_project_titles\": false\n}\n```\n\nThe default square color is `00aa00` and here we changed it to a reddish `aa0000`.\n\n### Multiple Repositories\n\nIf you want to visualize multiple projects at once, then you should use `title`s for projects, remove `is_project_titles` (the default is `true`) and use a more general `page_title`:\n\n```json\n{\n    \"projects\": [\n        {\n            \"title\": \"Todo App\",\n            \"repos\": \"C:/path/to/my/repo\"\n        },\n        {\n            \"title\": \"E-commerce Site\",\n            \"repos\": \"C:/path/to/my/other/repo\"\n        }\n    ],\n    \"page_title\": \"My Python Projects\"\n}\n```\n\n### Multiple Square Colors\n\nYou can use different square colors for different projects by using multiple groups:\n\n```json\n{\n    \"projects\": [\n        {\n            \"title\": \"Todo App\",\n            \"repos\": \"C:/path/to/my/repo\",\n            \"group\": \"todo_app\"\n        },\n        {\n            \"title\": \"E-commerce Site\",\n            \"repos\": \"C:/path/to/my/other/repo\",\n            \"group\": \"ecomm\"\n        }\n    ],\n    \"groups\": [\n        {\n            \"title\": \"Todo App\",\n            \"id\": \"todo_app\",\n            \"colors\": [\"00aa00\"]\n        },\n        {\n            \"title\": \"E-commerce Site\",\n            \"id\": \"ecomm\",\n            \"colors\": [\"aa0000\"]\n        }\n    ],\n    \"page_title\": \"My Python Projects\"\n}\n```\n\nIf there is more than one group then a group key will show on the visualization. In this example there is only one project per group but you can assign multiple projects to a group.\n\n### Branches\n\nBy default, only commits from the currently checked out branch will be visualized. But you can select one or more branches to include in the visualization by using `branch` for repos:\n\n```json\n{\n    \"projects\": [\n        {\n            \"repos\": {\n                \"dir\": \"C:/path/to/my/repo\",\n                \"branch\": \"master\"\n            }\n        }\n    ],\n    \"page_title\": \"Project Title\",\n    \"is_project_titles\": false\n}\n```\n\n`branch` can be a single branch as a string, an array of strings for one or more branches, or you can use `\"*\"` to indicate all branches.\n\n### Date Ranges\n\nYou can filter commits by date ranges for repos:\n\n```json\n{\n    \"projects\": [\n        {\n            \"repos\": {\n                \"dir\": \"C:/path/to/my/repo\",\n                \"date_ranges\": [\n                    {\n                        \"min\": \"2011-12-25\",\n                        \"max\": \"2012-02-10\"\n                    }\n                ]\n            }\n        }\n    ],\n    \"page_title\": \"Project Title\",\n    \"is_project_titles\": false\n}\n```\n\nYou can use one or more date ranges (notice how they are in an array), and each date range can use only the `min` or only the `max` (ie. you don't have to use both).\n\n### Filter by Authors\n\nYou can filter commits by author email addresses. This is available on repos, projects, groups and at the root level:\n\n```json\n{\n    \"projects\": [\n        {\n            \"repos\": {\n                \"dir\": \"C:/path/to/my/repo\",\n                \"authors\": [\"mary@site.net\"]\n            },\n            \"authors\": [\"mary@site.net\"]\n        }\n    ],\n    \"groups\": [\n        {\n            \"title\": \"Default\",\n            \"id\": \"default\",\n            \"colors\": [\"aa0000\"],\n            \"authors\": [\"mary@site.net\"]\n        }\n    ],\n    \"page_title\": \"Project Title\",\n    \"is_project_titles\": false,\n    \"authors\": [\"mary@site.net\"]\n}\n```\n\nThe precedence is repo, project, group, root level. For example, if you have an `authors` array on both a repo and the group that repo uses then only the `authors` on the repo will be used.\n\n### Multiple Repos Per Project\n\nA project's `repos` can be an array of repositories. For example, if you have a separate front-end repo and a separate back-end repo for an app, then you would probably want to put both of these repos under the same project like this:\n\n```json\n{\n    \"projects\": [\n        {\n            \"repos\": [\n                \"C:/path/to/my/front-end-repo\",\n                \"C:/path/to/my/back-end-repo\"\n            ]\n        }\n    ],\n    \"page_title\": \"Project Title\",\n    \"is_project_titles\": false\n}\n```\n\nEach repo element can be a directory string (like above) or an object with `dir`, `branch`, `date_ranges` and/or `authors` as demonstrated in previous examples.\n\n### Output Path\n\nBy default your visualization will output to `index.html` but you can change that via `output_path`:\n\n```json\n{\n    \"projects\": [\n        {\n            \"repos\": \"C:/path/to/my/repo\"\n        }\n    ],\n    \"page_title\": \"Project Title\",\n    \"is_project_titles\": false,\n    \"output_path\": \"my-viz.html\"\n}\n```\n\n### Multiple Visualizations\n\nYou can output multiple visualization files with one run of the tool by using a top level array:\n\n```json\n[\n    {\n        \"projects\": [\n            {\n                \"repos\": \"C:/path/to/my/repo\"\n            }\n        ],\n        \"page_title\": \"Project 1\",\n        \"is_project_titles\": false,\n        \"output_path\": \"viz1.html\"\n    },\n    {\n        \"projects\": [\n            {\n                \"repos\": \"C:/path/to/my/other/repo\"\n            }\n        ],\n        \"page_title\": \"Project 2\",\n        \"is_project_titles\": false,\n        \"output_path\": \"viz2.html\"\n    }\n]\n```\n\nBe sure to use a different `output_path` for each.\n\n### Different Colors for Different Authors\n\nYou can use different square colors for different authors by rendering the same repo more than once:\n\n```json\n{\n    \"projects\": [\n        {\n            \"title\": \"Fred\",\n            \"repos\": \"C:/path/to/my/repo\",\n            \"authors\": [\"fred@blah.net\"],\n            \"group\": \"fred\"\n        },\n        {\n            \"title\": \"Joanne\",\n            \"repos\": \"C:/path/to/my/repo\",\n            \"authors\": [\"joanne@meh.com\"],\n            \"group\": \"joanne\"\n        }\n    ],\n    \"groups\": [\n        {\n            \"id\": \"fred\",\n            \"title\": \"Fred\",\n            \"colors\": [\"00aa00\"]\n        },\n        {\n            \"id\": \"joanne\",\n            \"title\": \"Joanne\",\n            \"colors\": [\"aa0000\"]\n        }\n    ],\n    \"page_title\": \"Fred and Joanne's Commits\"\n}\n```\n\n### Five-Color Combinations\n\nA group's `colors` array can be one color (all previous examples) or five colors. Here is a five-color example that is GitHub's colors:\n\n```json\n{\n    \"projects\": [\n        {\n            \"repos\": \"C:/path/to/my/repo\"\n        }\n    ],\n    \"groups\": [\n        {\n            \"title\": \"Default\",\n            \"id\": \"default\",\n            \"colors\": [\"ebedf0\", \"9be9a8\", \"40c463\", \"30a14e\", \"216e39\"]\n        }\n    ],\n    \"page_title\": \"Project Title\",\n    \"is_project_titles\": false\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferg1e%2Fmrs-green-squares","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fferg1e%2Fmrs-green-squares","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fferg1e%2Fmrs-green-squares/lists"}