Updated chart graph function

Updated chart graph function - changed the line width and the option of the line width available in the settings. - chart graph shows dates in the scale of the time
OxfordDemSci · Jan 26, 2025 · f2f4590 · f2f4590
1 parent f1a2d2c
commit f2f4590
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 14 deletions.
diff --git a/www/public_html/css/style.css b/www/public_html/css/style.css
@@ -346,8 +346,8 @@ html, body, #map {
 
 #refreshButton {
   position: absolute;
-  top: 70px;
-  left: 30px;
+  top: 80px;
+  left: 40px;
   padding: 20px;
   z-index: 700;
   visibility: hidden;

diff --git a/www/public_html/index.html b/www/public_html/index.html
@@ -20,7 +20,7 @@
 
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css"/> 
 
-        <link rel="stylesheet" href="./css/style.css?v=63">
+        <link rel="stylesheet" href="./css/style.css?v=64">
         <!--    <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet"/>-->
 
         <link rel="stylesheet" type="text/css" href="./utils/DataTables/datatables.min.css"/>
@@ -287,10 +287,14 @@ <h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-c
                         </div>                         -->
                     </div> 
                     <div class="pt-4">  
+                            <label for="customPointRadius" class="form-label">Line stroke width [ <label id="lbLineStrokeWidth">1</label> ]</label>
+                            <input type="range" class="form-range" min="0" max="5" step="1" value="1" id="chLineStrokeWidth">
+                    </div>                     
+                    <div class="pt-2">  
                             <label for="customPointRadius" class="form-label">Point Radius [ <label id="lbPointRadius">2</label> ]</label>
-                            <input type="range" class="form-range" min="0" max="5" step="0.5" value="2" id="chPointRadius">
+                            <input type="range" class="form-range" min="0" max="5" step="1" value="2" id="chPointRadius">
                     </div>                       
-                    <div class="pt-4">  
+                    <div class="pt-2">  
                             <label for="customRangeOpacity" class="form-label">Map opacity</label>
                             <input type="range" class="form-range" min="0" max="1" step="0.1" value="0.9" id="customRangeOpacity">
                     </div>                     
@@ -515,6 +519,7 @@ <h5 class="modal-title" id="ModalPrivacyLabel">Privacy Policy</h5>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js'></script>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
 
 <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.0.1/leaflet-omnivore.min.js'></script>
 
@@ -541,7 +546,7 @@ <h5 class="modal-title" id="ModalPrivacyLabel">Privacy Policy</h5>
 <script type="text/javascript">
     window.mdebug = true;
 </script>
-<script src="./js/main.js?version=0.66" type="module"></script>
+<script src="./js/main.js?version=0.67" type="module"></script>
 
 <script type="text/javascript">
     $(document).ready(function () {

diff --git a/www/public_html/js/api_requests.js b/www/public_html/js/api_requests.js
@@ -1,5 +1,43 @@
 import * as _utils from './utils.js?version=0.11'
 
+export function getWorld_geo_db(api_url) {
+
+    var result = "";
+    $.ajax({
+        url: api_url+'national_geometries',
+        async: false,
+        type: 'get',
+        dataType: 'json',
+        success: function (data) {
+            result = data;
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(xhr.status);
+            console.log(thrownError);
+        }
+    });
+    return result;
+}
+
+export function getWorldSubNational_geo_db(api_url) {
+
+    var result = "";
+    $.ajax({
+        url: api_url+'subnational_geometries',
+        async: false,
+        type: 'get',
+        dataType: 'json',
+        success: function (data) {
+            result = data;
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(xhr.status);
+            console.log(thrownError);
+        }
+    });
+    return result;
+}
+
 export function getSettings(api_url) {
 
     var result = "";

diff --git a/www/public_html/js/main.js b/www/public_html/js/main.js
@@ -3,7 +3,7 @@ var featureByName = {};
 
 import * as _init from './init.js?version=0.72'
 import * as _utils from './utils.js?version=0.672'
-import * as _api from './api_requests.js?version=0.32'
+import * as _api from './api_requests.js?version=0.34'
 import * as _worldLayer from './worldLayer.js?version=0.5'
 import * as _worldSubNationalLayer from './worldSubNationalLayer.js?version=0.82'
 import * as _worldBoundariesLayer from './worldBoundariesLayer.js?version=0.462'
@@ -21,6 +21,7 @@ var prSubNational = false;
 var prGroundTruth = false;
 var prPredictedError = false;
 
+var loadGeoBoundaryFroDB = false;
 
 const config_plot_xy_Chart = {
             type: 'line',
@@ -78,8 +79,16 @@ const firstModelfromList = Object.keys(modelsList)[0];
 
 _init.load_models_to_menu(modelsList, initJSONSettings.descriptions);
 
-var world_geo_json = _init.getWorld_geo();
-var worldSubNational_geo_json = _init.getWorldSubNational_geo();
+    var world_geo_json = [];
+    var worldSubNational_geo_json = [];
+
+if (loadGeoBoundaryFroDB){
+    world_geo_json = _api.getWorld_geo_db(API_URL);
+    worldSubNational_geo_json = _api.getWorldSubNational_geo_db(API_URL);
+}else{
+    world_geo_json = _init.getWorld_geo();
+    worldSubNational_geo_json = _init.getWorldSubNational_geo();
+}
 
 var basemaps = {
         "OpenStreetMaps": L.tileLayer(
@@ -776,8 +785,20 @@ $('#chPointPlot').change(function () {
 });
 
 
-$('#chPointRadius').change(function () {
+$('#chPointRadius').on("input", function () {
      document.getElementById('lbPointRadius').innerHTML = $(this).val();
+});
+$('#chPointRadius').change(function () {
      var sParams = _utils.getSelectedParameters();
     _plotxyLayer.updateData(xy_Chart, data_plot, sParams[2], initJSONSettings.descriptions, prSubNational);    
-});
+});
+
+
+$('#chLineStrokeWidth').on("input", function () {
+     document.getElementById('lbLineStrokeWidth').innerHTML = $(this).val();
+});
+$('#chLineStrokeWidth').change(function () {
+    var sParams = _utils.getSelectedParameters();
+    _plotxyLayer.updateData(xy_Chart, data_plot, sParams[2], initJSONSettings.descriptions, prSubNational);    
+});
+
diff --git a/www/public_html/js/plotxyLayer.js b/www/public_html/js/plotxyLayer.js
@@ -75,12 +75,19 @@ export function updateData(c, d,  model, modelsList, _prSubNational) {
 //        labels.push(ym);
 //        dataArray.push(d[k][model][PredictedType]);
 //    }
-        let pointRadius=document.getElementById("chPointRadius").value;
+        let pointRadius=Math.round(Number(document.getElementById("chPointRadius").value));
         if ($("#chPointPlot").is(":checked")) {
               pointRadius=document.getElementById("chPointRadius").value;
         } else {
               pointRadius=0;
         }
+
+        let lineBorderWidth=Math.round(Number(document.getElementById("chLineStrokeWidth").value));
+        let lineShowLine=true; 
+        if (lineBorderWidth === 0) {
+              lineShowLine=false;
+        }       
+
 
 var min = (Math.min(...dataArray)),
     max = (Math.max(...dataArray));
@@ -105,19 +112,31 @@ var min = (Math.min(...dataArray)),
                 backgroundColor: 'rgb(255, 99, 132)',
                 borderColor: 'rgb(255, 99, 132)',
                 data: dataArray,
+                pointStyle: 'circle',
                 pointRadius: pointRadius,
+                pointHoverRadius: Math.round(pointRadius*2),
                 segment: {
-                    borderColor: ctx => skipped(ctx, 'rgb(255, 99, 132)'),
+                    borderColor: ctx => skipped(ctx, 'rgb(255, 99, 132)')
                     //borderDash: ctx => skipped(ctx, [4, 4]),
                   },
-                  spanGaps: true
+                spanGaps: true,
+                borderWidth: lineBorderWidth,
+                showLine: lineShowLine, // show line in scatter plot
+                fill: false // only show line                    
             }]
     };
 
 
     const options = {
         scales: {
             x: {
+                type: 'time',
+                time: {
+                    unit: 'year',
+                    displayFormats: {
+                            year: 'yyyy-01'
+                        }                    
+                },
                 ticks: {
                     maxRotation: 60,
                     minRotation: 60