<!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>