datatracker/ietf/templates/stats/meeting_stats_overview.html

{% load origin %}
{% origin %}
<div id="chart" class="chart-{{ stats_type }}"></div>
<script>
    var chartConf = {

        {% if stats_type == "overview" %}

            chart: {
                type: 'column',
            },
            colors: [ 'blue', 'red', 'cyan', 'orange', 'black',
                'green', 'yellow' ],
            plotOptions: {
                series: {
                    stacking: 'normal',
                    point: {
                        events: {
                            click: function () {
                                location.href = this.options.url;
                            }
                        }
                    },
                },
                column: {
                    marker: {
                        enabled: false
                    },
                    animation: false
                }
            },
            tooltip: {
                formatter: function () {
                    var s = '<b>' + this.point.name + '</b>';
                    s += '<br>' + this.point.date;
                    s += '<br>' + this.series.name + '<br> Attendees: ' + this.y;
                    return s;
                },
                shared: false
            },
            legend: {
                title: {
                    text: "Continent of the venue",
                },
                borderWidth: 1,
                align: "center",
                verticalAlign: "bottom",
                layout: "horizontal",
                enabled: true
            },


        {% else %}

            chart: {
                type: 'line',
            },
            plotOptions: {
                line: {
                    marker: {
                        enabled: false
                    },
                    animation: false
                }
            },
            tooltip: {
                formatter: function () {
                    var s = '<b>' + "IETF " + this.x + '</b>';

                    $.each(this.points, function () {
                        s += '<br>' + this.series.name + ': ' + this.y;
                    });

                    return s;
                },
                shared: true
            },
            legend: {
                align: "right",
                verticalAlign: "middle",
                layout: "vertical",
                enabled: true
            },


        {% endif %}

        title: {
            text: '{{ stats_title|escapejs }}'
        },
        xAxis: {
            tickInterval: 1,
            title: {
                text: 'Meeting'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Attendees at meeting'
            }
        },
        exporting: {
            buttons: {
                contextButton: {
                    menuItems: [
                        'printChart',
                        'separator',
                        'downloadPNG',
                        'downloadJPEG',
                        'downloadSVG',
                        'separator',
                        'downloadCSV'
                    ]
                }
            }
        },
        series: {{ chart_data }}
    };
</script>
{% if table_data %}
    <h2>Data</h2>
    <table class="table table-sm table-striped stats-data tablesorter">
        <thead>
            <tr>
                <th scope="col" data-sort="num">Meeting</th>
                <th scope="col" data-sort="date">Date</th>
                <th scope="col" data-sort="city">City</th>
                <th scope="col" data-sort="country">Country</th>
                <th scope="col" data-sort="continent">Continent</th>
                <th scope="col" data-sort="count">Attendees</th>
            </tr>
        </thead>
        <tbody>
            {% for meeting, url, count, country in table_data %}
                <tr>
                    {% if meeting.get_number > 71 %}
                        <td>
                            <a href="{{ url }}">{{ meeting.number }}</a>
                        </td>
                        <td>{{ meeting.date }}</td>
                        <td>
                            <a href="{{ url }}">{{ meeting.city }}</a>
                        </td>
                        <td>{{ country.name }}</td>
                        <td>{{ country.continent }}</td>
                        <td>{% include "stats/includes/number_with_details_cell.html" %}</td>
                    {% else %}
                        <td>{{ meeting.number }}</td>
                        <td>{{ meeting.date }}</td>
                        <td>{{ meeting.city }}</td>
                        <td>{{ country.name }}</td>
                        <td>{{ country.continent }}</td>
                        <td>{% include "stats/includes/number_with_details_cell.html" %}</td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endif %}