Charts changed to highcharts

src/accounts/templates/accounts/profile.html

@@ -1,6 +1,7 @@
 {% extends 'base.html' %}
 {% block content %}
 {% load i18n %}
+{% load key_value %}
 <div class="row">
   <div class="col-sm-12 col-md-9">
     <div>
@@ -8,8 +9,8 @@
 		{% if solves%}
 
 	<div class="table table-dark">
-            <div class="card-body" style="padding-left:10px;">
+            <div class="card-body">
-				<canvas id="time-chart" height="100"></canvas>
+				<div id="time-chart"></div>
             </div>
   	</div>
 	<table class="table table-dark">
@@ -50,79 +51,273 @@
 		{% endif %}
 		<li class="list-group-item">{% trans "Member since" %} {{ user.date_joined|date:"Y-m-d" }}</li>
 	</ul>
-
-	<div class="right-sidebar">
-    	<ul class="list-group">
-			<li class="list-group-item">{% trans "Category Stats" %}</li>
-			<li class="list-group-item">
-				<canvas id="global-chart"></canvas>
-			</li>
-	</div>
   </div>
 </div>
 
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
+<script src="https://code.highcharts.com/highcharts.src.js"></script>
-  <script>
 
-    var pie_conf= {
+<script>
-      type: 'pie',
+	Highcharts.theme = {
-      data: {
+    colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
-        datasets: [{
+        '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
-          data: {{ globalDatas|safe }},
+    chart: {
-          backgroundColor: [
+        backgroundColor: {
-            '#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3'
+            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
-          ],
+            stops: [
-          label: 'Solved by category'
+                [0, '#1D1D1D'],
-        }],
+                [1, '#1D1D1D']
-        labels: {{ globalLabels|safe }}
+            ]
         },
-      options: {
+        style: {
-      	legend: {display: false},
+            fontFamily: '\'Unica One\', sans-serif'
-        responsive: true
+        },
+        plotBorderColor: '#606063'
+    },
+    title: {
+        style: {
+            color: '#E0E0E3',
+            textTransform: 'uppercase',
+            fontSize: '20px'
+        }
+    },
+    subtitle: {
+        style: {
+            color: '#E0E0E3',
+            textTransform: 'uppercase'
+        }
+    },
+    xAxis: {
+        gridLineColor: '#707073',
+        labels: {
+            style: {
+                color: '#E0E0E3'
+            }
+        },
+        lineColor: '#707073',
+        minorGridLineColor: '#505053',
+        tickColor: '#707073',
+        title: {
+            style: {
+                color: '#A0A0A3'
+            }
+        }
+    },
+    yAxis: {
+        gridLineColor: '#707073',
+        labels: {
+            style: {
+                color: '#E0E0E3'
+            }
+        },
+        lineColor: '#707073',
+        minorGridLineColor: '#505053',
+        tickColor: '#707073',
+        tickWidth: 1,
+        title: {
+            style: {
+                color: '#A0A0A3'
+            }
+        }
+    },
+    tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.85)',
+        style: {
+            color: '#F0F0F0'
+        }
+    },
+    plotOptions: {
+        series: {
+            dataLabels: {
+                color: '#F0F0F3',
+                style: {
+                    fontSize: '13px'
+                }
+            },
+            marker: {
+                lineColor: '#333'
+            }
+        },
+        boxplot: {
+            fillColor: '#505053'
+        },
+        candlestick: {
+            lineColor: 'white'
+        },
+        errorbar: {
+            color: 'white'
         }
-    };
-	var time_conf = {
-    	type: 'line',
-    	data: {
-        	datasets: [{
-          		data: {{ timeDatas|safe }},
-          		fill: false,
-    			borderColor: 'rgb(75, 192, 192)',
-				pointBackgroundColor: '#fff',
-				pointBorderColor: '#fff',
-    			tension: 0.1,
-          		label: 'Challenge solved'
-        	}, {
-        	}],
-        	labels: {{ timeLabels|safe }}
     },
-      	options: {
     legend: {
-      			display: false,
+        backgroundColor: '#1D1D1D',
+        itemStyle: {
+            color: '#E0E0E3'
         },
-      		scales: {
+        itemHoverStyle: {
-      			yAxes: [{
+            color: '#FFF'
-					ticks: {
-                  	  fontColor: "#D9D9D9", // this here
         },
-				}], 
+        itemHiddenStyle: {
-      			xAxes: [{
+            color: '#606063'
-					ticks: {
-                  	  fontColor: "#D9D9D9", // this here
         },
-				}],
+        title: {
-			},
+            style: {
-        	responsive: true,
+                color: '#C0C0C0'
             }
-	};
+        }
+    },
+    credits: {
+        style: {
+            color: '#666'
+        }
+    },
+    labels: {
+        style: {
+            color: '#707073'
+        }
+    },
+    drilldown: {
+        activeAxisLabelStyle: {
+            color: '#F0F0F3'
+        },
+        activeDataLabelStyle: {
+            color: '#F0F0F3'
+        }
+    },
+    navigation: {
+        buttonOptions: {
+            symbolStroke: '#DDDDDD',
+            theme: {
+                fill: '#505053'
+            }
+        }
+    },
+    // scroll charts
+    rangeSelector: {
+        buttonTheme: {
+            fill: '#505053',
+            stroke: '#000000',
+            style: {
+                color: '#CCC'
+            },
+            states: {
+                hover: {
+                    fill: '#707073',
+                    stroke: '#000000',
+                    style: {
+                        color: 'white'
+                    }
+                },
+                select: {
+                    fill: '#000003',
+                    stroke: '#000000',
+                    style: {
+                        color: 'white'
+                    }
+                }
+            }
+        },
+        inputBoxBorderColor: '#505053',
+        inputStyle: {
+            backgroundColor: '#333',
+            color: 'silver'
+        },
+        labelStyle: {
+            color: 'silver'
+        }
+    },
+    navigator: {
+        handles: {
+            backgroundColor: '#666',
+            borderColor: '#AAA'
+        },
+        outlineColor: '#CCC',
+        maskFill: 'rgba(255,255,255,0.1)',
+        series: {
+            color: '#7798BF',
+            lineColor: '#A6C7ED'
+        },
+        xAxis: {
+            gridLineColor: '#505053'
+        }
+    },
+    scrollbar: {
+        barBackgroundColor: '#808083',
+        barBorderColor: '#808083',
+        buttonArrowColor: '#CCC',
+        buttonBackgroundColor: '#606063',
+        buttonBorderColor: '#606063',
+        rifleColor: '#FFF',
+        trackBackgroundColor: '#404043',
+        trackBorderColor: '#404043'
+    }
+};
+	// Apply the theme
+	Highcharts.setOptions(Highcharts.theme);
 
-    window.onload = function() {
+	Highcharts.chart('time-chart', {
-      var globalchart = document.getElementById('global-chart').getContext('2d');
+    	title: {
-      var timechart = document.getElementById('time-chart').getContext('2d');
+    	    text: 'Points earned for each category'
-      window.globalPie = new Chart(globalchart, pie_conf);
+    	},
-      window.timePie = new Chart(timechart, time_conf);
+    	yAxis: {
-    };
+    	    title: {
-
+    	    	text: 'Points earned'
-  </script>
+    	    }
+    	},
+    	xAxis: {
+			type: 'datetime',
+    	    // Use the date format in the
+			// labels property of the chart
+			labels: {
+				formatter: function() {
+					return Highcharts.dateFormat('%d.%b %Y',
+												this.value);
+				}
+			}
+		},
+    	legend: {
+    	    layout: 'vertical',
+    	    align: 'right',
+    	    verticalAlign: 'middle'
+    	},
+    	plotOptions: {
+			pointStart: {{ user.date_joined|timestamp_fromdate }},
+			series: {
+    	    	label: {
+    	    	    connectorAllowed: false
+    	    	},
+				allowPointSelect: true,
+				marker: {
+				enabled: true
+				}
+    	    }
+    	},
+    	series: [
+			{
+				name: 'Total',
+				data: {{ solved|safe }} 
+			},
+			{% for cat in cats %}
+			{
+				name: '{{ cat.name }}',
+				data: {{ pointDatas|keyvalue:cat.name|safe }},
+				visible: false,
+			},
+			{% endfor %}
+		],
+    	responsive: {
+    	    rules: [{
+    	    	condition: {
+    	    	    maxWidth: 500
+    	    	},
+    	    	chartOptions: {
+    	    	    legend: {
+    	    	        layout: 'horizontal',
+    	    	        align: 'center',
+    	    	        verticalAlign: 'bottom'
+    	    	    }
+    	    	}
+    	    }]
+    	}
+	});
+</script>
 {% endblock %}
 

src/accounts/templatetags/key_value.py

@@ -0,0 +1,11 @@
+from django import template
+
+register = template.Library()
+
+@register.filter
+def keyvalue(dict, key):    
+    return dict[key]
+
+@register.filter
+def timestamp_fromdate(date):
+    return str(date.timestamp() * 1000).replace(',','.')

src/accounts/views/views.py

@@ -115,24 +115,33 @@ def edit(request):
 def profile(request, user_name):
 	globalLabels= []
 	globalDatas = [] 
-    timeLabels = []
-    timeDatas= [] 
 
 	user_obj = get_object_or_404(User, username=user_name)
 	cats = Category.objects.all()
-    for cat in cats:
+	pointDatas = {}
-        globalLabels.append(cat.name)
-        solved_count = CTF_flags.objects.filter(user=user_obj, ctf__category__name=cat).order_by('-flag_date').count()
-        globalDatas.append(solved_count)
 
-    solves = CTF_flags.objects.filter(user=user_obj).order_by('flag_date')
+	for cat in cats:
+		# prepare categories
+		globalLabels.append(cat.name)
+		solved_count = CTF_flags.objects.filter(user=user_obj, ctf__category__name=cat.name).order_by('-flag_date').count()
+		globalDatas.append(solved_count)
+		# get datas
 		somme = 0
-    for flag in solves:
+		solved = CTF_flags.objects.filter(user=user_obj, ctf__category__name=cat.name).order_by('flag_date')
-        timeLabels.append(flag.flag_date.strftime('%Y-%m-%d'))
+		pointDatas[cat.name] = []
+		pointDatas[cat.name].append([user_obj.date_joined.timestamp() * 1000, 0])
+		for flag in solved:
 			somme += flag.ctf.points
-        timeDatas.append(somme)
+			pointDatas[cat.name].append([flag.flag_date.timestamp() * 1000, somme])
+
 	solves = CTF_flags.objects.filter(user=user_obj).order_by('-flag_date')
-    return render(request,'accounts/profile.html', {'user':user_obj, 'solves':solves,'globalLabels': globalLabels, 'globalDatas': globalDatas, 'timeLabels': timeLabels, 'timeDatas': timeDatas})
+	solved = []
+	somme = 0
+	solved.append([user_obj.date_joined.timestamp() * 1000, 0])
+	for s in solves.reverse():
+		somme += s.ctf.points
+		solved.append([s.flag_date.timestamp() * 1000,somme])
+	return render(request,'accounts/profile.html', {'user':user_obj, 'solves':solves,'solved':solved,'globalLabels': globalLabels, 'globalDatas': globalDatas, 'pointDatas': pointDatas})
 # Create your views here.
 
 def rank(request, token):

src/templates/base.html

@@ -106,7 +106,6 @@
                 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
                 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
                 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
         </body>
 </html>