template.ejs

<svg xmlns="http://www.w3.org/2000/svg" width="480">
  <defs>
    <style></style>
  </defs>
  <style>
    /* SVG global context */
    svg {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
      font-size: 14px;
      color: #777777;
    }

    h1, h2, h3 {
      margin: 8px 0 2px;
      padding: 0;
      color: #0366d6;
      font-weight: normal;
    }
    
    h1 svg, h2 svg, h3 svg {
      fill: currentColor;
    }
    
    h1 {
      font-size: 20px;
      font-weight: bold;
    }
    
    h2 {
      font-size: 16px;
    }
    
    h3 {
      font-size: 14px;
    }

    .column {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .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: 1 1 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 10px;
      color: #666666;
    }

    .chart-bars .entry .value {
      font-size: 7px;
    }

    .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;
    }

    :root {
      --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;
    }

    #metrics-end {
      width: 100%;
    }
  </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="column chart largeable">
        <h3>Poops per hour of day</h3>
        <div class="chart-bars">
          <% var displayedValues = []; %>
          <% for (let h = 0; h < 24; h++) { displayedValues.push([h, (poops[h] || 0)/(poops.max || 1), poops[h]]) } %>

          

          <% 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>
      </section>
    </div>
    <div xmlns="http://www.w3.org/1999/xhtml" id="metrics-end"></div>
  </foreignObject>
</svg>