metrics.html

---
layout: metrics-layout
title: Metrics
description: Measuring OpenTheme Across Usability, Reusability, Performance.
---

<div class="ui vertical segment">
  <div class="ui centered page grid" id="metrics-list">

    <div class="row">
      <div class="column">

        <div class="ui form">
          <div class="field">
            <div class="ui right action input fluid">
              <input type="text" placeholder="Filter metrics" class="search">
              <div class="ui right mini labeled icon button sort" data-sort="category">
                <i class="sort icon"></i>
                Sort Category
              </div>
            </div>
          </div>
        </div>

      </div> <!-- .column -->
    </div> <!-- .row -->


    <div class="row">
      <div class="column">

        <div class="ui fluid six item labeled icon menu">
          <a class="item active filter-all">
            <i class="dashboard icon"></i>
            All Metrics
          </a>
          <a class="item filter-reusability">
            <i class="retweet icon"></i>
            Reusability
          </a>
          <a class="item filter-learnability">
            <i class="student icon"></i>
            Learnability
          </a>
          <a class="item filter-usability">
            <i class="lab icon"></i>
            Usability
          </a>
          <a class="item filter-performance">
            <i class="star icon"></i>
            Performance
          </a>
          <a class="item filter-reliability">
            <i class="life ring icon"></i>
            Reliability
          </a>
        </div>

      </div> <!-- .column -->
    </div> <!-- .row -->
    <div class="row">
      <div class="column">
        <strong>Star (*) status shows Real-time data using metric specific APIs.</strong>
        <table class="ui striped table">
          <thead>
            <tr>
              <th class="four wide">Category</th>
              <th class="seven wide">Metric</th>
              <th class="five wide">Status</th>
            </tr>
          </thead>
          <tbody class="list">
            {% for metric in site.data.metrics %}
            <tr>
              <td><a class="ui label huge category filter-{{ metric.category | downcase }}">{{ metric.category }}</a></td>
              <td class="title">
                {{ metric.title }}
                {% if metric.type == 'Percent' %}
                  {% include metrics-percent.html current=metric.current evaluate=metric.evaluate %}
                {% endif %}
                
                {% if metric.evaluate == 'Desktop PageSpeed' %}
                <div class="desktop-suggestions"></div>
                {% endif %}

                {% if metric.evaluate == 'Mobile PageSpeed' %}
                <div class="mobile-suggestions"></div>
                {% endif %}

              </td>
              <td class="center aligned">
                {% if metric.type == 'Liquid' %}
                  {% include metrics-liquid.html evaluate=metric.evaluate source=metric.source %}
                {% endif %}
                {% if metric.type == 'Percent' %}
                  {% include metrics-percent.html current=metric.current evaluate=metric.evaluate source=metric.source %}
                {% endif %}
                {% if metric.type == 'Badge' %}
                  <a class="ui small statistic" href="{{ metric.source }}">
                    <div class="value">
                      <img src="{{ metric.badge }}">
                    </div>
                    <div class="label">
                      {{ metric.evaluate }}
                    </div>
                  </a>
                {% endif %}
                {% if metric.type == 'Pass/Fail' %}
                  <a class="ui small statistic {% if metric.current == 'Pass' %}green{% else %}red{% endif%}" href="{{ metric.source }}">
                    <div class="value">
                      {{ metric.current }}
                    </div>
                    <div class="label">
                      {{ metric.evaluate }}
                    </div>
                  </a>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>

      </div>

    </div> <!-- /row -->
  </div>
</div>