<commit_before>
<h4>Statistic</h4>
<p>
  <span class="toolkit-inline-help">Statistic across all screenings.</span>
</p>

<div class="alert alert-warning alert-dismissible mock" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Please note</strong> that functionality marked with the cornflower color is <em>mock</em> functionality included in the development releases of the ACE Toolkit to illustrate functionality to-be
</div>

<style>
.statistic-flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.statistic-flex-item {
    width: 43%;
}
</style>

<div class="statistic-flex-container">
  <div class="statistic-flex-item">
    <ul class="list-unstyled qnaire-list-item">
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open">Total Score</span> <strong>{{aceScoreStatistic.sum}}</strong>
      </li>
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open mock">Top ACEs</span> <strong>{{aceScoreStatistic.topThree}} Q4, Q7, Q5</strong>
      </li>
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open">Average Score</span> <strong>{{aceScoreStatistic.average}}</strong>
      </li>
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open mock">Median</span> <strong>45%</strong>
      </li>
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open mock">Mode</span> <strong>45%</strong>
      </li>
    </ul>
  </div>
  <div class="statistic-flex-item">
    <canvas id="myChart" width="180" height="180"></canvas>
    <script>
      // Get the context of the canvas element we want to select
      var ctx = document.getElementById("myChart").getContext("2d");
      var data = {
        labels: [
          "Q1", "Q2", "Q3", "Q4",
          "Q5", "Q6", "Q7", "Q8",
          "Q9", "Q10", "Q11", "Q12"
        ],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(0, 138, 237, 0.2)",
                strokeColor: "rgba(69, 157, 219, 1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [
                  2,4,3,7,
                  5,3,6,4,
                  1,3,5,2]
            }
        ]
    };
      var myNewChart = new Chart(ctx).Radar(data);
    </script>
  </div>
</div><commit_msg>Select a mock-indicative color for the mock chart.<commit_after>
<h4>Statistic</h4>
<p>
  <span class="toolkit-inline-help">Statistic across all screenings.</span>
</p>

<div class="alert alert-warning alert-dismissible mock" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Please note</strong> that functionality marked with the cornflower color is <em>mock</em> functionality included in the development releases of the ACE Toolkit to illustrate functionality to-be
</div>

<style>
.statistic-flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.statistic-flex-item {
    width: 43%;
}
</style>

<div class="statistic-flex-container">
  <div class="statistic-flex-item">
    <ul class="list-unstyled qnaire-list-item">
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open">Total Score</span> <strong>{{aceScoreStatistic.sum}}</strong>
      </li>
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open mock">Top ACEs</span> <strong>{{aceScoreStatistic.topThree}} Q4, Q7, Q5</strong>
      </li>
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open">Average Score</span> <strong>{{aceScoreStatistic.average}}</strong>
      </li>
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open mock">Median</span> <strong>45%</strong>
      </li>
      <li class="qnaire-list-item item">
        <span class="label label-primary label-primary-open mock">Mode</span> <strong>45%</strong>
      </li>
    </ul>
  </div>
  <div class="statistic-flex-item">
    <canvas id="myChart" width="180" height="180"></canvas>
    <script>
      // Get the context of the canvas element we want to select
      var ctx = document.getElementById("myChart").getContext("2d");
      var data = {
        labels: [
          "Q1", "Q2", "Q3", "Q4",
          "Q5", "Q6", "Q7", "Q8",
          "Q9", "Q10", "Q11", "Q12"
        ],
        datasets: [
            {
                label: "My First dataset",
                //fillColor: "rgba(0, 138, 237, 0.2)",
                fillColor: "rgba(254, 249, 222, 0.6)",
                strokeColor: "rgba(69, 157, 219, 1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [
                  2,4,3,7,
                  5,3,6,4,
                  1,3,5,2]
            }
        ]
      };
      var myNewChart = new Chart(ctx).Radar(data);
    </script>
  </div>
</div>
{'fraction_non_alphanumeric': 0.16630116959064328, 'fraction_numerical': 0.03344298245614035, 'mean_word_length': 2.572454308093995, 'pattern_counts': {'":': 0, '<': 123, '<?xml version=': 0, '>': 123, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2363925', 'n_tokens_mistral': 1877, 'n_tokens_neox': 1734, 'n_words': 395}