chart config reset button works

covid.js

@@ -1593,7 +1593,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
     /*document.getElementById('site-menu-button-rate').addEventListener('click', (e)=>{
         document.getElementById('menu-shown').checked = false;
     })*/
-    document.getElementById('site-menu-button-reset-settings').addEventListener('click', (e)=>{
+    document.getElementById('chart-reset-settings').addEventListener('click', (e)=>{
         // set the radio button groups to their defaults
         document
             .querySelectorAll('.chart-config-container input[type=radio]')
@@ -1609,7 +1609,9 @@ document.addEventListener('DOMContentLoaded', (e)=>{
                 r.value = r.defaultValue
             })
         // update the chart
-        updateChartSettings()
+        for (select_index=0; select_index<sitesSelects.length; select_index++) {
+            updateChartData(sitesSelects[select_index])
+        }
     })
     
     // fill out the covid data box

index.html

@@ -294,12 +294,34 @@
             .chart-config-container label input[type=date] {
                 
             }
-            .chart-config-container label {
+            .chart-config-container label,
+            .chart-config-container input[type=button] {
                 padding: 0.5em;
                 border-radius:0.2em;
                 background:#404040;
                 box-shadow: inset 0px 0px 2px #333;
             }
+            .chart-config-container input[type=button] {
+                display:inline-block;
+                border:none;
+                color:springgreen;
+                font-family: "Play Bold";
+                font-size: 100%;
+                padding-left:1em;
+                padding-right:1em;
+                background:#555;
+                box-shadow:0px 0px 2px #555;
+                font-variant: all-small-caps;
+                transition: color 0.5s, background-color 0.5s;
+            }
+            .chart-config-container input[type=button]:hover {
+                color:black;
+                background:springgreen;
+                box-shadow:0px 0px 2px springgreen;
+            }
+            .chart-config-container input[type=button]:active {
+                box-shadow:inset 0px 0px 2px #444;
+            }
             /*
              * chart controls mechanics
              */
@@ -396,8 +418,6 @@
                     <input type="button" id="site-menu-button-percentage" value="highest percentage of population infected"/>
                     <input type="button" id="site-menu-button-deaths" value="most deaths"/>
                     <input type="button" id="site-menu-button-active-drop" value="greatest drop of number of active cases"/>
-                    <p>Reset:</p>
-                    <input type="button" class="small" id="site-menu-button-reset-settings" value="chart settings"/>
                 </div>
             </div>
             <div class="site-data-container">
@@ -470,6 +490,10 @@
                 <label for="chart-start-thousandth">1000th</label>
                 <p><span class="data-confirmed">case</span><span class="data-recovered">recovery</span><span class="data-deaths">death</span><span class="data-active">active case</span><span class="per-million"> per 1M</span></p>
             </div>
+            <div class="break"></div>
+            <div class="chart-config-group">
+                <input type="button" id="chart-reset-settings" value="Reset all settings"/>
+            </div>
         </div>
         <div id="disclaimers-container">
             <h3>Disclaimers:</h3>