getting close to having settings in the URL

covid.js

@@ -1348,7 +1348,7 @@ let updateChartData = (siteSelect) => {
         var start_at_date = false
 
         if (start_at === 'date') {
-            start_at_date = document.querySelector('input[type=date][name=chart-start-date]').value.replace(/-0/g, '-')
+            start_at_date = document.querySelector('input[type=date][name=chart-start-from]').value.replace(/-0/g, '-')
         } else if (population_ratio) {
             start_at = start_at * population_ratio
         }
@@ -1704,17 +1704,59 @@ let getSitesFromUrlString = (sites_string) => {
             .filter(site => (site !== undefined))
 }
 
+
+/*
+ * get sites and settings from window.location.hash
+ */
+let processUrlHash = (hash) => {
+    // remove the "#" if present
+    if (hash[0] === '#') {
+        hash = hash.substr(1)
+    }
+    // ";" is used as a separator of options and sites
+    // with sites coming last
+    sites_hash = hash.split(';')
+    sites_hash = sites_hash[sites_hash.length-1]
+    
+    // return the data
+    return {
+        sites: getSitesFromUrlString(sites_hash),
+        settings: {}
+    }
+}
+
 /*
  * assemble and set the url hash
  * without firing a hashchange event
  */
 let updateUrlHash = () => {
+    // get selected sites
     var selected_sites = []
     for (let sselect of sitesSelects) {
         selected_sites.push(sselect.value.toLowerCase().replace(/[^a-z0-9]/g, '-'))
     }
+    
+    // set the radio button groups to their defaults
+    var selected_settings = []
+    document
+        .querySelectorAll('.chart-config-container input[type=radio]')
+        .forEach((r)=>{
+            // if the state is different than default
+            if (r.checked && ! r.defaultChecked) {
+                selected_settings.push(r.id.split('-').slice(-1)[0])
+            }
+        })
+    // and all other inputs to their default values
+    document
+        .querySelectorAll('.chart-config-container input:not([type=radio])')
+        .forEach((r)=>{
+            if (r.defaultValue != r.value) {
+                selected_settings.push(r.id.split('-').slice(-1)[0] + ":" + r.value)
+            }
+        })
+    
     // using History.pushState() because we don't want the onhashchange event to fire
-    history.pushState({}, '', '#' + selected_sites.join(','))
+    history.pushState({}, '', '#' + selected_settings.join(',') + ';' + selected_sites.join(','))
 }
 
 
@@ -1751,7 +1793,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
             }
         })
     })
-    document.querySelectorAll('input[type=date][name=chart-start-date]').forEach((node)=>{
+    document.querySelectorAll('input[type=date][name=chart-start-from]').forEach((node)=>{
         node.addEventListener('change', (e)=>{
             // Chrome/Chromium cannot into min/max on an input[type=date]
             if (e.target.value > e.target.max) {
@@ -1766,7 +1808,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
         })
     })
     // when the user clicks on the date picker, we can assume they want to do a start-on-a-date chart
-    document.querySelector('input[type=date][name=chart-start-date]').addEventListener('click', (e)=>{
+    document.querySelector('input[type=date][name=chart-start-from]').addEventListener('click', (e)=>{
         e.target.parentElement.click()
     })
     
@@ -1986,9 +2028,9 @@ document.addEventListener('DOMContentLoaded', (e)=>{
             document.querySelector('#covid-stats > #death-to-case > .value').innerHTML =  "~" + Math.round(data.death_to_case * 10000) / 100 + '%'
 
             // update the interface
-            document.querySelector('input[type=date][name=chart-start-date]').min =  siteData['Global'].data[0].date.replace(/-([0-9](?![0-9]))/g, '-0$1')
-            document.querySelector('input[type=date][name=chart-start-date]').value =  siteData['Global'].data[0].date.replace(/-([0-9](?![0-9]))/g, '-0$1')
-            document.querySelector('input[type=date][name=chart-start-date]').max =  data.date.replace(/-([0-9](?![0-9]))/g, '-0$1')
+            document.querySelector('input[type=date][name=chart-start-from]').min =  siteData['Global'].data[0].date.replace(/-([0-9](?![0-9]))/g, '-0$1')
+            document.querySelector('input[type=date][name=chart-start-from]').value =  siteData['Global'].data[0].date.replace(/-([0-9](?![0-9]))/g, '-0$1')
+            document.querySelector('input[type=date][name=chart-start-from]').max =  data.date.replace(/-([0-9](?![0-9]))/g, '-0$1')
 
             for (site in sites) {
                 var cOpt = document.createElement("option");
@@ -2055,7 +2097,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
         console.log(`    got hash: ${window.location.hash}`)
         
         // get the actual site names from the URL hash (sans '#')
-        hash_sites = getSitesFromUrlString(window.location.hash.substr(1))
+        hash_sites = processUrlHash(window.location.hash).sites
         
         // any site data containers to be removed?
         if (sitesSelects.length - hash_sites.length > 0) {

index.html

@@ -541,7 +541,7 @@
             <div class="break"></div>
             <div class="chart-config-group">
                 <p>Start</p>
-                <label for="chart-start-date">on: <input type="date" name="chart-start-date" value="2020-01-22" min="2020-01-22"/></label>
+                <label for="chart-start-date">on: <input type="date" name="chart-start-from" id="chart-start-from" value="2020-01-22" min="2020-01-22"/></label>
                 <p>or from:</p>
                 <label for="chart-start-first">1st</label>
                 <label for="chart-start-tenth">10th</label>