Add final configuration for the device_dashboard

This commit adds the final configuration for
device_dashboard.html.

Signed-off-by: Akarshan Kapoor <data.akarshan@icloud.com>

server/django/sensordata/templates/device_dashboard.html

@@ -107,6 +107,10 @@ <h3>Endpoint Details</h3>
                 <label for="upper_limit">Upper Reference Limit:</label>
                 <input type="number" class="form-control" id="upper_limit" placeholder="Enter upper reference limit">
             </div>
+            <div class="form-group mt-2">
+                <label for="max_y_value">Max Y-Axis Value:</label>
+                <input type="number" class="form-control" id="max_y_value" placeholder="Enter max y-axis value">
+            </div>
             <div class="mt-3">
                 <button id="applySettings" class="btn btn-primary">Apply Settings</button>
                 <button id="downloadCsv" class="btn btn-primary ml-2">Download CSV</button>
@@ -133,7 +137,7 @@ <h3 id="chartTitle">Resource Data</h3>
             var chart;
             var ctx = document.getElementById('resourceChart').getContext('2d');
 
-            function updateChart(data, lowerLimit, upperLimit) {
+            function updateChart(data, lowerLimit, upperLimit, maxYValue) {
                 if (!data.values || !data.resource_name) {
                     console.error('Invalid data received for chart update');
                     return;
@@ -146,6 +150,8 @@ <h3 id="chartTitle">Resource Data</h3>
                 // Create sequence numbers starting from 0 as labels
                 var sequenceLabels = data.values.map((_, index) => index);
 
+                var yMax = maxYValue ? parseFloat(maxYValue) : Math.max(...data.values, upperLimit);
+
                 chart = new Chart(ctx, {
                     type: 'line',
                     data: {
@@ -187,7 +193,6 @@ <h3 id="chartTitle">Resource Data</h3>
                     options: {
                         responsive: true,
                         maintainAspectRatio: false,
-                        aspectRatio: 10,
                         plugins: {
                             legend: {
                                 display: true,
@@ -245,8 +250,10 @@ <h3 id="chartTitle">Resource Data</h3>
                                         weight: 'bold',
                                     },
                                 },
+                                min: 0,
+                                max: yMax,
                                 ticks: {
-                                    beginAtZero: true,
+                                    stepSize: Math.ceil(yMax / 5),
                                     color: '#333',
                                     font: {
                                         size: 12,
@@ -263,9 +270,10 @@ <h3 id="chartTitle">Resource Data</h3>
             var resourceTypeElement = document.getElementById('resource_type');
             var lowerLimitInput = document.getElementById('lower_limit');
             var upperLimitInput = document.getElementById('upper_limit');
+            var maxYValueInput = document.getElementById('max_y_value');
             var applySettingsButton = document.getElementById('applySettings');
 
-            function fetchData(lowerLimit, upperLimit) {
+            function fetchData(lowerLimit, upperLimit, maxYValue) {
                 var endpoint = '{{ selected_endpoint.endpoint }}';
                 var resourceType = resourceTypeElement ? resourceTypeElement.value : '';
 
@@ -277,7 +285,7 @@ <h3 id="chartTitle">Resource Data</h3>
                     })
                         .then(response => response.json())
                         .then(data => {
-                            updateChart(data, lowerLimit, upperLimit);
+                            updateChart(data, lowerLimit, upperLimit, maxYValue);
                         })
                         .catch(error => console.error('Error fetching resource data:', error));
                 }
@@ -287,30 +295,33 @@ <h3 id="chartTitle">Resource Data</h3>
                 resourceTypeElement.addEventListener('change', function () {
                     var lowerLimit = parseFloat(lowerLimitInput.value) || 0;
                     var upperLimit = parseFloat(upperLimitInput.value) || 100;
-                    fetchData(lowerLimit, upperLimit);
+                    var maxYValue = parseFloat(maxYValueInput.value) || null;
+                    fetchData(lowerLimit, upperLimit, maxYValue);
                 });
             }
 
             // Apply settings button click handler
             applySettingsButton.addEventListener('click', function () {
                 var lowerLimit = parseFloat(lowerLimitInput.value) || 0;
                 var upperLimit = parseFloat(upperLimitInput.value) || 100;
-                fetchData(lowerLimit, upperLimit);
+                var maxYValue = parseFloat(maxYValueInput.value) || null;
+                fetchData(lowerLimit, upperLimit, maxYValue);
             });
 
             // Automatically fetch data every 5 seconds
             setInterval(function () {
                 var lowerLimit = parseFloat(lowerLimitInput.value) || 0;
                 var upperLimit = parseFloat(upperLimitInput.value) || 100;
-                fetchData(lowerLimit, upperLimit);
+                var maxYValue = parseFloat(maxYValueInput.value) || null;
+                fetchData(lowerLimit, upperLimit, maxYValue);
             }, 5000); // 5000 milliseconds = 5 seconds
 
             // Initial chart load if data is available
             {% if graph_data %}
             updateChart({
                 values: {{ graph_data.values | safe }},
             resource_name: '{{ selected_resource_type.name }}'
-            }, {{ percentile_25 }}, {{ percentile_75 }});
+            }, {{ percentile_25 }}, {{ percentile_75 }}, null);
         {% endif %}
         });