Browse Source

work on stats page

pull/10/head
crunch 6 months ago
parent
commit
1db3f89a28
4 changed files with 113 additions and 76 deletions
  1. +94
    -53
      Consulta_project/landing/static/js/stats.js
  2. +5
    -3
      Consulta_project/landing/templates/landing/index_base.html
  3. +13
    -19
      Consulta_project/polls/templates/polls/stats.html
  4. +1
    -1
      Consulta_project/polls/views.py

+ 94
- 53
Consulta_project/landing/static/js/stats.js View File

@@ -1,69 +1,110 @@
// Selects all Divs that have Questions with answers
question_selectors = document.querySelectorAll("[data-id]");
var question_ids = [];
var answer_series = [];
var answer_labels = [];

// API URLs
question_url = "/api/questions/";
answer_url = "/api/answers/";

question_selectors.forEach(data_id => {
question_ids.push(data_id.dataset.id);
});
// Pulls QuestionIDs from all Question Divs with answers
function getQuestionIds() {
var question_ids = [];
question_selectors.forEach(data_id => {
question_ids.push(data_id.dataset.id);
});
return question_ids;
}

// Pulls Question Object from Backend API via given Question ID - this is a middleware function for getting Answer IDs from the returned Question Object
async function getQuestion(q_id) {
return await fetch(question_url + q_id).then(response => response.json());
}

async function createChartForQuestion(q_id) {
const labels = [];
const series = [];

const answers = (await getQuestion(q_id)).answers;

let index = 0;

await answers.forEach(async answerId => {
const answer = await (await fetch(answer_url + answerId)).json();

/* question_ids.forEach(question => {
fetch(question_url + question)
.then(response => {
return response.json();
})
.then(data => {
// data = Question Object
console.log(data);

data.answers.forEach(answer => {
fetch(answer_url + answer)
.then(response => {
return response.json();
})
.then(data => {
// data = Answer Object
answer_series.push()
console.log(data);
});
});
});
}); */

function getQuestions(q_ids) {
q_ids.forEach(question => {
return fetch(question_url + question).then(response => response.json());
/* console.log("Labels: " + answer.answer_string + " Series: " + answer.count); */
labels.push(answer.answer_string);
series.push(answer.count);

if (index == answers.length - 1) {
let base_target_id = "chart-"
let bar_target_id = base_target_id + q_id + "-bar";
let pie_target_id = base_target_id + q_id + "-pie"
createBarChart(series, labels, bar_target_id);
createPieChart(series, labels, pie_target_id)
} else {
index++;
}
});
}

getQuestions(question_ids).then(data => console.log(data))
function createBarChart(series, labels, target_id) {
/* console.log(series + " " + labels + " " + target_id); */
var ctx = document.getElementById(target_id).getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',

// The data for our dataset
data: {
labels: labels,
datasets: [{
label: 'Number of votes',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: series,
}],
},

function getAnswers() {
let answers_arr = [];
data.answers.forEach(answer => {
return fetch(answer_url + answer).then(response => response.json());
// Configuration options go here
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
}
});
}

function getQuestionsAndAnswers() {
return Promise.all([getQuestions(), getAnswers()]);
function createPieChart(series, labels, target_id) {
/* console.log(series + " " + labels + " " + target_id); */
var ctx = document.getElementById(target_id).getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'doughnut',

// The data for our dataset
data: {
labels: labels,
datasets: [{
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: series
}]
},

// Configuration options go here
options: {}
});
}

function createChart(series, labels, target_id) {
new Chartist.Pie(
target_id,
{
series: series,
labels: labels
},
{
donut: true,
donutWidth: 60,
startAngle: 270,
showLabel: true
}
);
// This function loops through all Divs that have Answers to their question and creates a chart
async function createCharts() {
getQuestionIds().forEach(q_id => {
createChartForQuestion(q_id)
});
}
$(document).ready(function() {
createCharts()
});

+ 5
- 3
Consulta_project/landing/templates/landing/index_base.html View File

@@ -1,18 +1,18 @@
<!DOCTYPE html>
<html font-family: 'Inter' , sans-serif;>
<html style="font-family: 'Inter' , sans-serif;">

<head>
{% load static %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>{% block title %}Consulta - polling made easy.{% endblock title %}</title>
{% block misc_scripts %}
{% endblock misc_scripts %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.4.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700">
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static "css/styles.min.css" %}">
{% block misc_scripts %}
{% endblock misc_scripts %}
</head>

<body style="font-family: Inter;">
@@ -63,6 +63,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

{% block bottom_scripts %}{% endblock %}

</body>

</html>

+ 13
- 19
Consulta_project/polls/templates/polls/stats.html View File

@@ -2,8 +2,7 @@
{% load static %}

{% block misc_scripts %}
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
{% endblock misc_scripts %}

{% block content %}
@@ -19,34 +18,26 @@

{% for question in poll.get_questions %}


{% if question.get_answers %}

<div class="row" style="margin-top: 15px;margin-bottom: 15px;">
<div class="col d-flex d-xl-flex justify-content-center justify-content-lg-center justify-content-xl-center">
<h3>{{ question.question_string }}</h3>
<div class="col d-flex justify-content-center">
<h3>"{{ question.question_string }}"</h3>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-auto" style="margin-top: 15px;margin-bottom: 15px;">
<div class="ct-chart-{{ question.id }} ct-perfect-fourth" style="padding-top: 20px;padding-bottom: 10px;" data-id={{ question.id }}>
</div>
<div class="row d-flex justify-content-center" style="margin-top: 15px;margin-bottom: 15px;">
<div class="col" style="margin-top: 15px;margin-bottom: 15px;">
<canvas id="chart-{{ question.id }}-bar" data-id={{ question.id }}></canvas>
</div>
<div class="col-auto" style="margin-top: 15px;margin-bottom: 15px;">
<div style="padding-top: 20px;padding-bottom: 10px;">
</div>
<div class="col" style="margin-top: 15px;margin-bottom: 15px;">
<canvas id="chart-{{ question.id }}-pie" data-id={{ question.id }}></canvas>
</div>
</div>
<!-- <h3 data-id={{ question.id }}>Question: {{ question.question_string }}</h3>

<div class="ct-chart-{{ question.id }}"></div> -->

{% else %}

<div class="row" style="margin-top: 15px;margin-bottom: 15px;">
<div class="col d-flex d-xl-flex justify-content-center justify-content-lg-center justify-content-xl-center">
<div class="col d-flex d-xl-flex justify-content-center">
<h3>{{ question.question_string }}</h3>
</div>
</div>
@@ -65,5 +56,8 @@
{% endfor %}
</div>
</div>
{% endblock content %}

{% block bottom_scripts %}
<script type="text/javascript" src="{% static 'js/stats.js' %}"></script>
{% endblock content %}
{% endblock %}

+ 1
- 1
Consulta_project/polls/views.py View File

@@ -19,7 +19,7 @@ class QuestionViewSet(viewsets.ModelViewSet):
serializer_class = QuestionSerializer

class AnswerViewSet(viewsets.ModelViewSet):
queryset = Answer.objects.all()
queryset = Answer.objects.all().order_by('count')
serializer_class = AnswerSerializer

def polls(request):


Loading…
Cancel
Save