assayo/README.md

> __[English](https://github.com/bakhirev/assayo)__ | [中文](https://github.com/bakhirev/assayo/blob/main/documents/ZH.md) | [Español](https://github.com/bakhirev/assayo/blob/main/documents/ES.md) | [Français](https://github.com/bakhirev/assayo/blob/main/documents/FR.md) | [Português](https://github.com/bakhirev/assayo/blob/main/documents/PT.md) | [Deutsch](https://github.com/bakhirev/assayo/blob/main/documents/DE.md) | [日本語](https://github.com/bakhirev/assayo/blob/main/documents/JA.md) | [Русский](https://github.com/bakhirev/assayo/blob/main/documents/RU.md)

> The [main documentation](https://github.com/bakhirev/assayo/blob/main/documents/RU.md) is in russian. This is a translation. It may contain errors. If you a native speaker, you can help improve this translation. Thanks!

# [Assayo](https://assayo.online/?ref=github)

Visualization and analysis of git commit statistics. Team Lead performance tool.

Links: [demo](https://assayo.online/demo/?ref=github&dump=./test.txt), [install](https://assayo.online/demo/?ref=github), [docker](https://hub.docker.com/r/bakhirev/assayo), [reddit](https://www.reddit.com/r/ITManagers/comments/1e5k291/the_visualization_and_analysis_of_git_commit/), [habr](https://habr.com/ru/articles/763342/).

<a href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/facebook.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://reddit.com/submit?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&title=Visualization%20and%20analysis%20of%20git%20repository" target="_blank"><img src="https://assayo.online/assets/seo/social/reddit.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&text=Visualization%20and%20analysis%20of%20git%20repository%20%3A%20Check%20your%20git%20stats%21&via=&hashtags=IT%2Cgit%2Cstatistics%2Caudit%2Cdata-visualization%2Creport" target="_blank"><img src="https://assayo.online/assets/seo/social/twitter.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/linkedin.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://www.tumblr.com/widgets/share/tool?canonicalUrl=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&title=Visualization%20and%20analysis%20of%20git%20repository&caption=Check%20your%20git%20stats%21&tags=IT%2Cgit%2Cstatistics%2Caudit%2Cdata-visualization%2Creport" target="_blank"><img src="https://assayo.online/assets/seo/social/tumblr.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://www.blogger.com/blog-this.g?u=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&n=Visualization%20and%20analysis%20of%20git%20repository&t=Check%20your%20git%20stats%21" target="_blank"><img src="https://assayo.online/assets/seo/social/blogger.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://www.evernote.com/clip.action?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&title=Visualization%20and%20analysis%20of%20git%20repository%20%3A%20Check%20your%20git%20stats%21" target="_blank"><img src="https://assayo.online/assets/seo/social/evernote.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="http://www.addthis.com/bookmark.php?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/add.this.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://getpocket.com/edit?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/getpocket.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://news.ycombinator.com/submitlink?u=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&t=Visualization%20and%20analysis%20of%20git%20repository" target="_blank"><img src="https://assayo.online/assets/seo/social/hacker.news.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://buffer.com/add?text=Visualization%20and%20analysis%20of%20git%20repository%20%3A%20Check%20your%20git%20stats%21&url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/buffer.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://share.flipboard.com/bookmarklet/popout?v=2&title=Visualization%20and%20analysis%20of%20git%20repository%20%3A%20Check%20your%20git%20stats%21&url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/flipboard.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="http://www.instapaper.com/edit?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&title=Visualization%20and%20analysis%20of%20git%20repository&description=Check%20your%20git%20stats%21" target="_blank"><img src="https://assayo.online/assets/seo/social/instapaper.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://share.diasporafoundation.org/?title=Visualization%20and%20analysis%20of%20git%20repository&url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/diaspora.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/qzone.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="http://vk.com/share.php?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&title=Visualization%20and%20analysis%20of%20git%20repository&comment=Check%20your%20git%20stats%21" target="_blank"><img src="https://assayo.online/assets/seo/social/vk.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="http://service.weibo.com/share/share.php?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&appkey=&title=Visualization%20and%20analysis%20of%20git%20repository&pic=&ralateUid=" target="_blank"><img src="https://assayo.online/assets/seo/social/weibo.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/ok.ru.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="http://www.douban.com/recommend/?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&title=Visualization%20and%20analysis%20of%20git%20repository%20%3A%20Check%20your%20git%20stats%21" target="_blank"><img src="https://assayo.online/assets/seo/social/douban.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://www.xing.com/spi/shares/new?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo" target="_blank"><img src="https://assayo.online/assets/seo/social/xing.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="http://widget.renren.com/dialog/share?resourceUrl=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&srcUrl=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&title=Visualization%20and%20analysis%20of%20git%20repository%20%3A%20Check%20your%20git%20stats%21&description=Check%20your%20git%20stats%21" target="_blank"><img src="https://assayo.online/assets/seo/social/renren.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="threema://compose?text=Visualization%20and%20analysis%20of%20git%20repository%20%3A%20Check%20your%20git%20stats%21&id=" target="_blank"><img src="https://assayo.online/assets/seo/social/threema.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a><a href="https://lineit.line.me/share/ui?url=https%3A%2F%2Fgithub.com%2Fbakhirev%2Fassayo&text=Visualization%20and%20analysis%20of%20git%20repository%20%3A%20Check%20your%20git%20stats%21" target="_blank"><img src="https://assayo.online/assets/seo/social/line.me.jpg" title="Visualization and analysis of git repository" width="24px" height="24px"/></a>
<a href="https://assayo.online/demo/?dump=./test.txt" target="_blank"><img src="https://assayo.online/seo/github/index.gif" width="100%" /></a>

##### 👨‍💻 Employee can evaluate new workplace
- work speed;
- number of extra hours worked;
- areas of competence;
- volume of features and bugs;
- working style of colleagues;

##### ‍👨‍💼 Team lead can evaluate employees
- identify slackers;
- estimate the amount of code;
- learn the work speed;
- notice behavioral anomalies;
- see the dynamics of work by week;

##### 👑 Founder can evaluate product
- product cost;
- cost of features;
- development time;
- forecast of rework time;
- forecast cost;

### Table of contents
- [How to quickly view the number of commits?](#link-1)
- [How to create a report?](#link-1-1)
- [How to concat authors?](#link-2)
- [How to export data from git?](#link-3)
  - [For online viewing](#link-4)
  - [For offline viewing](#link-5)
- [How to view the report?](#link-6)
  - [Online](#link-7)
  - [Offline](#link-8)
- [How to rebuild the HTML report from source code?](#link-9)
- [How to view a report on a group of microservices?](#link-10)
- [How to brand the interface?](#link-11)
- [How to sign commits?](#link-12)
- [How to add checking for commit message?](#link-13)
  - [Use file commit-msg](#link-14)
  - [Use package pre-commit](#link-15)
- [How to automate data collection?](#link-16)
  - [With backend](#link-17)
  - [Without backend](#link-18)
- [DevOps (CI/CD)](#link-19)
  - [Public server](#link-20)
  - [Private server](#link-21)
  - [How to update the Docker image?](#link-22)
- [About application](#link-23)
  - [Architecture](#link-24)
  - [How to add or edit a translation?](#link-25)
  - [RoadMap](#link-26)
  - [Contacts](#link-27)

<a name="link-1"></a>
### 🚀 How to quickly view the number of commits?
In the root directory of your project, run:
```
git shortlog -s -n -e
```

<a name="link-1-1"></a>
### 🚀 How to create a report?
If you have NodeJS, you can run:
```
npx assayo
```
The script will create a folder `./assayo` with a report about repository:
```
./assayo/index.html - report
./assayo/log.txt    - information from git
```
If you do not have NodeJS , see the items "How to download data from git?" and "How to view the report?"

<a name="link-2"></a>
### ‍🎭 How to concat authors?
In the root directory of your project, you need to create a `.mailmap` file.
Example of the contents of the file:
```
Alex B <alex@mail.uk>
Alex B <alex@mail.uk> <alex@gov.tk>
Alex B <alex@mail.uk> <bakhirev@ya.kz>
Alex B <alex@mail.uk> <man64@yahoo.com>
``` 
Read more about the format of this file you can [here](https://git-scm.com/docs/gitmailmap).

<a name="link-3"></a>
### 📤 How to export data from git?

<a name="link-4"></a>
#### For online viewing
In the root directory of your project run:
```
git --no-pager log --raw --numstat --oneline --all --reverse --date=iso-strict --pretty=format:"%ad>%aN>%aE>%s" > log.txt
```
<a name="link-5"></a>
#### For offline viewing
```
git --no-pager log --raw --numstat --raw --oneline --all --reverse --date=iso-strict --pretty=format:"%ad>%aN>%aE>%s" | sed -e 's/\\/\\\\/g' | sed -e 's/`/"/g' | sed -e 's/^/report.push(\`/g' | sed 's/$/\`\);/g' | sed 's/\$/_/g' > log.txt
```
Git will create a file `log.txt`.
This file contains data for show a report.
The difference between the online and offline format is the presence of a wrapper for strings. The offline format will be pulled up like a `js` file if you just opened `/build/index.html `

#### If you use PowerShell in Windows

By default, the output encoding may not match UTF-8 and the resulting log file will be unreadable. Before saving the log, you can change the encoding with the command.

```
[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
```
Or open a saved file and manually change the encoding to UTF8.


<a name="link-6"></a>
### 📈 How to view the report?
<a name="link-7"></a>
#### Online
- go to the [website](https://assayo.online/);
- click the “[Demo](https://assayo.online/demo)” button;
- drop the `log.txt` file into the browser window;

<a name="link-8"></a>
#### Offline (NodeJS)
- run `npx assayo`
- open `./assayo/index.html`
#### Offline
- download this repository `git clone https://github.com/bakhirev/assayo.git`;
- drop the `log.txt` file to the `/build` folder;
- run `/build/index.html`;
- or drop the `/build` folder to your repository (where the `log.txt` is located). You can change the name. For example, from `/build` to `/report`.
  In this case, it is important that the `log.txt` file is generated by the command for offline viewing.

<a name="link-9"></a>
### 🏭 How to rebuild the HTML report from source code?
- download this repository `git clone https://github.com/bakhirev/assayo.git`
- run `npm install`
- run `npm run build:local`
- the new HTML build will be in the `/build` folder

<a name="link-10"></a>
### 🗃️ How to view a report on a group of microservices?
- generate for each microservice file `log.txt` (`log-1.txt`, `log-2.txt`, `log-3.txt` and etc.) You can do this manually, or use the [Assayo Crawler](https://github.com/bakhirev/assayo-crawler) module for automatic log collection;
- see “How to view an online report?”. At the last step, drag all the files at once into the browser window.
- see “How to see a report offline?”. At the second step, drag all microservice files (`log-1.txt`, `log-2.txt`, `log-3.txt` and etc.) to the report folder (`/build`).

<a name="link-11"></a>
### 🎨 How to brand the interface?
You can create your own interface theme. Options:
- **Title**. You can set default document title in the URL parameter ```title```. Example: ```?title=You Company```
- **Visual theme**. To do this, you need to prepare a CSS file with new styles and specify its URL in the ```theme``` parameter. Example: ```?theme=//company.com/some.css```. You can use class names as selectors. Most of them do not change in new versions.
- **Language**. You can set language in the URL parameter ```lang```. Example: ```?lang=es```

<a name="link-12"></a>
### 📝 How to sign commits?
Follow the [Conventional Commits 1.0.0](https://www.conventionalcommits.org/en/v1.0.0/). Example:
```
JIRA-1234 feat(profile): Added avatar for user 
```
- task number in the task tracker `(JIRA-1234)`
- type of work `(feat, fix, style, refactor, test, doc и т.д.)`
- feature `(profile - new page on site or new function, use one (two) short wordor an abbreviation)`
- what problem were solved `(Added avatar for user)`

<a name="link-13"></a>
### 👮 How to add checking for commit message?

<a name="link-14"></a>
#### Use file `commit-msg`
1. Create file `commit-msg` in folder `.git/hooks/`
2. Add this text in file:
```
#!/usr/bin/env bash
if ! grep -iqE "(JIRA-[0-9]{1,5})(\s)(feat|fix|docs|style|refactor|test|chore)((\([a-z0-9_-]{1,}\)){0,})(:\s)([a-z]{1,})" "$1"; then
   echo "Need commit message like: JIRA-12 fix(profile): some text. Read Semantic Commit Messages" >&2
   exit 1
fi
```
<a name="link-15"></a>
#### Use package [pre-commit](https://www.npmjs.com/package/pre-commit)
1. Add in file `package.json` property `commit-msg`:
```
  ...
  "commit-msg": {
    "regex": "(JIRA-[0-9]{1,5})(\\s)(feat|fix|docs|style|refactor|test|chore)((\\([a-z0-9_-]{1,}\\)){0,})(:\\s)([a-z]{1,})",
    "error-message": "Need commit message like: JIRA-12 fix(profile): some text Read Semantic Commit Messages"
  },
  ...
```
2. Run command `npm install pre-commit`

<a name="link-16"></a>
### 📚 How to automate data collection?

<a name="link-17"></a>
#### With backend
- use module [Assayo Crawler](https://github.com/bakhirev/assayo-crawler);

<a name="link-18"></a>
#### Without backend
- create a clone of the repository you need;
- copy the `build` folder to the root;
- open `build/index.html` in the browser and add it to bookmarks;
- add a shortcut to `build/assets/ci-cd.sh` to the startup folder (Windows);
  Every time you restart the computer, the script will update statistics on all the data that automatically merged into the main branch.

<a name="link-19"></a>
### 🛠️ DevOps (CI/CD)

<a name="link-20"></a>
#### Public server
You can upload the data file for report construction to a public URL. And use the website’s [assayo](https://assayo.online/?ref=github) to visualize it.
```
https://assayo.online/demo/?dump=//you_site.com/some/log.txt
```

<a name="link-21"></a>
#### Private server
- download the [docker image](https://hub.docker.com/r/bakhirev/assayo);
- run it on your local network;
- use the web interface to view the reports, set the URL of the data in the URL parameter ```dump```:
```
http://assayo_url/?dump=//you_url/some/log.txt
assayo_url - URL of the assayo container, it listens on port 80;
you_url    - URL of your container with git logs;
```
By default, the image will run at ```http://127.0.0.1:80/```. If it doesn't work, check if port 80 is free.

<a name="link-22"></a>
#### How to update the Docker image?
- run ```npm run build:docker```
- run ```docker build -t assayo .```
- visually check the image ```docker run --name assayo -p 80:80 -d assayo```;
- add tag ```docker tag assayo bakhirev/assayo:latest```;
- push image to [Docker Hub](https://hub.docker.com/r/bakhirev/assayo) ```docker push bakhirev/assayo:latest```;

<a name="link-23"></a>
### ️ 🛠️ About application
<a name="link-24"></a>

#### 📐 Architecture
<img src="https://raw.githubusercontent.com/bakhirev/assayo-crawler/12af4410fc93384cafb108a4429e43f9a874dbaa/schema.svg" width="70%" />

1. [Reports showcase UI](https://github.com/bakhirev/assayo-showcase) displays a list of available reports. Each report consists of a title, description, and a list of repositories.
2. [Crawler service](https://github.com/bakhirev/assayo-crawler) collects repository logs for the report.
3. [Log visualization UI](https://github.com/bakhirev/assayo) **(you here)** displays report. Needs a log file for work.

<a name="link-25"></a>
#### 🈯 How to add or edit a translation?
You can add a new translation or correct an existing one in the ```ts/translations/``` folder.
[Instruction](https://github.com/firstcontributions/first-contributions)

<a name="link-26"></a>
#### 🗺️ RoadMap:
Releases are planned approximately once every six months. What’s next:
- more recommendations and achievements;
- annual/monthly summaries, report printing;
- localization and internationalization;
- file analysis;
- different roles for statistics (hiding finances);
- development of the backend, integration with other systems;

<a name="link-27"></a>
#### 📬 Feedback, suggestions, comments
- <img alt="Telegram Messenger" src="https://telegram.org/img/website_icon.svg?4" style="vertical-align: middle;" /> [@bakhirev](https://t.me/bakhirev) (preferred method of communication)
- 📧 [alexey-bakhirev@yandex.ru](mailto:alexey-bakhirev@yandex.ru)
- 🌐 [https://assayo.online/](https://assayo.online/?ref=github)

<img src="https://mc.yandex.ru/watch/94903985" style="position:absolute; left:-9999px;" alt="" />