|
|
@@ -6,12 +6,43 @@
|
|
|
{% block keywords %}irc networks{% endblock %}
|
|
|
{% block keywords-not %}{% endblock %}
|
|
|
{% block content %}
|
|
|
- <article class="ui container segment">
|
|
|
- <header class="ui icon header">
|
|
|
- <i class="sitemap icon"></i>
|
|
|
- Networks
|
|
|
- </header>
|
|
|
+ <article class="ui container">
|
|
|
+
|
|
|
<section class="ui text container">
|
|
|
+ <div class="ui four statistics">
|
|
|
+ <div class="statistic">
|
|
|
+ <div class="value">
|
|
|
+ <i class="sitemap icon"></i> {{ networks|length }}
|
|
|
+ </div>
|
|
|
+ <div class="label">
|
|
|
+ Networks
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="statistic">
|
|
|
+ <div class="value">
|
|
|
+ <i class="hashtag icon"></i> {{ channels|length }}
|
|
|
+ </div>
|
|
|
+ <div class="label">
|
|
|
+ Channels
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="statistic">
|
|
|
+ <div class="value">
|
|
|
+ <i class="users icon"></i> {{ users|length }}
|
|
|
+ </div>
|
|
|
+ <div class="label">
|
|
|
+ Users
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="statistic">
|
|
|
+ <div class="value">
|
|
|
+ <i class="comments outline icon"></i> {{ messages|length }}
|
|
|
+ </div>
|
|
|
+ <div class="label">
|
|
|
+ Messages
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="ui celled selection link list">
|
|
|
{% for network in networks %}
|
|
|
<a class="item" href="{% url 'stats:network' network.name %}">
|
|
|
@@ -32,29 +63,74 @@
|
|
|
{% endfor %}
|
|
|
</div>
|
|
|
</section>
|
|
|
+
|
|
|
<section>
|
|
|
<script type="text/javascript" src="{% static "javascript/loader.js" %}"></script>
|
|
|
<script type="text/javascript">
|
|
|
- google.charts.load("current", {packages:["corechart"]});
|
|
|
- google.charts.setOnLoadCallback(drawChart);
|
|
|
- function drawChart() {
|
|
|
- var data = google.visualization.arrayToDataTable([
|
|
|
- ['Network', 'Users seen'],
|
|
|
- {% for network, users in networklist.items %}
|
|
|
- ['{{ network }}', {{ users }}],
|
|
|
- {% endfor %}
|
|
|
-
|
|
|
- ]);
|
|
|
+ google.charts.load("current", {packages:["corechart"]});
|
|
|
+ google.charts.setOnLoadCallback(drawChart);
|
|
|
+ function drawChart() {
|
|
|
+ var data = google.visualization.arrayToDataTable([
|
|
|
+ ['Network', 'Users'],
|
|
|
+ {% for network in networklist.items %}
|
|
|
+ ['{{ network.0 }}', {{ network.1.messages }}],
|
|
|
+ {% endfor %}
|
|
|
+ ]);
|
|
|
+
|
|
|
+ var options = {
|
|
|
+ pieHole: 0.4,
|
|
|
+ legend: 'none',
|
|
|
+ pieSliceText: 'label',
|
|
|
+ };
|
|
|
+
|
|
|
+ var chart = new google.visualization.PieChart(document.getElementById('messageschart'));
|
|
|
+ chart.draw(data, options);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ <script type="text/javascript" src="{% static "javascript/loader.js" %}"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ google.charts.load("current", {packages:["corechart"]});
|
|
|
+ google.charts.setOnLoadCallback(drawChart);
|
|
|
+ function drawChart() {
|
|
|
+ var data = google.visualization.arrayToDataTable([
|
|
|
+ ['Network', 'Users'],
|
|
|
+ {% for network in networklist.items %}
|
|
|
+ ['{{ network.0 }}', {{ network.1.users }}],
|
|
|
+ {% endfor %}
|
|
|
+ ]);
|
|
|
|
|
|
- var options = {
|
|
|
- pieHole: 0.4,
|
|
|
- };
|
|
|
+ var options = {
|
|
|
+ pieHole: 0.4,
|
|
|
+ legend: 'none',
|
|
|
+ pieSliceText: 'label',
|
|
|
+ };
|
|
|
|
|
|
- var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
|
|
|
- chart.draw(data, options);
|
|
|
- }
|
|
|
+ var chart = new google.visualization.PieChart(document.getElementById('userschart'));
|
|
|
+ chart.draw(data, options);
|
|
|
+ }
|
|
|
</script>
|
|
|
- <div id="donutchart" style="width: 900px; height: 500px;"></div>
|
|
|
+
|
|
|
+ <div class="ui cards">
|
|
|
+ <div class="ui card">
|
|
|
+ <div class="content">
|
|
|
+ <div class="header">
|
|
|
+ <i class="users icon"></i>
|
|
|
+ Messages per network
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="image" id="messageschart" ></div>
|
|
|
+ </div>
|
|
|
+ <div class="ui card">
|
|
|
+ <div class="content">
|
|
|
+ <div class="header">
|
|
|
+ <i class="users icon"></i>
|
|
|
+ Users per network
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="image" id="userschart" ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
</section>
|
|
|
@@ -62,5 +138,5 @@
|
|
|
{% endblock content %}
|
|
|
{% block breadcrumbs %}
|
|
|
<i class="sitemap icon"></i>
|
|
|
- <a class"active section">Networks</a>
|
|
|
+ <a class="active section">Networks</a>
|
|
|
{% endblock %}
|