aljaz/CTFd
1
0
Fork 0
mirror of https://github.com/aljazceru/CTFd.git synced 2025-12-17 22:14:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Replacing C3 with plotly

Browse Source
This commit is contained in:
CodeKevin
2016-02-05 22:50:36 -05:00
parent ad3c3c13b1
commit a4b39a1eb5
15 changed files with 246 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CTFd/static/admin/css/style.css
View File

@@ -68,20 +68,17 @@ table{
}
#score-graph{
max-height: 400px;
clear:both;
}
#keys-pie-graph{
width: 50%;
max-height: 330px;
float: left;
}
#categories-pie-graph{
width: 50%;
float: left;
max-height: 330px;
}
.chal-button{

161
CTFd/static/admin/js/team.js
View File

@@ -17,56 +17,27 @@ function scoregraph () {
var scores = []
var teamname = $('#team-id').text()
$.get('/admin/solves/'+teamid(), function( data ) {
solves = $.parseJSON(JSON.stringify(data));
solves = solves['solves']
var solves = $.parseJSON(JSON.stringify(data));
solves = solves['solves'];
if (solves.length == 0)
return
return;
for (var i = 0; i < solves.length; i++) {
times.push(solves[i].time * 1000)
scores.push(solves[i].value)
};
scores = cumulativesum(scores)
var date = moment(solves[i].time * 1000);
times.push(date.format('YYYY-MM-DD hh:mm:ss'));
scores.push(solves[i].value);
}
scores = cumulativesum(scores);
times.unshift('x1')
times.push( Math.round(new Date().getTime()) )
scores.unshift('data1')
scores.push( scores[scores.length-1] )
var chart = c3.generate({
bindto: "#score-graph",
data: {
xs: {
"data1": 'x1',
},
columns: [
times,
scores,
],
type: "area",
labels: true,
names : {
data1: teamname
}
},
axis : {
x : {
tick: {
format: function (x) {
return moment(x).local().format('LLL');
}
},
},
y:{
label: {
text: 'Score'
}
}
var data = [
{
x: times,
y: scores,
type: 'scatter'
}
});
];
Plotly.newPlot('score-graph', data);
});
}
@@ -81,79 +52,77 @@ function adjust_times () {
function keys_percentage_graph(){
// Solves and Fails pie chart
$.get('/admin/fails/'+teamid(), function(data){
res = $.parseJSON(JSON.stringify(data));
solves = res['solves']
fails = res['fails']
total = solves+fails
var res = $.parseJSON(JSON.stringify(data));
var solves = res['solves'];
var fails = res['fails'];
if (total == 0)
return
var data = [{
values: [solves, fails],
labels: ['Solves', 'Fails'],
marker: {
colors: [
"rgb(0, 209, 64)",
"rgb(207, 38, 0)"
]
},
hole: .4,
type: 'pie'
}];
var chart = c3.generate({
bindto: '#keys-pie-graph',
data: {
columns: [
['Solves', solves],
['Fails', fails],
],
type : 'donut'
},
color: {
pattern: ["#00D140", "#CF2600"]
},
donut: {
title: "Solves vs Fails",
}
});
var layout = {
height: 400,
width: 500
};
Plotly.newPlot('keys-pie-graph', data, layout);
});
}
function category_breakdown_graph(){
$.get('/admin/solves/'+teamid(), function(data){
solves = $.parseJSON(JSON.stringify(data));
solves = solves['solves']
var solves = $.parseJSON(JSON.stringify(data));
solves = solves['solves'];
if (solves.length == 0)
return
return;
categories = []
var categories = [];
for (var i = 0; i < solves.length; i++) {
categories.push(solves[i].category)
};
}
keys = categories.filter(function(elem, pos) {
var keys = categories.filter(function (elem, pos) {
return categories.indexOf(elem) == pos;
})
});
data = []
var counts = [];
for (var i = 0; i < keys.length; i++) {
temp = []
count = 0
var count = 0;
for (var x = 0; x < categories.length; x++) {
if (categories[x] == keys[i]){
count++
count++;
}
};
temp.push(keys[i])
temp.push(count)
data.push(temp)
}
counts.push(count)
}
var data = [{
values: counts,
labels: categories,
hole: .4,
type: 'pie'
}];
var layout = {
height: 400,
width: 500
};
var chart = c3.generate({
bindto: '#categories-pie-graph',
data: {
columns: data,
type : 'donut',
labels: true
},
donut: {
title: "Category Breakdown"
}
});
Plotly.newPlot('categories-pie-graph', data, layout);
});
}
category_breakdown_graph()
keys_percentage_graph()
adjust_times()
scoregraph()
category_breakdown_graph();
keys_percentage_graph();
adjust_times();
scoregraph();

3
CTFd/static/css/style.css
View File

@@ -101,19 +101,16 @@ table{
}
#score-graph{
max-height: 400px;
}
#keys-pie-graph{
width: 50%;
max-height: 330px;
float: left;
}
#categories-pie-graph{
width: 50%;
float: left;
max-height: 330px;
}
.logo{

90
CTFd/static/js/scoreboard.js
View File

@@ -48,73 +48,41 @@ function UTCtoDate(utc){
return d;
}
function scoregraph () {
var times = []
var scores = []
$.get('/top/10', function( data ) {
scores = $.parseJSON(JSON.stringify(data));
scores = scores['scores']
var scores = $.parseJSON(JSON.stringify(data));
scores = scores['scores'];
if (Object.keys(scores).length == 0 ){
return;
}
$('#score-graph').show()
teams = Object.keys(scores)
xs_data = {}
column_data = []
colors = {}
for (var i = 0; i < teams.length; i++) {
times = []
team_scores = []
for (var x = 0; x < scores[teams[i]].length; x++) {
times.push(scores[teams[i]][x].time)
team_scores.push(scores[teams[i]][x].value)
console.log(scores[teams[i]])
colors[teams[i]] = colorhash(scores[teams[i]][x].id)
};
team_scores = cumulativesum(team_scores)
times.unshift("x"+i)
// times.push( Math.round(new Date().getTime()/1000) )
team_scores.unshift(teams[i])
// team_scores.push( team_scores[team_scores.length-1] )
xs_data[teams[i]] = "x"+i
column_data.push(times)
column_data.push(team_scores)
};
var chart = c3.generate({
bindto: "#score-graph",
data: {
xs: xs_data,
columns: column_data,
type: "step",
colors: colors
// labels: true
},
axis : {
x : {
tick: {
count: 10,
format: function (x) {
return moment(x*1000).local().format('LLL');
}
},
},
y:{
label: {
text: 'Score'
}
}
},
zoom : {
enabled: true
var teams = Object.keys(scores);
var traces = [];
for(var i = 0; i < teams.length; i++){
var team_score = [];
var times = [];
for(var j = 0; j < scores[teams[i]].length; j++){
team_score.push(scores[teams[i]][j].value);
var date = moment(scores[teams[i]][j].time * 1000);
times.push(date.format('YYYY-MM-DD hh:mm:ss'));
}
});
var trace = {
x: times,
y: scores,
mode: 'lines+markers',
name: teams[i]
}
traces.push(trace);
}
var layout = {
title: 'Top 10 Teams'
};
console.log(traces);
Plotly.newPlot('score-graph', traces, layout);
$('#score-graph').show()
});
}

198
CTFd/static/js/team.js
View File

@@ -4,13 +4,13 @@ function teamid (){
}
function colorhash (x) {
color = ""
color = "";
for (var i = 20; i <= 60; i+=20){
x += i
x *= i
color += x.toString(16)
};
return "#" + color.substring(0, 6)
x += i;
x *= i;
color += x.toString(16);
}
return "#" + color.substring(0, 6);
}
function cumulativesum (arr) {
@@ -21,141 +21,105 @@ function cumulativesum (arr) {
return result
}
function scoregraph () {
function scoregraph() {
var times = []
var scores = []
var teamname = $('#team-id').text()
$.get('/solves/'+teamid(), function( data ) {
solves = $.parseJSON(JSON.stringify(data));
solves = solves['solves']
$.get('/solves/' + teamid(), function (data) {
var solves = $.parseJSON(JSON.stringify(data));
solves = solves['solves'];
if (solves.length == 0)
return
return;
for (var i = 0; i < solves.length; i++) {
times.push(solves[i].time * 1000)
scores.push(solves[i].value)
};
scores = cumulativesum(scores)
var date = moment(solves[i].time * 1000);
times.push(date.format('YYYY-MM-DD hh:mm:ss'));
scores.push(solves[i].value);
}
scores = cumulativesum(scores);
times.unshift('x1')
// times.push( Math.round(new Date().getTime()) )
scores.unshift('data1')
// scores.push( scores[scores.length-1] )
var chart = c3.generate({
bindto: "#score-graph",
data: {
xs: {
"data1": 'x1',
},
columns: [
times,
scores,
],
type: "area-step",
colors: {
data1: colorhash(teamid()),
},
labels: true,
names : {
data1: teamname
}
},
axis : {
x : {
tick: {
format: function (x) {
return moment(x).local().format('M/D h:mm:ss');
}
},
},
y:{
label: {
text: 'Score'
}
}
},
zoom : {
enabled: true
var data = [
{
x: times,
y: scores,
type: 'scatter'
}
});
];
Plotly.newPlot('score-graph', data);
});
}
function keys_percentage_graph(){
function keys_percentage_graph() {
// Solves and Fails pie chart
$.get('/fails/'+teamid(), function(data){
res = $.parseJSON(JSON.stringify(data));
solves = res['solves']
fails = res['fails']
total = solves+fails
$.get('/fails/' + teamid(), function (data) {
var res = $.parseJSON(JSON.stringify(data));
var solves = res['solves'];
var fails = res['fails'];
if (total == 0)
return
var data = [{
values: [solves, fails],
labels: ['Solves', 'Fails'],
marker: {
colors: [
"rgb(0, 209, 64)",
"rgb(207, 38, 0)"
]
},
hole: .4,
type: 'pie'
}];
var chart = c3.generate({
bindto: '#keys-pie-graph',
data: {
columns: [
['Solves', solves],
['Fails', fails],
],
type : 'donut'
},
color: {
pattern: ["#00D140", "#CF2600"]
},
donut: {
title: "Solves vs Fails",
}
});
//var layout = {
// height: 400,
// width: 500
//};
Plotly.newPlot('keys-pie-graph', data);
});
}
function category_breakdown_graph(){
$.get('/solves/'+teamid(), function(data){
solves = $.parseJSON(JSON.stringify(data));
solves = solves['solves']
if (solves.length == 0)
return
function category_breakdown_graph() {
$.get('/solves/' + teamid(), function (data) {
var solves = $.parseJSON(JSON.stringify(data));
solves = solves['solves'];
categories = []
if (solves.length == 0)
return;
var categories = [];
for (var i = 0; i < solves.length; i++) {
categories.push(solves[i].category)
};
}
keys = categories.filter(function(elem, pos) {
var keys = categories.filter(function (elem, pos) {
return categories.indexOf(elem) == pos;
})
data = []
for (var i = 0; i < keys.length; i++) {
temp = []
count = 0
for (var x = 0; x < categories.length; x++) {
if (categories[x] == keys[i]){
count++
}
};
temp.push(keys[i])
temp.push(count)
data.push(temp)
};
var chart = c3.generate({
bindto: '#categories-pie-graph',
data: {
columns: data,
type : 'donut',
labels: true
},
donut: {
title: "Category Breakdown",
}
});
var counts = [];
for (var i = 0; i < keys.length; i++) {
var count = 0;
for (var x = 0; x < categories.length; x++) {
if (categories[x] == keys[i]) {
count++;
}
}
counts.push(count)
}
var data = [{
values: counts,
labels: categories,
hole: .4,
type: 'pie'
}];
//var layout = {
// height: 400,
// width: 500
//};
Plotly.newPlot('categories-pie-graph', data);
});
}

2
CTFd/templates/admin/correct_keys.html
View File

@@ -71,8 +71,6 @@
{% block scripts %}
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.js"></script>
<script src="/static/admin/js/team.js"></script>
<script>
$('#delete-solve').click(function(e){

157
CTFd/templates/admin/graphs.html
View File

@@ -18,26 +18,11 @@
{% block scripts %}
<style>
.row {
text-align: center;
}
#solves-graph{
margin-left: -50px;
}
#solves-graph > svg{
overflow: visible;
padding: 10px 50px 0 50px;
margin-right: 20px;
}
text {
font-size: 0.8em;
}
#solves-graph rect {
width: 90%;
width:100%;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.js"></script>
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
// $.distint(array)
// Unique elements in array
@@ -68,71 +53,60 @@
function solves_graph() {
$.get('/admin/graphs/solves', function(data){
solves = $.parseJSON(JSON.stringify(data));
chals = []
counts = ['Challenges']
colors = []
i = 1
var solves = $.parseJSON(JSON.stringify(data));
var chals = [];
var counts = [];
var colors = [];
var i = 1;
$.each(solves, function(key, value){
chals.push(key)
counts.push(value)
colors.push(colorhash(i++))
chals.push(key);
counts.push(value);
colors.push(colorhash(i++));
});
var chart = c3.generate({
bindto: '#solves-graph',
size: {
width: 1000,
height: 500
},
data: {
columns: [
counts
],
type: 'bar',
labels: true
},
axis: {
y: {
max: null,
min: 0,
show: false
},
x: {
type: 'categorized',
categories: chals,
show: false
},
rotated: true
}
});
var data = [{
type: 'bar',
x: chals,
y: counts,
text: counts,
orientation: 'v'
}];
var layout = {
height: 600,
width: 960
};
Plotly.newPlot('solves-graph', data, layout);
});
}
function keys_percentage_graph(){
// Solves and Fails pie chart
$.get('/admin/fails/all', function(data){
res = $.parseJSON(JSON.stringify(data));
solves = res['solves']
fails = res['fails']
total = solves+fails
var res = $.parseJSON(JSON.stringify(data));
var solves = res['solves'];
var fails = res['fails'];
var chart = c3.generate({
bindto: '#keys-pie-graph',
data: {
columns: [
['Solves', solves],
['Fails', fails],
],
type : 'donut'
var data = [{
values: [solves, fails],
labels: ['Solves', 'Fails'],
marker: {
colors: [
"rgb(0, 209, 64)",
"rgb(207, 38, 0)"
]
},
color: {
pattern: ["#00D140", "#CF2600"]
},
donut: {
title: "Solves vs Fails"
}
});
hole: .4,
type: 'pie'
}];
var layout = {
height: 400,
width: 500
};
Plotly.newPlot('keys-pie-graph', data, layout);
});
}
@@ -141,36 +115,37 @@
res = $.parseJSON(JSON.stringify(data));
res = res['categories']
data = []
categories = [];
count = [];
for (var i = 0; i < res.length; i++) {
temp = []
temp.push(res[i].category)
temp.push(res[i].count)
data.push(temp)
categories.push(res[i].category)
count.push(res[i].count)
};
var chart = c3.generate({
bindto: '#categories-pie-graph',
data: {
columns: data,
type : 'donut',
labels: true
},
donut: {
title: "Category Breakdown"
}
});
var data = [{
values: count,
labels: categories,
hole: .4,
type: 'pie'
}];
var layout = {
height: 400,
width: 500
};
Plotly.newPlot('categories-pie-graph', data, layout);
});
}
function update(){
solves_graph()
keys_percentage_graph()
category_breakdown_graph()
solves_graph();
keys_percentage_graph();
category_breakdown_graph();
}
$(function() {
update()
update();
});
setInterval(update, 300000);

6
CTFd/templates/admin/team.html
View File

@@ -13,10 +13,7 @@
{% endblock %}
{% block content %}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.css">
<div class="row">
<div id="confirm" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
@@ -151,8 +148,7 @@
{% block scripts %}
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.js"></script>
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<script src="/static/admin/js/team.js"></script>
<script>
$('#delete-solve').click(function (e) {

1
CTFd/templates/admin/teams.html
View File

@@ -1,7 +1,6 @@
{% extends "admin/base.html" %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.css">
<style>
td { text-align:center; }
.checkbox { margin: 0px !important; }

2
CTFd/templates/admin/wrong_keys.html
View File

@@ -78,8 +78,6 @@
{% block scripts %}
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.js"></script>
<script src="/static/admin/js/team.js"></script>
<script>
$('#delete-solve').click(function (e) {

3
CTFd/templates/chals.html
View File

@@ -1,7 +1,6 @@
{% extends "base.html" %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js">
<link rel="stylesheet" href="/static/css/input.css">
<style>
@@ -163,8 +162,6 @@
{% block scripts %}
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="/static/js/chalboard.js"></script>
<script src="/static/js/input.js"></script>
<script>

3
CTFd/templates/profile.html
View File

@@ -1,7 +1,6 @@
{% extends "base.html" %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.css">
<link rel="stylesheet" href="/static/css/input.css">
<style>
hr {
@@ -126,8 +125,6 @@
{% endblock %}
{% block scripts %}
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js"></script>
<script src="/static/js/input.js"></script>
{% endblock %}

5
CTFd/templates/scoreboard.html
View File

@@ -1,8 +1,6 @@
{% extends "base.html" %}
{% block content %}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.css">
<div class="jumbotron home">
<div class="container">
<h1>Scoreboard</h1>
@@ -34,7 +32,6 @@
{% block scripts %}
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<script src="/static/js/scoreboard.js"></script>
{% endblock %}

6
CTFd/templates/team.html
View File

@@ -1,7 +1,6 @@
{% extends "base.html" %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
{% endblock %}
{% block content %}
@@ -29,6 +28,8 @@
<div id="keys-pie-graph"></div>
<div id="categories-pie-graph"></div>
<div class="clearfix"></div>
<table class="table table-striped">
<thead>
<tr>
@@ -49,7 +50,6 @@
{% endblock %}
{% block scripts %}
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<script src="/static/js/team.js"></script>
{% endblock %}

1
CTFd/templates/teams.html
View File

@@ -1,7 +1,6 @@
{% extends "base.html" %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.0/c3.min.css">
{% endblock %}
{% block content %}