refactoring fetch for activity chart

app/assets/javascripts/activityChart.js

@@ -185,41 +185,39 @@
             return;
         }
 
-        var daily_stats = activityChartContainer.getAttribute('data-daily-stats');
+        var url = type === 'service' ? `/daily_stats.json` : `/daily_stats_by_user.json`;
-        var daily_stats_by_user = activityChartContainer.getAttribute('data-daily_stats_by_user');
+        fetch(url)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log(data)
+                var labels = [];
+                var deliveredData = [];
+                var failedData = [];
 
-        try {
+                for (var dateString in data) {
-            // Choose the correct JSON string based on the type ('service' or 'user'),
+                    if (data.hasOwnProperty(dateString)) {
-            // replace single quotes with double quotes to ensure valid JSON format,
+                        const dateParts = dateString.split('-');
-            // then parse the JSON string into a JavaScript object.
+                        const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`;
-            var statsJson = type === 'service' ? daily_stats : daily_stats_by_user;
-            statsJson = statsJson.replace(/'/g, '"');
-            data = JSON.parse(statsJson);
-        } catch (error) {
-            console.error('Error parsing JSON data:', error);
-            return;
-        }
-        var labels = [];
-        var deliveredData = [];
-        var failedData = [];
 
-        for (var dateString in data) {
+                        labels.push(formattedDate);
-            if (data.hasOwnProperty(dateString)) {
+                        deliveredData.push(data[dateString].sms.delivered);
-                const dateParts = dateString.split('-');
+                        failedData.push(data[dateString].sms.failure);
-                const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`;
+                    }
+                }
 
-                labels.push(formattedDate);
+                try {
-                deliveredData.push(data[dateString].sms.delivered);
+                    createChart('#weeklyChart', labels, deliveredData, failedData);
-                failedData.push(data[dateString].sms.failure);
+                    createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
-            }
+                } catch (error) {
-        }
+                    console.error('Error creating chart or table:', error);
-
+                }
-        try {
+            })
-            createChart('#weeklyChart', labels, deliveredData, failedData);
+            .catch(error => console.error('Error fetching daily stats:', error));
-            createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
-        } catch (error) {
-            console.error('Error creating chart or table:', error);
-        }
     };
 
     const handleDropdownChange = function(event) {

app/main/views/dashboard.py

@@ -53,17 +53,12 @@ def service_dashboard(service_id):
     free_sms_allowance = billing_api_client.get_free_sms_fragment_limit_for_year(
         current_service.id,
     )
-    date_range = get_stats_date_range()
     usage_data = get_annual_usage_breakdown(yearly_usage, free_sms_allowance)
     sms_sent = usage_data["sms_sent"]
     sms_allowance_remaining = usage_data["sms_allowance_remaining"]
 
     job_response = job_api_client.get_jobs(service_id)["data"]
     service_data_retention_days = 7
-    daily_stats = get_daily_stats(service_id, date_range)
-    daily_stats_by_user = get_daily_stats_by_user(
-        service_id, current_user.id, date_range
-    )
 
     jobs = [
         {
@@ -94,24 +89,32 @@ def service_dashboard(service_id):
         service_data_retention_days=service_data_retention_days,
         sms_sent=sms_sent,
         sms_allowance_remaining=sms_allowance_remaining,
-        daily_stats=daily_stats,
-        daily_stats_by_user=daily_stats_by_user,
     )
 
 
-def get_daily_stats(service_id, date_range):
+@main.route("/daily_stats.json")
-    return service_api_client.get_service_notification_statistics_by_day(
+def get_daily_stats():
+    service_id=session.get('service_id')
+    date_range = get_stats_date_range()
+
+    stats = service_api_client.get_service_notification_statistics_by_day(
         service_id, start_date=date_range["start_date"], days=date_range["days"]
     )
+    return jsonify(stats)
 
 
-def get_daily_stats_by_user(service_id, user_id, date_range):
+@main.route("/daily_stats_by_user.json")
-    return service_api_client.get_user_service_notification_statistics_by_day(
+def get_daily_stats_by_user():
+    service_id=session.get('service_id')
+    date_range = get_stats_date_range()
+    user_id =current_user.id
+    stats = service_api_client.get_user_service_notification_statistics_by_day(
         service_id,
         user_id,
         start_date=date_range["start_date"],
         days=date_range["days"],
     )
+    return jsonify(stats)
 
 
 @main.route("/services/<uuid:service_id>/dashboard.json")

app/templates/views/dashboard/dashboard.html

@@ -32,7 +32,7 @@
     <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">
       Activity snapshot
     </h2>
-    <div id="activityChartContainer" data-daily-stats="{{ daily_stats }}" data-daily_stats_by_user="{{ daily_stats_by_user }}">
+    <div id="activityChartContainer">
       <form class="usa-form">
         <label class="usa-label" for="options">Account</label>
         <select class="usa-select margin-bottom-2" name="options" id="options">