Skip to content

Commit

Permalink
Merge pull request #431 from AdmiralGT/grt/statistics-slider
Browse files Browse the repository at this point in the history 
Add a slider to display more statistics rows
  • Loading branch information
@AdmiralGT
AdmiralGT committed Aug 30, 2024
2 parents 46e0c3d + 799f65b commit 202a443
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 45 deletions.
128 changes: 85 additions & 43 deletions scripts/templates/statistics.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{% extends 'base.html' %}

{% load bootstrap4 %}
{% load botc_script_tags %}

{% block content %}

Expand Down Expand Up @@ -41,30 +42,27 @@
}
</style>

<script>
{% include "chart.html" with ChartName="TownsfolkChart" ChartLabel="Number of Townsfolk" ChartDictionary=num_count.Townsfolk ChartColor="rgba(214,234,248,1)" ChartBorder="rgba(133,193,233,1)" %}
{% include "chart.html" with ChartName="OutsiderChart" ChartLabel="Number of Outsiders" ChartDictionary=num_count.Outsider ChartColor="rgba(214,234,248,1)" ChartBorder="rgbargba(133,193,233,1)" %}
{% include "chart.html" with ChartName="MinionChart" ChartLabel="Number of Minions" ChartDictionary=num_count.Minion ChartColor="rgba(250,219,216,1)" ChartBorder="rgba(245,183,177,1)" %}
{% include "chart.html" with ChartName="DemonChart" ChartLabel="Number of Demons" ChartDictionary=num_count.Demon ChartColor="rgba(250,219,216,1)" ChartBorder="rgba(245,183,177,1)" %}
{% include "chart.html" with ChartName="TravellerChart" ChartLabel="Number of Travellers" ChartDictionary=num_count.Traveller ChartColor="rgba(0,0,255,0.2)" ChartBorder="rgbargba(133,193,233,1)" %}
{% include "chart.html" with ChartName="FabledChart" ChartLabel="Number of Fabled" ChartDictionary=num_count.Fabled ChartColor="rgba(255,240,204,1)" ChartBorder="rgba(255,240,153,1)" %}
</script>

<div class="container">
<div class="row">
<h1>Total Scripts in Database: {{ total }}</h1>
<div class="col">
{% if user.is_authenticated and filter %}
<form action="" method="get" class="form mb-0">
<div class="float-right form-group row p-1 mb-0">
{% bootstrap_form filter.form layout='inline' form_group_class="mb-0 m-1" %}
{% bootstrap_button 'filter' extra_classes="btn-sm mr-1" %}
{% bootstrap_button 'clear' extra_classes="btn-sm" href="/statistics" %}
</div>
</form>
{% endif %}
<div class="col float-right pr-0">
{% if user.is_authenticated and filter %}
<form action="" method="get" class="form mb-0">
<div class="float-right form-group row p-1 mb-0">
{% bootstrap_form filter.form layout='inline' form_group_class="mb-0 m-1" %}
{% bootstrap_button 'filter' extra_classes="btn-sm mr-1" %}
{% bootstrap_button 'clear' extra_classes="btn-sm" href="/statistics" %}
</div>
</form>
<div class="float-right mr-4 mt-2">
{% else %}
<div class="float-right mt-2">
{% endif %}
<input type="range" min="1" max="25" value="5" class="slider" id="DisplayRange">
<span id="DisplayRangeLabel"></label>
</div>
</div>
</div>
</div>

{% if total > 0 %}
Expand All @@ -75,9 +73,10 @@ <h4 class="mt-2">Most popular Townsfolk</h4>
<table class="w-100 table-sm table-striped-good">
<tbody>
{% for character, count in Townsfolk %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -88,9 +87,10 @@ <h4 class="mt-2">Least popular Townsfolk</h4>
<table class="w-100 table-sm table-striped-good">
<tbody>
{% for character, count in Townsfolkleast %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -104,9 +104,10 @@ <h4 class="mt-2">Most popular Outsider</h4>
<table class="w-100 table-sm table-striped-good">
<tbody>
{% for character, count in Outsider %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -117,9 +118,10 @@ <h4 class="mt-2">Least popular Outsider</h4>
<table class="w-100 table-sm table-striped-good">
<tbody>
{% for character, count in Outsiderleast %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -133,9 +135,10 @@ <h4 class="mt-2">Most popular Minions</h4>
<table class="w-100 table-sm table-striped-evil">
<tbody>
{% for character, count in Minion %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -146,9 +149,10 @@ <h4 class="mt-2">Least popular Minions</h4>
<table class="w-100 table-sm table-striped-evil">
<tbody>
{% for character, count in Minionleast %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -162,9 +166,10 @@ <h4 class="mt-2">Most popular Demons</h4>
<table class="w-100 table-sm table-striped-evil">
<tbody>
{% for character, count in Demon %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -175,9 +180,10 @@ <h4 class="mt-2">Least popular Demons</h4>
<table class="w-100 table-sm table-striped-evil">
<tbody>
{% for character, count in Demonleast %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -191,9 +197,10 @@ <h4 class="mt-2">Most popular Travellers</h4>
<table class="w-100 table-sm table-striped-traveller">
<tbody>
{% for character, count in Traveller %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -204,9 +211,10 @@ <h4 class="mt-2">Least popular Travellers</h4>
<table class="w-100 table-sm table-striped-traveller">
<tbody>
{% for character, count in Travellerleast %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -220,9 +228,10 @@ <h4 class="mt-2">Most popular Fabled</h4>
<table class="w-100 table-sm table-striped-fabled">
<tbody>
{% for character, count in Fabled %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -233,9 +242,10 @@ <h4 class="mt-2">Least popular Fabled</h4>
<table class="w-100 table-sm table-striped-fabled">
<tbody>
{% for character, count in Fabledleast %}
<tr background-color="#">
<td class="w-75"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<tr class='row{{forloop.counter|stringformat:"02d"}}' background-color="#">
<td class="w-50"><a href="/statistics/{{ character.character_id }}" class="text-dark">{{ character.character_name }}</a></td>
<td class="w-25 text-center">{{ count }}</td>
<td class="w-25 text-center">{% get_character_percentage count total %}</td>
</tr>
{% endfor %}
</tbody>
Expand All @@ -244,6 +254,38 @@ <h4 class="mt-2">Least popular Fabled</h4>
</div>
</div>

<script>
{% include "chart.html" with ChartName="TownsfolkChart" ChartLabel="Number of Townsfolk" ChartDictionary=num_count.Townsfolk ChartColor="rgba(214,234,248,1)" ChartBorder="rgba(133,193,233,1)" %}
{% include "chart.html" with ChartName="OutsiderChart" ChartLabel="Number of Outsiders" ChartDictionary=num_count.Outsider ChartColor="rgba(214,234,248,1)" ChartBorder="rgbargba(133,193,233,1)" %}
{% include "chart.html" with ChartName="MinionChart" ChartLabel="Number of Minions" ChartDictionary=num_count.Minion ChartColor="rgba(250,219,216,1)" ChartBorder="rgba(245,183,177,1)" %}
{% include "chart.html" with ChartName="DemonChart" ChartLabel="Number of Demons" ChartDictionary=num_count.Demon ChartColor="rgba(250,219,216,1)" ChartBorder="rgba(245,183,177,1)" %}
{% include "chart.html" with ChartName="TravellerChart" ChartLabel="Number of Travellers" ChartDictionary=num_count.Traveller ChartColor="rgba(0,0,255,0.2)" ChartBorder="rgbargba(133,193,233,1)" %}
{% include "chart.html" with ChartName="FabledChart" ChartLabel="Number of Fabled" ChartDictionary=num_count.Fabled ChartColor="rgba(255,240,204,1)" ChartBorder="rgba(255,240,153,1)" %}

function show_and_hide_table_rows(rows_to_display) {
for (let i = 0; i < rows_to_display + 1; i++) {
let rowstring = '.row' + i.toString().padStart(2, '0')
for (let el of document.querySelectorAll(rowstring)) el.style.display = '';
}
for (let i = rows_to_display + 1; i < 100; i++) {
let rowstring = '.row' + i.toString().padStart(2, '0')
for (let el of document.querySelectorAll(rowstring)) el.style.display = 'none';
}

}
var slider = document.getElementById("DisplayRange");
var label = document.getElementById("DisplayRangeLabel");
label.innerHTML = slider.value;
show_and_hide_table_rows(parseInt(slider.value))


// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
label.innerHTML = this.value;
show_and_hide_table_rows(parseInt(this.value))
}
</script>

<canvas id="TownsfolkChart" width="400" height="100"></canvas>
<canvas id="OutsiderChart" width="400" height="100"></canvas>
<canvas id="MinionChart" width="400" height="100"></canvas>
Expand Down
5 changes: 5 additions & 0 deletions scripts/templatetags/botc_script_tags.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,3 +138,8 @@ def get_language_name(locale: str):
return get_language_name("ar_KW")

return locale

@register.simple_tag()
def get_character_percentage(count: int, total: int):
percentage = count * 100 / total
return f"{percentage:.2f}%"
4 changes: 2 additions & 2 deletions scripts/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,7 @@ def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
self.object_list = super().get_queryset()
context = super().get_context_data(**kwargs)
stats_character = None
characters_to_display = 5
characters_to_display = 25

if "all" in self.request.GET:
queryset = models.ScriptVersion.objects.all()
Expand Down Expand Up @@ -608,7 +608,7 @@ def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
if int(self.request.GET.get("num")):
characters_to_display = int(self.request.GET.get("num"))
if characters_to_display < 1:
characters_to_display = 5
characters_to_display = 25
except ValueError:
pass

Expand Down

0 comments on commit 202a443

Please sign in to comment.