{% extends "allianceauth/base-bs5.html" %} {% load i18n %} {% load humanize %} {% block page_title %} {% translate "Mumble" %} {% endblock page_title %} {% block header_nav_brand %} {% trans "Mumble History" %} - {{ mumble_url }} {% endblock header_nav_brand %} {% block header_nav_collapse_left %} {% endblock header_nav_collapse_left %} {% block header_nav_collapse_right %} {% endblock header_nav_collapse_right %} {% block content %}
{% translate "Server Connection History" %}
{% translate "User" %} {% translate "Display_Name" %} {% translate "Release" %} {% translate "Version" %} {% translate "Last Connection" %} {% translate "Last Disconnection" %}
{% translate "Server Connection Breakdown" %}

{% translate "Server Connection Breakdown" %}
{% translate "Version" %} {% translate "Number" %}
{% endblock content %} {% block extra_javascript %} {% include "bundles/datatables-js-bs5.html" %} {% include "bundles/filterdropdown-js.html" %} {% include "bundles/chart-js.html" %} {% include "bundles/moment-js.html" with locale=True %} {% endblock extra_javascript %} {% block extra_css %} {% include "bundles/datatables-css-bs5.html" %} {% endblock extra_css %} {% block extra_script %} $(document).ready(function () { $("#table-mumble-connection-history").DataTable({ ajax: { url: "{% url 'mumble:connection_history_data' %}", dataSrc: "connection_history_data", }, columns: [ { data: "user" }, { data: "display_name" }, { data: "release" }, { data: "version" }, { data: "last_connect" }, { data: "last_connect" }, ], order: [[4, "desc"]], processing: true, stateSave: true, stateDuration: 0, filterDropDown: { columns: [ { idx: 2, }, { idx: 3, }, ], bootstrap: true, bootstrap_version: 5, }, }); $("#table-mumble-connection-stats").DataTable({ ajax: { url: "{% url 'mumble:release_counts_data' %}", dataSrc: "release_counts_data", }, columns: [{ data: "release" }, { data: "user_count" }], order: [[1, "desc"]], processing: true, stateSave: true, stateDuration: 0, }); // Initialize empty Pie chart var ctx = document.getElementById("pieChart").getContext("2d"); var pieChart = new Chart(ctx, { type: "pie", data: { labels: [], // Initially empty datasets: [ { label: "Server Connection Breakdown", data: [], // Initially empty backgroundColor: [ "rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", ], borderColor: [ "rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", ], borderWidth: 1, }, ], }, options: { responsive: true, plugins: { legend: { position: "top", }, }, }, }); // AJAX call to dynamically update the chart $.ajax({ url: "{% url 'mumble:release_pie_chart_data' %}", // Your Django view URL that returns chart data method: "GET", success: function (data) { // Replace chart data with the data from the AJAX response pieChart.data.labels = data.labels; // Set the new labels pieChart.data.datasets[0].data = data.values; // Set the new values // Update the chart to reflect the new data pieChart.update(); }, error: function (xhr, status, error) { console.error("Error fetching pie chart data:", status, error); }, }); }); {% endblock extra_script %}