fabian/telegram_backup
1
0
Fork 0
mirror of https://github.com/fabianonline/telegram_backup.git synced 2024-11-23 01:06:17 +00:00
Code Issues Releases Wiki Activity

HTMLExporter: Moved from Google charts to Highcharts; implemented the heatmap.

Browse Source
This commit is contained in:
Fabian Schlenz 2016-07-26 06:42:48 +02:00
parent 24f8320a42
commit 68f8841d12
3 changed files with 118 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/main/java/de/fabianonline/telegram_backup/Database.java
View File

@ -430,25 +430,31 @@ public class Database {
public HashMap<String, Integer> getMessageMediaTypesWithCount() { public HashMap<String, Integer> getMessageMediaTypesWithCount() {
HashMap<String, Integer> map = new HashMap<String, Integer>(); HashMap<String, Integer> map = new HashMap<String, Integer>();
try { try {
int count = 0;
ResultSet rs = stmt.executeQuery("SELECT media_type, COUNT(id) FROM messages GROUP BY media_type"); ResultSet rs = stmt.executeQuery("SELECT media_type, COUNT(id) FROM messages GROUP BY media_type");
while (rs.next()) { while (rs.next()) {
String s = rs.getString(1); String s = rs.getString(1);
if (s==null) s="null"; if (s==null) {
s="null";
} else {
count += rs.getInt(2);
}
map.put(s, rs.getInt(2)); map.put(s, rs.getInt(2));
} }
map.put("any", count);
return map; return map;
} catch (Exception e) { throw new RuntimeException(e); } } catch (Exception e) { throw new RuntimeException(e); }
} }
public int[][] getMessageTimesMatrix(Integer dialog_id, Integer chat_id) { public int[][] getMessageTimesMatrix(Integer dialog_id, Integer chat_id) {
int result[][] = new int[24][7]; int result[][] = new int[7][24];
try { try {
ResultSet rs = stmt.executeQuery("SELECT STRFTIME('%H', time, 'unixepoch') AS hour, " + ResultSet rs = stmt.executeQuery("SELECT STRFTIME('%w', time, 'unixepoch') as DAY, " +
"STRFTIME('%w', time, 'unixepoch') as DAY, " + "STRFTIME('%H', time, 'unixepoch') AS hour, " +
"COUNT(id) FROM messages GROUP BY hour, day " + "COUNT(id) FROM messages GROUP BY hour, day " +
"ORDER BY hour, day"); "ORDER BY hour, day");
while (rs.next()) { while (rs.next()) {
result[rs.getInt(1)][rs.getInt(2) == 0 ? 6 : rs.getInt(2)-1] = rs.getInt(3); result[rs.getInt(1) == 0 ? 6 : rs.getInt(1)-1][rs.getInt(2)] = rs.getInt(3);
} }
return result; return result;
} catch (Exception e) { throw new RuntimeException(e); } } catch (Exception e) { throw new RuntimeException(e); }

7
src/main/java/de/fabianonline/telegram_backup/exporter/HTMLExporter.java
View File

@ -118,13 +118,10 @@ public class HTMLExporter {
StringBuilder sb = new StringBuilder(); StringBuilder sb = new StringBuilder();
sb.append("["); sb.append("[");
for (int x=0; x<data.length; x++) { for (int x=0; x<data.length; x++) {
if (x>0) sb.append(", ");
sb.append("[");
for (int y=0; y<data[x].length; y++) { for (int y=0; y<data[x].length; y++) {
if (y>0) sb.append(", "); if (x>0 || y>0) sb.append(",");
sb.append(data[x][y]); sb.append("[" + x + "," + y + "," + data[x][y] + "]");
} }
sb.append("]");
} }
sb.append("]"); sb.append("]");
return sb.toString(); return sb.toString();

180
src/main/resources/templates/html/index.mustache
View File

@ -3,59 +3,109 @@
<head> <head>
<title>Telegram Backup for {{user.getUserString}}</title> <title>Telegram Backup for {{user.getUserString}}</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <meta charset="UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script type="text/javascript"> <script type="text/javascript">
google.charts.load("current", {packages:["corechart"]}); $(function() {
google.charts.setOnLoadCallback(drawChart); $('#heatmap').highcharts({
chart: {
type: 'heatmap',
},
colorAxis: {
stops: [
[0, '#000000'],
[1, '#FF0000'],
],
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
},
yAxis: {
reversed: true,
title: { text: "Hour", },
},
series: [{
name: 'Messages per hour',
data: {{heatmap_data}},
}],
});
function drawChart() { $('#chart_chat_types').highcharts({
drawChartChatTypes(); chart: {
drawChartMessageTypes(); type: 'pie',
drawChartMediaTypes(); },
} title: {
text: 'Chat types',
},
series: [{
name: 'Types',
data: [{
name: 'Dialogs',
y: {{count.dialogs}},
}, {
name: 'Group chats',
y: {{count.chats}},
}],
}],
});
function drawChartChatTypes() { $('#chart_media_types').highcharts({
var data = google.visualization.arrayToDataTable([ chart: {
['Type', 'Count'], type: 'pie',
['Dialog', {{count.dialogs}}], },
['Chat', {{count.chats}}] title: {
]); text: 'Media types',
var options = { },
title: 'Chat types', subtitle: {
legend: 'none', text: 'Click on media slice to expand',
pieSliceText: 'label', },
}; series: [{
name: 'Has media',
data: [
{name: 'No media', y: {{count.messages.media_type.null}}+0, drilldown: null},
{name: 'With media', y: {{count.messages.media_type.any}}+0, drilldown: 'With media'},
],
}],
drilldown: {
series: [{
name: 'Media types',
id: 'With media',
data: [
{name: 'Photo', y: {{count.messages.media_type.photo}}+0},
{name: 'Audio', y: {{count.messages.media_type.audio}}+0},
{name: 'Video', y: {{count.messages.media_type.video}}+0},
{name: 'Geolocation', y: {{count.messages.media_type.geo}}+0},
{name: 'Document', y: {{count.messages.media_type.document}}+0},
{name: 'Sticker', y: {{count.messages.media_type.sticker}}+0},
{name: 'Venue', y: {{count.messages.media_type.venue}}+0},
{name: 'Contact', y: {{count.messages.media_type.contact}}+0},
],
}],
},
});
var chart = new google.visualization.PieChart(document.getElementById('chart_chat_types')); $('#chart_message_types').highcharts({
chart.draw(data, options); chart: {
} type: 'pie',
},
function drawChartMediaTypes() { title: {
var data = google.visualization.arrayToDataTable([ text: 'Message types',
['Type', 'Count'], },
['No media', {{count.messages.media_type.null}}+0], ['Photo', {{count.messages.media_type.photo}}+0], series: [{
['Audio', {{count.messages.media_type.audio}}+0], ['Video', {{count.messages.media_type.video}}+0], name: 'Message types',
['Geolocation', {{count.messages.media_type.geo}}+0], ['Document', {{count.messages.media_type.document}}+0], data: [
['Sticker', {{count.messages.media_type.sticker}}+0], ['Venue', {{count.messages.media_type.venue}}+0], {name: 'Normal messages', y: {{count.messages.type.message}}+0},
['Contact', {{count.messages.media_type.contact}}+0] {name: 'Empty messages', y: {{count.messages.type.empty_message}}+0},
]); {name: 'Service messages', y: {{count.messages.type.service_message}}+0},
var options = { title: 'Media types', legend: 'none', pieSliceText: 'label' }; ],
var chart = new google.visualization.PieChart(document.getElementById('chart_media_types')); }],
chart.draw(data, options); });
} });
function drawChartMessageTypes() {
var data = google.visualization.arrayToDataTable([
['Type', 'Count'],
['Normal messages', {{count.messages.type.message}}],
['Empty messages', {{count.messages.type.empty_message}}],
['Service messages', {{count.messages.type.service_message}}]
]);
var options = { title: 'Message types', legend: 'none', pieSliceText: 'label' };
var chart = new google.visualization.PieChart(document.getElementById('chart_message_types'));
chart.draw(data, options);
}
</script> </script>
</head> </head>
@ -88,35 +138,11 @@
{{/chats}} {{/chats}}
</ul> </ul>
<!--
count.chats: {{count.chats}}
count.dialogs: {{count.dialogs}}
count.messages: {{count.messages}}
count.messages.chats: {{count.messages.chats}}
count.messages.dialogs: {{count.messages.dialogs}}
count.messages.from_me: {{count.messages.from_me}}
count.messages.type.message: {{count.messages.type.message}} <span id="heatmap" style="width: 400px; height: 500px;"></span>
count.messages.type.empty_message: {{count.messages.type.empty_message}}
count.messages.type.service_message: {{count.messages.type.service_message}}
count.messages.media_type.null: {{count.messages.media_type.null}} <span id="chart_chat_types" style="width: 400px; height: 500px;"></span>
count.messages.media_type.photo:{{count.messages.media_type.photo}} <span id="chart_message_types" style="width: 400px; height: 500px;"></span>
count.messages.media_type.audio:{{count.messages.media_type.audio}} <span id="chart_media_types" style="width: 400px; height: 500px;"></span>
count.messages.media_type.video:{{count.messages.media_type.video}}
count.messages.media_type.geo:{{count.messages.media_type.geo}}
count.messages.media_type.document:{{count.messages.media_type.document}}
count.messages.media_type.sticker:{{count.messages.media_type.sticker}}
count.messages.media_type.venue:{{count.messages.media_type.venue}}
count.messages.media_type.contact:{{count.messages.media_type.contact}}
{{heatmap_data}}
-->
<div id="chart_chat_types" style="width: 900px; height: 500px;"></div>
<div id="chart_message_types" style="width: 900px; height: 500px;"></div>
<div id="chart_media_types" style="width: 900px; height: 500px;"></div>
</body> </body>
</html> </html>