fixed bugs for release

Author: rhansolo

src/App.svelte

@@ -413,9 +413,11 @@
   }
 
   .graph-container {
-    position: absolute;
+    position: relative;
+    float: right;
+    width: 410px;
     z-index: 1001;
-    bottom: 0px;
+    bottom: 382px;
     right: 10px;
     background-color: rgba(255, 255, 255, 0.9);
     padding: 5px 5px;
@@ -458,9 +460,10 @@
   }
 
   .graph-toggole-button-container {
-    position: absolute;
+    position: relative;
+    float: right;
     z-index: 1001;
-    bottom: 0px;
+    bottom: 60px;
     right: 10px;
     background-color: rgba(255, 255, 255, 0.9);
     padding: 5px 5px;
@@ -520,9 +523,10 @@
   }
 
   .time-container {
-    position: absolute;
-    bottom: 0px;
+    position: relative;
+    bottom: 10px;
     left: 10px;
+    width: 660px;
     z-index: 1002;
     background-color: rgba(255, 255, 255, 0.9);
     padding: 30px 10px;

src/Graph.svelte

@@ -156,7 +156,6 @@
 
     let currDate = parseTime(date);
     let currDateSeven = d3.timeDay.offset(currDate, -7);
-
     // peg values to max and min if out of range
     let minMax = calculateSD(sensor);
     let chartMax = minMax[1];
@@ -195,12 +194,15 @@
     let format = $sensorMap.get(sensor).format;
     if (format === 'percent') formatYTicks = d => d + '%';
     else if (format === 'raw') {
-      if (sensor.match(/num/)) {
-        //formatYTicks = d3.format('d');
-        formatYTicks = y.domain[1] - y.domain[0] > 10 ? d3.format('.0f') : d3.format('.2f');
+      const range = y.domain()[1] - y.domain()[0];
+      if (range > 10) {
+        formatYTicks = d3.format('.0f');
+      } else if (range < 1) {
+        formatYTicks = d3.format('.2f');
       } else {
-        formatYTicks = y.domain[1] - y.domain[0] > 10 ? d3.format('.0f') : d3.format('.1f');
+        formatYTicks = d3.format('.1f');
       }
+      //formatYTicks = y.domain[1] - y.domain[0] > 10 ? d3.format('.0f') : d3.format('.1f');
     }
     var formatXTicks = data.length < 6 ? d3.timeDay.every(1) : d3.timeDay.every(4);
 

src/Legend.svelte

@@ -27,8 +27,8 @@
       sts = stats.get(sens + '_' + level);
       valueMinMax = [sts.mean - 3 * sts.std, sts.mean + 3 * sts.std];
 
-      high = valueMinMax[1].toFixed(2);
-      low = Math.max(0, valueMinMax[0]).toFixed(2);
+      high = sig_figs(valueMinMax[1].toFixed(2), 3);
+      low = sig_figs(Math.max(0, valueMinMax[0]).toFixed(2), 3);
 
       logColorArr = [{ label: '0', from_color: DIRECTION_THEME.countMin, to_color: DIRECTION_THEME.countMin }];
       var max = Math.log(valueMinMax[1]) / Math.log(10);
@@ -49,12 +49,12 @@
       sts = stats.get(sens);
       valueMinMax = [sts.mean - 3 * sts.std, sts.mean + 3 * sts.std];
       if ($sensorMap.get($currentSensor).format === 'raw') {
-        high = valueMinMax[1].toFixed(2);
-        low = Math.max(0, valueMinMax[0]).toFixed(2);
+        high = sig_figs(valueMinMax[1].toFixed(2), 3);
+        low = sig_figs(Math.max(0, valueMinMax[0]).toFixed(2), 3);
         valueMinMax[0] = Math.max(0, valueMinMax[0]);
       } else {
-        high = Math.min(100, valueMinMax[1]).toFixed(2) + '% ';
-        low = Math.max(0, valueMinMax[0]).toFixed(2) + '% ';
+        high = sig_figs(Math.min(100, valueMinMax[1]).toFixed(2), 3) + '% ';
+        low = sig_figs(Math.max(0, valueMinMax[0]).toFixed(2), 3) + '% ';
         valueMinMax[1] = Math.min(100, valueMinMax[1]);
       }
       const colorScaleLinear = d3.scaleSequential(d3.interpolateYlOrRd).domain([valueMinMax[0], valueMinMax[1]]);
@@ -72,7 +72,7 @@
   }
 
   function sig_figs(value, sigFigs) {
-    return parseFloat(value).toPrecision(sigFigs);
+    return parseFloat(parseFloat(value).toPrecision(sigFigs));
   }
 </script>
 
@@ -171,7 +171,7 @@
   {:else if $currentSensor.match(/num/)}
     <div class="tick-p">
       <div class="tick" style="background: black" />
-      <p>{high ? sig_figs(high, 3) + '+' : ''}</p>
+      <p>{high ? high + '+' : ''}</p>
     </div>
     {#each logColorArr as { label, from_color, to_color }, i}
       <div class="count-p">
@@ -185,15 +185,15 @@
   {:else}
     <div class="tick-p">
       <div class="tick" style="background: black" />
-      <p>{high ? sig_figs(high, 3) + '+' : ''}</p>
+      <p>{high ? high + '+' : ''}</p>
     </div>
     <div
       class="legend-bar"
       style="background: linear-gradient(to top, {linColorArr[0]}, {linColorArr[1]}, {linColorArr[2]}, {linColorArr[3]},
       {linColorArr[4]})" />
     <div class="tick-p">
       <div class="tick" style="background: black" />
-      <p>{sig_figs(low, 3)}</p>
+      <p>{low}</p>
     </div>
   {/if}
 </div>

src/Options.svelte

@@ -220,7 +220,7 @@
         currentSensor.set(sensor);
         shouldDisplayBanner = true;
       }}>
-      <optgroup label="Indicators">
+      <optgroup label="Indicator">
         {#each Array.from($sensorMap.keys()).filter(d => !$sensorMap.get(d).official) as sensor}
           <option title={$sensorMap.get(sensor).tooltipText} value={sensor}>{$sensorMap.get(sensor).name}</option>
         {/each}

src/stores.js

@@ -54,23 +54,23 @@ export const sensors = readable(
       official: false,
     },
     {
-      name: 'Full-time work (Safegraph)',
+      name: 'Away from home 6hr+ (SG)',
       id: 'safegraph',
-      tooltipText: 'Proportion of people working full time, based on Safegraph mobility data',
-      mapTitleText: 'Proportion of people working full time, based on Safegraph mobility data',
-      chartTitleText: 'Proportion of people working full time, based on Safegraph mobility data',
+      tooltipText: 'Proportion of people spending 6 hours or more away from home, based on SafeGraph mobility data',
+      mapTitleText: 'Proportion of people spending 6 hours or more away from home, based on SafeGraph mobility data',
+      chartTitleText: 'Proportion of people spending 6 hours or more away from home, based on SafeGraph mobility data',
       yAxis: 'Proportion',
       format: 'raw',
       signal: 'full_time_work_prop',
       levels: ['county', 'state'],
       official: false,
     },
     {
-      name: 'Part-time work (Safegraph)',
+      name: 'Away from home 3-6hr (SG)',
       id: 'safegraph',
-      tooltipText: 'Proportion of people working part time, based on Safegraph mobility data',
-      mapTitleText: 'Proportion of people working part time, based on Safegraph mobility data',
-      chartTitleText: 'Proportion of people working part time, based on Safegraph mobility data',
+      tooltipText: 'Proportion of people spending 3-6 hours away from home, based on SafeGraph mobility data',
+      mapTitleText: 'Proportion of people spending 3-6 hours away from home, based on SafeGraph mobility data',
+      chartTitleText: 'Proportion of people spending 3-6 hours away from home, based on SafeGraph mobility data',
       yAxis: 'Proportion',
       format: 'raw',
       signal: 'part_time_work_prop',