Metrics V2

app/site/_includes/graph-toggle.liquid

@@ -34,7 +34,7 @@
             {% endif %}
             {% assign graphPath = graph | strip %}
             {% assign distPath = baseurl | append: "/assets/img/graphs" | append: graphPath %}
-            {% assign fileExtension = path | split: '.' | last %}
+            {% assign fileExtension = graphPath | split: '.' | last %}
             <figure>
             {% if fileExtension == 'svg' %}
                 <embed type="image/svg+xml" src="{{ distPath }}" />

app/site/_layouts/repo-report.liquid

@@ -1,7 +1,22 @@
 ---
 layout: base
 ---
+<script>
+  function toggleDateAge(element) {
+    const dateElements = element.querySelectorAll('.date')
+    const ageElements = element.querySelectorAll('.age')
+
+    dateElements.forEach((element) => {
+      element.style.display = element.style.display === 'none' ? 'inline' : 'none'
+    })
+
+    ageElements.forEach((element) => {
+      element.style.display = element.style.display === 'none' ? 'inline' : 'none'
+    })
+  }
+</script>
 <script src="{{ "/assets/js/graphs.js" | url }}"></script>
+
 <div class="grid-container">
   {% assign project = projects | findObject: repo %}
 
@@ -155,6 +170,40 @@ layout: base
           </div>
           <p>{{ project.pull_requests_count }}</p>
         </div>
+        <div class="stat-container" id="project-age" onclick="toggleDateAge(this)" style="cursor: pointer;">
+          <div class="project-age-heading">
+            <h4>
+              <span>
+                <svg
+                  class="usa-icon"
+                  aria-labelledby="project-age"
+                  role="img"
+                >
+                  {% lucide "calendar" %}
+                </svg>
+              </span>
+              <span class="date">Project Creation Date</span>
+              <span class="age" style="display: none;">Age of Project</span>
+            </h4>
+          </div>
+          <p style="text-decoration: underline;">
+            <span class="date">
+              {{ project.created_at | date: '%B %d, %Y' }}
+            </span>
+            <span class="age" style="display: none;">
+              {% comment %} takes project created + todays date and turns it into seconds {% endcomment %}
+              {% assign created_date = project.created_at | date: '%s' | plus: 0 %}
+              {% assign current_date = 'now' | date: '%s' | plus: 0 %}
+
+              {% assign age_seconds = current_date | minus: created_date %}
+
+              {% comment %} divide by how many seconds are in a day to convert back into days {% endcomment %}
+              {% assign age_days = age_seconds | divided_by: 86400.0 | round %}
+
+              {{ age_days }} day{% if age_days != 1 %}s{% endif %}
+            </span>
+          </p>
+        </div>
       </div>
     {% else %}
       <p>Error Occurred: Object Not Found</p>