Skip to content

Commit

Permalink
Inital population commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@dougwt
dougwt committed Nov 24, 2014
1 parent c6273c9 commit c040134
Show file tree
Hide file tree
Showing 7 changed files with 729 additions and 17 deletions.
187 changes: 171 additions & 16 deletions kartographer/comparison/templates/comparison/top.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
{% extends "comparison/base.html" %}
{% load staticfiles %}

{% block panel_title %}Popular Lists{% endblock %}
{% block head %}
<link rel="stylesheet" href="{% static 'css/top.css' %}">
{% endblock %}

{% block panel_title %}Popular{% endblock %}

{% block nav_popular_active %}active{% endblock %}

Expand All @@ -19,19 +23,170 @@ <h5>This page is still in the planning stages. Please check back later.</h5>
{% endblock %}

{% block content %}
<ul>
{% for item in popular_lists %}
<li><a href="/l/{{ item.url }}">{{ item.url }} ({{ item.view_count }})</a></li>
{% empty %}
<li class="empty-alert">No items in database.</li>
{% endfor %}
</ul>

<ul>
{% for item in records %}
<li>{{ item.id }}</li>
{% empty %}
<li class="empty-alert">No items in database.</li>
{% endfor %}
</ul>
<div class="chart-container clearfix">
<div class="chart col-xs-12 col-md-6">
<h4>Characters</h4>
<div class="well">
<canvas id="charactersChart" width="250" height="250"></canvas>
<div id="charactersLegend"></div>
</div>
</div>

<div class="chart col-xs-12 col-md-6">
<h4>Karts</h4>
<div class="well">
<canvas id="kartsChart" width="250" height="250"></canvas>
<div id="kartsLegend"></div>
</div>
</div>

<div class="chart col-xs-12 col-md-6">
<h4>Wheels</h4>
<div class="well">
<canvas id="wheelsChart" width="250" height="250"></canvas>
<div id="wheelsLegend"></div>
</div>
</div>

<div class="chart col-xs-12 col-md-6">
<h4>Gliders</h4>
<div class="well">
<canvas id="glidersChart" width="250" height="250"></canvas>
<div id="glidersLegend"></div>
</div>
</div>
</div>

<h4>Most-Visited Saved Lists</h4>
<div class="col-xs-12">
<div class="chart-container clearfix">
<p>TestLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
{% for item in popular_lists %}
<li><a href="/l/{{ item.url }}">{{ item.url }} ({{ item.view_count }})</a></li>
{% empty %}
<li class="empty-alert">No items in database.</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/chart.legend.js' %}"></script>
<script type="text/javascript" src="{% static 'js/randomColor.js' %}"></script>
<script>
$( document ).ready(function() {
var options = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke : true,

//String - The colour of each segment stroke
segmentStrokeColor : "#fff",

//Number - The width of each segment stroke
segmentStrokeWidth : 2,

//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout : 0, // This is 0 for Pie charts

//Number - Amount of animation steps
animationSteps : 100,

//String - Animation easing effect
animationEasing : "easeOutBounce",

//Boolean - Whether we animate the rotation of the Doughnut
animateRotate : true,

//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale : false,

// responsive: true,

//String - A legend template
legendTemplate : {% verbatim %}"<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"{% endverbatim %}
}

var character_colors = randomColor({hue: 'red', count: {{ characters|length }}});
var kart_colors = randomColor({hue: 'blue', count: {{ karts|length }}});
var wheel_colors = randomColor({hue: 'green', count: {{ wheels|length }}});
var glider_colors = randomColor({hue: 'yellow', count: {{ gliders|length }}});

var data = [
{% for key, value in characters %}
{% if value.count > 0 %}
{
value: {{ value.count }},
color: character_colors.pop(),
// highlight: "#FF5A5E",
label: "{{ key }}"
},
{% endif %}
{% endfor %}
]
var ctx = document.getElementById("charactersChart").getContext("2d");
var charactersChart = new Chart(ctx).Pie(data, options);
// var legend = charactersChart.generateLegend();
// $('#charactersChart').after(legend);
legend(document.getElementById('charactersLegend'), data);

var data = [
{% for key, value in karts %}
{% if value.count > 0 %}
{
value: {{ value.count }},
color: kart_colors.pop(),
label: "{{ key }}"
},
{% endif %}
{% endfor %}
]
var ctx = document.getElementById("kartsChart").getContext("2d");
var kartsChart = new Chart(ctx).Pie(data, options);
// var legend = kartsChart.generateLegend();
// $('#kartsChart').after(legend);
legend(document.getElementById('kartsLegend'), data);

var data = [
{% for key, value in wheels %}
{% if value.count > 0 %}
{
value: {{ value.count }},
color: wheel_colors.pop(),
label: "{{ key }}"
},
{% endif %}
{% endfor %}
]
var ctx = document.getElementById("wheelsChart").getContext("2d");
var wheelsChart = new Chart(ctx).Pie(data, options);
// var legend = wheelsChart.generateLegend();
// $('#wheelsChart').after(legend);
legend(document.getElementById('wheelsLegend'), data);

var data = [
{% for key, value in gliders %}
{% if value.count > 0 %}
{
value: {{ value.count }},
color: glider_colors.pop(),
label: "{{ key }}"
},
{% endif %}
{% endfor %}
]
var ctx = document.getElementById("glidersChart").getContext("2d");
var glidersChart = new Chart(ctx).Pie(data, options);
// var legend = glidersChart.generateLegend();
// $('#glidersChart').after(legend);
legend(document.getElementById('glidersLegend'), data);
});
</script>
{% endblock %}
29 changes: 28 additions & 1 deletion kartographer/comparison/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import logging
import random
import os
import operator
import datetime

from django.conf import settings
Expand Down Expand Up @@ -48,6 +49,11 @@ def fetch_random_quote():
return random.choice(quotes)


def random_hexcolor():
r = lambda: random.randint(0, 255)
return ('#%02X%02X%02X' % (r(), r(), r()))


def home(request):
"""Display the visitor's config list and form to add a new config."""
# Convert config_list tuples (session variable) into KartConfig objects
Expand Down Expand Up @@ -318,9 +324,30 @@ def top(request):
log('Displaying top page', request)

popular_lists = ConfigList.objects.order_by('-view_count')[0:10]

characters = Character.objects.select_related().all()
character_stats = {character.name: {'count': len(KartRecord.objects.filter(character__name=character.name)), 'color': random_hexcolor()} for character in characters}
character_stats = sorted(character_stats.items(), key=lambda (k, v): v['count'], reverse=True)

karts = Kart.objects.select_related().all()
kart_stats = {kart.name: {'count': len(KartRecord.objects.filter(kart__name=kart.name)), 'color': random_hexcolor()} for kart in karts}
kart_stats = sorted(kart_stats.items(), key=lambda (k, v): v['count'], reverse=True)

wheel = Wheel.objects.select_related().all()
wheel_stats = {wheel.name: {'count': len(KartRecord.objects.filter(wheel__name=wheel.name)), 'color': random_hexcolor()} for wheel in wheel}
wheel_stats = sorted(wheel_stats.items(), key=lambda (k, v): v['count'], reverse=True)

gliders = Glider.objects.select_related().all()
glider_stats = {glider.name: {'count': len(KartRecord.objects.filter(glider__name=glider.name)), 'color': random_hexcolor()} for glider in gliders}
glider_stats = sorted(glider_stats.items(), key=lambda (k, v): v['count'], reverse=True)

context = {
'popular_lists': popular_lists,
'records': KartRecord.objects.all(),
'characters': character_stats,
'karts': kart_stats,
'wheels': wheel_stats,
'gliders': glider_stats,
'update_timestamp': fetch_update_datetime(),
'quote': fetch_random_quote(),
}
Expand All @@ -329,7 +356,7 @@ def top(request):

def ajax_set_preference(request):
success = False
to_return = {'msg':u'No POST data sent.' }
to_return = {'msg': u'No POST data sent.'}
if request.method == "POST":
post = request.POST.copy()
if post.has_key('preference') and post.has_key('value'):
Expand Down
46 changes: 46 additions & 0 deletions kartographer/static/css/top.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/* ====================== */
/* Typography */
/* ====================== */
/* ====================== */
/* Layout */
/* ====================== */
@media only screen {
#charactersLegend,
#kartsLegend,
#wheelsLegend,
#glidersLegend {
display: none; }

.chart-container {
margin-left: -1em;
margin-right: -1em; }

.well {
text-align: center; }

.legend {
width: 14em;
max-height: 249px;
border: 1px solid #ccc;
float: right;
font-size: 0.6em;
overflow: hidden; }

.legend .title {
display: block;
margin: 0.5em;
border-style: solid;
border-width: 0 0 0 1em;
padding: 0 0.3em; } }
@media only screen and (min-width: 768px) {
#charactersLegend,
#kartsLegend,
#wheelsLegend,
#glidersLegend {
display: inline-block; } }
/* ====================== */
/* Color */
/* ====================== */
/* ====================== */
/* Print */
/* ====================== */
11 changes: 11 additions & 0 deletions kartographer/static/js/Chart.min.js
View file

Large diffs are not rendered by default.

20 changes: 20 additions & 0 deletions kartographer/static/js/chart.legend.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
function legend(parent, data) {
parent.className = 'legend';
var datas = data.hasOwnProperty('datasets') ? data.datasets : data;

// remove possible children of the parent
while(parent.hasChildNodes()) {
parent.removeChild(parent.lastChild);
}

datas.forEach(function(d) {
var title = document.createElement('span');
title.className = 'title';
title.style.borderColor = d.hasOwnProperty('strokeColor') ? d.strokeColor : d.color;
title.style.borderStyle = 'solid';
parent.appendChild(title);

var text = document.createTextNode(d.label);
title.appendChild(text);
});
}
Loading

0 comments on commit c040134

Please sign in to comment.