WordPress

{% extends 'contributor/layout.html.twig' %}

{% block title %}Search Analysis{% endblock %}
     {% block contributor_body %}
         <div class="app_main_inner">
             <div class="page_excerpt">
                 <h2 class="sr_heading_title">Search Analysis</h2>
                 <p class="sr_heading_intro">List of recent searches</p>
             </div>
             <div class="row">
                 <div class="col-lg-12 mb-3">
                     <input type="month" class="date_filter" min="2018-03" value="" name="month">
                 </div>
             </div>
             <div class="row">
                 <div class="col-lg-12 search_div" data-url="{{ path('search_analysis_filter') }}">
                     <div class="mb-3 card">
                         <div class="card-header">
                             <div class="card-header-title">Searches (<span class="count">{{ search_analyses|length }}</span>)</div>
                         </div>
                         <div class="datagrid ">
                             <div id="chart_bars_vertical_search" class="chart"> </div>
                         </div>
                     </div>
                 </div>

             </div>
         </div>
     {% endblock %}

{% block footer_js %}
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>

    <script type="text/javascript">

        let searchedWords = {{ helper.getSearchedWords()|slice(0,20)|json_encode|raw }};

        $("input[name='month']").change(function () {
            let val = $(this).val();
            let result_div = $(".search_div");

                $.post(
                    result_div.data("url"),
                    { month: val },

                    function (data, status) {
                        result_div.html(data.html)
                    }
                );
        });

        jQuery(function ($) {


            let searchWords = []
            let frequencies = []

            searchedWords.forEach(function (item) {
                searchWords.push(item.search);
            });

            searchedWords.forEach(function (item) {
                frequencies.push(Number(item.frequency));
            });

            Highcharts.chart('chart_bars_vertical_search', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    categories:searchWords,
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Frequency'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y} times</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    'name':'Search',
                    'data':frequencies
                }]
            });

        });
    </script>

{% endblock %}