work on making sense of per-million in context of cfr

covid.js

@@ -1320,10 +1320,13 @@ let updateChartData = (siteSelect) => {
             borderWidth: 1,
             lineTension: 0.1
         }
+        
+        // which data are we looking at
+        var dataset = document.querySelector('input[type=radio][name=chart-data]:checked').value
 
         // population_ratio is also used as an indicator that we're doing a per-million chart
         var population_ratio = false
-        if (document.querySelector('input[type=radio][name=chart-values]:checked').value === 'per-million') {
+        if ( (dataset !== 'cfr') && document.querySelector('input[type=radio][name=chart-values]:checked').value === 'per-million') {
             population_ratio = (siteData[siteSelect.value].population / 1000000)
         }
 
@@ -1336,9 +1339,6 @@ let updateChartData = (siteSelect) => {
         } else if (population_ratio) {
             start_at = start_at * population_ratio
         }
-
-        // which data are we looking at
-        var dataset = document.querySelector('input[type=radio][name=chart-data]:checked').value
         
         // dataset name used for start-at comparisons
         if ( (dataset === 'cfr') || (dataset === 'active') ) {

index.html

@@ -330,7 +330,8 @@
             .chart-config-container input#chart-cases-cumulative:checked ~ .chart-config-group label[for=chart-cases-cumulative],
             .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-data-cfr:checked ~ .chart-config-group label[for=chart-values-absolute],
+            .chart-config-container input#chart-data-cfr:not(:checked) ~ 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],
@@ -340,6 +341,10 @@
                 color:black;
                 box-shadow: 0px 0px 2px springgreen;
             }
+            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group label[for=chart-values-per-million] {
+                opacity:0.5;
+                pointer-events: none; 
+            }
             .chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date] > input {
                 color:black;
             }
@@ -409,6 +414,10 @@
             .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .data-confirmed {
                 display:inline;
             }
+            /* doesn't make any sense for CFR */
+            .chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .per-million {
+                display:none
+            }
             .chart-config-group.chart-average {
                 display:none;
             }