{% extends 'data_analysis/data_view_base.html' %}

{% block data_view %}
    <div class="row">
        <div class="col-12 justify-content-center d-flex">
            <div id="comment_count" style="width:1000px; height:600px;"></div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-12 justify-content-center d-flex">
            <div id="cate_articles_per" style="width:1000px; height:600px;"></div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-12 justify-content-center d-flex">
            <div id="article_views_rank" style="width:1000px; height:600px;"></div>
        </div>
    </div>

{% endblock %}
{% block page_js %}
    <script>
        const comment_count = echarts.init(document.getElementById('comment_count'), 'black', {renderer: 'svg'});
        const cate_articles_per = echarts.init(document.getElementById('cate_articles_per'), 'black', {renderer: 'svg'});
        const article_views_rank = echarts.init(document.getElementById('article_views_rank'), 'black', {renderer: 'svg'});
        $(
            function () {
                fetchCommentCount();
                fetchCateArticlesPer();
                fetchArticleViewsRank();
            }
        );

        function fetchCommentCount() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/data_analysis/most_comment_article/",
                dataType: 'json',
                success: function (result) {
                    comment_count.setOption(result);
                }
            });
        }
        function fetchCateArticlesPer() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/data_analysis/cate_articles_per/",
                dataType: 'json',
                success: function (result) {
                    cate_articles_per.setOption(result);
                }
            });
        }
        function fetchArticleViewsRank() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/data_analysis/article_views_rank/",
                dataType: 'json',
                success: function (result) {
                    article_views_rank.setOption(result);
                }
            });
        }
    </script>
{% endblock %}