preparing UI for chart start date selection

covid.js

@@ -1337,6 +1337,10 @@ let testAllSites = () => {
 }
 
 
+/*
+ * fun with data
+ * let's get the sites with negative new active cases
+ */
 let sitesWithNegativeNewActiveCases = () => {
     Object
     .keys(siteData)

index.html

@@ -201,6 +201,16 @@
             }
             .chart-config-container input {
                 display:none;
+            }
+            .chart-config-container label input {
+                display:inline-block;
+                background:none;
+                border:none;
+                font-weight: bold;
+                color:springgreen;
+            }
+            .chart-config-container label input[type=date] {
+                
             }
             .chart-config-container label {
                 padding: 0.5em;
@@ -221,6 +231,7 @@
             .chart-config-container input#chart-cases-new:checked ~ .chart-config-group label[for=chart-cases-new],
             .chart-config-container input#chart-values-absolute:checked ~ .chart-config-group label[for=chart-values-absolute],
             .chart-config-container input#chart-values-per-million:checked ~ .chart-config-group label[for=chart-values-per-million],
+            .chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date],
             .chart-config-container input#chart-start-first:checked ~ .chart-config-group label[for=chart-start-first],
             .chart-config-container input#chart-start-tenth:checked ~ .chart-config-group label[for=chart-start-tenth],
             .chart-config-container input#chart-start-hundredth:checked ~ .chart-config-group label[for=chart-start-hundredth],
@@ -229,6 +240,9 @@
                 color:black;
                 box-shadow: 0px 0px 2px springgreen;
             }
+            .chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date] > input {
+                color:black;
+            }
             .chart-config-group {
                 display:flex;
                 justify-content: center;
@@ -312,6 +326,7 @@
             <input type="radio" id="chart-cases-new" name="chart-cases" value="new"/>
             <input type="radio" id="chart-values-absolute" name="chart-values" value="absolute" checked="checked"/>
             <input type="radio" id="chart-values-per-million" name="chart-values" value="per-million"/>
+            <input type="radio" id="chart-start-date" name="chart-start" value="date"/>
             <input type="radio" id="chart-start-first" name="chart-start" value="1"/>
             <input type="radio" id="chart-start-tenth" name="chart-start" value="10" checked="checked"/>
             <input type="radio" id="chart-start-hundredth" name="chart-start" value="100"/>
@@ -344,7 +359,9 @@
                 <label for="chart-values-per-million">per 1M</label>
             </div>
             <div class="chart-config-group">
-                <p>Start from:</p>
+                <p>Start</p>
+                <label for="chart-start-date">on: <input type="date" value="2020-01-01"/></label>
+                <p>, or from:</p>
                 <label for="chart-start-first">1st</label>
                 <label for="chart-start-tenth">10th</label>
                 <label for="chart-start-hundredth">100th</label>