metrics/source/templates/classic/partials/habits.ejs

<% if (plugins.habits) { %>
  <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"></path></svg>
      Recent coding habits
      <% if (plugins.habits.commits?.fetched) { %>
        <small class="h-details">(computed from last <%= plugins.habits.commits.fetched %> commit<%= s(plugins.habits.commits.fetched) %>)</small>
      <% } %>
    </h2>
    <% if (plugins.habits.error) { %>
      <div class="row">
        <section>
          <div class="field error">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
            <%= plugins.habits.error.message %>
          </div>
        </section>
      </div>
    <% } else if (plugins.habits.facts) { %>
      <div class="row">
        <ul class="facts">
          <% if (plugins.habits.indents.style) { %>
            <li>Uses <%= plugins.habits.indents.style %> for indentation</li>
          <% } %>
          <% if (plugins.habits.lines.average.chars) { %>
            <li>Has approximately <%= f(plugins.habits.lines.average.chars, {fixed:1}) %> characters per line of code written</li>
          <% } %>
          <% if (!Number.isNaN(plugins.habits.commits.hour)) { %>
            <li>Mostly pushes code around <%= plugins.habits.commits.hour %>:00</li>
          <% } %>
          <% if (plugins.habits.commits.day) { %>
            <li>Mostly active on <%= plugins.habits.commits.day %></li>
          <% } %>
        </ul>
      </div>
    <% } %>
  </section>

  <% if (plugins.habits.charts) { %>
    <section class="habits">
      <% if (!Number.isNaN(plugins.habits.commits.hour)) { %>
        <div class="column chart largeable">
          <h3>Commit activity per hour of day</h3>
          <% if (Array.isArray(plugins.habits.charts)) { %>
            <div class="row margin-bottom chartist">
              <%- plugins.habits.charts[0] %>
            </div>
          <% } else { %>
            <div class="chart-bars">
              <% var displayedValues = []; %>
              <% for (let h = 0; h < 24; h++) { displayedValues.push([h, (plugins.habits.commits.hours[h]??0)/(plugins.habits.commits.hours.max??1), plugins.habits.commits.hours[h]]) } %>

              <% if (plugins.habits.trim) { %>
                <% while (displayedValues[0][1] === 0) { displayedValues.shift(); } %>
                <% while (displayedValues[displayedValues.length-1][1] === 0){ displayedValues.pop(); } %>
              <% } %>

              <% for(let i = 0; i < displayedValues.length; i++) { %>
                <div class="entry">
                  <span class="value"><%= displayedValues[i][2] %></span>
                  <div class="bar" style="height: <%= displayedValues[i][1]*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(displayedValues[i][1]/0.25) %>-bg)"></div>
                  <%= `${displayedValues[i][0]}`.padStart(2, 0) %>
                </div>
              <% } %>
            </div>
          <% } %>
        </div>
      <% } %>

      <div class="row largeable">
        <% if (!Number.isNaN(plugins.habits.commits.day)) { %>
          <section class="column chart">
            <h3>Commit activity per day of week</h3>
            <% if (Array.isArray(plugins.habits.charts)) { %>
              <div class="margin-bottom chartist">
                <%- plugins.habits.charts[1] %>
              </div>
            <% } else { %>
              <div class="chart-bars">
                <% for (let d = 0; d < 7; d++) { const p = (plugins.habits.commits.days[d]??0)/(plugins.habits.commits.days.max??1); %>
                  <div class="entry">
                    <span class="value"><%= plugins.habits.commits.days[d] %></span>
                    <div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
                    <%= ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d] %>
                  </div>
                <% } %>
              </div>
            <% } %>
          </section>
        <% } %>
        <% if (plugins.habits.linguist.available) { %>
          <section class="column chart">
            <h3>Language activity</h3>
            <% if (Array.isArray(plugins.habits.charts)) { %>
              <div class="margin-bottom chartist">
                <%- plugins.habits.charts[2] %>
              </div>
            <% } else { %>
              <div class="chart-bars horizontal">
                <% for (const [language, p] of plugins.habits.linguist.ordered) { %>
                  <div class="entry">
                    <span class="name"><%= language %></span>
                    <div class="bar" style="width: <%= p*80 %>%; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
                    <span class="value"><%= Math.round(100*p) %>%</span>
                  </div>
                <% } %>
              </div>
            <% } %>
          </section>
        <% } %>
      </div>
    </section>
  <% } %>
<% } %>