assets/metrics/habits.svg

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="363" class="">
    <defs>
        <style/>
    </defs>
    <style>@keyframes animation-gauge{0%{stroke-dasharray:0 329}}@keyframes animation-rainbow{0%,to{color:#7f00ff;fill:#7f00ff}14%{color:#a933ff;fill:#a933ff}29%{color:#007fff;fill:#007fff}43%{color:#00ff7f;fill:#00ff7f}57%{color:#ff0;fill:#ff0}71%{color:#ff7f00;fill:#ff7f00}86%{color:red;fill:red}}svg{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;color:#777}h2,h3{margin:8px 0 2px;padding:0;color:#0366d6;font-weight:400}h2 svg,h3 svg{fill:currentColor}h2{font-size:16px}h3,svg{font-size:14px}.h-details{margin:0 4px;padding-top:4px;font-size:.8rem}section&gt;.field{margin-left:5px;margin-right:5px}.field{display:flex;align-items:center;margin-bottom:2px;white-space:nowrap}.field.wrap,.row{flex-wrap:wrap}.field svg{margin:0 8px;fill:#959da5;flex-shrink:0}.row{display:flex}.horizontal .field,.row section{flex:1 1 0}.column{display:flex;flex-direction:column;align-items:center}.horizontal{justify-content:space-around}svg.bar{margin:4px 0}.habits .facts{margin:0;list-style-type:none;padding-left:37px}.chart{padding:0 8px}.chart-bars{display:flex;justify-content:space-between;align-items:flex-end;width:100%;margin:8px 0 4px;flex-grow:1;min-height:70px}.chart-bars .entry{flex-grow:1;display:flex;flex-direction:column;align-items:center;font-size:10px;color:#666}.chart-bars .entry .value{font-size:6px}.chart-bars .bar{width:7px;background-color:var(--color-calendar-graph-day-bg);border:1px solid var(--color-calendar-graph-day-border);border-radius:5px}.chart-bars.horizontal{flex-direction:column;height:100%}.chart-bars.horizontal .entry{align-items:center;flex-direction:row;width:100%;min-height:1rem}.activity .field,.chart-bars.horizontal .entry .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-bars.horizontal .entry .name{flex-shrink:0;text-align:right;width:34%}.chart-bars.horizontal .bar{height:7px;width:auto;margin:0 6px}.activity{margin-bottom:12px}.activity .field{width:100%;max-width:450px;margin-bottom:0}.activity .code,code,span.code{background-color:#7777771f;border-radius:6px;color:#777;padding:1px 5px;font-size:80%;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.activity .code,span.code{margin:0 4px -3px}code{display:inline-block}:root{--color-calendar-graph-day-bg:#ebedf0;--color-calendar-graph-day-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L1-bg:#9be9a8;--color-calendar-graph-day-L2-bg:#40c463;--color-calendar-graph-day-L3-bg:#30a14e;--color-calendar-graph-day-L4-bg:#216e39;--color-calendar-halloween-graph-day-L1-bg:#ffee4a;--color-calendar-halloween-graph-day-L2-bg:#ffc501;--color-calendar-halloween-graph-day-L3-bg:#fe9600;--color-calendar-halloween-graph-day-L4-bg:#03001c;--color-calendar-winter-graph-day-L1-bg:#0a3069;--color-calendar-winter-graph-day-L2-bg:#0969da;--color-calendar-winter-graph-day-L3-bg:#54aeff;--color-calendar-winter-graph-day-L4-bg:#b6e3ff;--color-calendar-graph-day-L4-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L3-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L2-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L1-border:rgba(27,31,35,0.06)}#metrics-end{width:100%}</style>
    <style/>
    <foreignObject x="0" y="0" width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" class="items-wrapper">
            <section class="habits">
                <h2 class="field wrap">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                        <path fill-rule="evenodd" d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 01-1.484.211c-.04-.282-.163-.547-.37-.847a8.695 8.695 0 00-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.75.75 0 01-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75zM6 15.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75zM5.75 12a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/>
                    </svg>
                    Recent coding habits
                    <small class="h-details">(computed from last 67 commits)</small>
                </h2>
                <div class="row">
                    <ul class="facts">
                        <li>Uses spaces for indentation</li>
                        <li>Has approximately 54.4 characters per line of code written</li>
                        <li>Mostly pushes code around 16:00</li>
                        <li>Mostly active on Wednesday</li>
                    </ul>
                </div>
            </section>
            <section class="habits">
                <div class="column chart largeable">
                    <h3>Commit activity per hour of day</h3>
                    <div class="chart-bars">
                        <div class="entry">
                            <span class="value">4</span>
                            <div class="bar" style="height: 22.22222222222222px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            00
                        </div>
                        <div class="entry">
                            <span class="value">2</span>
                            <div class="bar" style="height: 11.11111111111111px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            01
                        </div>
                        <div class="entry">
                            <span class="value">4</span>
                            <div class="bar" style="height: 22.22222222222222px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            02
                        </div>
                        <div class="entry">
                            <span class="value">1</span>
                            <div class="bar" style="height: 5.555555555555555px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            03
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            04
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            05
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            06
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            07
                        </div>
                        <div class="entry">
                            <span class="value">1</span>
                            <div class="bar" style="height: 5.555555555555555px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            08
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            09
                        </div>
                        <div class="entry">
                            <span class="value">2</span>
                            <div class="bar" style="height: 11.11111111111111px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            10
                        </div>
                        <div class="entry">
                            <span class="value">4</span>
                            <div class="bar" style="height: 22.22222222222222px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            11
                        </div>
                        <div class="entry">
                            <span class="value">5</span>
                            <div class="bar" style="height: 27.77777777777778px; background-color: var(--color-calendar-graph-day-L3-bg)"></div>
                            12
                        </div>
                        <div class="entry">
                            <span class="value">3</span>
                            <div class="bar" style="height: 16.666666666666664px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            13
                        </div>
                        <div class="entry">
                            <span class="value">2</span>
                            <div class="bar" style="height: 11.11111111111111px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            14
                        </div>
                        <div class="entry">
                            <span class="value">8</span>
                            <div class="bar" style="height: 44.44444444444444px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                            15
                        </div>
                        <div class="entry">
                            <span class="value">9</span>
                            <div class="bar" style="height: 50px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                            16
                        </div>
                        <div class="entry">
                            <span class="value">3</span>
                            <div class="bar" style="height: 16.666666666666664px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            17
                        </div>
                        <div class="entry">
                            <span class="value">3</span>
                            <div class="bar" style="height: 16.666666666666664px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            18
                        </div>
                        <div class="entry">
                            <span class="value">2</span>
                            <div class="bar" style="height: 11.11111111111111px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            19
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            20
                        </div>
                        <div class="entry">
                            <span class="value">6</span>
                            <div class="bar" style="height: 33.33333333333333px; background-color: var(--color-calendar-graph-day-L3-bg)"></div>
                            21
                        </div>
                        <div class="entry">
                            <span class="value">2</span>
                            <div class="bar" style="height: 11.11111111111111px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            22
                        </div>
                        <div class="entry">
                            <span class="value">6</span>
                            <div class="bar" style="height: 33.33333333333333px; background-color: var(--color-calendar-graph-day-L3-bg)"></div>
                            23
                        </div>
                    </div>
                </div>
                <div class="row largeable">
                    <section class="column chart">
                        <h3>Commit activity per day of week</h3>
                        <div class="chart-bars">
                            <div class="entry">
                                <span class="value">11</span>
                                <div class="bar" style="height: 19.642857142857142px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                Sun
                            </div>
                            <div class="entry">
                                <span class="value">3</span>
                                <div class="bar" style="height: 5.357142857142857px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                Mon
                            </div>
                            <div class="entry">
                                <span class="value">6</span>
                                <div class="bar" style="height: 10.714285714285714px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                Tue
                            </div>
                            <div class="entry">
                                <span class="value">28</span>
                                <div class="bar" style="height: 50px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                                Wed
                            </div>
                            <div class="entry">
                                <span class="value">6</span>
                                <div class="bar" style="height: 10.714285714285714px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                Thu
                            </div>
                            <div class="entry">
                                <span class="value">4</span>
                                <div class="bar" style="height: 7.142857142857142px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                Fri
                            </div>
                            <div class="entry">
                                <span class="value">9</span>
                                <div class="bar" style="height: 16.071428571428573px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                Sat
                            </div>
                        </div>
                    </section>
                    <section class="column chart">
                        <h3>Language activity</h3>
                        <div class="chart-bars horizontal">
                            <div class="entry">
                                <span class="name">JavaScript</span>
                                <div class="bar" style="width: 6.505373102618652%; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                <span class="value">8%</span>
                            </div>
                            <div class="entry">
                                <span class="name">HTML</span>
                                <div class="bar" style="width: 4.636630118659007%; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                <span class="value">6%</span>
                            </div>
                            <div class="entry">
                                <span class="name">TypeScript</span>
                                <div class="bar" style="width: 0.9280265511370651%; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                <span class="value">1%</span>
                            </div>
                            <div class="entry">
                                <span class="name">CSS</span>
                                <div class="bar" style="width: 0.5715040380811292%; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                <span class="value">1%</span>
                            </div>
                            <div class="entry">
                                <span class="name">Hack</span>
                                <div class="bar" style="width: 0.04002193454662384%; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                <span class="value">0%</span>
                            </div>
                        </div>
                    </section>
                </div>
            </section>
        </div>
        <div xmlns="http://www.w3.org/1999/xhtml" id="metrics-end"></div>
    </foreignObject>
</svg>