digest_app/templates/base_structure/layout/dashboard.html

{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
{% include "cdn_through_html/apexchart_cdn_css.html" %}
{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="row mb-4">
        <div class="col-md-6">
            <a href="{% url 'module_auth:users'%}">
                <div class="card">
                    <div class="card-body d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="font-weight-bold">No of Active Users</h6>
                            <h4 class="m-0 font-weight-bold">{{active_user_count}}</h4>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-6">
            <a href="{% url 'module_auth:users'%}">
                <div class="card d-flex">
                    <div class="card-body d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="font-weight-bold">No of Total Users</h6>
                            <h4 class="m-0 font-weight-bold">{{total_user_count}}</h4>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="widget widget-chart-three">
            <div class="widget-heading">
                <h3>Users registration by month</h3>
                <select class="form-control text-center w-25" name="user_year_select" id="user_year_select">
                        
                </select>
            </div>

            <div class="widget-content">
                <div id="user-chart">
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
        <div class="widget widget-chart-three">
            <div class="widget-heading">
                <h3>Activity Graph</h3>
                <select class="form-control text-center w-25" name="activity_year_select" id="activity_year_select">
                        
                </select>
            </div>

            <div class="widget-content">
                <div id="activity-chart">
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}

{% block javascript %}
{% include "cdn_through_html/apexchart_cdn_js.html" %}
<script>

    // Function to populate the select element with years
function populateYears(id) {
    var select = id
    var currentYear = new Date().getFullYear();

    // Add options for the current year and the last 5 years
    for (var i = 0; i < 4; i++) {
        var option = document.createElement("option");
        option.value = currentYear - i;
        option.textContent = currentYear - i;
        select.appendChild(option);
    }
}


var sLineArea = {
    chart: {
        height: 350,
        type: 'area',
        toolbar: {
          show: false,
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth'
    },
    series: [
        {
            name: 'Meal',
            data: [0,0,0,0,0,0,0,0,0,0,0,0]
        }, 
        {
            name: 'Medication',
            data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },
        {
            name: 'Symptoms',
            data: [0,0,0,0,0,0,0,0,0,0,0,0]
        },
        {
            name: 'Bowel',
            data: [0,0,0,0,0,0,0,0,0,0,0,0]
        }
    ],

    xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],                
    },
    tooltip: {
        x: {
            format: 'dd/MM/yy HH:mm'
        },
    }
}

var activity_chart = new ApexCharts(
    document.querySelector("#activity-chart"),
    sLineArea
);

activity_chart.render();



function fetchActivityChartData(year) {
    $.ajax({
        url: `{% url "module_activity:chart_data"%}?year=2024`.replace("2024", year),
        type: 'GET',
        success: function(data) {
            var monthlyCounts = data.data; // Access the 'data' property of the response
            var mealData = monthlyCounts['Meal'];
            var medicationData = monthlyCounts['Medication'];
            var symptomData = monthlyCounts['Symptoms'];
            var bowelData = monthlyCounts['Bowel'];
            
            // Update the chart with the new data
            sLineArea.series[0].data = mealData;
            sLineArea.series[1].data = medicationData;
            sLineArea.series[2].data = symptomData;
            sLineArea.series[3].data = bowelData;
            activity_chart.updateSeries(sLineArea.series);
        },
        error: function(xhr, status, error) {
            console.error('Error fetching monthly counts:', error);
        }
    });
};

    var sline = {
            chart: {
                height: 350,
                type: 'line',
                zoom: {
                enabled: false
                },
                toolbar: {
                show: false,
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'straight'
            },
            series: [{
                name: "Registration",
                data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
            }],
            grid: {
                row: {
                colors: ['#f1f2f3', 'transparent'], // takes an array which will be repeated on columns
                opacity: 0.5
                },
            },
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            }
        }

var chart = new ApexCharts(
  document.querySelector("#user-chart"),
  sline
);

chart.render();


function fetchUserChartData(year) {
    $.ajax({
        url: `{% url "module_auth:user_count"%}?year=2024`.replace("2024", year),
        type: 'GET',
        success: function(data) {
            var monthlyCounts = data.data; // Access the 'data' property of the response
                        
            // Update the chart with the new data
            sline.series[0].data = monthlyCounts;
            chart.updateSeries(sline.series);
        },
        error: function(xhr, status, error) {
            console.error('Error fetching monthly counts:', error);
        }
    });
};

$(document).ready(function() {
        // Call the function to populate the select element when the page loads
        activityYear = document.getElementById("activity_year_select")
        userYear = document.getElementById("user_year_select")
        populateYears(activityYear);
        populateYears(userYear);

        // Add event listener for change event on the select element
        $(activityYear).change(function() {
            var selectedYear = $(this).val();
            fetchActivityChartData(selectedYear); // Call the fetchData function with the selected year
        });

        $(userYear).change(function() {
            var selectedYear = $(this).val();
            fetchUserChartData(selectedYear); // Call the fetchData function with the selected year
        });

        // Fetch data for the initial selected year
        var activityInitialYear = $(activityYear).val();
        var userInitialYear = $(userYear).val();
        fetchActivityChartData(activityInitialYear);
        fetchUserChartData(userInitialYear)
});

</script>

{% endblock %}