{% extends "kpi/base.html" %}

{% set classes = ('kpi-dashboard ') %}
{% set title = _('KPI Dashboard') %}
{% set crumbs = [(None, title)] %}
{% set scripts = ('kpi.dashboard',) %}

{% block below_main %}
  <article id="kpi-dash" class="sumo-page-section">

    <section id="kpi-cohort-analysis"
      data-url="/api/2/cohort">

      <h2 class="sumo-page-subheading">{{ _('Retention') }}</h2>
      <div id="retention-chart" class="graph" data-chart-type="d3" data-slug="retention"></div>
    </section>

    <section id="kpi-csat"
     data-url="{{ url('api.kpi.csat-contributors') }}">

      <h2 class="sumo-page-subheading">{{ _('Contributor Satisfaction') }}</h2>

      <div class="rickshaw">
        <div class="inline-controls"></div>
        <div class="graph-container">
          <div class="slider"></div>
          <div class="graph" data-chart-type="rickshaw" data-slug="csat"></div>
        </div>
      </div>
    </section>

    <section id="kpi-questions"
     data-url="{{ url('api.kpi.questions') }}">

     <h2 class="sumo-page-subheading">{{ _('Questions') }}</h2>

      <div class="rickshaw">
        <div class="inline-controls"></div>
        <div class="graph-container">
          <div class="slider"></div>
          <div class="graph" data-chart-type="rickshaw" data-slug="questions"></div>
        </div>
      </div>

      <ul class="kpi-legend" id="kpi-legend-questions">
        <li>
          <p><strong>{% trans %}Questions solved{% endtrans %}</strong></p>
          <p>{% trans %}
            Definition: Percentage of threads that have answer marked as a
            solution{% endtrans %}
          </p>
        </li>
        <li>
          <p><strong>{% trans %}
            Questions responded to within X hours{% endtrans %}
          </strong></p>
          <p>{% trans %}
            Definition: Percentage of questions that get an action within X
            hours{% endtrans %}
          </p>
        </li>
      </ul>
    </section>

    <section id="kpi-vote"
     data-url="{{ url('api.kpi.votes') }}">

      <h2 class="sumo-page-subheading">{{ _('Helpful Votes') }}</h2>

      <div class="rickshaw">
        <div class="inline-controls"></div>
        <div class="graph-container">
          <div class="slider"></div>
          <div class="graph" data-chart-type="rickshaw" data-slug="vote"></div>
        </div>
      </div>

      <ul class="kpi-legend" id="kpi-legend-vote">
        <li>
          <p><strong>{% trans %}
            Helpfulness of KB articles and Forum{% endtrans %}
          </strong></p>
          <p>{% trans %}
            Definition: Ratio of “yes”/total votes for KB articles, forum
            threads{% endtrans %}
          </p>
        </li>
      </ul>
    </section>

    <section id="kpi-active-contributors"
     data-url="{{ url('api.kpi.contributors') }}">

      <h2 class="sumo-page-subheading">{{ _('Active Contributors') }}</h2>

      <div class="rickshaw">
        <div class="inline-controls"></div>
        <div class="graph-container">
          <div class="slider"></div>
          <div class="graph" data-chart-type="rickshaw" data-slug="activeContributors"></div>
        </div>
      </div>

      <ul>
        <li>
          <p><strong>{% trans %}
            Number of active contributors to the English KB{% endtrans %}
          </strong></p>
          <p>{% trans %}
            Definition: The number of people who have contributed to the KB in the
            last 30 days.{% endtrans %}
          </p>
          <p>{% trans %}
            Definition of contribution: edited 1+ article or has reviewed 1+
            article{% endtrans %}
          </p>
        </li>
        <li>
          <p><strong>{% trans %}
            Number of active contributors to the non-English KB{% endtrans %}
          </strong></p>
          <p>{% trans %}
            Definition: The number of people who have contributed to non English
            KB versions in the last 30 days.{% endtrans %}
          </p>
          <p>{% trans %}
            Definition of contribution: edited 1+ non English article or has
            reviewed 1+ non English article.{% endtrans %}
          </p>
        </li>
        <li>
          <p><strong>{% trans %}
            Number of active forum contributors{% endtrans %}
          </strong></p>
          <p>{% trans %}
            Definition: The number of people who have contributed to the forums in
            the last 30 days.{% endtrans %}
          </p>
          <p>{% trans %}
            Definition of contribution: wrote 10+ posts{% endtrans %}
          </p>
        </li>
      </ul>
    </section>

    <section id="kpi-ctr"
     data-url="{{ url('api.kpi.search-ctr') }}">

      <h2 class="sumo-page-subheading">{{ _('Search Clickthrough Rate') }}</h2>

      <div class="rickshaw">
        <div class="inline-controls"></div>
        <div class="graph-container">
          <div class="slider"></div>
          <div class="graph" data-chart-type="rickshaw" data-slug="ctr"></div>
        </div>
      </div>

      <ul>
        <li>
          <p><strong>{% trans %}
            Clickthrough rate{% endtrans %}
          </strong></p>
          <p>{% trans %}
            Definition: Percentage of people searching who click on an item on
            the search results page.{% endtrans %}
          </p>
        </li>
      </ul>
    </section>

    <section id="kpi-visitors"
     data-url="{{ url('api.kpi.visitors') }}">

      <h2 class="sumo-page-subheading">{{ _('Daily Unique Visitors') }}</h2>

      <div class="rickshaw">
        <div class="inline-controls"></div>
        <div class="graph-container">
          <div class="slider"></div>
          <div class="graph" data-chart-type="rickshaw" data-slug="visitors"></div>
        </div>
      </div>
    </section>

    <section id="kpi-l10n"
     data-url="{{ url('api.kpi.l10n-coverage') }}">

      <h2 class="sumo-page-subheading">{{ _('L10n Coverage') }}</h2>

      <div class="rickshaw">
        <div class="inline-controls"></div>
        <div class="graph-container">
          <div class="slider"></div>
          <div class="graph" data-chart-type="rickshaw" data-slug="l10n"></div>
        </div>
      </div>

      <ul>
        <li>
          <p><strong>{% trans %}L10n coverage{% endtrans %}</strong></p>
          <p>
            {% trans %}Definition: L10n coverage is a measure of the percentage of our
            visitor base that get served with KB articles in their own language.
            It's calculated by taking into account the English top 50 weighted
            by the localization status of an article and the the number of
            visits for each locale.{% endtrans %}
          </p>
          <p>
            {% trans %}Edit levels are taken into account as follows:{% endtrans %}
          </p>
          <ul>
            <li>{% trans %}A level 2 review change drops the localization to 50% of the article{% endtrans %}</li>
            <li>{% trans %}A level 3 review change drops the localization to 0% of the article{% endtrans %}</li>
            <li>{% trans %}More than one level 2 review change drops the localization to 0%{% endtrans %}</li>
          </ul>

          <p>
            {% trans %}Example:{% endtrans %}
          </p>
          <ul>
            <li>{# L10n: dennis-ignore: * #}{% trans %}German makes up 10% of our visitor base{% endtrans %}</li>
            <li>{# L10n: dennis-ignore: * #}{% trans %}The 'how to set your home page' article makes up 2% of our top 50 visits{% endtrans %}</li>
            <li>{# L10n: dennis-ignore: * #}{% trans %}When the Home page article is the only localized article and it's up to date in German, then our overall coverage is 2% of 10%=0.2% overall (+ the English coverage){% endtrans %}</li>
            <li>{# L10n: dennis-ignore: * #}{% trans %}When German misses a level 2 change, the coverage drops to 50%, so 1% of 10%= 0.1% overall{% endtrans %}</li>
            <li>{# L10n: dennis-ignore: * #}{% trans %}<b>Important:</b> Currently we are using a simplified model, where each article accounts for 1/50=2% of visits per language {% endtrans %}</li>
          </ul>
        </li>
      </ul>
   </section>

  <section id="exit-survey"
     data-url="{{ url('api.kpi.exit-survey') }}">

      <h2 class="sumo-page-subheading">{{ _('Exit Survey Results') }}</h2>

      <div class="rickshaw">
        <div class="inline-controls"></div>
        <div class="graph-container">
          <div class="slider"></div>
          <div class="graph" data-chart-type="rickshaw" data-slug="exitSurvey"></div>
        </div>
      </div>
    </section>

  </article>
{% endblock %}