<commit_before>{% extends "base.html" %}

{% load static wagtailcore_tags %}

{% block body_class %}template-rtei{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/c3/c3.css' %}">
{% endblock %}

{% block content %}
  <div class="main">

    <section>
      <h1>Hi!</h1>
      {{ self.body|richtext }}
    </section>

    <section id="chart-controls" class="controls">
      <button type="button" id="chart-sort-by-name" class="sort asc" data-key="name">Sort by Name</button><button type="button" id="chart-sort-by-score" class="sort asc" data-key="index">Sort by Total Score</button>
    </section>
    <section>
      <div id="chart"></div>
    </section>

  </div>

{% endblock %}

{% block extra_js %}
    <script src="{% static 'vendor/underscore-min.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'vendor/d3/d3.min.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'vendor/c3/c3.min.js' %}" type="text/javascript" ></script>
    <script type="text/javascript">
        var chart;
        var json_data;
        var build_chart = function(data) {
            // Chart height is the number of rows * 22, or 350, whichever is
            // largest. This ensures there is adequate room for double-lined
            // labels.
            var height = _.max([_.size(data) * 22, 350]);
            var chart = c3.generate({
                bindto: '#chart',
                data: {
                    json: data,
                    order: null,
                    keys: {
                        x: 'name',
                        value: ['1', '3', '2', '5', '4'],
                    },
                    groups: [
                        ['1', '2', '3', '4', '5'],
                    ],
                    names: {
                        '1': 'Governance',
                        '3': 'Accessibility',
                        '2': 'Availability',
                        '5': 'Adaptability',
                        '4': 'Acceptability'
                    },
                    type: 'bar'
                },
                axis: {
                    rotated: true,
                    x: {
                        type: 'category'
                    },
                    y: {
                        show: true,
                        max: 100,
                        padding: {
                            top: 0,
                        }
                    }
                },
                bar: {
                    width: {
                        ratio: 0.75
                    }
                },
                size: {
                    height: height
                }
            });
            return chart;
        };

        var init_sort_buttons = function() {
            /*
            Initializes the sort buttons.
<commit_msg>Show proper values on hover over graph. Fixes #4<commit_after>{% extends "base.html" %}

{% load static wagtailcore_tags %}

{% block body_class %}template-rtei{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/c3/c3.css' %}">
{% endblock %}

{% block content %}
  <div class="main">

    <section>
      <h1>Hi!</h1>
      {{ self.body|richtext }}
    </section>

    <section id="chart-controls" class="controls">
      <button type="button" id="chart-sort-by-name" class="sort asc" data-key="name">Sort by Name</button><button type="button" id="chart-sort-by-score" class="sort asc" data-key="index">Sort by Total Score</button>
    </section>
    <section>
      <div id="chart"></div>
    </section>

  </div>

{% endblock %}

{% block extra_js %}
    <script src="{% static 'vendor/underscore-min.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'vendor/d3/d3.min.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'vendor/c3/c3.min.js' %}" type="text/javascript" ></script>
    <script type="text/javascript">
        var chart;
        var json_data;
        var build_chart = function(data) {
            // Chart height is the number of rows * 22, or 350, whichever is
            // largest. This ensures there is adequate room for double-lined
            // labels.
            var height = _.max([_.size(data) * 22, 350]);
            var chart = c3.generate({
                bindto: '#chart',
                data: {
                    json: data,
                    order: null,
                    keys: {
                        x: 'name',
                        value: ['1', '3', '2', '5', '4'],
                    },
                    groups: [
                        ['1', '2', '3', '4', '5'],
                    ],
                    names: {
                        '1': 'Governance',
                        '3': 'Accessibility',
                        '2': 'Availability',
                        '5': 'Adaptability',
                        '4': 'Acceptability'
                    },
                    type: 'bar'
                },
                axis: {
                    rotated: true,
                    x: {
                        type: 'category'
                    },
                    y: {
                        show: true,
                        max: 100,
                        padding: {
                            top: 0,
                        }
                    }
                },
                bar: {
                    width: {
                        ratio: 0.75
                    }
                },
                size: {
                    height: height
                },
                tooltip: {
                  format: {
                    value: function (value, ratio, id, index) {
                        return parseFloat((value * 5).toFixed(2));
                    }
                  }
                }
            });
            return chart;
        };

        var init_sort_buttons = function() {
            /*
            Initializes the sort buttons.

{'fraction_non_alphanumeric': 0.1409329829172142, 'fraction_numerical': 0.01461892247043364, 'mean_word_length': 1.0974853599724423, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, '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': '5430799', 'n_tokens_mistral': 1744, 'n_tokens_neox': 1556, 'n_words': 373}