<!DOCTYPE html> <html> <head> <title>User Account - AIL</title> <link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}"> <!-- Core CSS --> <link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/dataTables.bootstrap.min.css') }}" rel="stylesheet"> <!-- JS --> <script src="{{ url_for('static', filename='js/jquery.js')}}"></script> <script src="{{ url_for('static', filename='js/helper.js')}}"></script> <script src="{{ url_for('static', filename='js/popper.min.js')}}"></script> <script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script> <script src="{{ url_for('static', filename='js/jquery.dataTables.min.js')}}"></script> <script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js')}}"></script> <script src="{{ url_for('static', filename='js/d3.v7.min.js') }}"></script> <script src="{{ url_for('static', filename='js/d3/heatmap_week_hour.js')}}"></script> <script src="{{ url_for('static', filename='js/d3/chord_directed_diagram.js')}}"></script> <script src="{{ url_for('static', filename='js/d3/timeline_basic.js')}}"></script> <script src="{{ url_for('static', filename='js/echarts.min.js')}}"></script> </head> <body> {% include 'nav_bar.html' %} <div class="container-fluid"> <div class="row"> {% include 'sidebars/sidebar_objects.html' %} <div class="col-12 col-lg-10" id="core_content"> {% include 'chats_explorer/card_user_account.html' %} <span class="mt-3"> {% include 'objects/image/block_blur_img_slider.html' %} </span> {% with translate_url=url_for('chats_explorer.objects_user_account', subtype=meta['subtype']), obj_id=meta['id'] %} {% include 'chats_explorer/block_translation.html' %} {% endwith %} {% if meta['chats'] %} <h4 class="mx-5 mt-2 text-secondary">User All Messages:</h4> <div id="heatmapweekhourall"></div> <h5>Messages by year:</h5> <div> <div class="row"> <div class="col-12 col-lg-11"> <div id="heatmapyear" style="width: 100%;height: 300px;"></div> </div> <div class="col-12 col-lg-1"> {% for year in meta['years'] %} <div><button class="btn btn-info mt-1" onclick="update_heatmap_year({{ year }})">{{ year }}</button></div> {% endfor %} </div> </div> </div> <h4>Usernames:</h4> <div id="timeline_user_usernames" style="max-width: 900px"></div> <h4>Numbers of Messages Posted by Chat:</h4> <div id="chord_user_chats" style="max-width: 900px"></div> <h4>Numbers of Mentions:</h4> <div id="chord_mentions" style="max-width: 900px"></div> <h4>User Chats:</h4> {% for meta_chats in meta['chats'] %} <div class="my-2"> {% with meta=meta_chats,main_obj_id=meta['id'] %} {% include 'chats_explorer/basic_card_chat.html' %} {% endwith %} </div> {% endfor %} {% endif %} </div> </div> </div> {% include 'objects/tooltip_ail_objects.html' %} <script> $(document).ready(function(){ $("#page-Decoded").addClass("active"); $("#nav_chat").addClass("active"); {# {% if meta['subchannels'] %}#} {# $('#tablesubchannels').DataTable({#} {# "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],#} {# "iDisplayLength": 10,#} {# "order": [[ 5, "desc" ]]#} {# });#} {# {% endif %}#} }); let url_t = "{{ url_for('chats_explorer.objects_user_account_usernames_timeline_json') }}?subtype={{ meta["subtype"] }}&id={{ meta["id"] }}" d3.json(url_t) .then(function(data) { create_timeline_basic('#timeline_user_usernames', data); }); d3.json("{{ url_for('chats_explorer.user_account_messages_stats_week_all') }}?subtype={{ meta['subtype'] }}&id={{ meta['id'] }}") .then(function(data) { create_heatmap_week_hour('#heatmapweekhourall', data); }) let url = "{{ url_for('chats_explorer.objects_user_account_chats_chord_json') }}?subtype={{ meta["subtype"] }}&id={{ meta["id"] }}" d3.json(url).then(function(data) { create_directed_chord_diagram('#chord_user_chats', data, 0, -1, mouseover_tooltip_ail_obj, mouseout_tooltip_ail_obj); }); let url2 = "{{ url_for('chats_explorer.objects_user_account_mentions_chord_json') }}?subtype={{ meta["subtype"] }}&id={{ meta["id"] }}" d3.json(url2).then(function(data) { create_directed_chord_diagram('#chord_mentions', data, 0, -1, mouseover_tooltip_ail_obj, mouseout_tooltip_ail_obj); }); var heatyearChart = echarts.init(document.getElementById('heatmapyear')); window.addEventListener('resize', function() { heatyearChart.resize(); }); var optionheatmap; optionheatmap = { tooltip: { position: 'top', formatter: function (p) { return p.data[0] + ': ' + p.data[1]; } }, visualMap: { min: 0, max: 100, calculable: true, orient: 'horizontal', left: '500', top: '-10' }, calendar: [ { orient: 'horizontal', range: new Date().getFullYear(), }, ], series: [ { type: 'heatmap', coordinateSystem: 'calendar', data: [] }, ] }; heatyearChart.setOption(optionheatmap); update_heatmap_year(null); function update_heatmap_year(year) { $.getJSON("{{ url_for('chats_explorer.user_account_messages_stats_year') }}?type=chat&subtype={{ meta['subtype'] }}&id={{ meta['id'] }}&year=" + year) .done(function(data) { optionheatmap['visualMap']['max'] = data['max'] optionheatmap['calendar'][0]['range'] = data['year'] optionheatmap['series'][0]['data'] = data['nb'] heatyearChart.setOption(optionheatmap) } ); } </script> </body> </html>