Updating Gitgraph docs

This commit is contained in:
ashishj
2022-04-07 20:13:15 +02:00
parent 529384c4ba
commit 8b29fbe98e
10 changed files with 401 additions and 85 deletions

View File

@@ -26,24 +26,28 @@
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid2" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%% %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": {
"gitBranchLabel0": "#ff0000",
"gitBranchLabel1": "#00ff00",
"gitBranchLabel2": "#0000ff",
"git0": "#550055"
} } }%%
gitGraph gitGraph
commit "Ashish" commit
branch newbranch branch develop
checkout newbranch commit tag:"v1.0.0"
commit id:"1111" commit
commit tag:"test"
checkout main checkout main
commit type: HIGHLIGHT commit type: HIGHLIGHT
commit commit
merge newbranch merge develop
commit commit
branch b2 branch featureA
commit commit
</div> </div>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph gitGraph
commit type:HIGHLIGHT commit type:HIGHLIGHT
branch hotfix branch hotfix
@@ -101,9 +105,10 @@
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'dark', //theme: 'dark',
// themeVariables: { themeVariables: {
// primaryColor: '#9400D3', commitLabelColor: '#9400D3',
commitLabelBackground: '#FFFFFF',
// darkMode: true, // darkMode: true,
// background: '#222', // background: '#222',
// // textColor: 'white', // // textColor: 'white',
@@ -112,7 +117,7 @@
// // // nodeBkg: '#ff0000', // // // nodeBkg: '#ff0000',
// // // mainBkg: '#0000ff', // // // mainBkg: '#0000ff',
// // // tertiaryColor: '#ffffcc', // // // tertiaryColor: '#ffffcc',
// }, },
// theme: 'forest', // theme: 'forest',
// theme: 'neutral', // theme: 'neutral',
// theme: 'dark', // theme: 'dark',

View File

@@ -43,7 +43,7 @@
</div> </div>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
%%{init: { "gitGraph": { "showBranches": false, "mainBranchName": "APA" }}}%% %%{init: { "gitGraph": { "showBranches": true, "mainBranchName": "APA" }}}%%
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -55,14 +55,14 @@
branch featureB branch featureB
checkout featureB checkout featureB
commit type:HIGHLIGHT commit type:HIGHLIGHT
checkout main checkout APA
checkout hotfix checkout hotfix
commit type:NORMAL commit type:NORMAL
checkout develop checkout develop
commit type:REVERSE commit type:REVERSE
checkout featureB checkout featureB
commit commit
checkout main checkout APA
merge hotfix merge hotfix
checkout featureB checkout featureB
commit commit
@@ -80,10 +80,10 @@
branch release branch release
checkout release checkout release
commit commit
checkout main checkout APA
commit commit
checkout release checkout release
merge main merge APA
checkout develop checkout develop
merge release merge release

View File

@@ -14,6 +14,7 @@
- [Gantt](gantt.md) - [Gantt](gantt.md)
- [Pie Chart](pie.md) - [Pie Chart](pie.md)
- [Requirement Diagram](requirementDiagram.md) - [Requirement Diagram](requirementDiagram.md)
- [Gitgraph (Git) Diagram 🔥🔥🔥](gitgraph.md)
- [Other Examples](examples.md) - [Other Examples](examples.md)
- ⚙️ Deployment and Configuration - ⚙️ Deployment and Configuration

View File

@@ -3,7 +3,7 @@
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md) **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches. > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
These kind of diagram are particularyly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works. These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.
Mermaid can render Git diagrams Mermaid can render Git diagrams
@@ -28,11 +28,11 @@ In Mermaid, we support the basic git operations like:
- *merge* : To merge an existing branch onto the current branch. - *merge* : To merge an existing branch onto the current branch.
With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly. With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly.
Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid. Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.
## Syntax ## Syntax
Mermaid syntax for Gitgraph is very straigth-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurance/presence in code. Basically, it follows the insertion order for each command. Mermaid syntax for Gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.
First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly. First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.
@@ -84,7 +84,7 @@ Let us see how these different commit type look with the help of the following d
commit commit
commit id: "Reverse" type: REVERSE commit id: "Reverse" type: REVERSE
commit commit
commit id: "Hightlight" type: HIGHLIGHT commit id: "Highlight" type: HIGHLIGHT
commit commit
``` ```
@@ -104,7 +104,7 @@ Let us see how this works with the help of the following diagram:
commit commit
commit id: "Reverse" type: REVERSE tag: "RC_1" commit id: "Reverse" type: REVERSE tag: "RC_1"
commit commit
commit id: "Hightlight" type: HIGHLIGHT tag: "8.8.4" commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
commit commit
``` ```
@@ -182,9 +182,145 @@ After this we made use of the `checkout` keyword to set the current branch as `m
After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit. After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit.
Since the current branch at this point is still `main`, the last two commits are registered against that. Since the current branch at this point is still `main`, the last two commits are registered against that.
## Gitgraph specific configuration options
In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram.
- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram.
- `mainBranchName` : String, default is `main`. The name of the default/root branch.
Let's look at them one by one.
## Hiding Branch names and lines
Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. Bye default its value is `true`. You can set it to false using directives
Usage example:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
## Hiding commit labels
Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
Usage example:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
## Customizing the main/default branch name
Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.
Usage example:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
gitGraph
commit id:"NewYork"
commit id:"Dallas"
branch MetroLine2
commit id:"LosAngeles"
commit id:"Chicago"
commit id:"Houston"
branch MetroLine3
commit id:"Phoenix"
commit type: HIGHLIGHT id:"Denver"
commit id:"Boston"
checkout MetroLine1
commit id:"Atlanta"
merge MetroLine3
commit id:"Miami"
commit id:"Washington"
merge MetroLine2
commit id:"Boston"
commit id:"Detroit"
commit type:REVERSE id:"SanFrancisco"
```
Looks at the imaginary rail road map created using these Mermaid. Here, we have changed the default main branch name to `MetroLine1`.
## Themes ## Themes
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about themeing your diagram [here](./theming.md). Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md).
Following are the different pre-defined theme options: Following are the different pre-defined theme options:
- `base` - `base`
@@ -435,3 +571,171 @@ Let's put them to use, add see how our sample diagram looks like in different th
``` ```
## Customize using Theme Variables ## Customize using Theme Variables
Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram.
For understanding let us take a sample diagram with theme `default`, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables.
See how the default theme is used to set the colors for the branches:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
### Customizing branch colors
You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.
NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
Example:
Now let's override the default values for the `git0` to `git3` variables:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'git0': '#ff0000',
'git1': '#00ff00',
'git2': '#0000ff',
'git3': '#ff00ff',
'git4': '#00ffff',
'git5': '#ffff00',
'git6': '#ff00ff',
'git7': '#00ffff'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the branch colors are changed to the values specified in the theme variables.
### Customizing branch label colors
You can customize the branch label colors using the `gitBranchLabel0` to `gitBranchLabel7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `gitBranchLabel0` variable will drive the value of the first branch label, `gitBranchLabel1` will drive the value of the second branch label and so on.
Lets see how the default theme is used to set the colors for the branch labels:
Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'gitBranchLabel0': '#ff0000',
'gitBranchLabel1': '#00ff00',
'gitBranchLabel2': '#0000ff'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the branch label colors are changed to the values specified in the theme variables.
### Customizing Commit colors
You can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively.
Example:
Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'commitLabelColor': '#ff0000',
'commitLabelBackground': '#00ff00'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the commit label color and background color are changed to the values specified in the theme variables.
### Customizing Tag colors
You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.
Example:
Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'tagLabelColor': '#ff0000',
'tagLabelBackground': '#00ff00',
'tagLabelBorder': '#0000ff'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the tag colors are changed to the values specified in the theme variables.
### Customizing Highlight commit colors
You can customize the highlight commit colors in relation to the branch it is on using the `gitInv0` to `gitInv7` theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where `gitInv0` variable will drive the value of the first branch's highlight commits, `gitInv1` will drive the value of the second branch's highlight commit label and so on.
Example:
Now let's override the default values for the `git0` to `git3` variables:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'gitInv0': '#ff0000'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
Se how the highlight commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.

View File

@@ -2,11 +2,15 @@ import { log } from '../../logger';
import { random } from '../../utils'; import { random } from '../../utils';
import mermaidAPI from '../../mermaidAPI'; import mermaidAPI from '../../mermaidAPI';
import * as configApi from '../../config'; import * as configApi from '../../config';
import { getConfig } from '../../config';
import common from '../common/common'; import common from '../common/common';
let mainBranchName = getConfig().gitGraph.mainBranchName;
let commits = {}; let commits = {};
let head = null; let head = null;
let branches = { main: head }; let branches = {};
let curBranch = 'main'; branches[mainBranchName] = head;
let curBranch = mainBranchName;
let direction = 'LR'; let direction = 'LR';
let seq = 0; let seq = 0;
@@ -316,8 +320,10 @@ export const prettyPrint = function () {
export const clear = function () { export const clear = function () {
commits = {}; commits = {};
head = null; head = null;
branches = { main: head }; let mainBranch = getConfig().gitGraph.mainBranchName;
curBranch = 'main'; branches = {};
branches[mainBranch] = null;
curBranch = mainBranch;
seq = 0; seq = 0;
}; };

View File

@@ -206,14 +206,14 @@ class Theme {
this.git6 = darken(this.git6, 25); this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25); this.git7 = darken(this.git7, 25);
} }
this.gitInv0 = invert(this.git0); this.gitInv0 = this.gitInv0 || invert(this.git0);
this.gitInv1 = invert(this.git1); this.gitInv1 = this.gitInv1 || invert(this.git1);
this.gitInv2 = invert(this.git2); this.gitInv2 = this.gitInv2 || invert(this.git2);
this.gitInv3 = invert(this.git3); this.gitInv3 = this.gitInv3 || invert(this.git3);
this.gitInv4 = invert(this.git4); this.gitInv4 = this.gitInv4 || invert(this.git4);
this.gitInv5 = invert(this.git5); this.gitInv5 = this.gitInv5 || invert(this.git5);
this.gitInv6 = invert(this.git6); this.gitInv6 = this.gitInv6 || invert(this.git6);
this.gitInv7 = invert(this.git7); this.gitInv7 = this.gitInv7 || invert(this.git7);
this.branchLabelColor = this.branchLabelColor =
this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor); this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor; this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;

View File

@@ -197,14 +197,14 @@ class Theme {
this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10); this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10);
this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10); this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10);
this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20); this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20);
this.gitInv0 = invert(this.git0); this.gitInv0 = this.gitInv0 || invert(this.git0);
this.gitInv1 = invert(this.git1); this.gitInv1 = this.gitInv1 || invert(this.git1);
this.gitInv2 = invert(this.git2); this.gitInv2 = this.gitInv2 || invert(this.git2);
this.gitInv3 = invert(this.git3); this.gitInv3 = this.gitInv3 || invert(this.git3);
this.gitInv4 = invert(this.git4); this.gitInv4 = this.gitInv4 || invert(this.git4);
this.gitInv5 = invert(this.git5); this.gitInv5 = this.gitInv5 || invert(this.git5);
this.gitInv6 = invert(this.git6); this.gitInv6 = this.gitInv6 || invert(this.git6);
this.gitInv7 = invert(this.git7); this.gitInv7 = this.gitInv7 || invert(this.git7);
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor; this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor; this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;

View File

@@ -228,22 +228,22 @@ class Theme {
this.git6 = darken(this.git6, 25); this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25); this.git7 = darken(this.git7, 25);
} }
this.gitInv0 = darken(invert(this.git0), 25); this.gitInv0 = this.gitInv0 || darken(invert(this.git0), 25);
this.gitInv1 = invert(this.git1); this.gitInv1 = this.gitInv1 || invert(this.git1);
this.gitInv2 = invert(this.git2); this.gitInv2 = this.gitInv2 || invert(this.git2);
this.gitInv3 = invert(this.git3); this.gitInv3 = this.gitInv3 || invert(this.git3);
this.gitInv4 = invert(this.git4); this.gitInv4 = this.gitInv4 || invert(this.git4);
this.gitInv5 = invert(this.git5); this.gitInv5 = this.gitInv5 || invert(this.git5);
this.gitInv6 = invert(this.git6); this.gitInv6 = this.gitInv6 || invert(this.git6);
this.gitInv7 = invert(this.git7); this.gitInv7 = this.gitInv7 || invert(this.git7);
this.gitBranchLabel0 = invert(this.labelTextColor); this.gitBranchLabel0 = this.gitBranchLabel0 || invert(this.labelTextColor);
this.gitBranchLabel1 = this.labelTextColor; this.gitBranchLabel1 = this.gitBranchLabel1 || this.labelTextColor;
this.gitBranchLabel2 = this.labelTextColor; this.gitBranchLabel2 = this.gitBranchLabel2 || this.labelTextColor;
this.gitBranchLabel3 = invert(this.labelTextColor); this.gitBranchLabel3 = this.gitBranchLabel3 || invert(this.labelTextColor);
this.gitBranchLabel4 = this.labelTextColor; this.gitBranchLabel4 = this.gitBranchLabel4 || this.labelTextColor;
this.gitBranchLabel5 = this.labelTextColor; this.gitBranchLabel5 = this.gitBranchLabel5 || this.labelTextColor;
this.gitBranchLabel6 = this.labelTextColor; this.gitBranchLabel6 = this.gitBranchLabel6 || this.labelTextColor;
this.gitBranchLabel7 = this.labelTextColor; this.gitBranchLabel7 = this.gitBranchLabel7 || this.labelTextColor;
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor; this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor; this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;

View File

@@ -198,14 +198,14 @@ class Theme {
this.git6 = darken(this.git6, 25); this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25); this.git7 = darken(this.git7, 25);
} }
this.gitInv0 = invert(this.git0); this.gitInv0 = this.gitInv0 || invert(this.git0);
this.gitInv1 = invert(this.git1); this.gitInv1 = this.gitInv1 || invert(this.git1);
this.gitInv2 = invert(this.git2); this.gitInv2 = this.gitInv2 || invert(this.git2);
this.gitInv3 = invert(this.git3); this.gitInv3 = this.gitInv3 || invert(this.git3);
this.gitInv4 = invert(this.git4); this.gitInv4 = this.gitInv4 || invert(this.git4);
this.gitInv5 = invert(this.git5); this.gitInv5 = this.gitInv5 || invert(this.git5);
this.gitInv6 = invert(this.git6); this.gitInv6 = this.gitInv6 || invert(this.git6);
this.gitInv7 = invert(this.git7); this.gitInv7 = this.gitInv7 || invert(this.git7);
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor; this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor; this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;

View File

@@ -230,14 +230,14 @@ class Theme {
this.git6 = this.pie7 || adjust(this.primaryColor, { h: +60 }); this.git6 = this.pie7 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.pie8 || adjust(this.primaryColor, { h: +120 }); this.git7 = this.pie8 || adjust(this.primaryColor, { h: +120 });
this.gitInv0 = invert(this.git0); this.gitInv0 = this.gitInv0 || invert(this.git0);
this.gitInv1 = invert(this.git1); this.gitInv1 = this.gitInv1 || invert(this.git1);
this.gitInv2 = invert(this.git2); this.gitInv2 = this.gitInv2 || invert(this.git2);
this.gitInv3 = invert(this.git3); this.gitInv3 = this.gitInv3 || invert(this.git3);
this.gitInv4 = invert(this.git4); this.gitInv4 = this.gitInv4 || invert(this.git4);
this.gitInv5 = invert(this.git5); this.gitInv5 = this.gitInv5 || invert(this.git5);
this.gitInv6 = invert(this.git6); this.gitInv6 = this.gitInv6 || invert(this.git6);
this.gitInv7 = invert(this.git7); this.gitInv7 = this.gitInv7 || invert(this.git7);
this.branchLabelColor = this.branchLabelColor || this.labelTextColor; this.branchLabelColor = this.branchLabelColor || this.labelTextColor;
this.gitBranchLabel0 = this.branchLabelColor; this.gitBranchLabel0 = this.branchLabelColor;