index.html.erb

<div class="col-lg-10" style="margin: 20px auto; ">

    <h2><%= raw translation('notes.stats.contributors_statistics') %></h2>
    <hr>

    <h6> See also <%= link_to "subscription statistics", stats_subscriptions_path %> </h6>
    <h5><b><%= raw translation('notes.stats.research_notes_posted_by_contributors', :note_count => @all_notes, :contributors_count => @all_contributors,
                     :time => time_ago_in_words(Node.find_by(type: 'note', status: 1).created_at)) %></b></h5>
    <br>

    <div class="row">
        <div class=col-lg-6>
            <h6> Statistics from <b><%= @start.to_formatted_s(:long)%></b> to <b><%= @end.to_formatted_s(:long)%></b> </h6>
        </div>
        <div class=col-lg-2>
            <%= form_tag request.url, method: 'get', enforce_utf8: false do %>
                <%= select_tag :options, options_for_select(["Past week", "Past month","Past year"], params[:options]), prompt: "Filter period: ",
                    class: " form-control custom-select", onchange: "this.form.submit();" %>
            <% end %>
        </div>
    </div>

    <%= render 'range' %>
</div>

<% if @questions.present? and @questions.nonzero? %>
    <br><br>
    <h4 align="center">Questions Answered vs. Unanswered</h4>
    <div align="right" id="questAns" data-width="91%"> </div>
<% end %>

<% if @popular_tags.present? %>
    <br> <br>
<h4 align="center">Popular Tags</h4>
<div id="popularTags"> </div>
<% end %>

<h4 align="center">Notes, Wikis and Comments Statistics between <%= @start.to_date%> to <%= @end.to_date%></h4>
<br>
<div id="timeline"></div>
<p><b><%= raw translation('notes.stats.edits_per_week', :count => @edits_per_week_period) %></b></p>
<p><b><%= raw translation('notes.stats.notes_per_week', :note_count => @notes_per_week_period) %></b></p>
<br>
<i> Member registration may include spam accounts </i>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
    chart: {
        
        type: "area",
        height: 500,
        foreColor: "#999",
        scroller: {
            enabled: true,
            track: {
                height: 7,
                background: '#e0e0e0'

            },
            thumb: {
                height: 10,
                background: '#94E3FF'

            },
            scrollButtons: {
                enabled: true,
                size: 9,
                borderWidth: 2,
                borderColor: '#008FFB',
                fillColor: '#008FFB'

            },
            padding: {
                left: 30,
                right: 20

            }

        },
        stacked: true,
        dropShadow: {
            enabled: true,
            enabledSeries: [0],
            top: -2,
            left: 2,
            blur: 5,
            opacity: 0.06

        }

    },
    colors: ['#00E396', '#0090FF', '#800080'],
    stroke: {
        curve: "smooth",
        width: 3

    },
    dataLabels: {
        enabled: false

    },
    series: [{
        name: 'Notes',
        data: generateWeekWiseTimeSeries(0)

    }, {
        name: 'Wikis',
        data: generateWeekWiseTimeSeries(1)
    }, {
        name: 'Comments',
        data: generateWeekWiseTimeSeries(2)

    }],
        markers: {
            size: 0,
            strokeColor: "#fff",
            strokeWidth: 3,
            strokeOpacity: 1,
            fillOpacity: 1,
            hover: {
                size: 6

            }

        }, 
        xaxis: {
            type: "datetime",
            axisBorder: {
                show: false

            },
            axisTicks: {
                show: false

            }

        },
        yaxis: {
            tickAmount: 6,
            min: 0,
            opposite: true,
            labels: {
                offsetX: 24,
                offsetY: -5

            },
            tooltip: {
                enabled: true

            }

        },
        grid: {
            padding: {
                left: -5,
                right: 5

            }

        },
        tooltip: {
            x: {
                format: "dd MMM yyyy"

            },

        },
        legend: {
            position: 'top',
            horizontalAlign: 'left'

        },
        fill: {
            type: "solid",
            fillOpacity: 0.7

        }

};

var chart = new ApexCharts(document.querySelector("#timeline"), options);

chart.render();
function generateWeekWiseTimeSeries(s) {
    var values = [
        <%= @graph_notes.values if @graph_notes.present? %>,
        <%= @graph_wikis.values if @graph_wikis.present? %>,
        <%= @graph_comments.values if @graph_comments.present? %>,
    ];

    var i = 0;
    var months_dates = <%= @graph_notes.keys if @graph_notes.present? %>;
    var count = months_dates.length;
    var months = months_dates.map(x =>  new Date(x).getTime());
    var series = [];
    while (i < count) {
        for (var j =0; j < months.length; j++) {
            series.push([months[j], values[s][i]]);
            i++;

        }
    }
    return series;
}
</script>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>

var values =  <%=  @popular_tags.values if @popular_tags.present? %>;
var data =  <%= raw (@popular_tags.keys) if @popular_tags.present? %>;
var page;

var options = {
    chart: {
        height: 500,
        type: 'bar',
        fontFamily: 'Junction Light',    
        active: {
            allowMultipleDataPointsSelection: true,
            },
        
        events: {
            dataPointSelection: function(event, chartContext, config) {
                page = data[config.selectedDataPoints];
                parent.location='/tag/'+page;
            }
        }
    },

    plotOptions: {
        bar: {
            horizontal: true,
        }
    },

    dataLabels: {
        enabled: false

    },
    series: [{
        name: 'Tag count',
        data: values

    }],

    xaxis: {
        categories: data

    }

};

var chart1 = new ApexCharts(
        document.querySelector("#popularTags"), options );
chart1.render();

</script>

<%= render 'stats/barchart' %>